diff --git a/packages/web/components/elements/images/PenWithColorIcon.tsx b/packages/web/components/elements/images/PenWithColorIcon.tsx
new file mode 100644
index 000000000..b3c8a75d1
--- /dev/null
+++ b/packages/web/components/elements/images/PenWithColorIcon.tsx
@@ -0,0 +1,55 @@
+import { config } from '../../tokens/stitches.config'
+
+type PenWithColorProps = {
+  color?: string
+  width?: number
+  height?: number
+}
+
+export function PenWithColorIcon({
+  color,
+  height,
+  width,
+}: PenWithColorProps): JSX.Element {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.5 20.25H8.68934C8.78783 20.25 8.88536 20.2306 8.97635 20.1929C9.06735 20.1552 9.15003 20.1 9.21967 20.0303L18 11.25L12.75 6.00001L3.96967 14.7803C3.90003 14.85 3.84478 14.9327 3.80709 15.0237C3.80379 15.0316 3.80063 15.0396 3.79761 15.0477C3.76615 15.1317 3.75 15.2208 3.75 15.3107V19.5C3.75 19.6989 3.82902 19.8897 3.96967 20.0303C4.11032 20.171 4.30109 20.25 4.5 20.25Z"
+        fill="#FFD234"
+      />
+      <path
+        d="M15.2197 3.53034L12.75 6.00001L18 11.25L20.4697 8.78034C20.6103 8.63969 20.6893 8.44892 20.6893 8.25001C20.6893 8.0511 20.6103 7.86033 20.4697 7.71968L16.2803 3.53034C16.1397 3.38969 15.9489 3.31067 15.75 3.31067C15.5511 3.31067 15.3603 3.38969 15.2197 3.53034Z"
+        fill="#FFD234"
+      />
+      <path
+        d="M8.68934 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V15.3107C3.75 15.2122 3.7694 15.1147 3.80709 15.0237C3.84478 14.9327 3.90003 14.85 3.96967 14.7803L15.2197 3.53034C15.3603 3.38969 15.5511 3.31067 15.75 3.31067C15.9489 3.31067 16.1397 3.38969 16.2803 3.53034L20.4697 7.71968C20.6103 7.86033 20.6893 8.0511 20.6893 8.25001C20.6893 8.44892 20.6103 8.63969 20.4697 8.78034L9.21967 20.0303C9.15003 20.1 9.06735 20.1552 8.97635 20.1929C8.88536 20.2306 8.78783 20.25 8.68934 20.25Z"
+        stroke="#0A0806"
+        strokeOpacity="0.8"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.75 6L18 11.25"
+        stroke="#0A0806"
+        strokeOpacity="0.8"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.95223 20.2021L3.79785 15.0477"
+        stroke="black"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index ead951168..f8efb3ccc 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/packages/web/components/patterns/HighlightBar.tsx
@@ -1,16 +1,17 @@
-import { Button } from '../elements/Button'
-import { HStack, Box } from '../elements/LayoutPrimitives'
-import { AnchoredPopover } from '../patterns/AnchoredPopover'
-import { StyledText } from '../elements/StyledText'
 import { highlightBarKeyboardCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { styled, theme } from '../tokens/stitches.config'
-import { PenIcon } from '../elements/images/PenIcon'
-import { CommentIcon } from '../elements/images/CommentIcon'
-import { ShareIcon } from '../elements/images/ShareIcon'
-import { TrashIcon } from '../elements/images/TrashIcon'
 import { isAndroid } from '../../lib/deviceType'
 
+import { styled, theme } from '../tokens/stitches.config'
+import { AnchoredPopover } from '../patterns/AnchoredPopover'
+
+import { StyledText } from '../elements/StyledText'
+import { Button } from '../elements/Button'
+import { HStack, Box } from '../elements/LayoutPrimitives'
+import { TrashIcon } from '../elements/images/TrashIcon'
+import { PenWithColorIcon } from '../elements/images/PenWithColorIcon'
+import { Note } from 'phosphor-react'
+
 type PageCoordinates = {
   pageX: number
   pageY: number
@@ -48,7 +49,9 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
           bottom: 'calc(38px + env(safe-area-inset-bottom, 40px))',
           '@smDown': {
             maxWidth: '80%',
-            bottom: `calc(28px + ${isAndroid() ? 30 : 0}px + env(safe-area-inset-bottom, 40px))`,
+            bottom: `calc(28px + ${
+              isAndroid() ? 30 : 0
+            }px + env(safe-area-inset-bottom, 40px))`,
           },
         }}
       >
@@ -62,7 +65,17 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
         yAnchorCoordinate={props.anchorCoordinates.pageY}
         preventAutoFocus={false}
       >
-        <BarContent {...props} />
+        <Box>
+          css=
+          {{
+            width: '350px',
+            background: '$grayBg',
+            borderRadius: '4px',
+            border: '1px solid $grayBorder',
+            boxShadow: '$cardBoxShadow',
+          }}
+          <BarContent {...props} />
+        </Box>
       </AnchoredPopover>
     )
   }
@@ -111,16 +124,14 @@ function BarContent(props: HighlightBarProps): JSX.Element {
             height: '100%',
             m: 0,
             p: 0,
-            pt: '6px',
             alignItems: 'baseline',
           }}
         >
           <HStack css={{ height: '100%', alignItems: 'center' }}>
-            <PenIcon size={28} strokeColor={theme.colors.readerFont.toString()} />
+            <PenWithColorIcon />
             <StyledText
               style="body"
               css={{
-                pb: '4px',
                 pl: '12px',
                 m: '0px',
                 color: '$readerFont',
@@ -137,9 +148,12 @@ function BarContent(props: HighlightBarProps): JSX.Element {
           style="plainIcon"
           title="Remove Highlight"
           onClick={() => props.handleButtonClick('delete')}
-          css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
+          css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px'}}
         >
-          <TrashIcon size={28} strokeColor={theme.colors.readerFont.toString()} />
+          <TrashIcon
+            size={28}
+            strokeColor={theme.colors.readerFont.toString()}
+          />
         </Button>
       )}
       <Separator />
@@ -147,9 +161,23 @@ function BarContent(props: HighlightBarProps): JSX.Element {
         style="plainIcon"
         title="Add Note to Highlight"
         onClick={() => props.handleButtonClick('comment')}
-        css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
+        css={{ color: '$readerFont', height: '100%', m: 0, p: 0}}
       >
-        <CommentIcon size={28} strokeColor={theme.colors.readerFont.toString()} />
+        <HStack css={{ height: '100%', alignItems: 'center' }}>
+          <Note size={24} color={theme.colors.readerFont.toString()} />
+          <StyledText
+            style="body"
+            css={{
+              pl: '12px',
+              m: '0px',
+              color: '$readerFont',
+              fontWeight: '400',
+              fontSize: '16px',
+            }}
+          >
+            Note
+          </StyledText>
+        </HStack>
       </Button>
       {/* <Separator />
       <Button