diff --git a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
index 8552d06dc..622d13831 100644
--- a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
+++ b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
@@ -73,7 +73,7 @@ function NoteEvent(props: Props) {
   return (
     <div
       className="flex items-start flex-col p-2 border rounded"
-      style={{ background: 'rgba(253, 243, 155, 0.1)' }}
+      style={{ background: '#FFFEF5' }}
     >
       <div className="flex items-center w-full relative">
         <div className="p-3 bg-gray-light rounded-full">
@@ -83,7 +83,7 @@ function NoteEvent(props: Props) {
           <div
             className="text-base"
             style={{
-              maxWidth: 160,
+              maxWidth: 150,
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
@@ -95,12 +95,12 @@ function NoteEvent(props: Props) {
             {formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
           </div>
         </div>
-        <div className="cursor-pointer absolute" style={{ right: -10 }}>
+        <div className="cursor-pointer absolute" style={{ right: -5 }}>
           <ItemMenu bold items={menuItems} />
         </div>
       </div>
       <div
-        className="text-xl my-3 overflow-y-scroll overflow-x-hidden"
+        className="text-base capitalize-first my-3 overflow-y-scroll overflow-x-hidden"
         style={{ maxHeight: 200, maxWidth: 220 }}
       >
         {props.note.message}
diff --git a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
index 3123a6377..edc58aa9f 100644
--- a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
@@ -4,7 +4,7 @@ import { tagProps, Note } from 'App/services/NotesService';
 import { formatTimeOrDate } from 'App/date';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
-import { TeamBadge } from 'Shared/SessionListContainer/components/Notes'
+import { TeamBadge } from 'Shared/SessionListContainer/components/Notes';
 
 interface Props {
   userEmail: string;
@@ -25,16 +25,18 @@ function ReadNote(props: Props) {
           style={{ background: '#FFFEF5', width: 400 }}
         >
           <div className="flex items-start font-semibold w-full text-xl">
-            <div style={{ flex: 9 }}>You do not have access to this note. <br /> Or it’s deleted.</div>
+            <div style={{ flex: 9 }}>
+              You do not have access to this note. <br /> Or it’s deleted.
+            </div>
             <div style={{ flex: 1 }} className="cursor-pointer ml-auto" onClick={props.onClose}>
               <Icon name="close" size={18} />
             </div>
           </div>
           <div
             onClick={props.onClose}
-            className="rounded py-2 px-4 mt-2 bg-active-blue flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue-border"
+            className="rounded py-2 px-4 mt-2 flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue"
           >
-            <Icon size={16} name="play-fill" color="main" />
+            <Icon size={20} name="play-fill" color="main" />
             <span>Play Session</span>
           </div>
         </div>
@@ -43,51 +45,54 @@ function ReadNote(props: Props) {
   }
 
   return (
-    <div 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
+      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="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 : (
-                <TeamBadge />
-              )}
-
+          <div className="ml-auto cursor-pointer self-start" onClick={props.onClose}>
+            <Icon name="close" size={18} />
+          </div>
+        </div>
+        <div className="text-xl py-3 overflow-y-scroll capitalize-first" 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
-                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"
+                // @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"
               >
-                <Icon size={16} name="play-fill" color="main" />
-                <span>Play Session</span>
+                {props.note.tag}
               </div>
+            ) : null}
+            {!props.note.isPublic ? null : <TeamBadge />}
+
+            <div
+              onClick={props.onClose}
+              className="ml-auto rounded py-2 px-4 flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue"
+            >
+              <Icon size={20} name="play-fill" color="main" />
+              <span>Play Session</span>
             </div>
           </div>
         </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/components/Session_/components/NotePopup.tsx b/frontend/app/components/Session_/components/NotePopup.tsx
index 325eec190..c5c7b7016 100644
--- a/frontend/app/components/Session_/components/NotePopup.tsx
+++ b/frontend/app/components/Session_/components/NotePopup.tsx
@@ -3,7 +3,7 @@ import { Icon } from 'UI';
 import { connectPlayer, pause } from 'Player';
 import { connect } from 'react-redux';
 import { setCreateNoteTooltip } from 'Duck/sessions';
-import cn from 'classnames'
+import cn from 'classnames';
 
 function NotePopup({
   setCreateNoteTooltip,
@@ -28,13 +28,12 @@ function NotePopup({
     <div
       onClick={toggleNotePopup}
       className={cn(
-        'mr-4 hover:bg-gray-light-shade rounded-md p-1 flex items-center', tooltipActive
-          ? 'cursor-not-allowed'
-          : 'cursor-pointer')
-      }
+        'mr-4 hover:bg-gray-light-shade rounded-md p-1 flex items-center',
+        tooltipActive ? 'cursor-not-allowed' : 'cursor-pointer'
+      )}
     >
       <Icon name="quotes" size="16" className="mr-2" />
-      Add note
+      Add Note
     </div>
   );
 }
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
index 548e94f42..60e8c30c2 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
@@ -9,7 +9,7 @@ import { ItemMenu } from 'UI';
 import copy from 'copy-to-clipboard';
 import { toast } from 'react-toastify';
 import { session } from 'App/routes';
-import TeamBadge from './TeamBadge'
+import TeamBadge from './TeamBadge';
 
 interface Props {
   note: Note;
@@ -39,11 +39,12 @@ function NoteItem(props: Props) {
     { icon: 'trash', text: 'Delete', onClick: onDelete },
   ];
 
-  const safeStrMessage = props.note.message.length > 150 ? props.note.message.slice(0, 150) + '...' : props.note.message
+  const safeStrMessage =
+    props.note.message.length > 150 ? props.note.message.slice(0, 150) + '...' : props.note.message;
   return (
     <div
-      className="flex items-center p-4 border-b"
-      style={{ background: 'rgba(253, 243, 155, 0.1)' }}
+      className="flex items-center p-2 border-b"
+      // style={{ background: '#FFFEF5' }}
     >
       <Link
         style={{ width: '90%' }}
@@ -54,8 +55,8 @@ function NoteItem(props: Props) {
             : '')
         }
       >
-        <div className="flex flex-col gap-1 cursor-pointer">
-          <div className="text-xl py-3">{safeStrMessage}</div>
+        <div className="flex flex-col gap-1 p-2 rounded cursor-pointer note-hover">
+          <div className="py-1 capitalize-first">{safeStrMessage}</div>
           <div className="flex items-center gap-2">
             {props.note.tag ? (
               <div
@@ -71,13 +72,12 @@ function NoteItem(props: Props) {
                 {props.note.tag}
               </div>
             ) : null}
-            <div className="text-disabled-text flex items-center">
-              <span className="text-figmaColors-text-primary mr-1">By </span>
+            <div className="text-disabled-text flex items-center text-sm">
+              <span className="color-gray-darkest mr-1">By </span>
               {props.userEmail},{' '}
               {formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
-              {!props.note.isPublic ? null : (
-                <TeamBadge />
-              )}
+              <div className="mx-2" />
+              {!props.note.isPublic ? null : <TeamBadge />}
             </div>
           </div>
         </div>
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteTags.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteTags.tsx
index 4af52d3ae..26e57cc58 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteTags.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteTags.tsx
@@ -34,9 +34,9 @@ function NoteTags() {
         </div>
       ))}
       <div className="ml-2" />
-      <Select name="sortNotes" plain right options={sortOptions} onChange={({ value }) => notesStore.toggleSort(value.value)} defaultValue={sortOptions[0].value} />
-      <div className="ml-2" />
       <Select name="notesOwner" plain right options={notesOwner} onChange={({ value }) => notesStore.toggleShared(value.value === '1')} defaultValue={notesOwner[0].value} />
+      <div className="ml-2" />
+      <Select name="sortNotes" plain right options={sortOptions} onChange={({ value }) => notesStore.toggleSort(value.value)} defaultValue={sortOptions[0].value} />
     </div>
   );
 }
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/TeamBadge.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/TeamBadge.tsx
index 19e507efa..3ddab831e 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/TeamBadge.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/TeamBadge.tsx
@@ -4,8 +4,8 @@ import { Icon } from 'UI'
 export default function TeamBadge() {
   return (
     <div className="flex items-center ml-2">
-      <Icon name="user-friends" className="mr-1" color="gray-dark" />
-      <span className="text-disabled-text">Team</span>
+      <Icon name="user-friends" className="mr-1" color="gray-darkest" />
+      <span className="text-disabled-text text-sm">Team</span>
     </div>
   )
 }
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
index 1a8c43b03..ebf0ad48b 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
@@ -13,88 +13,87 @@ import SessionSettingButton from '../SessionSettingButton';
 
 // @ts-ignore
 const Tab = ({ addBorder, onClick, children }) => (
-    <div
-        className={cn('py-3 cursor-pointer', {
-            'border-b color-teal border-teal': addBorder,
-        })}
-        onClick={onClick}
-    >
-        {children}
-    </div>
-)
+  <div
+    className={cn('py-3 cursor-pointer border-b', {
+      'border-b color-teal border-teal': addBorder,
+      'border-transparent': !addBorder,
+    })}
+    onClick={onClick}
+  >
+    {children}
+  </div>
+);
 
 interface Props {
-    listCount: number;
-    filter: any;
-    activeTab: string;
-    isEnterprise: boolean;
-    applyFilter: (filter: any) => void;
-    setActiveTab: (tab: any) => void;
+  listCount: number;
+  filter: any;
+  activeTab: string;
+  isEnterprise: boolean;
+  applyFilter: (filter: any) => void;
+  setActiveTab: (tab: any) => void;
 }
 function SessionHeader(props: Props) {
-    const {
-        filter: { startDate, endDate, rangeValue },
-        activeTab,
-        isEnterprise,
-    } = props;
+  const {
+    filter: { startDate, endDate, rangeValue },
+    activeTab,
+    isEnterprise,
+  } = props;
 
-    const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
+  const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
 
-    const onDateChange = (e: any) => {
-        const dateValues = e.toJSON();
-        props.applyFilter(dateValues);
-    };
+  const onDateChange = (e: any) => {
+    const dateValues = e.toJSON();
+    props.applyFilter(dateValues);
+  };
 
-    return (
-        <div className="flex items-center px-4 justify-between">
-            <div className="flex items-center justify-between">
-                <div className="mr-3 text-lg flex items-center gap-4">
-                    <Tab
-                        onClick={() => props.setActiveTab({ type: 'all' })}
-                        addBorder={activeTab === 'all'}
-                    >
-                        <span className="font-bold">SESSIONS</span>
-                    </Tab>
-                    <Tab
-                        onClick={() => props.setActiveTab({ type: 'bookmark' })}
-                        addBorder={activeTab === 'bookmark'}
-                    >
-                        <span className="font-bold">{`${isEnterprise ? 'VAULT' : 'BOOKMARKS'}`}</span>
-                    </Tab>
-                    <Tab
-                        addBorder={activeTab === 'notes'}
-                        onClick={() => props.setActiveTab({ type: 'notes' })}
-                    >
-                        <span className="font-bold">NOTES</span>
-                    </Tab>
-                </div>
-            </div>
-
-            {activeTab !== 'notes' && activeTab !== 'bookmark' ? (
-                <div className="flex items-center">
-                    <SessionTags />
-                    <div className="mx-4" />
-                    <SelectDateRange period={period} onChange={onDateChange} right={true} />
-                    <div className="mx-2" />
-                    <SessionSort />
-                    <SessionSettingButton />
-                </div>
-            ) : null}
-            {activeTab === 'notes' && (
-                <div className="flex items-center">
-                    <NoteTags />
-                </div>
-            )}
+  return (
+    <div className="flex items-center px-4 justify-between">
+      <div className="flex items-center justify-between">
+        <div className="mr-3 text-base flex items-center gap-4">
+          <Tab onClick={() => props.setActiveTab({ type: 'all' })} addBorder={activeTab === 'all'}>
+            <span className="font-bold">SESSIONS</span>
+          </Tab>
+          <Tab
+            onClick={() => props.setActiveTab({ type: 'bookmark' })}
+            addBorder={activeTab === 'bookmark'}
+          >
+            <span className="font-bold">{`${isEnterprise ? 'VAULT' : 'BOOKMARKS'}`}</span>
+          </Tab>
+          <Tab
+            addBorder={activeTab === 'notes'}
+            onClick={() => props.setActiveTab({ type: 'notes' })}
+          >
+            <span className="font-bold">NOTES</span>
+          </Tab>
         </div>
-    );
+      </div>
+
+      {activeTab !== 'notes' && activeTab !== 'bookmark' ? (
+        <div className="flex items-center">
+          <SessionTags />
+          <div className="mx-4" />
+          <SelectDateRange period={period} onChange={onDateChange} right={true} />
+          <div className="mx-2" />
+          <SessionSort />
+          <SessionSettingButton />
+        </div>
+      ) : null}
+
+      {activeTab === 'notes' && (
+        <div className="flex items-center">
+          <NoteTags />
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default connect(
-    (state: any) => ({
-        filter: state.getIn(['search', 'instance']),
-        listCount: numberWithCommas(state.getIn(['sessions', 'total'])),
-        activeTab: state.getIn(['search', 'activeTab', 'type']),
-        isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
-    }),
-    { applyFilter, setActiveTab }
+  (state: any) => ({
+    filter: state.getIn(['search', 'instance']),
+    listCount: numberWithCommas(state.getIn(['sessions', 'total'])),
+    activeTab: state.getIn(['search', 'activeTab', 'type']),
+    isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
+  }),
+  { applyFilter, setActiveTab }
 )(SessionHeader);
diff --git a/frontend/app/components/shared/XRayButton/xrayButton.module.css b/frontend/app/components/shared/XRayButton/xrayButton.module.css
index c94b9c2f1..d1c7ae6d9 100644
--- a/frontend/app/components/shared/XRayButton/xrayButton.module.css
+++ b/frontend/app/components/shared/XRayButton/xrayButton.module.css
@@ -2,7 +2,7 @@
     text-align: center;
     padding: 4px 14px;
     border: none;
-    border-radius: 6px;
+    border-radius: 3px;
     font-weight: 500;
 
     &.default {
diff --git a/frontend/app/components/ui/BackLink/BackLink.js b/frontend/app/components/ui/BackLink/BackLink.js
index b44737233..a150865bb 100644
--- a/frontend/app/components/ui/BackLink/BackLink.js
+++ b/frontend/app/components/ui/BackLink/BackLink.js
@@ -12,7 +12,7 @@ export default function BackLink ({
       { label && <div className="ml-1">{ label }</div> }
     </div>
   );
-  const verticalClassName = cn(className, cls.backLink, "flex justify-center items-center pr-4 color-gray-dark", { "flex-col": vertical });
+  const verticalClassName = cn(className, cls.backLink, "flex justify-center items-center pr-2 color-gray-dark", { "flex-col": vertical });
   return to ?
     <Link
       className={ verticalClassName }
diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.js b/frontend/app/components/ui/ItemMenu/ItemMenu.js
index ed397b57a..a3f24ec25 100644
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.js
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.js
@@ -39,7 +39,7 @@ export default class ItemMenu extends React.PureComponent {
                 <OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
                     <div
                         onClick={this.toggleMenu}
-                        className={cn('flex items-center cursor-pointer select-none', parentStyles, { 'bg-gray-light': displayed && label })}
+                        className={cn('flex items-center cursor-pointer select-none hover rounded-full', parentStyles, { 'bg-gray-light': displayed && label })}
                     >
                         {label && <span className={cn('mr-1', bold ? 'font-medium color-gray-darkest' : 'color-gray-medium')}>{label}</span>}
                         <div
diff --git a/frontend/app/mstore/notesStore.ts b/frontend/app/mstore/notesStore.ts
index 9715c3e87..46d7fc652 100644
--- a/frontend/app/mstore/notesStore.ts
+++ b/frontend/app/mstore/notesStore.ts
@@ -11,7 +11,7 @@ export default class NotesStore {
   sessionNotes: SessionNotes = {}
   loading: boolean
   page = 1
-  pageSize = 15
+  pageSize = 10
   activeTags: iTag[] = []
   sort = 'createdAt'
   order: 'DESC' | 'ASC' = 'DESC'
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 0c1de81aa..ec1b0c528 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -6,7 +6,7 @@
 }
 
 * {
-  border-color: #EEEEEE;
+  border-color: #eeeeee;
 }
 .page {
   padding-top: 50px;
@@ -24,23 +24,23 @@
 }
 
 @media only screen and (max-width: 1380px) {
-  .container-70 {    
+  .container-70 {
     width: 90%;
   }
 }
 
 @media only screen and (min-width: 1380px) {
   .container-70 {
-    width: 1280px;    
+    width: 1280px;
   }
 }
 
 .container-70 {
-  position: relative;  
+  position: relative;
   margin: 0 auto;
 }
 
-.container-90 {  
+.container-90 {
   width: 98%;
   margin: 0 auto;
 }
@@ -84,7 +84,7 @@
 
   & .title {
     margin-right: 15px;
-  
+
     & span {
       color: $gray-medium;
       font-weight: 300;
@@ -97,13 +97,13 @@
   align-items: center;
 }
 
-[data-hidden=true] {
+[data-hidden='true'] {
   display: none !important;
 }
 
-[data-disabled=true] {
+[data-disabled='true'] {
   pointer-events: none;
-  opacity: .5;
+  opacity: 0.5;
 }
 
 .form-group {
@@ -125,6 +125,14 @@
   }
 }
 
+.note-hover {
+  border: solid thin transparent;
+  &:hover {
+    background-color: #FFFEF5;
+    border-color: $gray-lightest;
+  }
+}
+
 .text-dotted-underline {
   text-decoration: underline dotted !important;
 }
@@ -143,8 +151,8 @@
   background-color: $gray-light;
 } */
 
-.no-scroll { 
+.no-scroll {
   height: 100vh;
   overflow-y: hidden;
   padding-right: 15px;
-}
\ No newline at end of file
+}