diff --git a/packages/api/src/resolvers/labels/index.ts b/packages/api/src/resolvers/labels/index.ts
index d0b86b189..249105f78 100644
--- a/packages/api/src/resolvers/labels/index.ts
+++ b/packages/api/src/resolvers/labels/index.ts
@@ -43,11 +43,14 @@ export const labelsResolver = authorized<LabelsSuccess, LabelsError>(
 
     try {
       const user = await getRepository(User)
-        .createQueryBuilder('user')
-        .innerJoinAndSelect('user.labels', 'labels')
-        .where('user.id = :uid', { uid })
-        .orderBy('labels.createdAt', 'DESC')
-        .getOne()
+              .createQueryBuilder("user")
+              .innerJoinAndSelect(
+                "user.labels",
+                "labels",
+              )
+              .where("user.id = :uid", { uid })
+              .orderBy("labels.createdAt", "DESC")
+              .getOne()
 
       if (!user) {
         return {
@@ -56,7 +59,7 @@ export const labelsResolver = authorized<LabelsSuccess, LabelsError>(
       }
 
       return {
-        labels: user.labels || [],
+        labels: user.labels?.sort((a,b) => a.createdAt.getTime() - b.createdAt.getTime()) || [],
       }
     } catch (error) {
       log.error(error)
diff --git a/packages/web/components/elements/Avatar.tsx b/packages/web/components/elements/Avatar.tsx
index 30718498e..bce69524c 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: '$toolColor',
+  color: '$avatarFont',
 })
diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index f2c1a3ed1..818898f06 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@@ -70,9 +70,10 @@ type DropdownProps = {
   labelText?: string
   showArrow?: boolean
   triggerElement: React.ReactNode
-  children: React.ReactNode,
+  children: React.ReactNode
   styledArrow?: boolean
-  align?: DropdownAlignment 
+  align?: DropdownAlignment
+  disabled?: boolean
   css?: CSS
 }
 
@@ -106,11 +107,12 @@ export function Dropdown({
   triggerElement,
   labelText,
   showArrow = true,
+  disabled = false,
   css
 }: DropdownProps): JSX.Element {
   return (
     <Root modal={false}>
-      <DropdownTrigger>{triggerElement}</DropdownTrigger>
+      <DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>
       <DropdownContent
         css={css}
         onInteractOutside={(event) => {
diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index 0468fba42..aa6b464b2 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, theme } from '../tokens/stitches.config'
+import { styled } from '../tokens/stitches.config'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { HexColorPicker } from 'react-colorful'
 import { Button } from './Button'
@@ -17,7 +17,6 @@ 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,
@@ -67,6 +66,42 @@ const DropdownMenuTrigger = styled(DropdownMenuPrimitive.Trigger, {
 })
 const Box = styled('div', {})
 
+const MainContainer = styled(Box, {
+  fontFamily: 'inter',
+  fontSize: '$2',
+  lineHeight: '1.25',
+  color: '$grayText',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  backgroundColor: '$grayBg',
+  border: '1px solid $grayBorder',
+  width: '180px',
+  borderRadius: '$3',
+  px: '$3',
+  py: '$2',
+  cursor: 'pointer',
+  '&:hover': {
+    border: '1px solid $grayBorderHover',
+  },
+  '@mdDown': {
+    width: '100%'
+  }
+})
+
+const CustomLabelWrapper = styled(Box, {
+  fontSize: 13,
+  padding: '$2',
+  borderRadius: 3,
+  cursor: 'default',
+  color: '$grayText',
+
+  '&:focus': {
+    outline: 'none',
+    backgroundColor: '$grayBgHover',
+  },
+})
+
 export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
   const {
     isCreateMode,
@@ -78,6 +113,8 @@ 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) => {
@@ -105,18 +142,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
           },
         }}
       >
-        <Button
-          style="ctaWhite"
-          css={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            backgroundColor: '$grayBg',
-            borderColor: '$grayBorder',
-            borderWidth: '1px',
-            width: '100%',
-          }}
-        >
+        <MainContainer>
           <SpanBox css={{ paddingRight: '$3' }}>
             {labelId !== '' && labelId === labelColorHexRowId ? (
               <LabelOption
@@ -146,8 +172,8 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
             )}
           </SpanBox>
 
-          <CaretDown size={16} color={theme.colors.toolColor.toString()} weight="bold" />
-        </Button>
+          <CaretDown size={16} color={iconColor} weight="bold" />
+        </MainContainer>
       </DropdownMenuTrigger>
 
       <DropdownMenuContent sideOffset={5}>
@@ -173,14 +199,14 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
           ))}
         <DropdownMenu>
           <DropdownMenuTriggerItem>
-            <DropdownOption onSelect={() => null}>
+            <CustomLabelWrapper onSelect={() => null}>
               <LabelOption
                 isCreateMode={isCreateMode}
                 labelId={labelId}
                 color="custom color"
                 isDropdownOption
               />
