diff --git a/packages/web/components/elements/Tooltip.tsx b/packages/web/components/elements/Tooltip.tsx
index 241c20e8e..b1139061a 100644
--- a/packages/web/components/elements/Tooltip.tsx
+++ b/packages/web/components/elements/Tooltip.tsx
@@ -62,6 +62,15 @@ type TooltipWrappedProps = {
   style?: TooltipPrimitive.TooltipContentProps['style']
 }
 
+const DefaultTooltipStyle = {
+  backgroundColor: '#F9D354',
+  color: '#0A0806',
+}
+
+const DefaultArrowStyle = {
+  fill: '#F9D354'
+}
+
 export const TooltipWrapped: FC<TooltipWrappedProps> = ({
   children,
   active,
@@ -73,9 +82,14 @@ export const TooltipWrapped: FC<TooltipWrappedProps> = ({
   return (
     <Tooltip open={active}>
       <TooltipTrigger asChild>{children}</TooltipTrigger>
-      <TooltipContent sideOffset={5} side={tooltipSide} {...props}>
+      <TooltipContent
+        sideOffset={5}
+        side={tooltipSide}
+        style={DefaultTooltipStyle}
+        {...props}
+      >
         {tooltipContent}
-        <TooltipArrow style={arrowStyles} />
+        <TooltipArrow style={arrowStyles ?? DefaultArrowStyle} />
       </TooltipContent>
     </Tooltip>
   )
diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index 1a8762f84..abcec99a3 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -4,7 +4,8 @@ import { ArticleAttributes } from "../../../lib/networking/queries/useGetArticle
 import { useGetUserPreferences } from "../../../lib/networking/queries/useGetUserPreferences"
 import { Button } from "../../elements/Button"
 import { Dropdown } from "../../elements/DropdownElements"
-import { Box, SpanBox } from "../../elements/LayoutPrimitives"
+import { Box } from "../../elements/LayoutPrimitives"
+import { TooltipWrapped } from "../../elements/Tooltip"
 import { styled, theme } from "../../tokens/stitches.config"
 import { EditLabelsControl } from "./EditLabelsControl"
 import { ReaderSettings } from "./ReaderSettingsModal"
@@ -59,22 +60,23 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
     <Box
       css={{
         display: 'flex',
-        flexDirection: props.layout == 'vertical' ? 'column' : 'row',
         alignItems: 'center',
+        flexDirection: props.layout == 'vertical' ? 'column' : 'row',
         justifyContent: props.layout == 'vertical' ? 'center' : 'flex-end',
         gap: props.layout == 'vertical' ? '8px' : '20px',
         paddingTop: '6px',
-        height: '100%',
-        width: '100%',
         m: '0px',
       }}
     >
       <ActionDropdown
         layout={props.layout}
         triggerElement={
-          <SpanBox css={{ width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>
-            <TextAa size={24} color={theme.colors.readerFont.toString()} />
-          </SpanBox>
+          <TooltipWrapped
+            tooltipContent="Adjust Display Settings"
+            tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+          >
+          <TextAa size={24} color={theme.colors.readerFont.toString()} />
+        </TooltipWrapped>
         }
       >
         <ReaderSettings userPreferences={preferencesData} articleActionHandler={props.articleActionHandler} />
@@ -85,9 +87,12 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
       <ActionDropdown
         layout={props.layout}
         triggerElement={
-          <SpanBox css={{ width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>
-            <TagSimple size={24} color={theme.colors.readerFont.toString()} />
-          </SpanBox>
+          <TooltipWrapped
+            tooltipContent="Edit Tags"
+            tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+        >
+          <TagSimple size={24} color={theme.colors.readerFont.toString()} />
+        </TooltipWrapped>
         }
       >
         <EditLabelsControl
@@ -106,13 +111,23 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
         </SpanBox>
       </Button> */}
 
-      <Button style='articleActionIcon' onClick={() => props.articleActionHandler('showHighlights')}>
-        <HighlighterCircle size={24} color={theme.colors.readerFont.toString()} />
-      </Button>
+      <TooltipWrapped
+        tooltipContent="View Highlights"
+        tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+      >
+        <Button style='articleActionIcon'>
+          <HighlighterCircle size={24} color={theme.colors.readerFont.toString()} />
+        </Button>
+      </TooltipWrapped>
       <MenuSeparator layout={props.layout} />
 
       <Button style='articleActionIcon' onClick={() => props.articleActionHandler('archive')}>
-        <ArchiveBox size={24} color={theme.colors.readerFont.toString()} />
+        <TooltipWrapped
+          tooltipContent="Archive"
+          tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+        >
+          <ArchiveBox size={24} color={theme.colors.readerFont.toString()} />
+        </TooltipWrapped>
       </Button>
       {/* <MenuSeparator layout={props.layout} />