diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index 9ba1030e0..66dd5aa8f 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@@ -12,11 +12,11 @@ import { PopperContentProps } from '@radix-ui/react-popover'
 import { CSS } from '@stitches/react'
 import { styled } from './../tokens/stitches.config'
 
-const itemStyles = {
-  fontSize: '16px',
-  fontWeight: '500',
-  py: '12px',
-  px: '24px',
+const StyledItem = styled(Item, {
+  fontSize: '14px',
+  fontWeight: '400',
+  py: '10px',
+  px: '15px',
   borderRadius: 3,
   cursor: 'default',
   color: '$utilityTextDefault',
@@ -25,9 +25,7 @@ const itemStyles = {
     outline: 'none',
     backgroundColor: '$grayBgHover',
   },
-}
-
-const StyledItem = styled(Item, itemStyles)
+})
 
 const DropdownTrigger = styled(Trigger, {
   fontSize: '100%',
@@ -44,7 +42,6 @@ const StyledTriggerItem = styled(TriggerItem, {
     outline: 'none',
     backgroundColor: '$grayBgHover',
   },
-  ...itemStyles,
 })
 
 export const DropdownContent = styled(Content, {
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index b6f284837..45c842056 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -173,7 +173,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             <Box
               css={{
                 color: '$thTextContrast2',
-                fontSize: '20px',
+                fontSize: '16px',
                 fontWeight: '700',
                 lineHeight: '1.25',
                 fontFamily: '$display',
@@ -183,7 +183,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
                 display: '-webkit-box',
                 '-webkit-line-clamp': '2',
                 '-webkit-box-orient': 'vertical',
-                height: '50px',
+                height: '42px',
               }}
             >
               {props.item.title}
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index af9363975..148431290 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -155,7 +155,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
                 fontSize: '16px',
                 fontWeight: '700',
                 lineHeight: '1.25',
-                maxWidth: '1200px',
+                maxWidth: '80%',
                 fontFamily: '$display',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index 81bae0cda..6da5e01e4 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -1,16 +1,23 @@
 import { useRouter } from 'next/router'
-import { Check } from 'phosphor-react'
-import { ReactNode, useCallback, useMemo, useState } from 'react'
+import { Check, Moon, Sun, UserSwitch } from 'phosphor-react'
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { currentThemeName, updateTheme } from '../../lib/themeUpdater'
+import { Avatar } from '../elements/Avatar'
 import { AvatarDropdown } from '../elements/AvatarDropdown'
 import { Button } from '../elements/Button'
-import { Dropdown, DropdownOption } from '../elements/DropdownElements'
-import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
+import {
+  Dropdown,
+  DropdownOption,
+  DropdownSeparator,
+} from '../elements/DropdownElements'
+import GridLayoutIcon from '../elements/images/GridLayoutIcon'
+import ListLayoutIcon from '../elements/images/ListLayoutIcon'
+import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
 import { Separator } from '../elements/Separator'
 import { StyledText } from '../elements/StyledText'
 import { DropdownMenu } from '../patterns/DropdownMenu'
-import { ThemeId } from '../tokens/stitches.config'
+import { styled, theme, ThemeId } from '../tokens/stitches.config'
 import { LayoutType } from './homeFeed/HomeFeedContainer'
 
 type PrimaryDropdownProps = {
@@ -79,13 +86,64 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
           <AvatarDropdown userInitials={viewerData?.me?.name.charAt(0) ?? ''} />
         )
       }
+      css={{ width: '240px' }}
     >
-      {props.showThemeSection && (
-        <VStack css={{ py: '12px', px: '24px' }}>
-          <ThemeSection />
+      <HStack
+        alignment="center"
+        distribution="start"
+        css={{
+          width: '100%',
+          height: '64px',
+          p: '15px',
+          gap: '15px',
+        }}
+      >
+        <Avatar
+          imageURL={viewerData.me.profile.pictureUrl}
+          height="40px"
+          fallbackText={viewerData?.me?.name.charAt(0) ?? ''}
+          noFade={true}
+        />
+        <VStack
+          css={{ height: '40px', maxWidth: '240px' }}
+          alignment="start"
+          distribution="around"
+        >
+          {viewerData.me && (
+            <>
+              <StyledText
+                css={{
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  color: '$thTextContrast2',
+                  m: '0px',
+                  p: '0px',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {viewerData.me.name}
+              </StyledText>
+              <StyledText
+                css={{
+                  fontSize: '14px',
+                  fontWeight: '400',
+                  color: '#898989',
+                  m: '0px',
+                  p: '0px',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {`@${viewerData.me.profile.username}`}
+              </StyledText>
+            </>
+          )}
         </VStack>
-      )}
-      {props.layout == 'LIST_LAYOUT' && (
+      </HStack>
+      <DropdownSeparator />
+      {props.showThemeSection && <ThemeSection {...props} />}
+      {/* {props.layout == 'LIST_LAYOUT' && (
         <DropdownOption
           onSelect={() =>
             props.updateLayout && props.updateLayout('GRID_LAYOUT')
@@ -103,7 +161,8 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
           />
           <Box css={{ height: '10px' }}></Box>
         </>
-      )}
+      )} */}
+      <DropdownSeparator />
       <DropdownOption
         onSelect={() => headerDropdownActionHandler('navigate-to-install')}
         title="Install"
@@ -132,6 +191,7 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
         onSelect={() => window.Intercom('show')}
         title="Feedback"
       />
+      <DropdownSeparator />
       <DropdownOption
         onSelect={() => headerDropdownActionHandler('logout')}
         title="Logout"
@@ -140,40 +200,136 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
   )
 }
 
-function ThemeSection(): JSX.Element {
+const StyledToggleButton = styled('button', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '$thTextContrast2',
+  backgroundColor: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  width: '70px',
+  height: '100%',
+  borderRadius: '5px',
+  fontSize: '12px',
+  fontFamily: '$inter',
+  gap: '5px',
+  m: '2px',
+  '&:hover': {
+    opacity: 0.8,
+  },
+  '&[data-state="on"]': {
+    bg: '$thBackground',
+  },
+})
+
+function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
   const [currentTheme, setCurrentTheme] = useState(currentThemeName())
 
-  const isDark = useMemo(() => {
-    return currentTheme === 'Dark' || currentTheme === 'Darker'
-  }, [currentTheme])
-
   return (
-    <>
-      <StyledText style="menuTitle">Theme</StyledText>
-      <HStack css={{ py: '8px', width: '100%', gap: '25px' }}>
-        <Button
-          style="themeSwitch"
-          css={{ background: '#FFFFFF' }}
-          data-state={isDark ? 'unselected' : 'selected'}
-          onClick={() => {
-            updateTheme(ThemeId.Lighter)
-            setCurrentTheme(currentThemeName())
+    <VStack>
+      <HStack
+        alignment="center"
+        css={{
+          width: '100%',
+          px: '15px',
+          justifyContent: 'space-between',
+        }}
+      >
+        <StyledText
+          css={{
+            fontSize: '14px',
+            fontWeight: '400',
+            cursor: 'default',
+            color: '$utilityTextDefault',
           }}
         >
-          {!isDark && <Check color="#F9D354" size={32} />}
-        </Button>
-        <Button
-          style="themeSwitch"
-          css={{ background: '#3D3D3D' }}
-          data-state={isDark ? 'selected' : 'unselected'}
-          onClick={() => {
-            updateTheme(ThemeId.Dark)
-            setCurrentTheme(currentThemeName())
+          Mode
+        </StyledText>
+        <Box
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            bg: '$thBackground4',
+            borderRadius: '5px',
+            height: '34px',
+            p: '3px',
+            px: '1px',
           }}
         >
-          {isDark && <Check color="#F9D354" size={32} />}
-        </Button>
+          <StyledToggleButton
+            data-state={currentTheme != ThemeId.Dark ? 'on' : 'off'}
+            onClick={() => {
+              updateTheme(ThemeId.Light)
+              setCurrentTheme(ThemeId.Light)
+            }}
+          >
+            Light
+            <Sun size={15} color={theme.colors.thTextContrast2.toString()} />
+          </StyledToggleButton>
+          <StyledToggleButton
+            data-state={currentTheme == ThemeId.Dark ? 'on' : 'off'}
+            onClick={() => {
+              updateTheme(ThemeId.Dark)
+              setCurrentTheme(ThemeId.Dark)
+            }}
+          >
+            Dark
+            <Moon size={15} color={theme.colors.thTextContrast2.toString()} />
+          </StyledToggleButton>
+        </Box>
       </HStack>
-    </>
+      {props.layout && (
+        <HStack
+          alignment="center"
+          css={{
+            width: '100%',
+            px: '15px',
+            justifyContent: 'space-between',
+          }}
+        >
+          <StyledText
+            css={{
+              fontSize: '14px',
+              fontWeight: '400',
+              cursor: 'default',
+              color: '$utilityTextDefault',
+            }}
+          >
+            Layout
+          </StyledText>
+          <Box
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              bg: '$thBackground4',
+              borderRadius: '5px',
+              height: '34px',
+              p: '3px',
+              px: '1px',
+            }}
+          >
+            <StyledToggleButton
+              data-state={props.layout == 'LIST_LAYOUT' ? 'on' : 'off'}
+              onClick={() => {
+                props.updateLayout && props.updateLayout('LIST_LAYOUT')
+              }}
+            >
+              <ListLayoutIcon color={theme.colors.thTextContrast2.toString()} />
+            </StyledToggleButton>
+            <StyledToggleButton
+              data-state={props.layout == 'GRID_LAYOUT' ? 'on' : 'off'}
+              onClick={() => {
+                props.updateLayout && props.updateLayout('GRID_LAYOUT')
+              }}
+            >
+              <GridLayoutIcon color={theme.colors.thTextContrast2.toString()} />
+            </StyledToggleButton>
+          </Box>
+        </HStack>
+      )}
+    </VStack>
   )
 }
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 6ef8d9de7..ae7a73375 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -908,15 +908,15 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                           },
                           '&:focus': {
                             '> div': {
-                              bg: '$grayBgActive',
+                              bg: '$thBackgroundActive',
                             },
                           },
                           '&:hover': {
                             '> div': {
-                              bg: '$grayBgActive',
+                              bg: '$thBackgroundActive',
                             },
                             '> a': {
-                              bg: '$grayBgActive',
+                              bg: '$thBackgroundActive',
                             },
                           },
                         }}
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 077040717..9e827f6b4 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -197,7 +197,7 @@ function MenuPanel(props: MenuPanelProps): JSX.Element {
                   <DotsThree
                     size={25}
                     weight="bold"
-                    color={theme.colors.thTextSubtle.toString()}
+                    color={theme.colors.thTextSubtle2.toString()}
                   />
                 </Box>
               }
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 8de256f11..15b0338c4 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -176,6 +176,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thBackground: '#FFFFFF',
         thBackground2: '#F3F3F3',
         thBackground3: '#FFFFFF',
+        thBackground4: '#EBEBEB',
         thBackgroundContrast: '#FFFFFF',
 
         thTextContrast: '#1E1E1E',
@@ -260,6 +261,8 @@ const darkThemeSpec = {
     thBackground: '#2A2A2A',
     thBackground2: '#3D3D3D',
     thBackground3: '#242424',
+    thBackground4: '#3D3D3D',
+    thBackgroundActive: '#2A2A2B',
     thBackgroundContrast: '#000000',
 
     thTextContrast: '#FFFFFF',