-            </DropdownOption>
+            </CustomLabelWrapper>
           </DropdownMenuTriggerItem>
           <DropdownMenuContent
             sideOffset={-25}
diff --git a/packages/web/components/elements/Tooltip.tsx b/packages/web/components/elements/Tooltip.tsx
index 465c76a7c..241c20e8e 100644
--- a/packages/web/components/elements/Tooltip.tsx
+++ b/packages/web/components/elements/Tooltip.tsx
@@ -67,6 +67,7 @@ export const TooltipWrapped: FC<TooltipWrappedProps> = ({
   active,
   tooltipContent,
   tooltipSide,
+  arrowStyles,
   ...props
 }) => {
   return (
@@ -74,7 +75,7 @@ export const TooltipWrapped: FC<TooltipWrappedProps> = ({
       <TooltipTrigger asChild>{children}</TooltipTrigger>
       <TooltipContent sideOffset={5} side={tooltipSide} {...props}>
         {tooltipContent}
-        <TooltipArrow style={props.arrowStyles} />
+        <TooltipArrow style={arrowStyles} />
       </TooltipContent>
     </Tooltip>
   )
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 99b852118..3a09eff08 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',
-        toolColor: '#0A0806',
+        avatarFont: '#0A0806',
 
         labelButtonsBg: '#F5F5F4',
         tooltipIcons: '#FDFAEC'
@@ -212,7 +212,7 @@ const darkThemeSpec = {
     readerTableHeader: '#FFFFFF',
     tooltipIcons: '#5F5E58',
     avatarBg: '#000000',
-    toolColor: 'rgba(255, 255, 255, 0.8)',
+    avatarFont: '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 64b797857..c6610aeb2 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, theme } from '../../components/tokens/stitches.config'
+import { styled } from '../../components/tokens/stitches.config'
 import {
   Box,
   SpanBox,
@@ -14,9 +14,10 @@ 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 } from '../../lib/themeUpdater'
+import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { Label } from '../../lib/networking/queries/useGetLabelsQuery'
+
 import { StyledText } from '../../components/elements/StyledText'
 import {
   ArrowClockwise,
@@ -24,6 +25,7 @@ import {
   PencilSimple,
   Trash,
   Plus,
+  DotsSixVertical,
 } from 'phosphor-react'
 import {
   LabelColor,
@@ -126,18 +128,37 @@ const inputStyles = {
   },
 }
 
+const ActionsWrapper = styled(Box, {
+  mr: '$1',
+  display: 'flex',
+  width: 40,
+  height: 40,
+  alignItems: 'center',
+  bg: 'transparent',
+  cursor: 'pointer',
+  fontFamily: 'inter',
+  fontSize: '$2',
+  lineHeight: '1.25',
+  color: '$grayText',
+  '&:hover': {
+    opacity: 0.8,
+  },
+})
+
 const IconButton = styled(Button, {
   variants: {
     style: {
       ctaWhite: {
         color: 'red',
-        padding: '14px',
+        padding: '10px',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
         border: '1px solid $grayBorder',
         boxSizing: 'border-box',
         borderRadius: 6,
+        width: 40,
+        height: 40,
       },
     },
   },
@@ -270,13 +291,16 @@ export default function LabelsPage(): JSX.Element {
                     }}
                     style="ctaDarkYellow"
                     css={{
+                      alignItems: 'center',
                       display: 'none',
                       '@md': {
                         display: 'flex',
                       },
                     }}
                   >
-                    <PlusIcon size={20} strokeColor={'#0A0806'} />
+                    <Box style={{ display: 'flex', marginTop: 4, }}>
+                      <PlusIcon size={20} strokeColor={'#0A0806'} />
+                    </Box>
                     <SpanBox>Create New Label</SpanBox>
                   </Button>
                   <Box
@@ -309,40 +333,28 @@ export default function LabelsPage(): JSX.Element {
                 style="highlightTitle"
                 css={{
                   color: '$grayTextContrast',
-                  padding: '0 5px 0 60px',
+                  padding: '0 5px 0 30px',
                 }}
               >
                 Name
               </StyledText>
             </Box>
-            <Box style={{ flex: '35%' }}>
+            <Box>
               <StyledText
                 style="highlightTitle"
                 css={{
                   color: '$grayTextContrast',
+                  ml: 5,
                 }}
               >
                 Description
               </StyledText>
             </Box>
-            {/* <Box>
+            <Box>
               <StyledText
                 style="highlightTitle"
                 css={{
                   color: '$grayTextContrast',
-                  textAlign: 'right',
-                  paddingRight: '40px',
-                }}
-              >
-                Uses
-              </StyledText>
-            </Box> */}
-            <Box style={{ flex: '30%' }}>
-              <StyledText
-                style="highlightTitle"
-                css={{
-                  color: '$grayTextContrast',
-                  paddingLeft: '15px',
                 }}
               >
                 Color
@@ -354,7 +366,7 @@ export default function LabelsPage(): JSX.Element {
                 css={{
                   color: '$grayTextContrast',
                   display: 'flex',
-                  justifyContent: 'center',
+                  ml: 5,
                 }}
               >
                 Actions
@@ -469,6 +481,9 @@ 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)
@@ -476,19 +491,10 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
 
   const moreActionsButton = () => {
     return (
-      <Button
-        style="plainIcon"
-        css={{
-          mr: '$1',
-          display: 'flex',
-          background: 'transparent',
-          border: 'none',
-        }}
-        onClick={() => true}
-        disabled={isCreateMode}
-      >
+      <ActionsWrapper>
         <Dropdown
-          triggerElement={<DotsThree size={24} color={theme.colors.toolColor.toString()} />}
+          disabled={isCreateMode}
+          triggerElement={<DotsThree size={24} color={iconColor} />}
         >
           <DropdownOption onSelect={() => null}>
             <Button
@@ -503,7 +509,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
               onClick={() => onEditPress(label)}
               disabled={isCreateMode}
             >
-              <PencilSimple size={24} color={theme.colors.toolColor.toString()} />
+              <PencilSimple size={24} color={iconColor} />
               <StyledText
                 color="$grayText"
                 css={{ fontSize: '$5', marginLeft: '$2' }}
@@ -534,7 +540,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
             </Button>
           </DropdownOption>
         </Dropdown>
-      </Button>
+      </ActionsWrapper>
     )
   }
 
@@ -570,7 +576,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
           },
           '@md': {
             // gridTemplateColumns: '20% 15% 1fr 1fr 1fr',
-            gridTemplateColumns: '20% 30% 1fr 1fr',
+            gridTemplateColumns: '20% 28% 1fr 1fr',
           },
         }}
       >
@@ -581,9 +587,9 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
             padding: '0 5px',
           }}
         >
-          {(showInput || !label) ? null : (
+          {(showInput && !label) ? null : (
             <HStack alignment="center" css={{ ml: '16px' }}>
-              <LabelChip color={label.color} text={label.name} />
+              <LabelChip color={label?.color || ''} text={label?.name || ''} />
             </HStack>
           )}
           {(showInput && !label) ? (
@@ -628,22 +634,6 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
           )}
         </HStack>
 
-        {/* <HStack
-          distribution="end"
-          alignment="center"
-          css={{
-            display: 'none',
-            '@md': {
-              display: 'flex',
-              paddingRight: '30px',
-            },
-          }}
-        >
-          <StyledText css={{ fontSize: '$2' }}>
-            {isCreateMode && !label ? '-' : 536}
-          </StyledText>
-        </HStack> */}
-
         <HStack
           distribution="start"
           css={{
@@ -672,14 +662,14 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
                 style="ctaWhite"
                 css={{
                   mr: '$1',
-                  width: 46,
-                  height: 46,
+                  width: 40,
+                  height: 40,
                   background: '$labelButtonsBg',
                 }}
                 onClick={() => handleGenerateRandomColor(label?.id)}
                 disabled={!(isCreateMode && !label) && !(editingLabelId === label?.id)}
               >
-                <ArrowClockwise size={16} color={theme.colors.toolColor.toString()} />
+                <ArrowClockwise size={16} color={iconColor} />
               </IconButton>
             </Box>
           </TooltipWrapped>
@@ -693,9 +683,6 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
           alignment="center"
           css={{
             padding: '4px 8px',
-            '@md': {
-              justifyContent: 'center',
-            },
           }}
         >
             {editingLabelId === label?.id || !label ? (
@@ -721,8 +708,8 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
               </>
             ) : (
               <HStack
-                distribution="end"
-                alignment="center"
+                distribution="start"
+                alignment="start"
                 css={{
                   display: 'none',
                   '@md': {
@@ -737,7 +724,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
                   onClick={() => onEditPress(label)}
                   disabled={isCreateMode}
                 >
-                  <PencilSimple size={16} color={theme.colors.toolColor.toString()} />
+                  <PencilSimple size={16} color={iconColor} />
                 </IconButton>
                 <IconButton
                   style="ctaWhite"
@@ -745,29 +732,12 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
                   onClick={() => deleteLabel(label.id)}
                   disabled={isCreateMode}
                 >
-                  <Trash size={16} color={theme.colors.toolColor.toString()} />
+                  <Trash size={16} color={iconColor} />
                 </IconButton>
                 {moreActionsButton()}
               </HStack>
             )}
         </HStack>
-        {/* <Box className="showHidden">
-          <StyledText
-            style="body"
-            css={{
-              color: '$grayTextContrast',
-              fontSize: '14px',
-              marginBottom: '$2',
-            }}
-          >
-            {label?.description}
-          </StyledText>
-          <StyledText
-            css={{ fontSize: '$2', textAlign: 'right', color: '$grayText' }}
-          >
-            {536} Uses
-          </StyledText>
-        </Box> */}
       </TableCardBox>
     </TableCard>
   )