diff --git a/packages/web/components/elements/Avatar.tsx b/packages/web/components/elements/Avatar.tsx
index bce69524c..30718498e 100644
--- a/packages/web/components/elements/Avatar.tsx
+++ b/packages/web/components/elements/Avatar.tsx
@@ -52,5 +52,5 @@ const StyledFallback = styled(Fallback, {
   fontSize: '$2',
   fontWeight: 700,
   backgroundColor: '$avatarBg',
-  color: '$avatarFont',
+  color: '$toolColor',
 })
diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index ece04e6ee..0468fba42 100644
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { styled } from '../tokens/stitches.config'
+import { styled, theme } from '../tokens/stitches.config'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { HexColorPicker } from 'react-colorful'
 import { Button } from './Button'
@@ -17,6 +17,7 @@ import {
 import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects'
 import { DropdownOption } from './DropdownElements'
 import { isDarkTheme } from '../../lib/themeUpdater'
+import { useDarkModeListener } from '../../lib/hooks/useDarkModeListener'
 
 const DropdownMenuContent = styled(DropdownMenuPrimitive.Content, {
   maxWidth: 190,
@@ -77,8 +78,6 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
     setLabelColorHex,
   } = props
 
-  const isDarkMode = isDarkTheme()
-  const iconColor = isDarkMode ? '#FFFFFF': '#0A0806'
   const [open, setOpen] = useState<boolean | undefined>(false);
 
   const handleCustomColorChange = (color: string) => {
@@ -147,7 +146,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
             )}
           </SpanBox>
 
-          <CaretDown size={16} color={iconColor} weight="bold" />
+          <CaretDown size={16} color={theme.colors.toolColor.toString()} weight="bold" />
         </Button>
       </DropdownMenuTrigger>
 
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 3a09eff08..99b852118 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -160,7 +160,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
 
         // Avatar Fallback color
         avatarBg: '#FFFFFF',
-        avatarFont: '#0A0806',
+        toolColor: '#0A0806',
 
         labelButtonsBg: '#F5F5F4',
         tooltipIcons: '#FDFAEC'
@@ -212,7 +212,7 @@ const darkThemeSpec = {
     readerTableHeader: '#FFFFFF',
     tooltipIcons: '#5F5E58',
     avatarBg: '#000000',
-    avatarFont: 'rgba(255, 255, 255, 0.8)',
+    toolColor: 'rgba(255, 255, 255, 0.8)',
 
     labelButtonsBg: '#5F5E58',
   },
diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx
index 5b88c860e..64b797857 100644
--- a/packages/web/pages/settings/labels.tsx
+++ b/packages/web/pages/settings/labels.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
 import { Button } from '../../components/elements/Button'
 import { PlusIcon } from '../../components/elements/images/PlusIcon'
-import { styled } from '../../components/tokens/stitches.config'
+import { styled, theme } from '../../components/tokens/stitches.config'
 import {
   Box,
   SpanBox,
@@ -14,7 +14,7 @@ import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuer
 import { createLabelMutation } from '../../lib/networking/mutations/createLabelMutation'
 import { updateLabelMutation } from '../../lib/networking/mutations/updateLabelMutation'
 import { deleteLabelMutation } from '../../lib/networking/mutations/deleteLabelMutation'
-import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater'
+import { applyStoredTheme } from '../../lib/themeUpdater'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { Label } from '../../lib/networking/queries/useGetLabelsQuery'
 import { StyledText } from '../../components/elements/StyledText'
@@ -24,7 +24,6 @@ import {
   PencilSimple,
   Trash,
   Plus,
-  DotsSixVertical,
 } from 'phosphor-react'
 import {
   LabelColor,
@@ -470,9 +469,6 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
     editingLabelId === label?.id || (isCreateMode && !label)
   const labelName = label?.name || nameInputText
 
-  const isDarkMode = isDarkTheme()
-  const iconColor = isDarkMode ? '#D8D7D5': '#5F5E58'
-
   const handleEdit = () => {
     editingLabelId && updateLabel(editingLabelId)
     setEditingLabelId(null)
@@ -492,7 +488,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
         disabled={isCreateMode}
       >
         <Dropdown
-          triggerElement={<DotsThree size={24} color={iconColor} />}
+          triggerElement={<DotsThree size={24} color={theme.colors.toolColor.toString()} />}
         >
           <DropdownOption onSelect={() => null}>
             <Button
@@ -507,7 +503,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
               onClick={() => onEditPress(label)}
               disabled={isCreateMode}
             >
-              <PencilSimple size={24} color={iconColor} />
+              <PencilSimple size={24} color={theme.colors.toolColor.toString()} />
               <StyledText
                 color="$grayText"
                 css={{ fontSize: '$5', marginLeft: '$2' }}
@@ -683,7 +679,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
                 onClick={() => handleGenerateRandomColor(label?.id)}
                 disabled={!(isCreateMode && !label) && !(editingLabelId === label?.id)}
               >
-                <ArrowClockwise size={16} color={iconColor} />
+                <ArrowClockwise size={16} color={theme.colors.toolColor.toString()} />
               </IconButton>
             </Box>
           </TooltipWrapped>
@@ -741,7 +737,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
                   onClick={() => onEditPress(label)}
                   disabled={isCreateMode}
                 >
-                  <PencilSimple size={16} color={iconColor} />
+                  <PencilSimple size={16} color={theme.colors.toolColor.toString()} />
                 </IconButton>
                 <IconButton
                   style="ctaWhite"
@@ -749,7 +745,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
                   onClick={() => deleteLabel(label.id)}
                   disabled={isCreateMode}
                 >
-                  <Trash size={16} color={iconColor} />
+                  <Trash size={16} color={theme.colors.toolColor.toString()} />
                 </IconButton>
                 {moreActionsButton()}
               </HStack>