diff --git a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
index 0f663fb34..27ba022e6 100644
--- a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
+++ b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
@@ -75,12 +75,12 @@ function NoteEvent(props: Props) {
       style={{ background: 'rgba(253, 243, 155, 0.1)' }}
     >
       <div className="flex items-center w-full">
-        <div className="p-2 bg-gray-light rounded-full">
+        <div className="p-3 bg-gray-light rounded-full">
           <Icon name="quotes" color="main" />
         </div>
         <div className="ml-2">
-          <div>{props.userEmail}</div>
-          <div className="text-disabled-text">
+          <div className="text-base">{props.userEmail}</div>
+          <div className="text-disabled-text text-sm">
             {formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
           </div>
         </div>
@@ -88,26 +88,28 @@ function NoteEvent(props: Props) {
           <ItemMenu bold items={menuItems} />
         </div>
       </div>
-      <div>{props.note.message}</div>
+      <div className="text-xl my-3 overflow-y-scroll overflow-x-hidden" style={{ maxHeight: 200, maxWidth: 220 }}>{props.note.message}</div>
       <div>
         <div className="flex items-center gap-2 flex-wrap w-full">
           {props.note.tag ? (
             <div
               key={props.note.tag}
               style={{
+                // @ts-ignore
                 background: tagProps[props.note.tag],
                 userSelect: 'none',
-                minWidth: 60,
+                width: 50,
                 textAlign: 'center',
+                fontSize: 11,
               }}
-              className="rounded-full text-sm px-2 py-1 text-white"
+              className="rounded-full px-2 py-1 text-white text-sm"
             >
               {props.note.tag}
             </div>
           ) : null}
           {!props.note.isPublic ? null : (
             <>
-              <Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> Team
+              <Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> <span className="text-disabled-text">Team</span>
             </>
           )}
         </div>
diff --git a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
index e85347590..9234869a4 100644
--- a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
@@ -161,22 +161,23 @@ function CreateNote({
         />
       </div>
 
-      <div className="flex items-center">
+      <div className="flex items-center gap-2" style={{ lineHeight: '15px' }}>
         {TAGS.map((tag) => (
           <div
             key={tag}
             style={{
               background: tagActive(tag) ? tagProps[tag] : 'rgba(0,0,0, 0.38)',
               userSelect: 'none',
-              minWidth: 60,
+              minWidth: 50,
+              fontSize: 11,
             }}
-            className="cursor-pointer rounded-full justify-center px-2 py-1 mr-2 text-white flex items-center gap-2"
+            className="cursor-pointer rounded-full justify-center px-2 py-1 text-white flex items-center gap-2"
             onClick={() => addTag(tag)}
           >
-            {tagActive(tag) ? <Icon name="check-circle-fill" color="white" size={16} /> : null}
-            <span>
+            {tagActive(tag) ? <Icon name="check-circle-fill" color="white" size={13} /> : null}
+            <div>
               {tag}
-            </span>
+            </div>
           </div>
         ))}
       </div>
diff --git a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
index a85ca8af1..bdc6708e8 100644
--- a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
@@ -42,52 +42,53 @@ function ReadNote(props: Props) {
   }
 
   return (
-    <div style={{ position: 'absolute', top: '45%', left: 'calc(50% - 300px)' }}>
-      <div
-        className="flex items-start !text-lg flex-col p-4 border gap-2 rounded"
-        style={{ background: '#FFFEF5', width: 500 }}
-      >
-        <div className="flex items-center w-full">
-          <div className="p-2 bg-gray-light rounded-full">
-            <Icon name="quotes" color="main" size={16} />
-          </div>
-          <div className="ml-2">
-            <div>{props.userEmail}</div>
-            <div className="text-disabled-text">
-              {formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
+    <div onClick={props.onClose} style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }} className="flex items-center justify-center">
+        <div
+          className="flex items-start !text-lg flex-col p-4 border gap-2 rounded"
+          style={{ background: '#FFFEF5', width: 500 }}
+        >
+          <div className="flex items-center w-full">
+            <div className="p-2 bg-gray-light rounded-full">
+              <Icon name="quotes" color="main" size={16} />
+            </div>
+            <div className="ml-2">
+              <div className="text-base">{props.userEmail}</div>
+              <div className="text-disabled-text text-sm">
+                {formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
+              </div>
+            </div>
+            <div className="ml-auto cursor-pointer self-start" onClick={props.onClose}>
+              <Icon name="close" size={18} />
             </div>
           </div>
-          <div className="ml-auto cursor-pointer self-start" onClick={props.onClose}>
-            <Icon name="close" size={18} />
-          </div>
-        </div>
-        <div>{props.note.message}</div>
-        <div className="w-full">
-          <div className="flex items-center gap-2 flex-wrap w-full">
-            {props.note.tag ? (
-                  <div
-                    style={{ background: tagProps[props.note.tag], userSelect: 'none' }}
-                    className="rounded-xl text-sm px-2 py-1 text-white"
-                  >
-                    {props.note.tag}
-                  </div>
-            ) : null}
-            {!props.note.isPublic ? null : (
-              <>
-                <Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> Team
-              </>
-            )}
+          <div className="text-xl py-3 overflow-y-scroll" style={{ maxHeight: 400 }}>{props.note.message}</div>
+          <div className="w-full">
+            <div className="flex items-center gap-2 flex-wrap w-full">
+              {props.note.tag ? (
+                    <div
+                      // @ts-ignore
+                      style={{ background: tagProps[props.note.tag], userSelect: 'none', fontSize: 11 }}
+                      className="rounded-full text-sm px-2 py-1 text-white flex items-center justify-center"
+                    >
+                      {props.note.tag}
+                    </div>
+              ) : null}
+              {!props.note.isPublic ? null : (
+                <>
+                  <Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> <span className="text-disabled-text">Team</span>
+                </>
+              )}
 
-            <div
-              onClick={props.onClose}
-              className="ml-auto rounded py-2 px-4 bg-active-blue flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue-border"
-            >
-              <Icon size={16} name="play-fill" color="main" />
-              <span>Play Session</span>
+              <div
+                onClick={props.onClose}
+                className="ml-auto rounded py-2 px-4 flex items-center text-blue gap-2 cursor-pointer border border-main hover:bg-light-blue-bg"
+              >
+                <Icon size={16} name="play-fill" color="main" />
+                <span>Play Session</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
     </div>
   );
 }
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
index c3e7cc103..fbaa1ccd3 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
@@ -52,17 +52,18 @@ function NoteItem(props: Props) {
         }
       >
         <div className="flex flex-col gap-1 cursor-pointer">
-          <div>{props.note.message}</div>
+          <div className="text-xl py-3">{props.note.message}</div>
           <div className="flex items-center gap-2">
             {props.note.tag ? (
               <div
                 style={{
+                  // @ts-ignore
                   background: tagProps[props.note.tag],
                   userSelect: 'none',
-                  minWidth: 60,
-                  textAlign: 'center',
+                  width: 50,
+                  fontSize: 11,
                 }}
-                className="rounded-full px-2 py-1 mr-2 text-white"
+                className="rounded-full px-2 py-1 mr-2 text-white flex items-center justify-center"
               >
                 {props.note.tag}
               </div>
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
index f5650117f..8b9c056ed 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
@@ -9,9 +9,7 @@ function NotesList({ members }: { members: Array<Record<string, any>> }) {
   const { notesStore } = useStore();
 
   React.useEffect(() => {
-    if (!notesStore.notes.length) {
       notesStore.fetchNotes();
-    }
   }, []);
 
   const list = notesStore.notes;
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index e54ca740d..0f1cb800a 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -98,7 +98,7 @@ const SVG = (props: Props) => {
     case 'chat-dots': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/><path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z"/></svg>;
     case 'chat-right-text': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/><path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/></svg>;
     case 'chat-square-quote': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/></svg>;
-    case 'check-circle-fill': return <svg width={ `${ width }px` } height={ `${ height }px` } ><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>;
+    case 'check-circle-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>;
     case 'check-circle': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z"/></svg>;
     case 'check': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>;
     case 'chevron-double-left': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/><path d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>;
diff --git a/frontend/app/svg/icons/check-circle-fill.svg b/frontend/app/svg/icons/check-circle-fill.svg
index ed6233fbf..02213557f 100644
--- a/frontend/app/svg/icons/check-circle-fill.svg
+++ b/frontend/app/svg/icons/check-circle-fill.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
   <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
 </svg>