diff --git a/package.json b/package.json
index a93c0dab8..33aaf0ac5 100644
--- a/package.json
+++ b/package.json
@@ -140,6 +140,7 @@
     "@discordapp/twemoji": "15.1.0",
     "@electron/notarize": "2.5.0",
     "@primer/octicons-react": "19.14.0",
+    "@primer/primitives": "^10.3.4",
     "@primer/react": "36.27.0",
     "@testing-library/react": "16.2.0",
     "@types/jest": "29.5.14",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a730a804..830ba6a15 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,6 +45,9 @@ importers:
       '@primer/octicons-react':
         specifier: 19.14.0
         version: 19.14.0(react@19.0.0)
+      '@primer/primitives':
+        specifier: ^10.3.4
+        version: 10.3.4
       '@primer/react':
         specifier: 36.27.0
         version: 36.27.0(@types/react-dom@19.0.3(@types/react@19.0.7))(@types/react@19.0.7)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(styled-components@6.1.14(react-dom@19.0.0(react@19.0.0))(react@19.0.0))
@@ -668,6 +671,9 @@ packages:
     peerDependencies:
       react: '>=16.3'
 
+  '@primer/primitives@10.3.4':
+    resolution: {integrity: sha512-f4tudg+MFpU4sH73Ha9wFOBwyN2b2WI7BkqMThqRIWQ/LFUturYkgt78YByJ6PJw8ZY0poPiefvBCdduyd20vA==}
+
   '@primer/primitives@7.17.1':
     resolution: {integrity: sha512-SiPzEb+up1nDpV2NGwNiY8m6sGnF3OUqRb0has5s6T40vq6Li/g3cYVgl+oolEa4DUoNygEPs09jwJt24f/3zg==}
 
@@ -5093,6 +5099,8 @@ snapshots:
     dependencies:
       react: 19.0.0
 
+  '@primer/primitives@10.3.4': {}
+
   '@primer/primitives@7.17.1': {}
 
   '@primer/react@36.27.0(@types/react-dom@19.0.3(@types/react@19.0.7))(@types/react@19.0.7)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(styled-components@6.1.14(react-dom@19.0.0(react@19.0.0))(react@19.0.0))':
