diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index 395ef88fd..9383831b3 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from 'UI';
+import { Icon, Button } from 'UI';
 import Autoplay from './Autoplay';
 import Bookmark from 'Shared/Bookmark';
 import SharePopup from '../shared/SharePopup/SharePopup';
@@ -63,16 +63,10 @@ function SubHeader(props) {
           className="ml-auto text-sm flex items-center color-gray-medium gap-2"
           style={{ width: 'max-content' }}
         >
-          <div
-            onClick={showReportModal}
-            className="cursor-pointer rounded flex items-center p-2 gap-1 hover:bg-gray-light-shade"
-          >
-            <Icon name="file-pdf" size={16} />
-            <span>Create Bug Report</span>
-          </div>
+          <Button icon="file-pdf" variant="text" onClick={showReportModal}>Create Bug Report</Button>
+          <NotePopup />
           <ItemMenu
             items={[
-              { key: 1, component: <NotePopup /> },
               {
                 key: 2,
                 component: props.jiraConfig && props.jiraConfig.token && (
diff --git a/frontend/app/components/Session_/components/NotePopup.tsx b/frontend/app/components/Session_/components/NotePopup.tsx
index c865ab06a..7b3ad24c6 100644
--- a/frontend/app/components/Session_/components/NotePopup.tsx
+++ b/frontend/app/components/Session_/components/NotePopup.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { Icon } from 'UI';
+import { Button } from 'UI';
 import { connectPlayer, pause } from 'Player';
 import { connect } from 'react-redux';
 import { setCreateNoteTooltip } from 'Duck/sessions';
-import cn from 'classnames';
 
 function NotePopup({
   setCreateNoteTooltip,
@@ -25,17 +24,9 @@ function NotePopup({
   }, []);
 
   return (
-    <div
-      onClick={toggleNotePopup}
-      className={cn(
-        'h-full w-full p-3',
-        'mr-4 hover:bg-gray-light-shade rounded-md flex items-center',
-        tooltipActive ? 'cursor-not-allowed' : 'cursor-pointer'
-      )}
-    >
-      <Icon name="quotes" size="16" className="mr-2" />
+    <Button icon="quotes" variant="text" disabled={tooltipActive} onClick={toggleNotePopup}>
       Add Note
-    </div>
+    </Button>
   );
 }
 
diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx
index 309c84baa..ceb5e22d4 100644
--- a/frontend/app/components/ui/Button/Button.tsx
+++ b/frontend/app/components/ui/Button/Button.tsx
@@ -49,7 +49,7 @@ export default (props: Props) => {
     }
 
     if (variant === 'text') {
-        classes.push('bg-transparent color-gray-dark hover:bg-gray-light hover:color-gray-dark');
+        classes.push('bg-transparent color-gray-dark hover:bg-gray-light-shade');
     }
 
     if (variant === 'text-primary') {