diff --git a/src/renderer/App.css b/src/renderer/App.css
index a022e056d..3cfdea64d 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -1,3 +1,18 @@
+/** GitHub Primer Design System */
+/* Size & Typography */
+@import "@primer/primitives/dist/css/base/size/size.css";
+@import "@primer/primitives/dist/css/base/typography/typography.css";
+@import "@primer/primitives/dist/css/functional/size/border.css";
+@import "@primer/primitives/dist/css/functional/size/breakpoints.css";
+@import "@primer/primitives/dist/css/functional/size/size.css";
+@import "@primer/primitives/dist/css/functional/size/viewport.css";
+@import "@primer/primitives/dist/css/functional/typography/typography.css";
+
+/* Themes and Colors */
+/* TODO Add support for setting color modes (dark_dimmed) - see #1748 */
+@import "@primer/primitives/dist/css/functional/themes/light.css";
+@import "@primer/primitives/dist/css/functional/themes/dark.css";
+
 html,
 body,
 #root {
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 7a4b27822..6ba12d487 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -35,7 +35,8 @@ function RequireAuth({ children }) {
 
 export const App = () => {
   return (
-    <ThemeProvider>
+    // TODO Add support for setting color modes (dark_dimmed) - see #1748
+    <ThemeProvider dayScheme="light" nightScheme="dark">
       <BaseStyles>
         <AppProvider>
           <Router>
diff --git a/src/renderer/components/AllRead.tsx b/src/renderer/components/AllRead.tsx
index 37b08c7db..56958617f 100644
--- a/src/renderer/components/AllRead.tsx
+++ b/src/renderer/components/AllRead.tsx
@@ -1,14 +1,15 @@
 import { type FC, useContext, useMemo } from 'react';
 
-import { Stack } from '@primer/react';
-
 import { AppContext } from '../context/App';
 import { Constants } from '../utils/constants';
 import { hasFiltersSet } from '../utils/filters';
-import { Centered } from './primitives/Centered';
-import { EmojiText } from './primitives/EmojiText';
+import { EmojiSplash } from './layout/EmojiSplash';
+
+interface IAllRead {
+  fullHeight?: boolean;
+}
 
-export const AllRead: FC = () => {
+export const AllRead: FC<IAllRead> = ({ fullHeight = true }: IAllRead) => {
   const { settings } = useContext(AppContext);
 
   const hasFilters = hasFiltersSet(settings);
@@ -21,21 +22,9 @@ export const AllRead: FC = () => {
     [],
   );
 
-  return (
-    <Centered>
-      <Stack direction="vertical" align="center">
-        <div className="mt-2 mb-5 text-5xl">
-          <EmojiText text={emoji} />
-        </div>
+  const heading = `No new ${hasFilters ? 'filtered ' : ''} notifications`;
 
-        {hasFilters ? (
-          <div className="mb-2 text-xl font-semibold">
-            No new filtered notifications
-          </div>
-        ) : (
-          <div className="mb-2 text-xl font-semibold">No new notifications</div>
-        )}
-      </Stack>
-    </Centered>
+  return (
+    <EmojiSplash emoji={emoji} heading={heading} fullHeight={fullHeight} />
   );
 };
diff --git a/src/renderer/components/Oops.tsx b/src/renderer/components/Oops.tsx
index 65f4cac66..c23c44cd8 100644
--- a/src/renderer/components/Oops.tsx
+++ b/src/renderer/components/Oops.tsx
@@ -1,37 +1,25 @@
 import { type FC, useMemo } from 'react';
 
-import { Stack } from '@primer/react';
 import type { GitifyError } from '../types';
-import { Centered } from './primitives/Centered';
-import { EmojiText } from './primitives/EmojiText';
+import { EmojiSplash } from './layout/EmojiSplash';
 
 interface IOops {
   error: GitifyError;
+  fullHeight?: boolean;
 }
 
-export const Oops: FC<IOops> = ({ error }: IOops) => {
+export const Oops: FC<IOops> = ({ error, fullHeight = true }: IOops) => {
   const emoji = useMemo(
     () => error.emojis[Math.floor(Math.random() * error.emojis.length)],
     [error],
   );
 
   return (
-    <Centered>
-      <Stack direction="vertical" align="center">
-        <div className="mt-2 text-5xl">
-          <EmojiText text={emoji} />
-        </div>
-
-        <div className="mb-2 text-xl font-semibold">{error.title}</div>
-        {error.descriptions.map((description, i) => {
-          return (
-            // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
-            <div className="mb-2 text-center" key={`error_description_${i}`}>
-              {description}
-            </div>
-          );
-        })}
-      </Stack>
-    </Centered>
+    <EmojiSplash
+      emoji={emoji}
+      heading={error.title}
+      subHeadings={error.descriptions}
+      fullHeight={fullHeight}
+    />
   );
 };
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index eb5d5fccb..2f8ff284b 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/src/renderer/components/Sidebar.tsx
@@ -69,80 +69,82 @@ export const Sidebar: FC = () => {
   }, [notifications]);
 
   return (
-    <div className="fixed left-12 -ml-12 flex h-full w-12 flex-col overflow-y-auto bg-gitify-sidebar">
-      <div className="flex flex-1 flex-col">
-        <Stack
-          direction="vertical"
-          align="center"
-          gap="condensed"
-          padding="normal"
-        >
-          <IconButton
-            icon={LogoIcon}
-            aria-label={APPLICATION.NAME}
-            description="Home"
-            unsafeDisableTooltip={false}
-            size="small"
-            variant="invisible"
-            tooltipDirection="e"
-            onClick={() => navigate('/', { replace: true })}
-            data-testid="sidebar-home"
-          />
-
-          <IconButton
-            icon={BellIcon}
-            aria-label="Notifications"
-            description={`${notificationsCount} unread notifications`}
-            unsafeDisableTooltip={false}
-            size="small"
-            variant={notificationsCount > 0 ? 'primary' : 'invisible'}
-            tooltipDirection="e"
-            onClick={() => openGitHubNotifications(primaryAccountHostname)}
-            data-testid="sidebar-notifications"
-            sx={{ color: 'white' }}
-          />
-
-          {/* TODO - explore https://primer.style/components/selectpanel/react/alpha/ for a better UI for filters */}
-          {isLoggedIn && (
-            <IconButton
-              icon={FilterIcon}
-              aria-label="Filters"
-              description="Filter notifications"
-              unsafeDisableTooltip={false}
-              size="small"
-              variant={hasFiltersSet(settings) ? 'primary' : 'invisible'}
-              tooltipDirection="e"
-              onClick={() => toggleFilters()}
-              data-testid="sidebar-filter-notifications"
-              sx={{ color: 'white' }}
-            />
-          )}
-
+    <Stack
+      direction="vertical"
+      justify="space-between"
+      className="fixed left-12 -ml-12 w-12 h-full bg-gitify-sidebar"
+    >
+      <Stack
+        direction="vertical"
+        align="center"
+        gap="condensed"
+        padding="normal"
+      >
+        <IconButton
+          icon={LogoIcon}
+          aria-label={APPLICATION.NAME}
+          description="Home"
+          unsafeDisableTooltip={false}
+          size="small"
+          variant="invisible"
+          tooltipDirection="e"
+          onClick={() => navigate('/', { replace: true })}
+          data-testid="sidebar-home"
+        />
+
+        <IconButton
+          icon={BellIcon}
+          aria-label="Notifications"
+          description={`${notificationsCount} unread notifications`}
+          unsafeDisableTooltip={false}
+          size="small"
+          variant={notificationsCount > 0 ? 'primary' : 'invisible'}
+          tooltipDirection="e"
+          onClick={() => openGitHubNotifications(primaryAccountHostname)}
+          data-testid="sidebar-notifications"
+          sx={{ color: 'white' }}
+        />
+
+        {/* TODO - explore https://primer.style/components/selectpanel/react/alpha/ for a better UI for filters */}
+        {isLoggedIn && (
           <IconButton
-            icon={IssueOpenedIcon}
-            aria-label="My issues"
+            icon={FilterIcon}
+            aria-label="Filters"
+            description="Filter notifications"
             unsafeDisableTooltip={false}
             size="small"
-            variant="invisible"
+            variant={hasFiltersSet(settings) ? 'primary' : 'invisible'}
             tooltipDirection="e"
-            onClick={() => openGitHubIssues(primaryAccountHostname)}
-            data-testid="sidebar-my-issues"
+            onClick={() => toggleFilters()}
+            data-testid="sidebar-filter-notifications"
             sx={{ color: 'white' }}
           />
+        )}
 
-          <IconButton
-            icon={GitPullRequestIcon}
-            aria-label="My pull requests"
-            unsafeDisableTooltip={false}
-            size="small"
-            variant="invisible"
-            tooltipDirection="e"
-            onClick={() => openGitHubPulls(primaryAccountHostname)}
-            data-testid="sidebar-my-pull-requests"
-            sx={{ color: 'white' }}
-          />
-        </Stack>
-      </div>
+        <IconButton
+          icon={IssueOpenedIcon}
+          aria-label="My issues"
+          unsafeDisableTooltip={false}
+          size="small"
+          variant="invisible"
+          tooltipDirection="e"
+          onClick={() => openGitHubIssues(primaryAccountHostname)}
+          data-testid="sidebar-my-issues"
+          sx={{ color: 'white' }}
+        />
+
+        <IconButton
+          icon={GitPullRequestIcon}
+          aria-label="My pull requests"
+          unsafeDisableTooltip={false}
+          size="small"
+          variant="invisible"
+          tooltipDirection="e"
+          onClick={() => openGitHubPulls(primaryAccountHostname)}
+          data-testid="sidebar-my-pull-requests"
+          sx={{ color: 'white' }}
+        />
+      </Stack>
 
       <Stack
         direction="vertical"
@@ -195,6 +197,6 @@ export const Sidebar: FC = () => {
           />
         )}
       </Stack>
-    </div>
+    </Stack>
   );
 };
diff --git a/src/renderer/components/__snapshots__/AllRead.test.tsx.snap b/src/renderer/components/__snapshots__/AllRead.test.tsx.snap
index 0c22a0ec6..da19618c6 100644
--- a/src/renderer/components/__snapshots__/AllRead.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/AllRead.test.tsx.snap
@@ -6,32 +6,46 @@ exports[`renderer/components/AllRead.tsx should render itself & its children - n
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+        data-align="center"
+        data-direction="vertical"
+        data-justify="center"
+        data-padding="spacious"
+        data-wrap="nowrap"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="vertical"
-          data-justify="start"
+          data-gap="condensed"
+          data-justify="center"
           data-padding="none"
           data-wrap="nowrap"
         >
           <div
-            class="mt-2 mb-5 text-5xl"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="vertical"
+            data-gap="spacious"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <span>
+            <div
+              class="Box-sc-g0xbh4-0 text-5xl"
+            >
               <img
                 alt="🎊"
                 class="emoji"
                 draggable="false"
                 src="images/twemoji/1f38a.svg"
               />
-            </span>
-          </div>
-          <div
-            class="mb-2 text-xl font-semibold"
-          >
-            No new notifications
+            </div>
+            <div
+              class="Box-sc-g0xbh4-0 text-xl font-semibold"
+            >
+              No new  notifications
+            </div>
           </div>
         </div>
       </div>
@@ -39,32 +53,46 @@ exports[`renderer/components/AllRead.tsx should render itself & its children - n
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+      data-align="center"
+      data-direction="vertical"
+      data-justify="center"
+      data-padding="spacious"
+      data-wrap="nowrap"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
         data-direction="vertical"
-        data-justify="start"
+        data-gap="condensed"
+        data-justify="center"
         data-padding="none"
         data-wrap="nowrap"
       >
         <div
-          class="mt-2 mb-5 text-5xl"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="spacious"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <span>
+          <div
+            class="Box-sc-g0xbh4-0 text-5xl"
+          >
             <img
               alt="🎊"
               class="emoji"
               draggable="false"
               src="images/twemoji/1f38a.svg"
             />
-          </span>
-        </div>
-        <div
-          class="mb-2 text-xl font-semibold"
-        >
-          No new notifications
+          </div>
+          <div
+            class="Box-sc-g0xbh4-0 text-xl font-semibold"
+          >
+            No new  notifications
+          </div>
         </div>
       </div>
     </div>
@@ -129,32 +157,46 @@ exports[`renderer/components/AllRead.tsx should render itself & its children - w
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+        data-align="center"
+        data-direction="vertical"
+        data-justify="center"
+        data-padding="spacious"
+        data-wrap="nowrap"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="vertical"
-          data-justify="start"
+          data-gap="condensed"
+          data-justify="center"
           data-padding="none"
           data-wrap="nowrap"
         >
           <div
-            class="mt-2 mb-5 text-5xl"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="vertical"
+            data-gap="spacious"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <span>
+            <div
+              class="Box-sc-g0xbh4-0 text-5xl"
+            >
               <img
                 alt="🎊"
                 class="emoji"
                 draggable="false"
                 src="images/twemoji/1f38a.svg"
               />
-            </span>
-          </div>
-          <div
-            class="mb-2 text-xl font-semibold"
-          >
-            No new filtered notifications
+            </div>
+            <div
+              class="Box-sc-g0xbh4-0 text-xl font-semibold"
+            >
+              No new filtered  notifications
+            </div>
           </div>
         </div>
       </div>
@@ -162,32 +204,46 @@ exports[`renderer/components/AllRead.tsx should render itself & its children - w
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+      data-align="center"
+      data-direction="vertical"
+      data-justify="center"
+      data-padding="spacious"
+      data-wrap="nowrap"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
         data-direction="vertical"
-        data-justify="start"
+        data-gap="condensed"
+        data-justify="center"
         data-padding="none"
         data-wrap="nowrap"
       >
         <div
-          class="mt-2 mb-5 text-5xl"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="spacious"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <span>
+          <div
+            class="Box-sc-g0xbh4-0 text-5xl"
+          >
             <img
               alt="🎊"
               class="emoji"
               draggable="false"
               src="images/twemoji/1f38a.svg"
             />
-          </span>
-        </div>
-        <div
-          class="mb-2 text-xl font-semibold"
-        >
-          No new filtered notifications
+          </div>
+          <div
+            class="Box-sc-g0xbh4-0 text-xl font-semibold"
+          >
+            No new filtered  notifications
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/renderer/components/__snapshots__/Oops.test.tsx.snap b/src/renderer/components/__snapshots__/Oops.test.tsx.snap
index 023316eab..efaba1bd1 100644
--- a/src/renderer/components/__snapshots__/Oops.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/Oops.test.tsx.snap
@@ -6,35 +6,49 @@ exports[`renderer/components/Oops.tsx should render itself & its children 1`] =
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+        data-align="center"
+        data-direction="vertical"
+        data-justify="center"
+        data-padding="spacious"
+        data-wrap="nowrap"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="vertical"
-          data-justify="start"
+          data-gap="condensed"
+          data-justify="center"
           data-padding="none"
           data-wrap="nowrap"
         >
           <div
-            class="mt-2 text-5xl"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="vertical"
+            data-gap="spacious"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <span>
+            <div
+              class="Box-sc-g0xbh4-0 text-5xl"
+            >
               <img
                 alt="🔥"
                 class="emoji"
                 draggable="false"
                 src="images/twemoji/1f525.svg"
               />
-            </span>
-          </div>
-          <div
-            class="mb-2 text-xl font-semibold"
-          >
-            Error title
+            </div>
+            <div
+              class="Box-sc-g0xbh4-0 text-xl font-semibold"
+            >
+              Error title
+            </div>
           </div>
           <div
-            class="mb-2 text-center"
+            class="Box-sc-g0xbh4-0 text-center"
           >
             Error description
           </div>
@@ -44,35 +58,49 @@ exports[`renderer/components/Oops.tsx should render itself & its children 1`] =
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+      data-align="center"
+      data-direction="vertical"
+      data-justify="center"
+      data-padding="spacious"
+      data-wrap="nowrap"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
         data-direction="vertical"
-        data-justify="start"
+        data-gap="condensed"
+        data-justify="center"
         data-padding="none"
         data-wrap="nowrap"
       >
         <div
-          class="mt-2 text-5xl"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="spacious"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <span>
+          <div
+            class="Box-sc-g0xbh4-0 text-5xl"
+          >
             <img
               alt="🔥"
               class="emoji"
               draggable="false"
               src="images/twemoji/1f525.svg"
             />
-          </span>
-        </div>
-        <div
-          class="mb-2 text-xl font-semibold"
-        >
-          Error title
+          </div>
+          <div
+            class="Box-sc-g0xbh4-0 text-xl font-semibold"
+          >
+            Error title
+          </div>
         </div>
         <div
-          class="mb-2 text-center"
+          class="Box-sc-g0xbh4-0 text-center"
         >
           Error description
         </div>
diff --git a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
index f5c44582e..2a8d8e967 100644
--- a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
@@ -70,262 +70,12 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
   "baseElement": <body>
     <div>
       <div
-        class="fixed left-12 -ml-12 flex h-full w-12 flex-col overflow-y-auto bg-gitify-sidebar"
-      >
-        <div
-          class="flex flex-1 flex-col"
-        >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="vertical"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="normal"
-            data-wrap="nowrap"
-          >
-            <button
-              aria-describedby=":r1:-loading-announcement :r0:"
-              aria-label="Gitify"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="sidebar-home"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-label="Gitify Logo"
-                class="size-5"
-                role="img"
-                viewBox="0 0 500 500"
-                xmlns="https://www.w3.org/2000/svg"
-                xmlns:xlink="https://www.w3.org/1999/xlink"
-              >
-                <defs>
-                  <lineargradient
-                    id="linearGradient-light"
-                    x1="90.8779989%"
-                    x2="-1.30249747%"
-                    y1="80.0676288%"
-                    y2="32.7108237%"
-                  >
-                    <stop
-                      offset="0%"
-                      stop-color="#CCCCCC"
-                    />
-                    <stop
-                      offset="100%"
-                      stop-color="#FFFFFF"
-                    />
-                  </lineargradient>
-                </defs>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  stroke="none"
-                  stroke-width="1"
-                >
-                  <g
-                    fill="url(#linearGradient-light)"
-                    fill-rule="nonzero"
-                    id="Logo"
-                    transform="translate(6.000000, 6.000000)"
-                  >
-                    <path
-                      d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </button>
-            <span
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="e"
-              id=":r0:"
-              popover="auto"
-              role="tooltip"
-            >
-              Home
-            </span>
-            <button
-              aria-describedby=":r3:-loading-announcement :r2:"
-              aria-label="Notifications"
-              class="types__StyledButton-sc-ws60qy-0 hBssey"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="sidebar-notifications"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-bell"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"
-                />
-              </svg>
-            </button>
-            <span
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="e"
-              id=":r2:"
-              popover="auto"
-              role="tooltip"
-            >
-              4 unread notifications
-            </span>
-            <button
-              aria-describedby=":r5:-loading-announcement"
-              aria-labelledby=":r4:"
-              class="types__StyledButton-sc-ws60qy-0 ffHjIj"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="sidebar-my-issues"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-issue-opened"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                />
-                <path
-                  d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="e"
-              id=":r4:"
-              popover="auto"
-            >
-              My issues
-            </span>
-            <button
-              aria-describedby=":r7:-loading-announcement"
-              aria-labelledby=":r6:"
-              class="types__StyledButton-sc-ws60qy-0 ffHjIj"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="sidebar-my-pull-requests"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-git-pull-request"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="e"
-              id=":r6:"
-              popover="auto"
-            >
-              My pull requests
-            </span>
-          </div>
-        </div>
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="vertical"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="normal"
-          data-wrap="nowrap"
-        >
-          <button
-            aria-describedby=":r9:-loading-announcement"
-            aria-labelledby=":r8:"
-            class="types__StyledButton-sc-ws60qy-0 ffHjIj"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="sidebar-quit"
-            sx="[object Object]"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-x-circle"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"
-              />
-            </svg>
-          </button>
-          <span
-            aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="e"
-            id=":r8:"
-            popover="auto"
-          >
-            Quit Gitify
-          </span>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="fixed left-12 -ml-12 flex h-full w-12 flex-col overflow-y-auto bg-gitify-sidebar"
-    >
-      <div
-        class="flex flex-1 flex-col"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-12 -ml-12 w-12 h-full bg-gitify-sidebar"
+        data-align="stretch"
+        data-direction="vertical"
+        data-justify="space-between"
+        data-padding="none"
+        data-wrap="nowrap"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -520,316 +270,6 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             My pull requests
           </span>
         </div>
-      </div>
-      <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-        data-align="center"
-        data-direction="vertical"
-        data-gap="condensed"
-        data-justify="start"
-        data-padding="normal"
-        data-wrap="nowrap"
-      >
-        <button
-          aria-describedby=":r9:-loading-announcement"
-          aria-labelledby=":r8:"
-          class="types__StyledButton-sc-ws60qy-0 ffHjIj"
-          data-component="IconButton"
-          data-loading="false"
-          data-no-visuals="true"
-          data-size="small"
-          data-testid="sidebar-quit"
-          sx="[object Object]"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-x-circle"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"
-            />
-          </svg>
-        </button>
-        <span
-          aria-hidden="true"
-          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-          data-direction="e"
-          id=":r8:"
-          popover="auto"
-        >
-          Quit Gitify
-        </span>
-      </div>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`renderer/components/Sidebar.tsx should render itself & its children (logged out) 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="fixed left-12 -ml-12 flex h-full w-12 flex-col overflow-y-auto bg-gitify-sidebar"
-      >
-        <div
-          class="flex flex-1 flex-col"
-        >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="vertical"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="normal"
-            data-wrap="nowrap"
-          >
-            <button
-              aria-describedby=":rb:-loading-announcement :ra:"
-              aria-label="Gitify"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="sidebar-home"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-label="Gitify Logo"
-                class="size-5"
-                role="img"
-                viewBox="0 0 500 500"
-                xmlns="https://www.w3.org/2000/svg"
-                xmlns:xlink="https://www.w3.org/1999/xlink"
-              >
-                <defs>
-                  <lineargradient
-                    id="linearGradient-light"
-                    x1="90.8779989%"
-                    x2="-1.30249747%"
-                    y1="80.0676288%"
-                    y2="32.7108237%"
-                  >
-                    <stop
-                      offset="0%"
-                      stop-color="#CCCCCC"
-                    />
-                    <stop
-                      offset="100%"
-                      stop-color="#FFFFFF"
-                    />
-                  </lineargradient>
-                </defs>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  stroke="none"
-                  stroke-width="1"
-                >
-                  <g
-                    fill="url(#linearGradient-light)"
-                    fill-rule="nonzero"
-                    id="Logo"
-                    transform="translate(6.000000, 6.000000)"
-                  >
-                    <path
-                      d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </button>
-            <span
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="e"
-              id=":ra:"
-              popover="auto"
-              role="tooltip"
-            >
-              Home
-            </span>
-            <button
-              aria-describedby=":rd:-loading-announcement :rc:"
-              aria-label="Notifications"
-              class="types__StyledButton-sc-ws60qy-0 hBssey"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="sidebar-notifications"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-bell"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"
-                />
-              </svg>
-            </button>
-            <span
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="e"
-              id=":rc:"
-              popover="auto"
-              role="tooltip"
-            >
-              4 unread notifications
-            </span>
-            <button
-              aria-describedby=":rf:-loading-announcement"
-              aria-labelledby=":re:"
-              class="types__StyledButton-sc-ws60qy-0 ffHjIj"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="sidebar-my-issues"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-issue-opened"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                />
-                <path
-                  d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="e"
-              id=":re:"
-              popover="auto"
-            >
-              My issues
-            </span>
-            <button
-              aria-describedby=":rh:-loading-announcement"
-              aria-labelledby=":rg:"
-              class="types__StyledButton-sc-ws60qy-0 ffHjIj"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="sidebar-my-pull-requests"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-git-pull-request"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="e"
-              id=":rg:"
-              popover="auto"
-            >
-              My pull requests
-            </span>
-          </div>
-        </div>
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
@@ -840,8 +280,8 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":rj:-loading-announcement"
-            aria-labelledby=":ri:"
+            aria-describedby=":r9:-loading-announcement"
+            aria-labelledby=":r8:"
             class="types__StyledButton-sc-ws60qy-0 ffHjIj"
             data-component="IconButton"
             data-loading="false"
@@ -872,7 +312,7 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="e"
-            id=":ri:"
+            id=":r8:"
             popover="auto"
           >
             Quit Gitify
@@ -883,19 +323,331 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
   </body>,
   "container": <div>
     <div
-      class="fixed left-12 -ml-12 flex h-full w-12 flex-col overflow-y-auto bg-gitify-sidebar"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-12 -ml-12 w-12 h-full bg-gitify-sidebar"
+      data-align="stretch"
+      data-direction="vertical"
+      data-justify="space-between"
+      data-padding="none"
+      data-wrap="nowrap"
     >
       <div
-        class="flex flex-1 flex-col"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="vertical"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="normal"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="vertical"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="normal"
-          data-wrap="nowrap"
+        <button
+          aria-describedby=":r1:-loading-announcement :r0:"
+          aria-label="Gitify"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="sidebar-home"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-label="Gitify Logo"
+            class="size-5"
+            role="img"
+            viewBox="0 0 500 500"
+            xmlns="https://www.w3.org/2000/svg"
+            xmlns:xlink="https://www.w3.org/1999/xlink"
+          >
+            <defs>
+              <lineargradient
+                id="linearGradient-light"
+                x1="90.8779989%"
+                x2="-1.30249747%"
+                y1="80.0676288%"
+                y2="32.7108237%"
+              >
+                <stop
+                  offset="0%"
+                  stop-color="#CCCCCC"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#FFFFFF"
+                />
+              </lineargradient>
+            </defs>
+            <g
+              fill="none"
+              fill-rule="evenodd"
+              stroke="none"
+              stroke-width="1"
+            >
+              <g
+                fill="url(#linearGradient-light)"
+                fill-rule="nonzero"
+                id="Logo"
+                transform="translate(6.000000, 6.000000)"
+              >
+                <path
+                  d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
+                />
+              </g>
+            </g>
+          </svg>
+        </button>
+        <span
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="e"
+          id=":r0:"
+          popover="auto"
+          role="tooltip"
+        >
+          Home
+        </span>
+        <button
+          aria-describedby=":r3:-loading-announcement :r2:"
+          aria-label="Notifications"
+          class="types__StyledButton-sc-ws60qy-0 hBssey"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="sidebar-notifications"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-bell"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"
+            />
+          </svg>
+        </button>
+        <span
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="e"
+          id=":r2:"
+          popover="auto"
+          role="tooltip"
+        >
+          4 unread notifications
+        </span>
+        <button
+          aria-describedby=":r5:-loading-announcement"
+          aria-labelledby=":r4:"
+          class="types__StyledButton-sc-ws60qy-0 ffHjIj"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="sidebar-my-issues"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-issue-opened"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="e"
+          id=":r4:"
+          popover="auto"
+        >
+          My issues
+        </span>
+        <button
+          aria-describedby=":r7:-loading-announcement"
+          aria-labelledby=":r6:"
+          class="types__StyledButton-sc-ws60qy-0 ffHjIj"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="sidebar-my-pull-requests"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-git-pull-request"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="e"
+          id=":r6:"
+          popover="auto"
+        >
+          My pull requests
+        </span>
+      </div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="vertical"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="normal"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r9:-loading-announcement"
+          aria-labelledby=":r8:"
+          class="types__StyledButton-sc-ws60qy-0 ffHjIj"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="sidebar-quit"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-x-circle"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="e"
+          id=":r8:"
+          popover="auto"
+        >
+          Quit Gitify
+        </span>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`renderer/components/Sidebar.tsx should render itself & its children (logged out) 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-12 -ml-12 w-12 h-full bg-gitify-sidebar"
+        data-align="stretch"
+        data-direction="vertical"
+        data-justify="space-between"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="normal"
+          data-wrap="nowrap"
         >
           <button
             aria-describedby=":rb:-loading-announcement :ra:"
@@ -1081,6 +833,258 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             My pull requests
           </span>
         </div>
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="normal"
+          data-wrap="nowrap"
+        >
+          <button
+            aria-describedby=":rj:-loading-announcement"
+            aria-labelledby=":ri:"
+            class="types__StyledButton-sc-ws60qy-0 ffHjIj"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="sidebar-quit"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-x-circle"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="e"
+            id=":ri:"
+            popover="auto"
+          >
+            Quit Gitify
+          </span>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY fixed left-12 -ml-12 w-12 h-full bg-gitify-sidebar"
+      data-align="stretch"
+      data-direction="vertical"
+      data-justify="space-between"
+      data-padding="none"
+      data-wrap="nowrap"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="vertical"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="normal"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":rb:-loading-announcement :ra:"
+          aria-label="Gitify"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="sidebar-home"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-label="Gitify Logo"
+            class="size-5"
+            role="img"
+            viewBox="0 0 500 500"
+            xmlns="https://www.w3.org/2000/svg"
+            xmlns:xlink="https://www.w3.org/1999/xlink"
+          >
+            <defs>
+              <lineargradient
+                id="linearGradient-light"
+                x1="90.8779989%"
+                x2="-1.30249747%"
+                y1="80.0676288%"
+                y2="32.7108237%"
+              >
+                <stop
+                  offset="0%"
+                  stop-color="#CCCCCC"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#FFFFFF"
+                />
+              </lineargradient>
+            </defs>
+            <g
+              fill="none"
+              fill-rule="evenodd"
+              stroke="none"
+              stroke-width="1"
+            >
+              <g
+                fill="url(#linearGradient-light)"
+                fill-rule="nonzero"
+                id="Logo"
+                transform="translate(6.000000, 6.000000)"
+              >
+                <path
+                  d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
+                />
+              </g>
+            </g>
+          </svg>
+        </button>
+        <span
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="e"
+          id=":ra:"
+          popover="auto"
+          role="tooltip"
+        >
+          Home
+        </span>
+        <button
+          aria-describedby=":rd:-loading-announcement :rc:"
+          aria-label="Notifications"
+          class="types__StyledButton-sc-ws60qy-0 hBssey"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="sidebar-notifications"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-bell"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"
+            />
+          </svg>
+        </button>
+        <span
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="e"
+          id=":rc:"
+          popover="auto"
+          role="tooltip"
+        >
+          4 unread notifications
+        </span>
+        <button
+          aria-describedby=":rf:-loading-announcement"
+          aria-labelledby=":re:"
+          class="types__StyledButton-sc-ws60qy-0 ffHjIj"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="sidebar-my-issues"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-issue-opened"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="e"
+          id=":re:"
+          popover="auto"
+        >
+          My issues
+        </span>
+        <button
+          aria-describedby=":rh:-loading-announcement"
+          aria-labelledby=":rg:"
+          class="types__StyledButton-sc-ws60qy-0 ffHjIj"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="sidebar-my-pull-requests"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-git-pull-request"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="e"
+          id=":rg:"
+          popover="auto"
+        >
+          My pull requests
+        </span>
       </div>
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
diff --git a/src/renderer/components/buttons/PillButton.tsx b/src/renderer/components/buttons/PillButton.tsx
deleted file mode 100644
index 569ac6c3c..000000000
--- a/src/renderer/components/buttons/PillButton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { FC } from 'react';
-
-import type { Icon } from '@primer/octicons-react';
-import { Stack, Text } from '@primer/react';
-
-import { type IconColor, Size } from '../../types';
-
-export interface IPillButton {
-  key?: string;
-  title: string;
-  metric?: number;
-  icon: Icon;
-  color: IconColor;
-}
-
-export const PillButton: FC<IPillButton> = (props: IPillButton) => {
-  return (
-    <button
-      title={props.title}
-      type="button"
-      className="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
-    >
-      <Stack direction="horizontal" align="center" gap="condensed">
-        <props.icon size={Size.XSMALL} className={props.color} />
-        {props.metric && <Text>{props.metric}</Text>}
-      </Stack>
-    </button>
-  );
-};
diff --git a/src/renderer/components/fields/Checkbox.test.tsx b/src/renderer/components/fields/Checkbox.test.tsx
index 7bfd3b22b..ef15490c0 100644
--- a/src/renderer/components/fields/Checkbox.test.tsx
+++ b/src/renderer/components/fields/Checkbox.test.tsx
@@ -5,7 +5,6 @@ describe('renderer/components/fields/Checkbox.tsx', () => {
   const props: ICheckbox = {
     name: 'appearance',
     label: 'Appearance',
-    helpText: 'This is some helper text',
     checked: true,
     onChange: jest.fn(),
   };
diff --git a/src/renderer/components/fields/Checkbox.tsx b/src/renderer/components/fields/Checkbox.tsx
index 923365eba..d44e24cc8 100644
--- a/src/renderer/components/fields/Checkbox.tsx
+++ b/src/renderer/components/fields/Checkbox.tsx
@@ -4,7 +4,6 @@ import { Tooltip } from './Tooltip';
 export interface ICheckbox {
   name: string;
   label: string;
-  helpText?: ReactNode | string;
   tooltip?: ReactNode | string;
   checked: boolean;
   disabled?: boolean;
@@ -39,12 +38,6 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
           )}
         </div>
       </div>
-
-      {props.helpText && (
-        <div className="mt-1 text-xs italic text-gray-500 dark:text-gray-300">
-          {props.helpText}
-        </div>
-      )}
     </div>
   );
 };
diff --git a/src/renderer/components/fields/FieldInput.tsx b/src/renderer/components/fields/FieldInput.tsx
index e12d2434b..a697fd7e2 100644
--- a/src/renderer/components/fields/FieldInput.tsx
+++ b/src/renderer/components/fields/FieldInput.tsx
@@ -33,8 +33,8 @@ export const FieldInput: FC<IFieldInput> = ({
           <input
             type={type}
             className={cn(
-              'mb-2 block w-full appearance-none',
-              'rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800',
+              'text-sm mb-2 px-4 py-1.5 block w-full appearance-none',
+              'rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none',
               error ? 'border-red-500' : 'border-gray-500',
             )}
             id={input.name}
diff --git a/src/renderer/components/fields/RadioGroup.test.tsx b/src/renderer/components/fields/RadioGroup.test.tsx
index a9cb79922..67c3a8719 100644
--- a/src/renderer/components/fields/RadioGroup.test.tsx
+++ b/src/renderer/components/fields/RadioGroup.test.tsx
@@ -5,7 +5,6 @@ describe('renderer/components/fields/RadioGroup.tsx', () => {
   const props: IRadioGroup = {
     label: 'Appearance',
     name: 'appearance',
-    helpText: 'This is some helper text',
     options: [
       { label: 'Value 1', value: 'one' },
       { label: 'Value 2', value: 'two' },
diff --git a/src/renderer/components/fields/RadioGroup.tsx b/src/renderer/components/fields/RadioGroup.tsx
index 2c60b6b59..fd48cf9cc 100644
--- a/src/renderer/components/fields/RadioGroup.tsx
+++ b/src/renderer/components/fields/RadioGroup.tsx
@@ -6,7 +6,6 @@ import { Tooltip } from './Tooltip';
 export interface IRadioGroup {
   name: string;
   label: string;
-  helpText?: ReactNode | string;
   tooltip?: ReactNode | string;
   options: RadioGroupItem[];
   value: string;
@@ -66,12 +65,6 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
           })}
         </div>
       </div>
-
-      {props.helpText && (
-        <div className="mt-1 text-xs italic text-gray-500 dark:text-gray-300">
-          {props.helpText}
-        </div>
-      )}
     </div>
   );
 };
diff --git a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
index 9071b946c..da9c5faab 100644
--- a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
@@ -28,11 +28,6 @@ exports[`renderer/components/fields/Checkbox.tsx should render 1`] = `
             </label>
           </div>
         </div>
-        <div
-          class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
-        >
-          This is some helper text
-        </div>
       </div>
     </div>
   </body>,
@@ -60,11 +55,6 @@ exports[`renderer/components/fields/Checkbox.tsx should render 1`] = `
           </label>
         </div>
       </div>
-      <div
-        class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
-      >
-        This is some helper text
-      </div>
     </div>
   </div>,
   "debug": [Function],
diff --git a/src/renderer/components/fields/__snapshots__/FieldInput.test.tsx.snap b/src/renderer/components/fields/__snapshots__/FieldInput.test.tsx.snap
index 70cc840dc..9d2aa0224 100644
--- a/src/renderer/components/fields/__snapshots__/FieldInput.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/FieldInput.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`renderer/components/fields/FieldInput.tsx should render 1`] = `
             Appearance
           </label>
           <input
-            class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-gray-500"
+            class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-gray-500"
             id="appearance"
             name="appearance"
             placeholder="This is some placeholder text"
@@ -44,7 +44,7 @@ exports[`renderer/components/fields/FieldInput.tsx should render 1`] = `
           Appearance
         </label>
         <input
-          class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-gray-500"
+          class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-gray-500"
           id="appearance"
           name="appearance"
           placeholder="This is some placeholder text"
diff --git a/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap b/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
index 4092f26f6..e0ef716ea 100644
--- a/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
@@ -63,11 +63,6 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
-        >
-          This is some helper text
-        </div>
       </div>
     </div>
   </body>,
@@ -130,11 +125,6 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
-      >
-        This is some helper text
-      </div>
     </div>
   </div>,
   "debug": [Function],
@@ -257,11 +247,6 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
             </div>
           </div>
         </div>
-        <div
-          class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
-        >
-          This is some helper text
-        </div>
       </div>
     </div>
   </body>,
@@ -327,11 +312,6 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
           </div>
         </div>
       </div>
-      <div
-        class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
-      >
-        This is some helper text
-      </div>
     </div>
   </div>,
   "debug": [Function],
diff --git a/src/renderer/components/layout/Centered.test.tsx b/src/renderer/components/layout/Centered.test.tsx
new file mode 100644
index 000000000..f7103406c
--- /dev/null
+++ b/src/renderer/components/layout/Centered.test.tsx
@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import { Centered } from './Centered';
+
+describe('renderer/components/layout/Centered.tsx', () => {
+  it('should render itself & its children - full height true', () => {
+    const tree = render(<Centered fullHeight={true}>Test</Centered>);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - full height false', () => {
+    const tree = render(<Centered fullHeight={false}>Test</Centered>);
+
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/renderer/components/layout/Centered.tsx b/src/renderer/components/layout/Centered.tsx
new file mode 100644
index 000000000..a64fd495e
--- /dev/null
+++ b/src/renderer/components/layout/Centered.tsx
@@ -0,0 +1,24 @@
+import { Stack } from '@primer/react';
+import type { FC, ReactNode } from 'react';
+
+interface ICentered {
+  children: ReactNode;
+  fullHeight?: boolean;
+}
+
+export const Centered: FC<ICentered> = ({
+  fullHeight = true,
+  ...props
+}: ICentered) => {
+  return (
+    <Stack
+      direction="vertical"
+      align="center"
+      justify="center"
+      padding="spacious"
+      className={fullHeight && 'min-h-screen'}
+    >
+      {props.children}
+    </Stack>
+  );
+};
diff --git a/src/renderer/components/primitives/Contents.test.tsx b/src/renderer/components/layout/Contents.test.tsx
similarity index 78%
rename from src/renderer/components/primitives/Contents.test.tsx
rename to src/renderer/components/layout/Contents.test.tsx
index 177d5b25b..79b1dc6db 100644
--- a/src/renderer/components/primitives/Contents.test.tsx
+++ b/src/renderer/components/layout/Contents.test.tsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { Contents } from './Contents';
 
-describe('renderer/components/primitives/Contents.tsx', () => {
+describe('renderer/components/layout/Contents.tsx', () => {
   it('should render itself & its children', () => {
     const tree = render(<Contents>Test</Contents>);
 
diff --git a/src/renderer/components/primitives/Contents.tsx b/src/renderer/components/layout/Contents.tsx
similarity index 100%
rename from src/renderer/components/primitives/Contents.tsx
rename to src/renderer/components/layout/Contents.tsx
diff --git a/src/renderer/components/layout/EmojiSplash.test.tsx b/src/renderer/components/layout/EmojiSplash.test.tsx
new file mode 100644
index 000000000..313c95986
--- /dev/null
+++ b/src/renderer/components/layout/EmojiSplash.test.tsx
@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { EmojiSplash } from './EmojiSplash';
+
+describe('renderer/components/layout/EmojiSplash.tsx', () => {
+  it('should render itself & its children - heading only', () => {
+    const tree = render(<EmojiSplash emoji="🍺" heading="Test Heading" />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - heading and sub-heading', () => {
+    const tree = render(
+      <EmojiSplash
+        emoji="🍺"
+        heading="Test Heading"
+        subHeadings={['Test Sub-Heading']}
+      />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/renderer/components/layout/EmojiSplash.tsx b/src/renderer/components/layout/EmojiSplash.tsx
new file mode 100644
index 000000000..84a301f3d
--- /dev/null
+++ b/src/renderer/components/layout/EmojiSplash.tsx
@@ -0,0 +1,42 @@
+import { Box, Stack } from '@primer/react';
+import type { FC } from 'react';
+import { EmojiText } from '../primitives/EmojiText';
+import { Centered } from './Centered';
+
+interface IEmojiSplash {
+  emoji: string;
+  heading: string;
+  subHeadings?: string[];
+  fullHeight?: boolean;
+}
+
+export const EmojiSplash: FC<IEmojiSplash> = ({
+  fullHeight = true,
+  subHeadings = [],
+  ...props
+}: IEmojiSplash) => {
+  return (
+    <Centered fullHeight={fullHeight}>
+      <Stack
+        align="center"
+        direction="vertical"
+        gap="condensed"
+        justify={'center'}
+      >
+        <Stack align="center" direction="vertical" gap="spacious">
+          <EmojiText text={props.emoji} />
+          <Box className="text-xl font-semibold">{props.heading}</Box>
+        </Stack>
+
+        {subHeadings.map((description, i) => {
+          return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
+            <Box key={`error_description_${i}`} className="text-center">
+              {description}
+            </Box>
+          );
+        })}
+      </Stack>
+    </Centered>
+  );
+};
diff --git a/src/renderer/components/primitives/Page.test.tsx b/src/renderer/components/layout/Page.test.tsx
similarity index 79%
rename from src/renderer/components/primitives/Page.test.tsx
rename to src/renderer/components/layout/Page.test.tsx
index 4d677d2ae..bf51c7ec6 100644
--- a/src/renderer/components/primitives/Page.test.tsx
+++ b/src/renderer/components/layout/Page.test.tsx
@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { Page } from './Page';
 
-describe('renderer/components/primitives/Page.tsx', () => {
+describe('renderer/components/layout/Page.tsx', () => {
   it('should render itself & its children', () => {
     const tree = render(<Page id="test">Test</Page>);
 
diff --git a/src/renderer/components/primitives/Page.tsx b/src/renderer/components/layout/Page.tsx
similarity index 76%
rename from src/renderer/components/primitives/Page.tsx
rename to src/renderer/components/layout/Page.tsx
index 2f05ba501..a3c3242c8 100644
--- a/src/renderer/components/primitives/Page.tsx
+++ b/src/renderer/components/layout/Page.tsx
@@ -7,7 +7,7 @@ interface IPage {
 
 export const Page: FC<IPage> = (props: IPage) => {
   return (
-    <div className="flex h-screen flex-col" data-testid={props.id}>
+    <div className="flex flex-col h-screen" data-testid={props.id}>
       {props.children}
     </div>
   );
diff --git a/src/renderer/components/layout/__snapshots__/Centered.test.tsx.snap b/src/renderer/components/layout/__snapshots__/Centered.test.tsx.snap
new file mode 100644
index 000000000..086c8d2eb
--- /dev/null
+++ b/src/renderer/components/layout/__snapshots__/Centered.test.tsx.snap
@@ -0,0 +1,167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renderer/components/layout/Centered.tsx should render itself & its children - full height false 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="vertical"
+        data-justify="center"
+        data-padding="spacious"
+        data-wrap="nowrap"
+      >
+        Test
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="center"
+      data-direction="vertical"
+      data-justify="center"
+      data-padding="spacious"
+      data-wrap="nowrap"
+    >
+      Test
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`renderer/components/layout/Centered.tsx should render itself & its children - full height true 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+        data-align="center"
+        data-direction="vertical"
+        data-justify="center"
+        data-padding="spacious"
+        data-wrap="nowrap"
+      >
+        Test
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+      data-align="center"
+      data-direction="vertical"
+      data-justify="center"
+      data-padding="spacious"
+      data-wrap="nowrap"
+    >
+      Test
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/renderer/components/primitives/__snapshots__/Contents.test.tsx.snap b/src/renderer/components/layout/__snapshots__/Contents.test.tsx.snap
similarity index 95%
rename from src/renderer/components/primitives/__snapshots__/Contents.test.tsx.snap
rename to src/renderer/components/layout/__snapshots__/Contents.test.tsx.snap
index 5a12ae7a7..1564ecae4 100644
--- a/src/renderer/components/primitives/__snapshots__/Contents.test.tsx.snap
+++ b/src/renderer/components/layout/__snapshots__/Contents.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderer/components/primitives/Contents.tsx should render itself & its children 1`] = `
+exports[`renderer/components/layout/Contents.tsx should render itself & its children 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
diff --git a/src/renderer/components/layout/__snapshots__/EmojiSplash.test.tsx.snap b/src/renderer/components/layout/__snapshots__/EmojiSplash.test.tsx.snap
new file mode 100644
index 000000000..11ad0abcb
--- /dev/null
+++ b/src/renderer/components/layout/__snapshots__/EmojiSplash.test.tsx.snap
@@ -0,0 +1,313 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renderer/components/layout/EmojiSplash.tsx should render itself & its children - heading and sub-heading 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+        data-align="center"
+        data-direction="vertical"
+        data-justify="center"
+        data-padding="spacious"
+        data-wrap="nowrap"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="condensed"
+          data-justify="center"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="vertical"
+            data-gap="spacious"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <div
+              class="Box-sc-g0xbh4-0 text-5xl"
+            >
+              <img
+                alt="🍺"
+                class="emoji"
+                draggable="false"
+                src="images/twemoji/1f37a.svg"
+              />
+            </div>
+            <div
+              class="Box-sc-g0xbh4-0 text-xl font-semibold"
+            >
+              Test Heading
+            </div>
+          </div>
+          <div
+            class="Box-sc-g0xbh4-0 text-center"
+          >
+            Test Sub-Heading
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+      data-align="center"
+      data-direction="vertical"
+      data-justify="center"
+      data-padding="spacious"
+      data-wrap="nowrap"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="vertical"
+        data-gap="condensed"
+        data-justify="center"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="spacious"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <div
+            class="Box-sc-g0xbh4-0 text-5xl"
+          >
+            <img
+              alt="🍺"
+              class="emoji"
+              draggable="false"
+              src="images/twemoji/1f37a.svg"
+            />
+          </div>
+          <div
+            class="Box-sc-g0xbh4-0 text-xl font-semibold"
+          >
+            Test Heading
+          </div>
+        </div>
+        <div
+          class="Box-sc-g0xbh4-0 text-center"
+        >
+          Test Sub-Heading
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`renderer/components/layout/EmojiSplash.tsx should render itself & its children - heading only 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+        data-align="center"
+        data-direction="vertical"
+        data-justify="center"
+        data-padding="spacious"
+        data-wrap="nowrap"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="condensed"
+          data-justify="center"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="vertical"
+            data-gap="spacious"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <div
+              class="Box-sc-g0xbh4-0 text-5xl"
+            >
+              <img
+                alt="🍺"
+                class="emoji"
+                draggable="false"
+                src="images/twemoji/1f37a.svg"
+              />
+            </div>
+            <div
+              class="Box-sc-g0xbh4-0 text-xl font-semibold"
+            >
+              Test Heading
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+      data-align="center"
+      data-direction="vertical"
+      data-justify="center"
+      data-padding="spacious"
+      data-wrap="nowrap"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="vertical"
+        data-gap="condensed"
+        data-justify="center"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="spacious"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <div
+            class="Box-sc-g0xbh4-0 text-5xl"
+          >
+            <img
+              alt="🍺"
+              class="emoji"
+              draggable="false"
+              src="images/twemoji/1f37a.svg"
+            />
+          </div>
+          <div
+            class="Box-sc-g0xbh4-0 text-xl font-semibold"
+          >
+            Test Heading
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/renderer/components/primitives/__snapshots__/Page.test.tsx.snap b/src/renderer/components/layout/__snapshots__/Page.test.tsx.snap
similarity index 92%
rename from src/renderer/components/primitives/__snapshots__/Page.test.tsx.snap
rename to src/renderer/components/layout/__snapshots__/Page.test.tsx.snap
index 219784848..a6b90a012 100644
--- a/src/renderer/components/primitives/__snapshots__/Page.test.tsx.snap
+++ b/src/renderer/components/layout/__snapshots__/Page.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderer/components/primitives/Page.tsx should render itself & its children 1`] = `
+exports[`renderer/components/layout/Page.tsx should render itself & its children 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex h-screen flex-col"
+        class="flex flex-col h-screen"
         data-testid="test"
       >
         Test
@@ -15,7 +15,7 @@ exports[`renderer/components/primitives/Page.tsx should render itself & its chil
   </body>,
   "container": <div>
     <div
-      class="flex h-screen flex-col"
+      class="flex flex-col h-screen"
       data-testid="test"
     >
       Test
diff --git a/src/renderer/components/notifications/Pills.test.tsx b/src/renderer/components/metrics/MetricGroup.test.tsx
similarity index 91%
rename from src/renderer/components/notifications/Pills.test.tsx
rename to src/renderer/components/metrics/MetricGroup.test.tsx
index 38f1d5f54..6be4727f6 100644
--- a/src/renderer/components/notifications/Pills.test.tsx
+++ b/src/renderer/components/metrics/MetricGroup.test.tsx
@@ -3,9 +3,9 @@ import { mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
 import type { Milestone } from '../../typesGitHub';
 import { mockSingleNotification } from '../../utils/api/__mocks__/response-mocks';
-import { Pills } from './Pills';
+import { MetricGroup } from './MetricGroup';
 
-describe('renderer/components/notifications/Pills.tsx', () => {
+describe('renderer/components/metrics/MetricGroup.tsx', () => {
   describe('showPills disabled', () => {
     it('should not render any pills when showPills is disabled', async () => {
       const mockNotification = mockSingleNotification;
@@ -20,7 +20,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
             settings: { ...mockSettings, showPills: false },
           }}
         >
-          <Pills {...props} />
+          <MetricGroup {...props} />
         </AppContext.Provider>,
       );
       expect(tree).toMatchSnapshot();
@@ -42,7 +42,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
             settings: mockSettings,
           }}
         >
-          <Pills {...props} />
+          <MetricGroup {...props} />
         </AppContext.Provider>,
       );
       expect(tree).toMatchSnapshot();
@@ -62,7 +62,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
             settings: mockSettings,
           }}
         >
-          <Pills {...props} />
+          <MetricGroup {...props} />
         </AppContext.Provider>,
       );
       expect(tree).toMatchSnapshot();
@@ -84,7 +84,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
             settings: mockSettings,
           }}
         >
-          <Pills {...props} />
+          <MetricGroup {...props} />
         </AppContext.Provider>,
       );
       expect(tree).toMatchSnapshot();
@@ -104,7 +104,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
             settings: mockSettings,
           }}
         >
-          <Pills {...props} />
+          <MetricGroup {...props} />
         </AppContext.Provider>,
       );
       expect(tree).toMatchSnapshot();
@@ -124,7 +124,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
             settings: mockSettings,
           }}
         >
-          <Pills {...props} />
+          <MetricGroup {...props} />
         </AppContext.Provider>,
       );
       expect(tree).toMatchSnapshot();
@@ -146,7 +146,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
             settings: mockSettings,
           }}
         >
-          <Pills {...props} />
+          <MetricGroup {...props} />
         </AppContext.Provider>,
       );
       expect(tree).toMatchSnapshot();
@@ -171,7 +171,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
             settings: mockSettings,
           }}
         >
-          <Pills {...props} />
+          <MetricGroup {...props} />
         </AppContext.Provider>,
       );
       expect(tree).toMatchSnapshot();
@@ -194,7 +194,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
             settings: mockSettings,
           }}
         >
-          <Pills {...props} />
+          <MetricGroup {...props} />
         </AppContext.Provider>,
       );
       expect(tree).toMatchSnapshot();
diff --git a/src/renderer/components/notifications/Pills.tsx b/src/renderer/components/metrics/MetricGroup.tsx
similarity index 87%
rename from src/renderer/components/notifications/Pills.tsx
rename to src/renderer/components/metrics/MetricGroup.tsx
index 1cebe4750..f07b5ee4e 100644
--- a/src/renderer/components/notifications/Pills.tsx
+++ b/src/renderer/components/metrics/MetricGroup.tsx
@@ -6,18 +6,21 @@ import {
   MilestoneIcon,
   TagIcon,
 } from '@primer/octicons-react';
+import { Box } from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { IconColor } from '../../types';
 import type { Notification } from '../../typesGitHub';
 import { getPullRequestReviewIcon } from '../../utils/icons';
-import { PillButton } from '../buttons/PillButton';
+import { MetricPill } from './MetricPill';
 
-interface IPills {
+interface IMetricGroup {
   notification: Notification;
 }
 
-export const Pills: FC<IPills> = ({ notification }: IPills) => {
+export const MetricGroup: FC<IMetricGroup> = ({
+  notification,
+}: IMetricGroup) => {
   const { settings } = useContext(AppContext);
 
   const commentsPillDescription = `${notification.subject.comments} ${
@@ -34,9 +37,9 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
 
   return (
     settings.showPills && (
-      <div className="flex">
+      <Box className="flex gap-1">
         {notification.subject?.linkedIssues?.length > 0 && (
-          <PillButton
+          <MetricPill
             title={linkedIssuesPillDescription}
             metric={notification.subject.linkedIssues.length}
             icon={IssueClosedIcon}
@@ -51,7 +54,7 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
           }
 
           return (
-            <PillButton
+            <MetricPill
               key={review.state}
               title={icon.description}
               metric={review.users.length}
@@ -61,7 +64,7 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
           );
         })}
         {notification.subject?.comments > 0 && (
-          <PillButton
+          <MetricPill
             title={commentsPillDescription}
             metric={notification.subject.comments}
             icon={CommentIcon}
@@ -69,7 +72,7 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
           />
         )}
         {notification.subject?.labels?.length > 0 && (
-          <PillButton
+          <MetricPill
             title={labelsPillDescription}
             metric={notification.subject.labels.length}
             icon={TagIcon}
@@ -77,7 +80,7 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
           />
         )}
         {notification.subject.milestone && (
-          <PillButton
+          <MetricPill
             title={notification.subject.milestone.title}
             icon={MilestoneIcon}
             color={
@@ -87,7 +90,7 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
             }
           />
         )}
-      </div>
+      </Box>
     )
   );
 };
diff --git a/src/renderer/components/buttons/PillButton.test.tsx b/src/renderer/components/metrics/MetricPill.test.tsx
similarity index 64%
rename from src/renderer/components/buttons/PillButton.test.tsx
rename to src/renderer/components/metrics/MetricPill.test.tsx
index 9d446c4e4..ceed253bf 100644
--- a/src/renderer/components/buttons/PillButton.test.tsx
+++ b/src/renderer/components/metrics/MetricPill.test.tsx
@@ -1,27 +1,27 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { render } from '@testing-library/react';
 import { IconColor } from '../../types';
-import { type IPillButton, PillButton } from './PillButton';
+import { type IMetricPill, MetricPill } from './MetricPill';
 
-describe('renderer/components/buttons/PillButton.tsx', () => {
+describe('renderer/components/metrics/MetricPill.tsx', () => {
   it('should render with metric', () => {
-    const props: IPillButton = {
+    const props: IMetricPill = {
       title: 'Mock Pill',
       metric: 1,
       icon: MarkGithubIcon,
       color: IconColor.GREEN,
     };
-    const tree = render(<PillButton {...props} />);
+    const tree = render(<MetricPill {...props} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('should render without metric', () => {
-    const props: IPillButton = {
+    const props: IMetricPill = {
       title: 'Mock Pill',
       icon: MarkGithubIcon,
       color: IconColor.GREEN,
     };
-    const tree = render(<PillButton {...props} />);
+    const tree = render(<MetricPill {...props} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/renderer/components/metrics/MetricPill.tsx b/src/renderer/components/metrics/MetricPill.tsx
new file mode 100644
index 000000000..9719565fb
--- /dev/null
+++ b/src/renderer/components/metrics/MetricPill.tsx
@@ -0,0 +1,30 @@
+import type { FC } from 'react';
+
+import type { Icon } from '@primer/octicons-react';
+import { Label, Stack, Text } from '@primer/react';
+
+import { type IconColor, Size } from '../../types';
+
+export interface IMetricPill {
+  key?: string;
+  title: string;
+  metric?: number;
+  icon: Icon;
+  color: IconColor;
+}
+
+export const MetricPill: FC<IMetricPill> = (props: IMetricPill) => {
+  return (
+    <Label
+      variant="secondary"
+      size="small"
+      title={props.title}
+      className="hover:bg-gitify-notification-pill-hover"
+    >
+      <Stack direction="horizontal" align="center" gap="none">
+        <props.icon size={Size.XSMALL} className={props.color} />
+        {props.metric && <Text className="text-xxs px-1">{props.metric}</Text>}
+      </Stack>
+    </Label>
+  );
+};
diff --git a/src/renderer/components/notifications/__snapshots__/Pills.test.tsx.snap b/src/renderer/components/metrics/__snapshots__/MetricGroup.test.tsx.snap
similarity index 80%
rename from src/renderer/components/notifications/__snapshots__/Pills.test.tsx.snap
rename to src/renderer/components/metrics/__snapshots__/MetricGroup.test.tsx.snap
index 96270965a..4b2a4cfc2 100644
--- a/src/renderer/components/notifications/__snapshots__/Pills.test.tsx.snap
+++ b/src/renderer/components/metrics/__snapshots__/MetricGroup.test.tsx.snap
@@ -1,30 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderer/components/notifications/Pills.tsx comment pills should render when 1 comment 1`] = `
+exports[`renderer/components/metrics/MetricGroup.tsx comment pills should render when 1 comment 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="Linked to issues #1, #2"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-closed text-primer-open"
+              class="octicon octicon-issue-closed text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -42,29 +42,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -79,29 +79,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -116,29 +116,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="1 comment"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-comment text-primer-muted"
+              class="octicon octicon-comment text-gitify-icon-muted"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -153,36 +153,36 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="flex"
+      class="Box-sc-g0xbh4-0 flex gap-1"
     >
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Linked to issues #1, #2"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-closed text-primer-open"
+            class="octicon octicon-issue-closed text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -200,29 +200,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="octocat approved these changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-check text-primer-open"
+            class="octicon octicon-check text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -237,29 +237,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="gitify-app requested changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-file-diff text-primer-closed"
+            class="octicon octicon-file-diff text-gitify-icon-closed"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -274,29 +274,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="1 comment"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-comment text-primer-muted"
+            class="octicon octicon-comment text-gitify-icon-muted"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -311,12 +311,12 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
+      </span>
     </div>
   </div>,
   "debug": [Function],
@@ -373,31 +373,31 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
 }
 `;
 
-exports[`renderer/components/notifications/Pills.tsx comment pills should render when more than 1 comments 1`] = `
+exports[`renderer/components/metrics/MetricGroup.tsx comment pills should render when more than 1 comments 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="Linked to issues #1, #2"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-closed text-primer-open"
+              class="octicon octicon-issue-closed text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -415,29 +415,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -452,29 +452,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -489,29 +489,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="2 comments"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-comment text-primer-muted"
+              class="octicon octicon-comment text-gitify-icon-muted"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -526,36 +526,36 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="flex"
+      class="Box-sc-g0xbh4-0 flex gap-1"
     >
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Linked to issues #1, #2"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-closed text-primer-open"
+            class="octicon octicon-issue-closed text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -573,29 +573,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="octocat approved these changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-check text-primer-open"
+            class="octicon octicon-check text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -610,29 +610,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="gitify-app requested changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-file-diff text-primer-closed"
+            class="octicon octicon-file-diff text-gitify-icon-closed"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -647,29 +647,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="2 comments"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-comment text-primer-muted"
+            class="octicon octicon-comment text-gitify-icon-muted"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -684,12 +684,12 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
+      </span>
     </div>
   </div>,
   "debug": [Function],
@@ -746,31 +746,31 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
 }
 `;
 
-exports[`renderer/components/notifications/Pills.tsx comment pills should render when no comments 1`] = `
+exports[`renderer/components/metrics/MetricGroup.tsx comment pills should render when no comments 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="Linked to issues #1, #2"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-closed text-primer-open"
+              class="octicon octicon-issue-closed text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -788,29 +788,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -825,29 +825,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -862,36 +862,36 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="flex"
+      class="Box-sc-g0xbh4-0 flex gap-1"
     >
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Linked to issues #1, #2"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-closed text-primer-open"
+            class="octicon octicon-issue-closed text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -909,29 +909,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="octocat approved these changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-check text-primer-open"
+            class="octicon octicon-check text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -946,29 +946,29 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="gitify-app requested changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-file-diff text-primer-closed"
+            class="octicon octicon-file-diff text-gitify-icon-closed"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -983,12 +983,12 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
+      </span>
     </div>
   </div>,
   "debug": [Function],
@@ -1045,31 +1045,31 @@ exports[`renderer/components/notifications/Pills.tsx comment pills should render
 }
 `;
 
-exports[`renderer/components/notifications/Pills.tsx label pills should render labels pill 1`] = `
+exports[`renderer/components/metrics/MetricGroup.tsx label pills should render labels pill 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="Linked to issues #1, #2"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-closed text-primer-open"
+              class="octicon octicon-issue-closed text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1087,29 +1087,29 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1124,29 +1124,29 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1161,29 +1161,29 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="2 comments"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-comment text-primer-muted"
+              class="octicon octicon-comment text-gitify-icon-muted"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1198,30 +1198,30 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="🏷️ enhancement
 🏷️ good-first-issue"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-tag text-primer-muted"
+              class="octicon octicon-tag text-gitify-icon-muted"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1236,36 +1236,36 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="flex"
+      class="Box-sc-g0xbh4-0 flex gap-1"
     >
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Linked to issues #1, #2"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-closed text-primer-open"
+            class="octicon octicon-issue-closed text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1283,29 +1283,29 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="octocat approved these changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-check text-primer-open"
+            class="octicon octicon-check text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1320,29 +1320,29 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="gitify-app requested changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-file-diff text-primer-closed"
+            class="octicon octicon-file-diff text-gitify-icon-closed"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1357,29 +1357,29 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="2 comments"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-comment text-primer-muted"
+            class="octicon octicon-comment text-gitify-icon-muted"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1394,30 +1394,30 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="🏷️ enhancement
 🏷️ good-first-issue"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-tag text-primer-muted"
+            class="octicon octicon-tag text-gitify-icon-muted"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1432,12 +1432,12 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
+      </span>
     </div>
   </div>,
   "debug": [Function],
@@ -1494,31 +1494,31 @@ exports[`renderer/components/notifications/Pills.tsx label pills should render l
 }
 `;
 
-exports[`renderer/components/notifications/Pills.tsx linked issue pills should render issues pill when linked to multiple issues/prs 1`] = `
+exports[`renderer/components/metrics/MetricGroup.tsx linked issue pills should render issues pill when linked to multiple issues/prs 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="Linked to issues #1, #2"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-closed text-primer-open"
+              class="octicon octicon-issue-closed text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1536,29 +1536,29 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1573,29 +1573,29 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1610,36 +1610,36 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="flex"
+      class="Box-sc-g0xbh4-0 flex gap-1"
     >
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Linked to issues #1, #2"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-closed text-primer-open"
+            class="octicon octicon-issue-closed text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1657,29 +1657,29 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="octocat approved these changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-check text-primer-open"
+            class="octicon octicon-check text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1694,29 +1694,29 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="gitify-app requested changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-file-diff text-primer-closed"
+            class="octicon octicon-file-diff text-gitify-icon-closed"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1731,12 +1731,12 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
+      </span>
     </div>
   </div>,
   "debug": [Function],
@@ -1793,31 +1793,31 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
 }
 `;
 
-exports[`renderer/components/notifications/Pills.tsx linked issue pills should render issues pill when linked to one issue/pr 1`] = `
+exports[`renderer/components/metrics/MetricGroup.tsx linked issue pills should render issues pill when linked to one issue/pr 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="Linked to issue #1"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-closed text-primer-open"
+              class="octicon octicon-issue-closed text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1835,29 +1835,29 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1872,29 +1872,29 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1909,36 +1909,36 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="flex"
+      class="Box-sc-g0xbh4-0 flex gap-1"
     >
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Linked to issue #1"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-closed text-primer-open"
+            class="octicon octicon-issue-closed text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1956,29 +1956,29 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="octocat approved these changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-check text-primer-open"
+            class="octicon octicon-check text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1993,29 +1993,29 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="gitify-app requested changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-file-diff text-primer-closed"
+            class="octicon octicon-file-diff text-gitify-icon-closed"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2030,12 +2030,12 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
+      </span>
     </div>
   </div>,
   "debug": [Function],
@@ -2092,31 +2092,31 @@ exports[`renderer/components/notifications/Pills.tsx linked issue pills should r
 }
 `;
 
-exports[`renderer/components/notifications/Pills.tsx milestone pills should render closed milestone pill 1`] = `
+exports[`renderer/components/metrics/MetricGroup.tsx milestone pills should render closed milestone pill 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="Linked to issues #1, #2"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-closed text-primer-open"
+              class="octicon octicon-issue-closed text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2134,29 +2134,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2171,29 +2171,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2208,29 +2208,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="2 comments"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-comment text-primer-muted"
+              class="octicon octicon-comment text-gitify-icon-muted"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2245,30 +2245,30 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="🏷️ enhancement
 🏷️ good-first-issue"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-tag text-primer-muted"
+              class="octicon octicon-tag text-gitify-icon-muted"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2283,29 +2283,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="Milestone 1"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-milestone text-primer-closed"
+              class="octicon octicon-milestone text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2320,31 +2320,31 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="flex"
+      class="Box-sc-g0xbh4-0 flex gap-1"
     >
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Linked to issues #1, #2"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-closed text-primer-open"
+            class="octicon octicon-issue-closed text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2362,29 +2362,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="octocat approved these changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-check text-primer-open"
+            class="octicon octicon-check text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2399,29 +2399,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="gitify-app requested changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-file-diff text-primer-closed"
+            class="octicon octicon-file-diff text-gitify-icon-closed"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2436,29 +2436,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="2 comments"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-comment text-primer-muted"
+            class="octicon octicon-comment text-gitify-icon-muted"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2473,30 +2473,30 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="🏷️ enhancement
 🏷️ good-first-issue"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-tag text-primer-muted"
+            class="octicon octicon-tag text-gitify-icon-muted"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2511,29 +2511,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Milestone 1"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-milestone text-primer-closed"
+            class="octicon octicon-milestone text-gitify-icon-closed"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2548,7 +2548,7 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
         </div>
-      </button>
+      </span>
     </div>
   </div>,
   "debug": [Function],
@@ -2605,31 +2605,31 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
 }
 `;
 
-exports[`renderer/components/notifications/Pills.tsx milestone pills should render open milestone pill 1`] = `
+exports[`renderer/components/metrics/MetricGroup.tsx milestone pills should render open milestone pill 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="Linked to issues #1, #2"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-closed text-primer-open"
+              class="octicon octicon-issue-closed text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2647,29 +2647,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2684,29 +2684,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2721,29 +2721,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="2 comments"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-comment text-primer-muted"
+              class="octicon octicon-comment text-gitify-icon-muted"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2758,30 +2758,30 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="🏷️ enhancement
 🏷️ good-first-issue"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-tag text-primer-muted"
+              class="octicon octicon-tag text-gitify-icon-muted"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2796,29 +2796,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               2
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="Milestone 1"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-milestone text-primer-open"
+              class="octicon octicon-milestone text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2833,31 +2833,31 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
               />
             </svg>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="flex"
+      class="Box-sc-g0xbh4-0 flex gap-1"
     >
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Linked to issues #1, #2"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-closed text-primer-open"
+            class="octicon octicon-issue-closed text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2875,29 +2875,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="octocat approved these changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-check text-primer-open"
+            class="octicon octicon-check text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2912,29 +2912,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="gitify-app requested changes"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-file-diff text-primer-closed"
+            class="octicon octicon-file-diff text-gitify-icon-closed"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2949,29 +2949,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="2 comments"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-comment text-primer-muted"
+            class="octicon octicon-comment text-gitify-icon-muted"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2986,30 +2986,30 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="🏷️ enhancement
 🏷️ good-first-issue"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-tag text-primer-muted"
+            class="octicon octicon-tag text-gitify-icon-muted"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -3024,29 +3024,29 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             2
           </span>
         </div>
-      </button>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      </span>
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Milestone 1"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-milestone text-primer-open"
+            class="octicon octicon-milestone text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -3061,7 +3061,7 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
             />
           </svg>
         </div>
-      </button>
+      </span>
     </div>
   </div>,
   "debug": [Function],
@@ -3118,7 +3118,7 @@ exports[`renderer/components/notifications/Pills.tsx milestone pills should rend
 }
 `;
 
-exports[`renderer/components/notifications/Pills.tsx showPills disabled should not render any pills when showPills is disabled 1`] = `
+exports[`renderer/components/metrics/MetricGroup.tsx showPills disabled should not render any pills when showPills is disabled 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
diff --git a/src/renderer/components/buttons/__snapshots__/PillButton.test.tsx.snap b/src/renderer/components/metrics/__snapshots__/MetricPill.test.tsx.snap
similarity index 87%
rename from src/renderer/components/buttons/__snapshots__/PillButton.test.tsx.snap
rename to src/renderer/components/metrics/__snapshots__/MetricPill.test.tsx.snap
index e95a61ca0..13b64963c 100644
--- a/src/renderer/components/buttons/__snapshots__/PillButton.test.tsx.snap
+++ b/src/renderer/components/metrics/__snapshots__/MetricPill.test.tsx.snap
@@ -1,27 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderer/components/buttons/PillButton.tsx should render with metric 1`] = `
+exports[`renderer/components/metrics/MetricPill.tsx should render with metric 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Mock Pill"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-mark-github text-primer-open"
+            class="octicon octicon-mark-github text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -36,32 +36,32 @@ exports[`renderer/components/buttons/PillButton.tsx should render with metric 1`
             />
           </svg>
           <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
+            class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
           >
             1
           </span>
         </div>
-      </button>
+      </span>
     </div>
   </body>,
   "container": <div>
-    <button
-      class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+    <span
+      class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
       title="Mock Pill"
-      type="button"
+      variant="secondary"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
         data-direction="horizontal"
-        data-gap="condensed"
+        data-gap="none"
         data-justify="start"
         data-padding="none"
         data-wrap="nowrap"
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-mark-github text-primer-open"
+          class="octicon octicon-mark-github text-gitify-icon-open"
           display="inline-block"
           fill="currentColor"
           focusable="false"
@@ -76,12 +76,12 @@ exports[`renderer/components/buttons/PillButton.tsx should render with metric 1`
           />
         </svg>
         <span
-          class="Text-sc-17v1xeu-0 hmAFGJ"
+          class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
         >
           1
         </span>
       </div>
-    </button>
+    </span>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
@@ -137,28 +137,28 @@ exports[`renderer/components/buttons/PillButton.tsx should render with metric 1`
 }
 `;
 
-exports[`renderer/components/buttons/PillButton.tsx should render without metric 1`] = `
+exports[`renderer/components/metrics/MetricPill.tsx should render without metric 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <button
-        class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+      <span
+        class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
         title="Mock Pill"
-        type="button"
+        variant="secondary"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-mark-github text-primer-open"
+            class="octicon octicon-mark-github text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -173,27 +173,27 @@ exports[`renderer/components/buttons/PillButton.tsx should render without metric
             />
           </svg>
         </div>
-      </button>
+      </span>
     </div>
   </body>,
   "container": <div>
-    <button
-      class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+    <span
+      class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
       title="Mock Pill"
-      type="button"
+      variant="secondary"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
         data-direction="horizontal"
-        data-gap="condensed"
+        data-gap="none"
         data-justify="start"
         data-padding="none"
         data-wrap="nowrap"
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-mark-github text-primer-open"
+          class="octicon octicon-mark-github text-gitify-icon-open"
           display="inline-block"
           fill="currentColor"
           focusable="false"
@@ -208,7 +208,7 @@ exports[`renderer/components/buttons/PillButton.tsx should render without metric
           />
         </svg>
       </div>
-    </button>
+    </span>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/components/notifications/AccountNotifications.tsx b/src/renderer/components/notifications/AccountNotifications.tsx
index 900e63d64..c42452c66 100644
--- a/src/renderer/components/notifications/AccountNotifications.tsx
+++ b/src/renderer/components/notifications/AccountNotifications.tsx
@@ -70,10 +70,8 @@ export const AccountNotifications: FC<IAccountNotifications> = (
       {showAccountHeader && (
         <div
           className={cn(
-            'group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white',
-            props.error
-              ? 'bg-gitify-accounts-error'
-              : 'bg-gitify-accounts-rest',
+            'group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold',
+            props.error ? 'bg-gitify-account-error' : 'bg-gitify-account-rest',
           )}
           onClick={toggleAccountNotifications}
         >
@@ -136,8 +134,8 @@ export const AccountNotifications: FC<IAccountNotifications> = (
 
       {showAccountNotifications && (
         <>
-          {props.error && <Oops error={props.error} />}
-          {!hasNotifications && !props.error && <AllRead />}
+          {props.error && <Oops error={props.error} fullHeight={false} />}
+          {!hasNotifications && !props.error && <AllRead fullHeight={false} />}
           {isGroupByRepository
             ? Object.values(groupedNotifications).map((repoNotifications) => {
                 const repoSlug = repoNotifications[0].repository.full_name;
diff --git a/src/renderer/components/notifications/NotificationFooter.tsx b/src/renderer/components/notifications/NotificationFooter.tsx
index ca44a26ee..cfe54ddbc 100644
--- a/src/renderer/components/notifications/NotificationFooter.tsx
+++ b/src/renderer/components/notifications/NotificationFooter.tsx
@@ -9,7 +9,7 @@ import { cn } from '../../utils/cn';
 import { isNonHumanUser } from '../../utils/helpers';
 import { openUserProfile } from '../../utils/links';
 import { formatReason } from '../../utils/reason';
-import { Pills } from './Pills';
+import { MetricGroup } from '../metrics/MetricGroup';
 
 interface INotificationFooter {
   notification: Notification;
@@ -21,7 +21,13 @@ export const NotificationFooter: FC<INotificationFooter> = ({
   const reason = formatReason(notification.reason);
 
   return (
-    <Stack direction="horizontal" align="center" gap="condensed" wrap="wrap">
+    <Stack
+      direction="horizontal"
+      align="center"
+      gap="condensed"
+      wrap="wrap"
+      className={cn('text-xs', Opacity.MEDIUM)}
+    >
       {notification.subject.user ? (
         <Avatar
           title={`View profile: ${notification.subject.user.login}`}
@@ -45,15 +51,14 @@ export const NotificationFooter: FC<INotificationFooter> = ({
           )}
         </>
       )}
-      <span className={cn('text-xs', Opacity.MEDIUM)}>
-        <Stack direction="horizontal" gap="condensed">
-          <Text title={reason.description}>{reason.title}</Text>
-          <Text>&bull;</Text>
-          <RelativeTime datetime={notification.updated_at} />
-        </Stack>
-      </span>
 
-      <Pills notification={notification} />
+      <Stack direction="horizontal" gap="none">
+        <Text title={reason.description}>{reason.title}</Text>
+        <Text className="px-1">&bull;</Text>
+        <RelativeTime datetime={notification.updated_at} />
+      </Stack>
+
+      <MetricGroup notification={notification} />
     </Stack>
   );
 };
diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx
index 123257ca8..1804947cd 100644
--- a/src/renderer/components/notifications/NotificationRow.tsx
+++ b/src/renderer/components/notifications/NotificationRow.tsx
@@ -88,7 +88,7 @@ export const NotificationRow: FC<INotificationRow> = ({
     <div
       id={notification.id}
       className={cn(
-        'group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover',
+        'group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover',
         (isAnimated || animateExit) &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
         (isRead || showAsRead) && Opacity.READ,
diff --git a/src/renderer/components/notifications/RepositoryNotifications.tsx b/src/renderer/components/notifications/RepositoryNotifications.tsx
index 0ef6d1633..d0e997c1c 100644
--- a/src/renderer/components/notifications/RepositoryNotifications.tsx
+++ b/src/renderer/components/notifications/RepositoryNotifications.tsx
@@ -43,7 +43,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
   return (
     <>
       <div
-        className="group flex justify-between pr-1 py-0.5 bg-gitify-repositories dark:text-white"
+        className="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
         onClick={toggleRepositoryNotifications}
       >
         <div
diff --git a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
index 150407d1d..13710501e 100644
--- a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-error"
+        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-error"
       >
         <button
           aria-describedby=":r15:-loading-announcement"
@@ -77,251 +77,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </button>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-        >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
-          >
-            <button
-              aria-describedby=":r17:-loading-announcement"
-              aria-labelledby=":r16:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-issues"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-issue-opened"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                />
-                <path
-                  d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r16:"
-              popover="auto"
-            >
-              My Issues
-            </span>
-            <button
-              aria-describedby=":r19:-loading-announcement"
-              aria-labelledby=":r18:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-pull-requests"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-git-pull-request"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r18:"
-              popover="auto"
-            >
-              My Pull Requests
-            </span>
-            <button
-              aria-describedby=":r1b:-loading-announcement"
-              aria-labelledby=":r1a:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-toggle"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-chevron-left"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r1a:"
-              popover="auto"
-            >
-              No notifications for account
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
-      >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="vertical"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
-        >
-          <div
-            class="mt-2 text-5xl"
-          >
-            <span>
-              <img
-                alt="🔥"
-                class="emoji"
-                draggable="false"
-                src="images/twemoji/1f525.svg"
-              />
-            </span>
-          </div>
-          <div
-            class="mb-2 text-xl font-semibold"
-          >
-            Error title
-          </div>
-          <div
-            class="mb-2 text-center"
-          >
-            Error description
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-error"
-    >
-      <button
-        aria-describedby=":r15:-loading-announcement"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="account-profile"
-        sx="[object Object]"
-        title="Open account profile"
-        type="button"
-      >
-        <span
-          class="Box-sc-g0xbh4-0 srpGE"
-          data-component="buttonContent"
-          sx="[object Object]"
-        >
-          <span
-            data-component="text"
-          >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
-            >
-              <img
-                alt=""
-                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
-                data-component="Avatar"
-                height="16"
-                size="16"
-                src="https://avatars.githubusercontent.com/u/583231?v=4"
-                sx="[object Object]"
-                width="16"
-              />
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                @
-                octocat
-              </span>
-            </div>
-          </span>
-          <span
-            class="Box-sc-g0xbh4-0 mhHOW"
-            data-component="trailingVisual"
-            sx="[object Object]"
-          >
-            <span
-              aria-hidden="true"
-              class="Box-sc-g0xbh4-0 bfvZWv"
-              data-component="ButtonCounter"
-              sx="[object Object]"
-            >
-              0
-            </span>
-            <span
-              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
-            >
-               (
-              0
-              )
-            </span>
-          </span>
-        </span>
-      </button>
-      <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-      >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -448,95 +204,359 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </div>
       </div>
-    </div>
-    <div
-      class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
-    >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
         data-direction="vertical"
-        data-justify="start"
-        data-padding="none"
+        data-justify="center"
+        data-padding="spacious"
         data-wrap="nowrap"
       >
         <div
-          class="mt-2 text-5xl"
-        >
-          <span>
-            <img
-              alt="🔥"
-              class="emoji"
-              draggable="false"
-              src="images/twemoji/1f525.svg"
-            />
-          </span>
-        </div>
-        <div
-          class="mb-2 text-xl font-semibold"
-        >
-          Error title
-        </div>
-        <div
-          class="mb-2 text-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="condensed"
+          data-justify="center"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          Error description
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="vertical"
+            data-gap="spacious"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <div
+              class="Box-sc-g0xbh4-0 text-5xl"
+            >
+              <img
+                alt="🔥"
+                class="emoji"
+                draggable="false"
+                src="images/twemoji/1f525.svg"
+              />
+            </div>
+            <div
+              class="Box-sc-g0xbh4-0 text-xl font-semibold"
+            >
+              Error title
+            </div>
+          </div>
+          <div
+            class="Box-sc-g0xbh4-0 text-center"
+          >
+            Error description
+          </div>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </body>,
+  "container": <div>
+    <div
+      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-error"
+    >
+      <button
+        aria-describedby=":r15:-loading-announcement"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="account-profile"
+        sx="[object Object]"
+        title="Open account profile"
+        type="button"
+      >
+        <span
+          class="Box-sc-g0xbh4-0 srpGE"
+          data-component="buttonContent"
+          sx="[object Object]"
+        >
+          <span
+            data-component="text"
+          >
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <img
+                alt=""
+                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
+                data-component="Avatar"
+                height="16"
+                size="16"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+                sx="[object Object]"
+                width="16"
+              />
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+              >
+                @
+                octocat
+              </span>
+            </div>
+          </span>
+          <span
+            class="Box-sc-g0xbh4-0 mhHOW"
+            data-component="trailingVisual"
+            sx="[object Object]"
+          >
+            <span
+              aria-hidden="true"
+              class="Box-sc-g0xbh4-0 bfvZWv"
+              data-component="ButtonCounter"
+              sx="[object Object]"
+            >
+              0
+            </span>
+            <span
+              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+            >
+               (
+              0
+              )
+            </span>
+          </span>
+        </span>
+      </button>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r17:-loading-announcement"
+          aria-labelledby=":r16:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-issues"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-issue-opened"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r16:"
+          popover="auto"
+        >
+          My Issues
+        </span>
+        <button
+          aria-describedby=":r19:-loading-announcement"
+          aria-labelledby=":r18:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-pull-requests"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-git-pull-request"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r18:"
+          popover="auto"
+        >
+          My Pull Requests
+        </span>
+        <button
+          aria-describedby=":r1b:-loading-announcement"
+          aria-labelledby=":r1a:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-toggle"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-left"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r1a:"
+          popover="auto"
+        >
+          No notifications for account
+        </span>
+      </div>
+    </div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="center"
+      data-direction="vertical"
+      data-justify="center"
+      data-padding="spacious"
+      data-wrap="nowrap"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="vertical"
+        data-gap="condensed"
+        data-justify="center"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="spacious"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <div
+            class="Box-sc-g0xbh4-0 text-5xl"
+          >
+            <img
+              alt="🔥"
+              class="emoji"
+              draggable="false"
+              src="images/twemoji/1f525.svg"
+            />
+          </div>
+          <div
+            class="Box-sc-g0xbh4-0 text-xl font-semibold"
+          >
+            Error title
+          </div>
+        </div>
+        <div
+          class="Box-sc-g0xbh4-0 text-center"
+        >
+          Error description
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`renderer/components/notifications/AccountNotifications.tsx should render itself - group notifications by date 1`] = `
@@ -545,7 +565,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-rest"
+        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
       >
         <button
           aria-describedby=":r7:-loading-announcement"
@@ -616,139 +636,135 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </button>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <button
+            aria-describedby=":r9:-loading-announcement"
+            aria-labelledby=":r8:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="account-issues"
+            sx="[object Object]"
+            type="button"
           >
-            <button
-              aria-describedby=":r9:-loading-announcement"
-              aria-labelledby=":r8:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-issues"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-issue-opened"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                />
-                <path
-                  d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-                />
-              </svg>
-            </button>
-            <span
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r8:"
-              popover="auto"
-            >
-              My Issues
-            </span>
-            <button
-              aria-describedby=":rb:-loading-announcement"
-              aria-labelledby=":ra:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-pull-requests"
-              sx="[object Object]"
-              type="button"
+              class="octicon octicon-issue-opened"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-git-pull-request"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-                />
-              </svg>
-            </button>
-            <span
+              <path
+                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+              />
+              <path
+                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r8:"
+            popover="auto"
+          >
+            My Issues
+          </span>
+          <button
+            aria-describedby=":rb:-loading-announcement"
+            aria-labelledby=":ra:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="account-pull-requests"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":ra:"
-              popover="auto"
-            >
-              My Pull Requests
-            </span>
-            <button
-              aria-describedby=":rd:-loading-announcement"
-              aria-labelledby=":rc:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-toggle"
-              sx="[object Object]"
-              type="button"
+              class="octicon octicon-git-pull-request"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-chevron-down"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
+              <path
+                d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":ra:"
+            popover="auto"
+          >
+            My Pull Requests
+          </span>
+          <button
+            aria-describedby=":rd:-loading-announcement"
+            aria-labelledby=":rc:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="account-toggle"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rc:"
-              popover="auto"
+              class="octicon octicon-chevron-down"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Hide account notifications
-            </span>
-          </div>
+              <path
+                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rc:"
+            popover="auto"
+          >
+            Hide account notifications
+          </span>
         </div>
       </div>
       <div
-        class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover"
+        class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
         id="138661096"
       >
         <div
@@ -762,7 +778,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-opened text-primer-open"
+              class="octicon octicon-issue-opened text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -835,7 +851,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             />
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -855,57 +871,53 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               title="View profile: gitify-app"
               width="14"
             />
-            <span
-              class="text-xs opacity-80"
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="stretch"
+              data-direction="horizontal"
+              data-gap="none"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
             >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="stretch"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+                title="You're watching the repository."
               >
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                  title="You're watching the repository."
-                >
-                  Updated
-                </span>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  •
-                </span>
-                <relative-time
-                  class="sc-KXCwU"
-                  datetime="2017-05-20T17:51:57.000Z"
-                >
-                  May 20, 2017
-                </relative-time>
-              </div>
-            </span>
+                Updated
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+              >
+                •
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:51:57.000Z"
+              >
+                May 20, 2017
+              </relative-time>
+            </div>
             <div
-              class="flex"
+              class="Box-sc-g0xbh4-0 flex gap-1"
             >
-              <button
-                class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+              <span
+                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
                 title="octocat approved these changes"
-                type="button"
+                variant="secondary"
               >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
                   data-direction="horizontal"
-                  data-gap="condensed"
+                  data-gap="none"
                   data-justify="start"
                   data-padding="none"
                   data-wrap="nowrap"
                 >
                   <svg
                     aria-hidden="true"
-                    class="octicon octicon-check text-primer-open"
+                    class="octicon octicon-check text-gitify-icon-open"
                     display="inline-block"
                     fill="currentColor"
                     focusable="false"
@@ -920,29 +932,29 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                   >
                     1
                   </span>
                 </div>
-              </button>
-              <button
-                class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+              </span>
+              <span
+                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
                 title="gitify-app requested changes"
-                type="button"
+                variant="secondary"
               >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
                   data-direction="horizontal"
-                  data-gap="condensed"
+                  data-gap="none"
                   data-justify="start"
                   data-padding="none"
                   data-wrap="nowrap"
                 >
                   <svg
                     aria-hidden="true"
-                    class="octicon octicon-file-diff text-primer-closed"
+                    class="octicon octicon-file-diff text-gitify-icon-closed"
                     display="inline-block"
                     fill="currentColor"
                     focusable="false"
@@ -957,146 +969,142 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                   >
                     1
                   </span>
                 </div>
-              </button>
+              </span>
             </div>
           </div>
         </div>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <button
+            aria-describedby=":rh:-loading-announcement"
+            aria-labelledby=":rg:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-mark-as-done"
+            sx="[object Object]"
+            type="button"
           >
-            <button
-              aria-describedby=":rh:-loading-announcement"
-              aria-labelledby=":rg:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-mark-as-done"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-check"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rg:"
-              popover="auto"
-            >
-              Mark as done
-            </span>
-            <button
-              aria-describedby=":rj:-loading-announcement"
-              aria-labelledby=":ri:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-mark-as-read"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-read"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":ri:"
-              popover="auto"
-            >
-              Mark as read
-            </span>
-            <button
-              aria-describedby=":rl:-loading-announcement"
-              aria-labelledby=":rk:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-unsubscribe-from-thread"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-bell-slash"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-                />
-              </svg>
-            </button>
-            <span
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rk:"
-              popover="auto"
+              class="octicon octicon-check"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Unsubscribe from thread
-            </span>
-          </div>
-        </div>
-      </div>
+              <path
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rg:"
+            popover="auto"
+          >
+            Mark as done
+          </span>
+          <button
+            aria-describedby=":rj:-loading-announcement"
+            aria-labelledby=":ri:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-mark-as-read"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-read"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":ri:"
+            popover="auto"
+          >
+            Mark as read
+          </span>
+          <button
+            aria-describedby=":rl:-loading-announcement"
+            aria-labelledby=":rk:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-unsubscribe-from-thread"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-bell-slash"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rk:"
+            popover="auto"
+          >
+            Unsubscribe from thread
+          </span>
+        </div>
+      </div>
       <div
-        class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover"
+        class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
         id="148827438"
       >
         <div
@@ -1110,7 +1118,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-opened text-primer-muted"
+              class="octicon octicon-issue-opened text-gitify-icon-muted"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1183,7 +1191,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             />
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -1193,7 +1201,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-feed-person text-primer-muted"
+              class="octicon octicon-feed-person text-gitify-icon-muted"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1207,250 +1215,40 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                 d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
               />
             </svg>
-            <span
-              class="text-xs opacity-80"
-            >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="stretch"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
-              >
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                  title="You created the thread."
-                >
-                  Authored
-                </span>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  •
-                </span>
-                <relative-time
-                  class="sc-KXCwU"
-                  datetime="2017-05-20T17:06:34.000Z"
-                >
-                  May 20, 2017
-                </relative-time>
-              </div>
-            </span>
-            <div
-              class="flex"
-            />
-          </div>
-        </div>
-        <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-        >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
-          >
-            <button
-              aria-describedby=":rp:-loading-announcement"
-              aria-labelledby=":ro:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-mark-as-done"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-check"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":ro:"
-              popover="auto"
-            >
-              Mark as done
-            </span>
-            <button
-              aria-describedby=":rr:-loading-announcement"
-              aria-labelledby=":rq:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-mark-as-read"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-read"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rq:"
-              popover="auto"
-            >
-              Mark as read
-            </span>
-            <button
-              aria-describedby=":rt:-loading-announcement"
-              aria-labelledby=":rs:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-unsubscribe-from-thread"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-bell-slash"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rs:"
-              popover="auto"
-            >
-              Unsubscribe from thread
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-rest"
-    >
-      <button
-        aria-describedby=":r7:-loading-announcement"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="account-profile"
-        sx="[object Object]"
-        title="Open account profile"
-        type="button"
-      >
-        <span
-          class="Box-sc-g0xbh4-0 srpGE"
-          data-component="buttonContent"
-          sx="[object Object]"
-        >
-          <span
-            data-component="text"
-          >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
+              data-align="stretch"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
-              <img
-                alt=""
-                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
-                data-component="Avatar"
-                height="16"
-                size="16"
-                src="https://avatars.githubusercontent.com/u/583231?v=4"
-                sx="[object Object]"
-                width="16"
-              />
               <span
                 class="Text-sc-17v1xeu-0 hmAFGJ"
+                title="You created the thread."
               >
-                @
-                octocat
+                Authored
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+              >
+                •
               </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:06:34.000Z"
+              >
+                May 20, 2017
+              </relative-time>
             </div>
-          </span>
-          <span
-            class="Box-sc-g0xbh4-0 mhHOW"
-            data-component="trailingVisual"
-            sx="[object Object]"
-          >
-            <span
-              aria-hidden="true"
-              class="Box-sc-g0xbh4-0 bfvZWv"
-              data-component="ButtonCounter"
-              sx="[object Object]"
-            >
-              2
-            </span>
-            <span
-              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
-            >
-               (
-              2
-              )
-            </span>
-          </span>
-        </span>
-      </button>
-      <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-      >
+            <div
+              class="Box-sc-g0xbh4-0 flex gap-1"
+            />
+          </div>
+        </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -1459,20 +1257,20 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":r9:-loading-announcement"
-            aria-labelledby=":r8:"
+            aria-describedby=":rp:-loading-announcement"
+            aria-labelledby=":ro:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
-            data-testid="account-issues"
+            data-testid="notification-mark-as-done"
             sx="[object Object]"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-opened"
+              class="octicon octicon-check"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1483,10 +1281,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               width="16"
             >
               <path
-                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-              />
-              <path
-                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
               />
             </svg>
           </button>
@@ -1494,26 +1289,26 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r8:"
+            id=":ro:"
             popover="auto"
           >
-            My Issues
+            Mark as done
           </span>
           <button
-            aria-describedby=":rb:-loading-announcement"
-            aria-labelledby=":ra:"
+            aria-describedby=":rr:-loading-announcement"
+            aria-labelledby=":rq:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
-            data-testid="account-pull-requests"
+            data-testid="notification-mark-as-read"
             sx="[object Object]"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-git-pull-request"
+              class="octicon octicon-read"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1524,7 +1319,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               width="16"
             >
               <path
-                d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
@@ -1532,26 +1327,26 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":ra:"
+            id=":rq:"
             popover="auto"
           >
-            My Pull Requests
+            Mark as read
           </span>
           <button
-            aria-describedby=":rd:-loading-announcement"
-            aria-labelledby=":rc:"
+            aria-describedby=":rt:-loading-announcement"
+            aria-labelledby=":rs:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
-            data-testid="account-toggle"
+            data-testid="notification-unsubscribe-from-thread"
             sx="[object Object]"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-chevron-down"
+              class="octicon octicon-bell-slash"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1562,7 +1357,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               width="16"
             >
               <path
-                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -1570,16 +1365,217 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":rc:"
+            id=":rs:"
             popover="auto"
           >
-            Hide account notifications
+            Unsubscribe from thread
           </span>
         </div>
       </div>
     </div>
+  </body>,
+  "container": <div>
+    <div
+      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
+    >
+      <button
+        aria-describedby=":r7:-loading-announcement"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="account-profile"
+        sx="[object Object]"
+        title="Open account profile"
+        type="button"
+      >
+        <span
+          class="Box-sc-g0xbh4-0 srpGE"
+          data-component="buttonContent"
+          sx="[object Object]"
+        >
+          <span
+            data-component="text"
+          >
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <img
+                alt=""
+                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
+                data-component="Avatar"
+                height="16"
+                size="16"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+                sx="[object Object]"
+                width="16"
+              />
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+              >
+                @
+                octocat
+              </span>
+            </div>
+          </span>
+          <span
+            class="Box-sc-g0xbh4-0 mhHOW"
+            data-component="trailingVisual"
+            sx="[object Object]"
+          >
+            <span
+              aria-hidden="true"
+              class="Box-sc-g0xbh4-0 bfvZWv"
+              data-component="ButtonCounter"
+              sx="[object Object]"
+            >
+              2
+            </span>
+            <span
+              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+            >
+               (
+              2
+              )
+            </span>
+          </span>
+        </span>
+      </button>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r9:-loading-announcement"
+          aria-labelledby=":r8:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-issues"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-issue-opened"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r8:"
+          popover="auto"
+        >
+          My Issues
+        </span>
+        <button
+          aria-describedby=":rb:-loading-announcement"
+          aria-labelledby=":ra:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-pull-requests"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-git-pull-request"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":ra:"
+          popover="auto"
+        >
+          My Pull Requests
+        </span>
+        <button
+          aria-describedby=":rd:-loading-announcement"
+          aria-labelledby=":rc:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-toggle"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rc:"
+          popover="auto"
+        >
+          Hide account notifications
+        </span>
+      </div>
+    </div>
     <div
-      class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover"
+      class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
       id="138661096"
     >
       <div
@@ -1593,7 +1589,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-opened text-primer-open"
+            class="octicon octicon-issue-opened text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1666,7 +1662,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           />
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
@@ -1686,57 +1682,53 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             title="View profile: gitify-app"
             width="14"
           />
-          <span
-            class="text-xs opacity-80"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="stretch"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+              title="You're watching the repository."
             >
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-                title="You're watching the repository."
-              >
-                Updated
-              </span>
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                •
-              </span>
-              <relative-time
-                class="sc-KXCwU"
-                datetime="2017-05-20T17:51:57.000Z"
-              >
-                May 20, 2017
-              </relative-time>
-            </div>
-          </span>
+              Updated
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+            >
+              •
+            </span>
+            <relative-time
+              class="sc-KXCwU"
+              datetime="2017-05-20T17:51:57.000Z"
+            >
+              May 20, 2017
+            </relative-time>
+          </div>
           <div
-            class="flex"
+            class="Box-sc-g0xbh4-0 flex gap-1"
           >
-            <button
-              class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+            <span
+              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
               title="octocat approved these changes"
-              type="button"
+              variant="secondary"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                 data-align="center"
                 data-direction="horizontal"
-                data-gap="condensed"
+                data-gap="none"
                 data-justify="start"
                 data-padding="none"
                 data-wrap="nowrap"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-check text-primer-open"
+                  class="octicon octicon-check text-gitify-icon-open"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -1751,29 +1743,29 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                   />
                 </svg>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                 >
                   1
                 </span>
               </div>
-            </button>
-            <button
-              class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+            </span>
+            <span
+              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
               title="gitify-app requested changes"
-              type="button"
+              variant="secondary"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                 data-align="center"
                 data-direction="horizontal"
-                data-gap="condensed"
+                data-gap="none"
                 data-justify="start"
                 data-padding="none"
                 data-wrap="nowrap"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-file-diff text-primer-closed"
+                  class="octicon octicon-file-diff text-gitify-icon-closed"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -1788,146 +1780,142 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                   />
                 </svg>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                 >
                   1
                 </span>
               </div>
-            </button>
+            </span>
           </div>
         </div>
       </div>
       <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="none"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
-        >
-          <button
-            aria-describedby=":rh:-loading-announcement"
-            aria-labelledby=":rg:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-mark-as-done"
-            sx="[object Object]"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-check"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-              />
-            </svg>
-          </button>
-          <span
+        <button
+          aria-describedby=":rh:-loading-announcement"
+          aria-labelledby=":rg:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-mark-as-done"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":rg:"
-            popover="auto"
-          >
-            Mark as done
-          </span>
-          <button
-            aria-describedby=":rj:-loading-announcement"
-            aria-labelledby=":ri:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-mark-as-read"
-            sx="[object Object]"
-            type="button"
+            class="octicon octicon-check"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-read"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-              />
-            </svg>
-          </button>
-          <span
+            <path
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rg:"
+          popover="auto"
+        >
+          Mark as done
+        </span>
+        <button
+          aria-describedby=":rj:-loading-announcement"
+          aria-labelledby=":ri:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-mark-as-read"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":ri:"
-            popover="auto"
-          >
-            Mark as read
-          </span>
-          <button
-            aria-describedby=":rl:-loading-announcement"
-            aria-labelledby=":rk:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-unsubscribe-from-thread"
-            sx="[object Object]"
-            type="button"
+            class="octicon octicon-read"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-bell-slash"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-              />
-            </svg>
-          </button>
-          <span
+            <path
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":ri:"
+          popover="auto"
+        >
+          Mark as read
+        </span>
+        <button
+          aria-describedby=":rl:-loading-announcement"
+          aria-labelledby=":rk:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-unsubscribe-from-thread"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":rk:"
-            popover="auto"
+            class="octicon octicon-bell-slash"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            Unsubscribe from thread
-          </span>
-        </div>
+            <path
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rk:"
+          popover="auto"
+        >
+          Unsubscribe from thread
+        </span>
       </div>
     </div>
     <div
-      class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover"
+      class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
       id="148827438"
     >
       <div
@@ -1941,7 +1929,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-opened text-primer-muted"
+            class="octicon octicon-issue-opened text-gitify-icon-muted"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2014,7 +2002,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           />
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
@@ -2024,7 +2012,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-feed-person text-primer-muted"
+            class="octicon octicon-feed-person text-gitify-icon-muted"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -2038,169 +2026,161 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
             />
           </svg>
-          <span
-            class="text-xs opacity-80"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="stretch"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+              title="You created the thread."
             >
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-                title="You created the thread."
-              >
-                Authored
-              </span>
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                •
-              </span>
-              <relative-time
-                class="sc-KXCwU"
-                datetime="2017-05-20T17:06:34.000Z"
-              >
-                May 20, 2017
-              </relative-time>
-            </div>
-          </span>
+              Authored
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+            >
+              •
+            </span>
+            <relative-time
+              class="sc-KXCwU"
+              datetime="2017-05-20T17:06:34.000Z"
+            >
+              May 20, 2017
+            </relative-time>
+          </div>
           <div
-            class="flex"
+            class="Box-sc-g0xbh4-0 flex gap-1"
           />
         </div>
       </div>
       <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="none"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
+        <button
+          aria-describedby=":rp:-loading-announcement"
+          aria-labelledby=":ro:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-mark-as-done"
+          sx="[object Object]"
+          type="button"
         >
-          <button
-            aria-describedby=":rp:-loading-announcement"
-            aria-labelledby=":ro:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-mark-as-done"
-            sx="[object Object]"
-            type="button"
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-check"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-check"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-              />
-            </svg>
-          </button>
-          <span
-            aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":ro:"
-            popover="auto"
-          >
-            Mark as done
-          </span>
-          <button
-            aria-describedby=":rr:-loading-announcement"
-            aria-labelledby=":rq:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-mark-as-read"
-            sx="[object Object]"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-read"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-              />
-            </svg>
-          </button>
-          <span
+            <path
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":ro:"
+          popover="auto"
+        >
+          Mark as done
+        </span>
+        <button
+          aria-describedby=":rr:-loading-announcement"
+          aria-labelledby=":rq:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-mark-as-read"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":rq:"
-            popover="auto"
-          >
-            Mark as read
-          </span>
-          <button
-            aria-describedby=":rt:-loading-announcement"
-            aria-labelledby=":rs:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-unsubscribe-from-thread"
-            sx="[object Object]"
-            type="button"
+            class="octicon octicon-read"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-bell-slash"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-              />
-            </svg>
-          </button>
-          <span
+            <path
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rq:"
+          popover="auto"
+        >
+          Mark as read
+        </span>
+        <button
+          aria-describedby=":rt:-loading-announcement"
+          aria-labelledby=":rs:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-unsubscribe-from-thread"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":rs:"
-            popover="auto"
+            class="octicon octicon-bell-slash"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            Unsubscribe from thread
-          </span>
-        </div>
+            <path
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rs:"
+          popover="auto"
+        >
+          Unsubscribe from thread
+        </span>
       </div>
     </div>
   </div>,
@@ -2264,7 +2244,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-rest"
+        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
       >
         <button
           aria-describedby=":r0:-loading-announcement"
@@ -2335,264 +2315,52 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </button>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <button
+            aria-describedby=":r2:-loading-announcement"
+            aria-labelledby=":r1:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="account-issues"
+            sx="[object Object]"
+            type="button"
           >
-            <button
-              aria-describedby=":r2:-loading-announcement"
-              aria-labelledby=":r1:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-issues"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-issue-opened"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                />
-                <path
-                  d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r1:"
-              popover="auto"
-            >
-              My Issues
-            </span>
-            <button
-              aria-describedby=":r4:-loading-announcement"
-              aria-labelledby=":r3:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-pull-requests"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-git-pull-request"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r3:"
-              popover="auto"
-            >
-              My Pull Requests
-            </span>
-            <button
-              aria-describedby=":r6:-loading-announcement"
-              aria-labelledby=":r5:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-toggle"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-chevron-down"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r5:"
-              popover="auto"
+              class="octicon octicon-issue-opened"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Hide account notifications
-            </span>
-          </div>
-        </div>
-      </div>
-      <div>
-        Repository Notifications
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-rest"
-    >
-      <button
-        aria-describedby=":r0:-loading-announcement"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="account-profile"
-        sx="[object Object]"
-        title="Open account profile"
-        type="button"
-      >
-        <span
-          class="Box-sc-g0xbh4-0 srpGE"
-          data-component="buttonContent"
-          sx="[object Object]"
-        >
+              <path
+                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+              />
+              <path
+                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+              />
+            </svg>
+          </button>
           <span
-            data-component="text"
-          >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
-            >
-              <img
-                alt=""
-                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
-                data-component="Avatar"
-                height="16"
-                size="16"
-                src="https://avatars.githubusercontent.com/u/583231?v=4"
-                sx="[object Object]"
-                width="16"
-              />
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                @
-                octocat
-              </span>
-            </div>
-          </span>
-          <span
-            class="Box-sc-g0xbh4-0 mhHOW"
-            data-component="trailingVisual"
-            sx="[object Object]"
-          >
-            <span
-              aria-hidden="true"
-              class="Box-sc-g0xbh4-0 bfvZWv"
-              data-component="ButtonCounter"
-              sx="[object Object]"
-            >
-              2
-            </span>
-            <span
-              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
-            >
-               (
-              2
-              )
-            </span>
-          </span>
-        </span>
-      </button>
-      <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-      >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="none"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
-        >
-          <button
-            aria-describedby=":r2:-loading-announcement"
-            aria-labelledby=":r1:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="account-issues"
-            sx="[object Object]"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-issue-opened"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-              />
-              <path
-                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-              />
-            </svg>
-          </button>
-          <span
-            aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":r1:"
-            popover="auto"
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r1:"
+            popover="auto"
           >
             My Issues
           </span>
@@ -2674,6 +2442,210 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </div>
       </div>
+      <div>
+        Repository Notifications
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
+    >
+      <button
+        aria-describedby=":r0:-loading-announcement"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="account-profile"
+        sx="[object Object]"
+        title="Open account profile"
+        type="button"
+      >
+        <span
+          class="Box-sc-g0xbh4-0 srpGE"
+          data-component="buttonContent"
+          sx="[object Object]"
+        >
+          <span
+            data-component="text"
+          >
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <img
+                alt=""
+                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
+                data-component="Avatar"
+                height="16"
+                size="16"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+                sx="[object Object]"
+                width="16"
+              />
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+              >
+                @
+                octocat
+              </span>
+            </div>
+          </span>
+          <span
+            class="Box-sc-g0xbh4-0 mhHOW"
+            data-component="trailingVisual"
+            sx="[object Object]"
+          >
+            <span
+              aria-hidden="true"
+              class="Box-sc-g0xbh4-0 bfvZWv"
+              data-component="ButtonCounter"
+              sx="[object Object]"
+            >
+              2
+            </span>
+            <span
+              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+            >
+               (
+              2
+              )
+            </span>
+          </span>
+        </span>
+      </button>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r2:-loading-announcement"
+          aria-labelledby=":r1:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-issues"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-issue-opened"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r1:"
+          popover="auto"
+        >
+          My Issues
+        </span>
+        <button
+          aria-describedby=":r4:-loading-announcement"
+          aria-labelledby=":r3:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-pull-requests"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-git-pull-request"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r3:"
+          popover="auto"
+        >
+          My Pull Requests
+        </span>
+        <button
+          aria-describedby=":r6:-loading-announcement"
+          aria-labelledby=":r5:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-toggle"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r5:"
+          popover="auto"
+        >
+          Hide account notifications
+        </span>
+      </div>
     </div>
     <div>
       Repository Notifications
@@ -2739,7 +2711,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-rest"
+        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
       >
         <button
           aria-describedby=":ru:-loading-announcement"
@@ -2810,252 +2782,13 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </button>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-        >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
-          >
-            <button
-              aria-describedby=":r10:-loading-announcement"
-              aria-labelledby=":rv:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-issues"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-issue-opened"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                />
-                <path
-                  d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rv:"
-              popover="auto"
-            >
-              My Issues
-            </span>
-            <button
-              aria-describedby=":r12:-loading-announcement"
-              aria-labelledby=":r11:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-pull-requests"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-git-pull-request"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r11:"
-              popover="auto"
-            >
-              My Pull Requests
-            </span>
-            <button
-              aria-describedby=":r14:-loading-announcement"
-              aria-labelledby=":r13:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-toggle"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-chevron-left"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r13:"
-              popover="auto"
-            >
-              No notifications for account
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
-      >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="vertical"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
-        >
-          <div
-            class="mt-2 mb-5 text-5xl"
-          >
-            <span>
-              <img
-                alt="🎊"
-                class="emoji"
-                draggable="false"
-                src="images/twemoji/1f38a.svg"
-              />
-            </span>
-          </div>
-          <div
-            class="mb-2 text-xl font-semibold"
-          >
-            No new notifications
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-rest"
-    >
-      <button
-        aria-describedby=":ru:-loading-announcement"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="account-profile"
-        sx="[object Object]"
-        title="Open account profile"
-        type="button"
-      >
-        <span
-          class="Box-sc-g0xbh4-0 srpGE"
-          data-component="buttonContent"
-          sx="[object Object]"
-        >
-          <span
-            data-component="text"
-          >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
-            >
-              <img
-                alt=""
-                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
-                data-component="Avatar"
-                height="16"
-                size="16"
-                src="https://avatars.githubusercontent.com/u/583231?v=4"
-                sx="[object Object]"
-                width="16"
-              />
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                @
-                octocat
-              </span>
-            </div>
-          </span>
-          <span
-            class="Box-sc-g0xbh4-0 mhHOW"
-            data-component="trailingVisual"
-            sx="[object Object]"
-          >
-            <span
-              aria-hidden="true"
-              class="Box-sc-g0xbh4-0 bfvZWv"
-              data-component="ButtonCounter"
-              sx="[object Object]"
-            >
-              0
-            </span>
-            <span
-              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
-            >
-               (
-              0
-              )
-            </span>
-          </span>
-        </span>
-      </button>
-      <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-      >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="none"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <button
             aria-describedby=":r10:-loading-announcement"
@@ -3176,307 +2909,361 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </div>
       </div>
-    </div>
-    <div
-      class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
-    >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
         data-direction="vertical"
-        data-justify="start"
-        data-padding="none"
+        data-justify="center"
+        data-padding="spacious"
         data-wrap="nowrap"
       >
         <div
-          class="mt-2 mb-5 text-5xl"
-        >
-          <span>
-            <img
-              alt="🎊"
-              class="emoji"
-              draggable="false"
-              src="images/twemoji/1f38a.svg"
-            />
-          </span>
-        </div>
-        <div
-          class="mb-2 text-xl font-semibold"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="condensed"
+          data-justify="center"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          No new notifications
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="vertical"
+            data-gap="spacious"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <div
+              class="Box-sc-g0xbh4-0 text-5xl"
+            >
+              <img
+                alt="🎊"
+                class="emoji"
+                draggable="false"
+                src="images/twemoji/1f38a.svg"
+              />
+            </div>
+            <div
+              class="Box-sc-g0xbh4-0 text-xl font-semibold"
+            >
+              No new  notifications
+            </div>
+          </div>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`renderer/components/notifications/AccountNotifications.tsx should toggle account notifications visibility 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-rest"
+  </body>,
+  "container": <div>
+    <div
+      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
+    >
+      <button
+        aria-describedby=":ru:-loading-announcement"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="account-profile"
+        sx="[object Object]"
+        title="Open account profile"
+        type="button"
       >
-        <button
-          aria-describedby=":r21:-loading-announcement"
-          class="types__StyledButton-sc-ws60qy-0 kQRupk"
-          data-loading="false"
-          data-no-visuals="true"
-          data-testid="account-profile"
+        <span
+          class="Box-sc-g0xbh4-0 srpGE"
+          data-component="buttonContent"
           sx="[object Object]"
-          title="Open account profile"
-          type="button"
         >
           <span
-            class="Box-sc-g0xbh4-0 srpGE"
-            data-component="buttonContent"
-            sx="[object Object]"
+            data-component="text"
           >
-            <span
-              data-component="text"
-            >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
-              >
-                <img
-                  alt=""
-                  class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
-                  data-component="Avatar"
-                  height="16"
-                  size="16"
-                  src="https://avatars.githubusercontent.com/u/583231?v=4"
-                  sx="[object Object]"
-                  width="16"
-                />
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  @
-                  octocat
-                </span>
-              </div>
-            </span>
-            <span
-              class="Box-sc-g0xbh4-0 mhHOW"
-              data-component="trailingVisual"
-              sx="[object Object]"
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
             >
-              <span
-                aria-hidden="true"
-                class="Box-sc-g0xbh4-0 bfvZWv"
-                data-component="ButtonCounter"
+              <img
+                alt=""
+                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
+                data-component="Avatar"
+                height="16"
+                size="16"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
                 sx="[object Object]"
-              >
-                2
-              </span>
+                width="16"
+              />
               <span
-                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+                class="Text-sc-17v1xeu-0 hmAFGJ"
               >
-                 (
-                2
-                )
+                @
+                octocat
               </span>
-            </span>
+            </div>
           </span>
-        </button>
-        <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-        >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <span
+            class="Box-sc-g0xbh4-0 mhHOW"
+            data-component="trailingVisual"
+            sx="[object Object]"
           >
-            <button
-              aria-describedby=":r23:-loading-announcement"
-              aria-labelledby=":r22:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-issues"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-issue-opened"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                />
-                <path
-                  d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-                />
-              </svg>
-            </button>
             <span
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r22:"
-              popover="auto"
-            >
-              My Issues
-            </span>
-            <button
-              aria-describedby=":r25:-loading-announcement"
-              aria-labelledby=":r24:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-pull-requests"
+              class="Box-sc-g0xbh4-0 bfvZWv"
+              data-component="ButtonCounter"
               sx="[object Object]"
-              type="button"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-git-pull-request"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r24:"
-              popover="auto"
-            >
-              My Pull Requests
+              0
             </span>
-            <button
-              aria-describedby=":r27:-loading-announcement"
-              aria-labelledby=":r26:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-toggle"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-chevron-right"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"
-                />
-              </svg>
-            </button>
             <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r26:"
-              popover="auto"
+              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
             >
-              Show account notifications
+               (
+              0
+              )
             </span>
+          </span>
+        </span>
+      </button>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r10:-loading-announcement"
+          aria-labelledby=":rv:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-issues"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-issue-opened"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rv:"
+          popover="auto"
+        >
+          My Issues
+        </span>
+        <button
+          aria-describedby=":r12:-loading-announcement"
+          aria-labelledby=":r11:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-pull-requests"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-git-pull-request"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r11:"
+          popover="auto"
+        >
+          My Pull Requests
+        </span>
+        <button
+          aria-describedby=":r14:-loading-announcement"
+          aria-labelledby=":r13:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-toggle"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-left"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r13:"
+          popover="auto"
+        >
+          No notifications for account
+        </span>
+      </div>
+    </div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="center"
+      data-direction="vertical"
+      data-justify="center"
+      data-padding="spacious"
+      data-wrap="nowrap"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="center"
+        data-direction="vertical"
+        data-gap="condensed"
+        data-justify="center"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="vertical"
+          data-gap="spacious"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <div
+            class="Box-sc-g0xbh4-0 text-5xl"
+          >
+            <img
+              alt="🎊"
+              class="emoji"
+              draggable="false"
+              src="images/twemoji/1f38a.svg"
+            />
+          </div>
+          <div
+            class="Box-sc-g0xbh4-0 text-xl font-semibold"
+          >
+            No new  notifications
           </div>
         </div>
       </div>
     </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`renderer/components/notifications/AccountNotifications.tsx should toggle account notifications visibility 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-rest"
+        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
       >
         <button
-          aria-describedby=":r28:-loading-announcement"
+          aria-describedby=":r21:-loading-announcement"
           class="types__StyledButton-sc-ws60qy-0 kQRupk"
           data-loading="false"
           data-no-visuals="true"
@@ -3544,219 +3331,208 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
           </span>
         </button>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <button
+            aria-describedby=":r23:-loading-announcement"
+            aria-labelledby=":r22:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="account-issues"
+            sx="[object Object]"
+            type="button"
           >
-            <button
-              aria-describedby=":r2a:-loading-announcement"
-              aria-labelledby=":r29:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-issues"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-issue-opened"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                />
-                <path
-                  d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r29:"
-              popover="auto"
-            >
-              My Issues
-            </span>
-            <button
-              aria-describedby=":r2c:-loading-announcement"
-              aria-labelledby=":r2b:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-pull-requests"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-git-pull-request"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-                />
-              </svg>
-            </button>
-            <span
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r2b:"
-              popover="auto"
-            >
-              My Pull Requests
-            </span>
-            <button
-              aria-describedby=":r2e:-loading-announcement"
-              aria-labelledby=":r2d:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="account-toggle"
-              sx="[object Object]"
-              type="button"
+              class="octicon octicon-issue-opened"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-chevron-down"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
+              <path
+                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+              />
+              <path
+                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r22:"
+            popover="auto"
+          >
+            My Issues
+          </span>
+          <button
+            aria-describedby=":r25:-loading-announcement"
+            aria-labelledby=":r24:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="account-pull-requests"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r2d:"
-              popover="auto"
+              class="octicon octicon-git-pull-request"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Hide account notifications
-            </span>
-          </div>
-        </div>
-      </div>
-      <div>
-        Repository Notifications
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white bg-gitify-accounts-rest"
-    >
-      <button
-        aria-describedby=":r28:-loading-announcement"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="account-profile"
-        sx="[object Object]"
-        title="Open account profile"
-        type="button"
-      >
-        <span
-          class="Box-sc-g0xbh4-0 srpGE"
-          data-component="buttonContent"
-          sx="[object Object]"
-        >
+              <path
+                d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+              />
+            </svg>
+          </button>
           <span
-            data-component="text"
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r24:"
+            popover="auto"
           >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
-            >
-              <img
-                alt=""
-                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
-                data-component="Avatar"
-                height="16"
-                size="16"
-                src="https://avatars.githubusercontent.com/u/583231?v=4"
-                sx="[object Object]"
-                width="16"
+            My Pull Requests
+          </span>
+          <button
+            aria-describedby=":r27:-loading-announcement"
+            aria-labelledby=":r26:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="account-toggle"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-chevron-right"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"
               />
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                @
-                octocat
-              </span>
-            </div>
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r26:"
+            popover="auto"
+          >
+            Show account notifications
           </span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
+      >
+        <button
+          aria-describedby=":r28:-loading-announcement"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-loading="false"
+          data-no-visuals="true"
+          data-testid="account-profile"
+          sx="[object Object]"
+          title="Open account profile"
+          type="button"
+        >
           <span
-            class="Box-sc-g0xbh4-0 mhHOW"
-            data-component="trailingVisual"
+            class="Box-sc-g0xbh4-0 srpGE"
+            data-component="buttonContent"
             sx="[object Object]"
           >
             <span
-              aria-hidden="true"
-              class="Box-sc-g0xbh4-0 bfvZWv"
-              data-component="ButtonCounter"
-              sx="[object Object]"
+              data-component="text"
             >
-              2
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+              >
+                <img
+                  alt=""
+                  class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
+                  data-component="Avatar"
+                  height="16"
+                  size="16"
+                  src="https://avatars.githubusercontent.com/u/583231?v=4"
+                  sx="[object Object]"
+                  width="16"
+                />
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  @
+                  octocat
+                </span>
+              </div>
             </span>
             <span
-              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+              class="Box-sc-g0xbh4-0 mhHOW"
+              data-component="trailingVisual"
+              sx="[object Object]"
             >
-               (
-              2
-              )
+              <span
+                aria-hidden="true"
+                class="Box-sc-g0xbh4-0 bfvZWv"
+                data-component="ButtonCounter"
+                sx="[object Object]"
+              >
+                2
+              </span>
+              <span
+                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+              >
+                 (
+                2
+                )
+              </span>
             </span>
           </span>
-        </span>
-      </button>
-      <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-      >
+        </button>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -3883,6 +3659,210 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
           </span>
         </div>
       </div>
+      <div>
+        Repository Notifications
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
+    >
+      <button
+        aria-describedby=":r28:-loading-announcement"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="account-profile"
+        sx="[object Object]"
+        title="Open account profile"
+        type="button"
+      >
+        <span
+          class="Box-sc-g0xbh4-0 srpGE"
+          data-component="buttonContent"
+          sx="[object Object]"
+        >
+          <span
+            data-component="text"
+          >
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <img
+                alt=""
+                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
+                data-component="Avatar"
+                height="16"
+                size="16"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+                sx="[object Object]"
+                width="16"
+              />
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+              >
+                @
+                octocat
+              </span>
+            </div>
+          </span>
+          <span
+            class="Box-sc-g0xbh4-0 mhHOW"
+            data-component="trailingVisual"
+            sx="[object Object]"
+          >
+            <span
+              aria-hidden="true"
+              class="Box-sc-g0xbh4-0 bfvZWv"
+              data-component="ButtonCounter"
+              sx="[object Object]"
+            >
+              2
+            </span>
+            <span
+              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+            >
+               (
+              2
+              )
+            </span>
+          </span>
+        </span>
+      </button>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r2a:-loading-announcement"
+          aria-labelledby=":r29:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-issues"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-issue-opened"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r29:"
+          popover="auto"
+        >
+          My Issues
+        </span>
+        <button
+          aria-describedby=":r2c:-loading-announcement"
+          aria-labelledby=":r2b:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-pull-requests"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-git-pull-request"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r2b:"
+          popover="auto"
+        >
+          My Pull Requests
+        </span>
+        <button
+          aria-describedby=":r2e:-loading-announcement"
+          aria-labelledby=":r2d:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="account-toggle"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r2d:"
+          popover="auto"
+        >
+          Hide account notifications
+        </span>
+      </div>
     </div>
     <div>
       Repository Notifications
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
index fa0890287..3fa98f9c9 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
         data-align="center"
         data-direction="horizontal"
         data-gap="condensed"
@@ -26,57 +26,53 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
           title="View profile: gitify-app"
           width="14"
         />
-        <span
-          class="text-xs opacity-80"
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="stretch"
-            data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+            title="You're watching the repository."
           >
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
-              title="You're watching the repository."
-            >
-              Updated
-            </span>
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
-            >
-              •
-            </span>
-            <relative-time
-              class="sc-KXCwU"
-              datetime="2017-05-20T17:51:57.000Z"
-            >
-              May 20, 2017
-            </relative-time>
-          </div>
-        </span>
+            Updated
+          </span>
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+          >
+            •
+          </span>
+          <relative-time
+            class="sc-KXCwU"
+            datetime="2017-05-20T17:51:57.000Z"
+          >
+            May 20, 2017
+          </relative-time>
+        </div>
         <div
-          class="flex"
+          class="Box-sc-g0xbh4-0 flex gap-1"
         >
-          <button
-            class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+          <span
+            class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
             title="octocat approved these changes"
-            type="button"
+            variant="secondary"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-check text-primer-open"
+                class="octicon octicon-check text-gitify-icon-open"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -91,29 +87,29 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
                 />
               </svg>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
               >
                 1
               </span>
             </div>
-          </button>
-          <button
-            class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+          </span>
+          <span
+            class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
             title="gitify-app requested changes"
-            type="button"
+            variant="secondary"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-file-diff text-primer-closed"
+                class="octicon octicon-file-diff text-gitify-icon-closed"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -128,19 +124,19 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
                 />
               </svg>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
               >
                 1
               </span>
             </div>
-          </button>
+          </span>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
       data-align="center"
       data-direction="horizontal"
       data-gap="condensed"
@@ -160,57 +156,53 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
         title="View profile: gitify-app"
         width="14"
       />
-      <span
-        class="text-xs opacity-80"
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
+        <span
+          class="Text-sc-17v1xeu-0 hmAFGJ"
+          title="You're watching the repository."
         >
-          <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
-            title="You're watching the repository."
-          >
-            Updated
-          </span>
-          <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
-          >
-            •
-          </span>
-          <relative-time
-            class="sc-KXCwU"
-            datetime="2017-05-20T17:51:57.000Z"
-          >
-            May 20, 2017
-          </relative-time>
-        </div>
-      </span>
+          Updated
+        </span>
+        <span
+          class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+        >
+          •
+        </span>
+        <relative-time
+          class="sc-KXCwU"
+          datetime="2017-05-20T17:51:57.000Z"
+        >
+          May 20, 2017
+        </relative-time>
+      </div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -225,29 +217,29 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -262,12 +254,12 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </div>,
@@ -331,7 +323,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
         data-align="center"
         data-direction="horizontal"
         data-gap="condensed"
@@ -351,57 +343,53 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
           title="View profile: gitify-app"
           width="14"
         />
-        <span
-          class="text-xs opacity-80"
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="stretch"
-            data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+            title="You're watching the repository."
           >
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
-              title="You're watching the repository."
-            >
-              Updated
-            </span>
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
-            >
-              •
-            </span>
-            <relative-time
-              class="sc-KXCwU"
-              datetime="2017-05-20T17:51:57.000Z"
-            >
-              May 20, 2017
-            </relative-time>
-          </div>
-        </span>
+            Updated
+          </span>
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+          >
+            •
+          </span>
+          <relative-time
+            class="sc-KXCwU"
+            datetime="2017-05-20T17:51:57.000Z"
+          >
+            May 20, 2017
+          </relative-time>
+        </div>
         <div
-          class="flex"
+          class="Box-sc-g0xbh4-0 flex gap-1"
         >
-          <button
-            class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+          <span
+            class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
             title="octocat approved these changes"
-            type="button"
+            variant="secondary"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-check text-primer-open"
+                class="octicon octicon-check text-gitify-icon-open"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -416,29 +404,29 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
                 />
               </svg>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
               >
                 1
               </span>
             </div>
-          </button>
-          <button
-            class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+          </span>
+          <span
+            class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
             title="gitify-app requested changes"
-            type="button"
+            variant="secondary"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-file-diff text-primer-closed"
+                class="octicon octicon-file-diff text-gitify-icon-closed"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -453,19 +441,19 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
                 />
               </svg>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
               >
                 1
               </span>
             </div>
-          </button>
+          </span>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
       data-align="center"
       data-direction="horizontal"
       data-gap="condensed"
@@ -485,57 +473,53 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
         title="View profile: gitify-app"
         width="14"
       />
-      <span
-        class="text-xs opacity-80"
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
+        <span
+          class="Text-sc-17v1xeu-0 hmAFGJ"
+          title="You're watching the repository."
         >
-          <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
-            title="You're watching the repository."
-          >
-            Updated
-          </span>
-          <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
-          >
-            •
-          </span>
-          <relative-time
-            class="sc-KXCwU"
-            datetime="2017-05-20T17:51:57.000Z"
-          >
-            May 20, 2017
-          </relative-time>
-        </div>
-      </span>
+          Updated
+        </span>
+        <span
+          class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+        >
+          •
+        </span>
+        <relative-time
+          class="sc-KXCwU"
+          datetime="2017-05-20T17:51:57.000Z"
+        >
+          May 20, 2017
+        </relative-time>
+      </div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -550,29 +534,29 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -587,12 +571,12 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </div>,
@@ -656,7 +640,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
         data-align="center"
         data-direction="horizontal"
         data-gap="condensed"
@@ -680,57 +664,53 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
             d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
           />
         </svg>
-        <span
-          class="text-xs opacity-80"
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="stretch"
-            data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+            title="You're watching the repository."
           >
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
-              title="You're watching the repository."
-            >
-              Updated
-            </span>
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
-            >
-              •
-            </span>
-            <relative-time
-              class="sc-KXCwU"
-              datetime="2017-05-20T17:51:57.000Z"
-            >
-              May 20, 2017
-            </relative-time>
-          </div>
-        </span>
+            Updated
+          </span>
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+          >
+            •
+          </span>
+          <relative-time
+            class="sc-KXCwU"
+            datetime="2017-05-20T17:51:57.000Z"
+          >
+            May 20, 2017
+          </relative-time>
+        </div>
         <div
-          class="flex"
+          class="Box-sc-g0xbh4-0 flex gap-1"
         >
-          <button
-            class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+          <span
+            class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
             title="octocat approved these changes"
-            type="button"
+            variant="secondary"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-check text-primer-open"
+                class="octicon octicon-check text-gitify-icon-open"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -745,29 +725,29 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
                 />
               </svg>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
               >
                 1
               </span>
             </div>
-          </button>
-          <button
-            class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+          </span>
+          <span
+            class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
             title="gitify-app requested changes"
-            type="button"
+            variant="secondary"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-file-diff text-primer-closed"
+                class="octicon octicon-file-diff text-gitify-icon-closed"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -782,19 +762,19 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
                 />
               </svg>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
               >
                 1
               </span>
             </div>
-          </button>
+          </span>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
       data-align="center"
       data-direction="horizontal"
       data-gap="condensed"
@@ -818,57 +798,53 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
           d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
         />
       </svg>
-      <span
-        class="text-xs opacity-80"
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
+        <span
+          class="Text-sc-17v1xeu-0 hmAFGJ"
+          title="You're watching the repository."
         >
-          <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
-            title="You're watching the repository."
-          >
-            Updated
-          </span>
-          <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
-          >
-            •
-          </span>
-          <relative-time
-            class="sc-KXCwU"
-            datetime="2017-05-20T17:51:57.000Z"
-          >
-            May 20, 2017
-          </relative-time>
-        </div>
-      </span>
+          Updated
+        </span>
+        <span
+          class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+        >
+          •
+        </span>
+        <relative-time
+          class="sc-KXCwU"
+          datetime="2017-05-20T17:51:57.000Z"
+        >
+          May 20, 2017
+        </relative-time>
+      </div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -883,29 +859,29 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -920,12 +896,12 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </div>,
@@ -989,7 +965,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
         data-align="center"
         data-direction="horizontal"
         data-gap="condensed"
@@ -1009,57 +985,53 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
           title="View profile: gitify-app"
           width="14"
         />
-        <span
-          class="text-xs opacity-80"
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="stretch"
-            data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+            title="You're watching the repository."
           >
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
-              title="You're watching the repository."
-            >
-              Updated
-            </span>
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
-            >
-              •
-            </span>
-            <relative-time
-              class="sc-KXCwU"
-              datetime="2017-05-20T17:51:57.000Z"
-            >
-              May 20, 2017
-            </relative-time>
-          </div>
-        </span>
+            Updated
+          </span>
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+          >
+            •
+          </span>
+          <relative-time
+            class="sc-KXCwU"
+            datetime="2017-05-20T17:51:57.000Z"
+          >
+            May 20, 2017
+          </relative-time>
+        </div>
         <div
-          class="flex"
+          class="Box-sc-g0xbh4-0 flex gap-1"
         >
-          <button
-            class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+          <span
+            class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
             title="octocat approved these changes"
-            type="button"
+            variant="secondary"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-check text-primer-open"
+                class="octicon octicon-check text-gitify-icon-open"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -1074,29 +1046,29 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
                 />
               </svg>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
               >
                 1
               </span>
             </div>
-          </button>
-          <button
-            class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+          </span>
+          <span
+            class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
             title="gitify-app requested changes"
-            type="button"
+            variant="secondary"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-file-diff text-primer-closed"
+                class="octicon octicon-file-diff text-gitify-icon-closed"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -1111,19 +1083,19 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
                 />
               </svg>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
               >
                 1
               </span>
             </div>
-          </button>
+          </span>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
       data-align="center"
       data-direction="horizontal"
       data-gap="condensed"
@@ -1143,57 +1115,53 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
         title="View profile: gitify-app"
         width="14"
       />
-      <span
-        class="text-xs opacity-80"
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
+        <span
+          class="Text-sc-17v1xeu-0 hmAFGJ"
+          title="You're watching the repository."
         >
-          <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
-            title="You're watching the repository."
-          >
-            Updated
-          </span>
-          <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
-          >
-            •
-          </span>
-          <relative-time
-            class="sc-KXCwU"
-            datetime="2017-05-20T17:51:57.000Z"
-          >
-            May 20, 2017
-          </relative-time>
-        </div>
-      </span>
+          Updated
+        </span>
+        <span
+          class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+        >
+          •
+        </span>
+        <relative-time
+          class="sc-KXCwU"
+          datetime="2017-05-20T17:51:57.000Z"
+        >
+          May 20, 2017
+        </relative-time>
+      </div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1208,29 +1176,29 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1245,12 +1213,12 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </div>,
@@ -1314,7 +1282,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
         data-align="center"
         data-direction="horizontal"
         data-gap="condensed"
@@ -1334,57 +1302,53 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
           title="View profile: gitify-app"
           width="14"
         />
-        <span
-          class="text-xs opacity-80"
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="stretch"
-            data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ"
+            title="You're watching the repository."
           >
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
-              title="You're watching the repository."
-            >
-              Updated
-            </span>
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
-            >
-              •
-            </span>
-            <relative-time
-              class="sc-KXCwU"
-              datetime="2017-05-20T17:51:57.000Z"
-            >
-              May 20, 2017
-            </relative-time>
-          </div>
-        </span>
+            Updated
+          </span>
+          <span
+            class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+          >
+            •
+          </span>
+          <relative-time
+            class="sc-KXCwU"
+            datetime="2017-05-20T17:51:57.000Z"
+          >
+            May 20, 2017
+          </relative-time>
+        </div>
         <div
-          class="flex"
+          class="Box-sc-g0xbh4-0 flex gap-1"
         >
-          <button
-            class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+          <span
+            class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
             title="octocat approved these changes"
-            type="button"
+            variant="secondary"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-check text-primer-open"
+                class="octicon octicon-check text-gitify-icon-open"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -1399,29 +1363,29 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
                 />
               </svg>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
               >
                 1
               </span>
             </div>
-          </button>
-          <button
-            class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+          </span>
+          <span
+            class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
             title="gitify-app requested changes"
-            type="button"
+            variant="secondary"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
               data-direction="horizontal"
-              data-gap="condensed"
+              data-gap="none"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-file-diff text-primer-closed"
+                class="octicon octicon-file-diff text-gitify-icon-closed"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -1436,19 +1400,19 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
                 />
               </svg>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
               >
                 1
               </span>
             </div>
-          </button>
+          </span>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
       data-align="center"
       data-direction="horizontal"
       data-gap="condensed"
@@ -1468,57 +1432,53 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
         title="View profile: gitify-app"
         width="14"
       />
-      <span
-        class="text-xs opacity-80"
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
+        <span
+          class="Text-sc-17v1xeu-0 hmAFGJ"
+          title="You're watching the repository."
         >
-          <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
-            title="You're watching the repository."
-          >
-            Updated
-          </span>
-          <span
-            class="Text-sc-17v1xeu-0 hmAFGJ"
-          >
-            •
-          </span>
-          <relative-time
-            class="sc-KXCwU"
-            datetime="2017-05-20T17:51:57.000Z"
-          >
-            May 20, 2017
-          </relative-time>
-        </div>
-      </span>
+          Updated
+        </span>
+        <span
+          class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+        >
+          •
+        </span>
+        <relative-time
+          class="sc-KXCwU"
+          datetime="2017-05-20T17:51:57.000Z"
+        >
+          May 20, 2017
+        </relative-time>
+      </div>
       <div
-        class="flex"
+        class="Box-sc-g0xbh4-0 flex gap-1"
       >
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="octocat approved these changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check text-primer-open"
+              class="octicon octicon-check text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1533,29 +1493,29 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
-        <button
-          class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+        </span>
+        <span
+          class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
           title="gitify-app requested changes"
-          type="button"
+          variant="secondary"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
             data-direction="horizontal"
-            data-gap="condensed"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-file-diff text-primer-closed"
+              class="octicon octicon-file-diff text-gitify-icon-closed"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -1570,12 +1530,12 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
               />
             </svg>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
             >
               1
             </span>
           </div>
-        </button>
+        </span>
       </div>
     </div>
   </div>,
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
index d1d271a78..f1e117afa 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
   "baseElement": <body>
     <div>
       <div
-        class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover"
+        class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
         id="138661096"
       >
         <div
@@ -20,7 +20,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-opened text-primer-open"
+              class="octicon octicon-issue-opened text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -93,7 +93,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             />
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -113,57 +113,53 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               title="View profile: gitify-app"
               width="14"
             />
-            <span
-              class="text-xs opacity-80"
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="stretch"
+              data-direction="horizontal"
+              data-gap="none"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
             >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="stretch"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+                title="You're watching the repository."
               >
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                  title="You're watching the repository."
-                >
-                  Updated
-                </span>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  •
-                </span>
-                <relative-time
-                  class="sc-KXCwU"
-                  datetime="2017-05-20T17:51:57.000Z"
-                >
-                  May 20, 2017
-                </relative-time>
-              </div>
-            </span>
+                Updated
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+              >
+                •
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:51:57.000Z"
+              >
+                May 20, 2017
+              </relative-time>
+            </div>
             <div
-              class="flex"
+              class="Box-sc-g0xbh4-0 flex gap-1"
             >
-              <button
-                class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+              <span
+                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
                 title="octocat approved these changes"
-                type="button"
+                variant="secondary"
               >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
                   data-direction="horizontal"
-                  data-gap="condensed"
+                  data-gap="none"
                   data-justify="start"
                   data-padding="none"
                   data-wrap="nowrap"
                 >
                   <svg
                     aria-hidden="true"
-                    class="octicon octicon-check text-primer-open"
+                    class="octicon octicon-check text-gitify-icon-open"
                     display="inline-block"
                     fill="currentColor"
                     focusable="false"
@@ -178,29 +174,29 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                   >
                     1
                   </span>
                 </div>
-              </button>
-              <button
-                class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+              </span>
+              <span
+                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
                 title="gitify-app requested changes"
-                type="button"
+                variant="secondary"
               >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
                   data-direction="horizontal"
-                  data-gap="condensed"
+                  data-gap="none"
                   data-justify="start"
                   data-padding="none"
                   data-wrap="nowrap"
                 >
                   <svg
                     aria-hidden="true"
-                    class="octicon octicon-file-diff text-primer-closed"
+                    class="octicon octicon-file-diff text-gitify-icon-closed"
                     display="inline-block"
                     fill="currentColor"
                     focusable="false"
@@ -215,149 +211,145 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                   >
                     1
                   </span>
                 </div>
-              </button>
+              </span>
             </div>
           </div>
         </div>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <button
+            aria-describedby=":r3:-loading-announcement"
+            aria-labelledby=":r2:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-mark-as-done"
+            sx="[object Object]"
+            type="button"
           >
-            <button
-              aria-describedby=":r3:-loading-announcement"
-              aria-labelledby=":r2:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-mark-as-done"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-check"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r2:"
-              popover="auto"
-            >
-              Mark as done
-            </span>
-            <button
-              aria-describedby=":r5:-loading-announcement"
-              aria-labelledby=":r4:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-mark-as-read"
-              sx="[object Object]"
-              type="button"
+              class="octicon octicon-check"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-read"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-                />
-              </svg>
-            </button>
-            <span
+              <path
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r2:"
+            popover="auto"
+          >
+            Mark as done
+          </span>
+          <button
+            aria-describedby=":r5:-loading-announcement"
+            aria-labelledby=":r4:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-mark-as-read"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r4:"
-              popover="auto"
-            >
-              Mark as read
-            </span>
-            <button
-              aria-describedby=":r7:-loading-announcement"
-              aria-labelledby=":r6:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-unsubscribe-from-thread"
-              sx="[object Object]"
-              type="button"
+              class="octicon octicon-read"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-bell-slash"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-                />
-              </svg>
-            </button>
-            <span
+              <path
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r4:"
+            popover="auto"
+          >
+            Mark as read
+          </span>
+          <button
+            aria-describedby=":r7:-loading-announcement"
+            aria-labelledby=":r6:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-unsubscribe-from-thread"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r6:"
-              popover="auto"
+              class="octicon octicon-bell-slash"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Unsubscribe from thread
-            </span>
-          </div>
+              <path
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r6:"
+            popover="auto"
+          >
+            Unsubscribe from thread
+          </span>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover"
+      class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
       id="138661096"
     >
       <div
@@ -371,7 +363,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-opened text-primer-open"
+            class="octicon octicon-issue-opened text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -444,7 +436,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           />
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
@@ -464,57 +456,53 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             title="View profile: gitify-app"
             width="14"
           />
-          <span
-            class="text-xs opacity-80"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="stretch"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+              title="You're watching the repository."
             >
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-                title="You're watching the repository."
-              >
-                Updated
-              </span>
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                •
-              </span>
-              <relative-time
-                class="sc-KXCwU"
-                datetime="2017-05-20T17:51:57.000Z"
-              >
-                May 20, 2017
-              </relative-time>
-            </div>
-          </span>
+              Updated
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+            >
+              •
+            </span>
+            <relative-time
+              class="sc-KXCwU"
+              datetime="2017-05-20T17:51:57.000Z"
+            >
+              May 20, 2017
+            </relative-time>
+          </div>
           <div
-            class="flex"
+            class="Box-sc-g0xbh4-0 flex gap-1"
           >
-            <button
-              class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+            <span
+              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
               title="octocat approved these changes"
-              type="button"
+              variant="secondary"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                 data-align="center"
                 data-direction="horizontal"
-                data-gap="condensed"
+                data-gap="none"
                 data-justify="start"
                 data-padding="none"
                 data-wrap="nowrap"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-check text-primer-open"
+                  class="octicon octicon-check text-gitify-icon-open"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -529,29 +517,29 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                   />
                 </svg>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                 >
                   1
                 </span>
               </div>
-            </button>
-            <button
-              class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+            </span>
+            <span
+              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
               title="gitify-app requested changes"
-              type="button"
+              variant="secondary"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                 data-align="center"
                 data-direction="horizontal"
-                data-gap="condensed"
+                data-gap="none"
                 data-justify="start"
                 data-padding="none"
                 data-wrap="nowrap"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-file-diff text-primer-closed"
+                  class="octicon octicon-file-diff text-gitify-icon-closed"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -566,142 +554,138 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                   />
                 </svg>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                 >
                   1
                 </span>
               </div>
-            </button>
+            </span>
           </div>
         </div>
       </div>
       <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="none"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
+        <button
+          aria-describedby=":r3:-loading-announcement"
+          aria-labelledby=":r2:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-mark-as-done"
+          sx="[object Object]"
+          type="button"
         >
-          <button
-            aria-describedby=":r3:-loading-announcement"
-            aria-labelledby=":r2:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-mark-as-done"
-            sx="[object Object]"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-check"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-              />
-            </svg>
-          </button>
-          <span
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":r2:"
-            popover="auto"
-          >
-            Mark as done
-          </span>
-          <button
-            aria-describedby=":r5:-loading-announcement"
-            aria-labelledby=":r4:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-mark-as-read"
-            sx="[object Object]"
-            type="button"
+            class="octicon octicon-check"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-read"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-              />
-            </svg>
-          </button>
-          <span
+            <path
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r2:"
+          popover="auto"
+        >
+          Mark as done
+        </span>
+        <button
+          aria-describedby=":r5:-loading-announcement"
+          aria-labelledby=":r4:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-mark-as-read"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":r4:"
-            popover="auto"
-          >
-            Mark as read
-          </span>
-          <button
-            aria-describedby=":r7:-loading-announcement"
-            aria-labelledby=":r6:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-unsubscribe-from-thread"
-            sx="[object Object]"
-            type="button"
+            class="octicon octicon-read"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-bell-slash"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-              />
-            </svg>
-          </button>
-          <span
+            <path
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r4:"
+          popover="auto"
+        >
+          Mark as read
+        </span>
+        <button
+          aria-describedby=":r7:-loading-announcement"
+          aria-labelledby=":r6:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-unsubscribe-from-thread"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":r6:"
-            popover="auto"
+            class="octicon octicon-bell-slash"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            Unsubscribe from thread
-          </span>
-        </div>
+            <path
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r6:"
+          popover="auto"
+        >
+          Unsubscribe from thread
+        </span>
       </div>
     </div>
   </div>,
@@ -765,7 +749,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
   "baseElement": <body>
     <div>
       <div
-        class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover"
+        class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
         id="138661096"
       >
         <div
@@ -779,7 +763,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-issue-opened text-primer-open"
+              class="octicon octicon-issue-opened text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -816,7 +800,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             />
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -836,57 +820,53 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               title="View profile: gitify-app"
               width="14"
             />
-            <span
-              class="text-xs opacity-80"
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="stretch"
+              data-direction="horizontal"
+              data-gap="none"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
             >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="stretch"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+                title="You're watching the repository."
               >
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                  title="You're watching the repository."
-                >
-                  Updated
-                </span>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  •
-                </span>
-                <relative-time
-                  class="sc-KXCwU"
-                  datetime="2017-05-20T17:51:57.000Z"
-                >
-                  May 20, 2017
-                </relative-time>
-              </div>
-            </span>
+                Updated
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+              >
+                •
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:51:57.000Z"
+              >
+                May 20, 2017
+              </relative-time>
+            </div>
             <div
-              class="flex"
+              class="Box-sc-g0xbh4-0 flex gap-1"
             >
-              <button
-                class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+              <span
+                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
                 title="octocat approved these changes"
-                type="button"
+                variant="secondary"
               >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
                   data-direction="horizontal"
-                  data-gap="condensed"
+                  data-gap="none"
                   data-justify="start"
                   data-padding="none"
                   data-wrap="nowrap"
                 >
                   <svg
                     aria-hidden="true"
-                    class="octicon octicon-check text-primer-open"
+                    class="octicon octicon-check text-gitify-icon-open"
                     display="inline-block"
                     fill="currentColor"
                     focusable="false"
@@ -901,29 +881,29 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                   >
                     1
                   </span>
                 </div>
-              </button>
-              <button
-                class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+              </span>
+              <span
+                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
                 title="gitify-app requested changes"
-                type="button"
+                variant="secondary"
               >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
                   data-direction="horizontal"
-                  data-gap="condensed"
+                  data-gap="none"
                   data-justify="start"
                   data-padding="none"
                   data-wrap="nowrap"
                 >
                   <svg
                     aria-hidden="true"
-                    class="octicon octicon-file-diff text-primer-closed"
+                    class="octicon octicon-file-diff text-gitify-icon-closed"
                     display="inline-block"
                     fill="currentColor"
                     focusable="false"
@@ -938,149 +918,145 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                   >
                     1
                   </span>
                 </div>
-              </button>
+              </span>
             </div>
           </div>
         </div>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <button
+            aria-describedby=":ra:-loading-announcement"
+            aria-labelledby=":r9:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-mark-as-done"
+            sx="[object Object]"
+            type="button"
           >
-            <button
-              aria-describedby=":ra:-loading-announcement"
-              aria-labelledby=":r9:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-mark-as-done"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-check"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r9:"
-              popover="auto"
-            >
-              Mark as done
-            </span>
-            <button
-              aria-describedby=":rc:-loading-announcement"
-              aria-labelledby=":rb:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-mark-as-read"
-              sx="[object Object]"
-              type="button"
+              class="octicon octicon-check"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-read"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-                />
-              </svg>
-            </button>
-            <span
+              <path
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r9:"
+            popover="auto"
+          >
+            Mark as done
+          </span>
+          <button
+            aria-describedby=":rc:-loading-announcement"
+            aria-labelledby=":rb:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-mark-as-read"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rb:"
-              popover="auto"
-            >
-              Mark as read
-            </span>
-            <button
-              aria-describedby=":re:-loading-announcement"
-              aria-labelledby=":rd:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-unsubscribe-from-thread"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-bell-slash"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-                />
-              </svg>
-            </button>
-            <span
+              class="octicon octicon-read"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rb:"
+            popover="auto"
+          >
+            Mark as read
+          </span>
+          <button
+            aria-describedby=":re:-loading-announcement"
+            aria-labelledby=":rd:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-unsubscribe-from-thread"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rd:"
-              popover="auto"
+              class="octicon octicon-bell-slash"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Unsubscribe from thread
-            </span>
-          </div>
+              <path
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rd:"
+            popover="auto"
+          >
+            Unsubscribe from thread
+          </span>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover"
+      class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
       id="138661096"
     >
       <div
@@ -1094,7 +1070,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-opened text-primer-open"
+            class="octicon octicon-issue-opened text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1131,7 +1107,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           />
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
@@ -1151,57 +1127,53 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             title="View profile: gitify-app"
             width="14"
           />
-          <span
-            class="text-xs opacity-80"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="stretch"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+              title="You're watching the repository."
             >
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-                title="You're watching the repository."
-              >
-                Updated
-              </span>
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                •
-              </span>
-              <relative-time
-                class="sc-KXCwU"
-                datetime="2017-05-20T17:51:57.000Z"
-              >
-                May 20, 2017
-              </relative-time>
-            </div>
-          </span>
+              Updated
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+            >
+              •
+            </span>
+            <relative-time
+              class="sc-KXCwU"
+              datetime="2017-05-20T17:51:57.000Z"
+            >
+              May 20, 2017
+            </relative-time>
+          </div>
           <div
-            class="flex"
+            class="Box-sc-g0xbh4-0 flex gap-1"
           >
-            <button
-              class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+            <span
+              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
               title="octocat approved these changes"
-              type="button"
+              variant="secondary"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                 data-align="center"
                 data-direction="horizontal"
-                data-gap="condensed"
+                data-gap="none"
                 data-justify="start"
                 data-padding="none"
                 data-wrap="nowrap"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-check text-primer-open"
+                  class="octicon octicon-check text-gitify-icon-open"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -1216,29 +1188,29 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                   />
                 </svg>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                 >
                   1
                 </span>
               </div>
-            </button>
-            <button
-              class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+            </span>
+            <span
+              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
               title="gitify-app requested changes"
-              type="button"
+              variant="secondary"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                 data-align="center"
                 data-direction="horizontal"
-                data-gap="condensed"
+                data-gap="none"
                 data-justify="start"
                 data-padding="none"
                 data-wrap="nowrap"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-file-diff text-primer-closed"
+                  class="octicon octicon-file-diff text-gitify-icon-closed"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -1253,231 +1225,227 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                   />
                 </svg>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                 >
                   1
                 </span>
               </div>
-            </button>
+            </span>
           </div>
         </div>
       </div>
       <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":ra:-loading-announcement"
+          aria-labelledby=":r9:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-mark-as-done"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-check"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r9:"
+          popover="auto"
+        >
+          Mark as done
+        </span>
+        <button
+          aria-describedby=":rc:-loading-announcement"
+          aria-labelledby=":rb:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-mark-as-read"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-read"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rb:"
+          popover="auto"
+        >
+          Mark as read
+        </span>
+        <button
+          aria-describedby=":re:-loading-announcement"
+          aria-labelledby=":rd:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-unsubscribe-from-thread"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-bell-slash"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rd:"
+          popover="auto"
+        >
+          Unsubscribe from thread
+        </span>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`renderer/components/notifications/NotificationRow.tsx should render itself & its children - hide numbers 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
+        id="138661096"
       >
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="none"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
+          class="mr-3 flex items-center justify-center"
         >
-          <button
-            aria-describedby=":ra:-loading-announcement"
-            aria-labelledby=":r9:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-mark-as-done"
-            sx="[object Object]"
-            type="button"
+          <span
+            aria-label="Open Issue"
+            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
+            id=":rf:"
+            role="tooltip"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-check"
+              class="octicon octicon-issue-opened text-gitify-icon-open"
               display="inline-block"
               fill="currentColor"
               focusable="false"
-              height="16"
+              height="18"
               overflow="visible"
               style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
-              width="16"
+              width="18"
             >
               <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-              />
-            </svg>
-          </button>
-          <span
-            aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":r9:"
-            popover="auto"
-          >
-            Mark as done
-          </span>
-          <button
-            aria-describedby=":rc:-loading-announcement"
-            aria-labelledby=":rb:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-mark-as-read"
-            sx="[object Object]"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-read"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-              />
-            </svg>
-          </button>
-          <span
-            aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":rb:"
-            popover="auto"
-          >
-            Mark as read
-          </span>
-          <button
-            aria-describedby=":re:-loading-announcement"
-            aria-labelledby=":rd:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-unsubscribe-from-thread"
-            sx="[object Object]"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-bell-slash"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-              />
-            </svg>
-          </button>
-          <span
-            aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":rd:"
-            popover="auto"
-          >
-            Unsubscribe from thread
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`renderer/components/notifications/NotificationRow.tsx should render itself & its children - hide numbers 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover"
-        id="138661096"
-      >
-        <div
-          class="mr-3 flex items-center justify-center"
-        >
-          <span
-            aria-label="Open Issue"
-            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-            id=":rf:"
-            role="tooltip"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-issue-opened text-primer-open"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="18"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="18"
-            >
-              <path
-                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
               />
               <path
                 d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
@@ -1503,7 +1471,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             />
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -1523,57 +1491,53 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               title="View profile: gitify-app"
               width="14"
             />
-            <span
-              class="text-xs opacity-80"
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="stretch"
+              data-direction="horizontal"
+              data-gap="none"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
             >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="stretch"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+                title="You're watching the repository."
               >
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                  title="You're watching the repository."
-                >
-                  Updated
-                </span>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  •
-                </span>
-                <relative-time
-                  class="sc-KXCwU"
-                  datetime="2017-05-20T17:51:57.000Z"
-                >
-                  May 20, 2017
-                </relative-time>
-              </div>
-            </span>
+                Updated
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+              >
+                •
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:51:57.000Z"
+              >
+                May 20, 2017
+              </relative-time>
+            </div>
             <div
-              class="flex"
+              class="Box-sc-g0xbh4-0 flex gap-1"
             >
-              <button
-                class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+              <span
+                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
                 title="octocat approved these changes"
-                type="button"
+                variant="secondary"
               >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
                   data-direction="horizontal"
-                  data-gap="condensed"
+                  data-gap="none"
                   data-justify="start"
                   data-padding="none"
                   data-wrap="nowrap"
                 >
                   <svg
                     aria-hidden="true"
-                    class="octicon octicon-check text-primer-open"
+                    class="octicon octicon-check text-gitify-icon-open"
                     display="inline-block"
                     fill="currentColor"
                     focusable="false"
@@ -1588,29 +1552,29 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                   >
                     1
                   </span>
                 </div>
-              </button>
-              <button
-                class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+              </span>
+              <span
+                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
                 title="gitify-app requested changes"
-                type="button"
+                variant="secondary"
               >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
                   data-direction="horizontal"
-                  data-gap="condensed"
+                  data-gap="none"
                   data-justify="start"
                   data-padding="none"
                   data-wrap="nowrap"
                 >
                   <svg
                     aria-hidden="true"
-                    class="octicon octicon-file-diff text-primer-closed"
+                    class="octicon octicon-file-diff text-gitify-icon-closed"
                     display="inline-block"
                     fill="currentColor"
                     focusable="false"
@@ -1625,149 +1589,145 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                   >
                     1
                   </span>
                 </div>
-              </button>
+              </span>
             </div>
           </div>
         </div>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <button
+            aria-describedby=":rh:-loading-announcement"
+            aria-labelledby=":rg:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-mark-as-done"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-check"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rg:"
+            popover="auto"
+          >
+            Mark as done
+          </span>
+          <button
+            aria-describedby=":rj:-loading-announcement"
+            aria-labelledby=":ri:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-mark-as-read"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-read"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":ri:"
+            popover="auto"
+          >
+            Mark as read
+          </span>
+          <button
+            aria-describedby=":rl:-loading-announcement"
+            aria-labelledby=":rk:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            data-testid="notification-unsubscribe-from-thread"
+            sx="[object Object]"
+            type="button"
           >
-            <button
-              aria-describedby=":rh:-loading-announcement"
-              aria-labelledby=":rg:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-mark-as-done"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-check"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rg:"
-              popover="auto"
-            >
-              Mark as done
-            </span>
-            <button
-              aria-describedby=":rj:-loading-announcement"
-              aria-labelledby=":ri:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-mark-as-read"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-read"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":ri:"
-              popover="auto"
-            >
-              Mark as read
-            </span>
-            <button
-              aria-describedby=":rl:-loading-announcement"
-              aria-labelledby=":rk:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="notification-unsubscribe-from-thread"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-bell-slash"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-                />
-              </svg>
-            </button>
-            <span
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rk:"
-              popover="auto"
+              class="octicon octicon-bell-slash"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Unsubscribe from thread
-            </span>
-          </div>
+              <path
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rk:"
+            popover="auto"
+          >
+            Unsubscribe from thread
+          </span>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover"
+      class="group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
       id="138661096"
     >
       <div
@@ -1781,7 +1741,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-issue-opened text-primer-open"
+            class="octicon octicon-issue-opened text-gitify-icon-open"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -1818,7 +1778,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           />
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
@@ -1838,57 +1798,53 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             title="View profile: gitify-app"
             width="14"
           />
-          <span
-            class="text-xs opacity-80"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="stretch"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ"
+              title="You're watching the repository."
             >
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-                title="You're watching the repository."
-              >
-                Updated
-              </span>
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                •
-              </span>
-              <relative-time
-                class="sc-KXCwU"
-                datetime="2017-05-20T17:51:57.000Z"
-              >
-                May 20, 2017
-              </relative-time>
-            </div>
-          </span>
+              Updated
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ px-1"
+            >
+              •
+            </span>
+            <relative-time
+              class="sc-KXCwU"
+              datetime="2017-05-20T17:51:57.000Z"
+            >
+              May 20, 2017
+            </relative-time>
+          </div>
           <div
-            class="flex"
+            class="Box-sc-g0xbh4-0 flex gap-1"
           >
-            <button
-              class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+            <span
+              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
               title="octocat approved these changes"
-              type="button"
+              variant="secondary"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                 data-align="center"
                 data-direction="horizontal"
-                data-gap="condensed"
+                data-gap="none"
                 data-justify="start"
                 data-padding="none"
                 data-wrap="nowrap"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-check text-primer-open"
+                  class="octicon octicon-check text-gitify-icon-open"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -1903,29 +1859,29 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                   />
                 </svg>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                 >
                   1
                 </span>
               </div>
-            </button>
-            <button
-              class="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
+            </span>
+            <span
+              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
               title="gitify-app requested changes"
-              type="button"
+              variant="secondary"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                 data-align="center"
                 data-direction="horizontal"
-                data-gap="condensed"
+                data-gap="none"
                 data-justify="start"
                 data-padding="none"
                 data-wrap="nowrap"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-file-diff text-primer-closed"
+                  class="octicon octicon-file-diff text-gitify-icon-closed"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -1940,142 +1896,138 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                   />
                 </svg>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
                 >
                   1
                 </span>
               </div>
-            </button>
+            </span>
           </div>
         </div>
       </div>
       <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="none"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
+        <button
+          aria-describedby=":rh:-loading-announcement"
+          aria-labelledby=":rg:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-mark-as-done"
+          sx="[object Object]"
+          type="button"
         >
-          <button
-            aria-describedby=":rh:-loading-announcement"
-            aria-labelledby=":rg:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-mark-as-done"
-            sx="[object Object]"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-check"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-              />
-            </svg>
-          </button>
-          <span
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":rg:"
-            popover="auto"
-          >
-            Mark as done
-          </span>
-          <button
-            aria-describedby=":rj:-loading-announcement"
-            aria-labelledby=":ri:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-mark-as-read"
-            sx="[object Object]"
-            type="button"
+            class="octicon octicon-check"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-read"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-              />
-            </svg>
-          </button>
-          <span
+            <path
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rg:"
+          popover="auto"
+        >
+          Mark as done
+        </span>
+        <button
+          aria-describedby=":rj:-loading-announcement"
+          aria-labelledby=":ri:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-mark-as-read"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":ri:"
-            popover="auto"
-          >
-            Mark as read
-          </span>
-          <button
-            aria-describedby=":rl:-loading-announcement"
-            aria-labelledby=":rk:"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-size="small"
-            data-testid="notification-unsubscribe-from-thread"
-            sx="[object Object]"
-            type="button"
+            class="octicon octicon-read"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-bell-slash"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-              />
-            </svg>
-          </button>
-          <span
+            <path
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":ri:"
+          popover="auto"
+        >
+          Mark as read
+        </span>
+        <button
+          aria-describedby=":rl:-loading-announcement"
+          aria-labelledby=":rk:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          data-testid="notification-unsubscribe-from-thread"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":rk:"
-            popover="auto"
+            class="octicon octicon-bell-slash"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            Unsubscribe from thread
-          </span>
-        </div>
+            <path
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rk:"
+          popover="auto"
+        >
+          Unsubscribe from thread
+        </span>
       </div>
     </div>
   </div>,
diff --git a/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
index e2af1194d..ab5b1a320 100644
--- a/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
   "baseElement": <body>
     <div>
       <div
-        class="group flex justify-between pr-1 py-0.5 bg-gitify-repositories dark:text-white"
+        class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
       >
         <div
           class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
@@ -79,218 +79,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
           </button>
         </div>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-        >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
-          >
-            <button
-              aria-describedby=":r2:-loading-announcement"
-              aria-labelledby=":r1:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-check"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r1:"
-              popover="auto"
-            >
-              Mark repository as done
-            </span>
-            <button
-              aria-describedby=":r4:-loading-announcement"
-              aria-labelledby=":r3:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-read"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r3:"
-              popover="auto"
-            >
-              Mark repository as read
-            </span>
-            <button
-              aria-describedby=":r6:-loading-announcement"
-              aria-labelledby=":r5:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-chevron-down"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r5:"
-              popover="auto"
-            >
-              Hide repository notifications
-            </span>
-          </div>
-        </div>
-      </div>
-      <div>
-        NotificationRow
-      </div>
-      <div>
-        NotificationRow
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="group flex justify-between pr-1 py-0.5 bg-gitify-repositories dark:text-white"
-    >
-      <div
-        class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
-      >
-        <button
-          aria-describedby=":r0:-loading-announcement"
-          class="types__StyledButton-sc-ws60qy-0 kQRupk"
-          data-loading="false"
-          data-no-visuals="true"
-          sx="[object Object]"
-          title="Open repository"
-          type="button"
-        >
-          <span
-            class="Box-sc-g0xbh4-0 srpGE"
-            data-component="buttonContent"
-            sx="[object Object]"
-          >
-            <span
-              data-component="text"
-            >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
-              >
-                <img
-                  alt=""
-                  class="Avatar__StyledAvatar-sc-2lv0r8-0 bGlcDY"
-                  data-component="Avatar"
-                  height="18"
-                  size="18"
-                  src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                  sx="[object Object]"
-                  width="18"
-                />
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  gitify-app/notifications-test
-                </span>
-              </div>
-            </span>
-            <span
-              class="Box-sc-g0xbh4-0 mhHOW"
-              data-component="trailingVisual"
-              sx="[object Object]"
-            >
-              <span
-                aria-hidden="true"
-                class="Box-sc-g0xbh4-0 bfvZWv"
-                data-component="ButtonCounter"
-                sx="[object Object]"
-              >
-                2
-              </span>
-              <span
-                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
-              >
-                 (
-                2
-                )
-              </span>
-            </span>
-          </span>
-        </button>
-      </div>
-      <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-      >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -411,6 +200,209 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
           </span>
         </div>
       </div>
+      <div>
+        NotificationRow
+      </div>
+      <div>
+        NotificationRow
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
+    >
+      <div
+        class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
+      >
+        <button
+          aria-describedby=":r0:-loading-announcement"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-loading="false"
+          data-no-visuals="true"
+          sx="[object Object]"
+          title="Open repository"
+          type="button"
+        >
+          <span
+            class="Box-sc-g0xbh4-0 srpGE"
+            data-component="buttonContent"
+            sx="[object Object]"
+          >
+            <span
+              data-component="text"
+            >
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+              >
+                <img
+                  alt=""
+                  class="Avatar__StyledAvatar-sc-2lv0r8-0 bGlcDY"
+                  data-component="Avatar"
+                  height="18"
+                  size="18"
+                  src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                  sx="[object Object]"
+                  width="18"
+                />
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  gitify-app/notifications-test
+                </span>
+              </div>
+            </span>
+            <span
+              class="Box-sc-g0xbh4-0 mhHOW"
+              data-component="trailingVisual"
+              sx="[object Object]"
+            >
+              <span
+                aria-hidden="true"
+                class="Box-sc-g0xbh4-0 bfvZWv"
+                data-component="ButtonCounter"
+                sx="[object Object]"
+              >
+                2
+              </span>
+              <span
+                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+              >
+                 (
+                2
+                )
+              </span>
+            </span>
+          </span>
+        </button>
+      </div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r2:-loading-announcement"
+          aria-labelledby=":r1:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-check"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r1:"
+          popover="auto"
+        >
+          Mark repository as done
+        </span>
+        <button
+          aria-describedby=":r4:-loading-announcement"
+          aria-labelledby=":r3:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-read"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r3:"
+          popover="auto"
+        >
+          Mark repository as read
+        </span>
+        <button
+          aria-describedby=":r6:-loading-announcement"
+          aria-labelledby=":r5:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r5:"
+          popover="auto"
+        >
+          Hide repository notifications
+        </span>
+      </div>
     </div>
     <div>
       NotificationRow
@@ -479,7 +471,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
   "baseElement": <body>
     <div>
       <div
-        class="group flex justify-between pr-1 py-0.5 bg-gitify-repositories dark:text-white"
+        class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
       >
         <div
           class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
@@ -551,135 +543,131 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
           </button>
         </div>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+          <button
+            aria-describedby=":r15:-loading-announcement"
+            aria-labelledby=":r14:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            sx="[object Object]"
+            type="button"
           >
-            <button
-              aria-describedby=":r15:-loading-announcement"
-              aria-labelledby=":r14:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-check"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r14:"
-              popover="auto"
-            >
-              Mark repository as done
-            </span>
-            <button
-              aria-describedby=":r17:-loading-announcement"
-              aria-labelledby=":r16:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
+              class="octicon octicon-check"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-read"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-                />
-              </svg>
-            </button>
-            <span
+              <path
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r14:"
+            popover="auto"
+          >
+            Mark repository as done
+          </span>
+          <button
+            aria-describedby=":r17:-loading-announcement"
+            aria-labelledby=":r16:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r16:"
-              popover="auto"
-            >
-              Mark repository as read
-            </span>
-            <button
-              aria-describedby=":r19:-loading-announcement"
-              aria-labelledby=":r18:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
+              class="octicon octicon-read"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-chevron-right"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"
-                />
-              </svg>
-            </button>
-            <span
+              <path
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r16:"
+            popover="auto"
+          >
+            Mark repository as read
+          </span>
+          <button
+            aria-describedby=":r19:-loading-announcement"
+            aria-labelledby=":r18:"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-size="small"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
               aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r18:"
-              popover="auto"
+              class="octicon octicon-chevron-right"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Show repository notifications
-            </span>
-          </div>
+              <path
+                d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"
+              />
+            </svg>
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r18:"
+            popover="auto"
+          >
+            Show repository notifications
+          </span>
         </div>
       </div>
     </div>
     <div>
       <div
-        class="group flex justify-between pr-1 py-0.5 bg-gitify-repositories dark:text-white"
+        class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
       >
         <div
           class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
@@ -751,217 +739,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
           </button>
         </div>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-        >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
-          >
-            <button
-              aria-describedby=":r1c:-loading-announcement"
-              aria-labelledby=":r1b:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-check"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r1b:"
-              popover="auto"
-            >
-              Mark repository as done
-            </span>
-            <button
-              aria-describedby=":r1e:-loading-announcement"
-              aria-labelledby=":r1d:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-read"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r1d:"
-              popover="auto"
-            >
-              Mark repository as read
-            </span>
-            <button
-              aria-describedby=":r1g:-loading-announcement"
-              aria-labelledby=":r1f:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-chevron-down"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r1f:"
-              popover="auto"
-            >
-              Hide repository notifications
-            </span>
-          </div>
-        </div>
-      </div>
-      <div>
-        NotificationRow
-      </div>
-      <div>
-        NotificationRow
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="group flex justify-between pr-1 py-0.5 bg-gitify-repositories dark:text-white"
-    >
-      <div
-        class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
-      >
-        <button
-          aria-describedby=":r1a:-loading-announcement"
-          class="types__StyledButton-sc-ws60qy-0 kQRupk"
-          data-loading="false"
-          data-no-visuals="true"
-          sx="[object Object]"
-          title="Open repository"
-          type="button"
-        >
-          <span
-            class="Box-sc-g0xbh4-0 srpGE"
-            data-component="buttonContent"
-            sx="[object Object]"
-          >
-            <span
-              data-component="text"
-            >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
-              >
-                <img
-                  alt=""
-                  class="Avatar__StyledAvatar-sc-2lv0r8-0 bGlcDY"
-                  data-component="Avatar"
-                  height="18"
-                  size="18"
-                  sx="[object Object]"
-                  width="18"
-                />
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  gitify-app/notifications-test
-                </span>
-              </div>
-            </span>
-            <span
-              class="Box-sc-g0xbh4-0 mhHOW"
-              data-component="trailingVisual"
-              sx="[object Object]"
-            >
-              <span
-                aria-hidden="true"
-                class="Box-sc-g0xbh4-0 bfvZWv"
-                data-component="ButtonCounter"
-                sx="[object Object]"
-              >
-                2
-              </span>
-              <span
-                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
-              >
-                 (
-                2
-                )
-              </span>
-            </span>
-          </span>
-        </button>
-      </div>
-      <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-      >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -1073,14 +851,216 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
           </button>
           <span
             aria-hidden="true"
-            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-            data-direction="s"
-            id=":r1f:"
-            popover="auto"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r1f:"
+            popover="auto"
+          >
+            Hide repository notifications
+          </span>
+        </div>
+      </div>
+      <div>
+        NotificationRow
+      </div>
+      <div>
+        NotificationRow
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
+    >
+      <div
+        class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
+      >
+        <button
+          aria-describedby=":r1a:-loading-announcement"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-loading="false"
+          data-no-visuals="true"
+          sx="[object Object]"
+          title="Open repository"
+          type="button"
+        >
+          <span
+            class="Box-sc-g0xbh4-0 srpGE"
+            data-component="buttonContent"
+            sx="[object Object]"
+          >
+            <span
+              data-component="text"
+            >
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+              >
+                <img
+                  alt=""
+                  class="Avatar__StyledAvatar-sc-2lv0r8-0 bGlcDY"
+                  data-component="Avatar"
+                  height="18"
+                  size="18"
+                  sx="[object Object]"
+                  width="18"
+                />
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  gitify-app/notifications-test
+                </span>
+              </div>
+            </span>
+            <span
+              class="Box-sc-g0xbh4-0 mhHOW"
+              data-component="trailingVisual"
+              sx="[object Object]"
+            >
+              <span
+                aria-hidden="true"
+                class="Box-sc-g0xbh4-0 bfvZWv"
+                data-component="ButtonCounter"
+                sx="[object Object]"
+              >
+                2
+              </span>
+              <span
+                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+              >
+                 (
+                2
+                )
+              </span>
+            </span>
+          </span>
+        </button>
+      </div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r1c:-loading-announcement"
+          aria-labelledby=":r1b:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-check"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r1b:"
+          popover="auto"
+        >
+          Mark repository as done
+        </span>
+        <button
+          aria-describedby=":r1e:-loading-announcement"
+          aria-labelledby=":r1d:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-read"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            Hide repository notifications
-          </span>
-        </div>
+            <path
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r1d:"
+          popover="auto"
+        >
+          Mark repository as read
+        </span>
+        <button
+          aria-describedby=":r1g:-loading-announcement"
+          aria-labelledby=":r1f:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r1f:"
+          popover="auto"
+        >
+          Hide repository notifications
+        </span>
       </div>
     </div>
     <div>
@@ -1150,7 +1130,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
   "baseElement": <body>
     <div>
       <div
-        class="group flex justify-between pr-1 py-0.5 bg-gitify-repositories dark:text-white"
+        class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
       >
         <div
           class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
@@ -1222,217 +1202,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
           </button>
         </div>
         <div
-          class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-        >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
-          >
-            <button
-              aria-describedby=":ru:-loading-announcement"
-              aria-labelledby=":rt:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-check"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rt:"
-              popover="auto"
-            >
-              Mark repository as done
-            </span>
-            <button
-              aria-describedby=":r10:-loading-announcement"
-              aria-labelledby=":rv:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-read"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":rv:"
-              popover="auto"
-            >
-              Mark repository as read
-            </span>
-            <button
-              aria-describedby=":r12:-loading-announcement"
-              aria-labelledby=":r11:"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              sx="[object Object]"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-chevron-down"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
-                />
-              </svg>
-            </button>
-            <span
-              aria-hidden="true"
-              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-              data-direction="s"
-              id=":r11:"
-              popover="auto"
-            >
-              Hide repository notifications
-            </span>
-          </div>
-        </div>
-      </div>
-      <div>
-        NotificationRow
-      </div>
-      <div>
-        NotificationRow
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="group flex justify-between pr-1 py-0.5 bg-gitify-repositories dark:text-white"
-    >
-      <div
-        class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
-      >
-        <button
-          aria-describedby=":rs:-loading-announcement"
-          class="types__StyledButton-sc-ws60qy-0 kQRupk"
-          data-loading="false"
-          data-no-visuals="true"
-          sx="[object Object]"
-          title="Open repository"
-          type="button"
-        >
-          <span
-            class="Box-sc-g0xbh4-0 srpGE"
-            data-component="buttonContent"
-            sx="[object Object]"
-          >
-            <span
-              data-component="text"
-            >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
-              >
-                <img
-                  alt=""
-                  class="Avatar__StyledAvatar-sc-2lv0r8-0 bGlcDY"
-                  data-component="Avatar"
-                  height="18"
-                  size="18"
-                  sx="[object Object]"
-                  width="18"
-                />
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  gitify-app/notifications-test
-                </span>
-              </div>
-            </span>
-            <span
-              class="Box-sc-g0xbh4-0 mhHOW"
-              data-component="trailingVisual"
-              sx="[object Object]"
-            >
-              <span
-                aria-hidden="true"
-                class="Box-sc-g0xbh4-0 bfvZWv"
-                data-component="ButtonCounter"
-                sx="[object Object]"
-              >
-                2
-              </span>
-              <span
-                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
-              >
-                 (
-                2
-                )
-              </span>
-            </span>
-          </span>
-        </button>
-      </div>
-      <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-      >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -1553,6 +1323,208 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
           </span>
         </div>
       </div>
+      <div>
+        NotificationRow
+      </div>
+      <div>
+        NotificationRow
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
+    >
+      <div
+        class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
+      >
+        <button
+          aria-describedby=":rs:-loading-announcement"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-loading="false"
+          data-no-visuals="true"
+          sx="[object Object]"
+          title="Open repository"
+          type="button"
+        >
+          <span
+            class="Box-sc-g0xbh4-0 srpGE"
+            data-component="buttonContent"
+            sx="[object Object]"
+          >
+            <span
+              data-component="text"
+            >
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+              >
+                <img
+                  alt=""
+                  class="Avatar__StyledAvatar-sc-2lv0r8-0 bGlcDY"
+                  data-component="Avatar"
+                  height="18"
+                  size="18"
+                  sx="[object Object]"
+                  width="18"
+                />
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  gitify-app/notifications-test
+                </span>
+              </div>
+            </span>
+            <span
+              class="Box-sc-g0xbh4-0 mhHOW"
+              data-component="trailingVisual"
+              sx="[object Object]"
+            >
+              <span
+                aria-hidden="true"
+                class="Box-sc-g0xbh4-0 bfvZWv"
+                data-component="ButtonCounter"
+                sx="[object Object]"
+              >
+                2
+              </span>
+              <span
+                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+              >
+                 (
+                2
+                )
+              </span>
+            </span>
+          </span>
+        </button>
+      </div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="none"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":ru:-loading-announcement"
+          aria-labelledby=":rt:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-check"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rt:"
+          popover="auto"
+        >
+          Mark repository as done
+        </span>
+        <button
+          aria-describedby=":r10:-loading-announcement"
+          aria-labelledby=":rv:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-read"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":rv:"
+          popover="auto"
+        >
+          Mark repository as read
+        </span>
+        <button
+          aria-describedby=":r12:-loading-announcement"
+          aria-labelledby=":r11:"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-size="small"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <span
+          aria-hidden="true"
+          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+          data-direction="s"
+          id=":r11:"
+          popover="auto"
+        >
+          Hide repository notifications
+        </span>
+      </div>
     </div>
     <div>
       NotificationRow
diff --git a/src/renderer/components/primitives/Centered.test.tsx b/src/renderer/components/primitives/Centered.test.tsx
deleted file mode 100644
index 58a7b92e7..000000000
--- a/src/renderer/components/primitives/Centered.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-import { Centered } from './Centered';
-
-describe('renderer/components/primitives/Centered.tsx', () => {
-  it('should render itself & its children', () => {
-    const tree = render(<Centered>Test</Centered>);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/src/renderer/components/primitives/Centered.tsx b/src/renderer/components/primitives/Centered.tsx
deleted file mode 100644
index 8334e1c8e..000000000
--- a/src/renderer/components/primitives/Centered.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { FC, ReactNode } from 'react';
-
-interface ICentered {
-  children: ReactNode;
-}
-
-export const Centered: FC<ICentered> = (props: ICentered) => {
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center p-8 min-h-screen">
-      {props.children}
-    </div>
-  );
-};
diff --git a/src/renderer/components/primitives/EmojiText.tsx b/src/renderer/components/primitives/EmojiText.tsx
index ef076212c..35c4521d6 100644
--- a/src/renderer/components/primitives/EmojiText.tsx
+++ b/src/renderer/components/primitives/EmojiText.tsx
@@ -1,5 +1,6 @@
 import { type FC, useEffect, useRef } from 'react';
 
+import { Box } from '@primer/react';
 import { convertTextToEmojiImgHtml } from '../../utils/emojis';
 
 export interface IEmojiText {
@@ -15,5 +16,5 @@ export const EmojiText: FC<IEmojiText> = ({ text }) => {
     }
   }, [text]);
 
-  return <span ref={ref} />;
+  return <Box ref={ref} className="text-5xl" />;
 };
diff --git a/src/renderer/components/primitives/Footer.test.tsx b/src/renderer/components/primitives/Footer.test.tsx
index e29c11075..77e713abd 100644
--- a/src/renderer/components/primitives/Footer.test.tsx
+++ b/src/renderer/components/primitives/Footer.test.tsx
@@ -2,14 +2,14 @@ import { render } from '@testing-library/react';
 import { Footer } from './Footer';
 
 describe('renderer/components/primitives/Footer.tsx', () => {
-  it('should render itself & its children - justify-between', () => {
-    const tree = render(<Footer justify="justify-between">Test</Footer>);
+  it('should render itself & its children - space-between', () => {
+    const tree = render(<Footer justify="space-between">Test</Footer>);
 
     expect(tree).toMatchSnapshot();
   });
 
-  it('should render itself & its children - justify-end', () => {
-    const tree = render(<Footer justify="justify-end">Test</Footer>);
+  it('should render itself & its children - end', () => {
+    const tree = render(<Footer justify="end">Test</Footer>);
 
     expect(tree).toMatchSnapshot();
   });
diff --git a/src/renderer/components/primitives/Footer.tsx b/src/renderer/components/primitives/Footer.tsx
index 0fa49c93c..c1d2d637b 100644
--- a/src/renderer/components/primitives/Footer.tsx
+++ b/src/renderer/components/primitives/Footer.tsx
@@ -1,20 +1,20 @@
+import { Stack } from '@primer/react';
 import type { FC, ReactNode } from 'react';
-import { cn } from '../../utils/cn';
 
 interface IFooter {
   children: ReactNode;
-  justify: 'justify-end' | 'justify-between';
+  justify: 'end' | 'space-between';
 }
 
 export const Footer: FC<IFooter> = (props: IFooter) => {
   return (
-    <div
-      className={cn(
-        'flex items-center px-3 py-1 text-sm bg-gitify-footer',
-        props.justify,
-      )}
+    <Stack
+      direction="horizontal"
+      justify={props.justify}
+      padding="condensed"
+      className="bg-gitify-footer"
     >
       {props.children}
-    </div>
+    </Stack>
   );
 };
diff --git a/src/renderer/components/primitives/Header.tsx b/src/renderer/components/primitives/Header.tsx
index 8152d5ab3..189474a11 100644
--- a/src/renderer/components/primitives/Header.tsx
+++ b/src/renderer/components/primitives/Header.tsx
@@ -2,10 +2,10 @@ import { type FC, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ArrowLeftIcon, type Icon } from '@primer/octicons-react';
-import { Heading, IconButton, Stack } from '@primer/react';
+import { IconButton, Stack } from '@primer/react';
 
 import { AppContext } from '../../context/App';
-import { Size } from '../../types';
+import { Title } from './Title';
 
 interface IHeader {
   icon: Icon;
@@ -19,27 +19,24 @@ export const Header: FC<IHeader> = (props: IHeader) => {
   const { fetchNotifications } = useContext(AppContext);
 
   return (
-    <div className="mx-6 mt-2 py-2">
-      <Stack direction="horizontal" justify="space-between">
-        <IconButton
-          aria-labelledby="Go Back"
-          variant="invisible"
-          tooltipDirection="e"
-          icon={ArrowLeftIcon}
-          onClick={() => {
-            navigate(-1);
-            if (props.fetchOnBack) {
-              fetchNotifications();
-            }
-          }}
-          data-testid="header-nav-back"
-        />
+    <Stack direction="horizontal" justify="space-between" padding="spacious">
+      <IconButton
+        aria-labelledby="Go Back"
+        variant="invisible"
+        tooltipDirection="e"
+        icon={ArrowLeftIcon}
+        onClick={() => {
+          navigate(-1);
+          if (props.fetchOnBack) {
+            fetchNotifications();
+          }
+        }}
+        data-testid="header-nav-back"
+      />
 
-        <Stack direction="horizontal" align="center" gap="condensed">
-          <props.icon size={Size.LARGE} />
-          <Heading sx={{ fontSize: 3 }}>{props.children}</Heading>
-        </Stack>
-      </Stack>
-    </div>
+      <Title icon={props.icon} size={3}>
+        {props.children}
+      </Title>
+    </Stack>
   );
 };
diff --git a/src/renderer/components/primitives/HoverGroup.tsx b/src/renderer/components/primitives/HoverGroup.tsx
index 01df53990..a924d6dff 100644
--- a/src/renderer/components/primitives/HoverGroup.tsx
+++ b/src/renderer/components/primitives/HoverGroup.tsx
@@ -8,10 +8,13 @@ interface IHoverGroup {
 
 export const HoverGroup: FC<IHoverGroup> = ({ children }: IHoverGroup) => {
   return (
-    <div className="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80">
-      <Stack direction="horizontal" align="center" gap="none">
-        {children}
-      </Stack>
-    </div>
+    <Stack
+      direction="horizontal"
+      align="center"
+      gap="none"
+      className="opacity-0 transition-opacity group-hover:opacity-80"
+    >
+      {children}
+    </Stack>
   );
 };
diff --git a/src/renderer/components/primitives/Legend.test.tsx b/src/renderer/components/primitives/Legend.test.tsx
deleted file mode 100644
index 4a154d36a..000000000
--- a/src/renderer/components/primitives/Legend.test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PersonFillIcon } from '@primer/octicons-react';
-import { render } from '@testing-library/react';
-import { Legend } from './Legend';
-
-describe('renderer/routes/components/primitives/Legend.tsx', () => {
-  it('should render the legend', async () => {
-    const { container } = render(<Legend icon={PersonFillIcon}>Legend</Legend>);
-
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/src/renderer/components/primitives/Legend.tsx b/src/renderer/components/primitives/Legend.tsx
deleted file mode 100644
index 788b4f88b..000000000
--- a/src/renderer/components/primitives/Legend.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { FC } from 'react';
-
-import type { Icon } from '@primer/octicons-react';
-
-interface ILegend {
-  icon: Icon;
-  children: string;
-}
-
-export const Legend: FC<ILegend> = (props) => {
-  return (
-    <legend
-      id={props.children.toLowerCase().replace(' ', '-')}
-      className="mb-1 mt-2 font-semibold flex items-center"
-    >
-      <props.icon className="mr-2" />
-      {props.children}
-    </legend>
-  );
-};
diff --git a/src/renderer/components/primitives/Title.test.tsx b/src/renderer/components/primitives/Title.test.tsx
new file mode 100644
index 000000000..e20d60fd5
--- /dev/null
+++ b/src/renderer/components/primitives/Title.test.tsx
@@ -0,0 +1,21 @@
+import { PersonFillIcon } from '@primer/octicons-react';
+import { render } from '@testing-library/react';
+import { Title } from './Title';
+
+describe('renderer/routes/components/primitives/Title.tsx', () => {
+  it('should render the title - default size', async () => {
+    const { container } = render(<Title icon={PersonFillIcon}>Legend</Title>);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render the title - specific size', async () => {
+    const { container } = render(
+      <Title icon={PersonFillIcon} size={4}>
+        Legend
+      </Title>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/renderer/components/primitives/Title.tsx b/src/renderer/components/primitives/Title.tsx
new file mode 100644
index 000000000..953ef596f
--- /dev/null
+++ b/src/renderer/components/primitives/Title.tsx
@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+
+import type { Icon } from '@primer/octicons-react';
+import { Heading, Stack } from '@primer/react';
+
+interface ITitle {
+  icon: Icon;
+  children: string;
+  size?: number;
+}
+
+export const Title: FC<ITitle> = ({ size = 2, ...props }) => {
+  return (
+    <legend>
+      <Stack
+        direction="horizontal"
+        align="center"
+        gap="condensed"
+        id={props.children.toLowerCase().replace(' ', '-')}
+      >
+        <props.icon size="small" />
+        <Heading sx={{ fontSize: size }}>{props.children}</Heading>
+      </Stack>
+    </legend>
+  );
+};
diff --git a/src/renderer/components/primitives/__snapshots__/Centered.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/Centered.test.tsx.snap
deleted file mode 100644
index 3657c201e..000000000
--- a/src/renderer/components/primitives/__snapshots__/Centered.test.tsx.snap
+++ /dev/null
@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renderer/components/primitives/Centered.tsx should render itself & its children 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
-      >
-        Test
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
-    >
-      Test
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
diff --git a/src/renderer/components/primitives/__snapshots__/EmojiText.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/EmojiText.test.tsx.snap
index a890b34c8..697cea39a 100644
--- a/src/renderer/components/primitives/__snapshots__/EmojiText.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/EmojiText.test.tsx.snap
@@ -5,25 +5,29 @@ exports[`renderer/components/primitives/Emoji.tsx should render 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <span>
+      <div
+        class="Box-sc-g0xbh4-0 text-5xl"
+      >
         <img
           alt="🍺"
           class="emoji"
           draggable="false"
           src="images/twemoji/1f37a.svg"
         />
-      </span>
+      </div>
     </div>
   </body>,
   "container": <div>
-    <span>
+    <div
+      class="Box-sc-g0xbh4-0 text-5xl"
+    >
       <img
         alt="🍺"
         class="emoji"
         draggable="false"
         src="images/twemoji/1f37a.svg"
       />
-    </span>
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/components/primitives/__snapshots__/Footer.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/Footer.test.tsx.snap
index 1eeb9a1e6..10e487af2 100644
--- a/src/renderer/components/primitives/__snapshots__/Footer.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/Footer.test.tsx.snap
@@ -1,12 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderer/components/primitives/Footer.tsx should render itself & its children - justify-between 1`] = `
+exports[`renderer/components/primitives/Footer.tsx should render itself & its children - end 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex items-center px-3 py-1 text-sm bg-gitify-footer justify-between"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-justify="end"
+        data-padding="condensed"
+        data-wrap="nowrap"
       >
         Test
       </div>
@@ -14,7 +19,12 @@ exports[`renderer/components/primitives/Footer.tsx should render itself & its ch
   </body>,
   "container": <div>
     <div
-      class="flex items-center px-3 py-1 text-sm bg-gitify-footer justify-between"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="end"
+      data-padding="condensed"
+      data-wrap="nowrap"
     >
       Test
     </div>
@@ -73,13 +83,18 @@ exports[`renderer/components/primitives/Footer.tsx should render itself & its ch
 }
 `;
 
-exports[`renderer/components/primitives/Footer.tsx should render itself & its children - justify-end 1`] = `
+exports[`renderer/components/primitives/Footer.tsx should render itself & its children - space-between 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex items-center px-3 py-1 text-sm bg-gitify-footer justify-end"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-justify="space-between"
+        data-padding="condensed"
+        data-wrap="nowrap"
       >
         Test
       </div>
@@ -87,7 +102,12 @@ exports[`renderer/components/primitives/Footer.tsx should render itself & its ch
   </body>,
   "container": <div>
     <div
-      class="flex items-center px-3 py-1 text-sm bg-gitify-footer justify-end"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="space-between"
+      data-padding="condensed"
+      data-wrap="nowrap"
     >
       Test
     </div>
diff --git a/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap
index ee5404191..7c4323457 100644
--- a/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap
@@ -6,44 +6,42 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
   "baseElement": <body>
     <div>
       <div
-        class="mx-6 mt-2 py-2"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-justify="space-between"
+        data-padding="spacious"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
-          data-direction="horizontal"
-          data-justify="space-between"
-          data-padding="none"
-          data-wrap="nowrap"
+        <button
+          aria-describedby=":r0:-loading-announcement"
+          aria-labelledby="Go Back"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-testid="header-nav-back"
+          sx="[object Object]"
+          type="button"
         >
-          <button
-            aria-describedby=":r0:-loading-announcement"
-            aria-labelledby="Go Back"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-testid="header-nav-back"
-            sx="[object Object]"
-            type="button"
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-arrow-left"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-arrow-left"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-              />
-            </svg>
-          </button>
+            <path
+              d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+            />
+          </svg>
+        </button>
+        <legend>
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
@@ -52,6 +50,7 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
+            id="test-header"
           >
             <svg
               aria-hidden="true"
@@ -59,11 +58,11 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
               display="inline-block"
               fill="currentColor"
               focusable="false"
-              height="18"
+              height="16"
               overflow="visible"
               style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
-              width="18"
+              width="16"
             >
               <path
                 d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
@@ -76,50 +75,48 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
               Test Header
             </h2>
           </div>
-        </div>
+        </legend>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="mx-6 mt-2 py-2"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="space-between"
+      data-padding="spacious"
+      data-wrap="nowrap"
     >
-      <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-        data-align="stretch"
-        data-direction="horizontal"
-        data-justify="space-between"
-        data-padding="none"
-        data-wrap="nowrap"
+      <button
+        aria-describedby=":r0:-loading-announcement"
+        aria-labelledby="Go Back"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-component="IconButton"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="header-nav-back"
+        sx="[object Object]"
+        type="button"
       >
-        <button
-          aria-describedby=":r0:-loading-announcement"
-          aria-labelledby="Go Back"
-          class="types__StyledButton-sc-ws60qy-0 kQRupk"
-          data-component="IconButton"
-          data-loading="false"
-          data-no-visuals="true"
-          data-testid="header-nav-back"
-          sx="[object Object]"
-          type="button"
+        <svg
+          aria-hidden="true"
+          class="octicon octicon-arrow-left"
+          display="inline-block"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
+          viewBox="0 0 16 16"
+          width="16"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-arrow-left"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-            />
-          </svg>
-        </button>
+          <path
+            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+          />
+        </svg>
+      </button>
+      <legend>
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
           data-align="center"
@@ -128,6 +125,7 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
+          id="test-header"
         >
           <svg
             aria-hidden="true"
@@ -135,11 +133,11 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
             display="inline-block"
             fill="currentColor"
             focusable="false"
-            height="18"
+            height="16"
             overflow="visible"
             style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
-            width="18"
+            width="16"
           >
             <path
               d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
@@ -152,7 +150,7 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
             Test Header
           </h2>
         </div>
-      </div>
+      </legend>
     </div>
   </div>,
   "debug": [Function],
diff --git a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
index 6922656ac..896caa0d2 100644
--- a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
@@ -6,28 +6,7 @@ exports[`renderer/components/primitives/HoverGroup.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-      >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="none"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
-        >
-          Hover Group
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-80"
-    >
-      <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
@@ -38,6 +17,19 @@ exports[`renderer/components/primitives/HoverGroup.tsx should render 1`] = `
         Hover Group
       </div>
     </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="none"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="nowrap"
+    >
+      Hover Group
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/components/primitives/__snapshots__/Legend.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/Legend.test.tsx.snap
deleted file mode 100644
index f388669f3..000000000
--- a/src/renderer/components/primitives/__snapshots__/Legend.test.tsx.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renderer/routes/components/primitives/Legend.tsx should render the legend 1`] = `
-<div>
-  <legend
-    class="mb-1 mt-2 font-semibold flex items-center"
-    id="legend"
-  >
-    <svg
-      aria-hidden="true"
-      class="octicon octicon-person-fill mr-2"
-      display="inline-block"
-      fill="currentColor"
-      focusable="false"
-      height="16"
-      overflow="visible"
-      style="vertical-align: text-bottom;"
-      viewBox="0 0 16 16"
-      width="16"
-    >
-      <path
-        d="M4.243 4.757a3.757 3.757 0 1 1 5.851 3.119 6.006 6.006 0 0 1 3.9 5.339.75.75 0 0 1-.715.784H2.721a.75.75 0 0 1-.714-.784 6.006 6.006 0 0 1 3.9-5.34 3.753 3.753 0 0 1-1.664-3.118Z"
-      />
-    </svg>
-    Legend
-  </legend>
-</div>
-`;
diff --git a/src/renderer/components/primitives/__snapshots__/Title.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/Title.test.tsx.snap
new file mode 100644
index 000000000..c0c5afa98
--- /dev/null
+++ b/src/renderer/components/primitives/__snapshots__/Title.test.tsx.snap
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renderer/routes/components/primitives/Title.tsx should render the title - default size 1`] = `
+<div>
+  <legend>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="condensed"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="nowrap"
+      id="legend"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-person-fill"
+        display="inline-block"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <path
+          d="M4.243 4.757a3.757 3.757 0 1 1 5.851 3.119 6.006 6.006 0 0 1 3.9 5.339.75.75 0 0 1-.715.784H2.721a.75.75 0 0 1-.714-.784 6.006 6.006 0 0 1 3.9-5.34 3.753 3.753 0 0 1-1.664-3.118Z"
+        />
+      </svg>
+      <h2
+        class="Heading__StyledHeading-sc-1c1dgg0-0 lfvrLU"
+        sx="[object Object]"
+      >
+        Legend
+      </h2>
+    </div>
+  </legend>
+</div>
+`;
+
+exports[`renderer/routes/components/primitives/Title.tsx should render the title - specific size 1`] = `
+<div>
+  <legend>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="condensed"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="nowrap"
+      id="legend"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-person-fill"
+        display="inline-block"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <path
+          d="M4.243 4.757a3.757 3.757 0 1 1 5.851 3.119 6.006 6.006 0 0 1 3.9 5.339.75.75 0 0 1-.715.784H2.721a.75.75 0 0 1-.714-.784 6.006 6.006 0 0 1 3.9-5.34 3.753 3.753 0 0 1-1.664-3.118Z"
+        />
+      </svg>
+      <h2
+        class="Heading__StyledHeading-sc-1c1dgg0-0 gSteSt"
+        sx="[object Object]"
+      >
+        Legend
+      </h2>
+    </div>
+  </legend>
+</div>
+`;
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index f8a103824..c64aa37e7 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -23,7 +23,7 @@ import { getColorModeFromTheme, setTheme } from '../../utils/theme';
 import { zoomLevelToPercentage, zoomPercentageToLevel } from '../../utils/zoom';
 import { Checkbox } from '../fields/Checkbox';
 import { RadioGroup } from '../fields/RadioGroup';
-import { Legend } from '../primitives/Legend';
+import { Title } from '../primitives/Title';
 
 let timeout: NodeJS.Timeout;
 const DELAY = 200;
@@ -62,7 +62,7 @@ export const AppearanceSettings: FC = () => {
 
   return (
     <fieldset>
-      <Legend icon={PaintbrushIcon}>Appearance</Legend>
+      <Title icon={PaintbrushIcon}>Appearance</Title>
 
       <RadioGroup
         name="theme"
diff --git a/src/renderer/components/settings/NotificationSettings.tsx b/src/renderer/components/settings/NotificationSettings.tsx
index ccb0b6be1..e481daca0 100644
--- a/src/renderer/components/settings/NotificationSettings.tsx
+++ b/src/renderer/components/settings/NotificationSettings.tsx
@@ -8,14 +8,14 @@ import { GroupBy } from '../../types';
 import { openGitHubParticipatingDocs } from '../../utils/links';
 import { Checkbox } from '../fields/Checkbox';
 import { RadioGroup } from '../fields/RadioGroup';
-import { Legend } from '../primitives/Legend';
+import { Title } from '../primitives/Title';
 
 export const NotificationSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
 
   return (
     <fieldset>
-      <Legend icon={BellIcon}>Notifications</Legend>
+      <Title icon={BellIcon}>Notifications</Title>
       <RadioGroup
         name="groupBy"
         label="Group by:"
diff --git a/src/renderer/components/settings/SettingsFooter.tsx b/src/renderer/components/settings/SettingsFooter.tsx
index f614c8e40..4b8016dc6 100644
--- a/src/renderer/components/settings/SettingsFooter.tsx
+++ b/src/renderer/components/settings/SettingsFooter.tsx
@@ -25,7 +25,7 @@ export const SettingsFooter: FC = () => {
   }, []);
 
   return (
-    <Footer justify="justify-between">
+    <Footer justify="space-between">
       <Stack direction="horizontal">
         <Tooltip text="View release notes" direction="n">
           <Button
diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx
index b0398894d..156307436 100644
--- a/src/renderer/components/settings/SystemSettings.tsx
+++ b/src/renderer/components/settings/SystemSettings.tsx
@@ -9,14 +9,14 @@ import { OpenPreference } from '../../types';
 import { Constants } from '../../utils/constants';
 import { Checkbox } from '../fields/Checkbox';
 import { RadioGroup } from '../fields/RadioGroup';
-import { Legend } from '../primitives/Legend';
+import { Title } from '../primitives/Title';
 
 export const SystemSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
 
   return (
     <fieldset>
-      <Legend icon={DeviceDesktopIcon}>System</Legend>
+      <Title icon={DeviceDesktopIcon}>System</Title>
       <RadioGroup
         name="openLinks"
         label="Open Links:"
diff --git a/src/renderer/context/App.tsx b/src/renderer/context/App.tsx
index 952f4656c..83fe05636 100644
--- a/src/renderer/context/App.tsx
+++ b/src/renderer/context/App.tsx
@@ -145,10 +145,10 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
   useEffect(() => {
     const mode = getColorModeFromTheme(settings.theme);
-
     setColorMode(mode);
+
     setTheme(settings.theme); // TODO - Replace fully with Primer design tokens and components
-  }, [settings.theme]);
+  }, [settings.theme, setColorMode]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want fetchNotifications to be called for account changes
   useEffect(() => {
diff --git a/src/renderer/routes/Accounts.tsx b/src/renderer/routes/Accounts.tsx
index 06cb2b100..0bbaca183 100644
--- a/src/renderer/routes/Accounts.tsx
+++ b/src/renderer/routes/Accounts.tsx
@@ -88,7 +88,7 @@ export const AccountsRoute: FC = () => {
             return (
               <div
                 key={getAccountUUID(account)}
-                className="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gitify-sidebar"
+                className="rounded-md p-2 pb-0 bg-gitify-accounts"
               >
                 <Stack
                   direction="horizontal"
diff --git a/src/renderer/routes/Filters.tsx b/src/renderer/routes/Filters.tsx
index bfa25f37a..c6c03b3f1 100644
--- a/src/renderer/routes/Filters.tsx
+++ b/src/renderer/routes/Filters.tsx
@@ -9,11 +9,11 @@ import {
 import { Button, Tooltip } from '@primer/react';
 
 import { Checkbox } from '../components/fields/Checkbox';
-import { Contents } from '../components/primitives/Contents';
+import { Contents } from '../components/layout/Contents';
+import { Page } from '../components/layout/Page';
 import { Footer } from '../components/primitives/Footer';
 import { Header } from '../components/primitives/Header';
-import { Legend } from '../components/primitives/Legend';
-import { Page } from '../components/primitives/Page';
+import { Title } from '../components/primitives/Title';
 import { AppContext } from '../context/App';
 import type { Reason } from '../typesGitHub';
 import { FORMATTED_REASONS, formatReason } from '../utils/reason';
@@ -45,7 +45,7 @@ export const FiltersRoute: FC = () => {
 
       <Contents>
         <fieldset className="mb-3">
-          <Legend icon={FeedPersonIcon}>Users</Legend>
+          <Title icon={FeedPersonIcon}>Users</Title>
           <Checkbox
             name="hideBots"
             label="Hide notifications from Bot accounts"
@@ -71,7 +71,7 @@ export const FiltersRoute: FC = () => {
         </fieldset>
 
         <fieldset className="mb-3">
-          <Legend icon={NoteIcon}>Reason</Legend>
+          <Title icon={NoteIcon}>Reason</Title>
           <span className="text-xs italic">
             Note: If no reasons are selected, all notifications will be shown.
           </span>
@@ -92,7 +92,7 @@ export const FiltersRoute: FC = () => {
         </fieldset>
       </Contents>
 
-      <Footer justify="justify-end">
+      <Footer justify="end">
         <Tooltip text="Clear all filters" direction="n">
           <Button
             leadingVisual={FilterRemoveIcon}
diff --git a/src/renderer/routes/Login.tsx b/src/renderer/routes/Login.tsx
index 8d66f427b..489518cba 100644
--- a/src/renderer/routes/Login.tsx
+++ b/src/renderer/routes/Login.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { logError } from '../../shared/logger';
 import { LogoIcon } from '../components/icons/LogoIcon';
-import { Centered } from '../components/primitives/Centered';
+import { Centered } from '../components/layout/Centered';
 import { AppContext } from '../context/App';
 import { Size } from '../types';
 import { showWindow } from '../utils/comms';
@@ -30,7 +30,7 @@ export const LoginRoute: FC = () => {
   }, [loginWithGitHubApp]);
 
   return (
-    <Centered>
+    <Centered fullHeight={true}>
       <Stack direction="vertical" align="center">
         <LogoIcon size={Size.LARGE} isDark />
 
diff --git a/src/renderer/routes/LoginWithOAuthApp.tsx b/src/renderer/routes/LoginWithOAuthApp.tsx
index 8a9cd277f..3275a6f90 100644
--- a/src/renderer/routes/LoginWithOAuthApp.tsx
+++ b/src/renderer/routes/LoginWithOAuthApp.tsx
@@ -7,6 +7,7 @@ import { Button, Stack, Text, Tooltip } from '@primer/react';
 
 import { logError } from '../../shared/logger';
 import { FieldInput } from '../components/fields/FieldInput';
+import { Page } from '../components/layout/Page';
 import { Header } from '../components/primitives/Header';
 import { AppContext } from '../context/App';
 import type { ClientID, ClientSecret, Hostname, Token } from '../types';
@@ -65,67 +66,75 @@ export const LoginWithOAuthAppRoute: FC = () => {
     const { handleSubmit, submitting, pristine, values } = formProps;
 
     return (
-      <form onSubmit={handleSubmit}>
-        <FieldInput
-          name="hostname"
-          label="Hostname"
-          placeholder="github.company.com"
-          helpText={
-            <Stack direction="vertical" gap="condensed">
-              <Stack direction="horizontal" align="center" gap="condensed">
-                <Button
-                  size="small"
-                  leadingVisual={PersonIcon}
-                  disabled={!values.hostname}
-                  onClick={() =>
-                    openExternalLink(getNewOAuthAppURL(values.hostname))
-                  }
-                  data-testid="login-create-oauth-app"
-                >
-                  Create new OAuth App
-                </Button>
-                <Text>on GitHub then paste your</Text>
+      <Page id="Login With OAuth App">
+        <form onSubmit={handleSubmit}>
+          <FieldInput
+            name="hostname"
+            label="Hostname"
+            placeholder="github.company.com"
+            helpText={
+              <Stack direction="vertical" gap="condensed">
+                <Stack direction="horizontal" align="center" gap="condensed">
+                  <Button
+                    size="small"
+                    leadingVisual={PersonIcon}
+                    disabled={!values.hostname}
+                    onClick={() =>
+                      openExternalLink(getNewOAuthAppURL(values.hostname))
+                    }
+                    data-testid="login-create-oauth-app"
+                  >
+                    Create new OAuth App
+                  </Button>
+                  <Text>on GitHub then paste your</Text>
+                </Stack>
+                <Text>
+                  <Text as="i">client id and client secret</Text> below.
+                </Text>
               </Stack>
-              <Text>
-                <Text as="i">client id and client secret</Text> below.
-              </Text>
-            </Stack>
-          }
-        />
-
-        <FieldInput name="clientId" label="Client ID" placeholder="123456789" />
-
-        <FieldInput
-          name="clientSecret"
-          label="Client Secret"
-          placeholder="ABC123DEF456"
-        />
-
-        <Stack direction="horizontal" justify="space-between" align="center">
-          <Tooltip text="GitHub documentation">
-            <Button
-              size="small"
-              leadingVisual={BookIcon}
-              onClick={() => openExternalLink(Constants.GITHUB_DOCS.OAUTH_URL)}
-              data-testid="login-docs"
-            >
-              Docs
-            </Button>
-          </Tooltip>
-
-          <Tooltip text="Login">
-            <Button
-              variant="primary"
-              leadingVisual={SignInIcon}
-              disabled={submitting || pristine}
-              type="submit"
-              data-testid="login-submit"
-            >
-              Login
-            </Button>
-          </Tooltip>
-        </Stack>
-      </form>
+            }
+          />
+
+          <FieldInput
+            name="clientId"
+            label="Client ID"
+            placeholder="123456789"
+          />
+
+          <FieldInput
+            name="clientSecret"
+            label="Client Secret"
+            placeholder="ABC123DEF456"
+          />
+
+          <Stack direction="horizontal" justify="space-between" align="center">
+            <Tooltip text="GitHub documentation">
+              <Button
+                size="small"
+                leadingVisual={BookIcon}
+                onClick={() =>
+                  openExternalLink(Constants.GITHUB_DOCS.OAUTH_URL)
+                }
+                data-testid="login-docs"
+              >
+                Docs
+              </Button>
+            </Tooltip>
+
+            <Tooltip text="Login">
+              <Button
+                variant="primary"
+                leadingVisual={SignInIcon}
+                disabled={submitting || pristine}
+                type="submit"
+                data-testid="login-submit"
+              >
+                Login
+              </Button>
+            </Tooltip>
+          </Stack>
+        </form>
+      </Page>
     );
   };
 
diff --git a/src/renderer/routes/LoginWithPersonalAccessToken.tsx b/src/renderer/routes/LoginWithPersonalAccessToken.tsx
index af8f0bd7e..6a7a8ac9e 100644
--- a/src/renderer/routes/LoginWithPersonalAccessToken.tsx
+++ b/src/renderer/routes/LoginWithPersonalAccessToken.tsx
@@ -7,6 +7,7 @@ import { Button, Stack, Text, Tooltip } from '@primer/react';
 
 import { logError } from '../../shared/logger';
 import { FieldInput } from '../components/fields/FieldInput';
+import { Page } from '../components/layout/Page';
 import { Header } from '../components/primitives/Header';
 import { AppContext } from '../context/App';
 import type { Hostname, Token } from '../types';
@@ -56,71 +57,73 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
     const { handleSubmit, submitting, pristine, values } = formProps;
 
     return (
-      <form onSubmit={handleSubmit}>
-        <FieldInput
-          name="hostname"
-          label="Hostname"
-          placeholder="github.company.com"
-          helpText={
-            <Stack direction="vertical" gap="condensed">
-              <Text as="i">
-                Change only if you are using GitHub Enterprise Server.
-              </Text>
-              <Stack direction="horizontal" align="center" gap="condensed">
-                <Button
-                  size="small"
-                  leadingVisual={KeyIcon}
-                  disabled={!values.hostname}
-                  onClick={() =>
-                    openExternalLink(getNewTokenURL(values.hostname))
-                  }
-                  data-testid="login-create-token"
-                >
-                  Generate a PAT
-                </Button>
-                <Text>on GitHub then paste your token below.</Text>
+      <Page id="Login With Personal Access Token">
+        <form onSubmit={handleSubmit}>
+          <FieldInput
+            name="hostname"
+            label="Hostname"
+            placeholder="github.company.com"
+            helpText={
+              <Stack direction="vertical" gap="condensed">
+                <Text as="i">
+                  Change only if you are using GitHub Enterprise Server.
+                </Text>
+                <Stack direction="horizontal" align="center" gap="condensed">
+                  <Button
+                    size="small"
+                    leadingVisual={KeyIcon}
+                    disabled={!values.hostname}
+                    onClick={() =>
+                      openExternalLink(getNewTokenURL(values.hostname))
+                    }
+                    data-testid="login-create-token"
+                  >
+                    Generate a PAT
+                  </Button>
+                  <Text>on GitHub then paste your token below.</Text>
+                </Stack>
+                <Text as="i">
+                  The required scopes will be automatically selected for you.
+                </Text>
               </Stack>
-              <Text as="i">
-                The required scopes will be automatically selected for you.
-              </Text>
-            </Stack>
-          }
-        />
-        <FieldInput
-          name="token"
-          label="Token"
-          placeholder="The 40 characters token generated on GitHub"
-        />
-        {!isValidToken && (
-          <div className="my-4 text-sm font-medium text-gitify-error">
-            This token could not be validated with {values.hostname}.
-          </div>
-        )}
-        <Stack direction="horizontal" justify="space-between" align="center">
-          <Tooltip text="GitHub documentation">
-            <Button
-              size="small"
-              leadingVisual={BookIcon}
-              onClick={() => openExternalLink(Constants.GITHUB_DOCS.PAT_URL)}
-              data-testid="login-docs"
-            >
-              Docs
-            </Button>
-          </Tooltip>
+            }
+          />
+          <FieldInput
+            name="token"
+            label="Token"
+            placeholder="The 40 characters token generated on GitHub"
+          />
+          {!isValidToken && (
+            <div className="my-4 text-sm font-medium text-gitify-error">
+              This token could not be validated with {values.hostname}.
+            </div>
+          )}
+          <Stack direction="horizontal" justify="space-between" align="center">
+            <Tooltip text="GitHub documentation">
+              <Button
+                size="small"
+                leadingVisual={BookIcon}
+                onClick={() => openExternalLink(Constants.GITHUB_DOCS.PAT_URL)}
+                data-testid="login-docs"
+              >
+                Docs
+              </Button>
+            </Tooltip>
 
-          <Tooltip text="Login">
-            <Button
-              variant="primary"
-              leadingVisual={SignInIcon}
-              disabled={submitting || pristine}
-              type="submit"
-              data-testid="login-submit"
-            >
-              Login
-            </Button>
-          </Tooltip>
-        </Stack>
-      </form>
+            <Tooltip text="Login">
+              <Button
+                variant="primary"
+                leadingVisual={SignInIcon}
+                disabled={submitting || pristine}
+                type="submit"
+                data-testid="login-submit"
+              >
+                Login
+              </Button>
+            </Tooltip>
+          </Stack>
+        </form>
+      </Page>
     );
   };
 
diff --git a/src/renderer/routes/Settings.tsx b/src/renderer/routes/Settings.tsx
index ec75d7635..d88485f03 100644
--- a/src/renderer/routes/Settings.tsx
+++ b/src/renderer/routes/Settings.tsx
@@ -4,9 +4,9 @@ import { GearIcon } from '@primer/octicons-react';
 import { Button, Stack } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
 
-import { Contents } from '../components/primitives/Contents';
+import { Contents } from '../components/layout/Contents';
+import { Page } from '../components/layout/Page';
 import { Header } from '../components/primitives/Header';
-import { Page } from '../components/primitives/Page';
 import { AppearanceSettings } from '../components/settings/AppearanceSettings';
 import { NotificationSettings } from '../components/settings/NotificationSettings';
 import { SettingsFooter } from '../components/settings/SettingsFooter';
@@ -34,7 +34,8 @@ export const SettingsRoute: FC = () => {
           <NotificationSettings />
           <SystemSettings />
         </Stack>
-        <Stack align="center" padding={'spacious'}>
+
+        <Stack align="center" padding="spacious">
           <Button
             variant="danger"
             onClick={() => setIsOpen(!isOpen)}
diff --git a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
index bf5455ab6..f0db08b01 100644
--- a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
@@ -6,44 +6,42 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
   data-testid="accounts"
 >
   <div
-    class="mx-6 mt-2 py-2"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+    data-align="stretch"
+    data-direction="horizontal"
+    data-justify="space-between"
+    data-padding="spacious"
+    data-wrap="nowrap"
   >
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-      data-align="stretch"
-      data-direction="horizontal"
-      data-justify="space-between"
-      data-padding="none"
-      data-wrap="nowrap"
+    <button
+      aria-describedby=":r2s:-loading-announcement"
+      aria-labelledby="Go Back"
+      class="types__StyledButton-sc-ws60qy-0 kQRupk"
+      data-component="IconButton"
+      data-loading="false"
+      data-no-visuals="true"
+      data-testid="header-nav-back"
+      sx="[object Object]"
+      type="button"
     >
-      <button
-        aria-describedby=":r2s:-loading-announcement"
-        aria-labelledby="Go Back"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-component="IconButton"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="header-nav-back"
-        sx="[object Object]"
-        type="button"
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-arrow-left"
+        display="inline-block"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-arrow-left"
-          display="inline-block"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          overflow="visible"
-          style="vertical-align: text-bottom;"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-          />
-        </svg>
-      </button>
+        <path
+          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+        />
+      </svg>
+    </button>
+    <legend>
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
@@ -52,6 +50,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
         data-justify="start"
         data-padding="none"
         data-wrap="nowrap"
+        id="accounts"
       >
         <svg
           aria-hidden="true"
@@ -59,11 +58,11 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
           display="inline-block"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           overflow="visible"
           style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
@@ -76,7 +75,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
           Accounts
         </h2>
       </div>
-    </div>
+    </legend>
   </div>
   <div
     class="flex-grow overflow-x-auto px-8"
@@ -85,7 +84,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
       class="mt-4 flex flex-col"
     >
       <div
-        class="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gitify-sidebar"
+        class="rounded-md p-2 pb-0 bg-gitify-accounts"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -449,7 +448,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
         </div>
       </div>
       <div
-        class="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gitify-sidebar"
+        class="rounded-md p-2 pb-0 bg-gitify-accounts"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -813,7 +812,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
         </div>
       </div>
       <div
-        class="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gitify-sidebar"
+        class="rounded-md p-2 pb-0 bg-gitify-accounts"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1237,44 +1236,42 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
   data-testid="accounts"
 >
   <div
-    class="mx-6 mt-2 py-2"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+    data-align="stretch"
+    data-direction="horizontal"
+    data-justify="space-between"
+    data-padding="spacious"
+    data-wrap="nowrap"
   >
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-      data-align="stretch"
-      data-direction="horizontal"
-      data-justify="space-between"
-      data-padding="none"
-      data-wrap="nowrap"
+    <button
+      aria-describedby=":r3r:-loading-announcement"
+      aria-labelledby="Go Back"
+      class="types__StyledButton-sc-ws60qy-0 kQRupk"
+      data-component="IconButton"
+      data-loading="false"
+      data-no-visuals="true"
+      data-testid="header-nav-back"
+      sx="[object Object]"
+      type="button"
     >
-      <button
-        aria-describedby=":r3r:-loading-announcement"
-        aria-labelledby="Go Back"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-component="IconButton"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="header-nav-back"
-        sx="[object Object]"
-        type="button"
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-arrow-left"
+        display="inline-block"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-arrow-left"
-          display="inline-block"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          overflow="visible"
-          style="vertical-align: text-bottom;"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-          />
-        </svg>
-      </button>
+        <path
+          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+        />
+      </svg>
+    </button>
+    <legend>
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
@@ -1283,6 +1280,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
         data-justify="start"
         data-padding="none"
         data-wrap="nowrap"
+        id="accounts"
       >
         <svg
           aria-hidden="true"
@@ -1290,11 +1288,11 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
           display="inline-block"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           overflow="visible"
           style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
@@ -1307,7 +1305,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
           Accounts
         </h2>
       </div>
-    </div>
+    </legend>
   </div>
   <div
     class="flex-grow overflow-x-auto px-8"
@@ -1316,7 +1314,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
       class="mt-4 flex flex-col"
     >
       <div
-        class="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gitify-sidebar"
+        class="rounded-md p-2 pb-0 bg-gitify-accounts"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1680,7 +1678,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
         </div>
       </div>
       <div
-        class="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gitify-sidebar"
+        class="rounded-md p-2 pb-0 bg-gitify-accounts"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -2044,7 +2042,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
         </div>
       </div>
       <div
-        class="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gitify-sidebar"
+        class="rounded-md p-2 pb-0 bg-gitify-accounts"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -2468,44 +2466,42 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
   data-testid="accounts"
 >
   <div
-    class="mx-6 mt-2 py-2"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+    data-align="stretch"
+    data-direction="horizontal"
+    data-justify="space-between"
+    data-padding="spacious"
+    data-wrap="nowrap"
   >
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-      data-align="stretch"
-      data-direction="horizontal"
-      data-justify="space-between"
-      data-padding="none"
-      data-wrap="nowrap"
+    <button
+      aria-describedby=":r0:-loading-announcement"
+      aria-labelledby="Go Back"
+      class="types__StyledButton-sc-ws60qy-0 kQRupk"
+      data-component="IconButton"
+      data-loading="false"
+      data-no-visuals="true"
+      data-testid="header-nav-back"
+      sx="[object Object]"
+      type="button"
     >
-      <button
-        aria-describedby=":r0:-loading-announcement"
-        aria-labelledby="Go Back"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-component="IconButton"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="header-nav-back"
-        sx="[object Object]"
-        type="button"
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-arrow-left"
+        display="inline-block"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-arrow-left"
-          display="inline-block"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          overflow="visible"
-          style="vertical-align: text-bottom;"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-          />
-        </svg>
-      </button>
+        <path
+          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+        />
+      </svg>
+    </button>
+    <legend>
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
@@ -2514,6 +2510,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         data-justify="start"
         data-padding="none"
         data-wrap="nowrap"
+        id="accounts"
       >
         <svg
           aria-hidden="true"
@@ -2521,11 +2518,11 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           display="inline-block"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           overflow="visible"
           style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
@@ -2538,7 +2535,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           Accounts
         </h2>
       </div>
-    </div>
+    </legend>
   </div>
   <div
     class="flex-grow overflow-x-auto px-8"
@@ -2547,7 +2544,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
       class="mt-4 flex flex-col"
     >
       <div
-        class="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gitify-sidebar"
+        class="rounded-md p-2 pb-0 bg-gitify-accounts"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -2911,7 +2908,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         </div>
       </div>
       <div
-        class="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gitify-sidebar"
+        class="rounded-md p-2 pb-0 bg-gitify-accounts"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -3275,7 +3272,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         </div>
       </div>
       <div
-        class="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gitify-sidebar"
+        class="rounded-md p-2 pb-0 bg-gitify-accounts"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
index 118d4c709..cdfd937b6 100644
--- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
@@ -2,48 +2,46 @@
 
 exports[`renderer/routes/Filters.tsx General should render itself & its children 1`] = `
 <div
-  class="flex h-screen flex-col"
+  class="flex flex-col h-screen"
   data-testid="filters"
 >
   <div
-    class="mx-6 mt-2 py-2"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+    data-align="stretch"
+    data-direction="horizontal"
+    data-justify="space-between"
+    data-padding="spacious"
+    data-wrap="nowrap"
   >
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-      data-align="stretch"
-      data-direction="horizontal"
-      data-justify="space-between"
-      data-padding="none"
-      data-wrap="nowrap"
+    <button
+      aria-describedby=":r0:-loading-announcement"
+      aria-labelledby="Go Back"
+      class="types__StyledButton-sc-ws60qy-0 kQRupk"
+      data-component="IconButton"
+      data-loading="false"
+      data-no-visuals="true"
+      data-testid="header-nav-back"
+      sx="[object Object]"
+      type="button"
     >
-      <button
-        aria-describedby=":r0:-loading-announcement"
-        aria-labelledby="Go Back"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-component="IconButton"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="header-nav-back"
-        sx="[object Object]"
-        type="button"
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-arrow-left"
+        display="inline-block"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-arrow-left"
-          display="inline-block"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          overflow="visible"
-          style="vertical-align: text-bottom;"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-          />
-        </svg>
-      </button>
+        <path
+          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+        />
+      </svg>
+    </button>
+    <legend>
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
@@ -52,6 +50,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         data-justify="start"
         data-padding="none"
         data-wrap="nowrap"
+        id="filters"
       >
         <svg
           aria-hidden="true"
@@ -59,11 +58,11 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
           display="inline-block"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           overflow="visible"
           style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M.75 3h14.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5ZM3 7.75A.75.75 0 0 1 3.75 7h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 7.75Zm3 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
@@ -76,7 +75,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
           Filters
         </h2>
       </div>
-    </div>
+    </legend>
   </div>
   <div
     class="flex-grow overflow-x-auto px-8 pb-4"
@@ -84,27 +83,40 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
     <fieldset
       class="mb-3"
     >
-      <legend
-        class="mb-1 mt-2 font-semibold flex items-center"
-        id="users"
-      >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-feed-person mr-2"
-          display="inline-block"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          overflow="visible"
-          style="vertical-align: text-bottom;"
-          viewBox="0 0 16 16"
-          width="16"
+      <legend>
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+          id="users"
         >
-          <path
-            d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-          />
-        </svg>
-        Users
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-feed-person"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+            />
+          </svg>
+          <h2
+            class="Heading__StyledHeading-sc-1c1dgg0-0 lfvrLU"
+            sx="[object Object]"
+          >
+            Users
+          </h2>
+        </div>
       </legend>
       <div
         class="mt-3 mb-2 text-sm"
@@ -155,27 +167,40 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
     <fieldset
       class="mb-3"
     >
-      <legend
-        class="mb-1 mt-2 font-semibold flex items-center"
-        id="reason"
-      >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-note mr-2"
-          display="inline-block"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          overflow="visible"
-          style="vertical-align: text-bottom;"
-          viewBox="0 0 16 16"
-          width="16"
+      <legend>
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+          id="reason"
         >
-          <path
-            d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25ZM3.5 6.25a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Zm.75 2.25h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1 0-1.5Z"
-          />
-        </svg>
-        Reason
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-note"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25ZM3.5 6.25a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Zm.75 2.25h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1 0-1.5Z"
+            />
+          </svg>
+          <h2
+            class="Heading__StyledHeading-sc-1c1dgg0-0 lfvrLU"
+            sx="[object Object]"
+          >
+            Reason
+          </h2>
+        </div>
       </legend>
       <span
         class="text-xs italic"
@@ -860,7 +885,12 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
     </fieldset>
   </div>
   <div
-    class="flex items-center px-3 py-1 text-sm bg-gitify-footer justify-end"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
+    data-align="stretch"
+    data-direction="horizontal"
+    data-justify="end"
+    data-padding="condensed"
+    data-wrap="nowrap"
   >
     <span
       aria-label="Clear all filters"
diff --git a/src/renderer/routes/__snapshots__/Login.test.tsx.snap b/src/renderer/routes/__snapshots__/Login.test.tsx.snap
index 764b97d2e..1bdd29b5d 100644
--- a/src/renderer/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Login.test.tsx.snap
@@ -6,7 +6,12 @@ exports[`renderer/routes/Login.tsx should render itself & its children 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+        data-align="center"
+        data-direction="vertical"
+        data-justify="center"
+        data-padding="spacious"
+        data-wrap="nowrap"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -229,7 +234,12 @@ exports[`renderer/routes/Login.tsx should render itself & its children 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col items-center justify-center p-8 min-h-screen"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY min-h-screen"
+      data-align="center"
+      data-direction="vertical"
+      data-justify="center"
+      data-padding="spacious"
+      data-wrap="nowrap"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
diff --git a/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index b3875d1c4..2c1313a5f 100644
--- a/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -7,44 +7,42 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
     <div>
       <div>
         <div
-          class="mx-6 mt-2 py-2"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-justify="space-between"
+          data-padding="spacious"
+          data-wrap="nowrap"
         >
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="stretch"
-            data-direction="horizontal"
-            data-justify="space-between"
-            data-padding="none"
-            data-wrap="nowrap"
+          <button
+            aria-describedby=":r0:-loading-announcement"
+            aria-labelledby="Go Back"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="header-nav-back"
+            sx="[object Object]"
+            type="button"
           >
-            <button
-              aria-describedby=":r0:-loading-announcement"
-              aria-labelledby="Go Back"
-              class="types__StyledButton-sc-ws60qy-0 kQRupk"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-testid="header-nav-back"
-              sx="[object Object]"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-arrow-left"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-arrow-left"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-                />
-              </svg>
-            </button>
+              <path
+                d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+              />
+            </svg>
+          </button>
+          <legend>
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
               data-align="center"
@@ -53,6 +51,7 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
+              id="login-with oauth app"
             >
               <svg
                 aria-hidden="true"
@@ -60,11 +59,11 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
-                height="18"
+                height="16"
                 overflow="visible"
                 style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
-                width="18"
+                width="16"
               >
                 <path
                   d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
@@ -77,10 +76,348 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 Login with OAuth App
               </h2>
             </div>
-          </div>
+          </legend>
         </div>
         <div
           class="px-8"
+        >
+          <div
+            class="flex flex-col h-screen"
+            data-testid="Login With OAuth App"
+          >
+            <form>
+              <div
+                class="mb-4"
+              >
+                <label
+                  class="mb-2 block text-sm font-semibold tracking-wide"
+                  for="hostname"
+                >
+                  Hostname
+                </label>
+                <input
+                  class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-red-500"
+                  id="hostname"
+                  name="hostname"
+                  placeholder="github.company.com"
+                  type="text"
+                  value=""
+                />
+                <div
+                  class="mt-3 text-xs text-gitify-font"
+                >
+                  <div
+                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                    data-align="stretch"
+                    data-direction="vertical"
+                    data-gap="condensed"
+                    data-justify="start"
+                    data-padding="none"
+                    data-wrap="nowrap"
+                  >
+                    <div
+                      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                      data-align="center"
+                      data-direction="horizontal"
+                      data-gap="condensed"
+                      data-justify="start"
+                      data-padding="none"
+                      data-wrap="nowrap"
+                    >
+                      <button
+                        aria-describedby=":r1:-loading-announcement"
+                        class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                        data-loading="false"
+                        data-size="small"
+                        data-testid="login-create-oauth-app"
+                        disabled=""
+                        sx="[object Object]"
+                        type="button"
+                      >
+                        <span
+                          class="Box-sc-g0xbh4-0 srpGE"
+                          data-component="buttonContent"
+                          sx="[object Object]"
+                        >
+                          <span
+                            class="Box-sc-g0xbh4-0 mhHOW"
+                            data-component="leadingVisual"
+                            sx="[object Object]"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="octicon octicon-person"
+                              display="inline-block"
+                              fill="currentColor"
+                              focusable="false"
+                              height="16"
+                              overflow="visible"
+                              style="vertical-align: text-bottom;"
+                              viewBox="0 0 16 16"
+                              width="16"
+                            >
+                              <path
+                                d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+                              />
+                            </svg>
+                          </span>
+                          <span
+                            data-component="text"
+                          >
+                            Create new OAuth App
+                          </span>
+                        </span>
+                      </button>
+                      <span
+                        class="Text-sc-17v1xeu-0 hmAFGJ"
+                      >
+                        on GitHub then paste your
+                      </span>
+                    </div>
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ"
+                    >
+                      <i
+                        class="Text-sc-17v1xeu-0 hmAFGJ"
+                      >
+                        client id and client secret
+                      </i>
+                       below.
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="mb-4"
+              >
+                <label
+                  class="mb-2 block text-sm font-semibold tracking-wide"
+                  for="clientId"
+                >
+                  Client ID
+                </label>
+                <input
+                  class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-red-500"
+                  id="clientId"
+                  name="clientId"
+                  placeholder="123456789"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <div
+                class="mb-4"
+              >
+                <label
+                  class="mb-2 block text-sm font-semibold tracking-wide"
+                  for="clientSecret"
+                >
+                  Client Secret
+                </label>
+                <input
+                  class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-red-500"
+                  id="clientSecret"
+                  name="clientSecret"
+                  placeholder="ABC123DEF456"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="center"
+                data-direction="horizontal"
+                data-justify="space-between"
+                data-padding="none"
+                data-wrap="nowrap"
+              >
+                <span
+                  aria-label="GitHub documentation"
+                  class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
+                  id=":r2:"
+                  role="tooltip"
+                >
+                  <button
+                    aria-describedby=":r3:-loading-announcement"
+                    class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                    data-loading="false"
+                    data-size="small"
+                    data-testid="login-docs"
+                    sx="[object Object]"
+                    type="button"
+                  >
+                    <span
+                      class="Box-sc-g0xbh4-0 srpGE"
+                      data-component="buttonContent"
+                      sx="[object Object]"
+                    >
+                      <span
+                        class="Box-sc-g0xbh4-0 mhHOW"
+                        data-component="leadingVisual"
+                        sx="[object Object]"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="octicon octicon-book"
+                          display="inline-block"
+                          fill="currentColor"
+                          focusable="false"
+                          height="16"
+                          overflow="visible"
+                          style="vertical-align: text-bottom;"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        data-component="text"
+                      >
+                        Docs
+                      </span>
+                    </span>
+                  </button>
+                </span>
+                <span
+                  aria-label="Login"
+                  class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
+                  id=":r4:"
+                  role="tooltip"
+                >
+                  <button
+                    aria-describedby=":r5:-loading-announcement"
+                    class="types__StyledButton-sc-ws60qy-0 gEWhIh"
+                    data-loading="false"
+                    data-testid="login-submit"
+                    disabled=""
+                    sx="[object Object]"
+                    type="submit"
+                  >
+                    <span
+                      class="Box-sc-g0xbh4-0 srpGE"
+                      data-component="buttonContent"
+                      sx="[object Object]"
+                    >
+                      <span
+                        class="Box-sc-g0xbh4-0 mhHOW"
+                        data-component="leadingVisual"
+                        sx="[object Object]"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="octicon octicon-sign-in"
+                          display="inline-block"
+                          fill="currentColor"
+                          focusable="false"
+                          height="16"
+                          overflow="visible"
+                          style="vertical-align: text-bottom;"
+                          viewBox="0 0 16 16"
+                          width="16"
+                        >
+                          <path
+                            d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        data-component="text"
+                      >
+                        Login
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-justify="space-between"
+        data-padding="spacious"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r0:-loading-announcement"
+          aria-labelledby="Go Back"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-testid="header-nav-back"
+          sx="[object Object]"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-arrow-left"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+            />
+          </svg>
+        </button>
+        <legend>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+            id="login-with oauth app"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-person"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+              />
+            </svg>
+            <h2
+              class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+              sx="[object Object]"
+            >
+              Login with OAuth App
+            </h2>
+          </div>
+        </legend>
+      </div>
+      <div
+        class="px-8"
+      >
+        <div
+          class="flex flex-col h-screen"
+          data-testid="Login With OAuth App"
         >
           <form>
             <div
@@ -93,7 +430,7 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 Hostname
               </label>
               <input
-                class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-red-500"
+                class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-red-500"
                 id="hostname"
                 name="hostname"
                 placeholder="github.company.com"
@@ -194,7 +531,7 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 Client ID
               </label>
               <input
-                class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-red-500"
+                class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-red-500"
                 id="clientId"
                 name="clientId"
                 placeholder="123456789"
@@ -212,7 +549,7 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 Client Secret
               </label>
               <input
-                class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-red-500"
+                class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-red-500"
                 id="clientSecret"
                 name="clientSecret"
                 placeholder="ABC123DEF456"
@@ -333,335 +670,6 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
         </div>
       </div>
     </div>
-  </body>,
-  "container": <div>
-    <div>
-      <div
-        class="mx-6 mt-2 py-2"
-      >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
-          data-direction="horizontal"
-          data-justify="space-between"
-          data-padding="none"
-          data-wrap="nowrap"
-        >
-          <button
-            aria-describedby=":r0:-loading-announcement"
-            aria-labelledby="Go Back"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-testid="header-nav-back"
-            sx="[object Object]"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-arrow-left"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-              />
-            </svg>
-          </button>
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-person"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="18"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="18"
-            >
-              <path
-                d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
-              />
-            </svg>
-            <h2
-              class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-              sx="[object Object]"
-            >
-              Login with OAuth App
-            </h2>
-          </div>
-        </div>
-      </div>
-      <div
-        class="px-8"
-      >
-        <form>
-          <div
-            class="mb-4"
-          >
-            <label
-              class="mb-2 block text-sm font-semibold tracking-wide"
-              for="hostname"
-            >
-              Hostname
-            </label>
-            <input
-              class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-red-500"
-              id="hostname"
-              name="hostname"
-              placeholder="github.company.com"
-              type="text"
-              value=""
-            />
-            <div
-              class="mt-3 text-xs text-gitify-font"
-            >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="stretch"
-                data-direction="vertical"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
-              >
-                <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                  data-align="center"
-                  data-direction="horizontal"
-                  data-gap="condensed"
-                  data-justify="start"
-                  data-padding="none"
-                  data-wrap="nowrap"
-                >
-                  <button
-                    aria-describedby=":r1:-loading-announcement"
-                    class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-                    data-loading="false"
-                    data-size="small"
-                    data-testid="login-create-oauth-app"
-                    disabled=""
-                    sx="[object Object]"
-                    type="button"
-                  >
-                    <span
-                      class="Box-sc-g0xbh4-0 srpGE"
-                      data-component="buttonContent"
-                      sx="[object Object]"
-                    >
-                      <span
-                        class="Box-sc-g0xbh4-0 mhHOW"
-                        data-component="leadingVisual"
-                        sx="[object Object]"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="octicon octicon-person"
-                          display="inline-block"
-                          fill="currentColor"
-                          focusable="false"
-                          height="16"
-                          overflow="visible"
-                          style="vertical-align: text-bottom;"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
-                          />
-                        </svg>
-                      </span>
-                      <span
-                        data-component="text"
-                      >
-                        Create new OAuth App
-                      </span>
-                    </span>
-                  </button>
-                  <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
-                  >
-                    on GitHub then paste your
-                  </span>
-                </div>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  <i
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
-                  >
-                    client id and client secret
-                  </i>
-                   below.
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            class="mb-4"
-          >
-            <label
-              class="mb-2 block text-sm font-semibold tracking-wide"
-              for="clientId"
-            >
-              Client ID
-            </label>
-            <input
-              class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-red-500"
-              id="clientId"
-              name="clientId"
-              placeholder="123456789"
-              type="text"
-              value=""
-            />
-          </div>
-          <div
-            class="mb-4"
-          >
-            <label
-              class="mb-2 block text-sm font-semibold tracking-wide"
-              for="clientSecret"
-            >
-              Client Secret
-            </label>
-            <input
-              class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-red-500"
-              id="clientSecret"
-              name="clientSecret"
-              placeholder="ABC123DEF456"
-              type="text"
-              value=""
-            />
-          </div>
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-justify="space-between"
-            data-padding="none"
-            data-wrap="nowrap"
-          >
-            <span
-              aria-label="GitHub documentation"
-              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-              id=":r2:"
-              role="tooltip"
-            >
-              <button
-                aria-describedby=":r3:-loading-announcement"
-                class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-                data-loading="false"
-                data-size="small"
-                data-testid="login-docs"
-                sx="[object Object]"
-                type="button"
-              >
-                <span
-                  class="Box-sc-g0xbh4-0 srpGE"
-                  data-component="buttonContent"
-                  sx="[object Object]"
-                >
-                  <span
-                    class="Box-sc-g0xbh4-0 mhHOW"
-                    data-component="leadingVisual"
-                    sx="[object Object]"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="octicon octicon-book"
-                      display="inline-block"
-                      fill="currentColor"
-                      focusable="false"
-                      height="16"
-                      overflow="visible"
-                      style="vertical-align: text-bottom;"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <path
-                        d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    data-component="text"
-                  >
-                    Docs
-                  </span>
-                </span>
-              </button>
-            </span>
-            <span
-              aria-label="Login"
-              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-              id=":r4:"
-              role="tooltip"
-            >
-              <button
-                aria-describedby=":r5:-loading-announcement"
-                class="types__StyledButton-sc-ws60qy-0 gEWhIh"
-                data-loading="false"
-                data-testid="login-submit"
-                disabled=""
-                sx="[object Object]"
-                type="submit"
-              >
-                <span
-                  class="Box-sc-g0xbh4-0 srpGE"
-                  data-component="buttonContent"
-                  sx="[object Object]"
-                >
-                  <span
-                    class="Box-sc-g0xbh4-0 mhHOW"
-                    data-component="leadingVisual"
-                    sx="[object Object]"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="octicon octicon-sign-in"
-                      display="inline-block"
-                      fill="currentColor"
-                      focusable="false"
-                      height="16"
-                      overflow="visible"
-                      style="vertical-align: text-bottom;"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <path
-                        d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    data-component="text"
-                  >
-                    Login
-                  </span>
-                </span>
-              </button>
-            </span>
-          </div>
-        </form>
-      </div>
-    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index 6f9c340fd..88a755a7a 100644
--- a/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -6,44 +6,42 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
   "baseElement": <body>
     <div>
       <div
-        class="mx-6 mt-2 py-2"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-justify="space-between"
+        data-padding="spacious"
+        data-wrap="nowrap"
       >
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
-          data-direction="horizontal"
-          data-justify="space-between"
-          data-padding="none"
-          data-wrap="nowrap"
+        <button
+          aria-describedby=":r0:-loading-announcement"
+          aria-labelledby="Go Back"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-component="IconButton"
+          data-loading="false"
+          data-no-visuals="true"
+          data-testid="header-nav-back"
+          sx="[object Object]"
+          type="button"
         >
-          <button
-            aria-describedby=":r0:-loading-announcement"
-            aria-labelledby="Go Back"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-testid="header-nav-back"
-            sx="[object Object]"
-            type="button"
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-arrow-left"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-arrow-left"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-              />
-            </svg>
-          </button>
+            <path
+              d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+            />
+          </svg>
+        </button>
+        <legend>
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
@@ -52,6 +50,7 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
+            id="login-with personal access token"
           >
             <svg
               aria-hidden="true"
@@ -59,11 +58,11 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
               display="inline-block"
               fill="currentColor"
               focusable="false"
-              height="18"
+              height="16"
               overflow="visible"
               style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
-              width="18"
+              width="16"
             >
               <path
                 d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
@@ -76,10 +75,327 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
               Login with Personal Access Token
             </h2>
           </div>
-        </div>
+        </legend>
       </div>
       <div
         class="px-8"
+      >
+        <div
+          class="flex flex-col h-screen"
+          data-testid="Login With Personal Access Token"
+        >
+          <form>
+            <div
+              class="mb-4"
+            >
+              <label
+                class="mb-2 block text-sm font-semibold tracking-wide"
+                for="hostname"
+              >
+                Hostname
+              </label>
+              <input
+                class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-gray-500"
+                id="hostname"
+                name="hostname"
+                placeholder="github.company.com"
+                type="text"
+                value="github.com"
+              />
+              <div
+                class="mt-3 text-xs text-gitify-font"
+              >
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  data-align="stretch"
+                  data-direction="vertical"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-wrap="nowrap"
+                >
+                  <i
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                  >
+                    Change only if you are using GitHub Enterprise Server.
+                  </i>
+                  <div
+                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                    data-align="center"
+                    data-direction="horizontal"
+                    data-gap="condensed"
+                    data-justify="start"
+                    data-padding="none"
+                    data-wrap="nowrap"
+                  >
+                    <button
+                      aria-describedby=":r1:-loading-announcement"
+                      class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                      data-loading="false"
+                      data-size="small"
+                      data-testid="login-create-token"
+                      sx="[object Object]"
+                      type="button"
+                    >
+                      <span
+                        class="Box-sc-g0xbh4-0 srpGE"
+                        data-component="buttonContent"
+                        sx="[object Object]"
+                      >
+                        <span
+                          class="Box-sc-g0xbh4-0 mhHOW"
+                          data-component="leadingVisual"
+                          sx="[object Object]"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="octicon octicon-key"
+                            display="inline-block"
+                            fill="currentColor"
+                            focusable="false"
+                            height="16"
+                            overflow="visible"
+                            style="vertical-align: text-bottom;"
+                            viewBox="0 0 16 16"
+                            width="16"
+                          >
+                            <path
+                              d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          data-component="text"
+                        >
+                          Generate a PAT
+                        </span>
+                      </span>
+                    </button>
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ"
+                    >
+                      on GitHub then paste your token below.
+                    </span>
+                  </div>
+                  <i
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                  >
+                    The required scopes will be automatically selected for you.
+                  </i>
+                </div>
+              </div>
+            </div>
+            <div
+              class="mb-4"
+            >
+              <label
+                class="mb-2 block text-sm font-semibold tracking-wide"
+                for="token"
+              >
+                Token
+              </label>
+              <input
+                class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-red-500"
+                id="token"
+                name="token"
+                placeholder="The 40 characters token generated on GitHub"
+                type="text"
+                value=""
+              />
+            </div>
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-justify="space-between"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <span
+                aria-label="GitHub documentation"
+                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
+                id=":r2:"
+                role="tooltip"
+              >
+                <button
+                  aria-describedby=":r3:-loading-announcement"
+                  class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                  data-loading="false"
+                  data-size="small"
+                  data-testid="login-docs"
+                  sx="[object Object]"
+                  type="button"
+                >
+                  <span
+                    class="Box-sc-g0xbh4-0 srpGE"
+                    data-component="buttonContent"
+                    sx="[object Object]"
+                  >
+                    <span
+                      class="Box-sc-g0xbh4-0 mhHOW"
+                      data-component="leadingVisual"
+                      sx="[object Object]"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="octicon octicon-book"
+                        display="inline-block"
+                        fill="currentColor"
+                        focusable="false"
+                        height="16"
+                        overflow="visible"
+                        style="vertical-align: text-bottom;"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <path
+                          d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      data-component="text"
+                    >
+                      Docs
+                    </span>
+                  </span>
+                </button>
+              </span>
+              <span
+                aria-label="Login"
+                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
+                id=":r4:"
+                role="tooltip"
+              >
+                <button
+                  aria-describedby=":r5:-loading-announcement"
+                  class="types__StyledButton-sc-ws60qy-0 gEWhIh"
+                  data-loading="false"
+                  data-testid="login-submit"
+                  disabled=""
+                  sx="[object Object]"
+                  type="submit"
+                >
+                  <span
+                    class="Box-sc-g0xbh4-0 srpGE"
+                    data-component="buttonContent"
+                    sx="[object Object]"
+                  >
+                    <span
+                      class="Box-sc-g0xbh4-0 mhHOW"
+                      data-component="leadingVisual"
+                      sx="[object Object]"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="octicon octicon-sign-in"
+                        display="inline-block"
+                        fill="currentColor"
+                        focusable="false"
+                        height="16"
+                        overflow="visible"
+                        style="vertical-align: text-bottom;"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <path
+                          d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      data-component="text"
+                    >
+                      Login
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="space-between"
+      data-padding="spacious"
+      data-wrap="nowrap"
+    >
+      <button
+        aria-describedby=":r0:-loading-announcement"
+        aria-labelledby="Go Back"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-component="IconButton"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="header-nav-back"
+        sx="[object Object]"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="octicon octicon-arrow-left"
+          display="inline-block"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+          />
+        </svg>
+      </button>
+      <legend>
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+          id="login-with personal access token"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-key"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+            />
+          </svg>
+          <h2
+            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+            sx="[object Object]"
+          >
+            Login with Personal Access Token
+          </h2>
+        </div>
+      </legend>
+    </div>
+    <div
+      class="px-8"
+    >
+      <div
+        class="flex flex-col h-screen"
+        data-testid="Login With Personal Access Token"
       >
         <form>
           <div
@@ -92,7 +408,7 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
               Hostname
             </label>
             <input
-              class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-gray-500"
+              class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-gray-500"
               id="hostname"
               name="hostname"
               placeholder="github.company.com"
@@ -192,7 +508,7 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
               Token
             </label>
             <input
-              class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-red-500"
+              class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-none border-red-500"
               id="token"
               name="token"
               placeholder="The 40 characters token generated on GitHub"
@@ -312,314 +628,6 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
         </form>
       </div>
     </div>
-  </body>,
-  "container": <div>
-    <div
-      class="mx-6 mt-2 py-2"
-    >
-      <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-        data-align="stretch"
-        data-direction="horizontal"
-        data-justify="space-between"
-        data-padding="none"
-        data-wrap="nowrap"
-      >
-        <button
-          aria-describedby=":r0:-loading-announcement"
-          aria-labelledby="Go Back"
-          class="types__StyledButton-sc-ws60qy-0 kQRupk"
-          data-component="IconButton"
-          data-loading="false"
-          data-no-visuals="true"
-          data-testid="header-nav-back"
-          sx="[object Object]"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-arrow-left"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-            />
-          </svg>
-        </button>
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
-        >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-key"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="18"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="18"
-          >
-            <path
-              d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-            />
-          </svg>
-          <h2
-            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-            sx="[object Object]"
-          >
-            Login with Personal Access Token
-          </h2>
-        </div>
-      </div>
-    </div>
-    <div
-      class="px-8"
-    >
-      <form>
-        <div
-          class="mb-4"
-        >
-          <label
-            class="mb-2 block text-sm font-semibold tracking-wide"
-            for="hostname"
-          >
-            Hostname
-          </label>
-          <input
-            class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-gray-500"
-            id="hostname"
-            name="hostname"
-            placeholder="github.company.com"
-            type="text"
-            value="github.com"
-          />
-          <div
-            class="mt-3 text-xs text-gitify-font"
-          >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="stretch"
-              data-direction="vertical"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
-            >
-              <i
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                Change only if you are using GitHub Enterprise Server.
-              </i>
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
-              >
-                <button
-                  aria-describedby=":r1:-loading-announcement"
-                  class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-                  data-loading="false"
-                  data-size="small"
-                  data-testid="login-create-token"
-                  sx="[object Object]"
-                  type="button"
-                >
-                  <span
-                    class="Box-sc-g0xbh4-0 srpGE"
-                    data-component="buttonContent"
-                    sx="[object Object]"
-                  >
-                    <span
-                      class="Box-sc-g0xbh4-0 mhHOW"
-                      data-component="leadingVisual"
-                      sx="[object Object]"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="octicon octicon-key"
-                        display="inline-block"
-                        fill="currentColor"
-                        focusable="false"
-                        height="16"
-                        overflow="visible"
-                        style="vertical-align: text-bottom;"
-                        viewBox="0 0 16 16"
-                        width="16"
-                      >
-                        <path
-                          d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-                        />
-                      </svg>
-                    </span>
-                    <span
-                      data-component="text"
-                    >
-                      Generate a PAT
-                    </span>
-                  </span>
-                </button>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  on GitHub then paste your token below.
-                </span>
-              </div>
-              <i
-                class="Text-sc-17v1xeu-0 hmAFGJ"
-              >
-                The required scopes will be automatically selected for you.
-              </i>
-            </div>
-          </div>
-        </div>
-        <div
-          class="mb-4"
-        >
-          <label
-            class="mb-2 block text-sm font-semibold tracking-wide"
-            for="token"
-          >
-            Token
-          </label>
-          <input
-            class="mb-2 block w-full appearance-none rounded border bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800 border-red-500"
-            id="token"
-            name="token"
-            placeholder="The 40 characters token generated on GitHub"
-            type="text"
-            value=""
-          />
-        </div>
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-justify="space-between"
-          data-padding="none"
-          data-wrap="nowrap"
-        >
-          <span
-            aria-label="GitHub documentation"
-            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-            id=":r2:"
-            role="tooltip"
-          >
-            <button
-              aria-describedby=":r3:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              data-loading="false"
-              data-size="small"
-              data-testid="login-docs"
-              sx="[object Object]"
-              type="button"
-            >
-              <span
-                class="Box-sc-g0xbh4-0 srpGE"
-                data-component="buttonContent"
-                sx="[object Object]"
-              >
-                <span
-                  class="Box-sc-g0xbh4-0 mhHOW"
-                  data-component="leadingVisual"
-                  sx="[object Object]"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="octicon octicon-book"
-                    display="inline-block"
-                    fill="currentColor"
-                    focusable="false"
-                    height="16"
-                    overflow="visible"
-                    style="vertical-align: text-bottom;"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
-                    />
-                  </svg>
-                </span>
-                <span
-                  data-component="text"
-                >
-                  Docs
-                </span>
-              </span>
-            </button>
-          </span>
-          <span
-            aria-label="Login"
-            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-            id=":r4:"
-            role="tooltip"
-          >
-            <button
-              aria-describedby=":r5:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 gEWhIh"
-              data-loading="false"
-              data-testid="login-submit"
-              disabled=""
-              sx="[object Object]"
-              type="submit"
-            >
-              <span
-                class="Box-sc-g0xbh4-0 srpGE"
-                data-component="buttonContent"
-                sx="[object Object]"
-              >
-                <span
-                  class="Box-sc-g0xbh4-0 mhHOW"
-                  data-component="leadingVisual"
-                  sx="[object Object]"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="octicon octicon-sign-in"
-                    display="inline-block"
-                    fill="currentColor"
-                    focusable="false"
-                    height="16"
-                    overflow="visible"
-                    style="vertical-align: text-bottom;"
-                    viewBox="0 0 16 16"
-                    width="16"
-                  >
-                    <path
-                      d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
-                    />
-                  </svg>
-                </span>
-                <span
-                  data-component="text"
-                >
-                  Login
-                </span>
-              </span>
-            </button>
-          </span>
-        </div>
-      </form>
-    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index d03dffdd6..6646cb891 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -2,48 +2,46 @@
 
 exports[`renderer/routes/Settings.tsx should render itself & its children 1`] = `
 <div
-  class="flex h-screen flex-col"
+  class="flex flex-col h-screen"
   data-testid="settings"
 >
   <div
-    class="mx-6 mt-2 py-2"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+    data-align="stretch"
+    data-direction="horizontal"
+    data-justify="space-between"
+    data-padding="spacious"
+    data-wrap="nowrap"
   >
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-      data-align="stretch"
-      data-direction="horizontal"
-      data-justify="space-between"
-      data-padding="none"
-      data-wrap="nowrap"
+    <button
+      aria-describedby=":r0:-loading-announcement"
+      aria-labelledby="Go Back"
+      class="types__StyledButton-sc-ws60qy-0 kQRupk"
+      data-component="IconButton"
+      data-loading="false"
+      data-no-visuals="true"
+      data-testid="header-nav-back"
+      sx="[object Object]"
+      type="button"
     >
-      <button
-        aria-describedby=":r0:-loading-announcement"
-        aria-labelledby="Go Back"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-component="IconButton"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="header-nav-back"
-        sx="[object Object]"
-        type="button"
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-arrow-left"
+        display="inline-block"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-arrow-left"
-          display="inline-block"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          overflow="visible"
-          style="vertical-align: text-bottom;"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-          />
-        </svg>
-      </button>
+        <path
+          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+        />
+      </svg>
+    </button>
+    <legend>
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="center"
@@ -52,6 +50,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
         data-justify="start"
         data-padding="none"
         data-wrap="nowrap"
+        id="settings"
       >
         <svg
           aria-hidden="true"
@@ -59,11 +58,11 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           display="inline-block"
           fill="currentColor"
           focusable="false"
-          height="18"
+          height="16"
           overflow="visible"
           style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
-          width="18"
+          width="16"
         >
           <path
             d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"
@@ -76,7 +75,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           Settings
         </h2>
       </div>
-    </div>
+    </legend>
   </div>
   <div
     class="flex-grow overflow-x-auto px-8 pb-4"
@@ -91,27 +90,40 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
       data-wrap="nowrap"
     >
       <fieldset>
-        <legend
-          class="mb-1 mt-2 font-semibold flex items-center"
-          id="appearance"
-        >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-paintbrush mr-2"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
+        <legend>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+            id="appearance"
           >
-            <path
-              d="M11.134 1.535c.7-.509 1.416-.942 2.076-1.155.649-.21 1.463-.267 2.069.34.603.601.568 1.411.368 2.07-.202.668-.624 1.39-1.125 2.096-1.011 1.424-2.496 2.987-3.775 4.249-1.098 1.084-2.132 1.839-3.04 2.3a3.744 3.744 0 0 1-1.055 3.217c-.431.431-1.065.691-1.657.861-.614.177-1.294.287-1.914.357A21.151 21.151 0 0 1 .797 16H.743l.007-.75H.749L.742 16a.75.75 0 0 1-.743-.742l.743-.008-.742.007v-.054a21.25 21.25 0 0 1 .13-2.284c.067-.647.187-1.287.358-1.914.17-.591.43-1.226.86-1.657a3.746 3.746 0 0 1 3.227-1.054c.466-.893 1.225-1.907 2.314-2.982 1.271-1.255 2.833-2.75 4.245-3.777ZM1.62 13.089c-.051.464-.086.929-.104 1.395.466-.018.932-.053 1.396-.104a10.511 10.511 0 0 0 1.668-.309c.526-.151.856-.325 1.011-.48a2.25 2.25 0 1 0-3.182-3.182c-.155.155-.329.485-.48 1.01a10.515 10.515 0 0 0-.309 1.67Zm10.396-10.34c-1.224.89-2.605 2.189-3.822 3.384l1.718 1.718c1.21-1.205 2.51-2.597 3.387-3.833.47-.662.78-1.227.912-1.662.134-.444.032-.551.009-.575h-.001V1.78c-.014-.014-.113-.113-.548.027-.432.14-.995.462-1.655.942Zm-4.832 7.266-.001.001a9.859 9.859 0 0 0 1.63-1.142L7.155 7.216a9.7 9.7 0 0 0-1.161 1.607c.482.302.889.71 1.19 1.192Z"
-            />
-          </svg>
-          Appearance
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-paintbrush"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M11.134 1.535c.7-.509 1.416-.942 2.076-1.155.649-.21 1.463-.267 2.069.34.603.601.568 1.411.368 2.07-.202.668-.624 1.39-1.125 2.096-1.011 1.424-2.496 2.987-3.775 4.249-1.098 1.084-2.132 1.839-3.04 2.3a3.744 3.744 0 0 1-1.055 3.217c-.431.431-1.065.691-1.657.861-.614.177-1.294.287-1.914.357A21.151 21.151 0 0 1 .797 16H.743l.007-.75H.749L.742 16a.75.75 0 0 1-.743-.742l.743-.008-.742.007v-.054a21.25 21.25 0 0 1 .13-2.284c.067-.647.187-1.287.358-1.914.17-.591.43-1.226.86-1.657a3.746 3.746 0 0 1 3.227-1.054c.466-.893 1.225-1.907 2.314-2.982 1.271-1.255 2.833-2.75 4.245-3.777ZM1.62 13.089c-.051.464-.086.929-.104 1.395.466-.018.932-.053 1.396-.104a10.511 10.511 0 0 0 1.668-.309c.526-.151.856-.325 1.011-.48a2.25 2.25 0 1 0-3.182-3.182c-.155.155-.329.485-.48 1.01a10.515 10.515 0 0 0-.309 1.67Zm10.396-10.34c-1.224.89-2.605 2.189-3.822 3.384l1.718 1.718c1.21-1.205 2.51-2.597 3.387-3.833.47-.662.78-1.227.912-1.662.134-.444.032-.551.009-.575h-.001V1.78c-.014-.014-.113-.113-.548.027-.432.14-.995.462-1.655.942Zm-4.832 7.266-.001.001a9.859 9.859 0 0 0 1.63-1.142L7.155 7.216a9.7 9.7 0 0 0-1.161 1.607c.482.302.889.71 1.19 1.192Z"
+              />
+            </svg>
+            <h2
+              class="Heading__StyledHeading-sc-1c1dgg0-0 lfvrLU"
+              sx="[object Object]"
+            >
+              Appearance
+            </h2>
+          </div>
         </legend>
         <div
           class="mt-3 mb-2 text-sm"
@@ -480,27 +492,40 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
         </div>
       </fieldset>
       <fieldset>
-        <legend
-          class="mb-1 mt-2 font-semibold flex items-center"
-          id="notifications"
-        >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-bell mr-2"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
+        <legend>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+            id="notifications"
           >
-            <path
-              d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"
-            />
-          </svg>
-          Notifications
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-bell"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"
+              />
+            </svg>
+            <h2
+              class="Heading__StyledHeading-sc-1c1dgg0-0 lfvrLU"
+              sx="[object Object]"
+            >
+              Notifications
+            </h2>
+          </div>
         </legend>
         <div
           class="mt-3 mb-2 text-sm"
@@ -789,27 +814,40 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
         </div>
       </fieldset>
       <fieldset>
-        <legend
-          class="mb-1 mt-2 font-semibold flex items-center"
-          id="system"
-        >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-device-desktop mr-2"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
+        <legend>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+            id="system"
           >
-            <path
-              d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"
-            />
-          </svg>
-          System
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-device-desktop"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"
+              />
+            </svg>
+            <h2
+              class="Heading__StyledHeading-sc-1c1dgg0-0 lfvrLU"
+              sx="[object Object]"
+            >
+              System
+            </h2>
+          </div>
         </legend>
         <div
           class="mt-3 mb-2 text-sm"
@@ -1089,7 +1127,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
     </div>
   </div>
   <div
-    class="flex items-center px-3 py-1 text-sm bg-gitify-footer justify-between"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
+    data-align="stretch"
+    data-direction="horizontal"
+    data-justify="space-between"
+    data-padding="condensed"
+    data-wrap="nowrap"
   >
     <div
       class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
diff --git a/src/renderer/types.ts b/src/renderer/types.ts
index ce08e3729..a8cfe9d6a 100644
--- a/src/renderer/types.ts
+++ b/src/renderer/types.ts
@@ -157,11 +157,11 @@ export interface FormattedReason {
 }
 
 export enum IconColor {
-  GRAY = 'text-primer-muted',
-  GREEN = 'text-primer-open',
-  PURPLE = 'text-primer-done',
-  RED = 'text-primer-closed',
-  YELLOW = 'text-primer-attention',
+  GRAY = 'text-gitify-icon-muted',
+  GREEN = 'text-gitify-icon-open',
+  PURPLE = 'text-gitify-icon-done',
+  RED = 'text-gitify-icon-closed',
+  YELLOW = 'text-gitify-icon-attention',
 }
 
 export enum Opacity {
diff --git a/src/renderer/utils/__snapshots__/icons.test.ts.snap b/src/renderer/utils/__snapshots__/icons.test.ts.snap
index 0eeb80dd5..01486ff86 100644
--- a/src/renderer/utils/__snapshots__/icons.test.ts.snap
+++ b/src/renderer/utils/__snapshots__/icons.test.ts.snap
@@ -35,32 +35,32 @@ exports[` 5`] = `
 }
 `;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for check suite 1`] = `"text-primer-muted"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for check suite 1`] = `"text-gitify-icon-muted"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for check suite 2`] = `"text-primer-closed"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for check suite 2`] = `"text-gitify-icon-closed"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for check suite 3`] = `"text-primer-muted"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for check suite 3`] = `"text-gitify-icon-muted"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for check suite 4`] = `"text-primer-open"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for check suite 4`] = `"text-gitify-icon-open"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for check suite 5`] = `"text-primer-muted"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for check suite 5`] = `"text-gitify-icon-muted"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 1`] = `"text-primer-open"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 1`] = `"text-gitify-icon-open"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 2`] = `"text-primer-closed"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 2`] = `"text-gitify-icon-closed"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 3`] = `"text-primer-done"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 3`] = `"text-gitify-icon-done"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 4`] = `"text-primer-muted"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 4`] = `"text-gitify-icon-muted"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 5`] = `"text-primer-done"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 5`] = `"text-gitify-icon-done"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 6`] = `"text-primer-muted"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 6`] = `"text-gitify-icon-muted"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 7`] = `"text-primer-open"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 7`] = `"text-gitify-icon-open"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 8`] = `"text-primer-open"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 8`] = `"text-gitify-icon-open"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 9`] = `"text-primer-done"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 9`] = `"text-gitify-icon-done"`;
 
-exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 10`] = `"text-primer-muted"`;
+exports[`renderer/utils/icons.ts getNotificationTypeIconColor should format the notification color for state 10`] = `"text-gitify-icon-muted"`;
diff --git a/src/renderer/utils/theme.test.ts b/src/renderer/utils/theme.test.ts
index 9d99370b4..a203ea98a 100644
--- a/src/renderer/utils/theme.test.ts
+++ b/src/renderer/utils/theme.test.ts
@@ -41,7 +41,7 @@ describe('renderer/utils/theme.ts', () => {
   });
 
   it('should get color mode from theme', () => {
-    expect(getColorModeFromTheme(Theme.LIGHT)).toBe('light');
+    expect(getColorModeFromTheme(Theme.LIGHT)).toBe('day');
     expect(getColorModeFromTheme(Theme.DARK)).toBe('night');
     expect(getColorModeFromTheme(Theme.SYSTEM)).toBe('auto');
   });
diff --git a/src/renderer/utils/theme.ts b/src/renderer/utils/theme.ts
index 9cc10a55e..1e765a97c 100644
--- a/src/renderer/utils/theme.ts
+++ b/src/renderer/utils/theme.ts
@@ -1,6 +1,8 @@
 import type { ColorModeWithAuto } from '@primer/react/lib/ThemeProvider';
 import { Theme } from '../types';
 
+// TODO Add support for setting color modes (dark_dimmed) - see #1748
+
 // TODO - Replace fully with Octicon primer theme provider
 /**
  * @deprecated
@@ -49,7 +51,7 @@ export function setTheme(theme?: Theme) {
 export function getColorModeFromTheme(theme: Theme): ColorModeWithAuto {
   switch (theme) {
     case Theme.LIGHT:
-      return 'light';
+      return 'day';
     case Theme.DARK:
       return 'night';
     default:
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e5a4585a3..4d2206460 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,44 +10,48 @@ const config: Config = {
         xxs: '0.625rem', // 10px
       },
       colors: {
-        /**
-         * Temporary solution until we migrate to using GitHub Primer Design Tokens Directly.
-         *
-         * See https://primer.style/foundations/primitives/color
-         */
-        primer: {
-          attention: '#9a6700',
-          closed: '#cf222e',
-          done: '#8250df',
-          muted: '#59636e',
-          open: '#1f883d',
-        },
         gitify: {
-          background: 'var(--gitify-background)',
-          font: 'var(--gitify-font)',
-          error: colors.red[500],
+          font: 'var(--fgColor-default)',
+          background: 'var(--bgColor-muted)',
           sidebar: '#24292e',
-          footer: 'var(--gitify-footer)',
-          accounts: {
-            rest: 'var(--gitify-accounts-rest)',
-            error: 'var(--gitify-accounts-error)',
+          footer: 'var(--bgColor-neutral-muted)',
+
+          caution: colors.orange[600],
+          error: 'var(--fgColor-danger)',
+          link: 'var(--fgColor-link)',
+          input: {
+            rest: 'var(--control-bgColor-rest)',
+            focus: 'var(--control-bgColor-active)',
           },
-          repositories: 'var(--gitify-repositories)',
-          notifications: {
-            border: 'var(--gitify-notifications-border)',
-            rest: 'var(--gitify-notifications-rest)',
-            hover: 'var(--gitify-notifications-hover)',
+
+          icon: {
+            attention: 'var(--fgColor-attention)',
+            closed: 'var(--fgColor-closed)',
+            done: 'var(--fgColor-done)',
+            muted: 'var(--fgColor-muted)',
+            open: 'var(--fgColor-open)',
           },
-          tooltip: {
-            icon: colors.blue[500],
-            popout: 'var(--gitify-tooltip-popout)',
+
+          accounts: 'var(--bgColor-neutral-muted)',
+
+          account: {
+            rest: 'var(--control-bgColor-active)',
+            error: 'var(--bgColor-danger-emphasis)',
           },
-          link: colors.blue[500],
-          caution: colors.orange[600],
-          settings: colors.blue[600],
-          pill: {
-            rest: 'var(--gitify-pill-rest)',
-            hover: 'var(--gitify-pill-hover)',
+
+          repository: 'var(--control-bgColor-disabled)',
+
+          notification: {
+            border: 'var(--borderColor-disabled)',
+            hover: 'var(--control-bgColor-hover)',
+            pill: {
+              hover: 'var(--control-bgColor-active)',
+            },
+          },
+
+          tooltip: {
+            icon: 'var(--fgColor-accent)',
+            popout: 'var(--bgColor-disabled)',
           },
         },
       },
@@ -58,48 +62,17 @@ const config: Config = {
   },
   plugins: [
     ({ addBase }) => {
+      // TODO - ideally we would move this to be controlled by GitHub Primer Design Tokens, colors and color schemes
       addBase({
         ':root': {
-          '--gitify-background': colors.white,
-          '--gitify-font': colors.gray[700],
-          '--gitify-footer': colors.gray[200],
-
-          '--gitify-accounts-rest': colors.gray[300],
-          '--gitify-accounts-error': colors.red[300],
-
-          '--gitify-repositories': colors.gray[100],
-
-          '--gitify-notifications-border': colors.gray[100],
-          '--gitify-notifications-rest': colors.white,
-          '--gitify-notifications-hover': colors.gray[100],
-          '--gitify-tooltip-popout': colors.white,
-          '--gitify-pill-rest': colors.gray[100],
-          '--gitify-pill-hover': colors.gray[200],
-
           '--gitify-scrollbar-track': colors.gray[100],
-          '--gitify-scrollbar-thumb': colors.gray[400],
-          '--gitify-scrollbar-thumb-hover': colors.gray[500],
+          '--gitify-scrollbar-thumb': colors.gray[300],
+          '--gitify-scrollbar-thumb-hover': colors.gray[400],
         },
         '.dark': {
-          '--gitify-background': '#161b22',
-          '--gitify-font': colors.gray[100],
-          '--gitify-footer': '#000209',
-
-          '--gitify-accounts-rest': '#000209',
-          '--gitify-accounts-error': colors.red[500],
-
-          '--gitify-repositories': '#090e15',
-
-          '--gitify-notifications-border': '#090e15',
-          '--gitify-notifications-rest': '#161b22',
-          '--gitify-notifications-hover': '#090e15',
-          '--gitify-tooltip-popout': '#24292e',
-          '--gitify-pill-rest': colors.gray[800],
-          '--gitify-pill-hover': colors.gray[700],
-
-          '--gitify-scrollbar-track': '#090e15',
-          '--gitify-scrollbar-thumb': '#24292e',
-          '--gitify-scrollbar-thumb-hover': '#3a3f44',
+          '--gitify-scrollbar-track': colors.gray[900],
+          '--gitify-scrollbar-thumb': colors.gray[700],
+          '--gitify-scrollbar-thumb-hover': colors.gray[600],
         },
       });
     },