From 37d5907dcae0524150297bd39991e323ee79afb0 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 24 Jan 2025 17:19:02 -0500
Subject: [PATCH 1/4] refactor: notification row layout

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 .../notifications/NotificationFooter.tsx      |    2 +-
 .../notifications/NotificationRow.tsx         |  137 +-
 .../AccountNotifications.test.tsx.snap        | 2204 ++++++++--------
 .../NotificationFooter.test.tsx.snap          |   16 +-
 .../NotificationRow.test.tsx.snap             | 2268 +++++++++--------
 .../RepositoryNotifications.test.tsx.snap     |   14 +-
 .../components/primitives/HoverGroup.tsx      |    2 +-
 .../__snapshots__/HoverGroup.test.tsx.snap    |    4 +-
 8 files changed, 2421 insertions(+), 2226 deletions(-)

diff --git a/src/renderer/components/notifications/NotificationFooter.tsx b/src/renderer/components/notifications/NotificationFooter.tsx
index 37655d41e..dba9c20ac 100644
--- a/src/renderer/components/notifications/NotificationFooter.tsx
+++ b/src/renderer/components/notifications/NotificationFooter.tsx
@@ -29,7 +29,7 @@ export const NotificationFooter: FC<INotificationFooter> = ({
     >
       {notification.subject.user ? (
         <Box
-          title={`View profile: ${notification.subject.user.login}`}
+          title={notification.subject.user.login}
           onClick={(event: MouseEvent<HTMLElement>) => {
             // Don't trigger onClick of parent element.
             event.stopPropagation();
diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx
index da29a6ba4..82c68e8ff 100644
--- a/src/renderer/components/notifications/NotificationRow.tsx
+++ b/src/renderer/components/notifications/NotificationRow.tsx
@@ -7,7 +7,7 @@ import {
 } from 'react';
 
 import { BellSlashIcon, CheckIcon, ReadIcon } from '@primer/octicons-react';
-import { IconButton, Tooltip } from '@primer/react';
+import { Box, IconButton, Stack, Text, Tooltip } from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { GroupBy, Opacity, Size } from '../../types';
@@ -87,87 +87,102 @@ export const NotificationRow: FC<INotificationRow> = ({
   const groupByDate = settings.groupBy === GroupBy.DATE;
 
   return (
-    <div
+    <Box
       id={notification.id}
       className={cn(
-        'group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover',
+        'group 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,
       )}
     >
-      <div className="mr-3 flex items-center justify-center">
+      <Stack
+        direction="horizontal"
+        align="center"
+        gap="condensed"
+        className="relative"
+      >
         <Tooltip text={notificationType} direction="e">
           <NotificationIcon size={Size.LARGE} className={iconColor} />
         </Tooltip>
-      </div>
-
-      <div
-        className="flex-1 truncate cursor-pointer"
-        onClick={() => handleNotification()}
-      >
-        <NotificationHeader notification={notification} />
 
-        <div
-          className="flex gap-1 items-center mb-1 truncate text-sm"
-          title={notificationTitle}
-          data-testid="notification-row"
+        <Stack
+          direction="vertical"
+          gap="none"
+          className="cursor-pointer truncate w-full mr-1"
+          onClick={() => handleNotification()}
         >
-          <span className="truncate">{notification.subject.title}</span>
-          <span
-            className={cn(
-              'text-xxs',
-              Opacity.READ,
-              (groupByDate || !settings.showNumber) && 'hidden',
-            )}
+          <NotificationHeader notification={notification} />
+
+          <Stack
+            direction="horizontal"
+            align="start"
+            justify="space-between"
+            gap="condensed"
+            title={notificationTitle}
+            className="text-sm mb-1 truncate"
+            data-testid="notification-row"
           >
-            {notificationNumber}
-          </span>
-        </div>
-
-        <NotificationFooter notification={notification} />
-      </div>
+            <Text className="block truncate flex-shrink overflow-ellipsis">
+              {notification.subject.title}
+            </Text>
+            <Text
+              className={cn(
+                'text-xxs ml-auto',
+                Opacity.READ,
+                (groupByDate || !settings.showNumber) && 'hidden',
+              )}
+            >
+              {notificationNumber}
+            </Text>
+          </Stack>
+
+          <NotificationFooter notification={notification} />
+        </Stack>
+
+        {!animateExit && (
+          <HoverGroup>
+            {isMarkAsDoneFeatureSupported(notification.account) && (
+              <IconButton
+                aria-label="Mark as done"
+                icon={CheckIcon}
+                size="small"
+                variant="invisible"
+                onClick={() => {
+                  setAnimateExit(!settings.delayNotificationState);
+                  setShowAsRead(settings.delayNotificationState);
+                  markNotificationsAsDone([notification]);
+                }}
+                data-testid="notification-mark-as-done"
+              />
+            )}
 
-      {!animateExit && (
-        <HoverGroup>
-          {isMarkAsDoneFeatureSupported(notification.account) && (
             <IconButton
-              aria-label="Mark as done"
-              icon={CheckIcon}
+              aria-label="Mark as read"
+              icon={ReadIcon}
               size="small"
               variant="invisible"
               onClick={() => {
                 setAnimateExit(!settings.delayNotificationState);
                 setShowAsRead(settings.delayNotificationState);
-                markNotificationsAsDone([notification]);
+                markNotificationsAsRead([notification]);
               }}
-              data-testid="notification-mark-as-done"
+              data-testid="notification-mark-as-read"
             />
-          )}
-
-          <IconButton
-            aria-label="Mark as read"
-            icon={ReadIcon}
-            size="small"
-            variant="invisible"
-            onClick={() => {
-              setAnimateExit(!settings.delayNotificationState);
-              setShowAsRead(settings.delayNotificationState);
-              markNotificationsAsRead([notification]);
-            }}
-            data-testid="notification-mark-as-read"
-          />
-
-          <IconButton
-            aria-label="Unsubscribe from thread"
-            icon={BellSlashIcon}
-            size="small"
-            variant="invisible"
-            onClick={unsubscribeFromThread}
-            data-testid="notification-unsubscribe-from-thread"
-          />
-        </HoverGroup>
-      )}
-    </div>
+
+            <IconButton
+              aria-label="Unsubscribe from thread"
+              icon={BellSlashIcon}
+              size="small"
+              variant="invisible"
+              onClick={unsubscribeFromThread}
+              data-testid="notification-unsubscribe-from-thread"
+            />
+          </HoverGroup>
+        )}
+      </Stack>
+    </Box>
   );
 };
diff --git a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
index 38eaea97a..fc7ebf050 100644
--- a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
@@ -77,7 +77,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </button>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -328,7 +328,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
         </span>
       </button>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
@@ -636,7 +636,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </button>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -764,11 +764,17 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
         </div>
       </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"
+        class="Box-sc-g0xbh4-0 group 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="mr-3 flex items-center justify-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <span
             aria-label="Open Issue"
@@ -796,28 +802,99 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               />
             </svg>
           </span>
-        </div>
-        <div
-          class="flex-1 truncate cursor-pointer"
-        >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="condensed"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+            data-align="stretch"
+            data-direction="vertical"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
           >
-            <span
-              aria-label="View repository: gitify-app/notifications-test"
-              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-              id=":rf:"
-              role="tooltip"
+            <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-label="View repository: gitify-app/notifications-test"
+                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
+                id=":rf:"
+                role="tooltip"
+              >
+                <div
+                  class="Box-sc-g0xbh4-0 text-xs font-medium"
+                  data-testid="view-repository"
+                >
+                  <div
+                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                    data-align="center"
+                    data-direction="horizontal"
+                    data-gap="condensed"
+                    data-justify="start"
+                    data-padding="none"
+                    data-testid="avatar"
+                    data-wrap="nowrap"
+                  >
+                    <img
+                      alt="gitify-app/notifications-test"
+                      class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
+                      data-component="Avatar"
+                      height="14"
+                      size="14"
+                      src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                      sx="[object Object]"
+                      width="14"
+                    />
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ"
+                    >
+                      gitify-app/notifications-test
+                    </span>
+                  </div>
+                </div>
+              </span>
+              <div
+                class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+              />
+            </div>
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+              data-align="start"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="space-between"
+              data-padding="none"
+              data-testid="notification-row"
+              data-wrap="nowrap"
+              title="I am a robot and this is a test!"
+            >
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+              >
+                I am a robot and this is a test!
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+              />
+            </div>
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="wrap"
             >
               <div
-                class="Box-sc-g0xbh4-0 text-xs font-medium"
-                data-testid="view-repository"
+                class="Box-sc-g0xbh4-0"
+                data-testid="view-profile"
+                title="gitify-app"
               >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -830,7 +907,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                   data-wrap="nowrap"
                 >
                   <img
-                    alt="gitify-app/notifications-test"
+                    alt="gitify-app"
                     class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
                     data-component="Avatar"
                     height="14"
@@ -839,583 +916,542 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                     sx="[object Object]"
                     width="14"
                   />
-                  <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
-                  >
-                    gitify-app/notifications-test
-                  </span>
                 </div>
               </div>
-            </span>
-            <div
-              class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-            />
+              <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"
+              >
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
+                  title="You're watching the repository."
+                >
+                  Updated
+                </span>
+                <relative-time
+                  class="sc-KXCwU"
+                  datetime="2017-05-20T17:51:57.000Z"
+                >
+                  May 20, 2017
+                </relative-time>
+              </div>
+              <div
+                class="Box-sc-g0xbh4-0 flex gap-1"
+              >
+                <span
+                  class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
+                  title="octocat approved these changes"
+                  variant="secondary"
+                >
+                  <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"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-check text-gitify-icon-open"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="12"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="12"
+                    >
+                      <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>
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                    >
+                      1
+                    </span>
+                  </div>
+                </span>
+                <span
+                  class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
+                  title="gitify-app requested changes"
+                  variant="secondary"
+                >
+                  <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"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-file-diff text-gitify-icon-closed"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="12"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="12"
+                    >
+                      <path
+                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                      />
+                    </svg>
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                    >
+                      1
+                    </span>
+                  </div>
+                </span>
+              </div>
+            </div>
           </div>
           <div
-            class="flex gap-1 items-center mb-1 truncate text-sm"
-            data-testid="notification-row"
-            title="I am a robot and this is a test!"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+            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
-              class="truncate"
+              aria-hidden="true"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":rg:"
+              popover="auto"
             >
-              I am a robot and this is a test!
+              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
-              class="text-xxs opacity-50 hidden"
-            />
+              aria-hidden="true"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":rk:"
+              popover="auto"
+            >
+              Unsubscribe from thread
+            </span>
           </div>
+        </div>
+      </div>
+      <div
+        class="Box-sc-g0xbh4-0 group border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
+        id="148827438"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <span
+            aria-label=" Issue"
+            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
+            id=":rm:"
+            role="tooltip"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-issue-opened text-gitify-icon-muted"
+              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"
+              />
+              <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>
+          </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="condensed"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+            data-align="stretch"
+            data-direction="vertical"
+            data-gap="none"
             data-justify="start"
             data-padding="none"
-            data-wrap="wrap"
+            data-wrap="nowrap"
           >
-            <div
-              class="Box-sc-g0xbh4-0"
-              data-testid="view-profile"
-              title="View profile: gitify-app"
-            >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-testid="avatar"
-                data-wrap="nowrap"
-              >
-                <img
-                  alt="gitify-app"
-                  class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
-                  data-component="Avatar"
-                  height="14"
-                  size="14"
-                  src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                  sx="[object Object]"
-                  width="14"
-                />
-              </div>
-            </div>
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="stretch"
+              data-align="center"
               data-direction="horizontal"
-              data-gap="none"
+              data-gap="condensed"
               data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
-                title="You're watching the repository."
+                aria-label="View repository: gitify-app/notifications-test"
+                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
+                id=":rn:"
+                role="tooltip"
               >
-                Updated
+                <div
+                  class="Box-sc-g0xbh4-0 text-xs font-medium"
+                  data-testid="view-repository"
+                >
+                  <div
+                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                    data-align="center"
+                    data-direction="horizontal"
+                    data-gap="condensed"
+                    data-justify="start"
+                    data-padding="none"
+                    data-testid="avatar"
+                    data-wrap="nowrap"
+                  >
+                    <img
+                      alt="gitify-app/notifications-test"
+                      class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
+                      data-component="Avatar"
+                      height="14"
+                      size="14"
+                      src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                      sx="[object Object]"
+                      width="14"
+                    />
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ"
+                    >
+                      gitify-app/notifications-test
+                    </span>
+                  </div>
+                </div>
               </span>
-              <relative-time
-                class="sc-KXCwU"
-                datetime="2017-05-20T17:51:57.000Z"
-              >
-                May 20, 2017
-              </relative-time>
+              <div
+                class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+              />
             </div>
             <div
-              class="Box-sc-g0xbh4-0 flex gap-1"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+              data-align="start"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="space-between"
+              data-padding="none"
+              data-testid="notification-row"
+              data-wrap="nowrap"
+              title="Improve the UI"
             >
               <span
-                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
-                title="octocat approved these changes"
-                variant="secondary"
+                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
               >
-                <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"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="octicon octicon-check text-gitify-icon-open"
-                    display="inline-block"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    overflow="visible"
-                    style="vertical-align: text-bottom;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <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>
-                  <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
-                  >
-                    1
-                  </span>
-                </div>
+                Improve the UI
               </span>
               <span
-                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
-                title="gitify-app requested changes"
-                variant="secondary"
-              >
-                <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"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="octicon octicon-file-diff text-gitify-icon-closed"
-                    display="inline-block"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    overflow="visible"
-                    style="vertical-align: text-bottom;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                    />
-                  </svg>
-                  <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
-                  >
-                    1
-                  </span>
-                </div>
-              </span>
-            </div>
-          </div>
-        </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=":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"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
               />
-            </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-notification-border hover:bg-gitify-notification-hover"
-        id="148827438"
-      >
-        <div
-          class="mr-3 flex items-center justify-center"
-        >
-          <span
-            aria-label=" Issue"
-            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-            id=":rm:"
-            role="tooltip"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-issue-opened text-gitify-icon-muted"
-              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"
-              />
-              <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>
-          </span>
-        </div>
-        <div
-          class="flex-1 truncate cursor-pointer"
-        >
-          <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-label="View repository: gitify-app/notifications-test"
-              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-              id=":rn:"
-              role="tooltip"
-            >
-              <div
-                class="Box-sc-g0xbh4-0 text-xs font-medium"
-                data-testid="view-repository"
-              >
-                <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                  data-align="center"
-                  data-direction="horizontal"
-                  data-gap="condensed"
-                  data-justify="start"
-                  data-padding="none"
-                  data-testid="avatar"
-                  data-wrap="nowrap"
-                >
-                  <img
-                    alt="gitify-app/notifications-test"
-                    class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
-                    data-component="Avatar"
-                    height="14"
-                    size="14"
-                    src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                    sx="[object Object]"
-                    width="14"
-                  />
-                  <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
-                  >
-                    gitify-app/notifications-test
-                  </span>
-                </div>
-              </div>
-            </span>
-            <div
-              class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-            />
-          </div>
-          <div
-            class="flex gap-1 items-center mb-1 truncate text-sm"
-            data-testid="notification-row"
-            title="Improve the UI"
-          >
-            <span
-              class="truncate"
-            >
-              Improve the UI
-            </span>
-            <span
-              class="text-xxs opacity-50 hidden"
-            />
-          </div>
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="wrap"
-          >
+            </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"
               data-justify="start"
               data-padding="none"
-              data-testid="avatar"
-              data-wrap="nowrap"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-feed-person"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="14"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="14"
-              >
-                <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>
-            </div>
-            <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"
+              data-wrap="wrap"
             >
-              <span
-                class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
-                title="You created the thread."
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-testid="avatar"
+                data-wrap="nowrap"
               >
-                Authored
-              </span>
-              <relative-time
-                class="sc-KXCwU"
-                datetime="2017-05-20T17:06:34.000Z"
+                <svg
+                  aria-hidden="true"
+                  class="octicon octicon-feed-person"
+                  display="inline-block"
+                  fill="currentColor"
+                  focusable="false"
+                  height="14"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
+                  viewBox="0 0 16 16"
+                  width="14"
+                >
+                  <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>
+              </div>
+              <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"
               >
-                May 20, 2017
-              </relative-time>
-            </div>
-            <div
-              class="Box-sc-g0xbh4-0 flex gap-1"
-            />
-          </div>
-        </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=":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"
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
+                  title="You created the thread."
+                >
+                  Authored
+                </span>
+                <relative-time
+                  class="sc-KXCwU"
+                  datetime="2017-05-20T17:06:34.000Z"
+                >
+                  May 20, 2017
+                </relative-time>
+              </div>
+              <div
+                class="Box-sc-g0xbh4-0 flex gap-1"
+              />
+            </div>
+          </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <svg
+            <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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":ro:"
+              popover="auto"
             >
-              <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
+              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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":rq:"
+              popover="auto"
             >
-              <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>
+              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>
@@ -1493,7 +1529,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
         </span>
       </button>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
@@ -1621,11 +1657,17 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
       </div>
     </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"
+      class="Box-sc-g0xbh4-0 group 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="mr-3 flex items-center justify-center"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
         <span
           aria-label="Open Issue"
@@ -1653,344 +1695,362 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             />
           </svg>
         </span>
-      </div>
-      <div
-        class="flex-1 truncate cursor-pointer"
-      >
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="condensed"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+          data-align="stretch"
+          data-direction="vertical"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <span
-            aria-label="View repository: gitify-app/notifications-test"
-            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-            id=":rf:"
-            role="tooltip"
+          <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"
           >
-            <div
-              class="Box-sc-g0xbh4-0 text-xs font-medium"
-              data-testid="view-repository"
+            <span
+              aria-label="View repository: gitify-app/notifications-test"
+              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
+              id=":rf:"
+              role="tooltip"
             >
               <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-testid="avatar"
-                data-wrap="nowrap"
+                class="Box-sc-g0xbh4-0 text-xs font-medium"
+                data-testid="view-repository"
               >
-                <img
-                  alt="gitify-app/notifications-test"
-                  class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
-                  data-component="Avatar"
-                  height="14"
-                  size="14"
-                  src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                  sx="[object Object]"
-                  width="14"
-                />
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
                 >
-                  gitify-app/notifications-test
-                </span>
+                  <img
+                    alt="gitify-app/notifications-test"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
+                    data-component="Avatar"
+                    height="14"
+                    size="14"
+                    src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                    sx="[object Object]"
+                    width="14"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                  >
+                    gitify-app/notifications-test
+                  </span>
+                </div>
               </div>
-            </div>
-          </span>
-          <div
-            class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-          />
-        </div>
-        <div
-          class="flex gap-1 items-center mb-1 truncate text-sm"
-          data-testid="notification-row"
-          title="I am a robot and this is a test!"
-        >
-          <span
-            class="truncate"
-          >
-            I am a robot and this is a test!
-          </span>
-          <span
-            class="text-xxs opacity-50 hidden"
-          />
-        </div>
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="wrap"
-        >
-          <div
-            class="Box-sc-g0xbh4-0"
-            data-testid="view-profile"
-            title="View profile: gitify-app"
-          >
+            </span>
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-testid="avatar"
-              data-wrap="nowrap"
-            >
-              <img
-                alt="gitify-app"
-                class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
-                data-component="Avatar"
-                height="14"
-                size="14"
-                src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                sx="[object Object]"
-                width="14"
-              />
-            </div>
+              class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+            />
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="stretch"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+            data-align="start"
             data-direction="horizontal"
-            data-gap="none"
-            data-justify="start"
+            data-gap="condensed"
+            data-justify="space-between"
             data-padding="none"
+            data-testid="notification-row"
             data-wrap="nowrap"
+            title="I am a robot and this is a test!"
           >
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
-              title="You're watching the repository."
+              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
             >
-              Updated
+              I am a robot and this is a test!
             </span>
-            <relative-time
-              class="sc-KXCwU"
-              datetime="2017-05-20T17:51:57.000Z"
-            >
-              May 20, 2017
-            </relative-time>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+            />
           </div>
           <div
-            class="Box-sc-g0xbh4-0 flex gap-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="wrap"
           >
-            <span
-              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
-              title="octocat approved these changes"
-              variant="secondary"
+            <div
+              class="Box-sc-g0xbh4-0"
+              data-testid="view-profile"
+              title="gitify-app"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                 data-align="center"
                 data-direction="horizontal"
-                data-gap="none"
+                data-gap="condensed"
                 data-justify="start"
                 data-padding="none"
+                data-testid="avatar"
                 data-wrap="nowrap"
               >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-check text-gitify-icon-open"
-                  display="inline-block"
-                  fill="currentColor"
-                  focusable="false"
-                  height="12"
-                  overflow="visible"
-                  style="vertical-align: text-bottom;"
-                  viewBox="0 0 16 16"
-                  width="12"
-                >
-                  <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>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
-                >
-                  1
-                </span>
+                <img
+                  alt="gitify-app"
+                  class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
+                  data-component="Avatar"
+                  height="14"
+                  size="14"
+                  src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                  sx="[object Object]"
+                  width="14"
+                />
               </div>
-            </span>
-            <span
-              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
-              title="gitify-app requested changes"
-              variant="secondary"
+            </div>
+            <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="center"
-                data-direction="horizontal"
-                data-gap="none"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
+                title="You're watching the repository."
               >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-file-diff text-gitify-icon-closed"
-                  display="inline-block"
-                  fill="currentColor"
-                  focusable="false"
-                  height="12"
-                  overflow="visible"
-                  style="vertical-align: text-bottom;"
-                  viewBox="0 0 16 16"
-                  width="12"
+                Updated
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:51:57.000Z"
+              >
+                May 20, 2017
+              </relative-time>
+            </div>
+            <div
+              class="Box-sc-g0xbh4-0 flex gap-1"
+            >
+              <span
+                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
+                title="octocat approved these changes"
+                variant="secondary"
+              >
+                <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"
                 >
-                  <path
-                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                  />
-                </svg>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-check text-gitify-icon-open"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <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>
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                  >
+                    1
+                  </span>
+                </div>
+              </span>
+              <span
+                class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
+                title="gitify-app requested changes"
+                variant="secondary"
+              >
+                <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"
                 >
-                  1
-                </span>
-              </div>
-            </span>
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-file-diff text-gitify-icon-closed"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                    />
+                  </svg>
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                  >
+                    1
+                  </span>
+                </div>
+              </span>
+            </div>
           </div>
         </div>
-      </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=":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"
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <svg
+          <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="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"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":ri:"
+            popover="auto"
           >
-            <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"
+            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"
           >
-            <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
+            <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="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"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rk:"
+            popover="auto"
           >
-            <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>
+            Unsubscribe from thread
+          </span>
+        </div>
       </div>
     </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"
+      class="Box-sc-g0xbh4-0 group border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
       id="148827438"
     >
       <div
-        class="mr-3 flex items-center justify-center"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
         <span
           aria-label=" Issue"
@@ -2018,261 +2078,273 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             />
           </svg>
         </span>
-      </div>
-      <div
-        class="flex-1 truncate cursor-pointer"
-      >
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="condensed"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+          data-align="stretch"
+          data-direction="vertical"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <span
-            aria-label="View repository: gitify-app/notifications-test"
-            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-            id=":rn:"
-            role="tooltip"
+          <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"
           >
-            <div
-              class="Box-sc-g0xbh4-0 text-xs font-medium"
-              data-testid="view-repository"
+            <span
+              aria-label="View repository: gitify-app/notifications-test"
+              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
+              id=":rn:"
+              role="tooltip"
             >
               <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-testid="avatar"
-                data-wrap="nowrap"
+                class="Box-sc-g0xbh4-0 text-xs font-medium"
+                data-testid="view-repository"
+              >
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
+                >
+                  <img
+                    alt="gitify-app/notifications-test"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
+                    data-component="Avatar"
+                    height="14"
+                    size="14"
+                    src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                    sx="[object Object]"
+                    width="14"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                  >
+                    gitify-app/notifications-test
+                  </span>
+                </div>
+              </div>
+            </span>
+            <div
+              class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+            />
+          </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+            data-align="start"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="space-between"
+            data-padding="none"
+            data-testid="notification-row"
+            data-wrap="nowrap"
+            title="Improve the UI"
+          >
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+            >
+              Improve the UI
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+            />
+          </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="wrap"
+          >
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-testid="avatar"
+              data-wrap="nowrap"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-feed-person"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="14"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="14"
+              >
+                <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>
+            </div>
+            <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"
+            >
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
+                title="You created the thread."
               >
-                <img
-                  alt="gitify-app/notifications-test"
-                  class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
-                  data-component="Avatar"
-                  height="14"
-                  size="14"
-                  src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                  sx="[object Object]"
-                  width="14"
-                />
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  gitify-app/notifications-test
-                </span>
-              </div>
+                Authored
+              </span>
+              <relative-time
+                class="sc-KXCwU"
+                datetime="2017-05-20T17:06:34.000Z"
+              >
+                May 20, 2017
+              </relative-time>
             </div>
-          </span>
-          <div
-            class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-          />
-        </div>
-        <div
-          class="flex gap-1 items-center mb-1 truncate text-sm"
-          data-testid="notification-row"
-          title="Improve the UI"
-        >
-          <span
-            class="truncate"
-          >
-            Improve the UI
-          </span>
-          <span
-            class="text-xxs opacity-50 hidden"
-          />
+            <div
+              class="Box-sc-g0xbh4-0 flex gap-1"
+            />
+          </div>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
-          data-gap="condensed"
+          data-gap="none"
           data-justify="start"
           data-padding="none"
-          data-wrap="wrap"
+          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-testid="avatar"
-            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-feed-person"
+              class="octicon octicon-check"
               display="inline-block"
               fill="currentColor"
               focusable="false"
-              height="14"
+              height="16"
               overflow="visible"
               style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
-              width="14"
+              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"
+                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>
-          </div>
-          <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"
+          </button>
+          <span
+            aria-hidden="true"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":ro:"
+            popover="auto"
           >
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
-              title="You created the thread."
-            >
-              Authored
-            </span>
-            <relative-time
-              class="sc-KXCwU"
-              datetime="2017-05-20T17:06:34.000Z"
+            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"
             >
-              May 20, 2017
-            </relative-time>
-          </div>
-          <div
-            class="Box-sc-g0xbh4-0 flex gap-1"
-          />
-        </div>
-      </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=":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
+              <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="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"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rq:"
+            popover="auto"
           >
-            <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"
+            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"
           >
-            <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
+            <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="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"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rs:"
+            popover="auto"
           >
-            <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>
+            Unsubscribe from thread
+          </span>
+        </div>
       </div>
     </div>
   </div>,
@@ -2407,7 +2479,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </button>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -2612,7 +2684,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
         </span>
       </button>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
@@ -2874,7 +2946,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </button>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -3120,7 +3192,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
         </span>
       </button>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
@@ -3423,7 +3495,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
           </span>
         </button>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -3624,7 +3696,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
           </span>
         </button>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -3829,7 +3901,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
         </span>
       </button>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
index 6f826c09f..a958bc5de 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
         <div
           class="Box-sc-g0xbh4-0"
           data-testid="view-profile"
-          title="View profile: gitify-app"
+          title="gitify-app"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -157,7 +157,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
       <div
         class="Box-sc-g0xbh4-0"
         data-testid="view-profile"
-        title="View profile: gitify-app"
+        title="gitify-app"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -354,7 +354,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
         <div
           class="Box-sc-g0xbh4-0"
           data-testid="view-profile"
-          title="View profile: gitify-app"
+          title="gitify-app"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -494,7 +494,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
       <div
         class="Box-sc-g0xbh4-0"
         data-testid="view-profile"
-        title="View profile: gitify-app"
+        title="gitify-app"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1028,7 +1028,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
         <div
           class="Box-sc-g0xbh4-0"
           data-testid="view-profile"
-          title="View profile: gitify-app"
+          title="gitify-app"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1168,7 +1168,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
       <div
         class="Box-sc-g0xbh4-0"
         data-testid="view-profile"
-        title="View profile: gitify-app"
+        title="gitify-app"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1365,7 +1365,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
         <div
           class="Box-sc-g0xbh4-0"
           data-testid="view-profile"
-          title="View profile: gitify-app"
+          title="gitify-app"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1505,7 +1505,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
       <div
         class="Box-sc-g0xbh4-0"
         data-testid="view-profile"
-        title="View profile: gitify-app"
+        title="gitify-app"
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
index 6ba008acd..0fc05bf85 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
@@ -6,11 +6,17 @@ 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-notification-border hover:bg-gitify-notification-hover"
+        class="Box-sc-g0xbh4-0 group 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="mr-3 flex items-center justify-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <span
             aria-label="Open Issue"
@@ -38,9 +44,400 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               />
             </svg>
           </span>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+            data-align="stretch"
+            data-direction="vertical"
+            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="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <span
+                aria-label="View repository: gitify-app/notifications-test"
+                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
+                id=":r1:"
+                role="tooltip"
+              >
+                <div
+                  class="Box-sc-g0xbh4-0 text-xs font-medium"
+                  data-testid="view-repository"
+                >
+                  <div
+                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                    data-align="center"
+                    data-direction="horizontal"
+                    data-gap="condensed"
+                    data-justify="start"
+                    data-padding="none"
+                    data-testid="avatar"
+                    data-wrap="nowrap"
+                  >
+                    <img
+                      alt="gitify-app/notifications-test"
+                      class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
+                      data-component="Avatar"
+                      height="14"
+                      size="14"
+                      src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                      sx="[object Object]"
+                      width="14"
+                    />
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ"
+                    >
+                      gitify-app/notifications-test
+                    </span>
+                  </div>
+                </div>
+              </span>
+              <div
+                class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+              />
+            </div>
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+              data-align="start"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="space-between"
+              data-padding="none"
+              data-testid="notification-row"
+              data-wrap="nowrap"
+              title="I am a robot and this is a test!"
+            >
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+              >
+                I am a robot and this is a test!
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+              />
+            </div>
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="wrap"
+            >
+              <div
+                class="Box-sc-g0xbh4-0"
+                data-testid="view-profile"
+                title="gitify-app"
+              >
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
+                >
+                  <img
+                    alt="gitify-app"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
+                    data-component="Avatar"
+                    height="14"
+                    size="14"
+                    src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                    sx="[object Object]"
+                    width="14"
+                  />
+                </div>
+              </div>
+              <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"
+              >
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
+                  title="You're watching the repository."
+                >
+                  Updated
+                </span>
+                <relative-time
+                  class="sc-KXCwU"
+                  datetime="2017-05-20T17:51:57.000Z"
+                >
+                  May 20, 2017
+                </relative-time>
+              </div>
+              <div
+                class="Box-sc-g0xbh4-0 flex gap-1"
+              >
+                <span
+                  class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
+                  title="octocat approved these changes"
+                  variant="secondary"
+                >
+                  <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"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-check text-gitify-icon-open"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="12"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="12"
+                    >
+                      <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>
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                    >
+                      1
+                    </span>
+                  </div>
+                </span>
+                <span
+                  class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
+                  title="gitify-app requested changes"
+                  variant="secondary"
+                >
+                  <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"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-file-diff text-gitify-icon-closed"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="12"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="12"
+                    >
+                      <path
+                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                      />
+                    </svg>
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                    >
+                      1
+                    </span>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+            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"
+            >
+              <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=":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="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=":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="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=":r6:"
+              popover="auto"
+            >
+              Unsubscribe from thread
+            </span>
+          </div>
         </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 group 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 relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <span
+          aria-label="Open Issue"
+          class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
+          id=":r0:"
+          role="tooltip"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-issue-opened text-gitify-icon-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"
+            />
+            <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>
+        </span>
         <div
-          class="flex-1 truncate cursor-pointer"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+          data-align="stretch"
+          data-direction="vertical"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -94,17 +491,23 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             />
           </div>
           <div
-            class="flex gap-1 items-center mb-1 truncate text-sm"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+            data-align="start"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="space-between"
+            data-padding="none"
             data-testid="notification-row"
+            data-wrap="nowrap"
             title="I am a robot and this is a test!"
           >
             <span
-              class="truncate"
+              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
             >
               I am a robot and this is a test!
             </span>
             <span
-              class="text-xxs opacity-50 hidden"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
             />
           </div>
           <div
@@ -119,7 +522,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             <div
               class="Box-sc-g0xbh4-0"
               data-testid="view-profile"
-              title="View profile: gitify-app"
+              title="gitify-app"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -246,7 +649,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </div>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -371,47 +774,72 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
         </div>
       </div>
     </div>
-  </body>,
-  "container": <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>,
+  "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 - group by repositories 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
       <div
-        class="mr-3 flex items-center justify-center"
-      >
-        <span
-          aria-label="Open Issue"
-          class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-          id=":r0:"
-          role="tooltip"
-        >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-issue-opened text-gitify-icon-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"
-            />
-            <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>
-        </span>
-      </div>
-      <div
-        class="flex-1 truncate cursor-pointer"
+        class="Box-sc-g0xbh4-0 group 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"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
@@ -420,433 +848,393 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           data-wrap="nowrap"
         >
           <span
-            aria-label="View repository: gitify-app/notifications-test"
-            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-            id=":r1:"
+            aria-label="Open Issue"
+            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
+            id=":r8:"
             role="tooltip"
           >
-            <div
-              class="Box-sc-g0xbh4-0 text-xs font-medium"
-              data-testid="view-repository"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-issue-opened text-gitify-icon-open"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="18"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="18"
             >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
-                data-direction="horizontal"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-testid="avatar"
-                data-wrap="nowrap"
-              >
-                <img
-                  alt="gitify-app/notifications-test"
-                  class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
-                  data-component="Avatar"
-                  height="14"
-                  size="14"
-                  src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                  sx="[object Object]"
-                  width="14"
-                />
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  gitify-app/notifications-test
-                </span>
-              </div>
-            </div>
-          </span>
-          <div
-            class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-          />
-        </div>
-        <div
-          class="flex gap-1 items-center mb-1 truncate text-sm"
-          data-testid="notification-row"
-          title="I am a robot and this is a test!"
-        >
-          <span
-            class="truncate"
-          >
-            I am a robot and this is a test!
+              <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>
           </span>
-          <span
-            class="text-xxs opacity-50 hidden"
-          />
-        </div>
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="wrap"
-        >
           <div
-            class="Box-sc-g0xbh4-0"
-            data-testid="view-profile"
-            title="View profile: gitify-app"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+            data-align="stretch"
+            data-direction="vertical"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+              data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
-              data-justify="start"
+              data-justify="space-between"
               data-padding="none"
-              data-testid="avatar"
+              data-testid="notification-row"
               data-wrap="nowrap"
+              title="I am a robot and this is a test!"
             >
-              <img
-                alt="gitify-app"
-                class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
-                data-component="Avatar"
-                height="14"
-                size="14"
-                src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                sx="[object Object]"
-                width="14"
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+              >
+                I am a robot and this is a test!
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50"
               />
             </div>
-          </div>
-          <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"
-          >
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
-              title="You're watching the repository."
-            >
-              Updated
-            </span>
-            <relative-time
-              class="sc-KXCwU"
-              datetime="2017-05-20T17:51:57.000Z"
-            >
-              May 20, 2017
-            </relative-time>
-          </div>
-          <div
-            class="Box-sc-g0xbh4-0 flex gap-1"
-          >
-            <span
-              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
-              title="octocat approved these changes"
-              variant="secondary"
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="wrap"
             >
+              <div
+                class="Box-sc-g0xbh4-0"
+                data-testid="view-profile"
+                title="gitify-app"
+              >
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
+                >
+                  <img
+                    alt="gitify-app"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
+                    data-component="Avatar"
+                    height="14"
+                    size="14"
+                    src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                    sx="[object Object]"
+                    width="14"
+                  />
+                </div>
+              </div>
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
+                data-align="stretch"
                 data-direction="horizontal"
                 data-gap="none"
                 data-justify="start"
                 data-padding="none"
                 data-wrap="nowrap"
               >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-check text-gitify-icon-open"
-                  display="inline-block"
-                  fill="currentColor"
-                  focusable="false"
-                  height="12"
-                  overflow="visible"
-                  style="vertical-align: text-bottom;"
-                  viewBox="0 0 16 16"
-                  width="12"
-                >
-                  <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>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                  class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
+                  title="You're watching the repository."
                 >
-                  1
+                  Updated
                 </span>
+                <relative-time
+                  class="sc-KXCwU"
+                  datetime="2017-05-20T17:51:57.000Z"
+                >
+                  May 20, 2017
+                </relative-time>
               </div>
-            </span>
-            <span
-              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
-              title="gitify-app requested changes"
-              variant="secondary"
-            >
               <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="Box-sc-g0xbh4-0 flex gap-1"
               >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-file-diff text-gitify-icon-closed"
-                  display="inline-block"
-                  fill="currentColor"
-                  focusable="false"
-                  height="12"
-                  overflow="visible"
-                  style="vertical-align: text-bottom;"
-                  viewBox="0 0 16 16"
-                  width="12"
+                <span
+                  class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
+                  title="octocat approved these changes"
+                  variant="secondary"
                 >
-                  <path
-                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                  />
-                </svg>
+                  <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"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-check text-gitify-icon-open"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="12"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="12"
+                    >
+                      <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>
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                    >
+                      1
+                    </span>
+                  </div>
+                </span>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                  class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
+                  title="gitify-app requested changes"
+                  variant="secondary"
                 >
-                  1
+                  <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"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-file-diff text-gitify-icon-closed"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="12"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="12"
+                    >
+                      <path
+                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                      />
+                    </svg>
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                    >
+                      1
+                    </span>
+                  </div>
                 </span>
               </div>
+            </div>
+          </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+            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>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 group 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 opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
         data-align="center"
         data-direction="horizontal"
-        data-gap="none"
+        data-gap="condensed"
         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"
+        <span
+          aria-label="Open Issue"
+          class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
+          id=":r8:"
+          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"
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
             />
-          </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="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"
+              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=":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"
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+          data-align="stretch"
+          data-direction="vertical"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <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"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+            data-align="start"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="space-between"
+            data-padding="none"
+            data-testid="notification-row"
+            data-wrap="nowrap"
+            title="I am a robot and this is a test!"
           >
-            <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>,
-  "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 - group by repositories 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="mr-3 flex items-center justify-center"
-        >
-          <span
-            aria-label="Open Issue"
-            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-            id=":r8:"
-            role="tooltip"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-issue-opened text-gitify-icon-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"
-              />
-              <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>
-          </span>
-        </div>
-        <div
-          class="flex-1 truncate cursor-pointer"
-        >
-          <div
-            class="flex gap-1 items-center mb-1 truncate text-sm"
-            data-testid="notification-row"
-            title="I am a robot and this is a test!"
-          >
-            <span
-              class="truncate"
-            >
-              I am a robot and this is a test!
-            </span>
-            <span
-              class="text-xxs opacity-50"
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+            >
+              I am a robot and this is a test!
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50"
             />
           </div>
           <div
@@ -861,7 +1249,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             <div
               class="Box-sc-g0xbh4-0"
               data-testid="view-profile"
-              title="View profile: gitify-app"
+              title="gitify-app"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -988,7 +1376,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </div>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -1113,322 +1501,6 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
         </div>
       </div>
     </div>
-  </body>,
-  "container": <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="mr-3 flex items-center justify-center"
-      >
-        <span
-          aria-label="Open Issue"
-          class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-          id=":r8:"
-          role="tooltip"
-        >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-issue-opened text-gitify-icon-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"
-            />
-            <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>
-        </span>
-      </div>
-      <div
-        class="flex-1 truncate cursor-pointer"
-      >
-        <div
-          class="flex gap-1 items-center mb-1 truncate text-sm"
-          data-testid="notification-row"
-          title="I am a robot and this is a test!"
-        >
-          <span
-            class="truncate"
-          >
-            I am a robot and this is a test!
-          </span>
-          <span
-            class="text-xxs opacity-50"
-          />
-        </div>
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="wrap"
-        >
-          <div
-            class="Box-sc-g0xbh4-0"
-            data-testid="view-profile"
-            title="View profile: gitify-app"
-          >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-testid="avatar"
-              data-wrap="nowrap"
-            >
-              <img
-                alt="gitify-app"
-                class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
-                data-component="Avatar"
-                height="14"
-                size="14"
-                src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                sx="[object Object]"
-                width="14"
-              />
-            </div>
-          </div>
-          <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"
-          >
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
-              title="You're watching the repository."
-            >
-              Updated
-            </span>
-            <relative-time
-              class="sc-KXCwU"
-              datetime="2017-05-20T17:51:57.000Z"
-            >
-              May 20, 2017
-            </relative-time>
-          </div>
-          <div
-            class="Box-sc-g0xbh4-0 flex gap-1"
-          >
-            <span
-              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
-              title="octocat approved these changes"
-              variant="secondary"
-            >
-              <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"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-check text-gitify-icon-open"
-                  display="inline-block"
-                  fill="currentColor"
-                  focusable="false"
-                  height="12"
-                  overflow="visible"
-                  style="vertical-align: text-bottom;"
-                  viewBox="0 0 16 16"
-                  width="12"
-                >
-                  <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>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
-                >
-                  1
-                </span>
-              </div>
-            </span>
-            <span
-              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
-              title="gitify-app requested changes"
-              variant="secondary"
-            >
-              <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"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-file-diff text-gitify-icon-closed"
-                  display="inline-block"
-                  fill="currentColor"
-                  focusable="false"
-                  height="12"
-                  overflow="visible"
-                  style="vertical-align: text-bottom;"
-                  viewBox="0 0 16 16"
-                  width="12"
-                >
-                  <path
-                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                  />
-                </svg>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
-                >
-                  1
-                </span>
-              </div>
-            </span>
-          </div>
-        </div>
-      </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=":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],
@@ -1490,54 +1562,406 @@ 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-notification-border hover:bg-gitify-notification-hover"
-        id="138661096"
+        class="Box-sc-g0xbh4-0 group 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 relative"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <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-gitify-icon-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"
+              />
+              <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>
+          </span>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+            data-align="stretch"
+            data-direction="vertical"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+              data-align="start"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="space-between"
+              data-padding="none"
+              data-testid="notification-row"
+              data-wrap="nowrap"
+              title="I am a robot and this is a test!"
+            >
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+              >
+                I am a robot and this is a test!
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+              />
+            </div>
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="wrap"
+            >
+              <div
+                class="Box-sc-g0xbh4-0"
+                data-testid="view-profile"
+                title="gitify-app"
+              >
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
+                >
+                  <img
+                    alt="gitify-app"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
+                    data-component="Avatar"
+                    height="14"
+                    size="14"
+                    src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                    sx="[object Object]"
+                    width="14"
+                  />
+                </div>
+              </div>
+              <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"
+              >
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
+                  title="You're watching the repository."
+                >
+                  Updated
+                </span>
+                <relative-time
+                  class="sc-KXCwU"
+                  datetime="2017-05-20T17:51:57.000Z"
+                >
+                  May 20, 2017
+                </relative-time>
+              </div>
+              <div
+                class="Box-sc-g0xbh4-0 flex gap-1"
+              >
+                <span
+                  class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
+                  title="octocat approved these changes"
+                  variant="secondary"
+                >
+                  <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"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-check text-gitify-icon-open"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="12"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="12"
+                    >
+                      <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>
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                    >
+                      1
+                    </span>
+                  </div>
+                </span>
+                <span
+                  class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
+                  title="gitify-app requested changes"
+                  variant="secondary"
+                >
+                  <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"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-file-diff text-gitify-icon-closed"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="12"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="12"
+                    >
+                      <path
+                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                      />
+                    </svg>
+                    <span
+                      class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
+                    >
+                      1
+                    </span>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+            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"
+            >
+              <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>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 group 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 relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <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"
         >
-          <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-gitify-icon-open"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="18"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="18"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-issue-opened text-gitify-icon-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"
-              />
-              <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>
-          </span>
-        </div>
+            <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>
+        </span>
         <div
-          class="flex-1 truncate cursor-pointer"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+          data-align="stretch"
+          data-direction="vertical"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <div
-            class="flex gap-1 items-center mb-1 truncate text-sm"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+            data-align="start"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="space-between"
+            data-padding="none"
             data-testid="notification-row"
+            data-wrap="nowrap"
             title="I am a robot and this is a test!"
           >
             <span
-              class="truncate"
+              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
             >
               I am a robot and this is a test!
             </span>
             <span
-              class="text-xxs opacity-50 hidden"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
             />
           </div>
           <div
@@ -1552,7 +1976,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             <div
               class="Box-sc-g0xbh4-0"
               data-testid="view-profile"
-              title="View profile: gitify-app"
+              title="gitify-app"
             >
               <div
                 class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1679,7 +2103,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </div>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -1804,322 +2228,6 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
         </div>
       </div>
     </div>
-  </body>,
-  "container": <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="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-gitify-icon-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"
-            />
-            <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>
-        </span>
-      </div>
-      <div
-        class="flex-1 truncate cursor-pointer"
-      >
-        <div
-          class="flex gap-1 items-center mb-1 truncate text-sm"
-          data-testid="notification-row"
-          title="I am a robot and this is a test!"
-        >
-          <span
-            class="truncate"
-          >
-            I am a robot and this is a test!
-          </span>
-          <span
-            class="text-xxs opacity-50 hidden"
-          />
-        </div>
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-xs opacity-80"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="wrap"
-        >
-          <div
-            class="Box-sc-g0xbh4-0"
-            data-testid="view-profile"
-            title="View profile: gitify-app"
-          >
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-testid="avatar"
-              data-wrap="nowrap"
-            >
-              <img
-                alt="gitify-app"
-                class="Avatar__StyledAvatar-sc-2lv0r8-0 htlvKA"
-                data-component="Avatar"
-                height="14"
-                size="14"
-                src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                sx="[object Object]"
-                width="14"
-              />
-            </div>
-          </div>
-          <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"
-          >
-            <span
-              class="Text-sc-17v1xeu-0 hmAFGJ pr-1"
-              title="You're watching the repository."
-            >
-              Updated
-            </span>
-            <relative-time
-              class="sc-KXCwU"
-              datetime="2017-05-20T17:51:57.000Z"
-            >
-              May 20, 2017
-            </relative-time>
-          </div>
-          <div
-            class="Box-sc-g0xbh4-0 flex gap-1"
-          >
-            <span
-              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
-              title="octocat approved these changes"
-              variant="secondary"
-            >
-              <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"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-check text-gitify-icon-open"
-                  display="inline-block"
-                  fill="currentColor"
-                  focusable="false"
-                  height="12"
-                  overflow="visible"
-                  style="vertical-align: text-bottom;"
-                  viewBox="0 0 16 16"
-                  width="12"
-                >
-                  <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>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
-                >
-                  1
-                </span>
-              </div>
-            </span>
-            <span
-              class="Label__StyledLabel-sc-1dgcne-0 bEDWlT hover:bg-gitify-notification-pill-hover"
-              title="gitify-app requested changes"
-              variant="secondary"
-            >
-              <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"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-file-diff text-gitify-icon-closed"
-                  display="inline-block"
-                  fill="currentColor"
-                  focusable="false"
-                  height="12"
-                  overflow="visible"
-                  style="vertical-align: text-bottom;"
-                  viewBox="0 0 16 16"
-                  width="12"
-                >
-                  <path
-                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                  />
-                </svg>
-                <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ text-xxs px-1"
-                >
-                  1
-                </span>
-              </div>
-            </span>
-          </div>
-        </div>
-      </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=":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
-          aria-hidden="true"
-          class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
-          data-direction="s"
-          id=":rk:"
-          popover="auto"
-        >
-          Unsubscribe from thread
-        </span>
-      </div>
-    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
index 42c36333e..19b4a553a 100644
--- a/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
           </button>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -285,7 +285,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
         </button>
       </div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
@@ -553,7 +553,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
           </button>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -757,7 +757,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
           </button>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -968,7 +968,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
         </button>
       </div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
@@ -1236,7 +1236,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
           </button>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -1447,7 +1447,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
         </button>
       </div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
diff --git a/src/renderer/components/primitives/HoverGroup.tsx b/src/renderer/components/primitives/HoverGroup.tsx
index a924d6dff..989aa3495 100644
--- a/src/renderer/components/primitives/HoverGroup.tsx
+++ b/src/renderer/components/primitives/HoverGroup.tsx
@@ -12,7 +12,7 @@ export const HoverGroup: FC<IHoverGroup> = ({ children }: IHoverGroup) => {
       direction="horizontal"
       align="center"
       gap="none"
-      className="opacity-0 transition-opacity group-hover:opacity-80"
+      className="opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
     >
       {children}
     </Stack>
diff --git a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
index 896caa0d2..01ce7200d 100644
--- a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/primitives/HoverGroup.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
@@ -20,7 +20,7 @@ exports[`renderer/components/primitives/HoverGroup.tsx should render 1`] = `
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-80"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
       data-align="center"
       data-direction="horizontal"
       data-gap="none"

From dfec2a2026998fbb5ab14bd3cf6bd5246fb41cca Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Sat, 25 Jan 2025 09:39:36 -0500
Subject: [PATCH 2/4] refactor: notification row layouts

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 .../components/avatars/AvatarWithFallback.tsx |    8 +-
 .../AvatarWithFallback.test.tsx.snap          |   40 +-
 src/renderer/components/fields/Checkbox.tsx   |    1 +
 src/renderer/components/fields/RadioGroup.tsx |    3 +-
 .../components/fields/Tooltip.test.tsx        |    4 +-
 src/renderer/components/fields/Tooltip.tsx    |   14 +-
 .../__snapshots__/Checkbox.test.tsx.snap      |    2 +
 .../__snapshots__/RadioGroup.test.tsx.snap    |   40 +-
 .../__snapshots__/Tooltip.test.tsx.snap       |   48 +-
 .../notifications/AccountNotifications.tsx    |  112 +-
 .../notifications/NotificationHeader.tsx      |   29 +-
 .../notifications/NotificationRow.tsx         |   83 +-
 .../RepositoryNotifications.test.tsx          |    8 +-
 .../notifications/RepositoryNotifications.tsx |  106 +-
 .../AccountNotifications.test.tsx.snap        | 3720 +++++++++--------
 .../NotificationFooter.test.tsx.snap          |   20 +-
 .../NotificationHeader.test.tsx.snap          |  204 +-
 .../NotificationRow.test.tsx.snap             |  244 +-
 .../RepositoryNotifications.test.tsx.snap     | 1594 +++----
 .../primitives/HoverButton.test.tsx           |   34 +
 .../components/primitives/HoverButton.tsx     |   33 +
 .../components/primitives/HoverGroup.test.tsx |    2 +-
 .../components/primitives/HoverGroup.tsx      |   13 +-
 .../__snapshots__/HoverButton.test.tsx.snap   |  201 +
 .../__snapshots__/HoverGroup.test.tsx.snap    |    4 +-
 .../settings/AppearanceSettings.test.tsx      |    8 +-
 .../settings/AppearanceSettings.tsx           |   50 +-
 .../settings/NotificationSettings.test.tsx    |   12 +-
 .../settings/NotificationSettings.tsx         |   31 +-
 .../settings/SystemSettings.test.tsx          |   21 +-
 .../components/settings/SystemSettings.tsx    |   25 +-
 src/renderer/routes/Accounts.tsx              |   45 +-
 src/renderer/routes/Filters.tsx               |    6 +-
 .../__snapshots__/Accounts.test.tsx.snap      |  864 ++--
 .../__snapshots__/Filters.test.tsx.snap       |  166 +-
 .../__snapshots__/Settings.test.tsx.snap      |  117 +-
 36 files changed, 4202 insertions(+), 3710 deletions(-)
 create mode 100644 src/renderer/components/primitives/HoverButton.test.tsx
 create mode 100644 src/renderer/components/primitives/HoverButton.tsx
 create mode 100644 src/renderer/components/primitives/__snapshots__/HoverButton.test.tsx.snap

diff --git a/src/renderer/components/avatars/AvatarWithFallback.tsx b/src/renderer/components/avatars/AvatarWithFallback.tsx
index 8610c922e..693928074 100644
--- a/src/renderer/components/avatars/AvatarWithFallback.tsx
+++ b/src/renderer/components/avatars/AvatarWithFallback.tsx
@@ -32,6 +32,7 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
       align="center"
       gap="condensed"
       data-testid="avatar"
+      className="truncate"
     >
       {!src || isBroken ? (
         isNonHuman ? (
@@ -48,7 +49,12 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
           onError={() => setIsBroken(true)}
         />
       )}
-      {name && <Text>{name}</Text>}
+      {name && (
+        // TODO add truncation logic for long names
+        <Text className="block truncate flex-shrink overflow-ellipsis">
+          {name}
+        </Text>
+      )}
     </Stack>
   );
 };
diff --git a/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap b/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap
index 16d16b195..ad94442ee 100644
--- a/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap
+++ b/src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
         data-align="center"
         data-direction="horizontal"
         data-gap="condensed"
@@ -32,7 +32,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
           />
         </svg>
         <span
-          class="Text-sc-17v1xeu-0 hmAFGJ"
+          class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
         >
           @gitify-app
         </span>
@@ -41,7 +41,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
       data-align="center"
       data-direction="horizontal"
       data-gap="condensed"
@@ -67,7 +67,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
         />
       </svg>
       <span
-        class="Text-sc-17v1xeu-0 hmAFGJ"
+        class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
       >
         @gitify-app
       </span>
@@ -133,7 +133,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
         data-align="center"
         data-direction="horizontal"
         data-gap="condensed"
@@ -159,7 +159,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
           />
         </svg>
         <span
-          class="Text-sc-17v1xeu-0 hmAFGJ"
+          class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
         >
           @gitify-app
         </span>
@@ -168,7 +168,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
       data-align="center"
       data-direction="horizontal"
       data-gap="condensed"
@@ -194,7 +194,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
         />
       </svg>
       <span
-        class="Text-sc-17v1xeu-0 hmAFGJ"
+        class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
       >
         @gitify-app
       </span>
@@ -256,7 +256,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
 
 exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback icon when the image fails to load (isBroken = true) - human user 1`] = `
 <div
-  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
   data-align="center"
   data-direction="horizontal"
   data-gap="condensed"
@@ -276,7 +276,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
     width="16"
   />
   <span
-    class="Text-sc-17v1xeu-0 hmAFGJ"
+    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
   >
     @gitify-app
   </span>
@@ -285,7 +285,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
 
 exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback icon when the image fails to load (isBroken = true) - non human user 1`] = `
 <div
-  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
   data-align="center"
   data-direction="horizontal"
   data-gap="condensed"
@@ -305,7 +305,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx renders the fallback
     width="16"
   />
   <span
-    class="Text-sc-17v1xeu-0 hmAFGJ"
+    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
   >
     @gitify-app
   </span>
@@ -318,7 +318,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
         data-align="center"
         data-direction="horizontal"
         data-gap="condensed"
@@ -338,7 +338,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar
           width="16"
         />
         <span
-          class="Text-sc-17v1xeu-0 hmAFGJ"
+          class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
         >
           @gitify-app
         </span>
@@ -347,7 +347,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
       data-align="center"
       data-direction="horizontal"
       data-gap="condensed"
@@ -367,7 +367,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar
         width="16"
       />
       <span
-        class="Text-sc-17v1xeu-0 hmAFGJ"
+        class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
       >
         @gitify-app
       </span>
@@ -433,7 +433,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
         data-align="center"
         data-direction="horizontal"
         data-gap="condensed"
@@ -453,7 +453,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar
           width="16"
         />
         <span
-          class="Text-sc-17v1xeu-0 hmAFGJ"
+          class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
         >
           @gitify-app
         </span>
@@ -462,7 +462,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
       data-align="center"
       data-direction="horizontal"
       data-gap="condensed"
@@ -482,7 +482,7 @@ exports[`renderer/components/avatars/AvatarWithFallback.tsx should render avatar
         width="16"
       />
       <span
-        class="Text-sc-17v1xeu-0 hmAFGJ"
+        class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
       >
         @gitify-app
       </span>
diff --git a/src/renderer/components/fields/Checkbox.tsx b/src/renderer/components/fields/Checkbox.tsx
index 84b55f0b0..264afeba7 100644
--- a/src/renderer/components/fields/Checkbox.tsx
+++ b/src/renderer/components/fields/Checkbox.tsx
@@ -22,6 +22,7 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
           checked={props.checked}
           onChange={props.onChange}
           disabled={props.disabled}
+          data-testid={`checkbox-${props.name}`}
         />
 
         <div className="flex items-center ml-3">
diff --git a/src/renderer/components/fields/RadioGroup.tsx b/src/renderer/components/fields/RadioGroup.tsx
index 990254158..4c5fbe143 100644
--- a/src/renderer/components/fields/RadioGroup.tsx
+++ b/src/renderer/components/fields/RadioGroup.tsx
@@ -21,7 +21,7 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
         aria-labelledby={props.name}
       >
         {props.options.map((item) => {
-          const name = `${props.name}_${item.value.toLowerCase()}`;
+          const name = `radio-${props.name}-${item.value}`.toLowerCase();
 
           return (
             <div className="flex items-center gap-2" key={name}>
@@ -33,6 +33,7 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
                 value={item.value}
                 onChange={props.onChange}
                 checked={item.value === props.value}
+                data-testid={name}
               />
               <FieldLabel name={name} label={item.label} />
             </div>
diff --git a/src/renderer/components/fields/Tooltip.test.tsx b/src/renderer/components/fields/Tooltip.test.tsx
index bd76b4bb0..ae81a48d4 100644
--- a/src/renderer/components/fields/Tooltip.test.tsx
+++ b/src/renderer/components/fields/Tooltip.test.tsx
@@ -3,7 +3,7 @@ import { type ITooltip, Tooltip } from './Tooltip';
 
 describe('renderer/components/fields/Tooltip.tsx', () => {
   const props: ITooltip = {
-    name: 'tooltip',
+    name: 'test',
     tooltip: 'This is some tooltip text',
   };
 
@@ -15,7 +15,7 @@ describe('renderer/components/fields/Tooltip.tsx', () => {
   it('should display on mouse enter / leave', () => {
     render(<Tooltip {...props} />);
 
-    const tooltipElement = screen.getByLabelText('tooltip');
+    const tooltipElement = screen.getByTestId('tooltip-test');
 
     fireEvent.mouseEnter(tooltipElement);
     expect(tooltipElement).toMatchSnapshot();
diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx
index 4a89746d5..377494bbb 100644
--- a/src/renderer/components/fields/Tooltip.tsx
+++ b/src/renderer/components/fields/Tooltip.tsx
@@ -1,4 +1,5 @@
 import { QuestionIcon } from '@primer/octicons-react';
+import { Box } from '@primer/react';
 import { type FC, type ReactNode, useState } from 'react';
 
 export interface ITooltip {
@@ -10,21 +11,22 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (
-    <span
+    <Box
       id={props.name}
       aria-label={props.name}
       className="relative"
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
+      data-testid={`tooltip-${props.name}`}
     >
       <QuestionIcon className="ml-1 text-gitify-tooltip-icon" />
       {showTooltip && (
-        <div className="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
-          <div className="text-left text-xs text-gitify-font">
+        <Box className="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
+          <Box className="text-left text-xs text-gitify-font">
             {props.tooltip}
-          </div>
-        </div>
+          </Box>
+        </Box>
       )}
-    </span>
+    </Box>
   );
 };
diff --git a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
index fd71ec0d4..748f774a7 100644
--- a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`renderer/components/fields/Checkbox.tsx should render 1`] = `
           <input
             checked=""
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-appearance"
             id="appearance"
             type="checkbox"
           />
@@ -41,6 +42,7 @@ exports[`renderer/components/fields/Checkbox.tsx should render 1`] = `
         <input
           checked=""
           class="size-4 rounded-sm cursor-pointer"
+          data-testid="checkbox-appearance"
           id="appearance"
           type="checkbox"
         />
diff --git a/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap b/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
index 5f74db2a9..a9e3e3979 100644
--- a/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
@@ -24,14 +24,15 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
           >
             <input
               class="size-4 cursor-pointer"
-              id="appearance_one"
+              data-testid="radio-appearance-one"
+              id="radio-appearance-one"
               name="appearance"
               type="radio"
               value="one"
             />
             <label
               class="mr-3 font-medium cursor-pointer"
-              for="appearance_one"
+              for="radio-appearance-one"
             >
               Value 1
             </label>
@@ -42,14 +43,15 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
             <input
               checked=""
               class="size-4 cursor-pointer"
-              id="appearance_two"
+              data-testid="radio-appearance-two"
+              id="radio-appearance-two"
               name="appearance"
               type="radio"
               value="two"
             />
             <label
               class="mr-3 font-medium cursor-pointer"
-              for="appearance_two"
+              for="radio-appearance-two"
             >
               Value 2
             </label>
@@ -78,14 +80,15 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
         >
           <input
             class="size-4 cursor-pointer"
-            id="appearance_one"
+            data-testid="radio-appearance-one"
+            id="radio-appearance-one"
             name="appearance"
             type="radio"
             value="one"
           />
           <label
             class="mr-3 font-medium cursor-pointer"
-            for="appearance_one"
+            for="radio-appearance-one"
           >
             Value 1
           </label>
@@ -96,14 +99,15 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
           <input
             checked=""
             class="size-4 cursor-pointer"
-            id="appearance_two"
+            data-testid="radio-appearance-two"
+            id="radio-appearance-two"
             name="appearance"
             type="radio"
             value="two"
           />
           <label
             class="mr-3 font-medium cursor-pointer"
-            for="appearance_two"
+            for="radio-appearance-two"
           >
             Value 2
           </label>
@@ -189,14 +193,15 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
           >
             <input
               class="size-4 cursor-pointer"
-              id="appearance_one"
+              data-testid="radio-appearance-one"
+              id="radio-appearance-one"
               name="appearance"
               type="radio"
               value="one"
             />
             <label
               class="mr-3 font-medium cursor-pointer"
-              for="appearance_one"
+              for="radio-appearance-one"
             >
               Value 1
             </label>
@@ -207,14 +212,15 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
             <input
               checked=""
               class="size-4 cursor-pointer"
-              id="appearance_two"
+              data-testid="radio-appearance-two"
+              id="radio-appearance-two"
               name="appearance"
               type="radio"
               value="two"
             />
             <label
               class="mr-3 font-medium cursor-pointer"
-              for="appearance_two"
+              for="radio-appearance-two"
             >
               Value 2
             </label>
@@ -243,14 +249,15 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
         >
           <input
             class="size-4 cursor-pointer"
-            id="appearance_one"
+            data-testid="radio-appearance-one"
+            id="radio-appearance-one"
             name="appearance"
             type="radio"
             value="one"
           />
           <label
             class="mr-3 font-medium cursor-pointer"
-            for="appearance_one"
+            for="radio-appearance-one"
           >
             Value 1
           </label>
@@ -261,14 +268,15 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
           <input
             checked=""
             class="size-4 cursor-pointer"
-            id="appearance_two"
+            data-testid="radio-appearance-two"
+            id="radio-appearance-two"
             name="appearance"
             type="radio"
             value="two"
           />
           <label
             class="mr-3 font-medium cursor-pointer"
-            for="appearance_two"
+            for="radio-appearance-two"
           >
             Value 2
           </label>
diff --git a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
index d65bd91d4..e5931df76 100644
--- a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter / leave 1`] = `
-<span
-  aria-label="tooltip"
-  class="relative"
-  id="tooltip"
+<div
+  aria-label="test"
+  class="Box-sc-g0xbh4-0 relative"
+  data-testid="tooltip-test"
+  id="test"
 >
   <svg
     aria-hidden="true"
@@ -23,22 +24,23 @@ exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter /
     />
   </svg>
   <div
-    class="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout"
+    class="Box-sc-g0xbh4-0 absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout"
   >
     <div
-      class="text-left text-xs text-gitify-font"
+      class="Box-sc-g0xbh4-0 text-left text-xs text-gitify-font"
     >
       This is some tooltip text
     </div>
   </div>
-</span>
+</div>
 `;
 
 exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter / leave 2`] = `
-<span
-  aria-label="tooltip"
-  class="relative"
-  id="tooltip"
+<div
+  aria-label="test"
+  class="Box-sc-g0xbh4-0 relative"
+  data-testid="tooltip-test"
+  id="test"
 >
   <svg
     aria-hidden="true"
@@ -56,7 +58,7 @@ exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter /
       d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
     />
   </svg>
-</span>
+</div>
 `;
 
 exports[`renderer/components/fields/Tooltip.tsx should render 1`] = `
@@ -64,10 +66,11 @@ exports[`renderer/components/fields/Tooltip.tsx should render 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <span
-        aria-label="tooltip"
-        class="relative"
-        id="tooltip"
+      <div
+        aria-label="test"
+        class="Box-sc-g0xbh4-0 relative"
+        data-testid="tooltip-test"
+        id="test"
       >
         <svg
           aria-hidden="true"
@@ -85,14 +88,15 @@ exports[`renderer/components/fields/Tooltip.tsx should render 1`] = `
             d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
           />
         </svg>
-      </span>
+      </div>
     </div>
   </body>,
   "container": <div>
-    <span
-      aria-label="tooltip"
-      class="relative"
-      id="tooltip"
+    <div
+      aria-label="test"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-test"
+      id="test"
     >
       <svg
         aria-hidden="true"
@@ -110,7 +114,7 @@ exports[`renderer/components/fields/Tooltip.tsx should render 1`] = `
           d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
         />
       </svg>
-    </span>
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/components/notifications/AccountNotifications.tsx b/src/renderer/components/notifications/AccountNotifications.tsx
index db2f0fabc..a749bfaae 100644
--- a/src/renderer/components/notifications/AccountNotifications.tsx
+++ b/src/renderer/components/notifications/AccountNotifications.tsx
@@ -1,7 +1,7 @@
 import { type FC, type MouseEvent, useContext, useMemo, useState } from 'react';
 
 import { GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react';
-import { Button, IconButton } from '@primer/react';
+import { Box, Button, Stack } from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { type Account, type GitifyError, Size } from '../../types';
@@ -16,6 +16,7 @@ import {
 import { AllRead } from '../AllRead';
 import { Oops } from '../Oops';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
+import { HoverButton } from '../primitives/HoverButton';
 import { HoverGroup } from '../primitives/HoverGroup';
 import { NotificationRow } from './NotificationRow';
 import { RepositoryNotifications } from './RepositoryNotifications';
@@ -34,6 +35,9 @@ export const AccountNotifications: FC<IAccountNotifications> = (
 
   const { settings } = useContext(AppContext);
 
+  const [showAccountNotifications, setShowAccountNotifications] =
+    useState(true);
+
   const groupedNotifications = Object.values(
     notifications.reduce(
       (acc: { [key: string]: Notification[] }, notification) => {
@@ -51,10 +55,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
     [notifications],
   );
 
-  const [showAccountNotifications, setShowAccountNotifications] =
-    useState(true);
-
-  const toggleAccountNotifications = () => {
+  const actionToggleAccountNotifications = () => {
     setShowAccountNotifications(!showAccountNotifications);
   };
 
@@ -69,70 +70,63 @@ export const AccountNotifications: FC<IAccountNotifications> = (
   return (
     <>
       {showAccountHeader && (
-        <div
+        <Box
           className={cn(
-            'group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold',
+            'group pr-1 py-0.5',
             props.error ? 'bg-gitify-account-error' : 'bg-gitify-account-rest',
           )}
-          onClick={toggleAccountNotifications}
+          onClick={actionToggleAccountNotifications}
         >
-          <Button
-            title="Open account profile"
-            variant="invisible"
-            alignContent="center"
-            count={notifications.length}
-            onClick={(event: MouseEvent<HTMLElement>) => {
-              // Don't trigger onClick of parent element.
-              event.stopPropagation();
-              openAccountProfile(account);
-            }}
-            data-testid="account-profile"
+          <Stack
+            direction="horizontal"
+            align="center"
+            gap="condensed"
+            className="relative"
           >
-            <AvatarWithFallback
-              src={account.user.avatar}
-              alt={account.user.login}
-              name={`@${account.user.login}`}
-              size={Size.MEDIUM}
-            />
-          </Button>
-
-          <HoverGroup>
-            <IconButton
-              aria-label="My Issues"
-              icon={IssueOpenedIcon}
-              size="small"
-              variant="invisible"
-              onClick={(event: MouseEvent<HTMLElement>) => {
-                // Don't trigger onClick of parent element.
-                event.stopPropagation();
-                openGitHubIssues(account.hostname);
-              }}
-              data-testid="account-issues"
-            />
-
-            <IconButton
-              aria-label="My Pull Requests"
-              icon={GitPullRequestIcon}
-              size="small"
+            <Button
+              title="Open account profile"
               variant="invisible"
+              alignContent="center"
+              count={notifications.length}
               onClick={(event: MouseEvent<HTMLElement>) => {
                 // Don't trigger onClick of parent element.
                 event.stopPropagation();
-                openGitHubPulls(account.hostname);
+                openAccountProfile(account);
               }}
-              data-testid="account-pull-requests"
-            />
-
-            <IconButton
-              aria-label={Chevron.label}
-              icon={Chevron.icon}
-              size="small"
-              variant="invisible"
-              onClick={toggleAccountNotifications}
-              data-testid="account-toggle"
-            />
-          </HoverGroup>
-        </div>
+              data-testid="account-profile"
+            >
+              <AvatarWithFallback
+                src={account.user.avatar}
+                alt={account.user.login}
+                name={`@${account.user.login}`}
+                size={Size.MEDIUM}
+              />
+            </Button>
+
+            <HoverGroup bgColor="bg-gitify-account-rest">
+              <HoverButton
+                label="My Issues"
+                icon={IssueOpenedIcon}
+                testid="account-issues"
+                action={() => openGitHubIssues(account.hostname)}
+              />
+
+              <HoverButton
+                label="My Pull Requests"
+                icon={GitPullRequestIcon}
+                testid="account-pull-requests"
+                action={() => openGitHubPulls(account.hostname)}
+              />
+
+              <HoverButton
+                label={Chevron.label}
+                icon={Chevron.icon}
+                testid="account-toggle"
+                action={actionToggleAccountNotifications}
+              />
+            </HoverGroup>
+          </Stack>
+        </Box>
       )}
 
       {showAccountNotifications && (
diff --git a/src/renderer/components/notifications/NotificationHeader.tsx b/src/renderer/components/notifications/NotificationHeader.tsx
index 7863429a7..2e41e7b22 100644
--- a/src/renderer/components/notifications/NotificationHeader.tsx
+++ b/src/renderer/components/notifications/NotificationHeader.tsx
@@ -1,6 +1,6 @@
 import { type FC, type MouseEvent, useContext } from 'react';
 
-import { Box, Stack, Tooltip } from '@primer/react';
+import { Box, Stack } from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { GroupBy, Opacity, Size } from '../../types';
@@ -28,9 +28,10 @@ export const NotificationHeader: FC<INotificationHeader> = ({
 
   return (
     groupByDate && (
-      <Stack direction="horizontal" align="center" gap="condensed">
-        <Tooltip text={`View repository: ${repoSlug}`} direction="se">
+      <Box className="py-0.5">
+        <Stack direction="horizontal" align="center" gap="condensed">
           <Box
+            title="Open repository"
             className="text-xs font-medium"
             onClick={(event: MouseEvent<HTMLElement>) => {
               // Don't trigger onClick of parent element.
@@ -47,17 +48,17 @@ export const NotificationHeader: FC<INotificationHeader> = ({
               userType={notification.repository.owner.type}
             />
           </Box>
-        </Tooltip>
-        <Box
-          className={cn(
-            'text-xxs',
-            Opacity.READ,
-            !settings.showNumber && 'hidden',
-          )}
-        >
-          {notificationNumber}
-        </Box>
-      </Stack>
+          <Box
+            className={cn(
+              'text-xxs',
+              Opacity.READ,
+              !settings.showNumber && 'hidden',
+            )}
+          >
+            {notificationNumber}
+          </Box>
+        </Stack>
+      </Box>
     )
   );
 };
diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx
index 82c68e8ff..31dd24b1f 100644
--- a/src/renderer/components/notifications/NotificationRow.tsx
+++ b/src/renderer/components/notifications/NotificationRow.tsx
@@ -1,13 +1,7 @@
-import {
-  type FC,
-  type MouseEvent,
-  useCallback,
-  useContext,
-  useState,
-} from 'react';
+import { type FC, useCallback, useContext, useState } from 'react';
 
 import { BellSlashIcon, CheckIcon, ReadIcon } from '@primer/octicons-react';
-import { Box, IconButton, Stack, Text, Tooltip } from '@primer/react';
+import { Box, Stack, Text, Tooltip } from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { GroupBy, Opacity, Size } from '../../types';
@@ -20,6 +14,7 @@ import {
   getNotificationTypeIconColor,
 } from '../../utils/icons';
 import { openNotification } from '../../utils/links';
+import { HoverButton } from '../primitives/HoverButton';
 import { HoverGroup } from '../primitives/HoverGroup';
 import { NotificationFooter } from './NotificationFooter';
 import { NotificationHeader } from './NotificationHeader';
@@ -62,10 +57,19 @@ export const NotificationRow: FC<INotificationRow> = ({
     settings,
   ]);
 
-  const unsubscribeFromThread = (event: MouseEvent<HTMLElement>) => {
-    // Don't trigger onClick of parent element.
-    event.stopPropagation();
+  const actionMarkAsDone = () => {
+    setAnimateExit(!settings.delayNotificationState);
+    setShowAsRead(settings.delayNotificationState);
+    markNotificationsAsDone([notification]);
+  };
+
+  const actionMarkAsRead = () => {
+    setAnimateExit(!settings.delayNotificationState);
+    setShowAsRead(settings.delayNotificationState);
+    markNotificationsAsRead([notification]);
+  };
 
+  const actionUnsubscribeFromThread = () => {
     unsubscribeNotification(notification);
   };
 
@@ -82,7 +86,7 @@ export const NotificationRow: FC<INotificationRow> = ({
     : '';
 
   const notificationTitle =
-    `${notification.subject.title} ${notificationNumber}`.trim();
+    `${notification.subject.title} ${notificationNumber && `[${notificationNumber}]`}`.trim();
 
   const groupByDate = settings.groupBy === GroupBy.DATE;
 
@@ -111,7 +115,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         <Stack
           direction="vertical"
           gap="none"
-          className="cursor-pointer truncate w-full mr-1"
+          className="cursor-pointer truncate w-full"
           onClick={() => handleNotification()}
         >
           <NotificationHeader notification={notification} />
@@ -122,7 +126,7 @@ export const NotificationRow: FC<INotificationRow> = ({
             justify="space-between"
             gap="condensed"
             title={notificationTitle}
-            className="text-sm mb-1 truncate"
+            className="text-sm mb-0.5 truncate"
             data-testid="notification-row"
           >
             <Text className="block truncate flex-shrink overflow-ellipsis">
@@ -130,7 +134,7 @@ export const NotificationRow: FC<INotificationRow> = ({
             </Text>
             <Text
               className={cn(
-                'text-xxs ml-auto',
+                'text-xxs ml-auto mr-2',
                 Opacity.READ,
                 (groupByDate || !settings.showNumber) && 'hidden',
               )}
@@ -143,42 +147,27 @@ export const NotificationRow: FC<INotificationRow> = ({
         </Stack>
 
         {!animateExit && (
-          <HoverGroup>
-            {isMarkAsDoneFeatureSupported(notification.account) && (
-              <IconButton
-                aria-label="Mark as done"
-                icon={CheckIcon}
-                size="small"
-                variant="invisible"
-                onClick={() => {
-                  setAnimateExit(!settings.delayNotificationState);
-                  setShowAsRead(settings.delayNotificationState);
-                  markNotificationsAsDone([notification]);
-                }}
-                data-testid="notification-mark-as-done"
-              />
-            )}
-
-            <IconButton
-              aria-label="Mark as read"
+          <HoverGroup bgColor="bg-gitify-notification-hover">
+            <HoverButton
+              label="Mark as done"
+              icon={CheckIcon}
+              enabled={isMarkAsDoneFeatureSupported(notification.account)}
+              testid="notification-mark-as-done"
+              action={actionMarkAsDone}
+            />
+
+            <HoverButton
+              label="Mark as read"
               icon={ReadIcon}
-              size="small"
-              variant="invisible"
-              onClick={() => {
-                setAnimateExit(!settings.delayNotificationState);
-                setShowAsRead(settings.delayNotificationState);
-                markNotificationsAsRead([notification]);
-              }}
-              data-testid="notification-mark-as-read"
+              testid="notification-mark-as-read"
+              action={actionMarkAsRead}
             />
 
-            <IconButton
-              aria-label="Unsubscribe from thread"
+            <HoverButton
+              label="Unsubscribe from thread"
               icon={BellSlashIcon}
-              size="small"
-              variant="invisible"
-              onClick={unsubscribeFromThread}
-              data-testid="notification-unsubscribe-from-thread"
+              testid="notification-unsubscribe-from-thread"
+              action={actionUnsubscribeFromThread}
             />
           </HoverGroup>
         )}
diff --git a/src/renderer/components/notifications/RepositoryNotifications.test.tsx b/src/renderer/components/notifications/RepositoryNotifications.test.tsx
index 2aadeb17b..72cb19b65 100644
--- a/src/renderer/components/notifications/RepositoryNotifications.test.tsx
+++ b/src/renderer/components/notifications/RepositoryNotifications.test.tsx
@@ -47,7 +47,7 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () =>
       </AppContext.Provider>,
     );
 
-    fireEvent.click(screen.getByText(props.repoName));
+    fireEvent.click(screen.getByTestId('open-repository'));
 
     expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
     expect(openExternalLinkMock).toHaveBeenCalledWith(
@@ -64,7 +64,7 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () =>
       </AppContext.Provider>,
     );
 
-    fireEvent.click(screen.getByLabelText('Mark repository as read'));
+    fireEvent.click(screen.getByTestId('repository-mark-as-read'));
 
     expect(markNotificationsAsRead).toHaveBeenCalledWith(
       mockGitHubNotifications,
@@ -80,7 +80,7 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () =>
       </AppContext.Provider>,
     );
 
-    fireEvent.click(screen.getByLabelText('Mark repository as done'));
+    fireEvent.click(screen.getByTestId('repository-mark-as-done'));
 
     expect(markNotificationsAsDone).toHaveBeenCalledWith(
       mockGitHubNotifications,
@@ -103,7 +103,7 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () =>
       render(<RepositoryNotifications {...props} />);
     });
 
-    fireEvent.click(screen.getByLabelText('Hide repository notifications'));
+    fireEvent.click(screen.getByTestId('repository-toggle'));
 
     const tree = render(<RepositoryNotifications {...props} />);
     expect(tree).toMatchSnapshot();
diff --git a/src/renderer/components/notifications/RepositoryNotifications.tsx b/src/renderer/components/notifications/RepositoryNotifications.tsx
index 1714f6a52..ec227e663 100644
--- a/src/renderer/components/notifications/RepositoryNotifications.tsx
+++ b/src/renderer/components/notifications/RepositoryNotifications.tsx
@@ -1,5 +1,5 @@
 import { CheckIcon, ReadIcon } from '@primer/octicons-react';
-import { Button, IconButton } from '@primer/react';
+import { Box, Button, Stack } from '@primer/react';
 import { type FC, type MouseEvent, useContext, useState } from 'react';
 
 import { AppContext } from '../../context/App';
@@ -10,6 +10,7 @@ import { isMarkAsDoneFeatureSupported } from '../../utils/features';
 import { getChevronDetails } from '../../utils/helpers';
 import { openRepository } from '../../utils/links';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
+import { HoverButton } from '../primitives/HoverButton';
 import { HoverGroup } from '../primitives/HoverGroup';
 import { NotificationRow } from './NotificationRow';
 
@@ -31,7 +32,19 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
 
   const avatarUrl = repoNotifications[0].repository.owner.avatar_url;
 
-  const toggleRepositoryNotifications = () => {
+  const actionMarkAsDone = () => {
+    setAnimateExit(!settings.delayNotificationState);
+    setShowAsRead(settings.delayNotificationState);
+    markNotificationsAsDone(repoNotifications);
+  };
+
+  const actionMarkAsRead = () => {
+    setAnimateExit(!settings.delayNotificationState);
+    setShowAsRead(settings.delayNotificationState);
+    markNotificationsAsRead(repoNotifications);
+  };
+
+  const actionToggleRepositoryNotifications = () => {
     setShowRepositoryNotifications(!showRepositoryNotifications);
   };
 
@@ -43,17 +56,21 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
 
   return (
     <>
-      <div
-        className="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
-        onClick={toggleRepositoryNotifications}
+      <Box
+        className={cn(
+          'group pr-1 py-0.5',
+          'bg-gitify-repository',
+          animateExit &&
+            'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
+          showAsRead && Opacity.READ,
+        )}
+        onClick={actionToggleRepositoryNotifications}
       >
-        <div
-          className={cn(
-            'flex flex-1 gap-3 items-center truncate text-sm font-medium',
-            animateExit &&
-              'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
-            showAsRead && Opacity.READ,
-          )}
+        <Stack
+          direction="horizontal"
+          align="center"
+          gap="condensed"
+          className="relative"
         >
           <Button
             title="Open repository"
@@ -65,6 +82,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
               event.stopPropagation();
               openRepository(repoNotifications[0].repository);
             }}
+            data-testid="open-repository"
           >
             <AvatarWithFallback
               src={avatarUrl}
@@ -74,50 +92,36 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
               userType={repoNotifications[0].repository.owner.type}
             />
           </Button>
-        </div>
 
-        {!animateExit && (
-          <HoverGroup>
-            {isMarkAsDoneFeatureSupported(repoNotifications[0].account) && (
-              <IconButton
-                aria-label="Mark repository as done"
+          {!animateExit && (
+            <HoverGroup bgColor="bg-gitify-repository">
+              <HoverButton
+                label="Mark repository as done"
                 icon={CheckIcon}
-                size="small"
-                variant="invisible"
-                onClick={(event: MouseEvent<HTMLElement>) => {
-                  // Don't trigger onClick of parent element.
-                  event.stopPropagation();
-                  setAnimateExit(!settings.delayNotificationState);
-                  setShowAsRead(settings.delayNotificationState);
-                  markNotificationsAsDone(repoNotifications);
-                }}
+                enabled={isMarkAsDoneFeatureSupported(
+                  repoNotifications[0].account,
+                )}
+                testid="repository-mark-as-done"
+                action={actionMarkAsDone}
               />
-            )}
 
-            <IconButton
-              aria-label="Mark repository as read"
-              icon={ReadIcon}
-              size="small"
-              variant="invisible"
-              onClick={(event: MouseEvent<HTMLElement>) => {
-                // Don't trigger onClick of parent element.
-                event.stopPropagation();
-                setAnimateExit(!settings.delayNotificationState);
-                setShowAsRead(settings.delayNotificationState);
-                markNotificationsAsRead(repoNotifications);
-              }}
-            />
+              <HoverButton
+                label="Mark repository as read"
+                icon={ReadIcon}
+                testid="repository-mark-as-read"
+                action={actionMarkAsRead}
+              />
 
-            <IconButton
-              aria-label={Chevron.label}
-              icon={Chevron.icon}
-              size="small"
-              variant="invisible"
-              onClick={toggleRepositoryNotifications}
-            />
-          </HoverGroup>
-        )}
-      </div>
+              <HoverButton
+                label={Chevron.label}
+                icon={Chevron.icon}
+                testid="repository-toggle"
+                action={actionToggleRepositoryNotifications}
+              />
+            </HoverGroup>
+          )}
+        </Stack>
+      </Box>
 
       {showRepositoryNotifications &&
         repoNotifications.map((notification) => (
diff --git a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
index fc7ebf050..bbce270de 100644
--- a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
@@ -6,10 +6,280 @@ 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 bg-gitify-account-error"
+        class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-account-error"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <button
+            aria-describedby=":r13:-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 truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
+                >
+                  <img
+                    alt="octocat"
+                    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 block truncate flex-shrink overflow-ellipsis"
+                  >
+                    @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 absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
+            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"
+              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=":r14:"
+              popover="auto"
+            >
+              My Issues
+            </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"
+              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=":r16:"
+              popover="auto"
+            >
+              My Pull Requests
+            </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-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=":r18:"
+              popover="auto"
+            >
+              No notifications for account
+            </span>
+          </div>
+        </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>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-account-error"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
         <button
-          aria-describedby=":r15:-loading-announcement"
+          aria-describedby=":r13:-loading-announcement"
           class="types__StyledButton-sc-ws60qy-0 kQRupk"
           data-loading="false"
           data-no-visuals="true"
@@ -27,7 +297,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               data-component="text"
             >
               <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                 data-align="center"
                 data-direction="horizontal"
                 data-gap="condensed"
@@ -47,7 +317,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                   width="16"
                 />
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                 >
                   @octocat
                 </span>
@@ -77,7 +347,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </span>
         </button>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -86,8 +356,8 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":r17:-loading-announcement"
-            aria-labelledby=":r16:"
+            aria-describedby=":r15:-loading-announcement"
+            aria-labelledby=":r14:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -121,14 +391,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r16:"
+            id=":r14:"
             popover="auto"
           >
             My Issues
           </span>
           <button
-            aria-describedby=":r19:-loading-announcement"
-            aria-labelledby=":r18:"
+            aria-describedby=":r17:-loading-announcement"
+            aria-labelledby=":r16:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -159,14 +429,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r18:"
+            id=":r16:"
             popover="auto"
           >
             My Pull Requests
           </span>
           <button
-            aria-describedby=":r1b:-loading-announcement"
-            aria-labelledby=":r1a:"
+            aria-describedby=":r19:-loading-announcement"
+            aria-labelledby=":r18:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -197,287 +467,37 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r1a:"
+            id=":r18:"
             popover="auto"
           >
             No notifications for account
           </span>
         </div>
       </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="spacious"
+        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="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>
-  </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-testid="avatar"
-              data-wrap="nowrap"
-            >
-              <img
-                alt="octocat"
-                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-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
-        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-gap="spacious"
+          data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
@@ -565,202 +585,212 @@ 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 bg-gitify-account-rest"
+        class="Box-sc-g0xbh4-0 group pr-1 py-0.5 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-testid="avatar"
-                data-wrap="nowrap"
-              >
-                <img
-                  alt="octocat"
-                  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-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
           data-align="center"
           data-direction="horizontal"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":r9:-loading-announcement"
-            aria-labelledby=":r8:"
+            aria-describedby=":r7:-loading-announcement"
             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="account-profile"
             sx="[object Object]"
+            title="Open account profile"
             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"
+            <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>
+              <span
+                data-component="text"
+              >
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
+                >
+                  <img
+                    alt="octocat"
+                    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 block truncate flex-shrink overflow-ellipsis"
+                  >
+                    @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>
-          <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"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <svg
+            <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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":r8:"
+              popover="auto"
             >
-              <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
+              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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":ra:"
+              popover="auto"
             >
-              <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>
+              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>
       <div
@@ -803,7 +833,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             </svg>
           </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
             data-align="stretch"
             data-direction="vertical"
             data-gap="none"
@@ -812,26 +842,24 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             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"
+              class="Box-sc-g0xbh4-0 py-0.5"
             >
-              <span
-                aria-label="View repository: gitify-app/notifications-test"
-                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-                id=":rf:"
-                role="tooltip"
+              <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"
               >
                 <div
                   class="Box-sc-g0xbh4-0 text-xs font-medium"
                   data-testid="view-repository"
+                  title="Open repository"
                 >
                   <div
-                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                     data-align="center"
                     data-direction="horizontal"
                     data-gap="condensed"
@@ -851,19 +879,19 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                       width="14"
                     />
                     <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
+                      class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                     >
                       gitify-app/notifications-test
                     </span>
                   </div>
                 </div>
-              </span>
-              <div
-                class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-              />
+                <div
+                  class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+                />
+              </div>
             </div>
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
               data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
@@ -879,7 +907,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                 I am a robot and this is a test!
               </span>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto mr-2 opacity-50 hidden"
               />
             </div>
             <div
@@ -897,7 +925,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                 title="gitify-app"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -1021,7 +1049,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover"
             data-align="center"
             data-direction="horizontal"
             data-gap="none"
@@ -1030,8 +1058,8 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             data-wrap="nowrap"
           >
             <button
-              aria-describedby=":rh:-loading-announcement"
-              aria-labelledby=":rg:"
+              aria-describedby=":rg:-loading-announcement"
+              aria-labelledby=":rf:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1062,14 +1090,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":rg:"
+              id=":rf:"
               popover="auto"
             >
               Mark as done
             </span>
             <button
-              aria-describedby=":rj:-loading-announcement"
-              aria-labelledby=":ri:"
+              aria-describedby=":ri:-loading-announcement"
+              aria-labelledby=":rh:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1100,14 +1128,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":ri:"
+              id=":rh:"
               popover="auto"
             >
               Mark as read
             </span>
             <button
-              aria-describedby=":rl:-loading-announcement"
-              aria-labelledby=":rk:"
+              aria-describedby=":rk:-loading-announcement"
+              aria-labelledby=":rj:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1138,7 +1166,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":rk:"
+              id=":rj:"
               popover="auto"
             >
               Unsubscribe from thread
@@ -1162,7 +1190,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           <span
             aria-label=" Issue"
             class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-            id=":rm:"
+            id=":rl:"
             role="tooltip"
           >
             <svg
@@ -1186,7 +1214,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             </svg>
           </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
             data-align="stretch"
             data-direction="vertical"
             data-gap="none"
@@ -1195,26 +1223,24 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             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"
+              class="Box-sc-g0xbh4-0 py-0.5"
             >
-              <span
-                aria-label="View repository: gitify-app/notifications-test"
-                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-                id=":rn:"
-                role="tooltip"
+              <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"
               >
                 <div
                   class="Box-sc-g0xbh4-0 text-xs font-medium"
                   data-testid="view-repository"
+                  title="Open repository"
                 >
                   <div
-                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                     data-align="center"
                     data-direction="horizontal"
                     data-gap="condensed"
@@ -1234,19 +1260,19 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                       width="14"
                     />
                     <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
+                      class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                     >
                       gitify-app/notifications-test
                     </span>
                   </div>
                 </div>
-              </span>
-              <div
-                class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-              />
+                <div
+                  class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+                />
+              </div>
             </div>
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
               data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
@@ -1262,7 +1288,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                 Improve the UI
               </span>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto mr-2 opacity-50 hidden"
               />
             </div>
             <div
@@ -1275,7 +1301,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               data-wrap="wrap"
             >
               <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                 data-align="center"
                 data-direction="horizontal"
                 data-gap="condensed"
@@ -1329,7 +1355,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover"
             data-align="center"
             data-direction="horizontal"
             data-gap="none"
@@ -1338,8 +1364,8 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             data-wrap="nowrap"
           >
             <button
-              aria-describedby=":rp:-loading-announcement"
-              aria-labelledby=":ro:"
+              aria-describedby=":rn:-loading-announcement"
+              aria-labelledby=":rm:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1370,14 +1396,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":ro:"
+              id=":rm:"
               popover="auto"
             >
               Mark as done
             </span>
             <button
-              aria-describedby=":rr:-loading-announcement"
-              aria-labelledby=":rq:"
+              aria-describedby=":rp:-loading-announcement"
+              aria-labelledby=":ro:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1408,14 +1434,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":rq:"
+              id=":ro:"
               popover="auto"
             >
               Mark as read
             </span>
             <button
-              aria-describedby=":rt:-loading-announcement"
-              aria-labelledby=":rs:"
+              aria-describedby=":rr:-loading-announcement"
+              aria-labelledby=":rq:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1446,7 +1472,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":rs:"
+              id=":rq:"
               popover="auto"
             >
               Unsubscribe from thread
@@ -1458,213 +1484,223 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
+      class="Box-sc-g0xbh4-0 group pr-1 py-0.5 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"
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <span
-          class="Box-sc-g0xbh4-0 srpGE"
-          data-component="buttonContent"
+        <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
-            data-component="text"
+            class="Box-sc-g0xbh4-0 srpGE"
+            data-component="buttonContent"
+            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-testid="avatar"
-              data-wrap="nowrap"
+            <span
+              data-component="text"
             >
-              <img
-                alt="octocat"
-                class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
-                data-component="Avatar"
-                height="16"
-                size="16"
-                src="https://avatars.githubusercontent.com/u/583231?v=4"
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-testid="avatar"
+                data-wrap="nowrap"
+              >
+                <img
+                  alt="octocat"
+                  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 block truncate flex-shrink overflow-ellipsis"
+                >
+                  @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]"
-                width="16"
-              />
+              >
+                2
+              </span>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
               >
-                @octocat
+                 (
+                2
+                )
               </span>
-            </div>
+            </span>
           </span>
+        </button>
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
+          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
-            class="Box-sc-g0xbh4-0 mhHOW"
-            data-component="trailingVisual"
+            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"
           >
-            <span
+            <svg
               aria-hidden="true"
-              class="Box-sc-g0xbh4-0 bfvZWv"
-              data-component="ButtonCounter"
-              sx="[object Object]"
+              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"
             >
-              2
-            </span>
-            <span
-              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+              <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"
             >
-               (
-              2
-              )
-            </span>
+              <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>
-        </span>
-      </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Box-sc-g0xbh4-0 group 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 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
         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="Box-sc-g0xbh4-0 group 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 relative"
-        data-align="center"
-        data-direction="horizontal"
-        data-gap="condensed"
+        data-gap="condensed"
         data-justify="start"
         data-padding="none"
         data-wrap="nowrap"
@@ -1696,7 +1732,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </svg>
         </span>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
           data-align="stretch"
           data-direction="vertical"
           data-gap="none"
@@ -1705,26 +1741,24 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           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"
+            class="Box-sc-g0xbh4-0 py-0.5"
           >
-            <span
-              aria-label="View repository: gitify-app/notifications-test"
-              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-              id=":rf:"
-              role="tooltip"
+            <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"
             >
               <div
                 class="Box-sc-g0xbh4-0 text-xs font-medium"
                 data-testid="view-repository"
+                title="Open repository"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -1744,19 +1778,19 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                     width="14"
                   />
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
                     gitify-app/notifications-test
                   </span>
                 </div>
               </div>
-            </span>
-            <div
-              class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-            />
+              <div
+                class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+              />
+            </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
             data-align="start"
             data-direction="horizontal"
             data-gap="condensed"
@@ -1772,7 +1806,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               I am a robot and this is a test!
             </span>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto mr-2 opacity-50 hidden"
             />
           </div>
           <div
@@ -1790,7 +1824,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               title="gitify-app"
             >
               <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                 data-align="center"
                 data-direction="horizontal"
                 data-gap="condensed"
@@ -1914,7 +1948,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </div>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -1923,8 +1957,8 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":rh:-loading-announcement"
-            aria-labelledby=":rg:"
+            aria-describedby=":rg:-loading-announcement"
+            aria-labelledby=":rf:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -1955,14 +1989,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":rg:"
+            id=":rf:"
             popover="auto"
           >
             Mark as done
           </span>
           <button
-            aria-describedby=":rj:-loading-announcement"
-            aria-labelledby=":ri:"
+            aria-describedby=":ri:-loading-announcement"
+            aria-labelledby=":rh:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -1993,14 +2027,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":ri:"
+            id=":rh:"
             popover="auto"
           >
             Mark as read
           </span>
           <button
-            aria-describedby=":rl:-loading-announcement"
-            aria-labelledby=":rk:"
+            aria-describedby=":rk:-loading-announcement"
+            aria-labelledby=":rj:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -2031,7 +2065,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":rk:"
+            id=":rj:"
             popover="auto"
           >
             Unsubscribe from thread
@@ -2055,7 +2089,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
         <span
           aria-label=" Issue"
           class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-          id=":rm:"
+          id=":rl:"
           role="tooltip"
         >
           <svg
@@ -2079,7 +2113,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </svg>
         </span>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
           data-align="stretch"
           data-direction="vertical"
           data-gap="none"
@@ -2088,26 +2122,24 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           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"
+            class="Box-sc-g0xbh4-0 py-0.5"
           >
-            <span
-              aria-label="View repository: gitify-app/notifications-test"
-              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-              id=":rn:"
-              role="tooltip"
+            <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"
             >
               <div
                 class="Box-sc-g0xbh4-0 text-xs font-medium"
                 data-testid="view-repository"
+                title="Open repository"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -2127,19 +2159,19 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
                     width="14"
                   />
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
                     gitify-app/notifications-test
                   </span>
                 </div>
               </div>
-            </span>
-            <div
-              class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-            />
+              <div
+                class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+              />
+            </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
             data-align="start"
             data-direction="horizontal"
             data-gap="condensed"
@@ -2155,7 +2187,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               Improve the UI
             </span>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto mr-2 opacity-50 hidden"
             />
           </div>
           <div
@@ -2168,7 +2200,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             data-wrap="wrap"
           >
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
               data-align="center"
               data-direction="horizontal"
               data-gap="condensed"
@@ -2222,7 +2254,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </div>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -2231,8 +2263,8 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":rp:-loading-announcement"
-            aria-labelledby=":ro:"
+            aria-describedby=":rn:-loading-announcement"
+            aria-labelledby=":rm:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -2263,14 +2295,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":ro:"
+            id=":rm:"
             popover="auto"
           >
             Mark as done
           </span>
           <button
-            aria-describedby=":rr:-loading-announcement"
-            aria-labelledby=":rq:"
+            aria-describedby=":rp:-loading-announcement"
+            aria-labelledby=":ro:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -2301,14 +2333,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":rq:"
+            id=":ro:"
             popover="auto"
           >
             Mark as read
           </span>
           <button
-            aria-describedby=":rt:-loading-announcement"
-            aria-labelledby=":rs:"
+            aria-describedby=":rr:-loading-announcement"
+            aria-labelledby=":rq:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -2339,7 +2371,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":rs:"
+            id=":rq:"
             popover="auto"
           >
             Unsubscribe from thread
@@ -2408,141 +2440,324 @@ 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 bg-gitify-account-rest"
+        class="Box-sc-g0xbh4-0 group pr-1 py-0.5 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-testid="avatar"
-                data-wrap="nowrap"
-              >
-                <img
-                  alt="octocat"
-                  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-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
           data-align="center"
           data-direction="horizontal"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":r2:-loading-announcement"
-            aria-labelledby=":r1:"
+            aria-describedby=":r0:-loading-announcement"
             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="account-profile"
             sx="[object Object]"
+            title="Open account profile"
             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"
+            <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
-            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"
+              <span
+                data-component="text"
+              >
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
+                >
+                  <img
+                    alt="octocat"
+                    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 block truncate flex-shrink overflow-ellipsis"
+                  >
+                    @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 absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
+            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>
+      <div>
+        Repository Notifications
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-account-rest"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <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 truncate"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-testid="avatar"
+                data-wrap="nowrap"
+              >
+                <img
+                  alt="octocat"
+                  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 block truncate flex-shrink overflow-ellipsis"
+                >
+                  @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 absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
+          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-pull-requests"
+            data-testid="account-issues"
             sx="[object Object]"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-git-pull-request"
+              class="octicon octicon-issue-opened"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2553,7 +2768,10 @@ 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="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>
@@ -2561,26 +2779,26 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r3:"
+            id=":r1:"
             popover="auto"
           >
-            My Pull Requests
+            My Issues
           </span>
           <button
-            aria-describedby=":r6:-loading-announcement"
-            aria-labelledby=":r5:"
+            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-toggle"
+            data-testid="account-pull-requests"
             sx="[object Object]"
             type="button"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-chevron-down"
+              class="octicon octicon-git-pull-request"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -2591,7 +2809,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="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>
@@ -2599,216 +2817,50 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r5:"
+            id=":r3:"
             popover="auto"
           >
-            Hide account notifications
-          </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-testid="avatar"
-              data-wrap="nowrap"
-            >
-              <img
-                alt="octocat"
-                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>
+            My Pull Requests
           </span>
-          <span
-            class="Box-sc-g0xbh4-0 mhHOW"
-            data-component="trailingVisual"
+          <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"
           >
-            <span
+            <svg
               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"
+              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"
             >
-               (
-              2
-              )
-            </span>
-          </span>
-        </span>
-      </button>
-      <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
-        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
+              <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="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"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":r5:"
+            popover="auto"
           >
-            <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>
+            Hide account notifications
+          </span>
+        </div>
       </div>
     </div>
     <div>
@@ -2875,202 +2927,212 @@ 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 bg-gitify-account-rest"
+        class="Box-sc-g0xbh4-0 group pr-1 py-0.5 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"
-        >
-          <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-testid="avatar"
-                data-wrap="nowrap"
-              >
-                <img
-                  alt="octocat"
-                  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-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
           data-align="center"
           data-direction="horizontal"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":r10:-loading-announcement"
-            aria-labelledby=":rv:"
+            aria-describedby=":rs:-loading-announcement"
             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="account-profile"
             sx="[object Object]"
+            title="Open account profile"
             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"
+            <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>
+              <span
+                data-component="text"
+              >
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
+                >
+                  <img
+                    alt="octocat"
+                    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 block truncate flex-shrink overflow-ellipsis"
+                  >
+                    @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>
-          <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"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <svg
+            <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"
+              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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":rt:"
+              popover="auto"
             >
-              <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
+              My Issues
+            </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"
+              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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":rv:"
+              popover="auto"
             >
-              <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>
+              My Pull Requests
+            </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-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=":r11:"
+              popover="auto"
+            >
+              No notifications for account
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -3121,202 +3183,212 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
+      class="Box-sc-g0xbh4-0 group pr-1 py-0.5 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"
-      >
-        <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-testid="avatar"
-              data-wrap="nowrap"
-            >
-              <img
-                alt="octocat"
-                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-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
         data-align="center"
         data-direction="horizontal"
-        data-gap="none"
+        data-gap="condensed"
         data-justify="start"
         data-padding="none"
         data-wrap="nowrap"
       >
         <button
-          aria-describedby=":r10:-loading-announcement"
-          aria-labelledby=":rv:"
+          aria-describedby=":rs:-loading-announcement"
           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="account-profile"
           sx="[object Object]"
+          title="Open account profile"
           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"
+          <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>
+            <span
+              data-component="text"
+            >
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-testid="avatar"
+                data-wrap="nowrap"
+              >
+                <img
+                  alt="octocat"
+                  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 block truncate flex-shrink overflow-ellipsis"
+                >
+                  @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>
-        <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"
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="none"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <svg
+          <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"
+            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="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"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rt:"
+            popover="auto"
           >
-            <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
+            My Issues
+          </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"
+            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="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"
+            class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+            data-direction="s"
+            id=":rv:"
+            popover="auto"
           >
-            <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>
+            My Pull Requests
+          </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-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=":r11:"
+            popover="auto"
+          >
+            No notifications for account
+          </span>
+        </div>
       </div>
     </div>
     <div
@@ -3424,211 +3496,445 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
+        class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-account-rest"
       >
-        <button
-          aria-describedby=":r21:-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"
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <span
-            class="Box-sc-g0xbh4-0 srpGE"
-            data-component="buttonContent"
+          <button
+            aria-describedby=":r1v:-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
-              data-component="text"
+              class="Box-sc-g0xbh4-0 srpGE"
+              data-component="buttonContent"
+              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-testid="avatar"
-                data-wrap="nowrap"
+              <span
+                data-component="text"
               >
-                <img
-                  alt="octocat"
-                  class="Avatar__StyledAvatar-sc-2lv0r8-0 kuZlm"
-                  data-component="Avatar"
-                  height="16"
-                  size="16"
-                  src="https://avatars.githubusercontent.com/u/583231?v=4"
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
+                >
+                  <img
+                    alt="octocat"
+                    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 block truncate flex-shrink overflow-ellipsis"
+                  >
+                    @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]"
-                  width="16"
-                />
+                >
+                  2
+                </span>
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
                 >
-                  @octocat
+                   (
+                  2
+                  )
                 </span>
-              </div>
+              </span>
             </span>
+          </button>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <button
+              aria-describedby=":r21:-loading-announcement"
+              aria-labelledby=":r20:"
+              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
-              class="Box-sc-g0xbh4-0 mhHOW"
-              data-component="trailingVisual"
+              aria-hidden="true"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":r20:"
+              popover="auto"
+            >
+              My Issues
+            </span>
+            <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-pull-requests"
               sx="[object Object]"
+              type="button"
             >
-              <span
+              <svg
                 aria-hidden="true"
-                class="Box-sc-g0xbh4-0 bfvZWv"
-                data-component="ButtonCounter"
-                sx="[object Object]"
+                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"
               >
-                2
-              </span>
-              <span
-                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hxuUuW"
+                <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=":r22:"
+              popover="auto"
+            >
+              My Pull Requests
+            </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-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"
               >
-                 (
-                2
-                )
-              </span>
+                <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=":r24:"
+              popover="auto"
+            >
+              Show account notifications
             </span>
-          </span>
-        </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-account-rest"
+      >
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
           data-align="center"
           data-direction="horizontal"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":r23:-loading-announcement"
-            aria-labelledby=":r22:"
+            aria-describedby=":r26:-loading-announcement"
             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="account-profile"
             sx="[object Object]"
+            title="Open account profile"
             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"
+            <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>
+              <span
+                data-component="text"
+              >
+                <div
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  data-wrap="nowrap"
+                >
+                  <img
+                    alt="octocat"
+                    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 block truncate flex-shrink overflow-ellipsis"
+                  >
+                    @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>
-          <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"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <svg
+            <button
+              aria-describedby=":r28:-loading-announcement"
+              aria-labelledby=":r27:"
+              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=":r27:"
+              popover="auto"
+            >
+              My Issues
+            </span>
+            <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-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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":r29:"
+              popover="auto"
             >
-              <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
-          </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
+              My Pull Requests
+            </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-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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":r2b:"
+              popover="auto"
             >
-              <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"
-          >
-            Show account notifications
-          </span>
+              Hide account notifications
+            </span>
+          </div>
         </div>
       </div>
+      <div>
+        Repository Notifications
+      </div>
     </div>
-    <div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-account-rest"
+    >
       <div
-        class="group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold bg-gitify-account-rest"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
         <button
-          aria-describedby=":r28:-loading-announcement"
+          aria-describedby=":r26:-loading-announcement"
           class="types__StyledButton-sc-ws60qy-0 kQRupk"
           data-loading="false"
           data-no-visuals="true"
@@ -3646,7 +3952,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
               data-component="text"
             >
               <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                 data-align="center"
                 data-direction="horizontal"
                 data-gap="condensed"
@@ -3666,7 +3972,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
                   width="16"
                 />
                 <span
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                  class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                 >
                   @octocat
                 </span>
@@ -3696,7 +4002,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
           </span>
         </button>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -3705,8 +4011,8 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":r2a:-loading-announcement"
-            aria-labelledby=":r29:"
+            aria-describedby=":r28:-loading-announcement"
+            aria-labelledby=":r27:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -3740,14 +4046,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r29:"
+            id=":r27:"
             popover="auto"
           >
             My Issues
           </span>
           <button
-            aria-describedby=":r2c:-loading-announcement"
-            aria-labelledby=":r2b:"
+            aria-describedby=":r2a:-loading-announcement"
+            aria-labelledby=":r29:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -3778,14 +4084,14 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r2b:"
+            id=":r29:"
             popover="auto"
           >
             My Pull Requests
           </span>
           <button
-            aria-describedby=":r2e:-loading-announcement"
-            aria-labelledby=":r2d:"
+            aria-describedby=":r2c:-loading-announcement"
+            aria-labelledby=":r2b:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -3816,217 +4122,13 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should toggl
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r2d:"
+            id=":r2b:"
             popover="auto"
           >
             Hide account notifications
           </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-testid="avatar"
-              data-wrap="nowrap"
-            >
-              <img
-                alt="octocat"
-                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-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
-        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 a958bc5de..be82bab33 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationFooter.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
           title="gitify-app"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -160,7 +160,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
         title="gitify-app"
       >
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
@@ -357,7 +357,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
           title="gitify-app"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -497,7 +497,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx security alert
         title="gitify-app"
       >
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
@@ -689,7 +689,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
         data-wrap="wrap"
       >
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
@@ -829,7 +829,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should default
       data-wrap="wrap"
     >
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
         data-align="center"
         data-direction="horizontal"
         data-gap="condensed"
@@ -1031,7 +1031,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
           title="gitify-app"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -1171,7 +1171,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
         title="gitify-app"
       >
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
@@ -1368,7 +1368,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
           title="gitify-app"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -1508,7 +1508,7 @@ exports[`renderer/components/notifications/NotificationFooter.tsx should render
         title="gitify-app"
       >
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationHeader.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationHeader.test.tsx.snap
index cc02a60e2..4bc42239e 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationHeader.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationHeader.test.tsx.snap
@@ -6,26 +6,24 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render
   "baseElement": <body>
     <div>
       <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"
+        class="Box-sc-g0xbh4-0 py-0.5"
       >
-        <span
-          aria-label="View repository: gitify-app/notifications-test"
-          class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-          id=":r0:"
-          role="tooltip"
+        <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"
         >
           <div
             class="Box-sc-g0xbh4-0 text-xs font-medium"
             data-testid="view-repository"
+            title="Open repository"
           >
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
               data-align="center"
               data-direction="horizontal"
               data-gap="condensed"
@@ -45,41 +43,39 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render
                 width="14"
               />
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
               >
                 gitify-app/notifications-test
               </span>
             </div>
           </div>
-        </span>
-        <div
-          class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-        />
+          <div
+            class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+          />
+        </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <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"
+      class="Box-sc-g0xbh4-0 py-0.5"
     >
-      <span
-        aria-label="View repository: gitify-app/notifications-test"
-        class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-        id=":r0:"
-        role="tooltip"
+      <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"
       >
         <div
           class="Box-sc-g0xbh4-0 text-xs font-medium"
           data-testid="view-repository"
+          title="Open repository"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -99,16 +95,16 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render
               width="14"
             />
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
             >
               gitify-app/notifications-test
             </span>
           </div>
         </div>
-      </span>
-      <div
-        class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-      />
+        <div
+          class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+        />
+      </div>
     </div>
   </div>,
   "debug": [Function],
@@ -171,26 +167,24 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render
   "baseElement": <body>
     <div>
       <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"
+        class="Box-sc-g0xbh4-0 py-0.5"
       >
-        <span
-          aria-label="View repository: gitify-app/notifications-test"
-          class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-          id=":r1:"
-          role="tooltip"
+        <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"
         >
           <div
             class="Box-sc-g0xbh4-0 text-xs font-medium"
             data-testid="view-repository"
+            title="Open repository"
           >
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
               data-align="center"
               data-direction="horizontal"
               data-gap="condensed"
@@ -210,41 +204,39 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render
                 width="14"
               />
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
               >
                 gitify-app/notifications-test
               </span>
             </div>
           </div>
-        </span>
-        <div
-          class="Box-sc-g0xbh4-0 text-xxs opacity-50 hidden"
-        />
+          <div
+            class="Box-sc-g0xbh4-0 text-xxs opacity-50 hidden"
+          />
+        </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <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"
+      class="Box-sc-g0xbh4-0 py-0.5"
     >
-      <span
-        aria-label="View repository: gitify-app/notifications-test"
-        class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-        id=":r1:"
-        role="tooltip"
+      <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"
       >
         <div
           class="Box-sc-g0xbh4-0 text-xs font-medium"
           data-testid="view-repository"
+          title="Open repository"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -264,16 +256,16 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render
               width="14"
             />
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
             >
               gitify-app/notifications-test
             </span>
           </div>
         </div>
-      </span>
-      <div
-        class="Box-sc-g0xbh4-0 text-xxs opacity-50 hidden"
-      />
+        <div
+          class="Box-sc-g0xbh4-0 text-xxs opacity-50 hidden"
+        />
+      </div>
     </div>
   </div>,
   "debug": [Function],
@@ -336,26 +328,24 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render
   "baseElement": <body>
     <div>
       <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"
+        class="Box-sc-g0xbh4-0 py-0.5"
       >
-        <span
-          aria-label="View repository: gitify-app/notifications-test"
-          class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-          id=":r2:"
-          role="tooltip"
+        <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"
         >
           <div
             class="Box-sc-g0xbh4-0 text-xs font-medium"
             data-testid="view-repository"
+            title="Open repository"
           >
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
               data-align="center"
               data-direction="horizontal"
               data-gap="condensed"
@@ -375,41 +365,39 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render
                 width="14"
               />
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ"
+                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
               >
                 gitify-app/notifications-test
               </span>
             </div>
           </div>
-        </span>
-        <div
-          class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-        />
+          <div
+            class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+          />
+        </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <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"
+      class="Box-sc-g0xbh4-0 py-0.5"
     >
-      <span
-        aria-label="View repository: gitify-app/notifications-test"
-        class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-        id=":r2:"
-        role="tooltip"
+      <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"
       >
         <div
           class="Box-sc-g0xbh4-0 text-xs font-medium"
           data-testid="view-repository"
+          title="Open repository"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
@@ -429,16 +417,16 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render
               width="14"
             />
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ"
+              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
             >
               gitify-app/notifications-test
             </span>
           </div>
         </div>
-      </span>
-      <div
-        class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-      />
+        <div
+          class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+        />
+      </div>
     </div>
   </div>,
   "debug": [Function],
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
index 0fc05bf85..33eb3a69f 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             </svg>
           </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
             data-align="stretch"
             data-direction="vertical"
             data-gap="none"
@@ -54,26 +54,24 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             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"
+              class="Box-sc-g0xbh4-0 py-0.5"
             >
-              <span
-                aria-label="View repository: gitify-app/notifications-test"
-                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-                id=":r1:"
-                role="tooltip"
+              <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"
               >
                 <div
                   class="Box-sc-g0xbh4-0 text-xs font-medium"
                   data-testid="view-repository"
+                  title="Open repository"
                 >
                   <div
-                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                     data-align="center"
                     data-direction="horizontal"
                     data-gap="condensed"
@@ -93,19 +91,19 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                       width="14"
                     />
                     <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
+                      class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                     >
                       gitify-app/notifications-test
                     </span>
                   </div>
                 </div>
-              </span>
-              <div
-                class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-              />
+                <div
+                  class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+                />
+              </div>
             </div>
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
               data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
@@ -121,7 +119,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                 I am a robot and this is a test!
               </span>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto mr-2 opacity-50 hidden"
               />
             </div>
             <div
@@ -139,7 +137,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                 title="gitify-app"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -263,7 +261,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover"
             data-align="center"
             data-direction="horizontal"
             data-gap="none"
@@ -272,8 +270,8 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             data-wrap="nowrap"
           >
             <button
-              aria-describedby=":r3:-loading-announcement"
-              aria-labelledby=":r2:"
+              aria-describedby=":r2:-loading-announcement"
+              aria-labelledby=":r1:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -304,14 +302,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":r2:"
+              id=":r1:"
               popover="auto"
             >
               Mark as done
             </span>
             <button
-              aria-describedby=":r5:-loading-announcement"
-              aria-labelledby=":r4:"
+              aria-describedby=":r4:-loading-announcement"
+              aria-labelledby=":r3:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -342,14 +340,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":r4:"
+              id=":r3:"
               popover="auto"
             >
               Mark as read
             </span>
             <button
-              aria-describedby=":r7:-loading-announcement"
-              aria-labelledby=":r6:"
+              aria-describedby=":r6:-loading-announcement"
+              aria-labelledby=":r5:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -380,7 +378,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":r6:"
+              id=":r5:"
               popover="auto"
             >
               Unsubscribe from thread
@@ -431,7 +429,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </svg>
         </span>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
           data-align="stretch"
           data-direction="vertical"
           data-gap="none"
@@ -440,26 +438,24 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           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"
+            class="Box-sc-g0xbh4-0 py-0.5"
           >
-            <span
-              aria-label="View repository: gitify-app/notifications-test"
-              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
-              id=":r1:"
-              role="tooltip"
+            <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"
             >
               <div
                 class="Box-sc-g0xbh4-0 text-xs font-medium"
                 data-testid="view-repository"
+                title="Open repository"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -479,19 +475,19 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                     width="14"
                   />
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
                     gitify-app/notifications-test
                   </span>
                 </div>
               </div>
-            </span>
-            <div
-              class="Box-sc-g0xbh4-0 text-xxs opacity-50"
-            />
+              <div
+                class="Box-sc-g0xbh4-0 text-xxs opacity-50"
+              />
+            </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
             data-align="start"
             data-direction="horizontal"
             data-gap="condensed"
@@ -507,7 +503,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               I am a robot and this is a test!
             </span>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto mr-2 opacity-50 hidden"
             />
           </div>
           <div
@@ -525,7 +521,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               title="gitify-app"
             >
               <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                 data-align="center"
                 data-direction="horizontal"
                 data-gap="condensed"
@@ -649,7 +645,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </div>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -658,8 +654,8 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":r3:-loading-announcement"
-            aria-labelledby=":r2:"
+            aria-describedby=":r2:-loading-announcement"
+            aria-labelledby=":r1:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -690,14 +686,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r2:"
+            id=":r1:"
             popover="auto"
           >
             Mark as done
           </span>
           <button
-            aria-describedby=":r5:-loading-announcement"
-            aria-labelledby=":r4:"
+            aria-describedby=":r4:-loading-announcement"
+            aria-labelledby=":r3:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -728,14 +724,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r4:"
+            id=":r3:"
             popover="auto"
           >
             Mark as read
           </span>
           <button
-            aria-describedby=":r7:-loading-announcement"
-            aria-labelledby=":r6:"
+            aria-describedby=":r6:-loading-announcement"
+            aria-labelledby=":r5:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -766,7 +762,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r6:"
+            id=":r5:"
             popover="auto"
           >
             Unsubscribe from thread
@@ -850,7 +846,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           <span
             aria-label="Open Issue"
             class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-            id=":r8:"
+            id=":r7:"
             role="tooltip"
           >
             <svg
@@ -874,7 +870,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             </svg>
           </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
             data-align="stretch"
             data-direction="vertical"
             data-gap="none"
@@ -883,7 +879,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             data-wrap="nowrap"
           >
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
               data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
@@ -899,7 +895,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                 I am a robot and this is a test!
               </span>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto mr-2 opacity-50"
               />
             </div>
             <div
@@ -917,7 +913,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                 title="gitify-app"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -1041,7 +1037,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover"
             data-align="center"
             data-direction="horizontal"
             data-gap="none"
@@ -1050,8 +1046,8 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             data-wrap="nowrap"
           >
             <button
-              aria-describedby=":ra:-loading-announcement"
-              aria-labelledby=":r9:"
+              aria-describedby=":r9:-loading-announcement"
+              aria-labelledby=":r8:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1082,14 +1078,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":r9:"
+              id=":r8:"
               popover="auto"
             >
               Mark as done
             </span>
             <button
-              aria-describedby=":rc:-loading-announcement"
-              aria-labelledby=":rb:"
+              aria-describedby=":rb:-loading-announcement"
+              aria-labelledby=":ra:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1120,14 +1116,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":rb:"
+              id=":ra:"
               popover="auto"
             >
               Mark as read
             </span>
             <button
-              aria-describedby=":re:-loading-announcement"
-              aria-labelledby=":rd:"
+              aria-describedby=":rd:-loading-announcement"
+              aria-labelledby=":rc:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1158,7 +1154,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":rd:"
+              id=":rc:"
               popover="auto"
             >
               Unsubscribe from thread
@@ -1185,7 +1181,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
         <span
           aria-label="Open Issue"
           class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-          id=":r8:"
+          id=":r7:"
           role="tooltip"
         >
           <svg
@@ -1209,7 +1205,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </svg>
         </span>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
           data-align="stretch"
           data-direction="vertical"
           data-gap="none"
@@ -1218,7 +1214,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           data-wrap="nowrap"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
             data-align="start"
             data-direction="horizontal"
             data-gap="condensed"
@@ -1234,7 +1230,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               I am a robot and this is a test!
             </span>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto mr-2 opacity-50"
             />
           </div>
           <div
@@ -1252,7 +1248,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               title="gitify-app"
             >
               <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                 data-align="center"
                 data-direction="horizontal"
                 data-gap="condensed"
@@ -1376,7 +1372,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </div>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -1385,8 +1381,8 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":ra:-loading-announcement"
-            aria-labelledby=":r9:"
+            aria-describedby=":r9:-loading-announcement"
+            aria-labelledby=":r8:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -1417,14 +1413,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":r9:"
+            id=":r8:"
             popover="auto"
           >
             Mark as done
           </span>
           <button
-            aria-describedby=":rc:-loading-announcement"
-            aria-labelledby=":rb:"
+            aria-describedby=":rb:-loading-announcement"
+            aria-labelledby=":ra:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -1455,14 +1451,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":rb:"
+            id=":ra:"
             popover="auto"
           >
             Mark as read
           </span>
           <button
-            aria-describedby=":re:-loading-announcement"
-            aria-labelledby=":rd:"
+            aria-describedby=":rd:-loading-announcement"
+            aria-labelledby=":rc:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -1493,7 +1489,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":rd:"
+            id=":rc:"
             popover="auto"
           >
             Unsubscribe from thread
@@ -1577,7 +1573,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           <span
             aria-label="Open Issue"
             class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-            id=":rf:"
+            id=":re:"
             role="tooltip"
           >
             <svg
@@ -1601,7 +1597,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             </svg>
           </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
             data-align="stretch"
             data-direction="vertical"
             data-gap="none"
@@ -1610,7 +1606,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             data-wrap="nowrap"
           >
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
               data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
@@ -1626,7 +1622,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                 I am a robot and this is a test!
               </span>
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto mr-2 opacity-50 hidden"
               />
             </div>
             <div
@@ -1644,7 +1640,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
                 title="gitify-app"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -1768,7 +1764,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover"
             data-align="center"
             data-direction="horizontal"
             data-gap="none"
@@ -1777,8 +1773,8 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             data-wrap="nowrap"
           >
             <button
-              aria-describedby=":rh:-loading-announcement"
-              aria-labelledby=":rg:"
+              aria-describedby=":rg:-loading-announcement"
+              aria-labelledby=":rf:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1809,14 +1805,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":rg:"
+              id=":rf:"
               popover="auto"
             >
               Mark as done
             </span>
             <button
-              aria-describedby=":rj:-loading-announcement"
-              aria-labelledby=":ri:"
+              aria-describedby=":ri:-loading-announcement"
+              aria-labelledby=":rh:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1847,14 +1843,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":ri:"
+              id=":rh:"
               popover="auto"
             >
               Mark as read
             </span>
             <button
-              aria-describedby=":rl:-loading-announcement"
-              aria-labelledby=":rk:"
+              aria-describedby=":rk:-loading-announcement"
+              aria-labelledby=":rj:"
               class="types__StyledButton-sc-ws60qy-0 kQRupk"
               data-component="IconButton"
               data-loading="false"
@@ -1885,7 +1881,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               aria-hidden="true"
               class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
               data-direction="s"
-              id=":rk:"
+              id=":rj:"
               popover="auto"
             >
               Unsubscribe from thread
@@ -1912,7 +1908,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
         <span
           aria-label="Open Issue"
           class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-e"
-          id=":rf:"
+          id=":re:"
           role="tooltip"
         >
           <svg
@@ -1936,7 +1932,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </svg>
         </span>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full mr-1"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
           data-align="stretch"
           data-direction="vertical"
           data-gap="none"
@@ -1945,7 +1941,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           data-wrap="nowrap"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-1 truncate"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
             data-align="start"
             data-direction="horizontal"
             data-gap="condensed"
@@ -1961,7 +1957,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               I am a robot and this is a test!
             </span>
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto opacity-50 hidden"
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xxs ml-auto mr-2 opacity-50 hidden"
             />
           </div>
           <div
@@ -1979,7 +1975,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               title="gitify-app"
             >
               <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                 data-align="center"
                 data-direction="horizontal"
                 data-gap="condensed"
@@ -2103,7 +2099,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </div>
         </div>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -2112,8 +2108,8 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           data-wrap="nowrap"
         >
           <button
-            aria-describedby=":rh:-loading-announcement"
-            aria-labelledby=":rg:"
+            aria-describedby=":rg:-loading-announcement"
+            aria-labelledby=":rf:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -2144,14 +2140,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":rg:"
+            id=":rf:"
             popover="auto"
           >
             Mark as done
           </span>
           <button
-            aria-describedby=":rj:-loading-announcement"
-            aria-labelledby=":ri:"
+            aria-describedby=":ri:-loading-announcement"
+            aria-labelledby=":rh:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -2182,14 +2178,14 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":ri:"
+            id=":rh:"
             popover="auto"
           >
             Mark as read
           </span>
           <button
-            aria-describedby=":rl:-loading-announcement"
-            aria-labelledby=":rk:"
+            aria-describedby=":rk:-loading-announcement"
+            aria-labelledby=":rj:"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-component="IconButton"
             data-loading="false"
@@ -2220,7 +2216,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             aria-hidden="true"
             class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
             data-direction="s"
-            id=":rk:"
+            id=":rj:"
             popover="auto"
           >
             Unsubscribe from thread
diff --git a/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
index 19b4a553a..8d885b24a 100644
--- a/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -6,16 +6,23 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
   "baseElement": <body>
     <div>
       <div
-        class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
+        class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-repository"
       >
         <div
-          class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <button
             aria-describedby=":r0:-loading-announcement"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-loading="false"
             data-no-visuals="true"
+            data-testid="open-repository"
             sx="[object Object]"
             title="Open repository"
             type="button"
@@ -29,7 +36,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
                 data-component="text"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -49,7 +56,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
                     width="18"
                   />
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
                     gitify-app/notifications-test
                   </span>
@@ -78,9 +85,223 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
               </span>
             </span>
           </button>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository"
+            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="repository-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=":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"
+              data-testid="repository-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=":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"
+              data-testid="repository-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 repository notifications
+            </span>
+          </div>
         </div>
+      </div>
+      <div>
+        NotificationRow
+      </div>
+      <div>
+        NotificationRow
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-repository"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r0:-loading-announcement"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-loading="false"
+          data-no-visuals="true"
+          data-testid="open-repository"
+          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 truncate"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-testid="avatar"
+                data-wrap="nowrap"
+              >
+                <img
+                  alt="gitify-app/notifications-test"
+                  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 block truncate flex-shrink overflow-ellipsis"
+                >
+                  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
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -96,6 +317,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
+            data-testid="repository-mark-as-done"
             sx="[object Object]"
             type="button"
           >
@@ -133,6 +355,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
+            data-testid="repository-mark-as-read"
             sx="[object Object]"
             type="button"
           >
@@ -170,6 +393,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should re
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
+            data-testid="repository-toggle"
             sx="[object Object]"
             type="button"
           >
@@ -201,210 +425,6 @@ 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-testid="avatar"
-                data-wrap="nowrap"
-              >
-                <img
-                  alt="gitify-app/notifications-test"
-                  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-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
-        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
@@ -473,16 +493,23 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
   "baseElement": <body>
     <div>
       <div
-        class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
+        class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-repository"
       >
         <div
-          class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <button
             aria-describedby=":r13:-loading-announcement"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-loading="false"
             data-no-visuals="true"
+            data-testid="open-repository"
             sx="[object Object]"
             title="Open repository"
             type="button"
@@ -496,7 +523,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
                 data-component="text"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -522,7 +549,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
                     gitify-app/notifications-test
                   </span>
@@ -551,142 +578,152 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
               </span>
             </span>
           </button>
-        </div>
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
-          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"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="none"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <svg
+            <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"
+              data-testid="repository-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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":r14:"
+              popover="auto"
             >
-              <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
+              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"
+              data-testid="repository-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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":r16:"
+              popover="auto"
             >
-              <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
+              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"
+              data-testid="repository-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="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"
+              class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+              data-direction="s"
+              id=":r18:"
+              popover="auto"
             >
-              <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>
+              Show repository notifications
+            </span>
+          </div>
         </div>
       </div>
     </div>
     <div>
       <div
-        class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
+        class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-repository"
       >
         <div
-          class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <button
             aria-describedby=":r1a:-loading-announcement"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-loading="false"
             data-no-visuals="true"
+            data-testid="open-repository"
             sx="[object Object]"
             title="Open repository"
             type="button"
@@ -700,7 +737,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
                 data-component="text"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -726,7 +763,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
                     gitify-app/notifications-test
                   </span>
@@ -755,9 +792,229 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
               </span>
             </span>
           </button>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository"
+            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"
+              data-testid="repository-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=":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"
+              data-testid="repository-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=":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"
+              data-testid="repository-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=":r1f:"
+              popover="auto"
+            >
+              Hide repository notifications
+            </span>
+          </div>
         </div>
+      </div>
+      <div>
+        NotificationRow
+      </div>
+      <div>
+        NotificationRow
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-repository"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":r1a:-loading-announcement"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-loading="false"
+          data-no-visuals="true"
+          data-testid="open-repository"
+          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 truncate"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-testid="avatar"
+                data-wrap="nowrap"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="octicon octicon-feed-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="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-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+                >
+                  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
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -773,6 +1030,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
+            data-testid="repository-mark-as-done"
             sx="[object Object]"
             type="button"
           >
@@ -810,6 +1068,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
+            data-testid="repository-mark-as-read"
             sx="[object Object]"
             type="button"
           >
@@ -847,6 +1106,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
+            data-testid="repository-toggle"
             sx="[object Object]"
             type="button"
           >
@@ -871,222 +1131,12 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should to
             aria-hidden="true"
             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-testid="avatar"
-                data-wrap="nowrap"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-feed-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="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-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-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
-        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"
+            id=":r1f:"
+            popover="auto"
           >
-            <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>
+            Hide repository notifications
+          </span>
+        </div>
       </div>
     </div>
     <div>
@@ -1156,16 +1206,23 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
   "baseElement": <body>
     <div>
       <div
-        class="group flex justify-between pr-1 py-0.5 bg-gitify-repository"
+        class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-repository"
       >
         <div
-          class="flex flex-1 gap-3 items-center truncate text-sm font-medium"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <button
             aria-describedby=":rs:-loading-announcement"
             class="types__StyledButton-sc-ws60qy-0 kQRupk"
             data-loading="false"
             data-no-visuals="true"
+            data-testid="open-repository"
             sx="[object Object]"
             title="Open repository"
             type="button"
@@ -1179,7 +1236,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
                 data-component="text"
               >
                 <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY truncate"
                   data-align="center"
                   data-direction="horizontal"
                   data-gap="condensed"
@@ -1205,7 +1262,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
                     />
                   </svg>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
                     gitify-app/notifications-test
                   </span>
@@ -1234,9 +1291,229 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
               </span>
             </span>
           </button>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository"
+            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"
+              data-testid="repository-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=":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"
+              data-testid="repository-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=":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"
+              data-testid="repository-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=":r11:"
+              popover="auto"
+            >
+              Hide repository notifications
+            </span>
+          </div>
         </div>
+      </div>
+      <div>
+        NotificationRow
+      </div>
+      <div>
+        NotificationRow
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 group pr-1 py-0.5 bg-gitify-repository"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY relative"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <button
+          aria-describedby=":rs:-loading-announcement"
+          class="types__StyledButton-sc-ws60qy-0 kQRupk"
+          data-loading="false"
+          data-no-visuals="true"
+          data-testid="open-repository"
+          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 truncate"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-testid="avatar"
+                data-wrap="nowrap"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="octicon octicon-feed-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="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-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+                >
+                  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
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository"
           data-align="center"
           data-direction="horizontal"
           data-gap="none"
@@ -1252,6 +1529,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
+            data-testid="repository-mark-as-done"
             sx="[object Object]"
             type="button"
           >
@@ -1289,6 +1567,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
+            data-testid="repository-mark-as-read"
             sx="[object Object]"
             type="button"
           >
@@ -1326,6 +1605,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx should us
             data-loading="false"
             data-no-visuals="true"
             data-size="small"
+            data-testid="repository-toggle"
             sx="[object Object]"
             type="button"
           >
@@ -1357,216 +1637,6 @@ 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-testid="avatar"
-                data-wrap="nowrap"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="octicon octicon-feed-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="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-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-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
-        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/HoverButton.test.tsx b/src/renderer/components/primitives/HoverButton.test.tsx
new file mode 100644
index 000000000..a09534dc5
--- /dev/null
+++ b/src/renderer/components/primitives/HoverButton.test.tsx
@@ -0,0 +1,34 @@
+import { MarkGithubIcon } from '@primer/octicons-react';
+import { render } from '@testing-library/react';
+import { HoverButton } from './HoverButton';
+
+describe('renderer/components/primitives/HoverButton.tsx', () => {
+  it('should render', () => {
+    const mockAction = jest.fn();
+
+    const tree = render(
+      <HoverButton
+        label="Hover Button"
+        icon={MarkGithubIcon}
+        testid="hover-button"
+        action={mockAction}
+      />,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render - disabled', () => {
+    const mockAction = jest.fn();
+
+    const tree = render(
+      <HoverButton
+        label="Hover Button"
+        icon={MarkGithubIcon}
+        testid="hover-button"
+        enabled={false}
+        action={mockAction}
+      />,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/renderer/components/primitives/HoverButton.tsx b/src/renderer/components/primitives/HoverButton.tsx
new file mode 100644
index 000000000..4cb8f8ff6
--- /dev/null
+++ b/src/renderer/components/primitives/HoverButton.tsx
@@ -0,0 +1,33 @@
+import type { FC } from 'react';
+
+import type { Icon } from '@primer/octicons-react';
+import { IconButton } from '@primer/react';
+
+interface IHoverButton {
+  label: string;
+  icon: Icon;
+  enabled?: boolean;
+  testid: string;
+  action: () => void;
+}
+
+export const HoverButton: FC<IHoverButton> = ({
+  enabled = true,
+  ...props
+}: IHoverButton) => {
+  return (
+    enabled && (
+      <IconButton
+        aria-label={props.label}
+        icon={props.icon}
+        size="small"
+        variant="invisible"
+        onClick={(event) => {
+          event.stopPropagation();
+          props.action();
+        }}
+        data-testid={props.testid}
+      />
+    )
+  );
+};
diff --git a/src/renderer/components/primitives/HoverGroup.test.tsx b/src/renderer/components/primitives/HoverGroup.test.tsx
index 582ac2af9..40eef7485 100644
--- a/src/renderer/components/primitives/HoverGroup.test.tsx
+++ b/src/renderer/components/primitives/HoverGroup.test.tsx
@@ -3,7 +3,7 @@ import { HoverGroup } from './HoverGroup';
 
 describe('renderer/components/primitives/HoverGroup.tsx', () => {
   it('should render', () => {
-    const tree = render(<HoverGroup>Hover Group</HoverGroup>);
+    const tree = render(<HoverGroup bgColor="white">Hover Group</HoverGroup>);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/renderer/components/primitives/HoverGroup.tsx b/src/renderer/components/primitives/HoverGroup.tsx
index 989aa3495..7d6e18b16 100644
--- a/src/renderer/components/primitives/HoverGroup.tsx
+++ b/src/renderer/components/primitives/HoverGroup.tsx
@@ -1,18 +1,27 @@
 import type { FC, ReactNode } from 'react';
 
 import { Stack } from '@primer/react';
+import { cn } from '../../utils/cn';
 
 interface IHoverGroup {
+  bgColor: string;
   children: ReactNode;
 }
 
-export const HoverGroup: FC<IHoverGroup> = ({ children }: IHoverGroup) => {
+export const HoverGroup: FC<IHoverGroup> = ({
+  bgColor,
+  children,
+}: IHoverGroup) => {
   return (
     <Stack
       direction="horizontal"
       align="center"
       gap="none"
-      className="opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+      className={cn(
+        'absolute right-0 h-full',
+        'opacity-0 transition-opacity group-hover:opacity-100',
+        `group-hover:${bgColor}`,
+      )}
     >
       {children}
     </Stack>
diff --git a/src/renderer/components/primitives/__snapshots__/HoverButton.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/HoverButton.test.tsx.snap
new file mode 100644
index 000000000..832ab41a0
--- /dev/null
+++ b/src/renderer/components/primitives/__snapshots__/HoverButton.test.tsx.snap
@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renderer/components/primitives/HoverButton.tsx should render - disabled 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div />
+  </body>,
+  "container": <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/primitives/HoverButton.tsx should render 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        aria-describedby=":r1:-loading-announcement"
+        aria-labelledby=":r0:"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-component="IconButton"
+        data-loading="false"
+        data-no-visuals="true"
+        data-size="small"
+        data-testid="hover-button"
+        sx="[object Object]"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="octicon octicon-mark-github"
+          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 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>
+      </button>
+      <span
+        aria-hidden="true"
+        class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+        data-direction="s"
+        id=":r0:"
+        popover="auto"
+      >
+        Hover Button
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      aria-describedby=":r1:-loading-announcement"
+      aria-labelledby=":r0:"
+      class="types__StyledButton-sc-ws60qy-0 kQRupk"
+      data-component="IconButton"
+      data-loading="false"
+      data-no-visuals="true"
+      data-size="small"
+      data-testid="hover-button"
+      sx="[object Object]"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-mark-github"
+        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 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>
+    </button>
+    <span
+      aria-hidden="true"
+      class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+      data-direction="s"
+      id=":r0:"
+      popover="auto"
+    >
+      Hover Button
+    </span>
+  </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__/HoverGroup.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
index 01ce7200d..23d473a89 100644
--- a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/primitives/HoverGroup.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:white"
         data-align="center"
         data-direction="horizontal"
         data-gap="none"
@@ -20,7 +20,7 @@ exports[`renderer/components/primitives/HoverGroup.tsx should render 1`] = `
   </body>,
   "container": <div>
     <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover absolute right-0 h-full"
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY absolute right-0 h-full opacity-0 transition-opacity group-hover:opacity-100 group-hover:white"
       data-align="center"
       data-direction="horizontal"
       data-gap="none"
diff --git a/src/renderer/components/settings/AppearanceSettings.test.tsx b/src/renderer/components/settings/AppearanceSettings.test.tsx
index 5864e5918..6ad51e4e7 100644
--- a/src/renderer/components/settings/AppearanceSettings.test.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.test.tsx
@@ -140,7 +140,7 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Detailed notifications'));
+    fireEvent.click(screen.getByTestId('checkbox-detailedNotifications'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('detailedNotifications', false);
@@ -163,7 +163,7 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Show notification metric pills'));
+    fireEvent.click(screen.getByTestId('checkbox-showPills'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('showPills', false);
@@ -186,7 +186,7 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Show number'));
+    fireEvent.click(screen.getByTestId('checkbox-showNumber'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('showNumber', false);
@@ -211,7 +211,7 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Show account header'));
+    fireEvent.click(screen.getByTestId('checkbox-showAccountHeader'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('showAccountHeader', true);
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index 39545b6da..6b6e506fa 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -18,6 +18,8 @@ import {
   ButtonGroup,
   IconButton,
   Select,
+  Stack,
+  Text,
   useTheme,
 } from '@primer/react';
 
@@ -168,17 +170,17 @@ export const AppearanceSettings: FC = () => {
           updateSetting('detailedNotifications', evt.target.checked)
         }
         tooltip={
-          <div>
-            <div className="pb-3">
+          <Stack direction="vertical" gap="condensed">
+            <Text>
               Enrich notifications with author or last commenter profile
               information, state and GitHub-like colors.
-            </div>
-            <div className="text-gitify-caution">
+            </Text>
+            <Text className="text-gitify-caution">
               ⚠️ Users with a large number of unread notifications <i>may</i>{' '}
               experience rate limiting under certain circumstances. Disable this
               setting if you experience this.
-            </div>
-          </div>
+            </Text>
+          </Stack>
         }
       />
 
@@ -228,29 +230,35 @@ export const AppearanceSettings: FC = () => {
         }
         disabled={!settings.detailedNotifications}
         tooltip={
-          <div>
+          <Stack direction="vertical" gap="condensed">
             <div>Show GitHub number for:</div>
             <div className="pl-4">
               <ul>
-                <li className="flex items-center gap-1">
-                  <CommentIcon size={Size.SMALL} />
-                  Discussion
+                <li>
+                  <Stack direction="horizontal" gap="condensed">
+                    <CommentIcon size={Size.SMALL} />
+                    Discussion
+                  </Stack>
                 </li>
-                <li className="flex items-center gap-1">
-                  <IssueClosedIcon size={Size.SMALL} />
-                  Issue
+                <li>
+                  <Stack direction="horizontal" gap="condensed">
+                    <IssueClosedIcon size={Size.SMALL} />
+                    Issue
+                  </Stack>
                 </li>
-                <li className="flex items-center gap-1">
-                  <GitPullRequestIcon size={Size.SMALL} />
-                  Pull Request
+                <li>
+                  <Stack direction="horizontal" gap="condensed">
+                    <GitPullRequestIcon size={Size.SMALL} />
+                    Pull Request
+                  </Stack>
                 </li>
               </ul>
             </div>
-            <div className="pt-3 text-gitify-caution">
-              ⚠️ This setting requires <strong>Detailed Notifications</strong> to
-              be enabled.
-            </div>
-          </div>
+            <Text className="text-gitify-caution">
+              ⚠️ This setting requires{' '}
+              <Text as="strong">Detailed Notifications</Text> to be enabled.
+            </Text>
+          </Stack>
         }
       />
 
diff --git a/src/renderer/components/settings/NotificationSettings.test.tsx b/src/renderer/components/settings/NotificationSettings.test.tsx
index cecdebaa3..3a72bfdb2 100644
--- a/src/renderer/components/settings/NotificationSettings.test.tsx
+++ b/src/renderer/components/settings/NotificationSettings.test.tsx
@@ -29,7 +29,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Date'));
+    fireEvent.click(screen.getByTestId('radio-groupby-date'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('groupBy', 'DATE');
@@ -52,7 +52,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Fetch all notifications'), {
+    fireEvent.click(screen.getByTestId('checkbox-fetchAllNotifications'), {
       target: { checked: true },
     });
 
@@ -77,7 +77,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Show only participating'), {
+    fireEvent.click(screen.getByTestId('checkbox-showOnlyParticipating'), {
       target: { checked: true },
     });
 
@@ -141,7 +141,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Mark as done on open'), {
+    fireEvent.click(screen.getByTestId('checkbox-markAsDoneOnOpen'), {
       target: { checked: true },
     });
 
@@ -166,7 +166,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Mark as done on unsubscribe'), {
+    fireEvent.click(screen.getByTestId('checkbox-markAsDoneOnUnsubscribe'), {
       target: { checked: true },
     });
 
@@ -194,7 +194,7 @@ describe('renderer/routes/components/settings/NotificationSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Delay notification state'), {
+    fireEvent.click(screen.getByTestId('checkbox-delayNotificationState'), {
       target: { checked: true },
     });
 
diff --git a/src/renderer/components/settings/NotificationSettings.tsx b/src/renderer/components/settings/NotificationSettings.tsx
index e481daca0..181aa71e4 100644
--- a/src/renderer/components/settings/NotificationSettings.tsx
+++ b/src/renderer/components/settings/NotificationSettings.tsx
@@ -1,6 +1,7 @@
 import { type FC, type MouseEvent, useContext } from 'react';
 
 import { BellIcon } from '@primer/octicons-react';
+import { Stack, Text } from '@primer/react';
 
 import { APPLICATION } from '../../../shared/constants';
 import { AppContext } from '../../context/App';
@@ -36,16 +37,16 @@ export const NotificationSettings: FC = () => {
           updateSetting('fetchAllNotifications', evt.target.checked)
         }
         tooltip={
-          <div>
-            <div className="pb-3">
-              When <em>checked</em>, Gitify will fetch <strong>all</strong>{' '}
-              notifications from your inbox.
-            </div>
-            <div>
-              When <em>unchecked</em>, Gitify will only fetch the first page of
-              notifications (max 50 records per GitHub account)
-            </div>
-          </div>
+          <Stack direction="vertical" gap="condensed">
+            <Text>
+              When <Text as="em">checked</Text>, Gitify will fetch{' '}
+              <Text as="strong">all</Text> notifications from your inbox.
+            </Text>
+            <Text>
+              When <Text as="em">unchecked</Text>, Gitify will only fetch the
+              first page of notifications (max 50 records per GitHub account)
+            </Text>
+          </Stack>
         }
       />
       <Checkbox
@@ -54,11 +55,11 @@ export const NotificationSettings: FC = () => {
         checked={settings.participating}
         onChange={(evt) => updateSetting('participating', evt.target.checked)}
         tooltip={
-          <div>
-            See
+          <Text>
+            See{' '}
             <button
               type="button"
-              className="mx-1 text-gitify-link"
+              className="text-gitify-link"
               title="Open GitHub documentation for participating and watching notifications"
               onClick={(event: MouseEvent<HTMLElement>) => {
                 // Don't trigger onClick of parent element.
@@ -67,9 +68,9 @@ export const NotificationSettings: FC = () => {
               }}
             >
               official docs
-            </button>
+            </button>{' '}
             for more details.
-          </div>
+          </Text>
         }
       />
       <Checkbox
diff --git a/src/renderer/components/settings/SystemSettings.test.tsx b/src/renderer/components/settings/SystemSettings.test.tsx
index 72c4a877f..0ecc19567 100644
--- a/src/renderer/components/settings/SystemSettings.test.tsx
+++ b/src/renderer/components/settings/SystemSettings.test.tsx
@@ -28,7 +28,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Background'));
+    fireEvent.click(screen.getByTestId('radio-openlinks-background'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('openLinks', 'BACKGROUND');
@@ -51,7 +51,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Enable keyboard shortcut'), {
+    fireEvent.click(screen.getByTestId('checkbox-keyboardShortcut'), {
       target: { checked: true },
     });
 
@@ -76,9 +76,12 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Show notifications count in tray'), {
-      target: { checked: true },
-    });
+    fireEvent.click(
+      screen.getByTestId('checkbox-showNotificationsCountInTray'),
+      {
+        target: { checked: true },
+      },
+    );
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith(
@@ -104,7 +107,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Show system notifications'), {
+    fireEvent.click(screen.getByTestId('checkbox-showNotifications'), {
       target: { checked: true },
     });
 
@@ -129,7 +132,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Play sound'), {
+    fireEvent.click(screen.getByTestId('checkbox-playSound'), {
       target: { checked: true },
     });
 
@@ -154,7 +157,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Use alternate idle icon'), {
+    fireEvent.click(screen.getByTestId('checkbox-useAlternateIdleIcon'), {
       target: { checked: true },
     });
 
@@ -179,7 +182,7 @@ describe('renderer/routes/components/settings/SystemSettings.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Open at startup'), {
+    fireEvent.click(screen.getByTestId('checkbox-openAtStartup'), {
       target: { checked: true },
     });
 
diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx
index 156307436..2f9b3b059 100644
--- a/src/renderer/components/settings/SystemSettings.tsx
+++ b/src/renderer/components/settings/SystemSettings.tsx
@@ -1,6 +1,7 @@
 import { type FC, useContext } from 'react';
 
 import { DeviceDesktopIcon } from '@primer/octicons-react';
+import { Box, Stack, Text } from '@primer/react';
 
 import { APPLICATION } from '../../../shared/constants';
 import { isLinux, isMacOS } from '../../../shared/platform';
@@ -30,20 +31,20 @@ export const SystemSettings: FC = () => {
         }}
       />
       <Checkbox
-        name="keyboardShortcutEnabled"
+        name="keyboardShortcut"
         label="Enable keyboard shortcut"
         checked={settings.keyboardShortcut}
         onChange={(evt) =>
           updateSetting('keyboardShortcut', evt.target.checked)
         }
         tooltip={
-          <div>
+          <Box>
             When enabled you can use the hotkeys{' '}
-            <span className="text-gitify-caution">
+            <Text as="strong" className="text-gitify-caution">
               {Constants.DEFAULT_KEYBOARD_SHORTCUT}
-            </span>{' '}
+            </Text>{' '}
             to show or hide {APPLICATION.NAME}.
-          </div>
+          </Box>
         }
       />
       {isMacOS() && (
@@ -78,21 +79,21 @@ export const SystemSettings: FC = () => {
           updateSetting('useAlternateIdleIcon', evt.target.checked)
         }
         tooltip={
-          <div>
-            <div className="pb-3">
+          <Stack direction="vertical" gap="condensed">
+            <Text>
               Use a white {APPLICATION.NAME} logo (instead of the default black
               logo) when all notifications are read.
-            </div>
-            <div>
+            </Text>
+            <Text>
               This is particularly useful for devices which have a dark-themed
               menubar or taskbar.
-            </div>
-          </div>
+            </Text>
+          </Stack>
         }
       />
       {!isLinux() && (
         <Checkbox
-          name="openAtStartUp"
+          name="openAtStartup"
           label="Open at startup"
           checked={settings.openAtStartup}
           onChange={(evt) => updateSetting('openAtStartup', evt.target.checked)}
diff --git a/src/renderer/routes/Accounts.tsx b/src/renderer/routes/Accounts.tsx
index cf22e5e31..3138e59cf 100644
--- a/src/renderer/routes/Accounts.tsx
+++ b/src/renderer/routes/Accounts.tsx
@@ -15,9 +15,11 @@ import {
 import {
   ActionList,
   ActionMenu,
+  Box,
   Button,
   IconButton,
   Stack,
+  Text,
 } from '@primer/react';
 
 import { logError } from '../../shared/logger';
@@ -90,7 +92,7 @@ export const AccountsRoute: FC = () => {
           const [isRefreshingAccount, setIsRefreshingAccount] = useState(false);
 
           return (
-            <div
+            <Box
               key={getAccountUUID(account)}
               className="rounded-md p-2 mb-4 bg-gitify-accounts"
             >
@@ -100,23 +102,22 @@ export const AccountsRoute: FC = () => {
                 align="center"
                 justify="space-between"
               >
-                <Stack direction="vertical" gap="none">
-                  <div className="pb-2">
-                    <Button
-                      title="Open account profile"
-                      onClick={() => openAccountProfile(account)}
-                      data-testid="account-profile"
-                    >
-                      <AvatarWithFallback
-                        src={account.user.avatar}
-                        alt={account.user.login}
-                        name={`@${account.user.login}`}
-                        size={Size.XLARGE}
-                      />
-                    </Button>
-                  </div>
+                <Stack direction="vertical" align="start" gap="condensed">
+                  <Button
+                    title="Open account profile"
+                    onClick={() => openAccountProfile(account)}
+                    data-testid="account-profile"
+                    className="pb-2"
+                  >
+                    <AvatarWithFallback
+                      src={account.user.avatar}
+                      alt={account.user.login}
+                      name={`@${account.user.login}`}
+                      size={Size.XLARGE}
+                    />
+                  </Button>
 
-                  <div className="pb-2 pl-4">
+                  <Box className="pl-4 pb-2 text-xs">
                     <Stack direction="vertical" gap="condensed">
                       <div hidden={!account.user.name}>
                         <Stack
@@ -125,7 +126,7 @@ export const AccountsRoute: FC = () => {
                           align="center"
                         >
                           <PersonIcon />
-                          <span className="text-xs">{account.user?.name}</span>
+                          <Text>{account.user?.name}</Text>
                         </Stack>
                       </div>
 
@@ -141,7 +142,7 @@ export const AccountsRoute: FC = () => {
                           align="center"
                         >
                           <PlatformIcon />
-                          <span className="text-xs">{account.hostname}</span>
+                          <Text>{account.hostname}</Text>
                         </Stack>
                       </button>
 
@@ -157,11 +158,11 @@ export const AccountsRoute: FC = () => {
                           align="center"
                         >
                           <AuthMethodIcon />
-                          <span className="text-xs">{account.method}</span>
+                          <Text>{account.method}</Text>
                         </Stack>
                       </button>
                     </Stack>
-                  </div>
+                  </Box>
                 </Stack>
 
                 <Stack direction="horizontal" gap="condensed">
@@ -220,7 +221,7 @@ export const AccountsRoute: FC = () => {
                   />
                 </Stack>
               </Stack>
-            </div>
+            </Box>
           );
         })}
       </Contents>
diff --git a/src/renderer/routes/Filters.tsx b/src/renderer/routes/Filters.tsx
index 9996608f3..10b30af9b 100644
--- a/src/renderer/routes/Filters.tsx
+++ b/src/renderer/routes/Filters.tsx
@@ -6,7 +6,7 @@ import {
   FilterRemoveIcon,
   NoteIcon,
 } from '@primer/octicons-react';
-import { Button, Tooltip } from '@primer/react';
+import { Button, Text, Tooltip } from '@primer/react';
 
 import { Checkbox } from '../components/fields/Checkbox';
 import { Contents } from '../components/layout/Contents';
@@ -72,9 +72,9 @@ export const FiltersRoute: FC = () => {
 
         <fieldset className="mb-3">
           <Title icon={NoteIcon}>Reason</Title>
-          <span className="text-xs italic">
+          <Text as="i" className="text-xs">
             Note: If no reasons are selected, all notifications will be shown.
-          </span>
+          </Text>
           {Object.keys(FORMATTED_REASONS).map((reason: Reason) => {
             return (
               <Checkbox
diff --git a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
index 8633f1dca..368b861ff 100644
--- a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
@@ -85,7 +85,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
     class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
   >
     <div
-      class="rounded-md p-2 mb-4 bg-gitify-accounts"
+      class="Box-sc-g0xbh4-0 rounded-md p-2 mb-4 bg-gitify-accounts"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -98,66 +98,62 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
+          data-align="start"
           data-direction="vertical"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <div
-            class="pb-2"
+          <button
+            aria-describedby=":r2t:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj pb-2"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="account-profile"
+            sx="[object Object]"
+            title="Open account profile"
+            type="button"
           >
-            <button
-              aria-describedby=":r2t:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              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 truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  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-testid="avatar"
-                    data-wrap="nowrap"
+                  <img
+                    alt="octocat"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
+                    data-component="Avatar"
+                    height="20"
+                    size="20"
+                    src="https://avatars.githubusercontent.com/u/583231?v=4"
+                    sx="[object Object]"
+                    width="20"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
-                    <img
-                      alt="octocat"
-                      class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
-                      data-component="Avatar"
-                      height="20"
-                      size="20"
-                      src="https://avatars.githubusercontent.com/u/583231?v=4"
-                      sx="[object Object]"
-                      width="20"
-                    />
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      @octocat
-                    </span>
-                  </div>
-                </span>
+                    @octocat
+                  </span>
+                </div>
               </span>
-            </button>
-          </div>
+            </span>
+          </button>
           <div
-            class="pb-2 pl-4"
+            class="Box-sc-g0xbh4-0 pl-4 pb-2 text-xs"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -195,7 +191,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Mona Lisa Octocat
                   </span>
@@ -232,7 +228,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     github.com
                   </span>
@@ -269,7 +265,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Personal Access Token
                   </span>
@@ -449,7 +445,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
       </div>
     </div>
     <div
-      class="rounded-md p-2 mb-4 bg-gitify-accounts"
+      class="Box-sc-g0xbh4-0 rounded-md p-2 mb-4 bg-gitify-accounts"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -462,66 +458,62 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
+          data-align="start"
           data-direction="vertical"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <div
-            class="pb-2"
+          <button
+            aria-describedby=":r36:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj pb-2"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="account-profile"
+            sx="[object Object]"
+            title="Open account profile"
+            type="button"
           >
-            <button
-              aria-describedby=":r36:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              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 truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  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-testid="avatar"
-                    data-wrap="nowrap"
+                  <img
+                    alt="octocat"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
+                    data-component="Avatar"
+                    height="20"
+                    size="20"
+                    src="https://avatars.githubusercontent.com/u/583231?v=4"
+                    sx="[object Object]"
+                    width="20"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
-                    <img
-                      alt="octocat"
-                      class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
-                      data-component="Avatar"
-                      height="20"
-                      size="20"
-                      src="https://avatars.githubusercontent.com/u/583231?v=4"
-                      sx="[object Object]"
-                      width="20"
-                    />
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      @octocat
-                    </span>
-                  </div>
-                </span>
+                    @octocat
+                  </span>
+                </div>
               </span>
-            </button>
-          </div>
+            </span>
+          </button>
           <div
-            class="pb-2 pl-4"
+            class="Box-sc-g0xbh4-0 pl-4 pb-2 text-xs"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -559,7 +551,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Mona Lisa Octocat
                   </span>
@@ -596,7 +588,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     github.gitify.io
                   </span>
@@ -633,7 +625,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     OAuth App
                   </span>
@@ -813,7 +805,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
       </div>
     </div>
     <div
-      class="rounded-md p-2 mb-4 bg-gitify-accounts"
+      class="Box-sc-g0xbh4-0 rounded-md p-2 mb-4 bg-gitify-accounts"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -826,66 +818,62 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
+          data-align="start"
           data-direction="vertical"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <div
-            class="pb-2"
+          <button
+            aria-describedby=":r3f:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj pb-2"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="account-profile"
+            sx="[object Object]"
+            title="Open account profile"
+            type="button"
           >
-            <button
-              aria-describedby=":r3f:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              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 truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  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-testid="avatar"
-                    data-wrap="nowrap"
+                  <img
+                    alt="octocat"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
+                    data-component="Avatar"
+                    height="20"
+                    size="20"
+                    src="https://avatars.githubusercontent.com/u/583231?v=4"
+                    sx="[object Object]"
+                    width="20"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
-                    <img
-                      alt="octocat"
-                      class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
-                      data-component="Avatar"
-                      height="20"
-                      size="20"
-                      src="https://avatars.githubusercontent.com/u/583231?v=4"
-                      sx="[object Object]"
-                      width="20"
-                    />
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      @octocat
-                    </span>
-                  </div>
-                </span>
+                    @octocat
+                  </span>
+                </div>
               </span>
-            </button>
-          </div>
+            </span>
+          </button>
           <div
-            class="pb-2 pl-4"
+            class="Box-sc-g0xbh4-0 pl-4 pb-2 text-xs"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -923,7 +911,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Mona Lisa Octocat
                   </span>
@@ -960,7 +948,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     github.com
                   </span>
@@ -997,7 +985,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     GitHub App
                   </span>
@@ -1324,7 +1312,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
     class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
   >
     <div
-      class="rounded-md p-2 mb-4 bg-gitify-accounts"
+      class="Box-sc-g0xbh4-0 rounded-md p-2 mb-4 bg-gitify-accounts"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1337,66 +1325,62 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
+          data-align="start"
           data-direction="vertical"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <div
-            class="pb-2"
+          <button
+            aria-describedby=":r3s:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj pb-2"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="account-profile"
+            sx="[object Object]"
+            title="Open account profile"
+            type="button"
           >
-            <button
-              aria-describedby=":r3s:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              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 truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  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-testid="avatar"
-                    data-wrap="nowrap"
+                  <img
+                    alt="octocat"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
+                    data-component="Avatar"
+                    height="20"
+                    size="20"
+                    src="https://avatars.githubusercontent.com/u/583231?v=4"
+                    sx="[object Object]"
+                    width="20"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
-                    <img
-                      alt="octocat"
-                      class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
-                      data-component="Avatar"
-                      height="20"
-                      size="20"
-                      src="https://avatars.githubusercontent.com/u/583231?v=4"
-                      sx="[object Object]"
-                      width="20"
-                    />
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      @octocat
-                    </span>
-                  </div>
-                </span>
+                    @octocat
+                  </span>
+                </div>
               </span>
-            </button>
-          </div>
+            </span>
+          </button>
           <div
-            class="pb-2 pl-4"
+            class="Box-sc-g0xbh4-0 pl-4 pb-2 text-xs"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1434,7 +1418,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Mona Lisa Octocat
                   </span>
@@ -1471,7 +1455,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     github.com
                   </span>
@@ -1508,7 +1492,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Personal Access Token
                   </span>
@@ -1688,7 +1672,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
       </div>
     </div>
     <div
-      class="rounded-md p-2 mb-4 bg-gitify-accounts"
+      class="Box-sc-g0xbh4-0 rounded-md p-2 mb-4 bg-gitify-accounts"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1701,66 +1685,62 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
+          data-align="start"
           data-direction="vertical"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <div
-            class="pb-2"
+          <button
+            aria-describedby=":r45:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj pb-2"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="account-profile"
+            sx="[object Object]"
+            title="Open account profile"
+            type="button"
           >
-            <button
-              aria-describedby=":r45:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              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 truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  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-testid="avatar"
-                    data-wrap="nowrap"
+                  <img
+                    alt="octocat"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
+                    data-component="Avatar"
+                    height="20"
+                    size="20"
+                    src="https://avatars.githubusercontent.com/u/583231?v=4"
+                    sx="[object Object]"
+                    width="20"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
-                    <img
-                      alt="octocat"
-                      class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
-                      data-component="Avatar"
-                      height="20"
-                      size="20"
-                      src="https://avatars.githubusercontent.com/u/583231?v=4"
-                      sx="[object Object]"
-                      width="20"
-                    />
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      @octocat
-                    </span>
-                  </div>
-                </span>
+                    @octocat
+                  </span>
+                </div>
               </span>
-            </button>
-          </div>
+            </span>
+          </button>
           <div
-            class="pb-2 pl-4"
+            class="Box-sc-g0xbh4-0 pl-4 pb-2 text-xs"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1798,7 +1778,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Mona Lisa Octocat
                   </span>
@@ -1835,7 +1815,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     github.gitify.io
                   </span>
@@ -1872,7 +1852,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     OAuth App
                   </span>
@@ -2052,7 +2032,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
       </div>
     </div>
     <div
-      class="rounded-md p-2 mb-4 bg-gitify-accounts"
+      class="Box-sc-g0xbh4-0 rounded-md p-2 mb-4 bg-gitify-accounts"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -2065,66 +2045,62 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
+          data-align="start"
           data-direction="vertical"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <div
-            class="pb-2"
+          <button
+            aria-describedby=":r4e:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj pb-2"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="account-profile"
+            sx="[object Object]"
+            title="Open account profile"
+            type="button"
           >
-            <button
-              aria-describedby=":r4e:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              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 truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  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-testid="avatar"
-                    data-wrap="nowrap"
+                  <img
+                    alt="octocat"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
+                    data-component="Avatar"
+                    height="20"
+                    size="20"
+                    src="https://avatars.githubusercontent.com/u/583231?v=4"
+                    sx="[object Object]"
+                    width="20"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
-                    <img
-                      alt="octocat"
-                      class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
-                      data-component="Avatar"
-                      height="20"
-                      size="20"
-                      src="https://avatars.githubusercontent.com/u/583231?v=4"
-                      sx="[object Object]"
-                      width="20"
-                    />
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      @octocat
-                    </span>
-                  </div>
-                </span>
+                    @octocat
+                  </span>
+                </div>
               </span>
-            </button>
-          </div>
+            </span>
+          </button>
           <div
-            class="pb-2 pl-4"
+            class="Box-sc-g0xbh4-0 pl-4 pb-2 text-xs"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -2162,7 +2138,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Mona Lisa Octocat
                   </span>
@@ -2199,7 +2175,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     github.com
                   </span>
@@ -2236,7 +2212,7 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     GitHub App
                   </span>
@@ -2563,7 +2539,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
     class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
   >
     <div
-      class="rounded-md p-2 mb-4 bg-gitify-accounts"
+      class="Box-sc-g0xbh4-0 rounded-md p-2 mb-4 bg-gitify-accounts"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -2576,66 +2552,62 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
+          data-align="start"
           data-direction="vertical"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <div
-            class="pb-2"
+          <button
+            aria-describedby=":r1:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj pb-2"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="account-profile"
+            sx="[object Object]"
+            title="Open account profile"
+            type="button"
           >
-            <button
-              aria-describedby=":r1:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              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 truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  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-testid="avatar"
-                    data-wrap="nowrap"
+                  <img
+                    alt="octocat"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
+                    data-component="Avatar"
+                    height="20"
+                    size="20"
+                    src="https://avatars.githubusercontent.com/u/583231?v=4"
+                    sx="[object Object]"
+                    width="20"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
-                    <img
-                      alt="octocat"
-                      class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
-                      data-component="Avatar"
-                      height="20"
-                      size="20"
-                      src="https://avatars.githubusercontent.com/u/583231?v=4"
-                      sx="[object Object]"
-                      width="20"
-                    />
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      @octocat
-                    </span>
-                  </div>
-                </span>
+                    @octocat
+                  </span>
+                </div>
               </span>
-            </button>
-          </div>
+            </span>
+          </button>
           <div
-            class="pb-2 pl-4"
+            class="Box-sc-g0xbh4-0 pl-4 pb-2 text-xs"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -2673,7 +2645,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Mona Lisa Octocat
                   </span>
@@ -2710,7 +2682,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     github.com
                   </span>
@@ -2747,7 +2719,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Personal Access Token
                   </span>
@@ -2927,7 +2899,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
       </div>
     </div>
     <div
-      class="rounded-md p-2 mb-4 bg-gitify-accounts"
+      class="Box-sc-g0xbh4-0 rounded-md p-2 mb-4 bg-gitify-accounts"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -2940,66 +2912,62 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
+          data-align="start"
           data-direction="vertical"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <div
-            class="pb-2"
+          <button
+            aria-describedby=":ra:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj pb-2"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="account-profile"
+            sx="[object Object]"
+            title="Open account profile"
+            type="button"
           >
-            <button
-              aria-describedby=":ra:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              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 truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  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-testid="avatar"
-                    data-wrap="nowrap"
+                  <img
+                    alt="octocat"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
+                    data-component="Avatar"
+                    height="20"
+                    size="20"
+                    src="https://avatars.githubusercontent.com/u/583231?v=4"
+                    sx="[object Object]"
+                    width="20"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
-                    <img
-                      alt="octocat"
-                      class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
-                      data-component="Avatar"
-                      height="20"
-                      size="20"
-                      src="https://avatars.githubusercontent.com/u/583231?v=4"
-                      sx="[object Object]"
-                      width="20"
-                    />
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      @octocat
-                    </span>
-                  </div>
-                </span>
+                    @octocat
+                  </span>
+                </div>
               </span>
-            </button>
-          </div>
+            </span>
+          </button>
           <div
-            class="pb-2 pl-4"
+            class="Box-sc-g0xbh4-0 pl-4 pb-2 text-xs"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -3037,7 +3005,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Mona Lisa Octocat
                   </span>
@@ -3074,7 +3042,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     github.gitify.io
                   </span>
@@ -3111,7 +3079,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     OAuth App
                   </span>
@@ -3291,7 +3259,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
       </div>
     </div>
     <div
-      class="rounded-md p-2 mb-4 bg-gitify-accounts"
+      class="Box-sc-g0xbh4-0 rounded-md p-2 mb-4 bg-gitify-accounts"
     >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -3304,66 +3272,62 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
       >
         <div
           class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
+          data-align="start"
           data-direction="vertical"
-          data-gap="none"
+          data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
         >
-          <div
-            class="pb-2"
+          <button
+            aria-describedby=":rj:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj pb-2"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="account-profile"
+            sx="[object Object]"
+            title="Open account profile"
+            type="button"
           >
-            <button
-              aria-describedby=":rj:-loading-announcement"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              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 truncate"
+                  data-align="center"
+                  data-direction="horizontal"
+                  data-gap="condensed"
+                  data-justify="start"
+                  data-padding="none"
+                  data-testid="avatar"
+                  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-testid="avatar"
-                    data-wrap="nowrap"
+                  <img
+                    alt="octocat"
+                    class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
+                    data-component="Avatar"
+                    height="20"
+                    size="20"
+                    src="https://avatars.githubusercontent.com/u/583231?v=4"
+                    sx="[object Object]"
+                    width="20"
+                  />
+                  <span
+                    class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
                   >
-                    <img
-                      alt="octocat"
-                      class="Avatar__StyledAvatar-sc-2lv0r8-0 jwAMPP"
-                      data-component="Avatar"
-                      height="20"
-                      size="20"
-                      src="https://avatars.githubusercontent.com/u/583231?v=4"
-                      sx="[object Object]"
-                      width="20"
-                    />
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      @octocat
-                    </span>
-                  </div>
-                </span>
+                    @octocat
+                  </span>
+                </div>
               </span>
-            </button>
-          </div>
+            </span>
+          </button>
           <div
-            class="pb-2 pl-4"
+            class="Box-sc-g0xbh4-0 pl-4 pb-2 text-xs"
           >
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -3401,7 +3365,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     Mona Lisa Octocat
                   </span>
@@ -3438,7 +3402,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     github.com
                   </span>
@@ -3475,7 +3439,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                     />
                   </svg>
                   <span
-                    class="text-xs"
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
                     GitHub App
                   </span>
diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
index c79e05f1d..833646884 100644
--- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
@@ -130,6 +130,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-hideBots"
             id="hideBots"
             type="checkbox"
           />
@@ -142,9 +143,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Hide notifications from Bot accounts
             </label>
-            <span
+            <div
               aria-label="tooltip-hideBots"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-hideBots"
               id="tooltip-hideBots"
             >
               <svg
@@ -163,7 +165,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -206,11 +208,11 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
           </h2>
         </div>
       </legend>
-      <span
-        class="text-xs italic"
+      <i
+        class="Text-sc-17v1xeu-0 hmAFGJ text-xs"
       >
         Note: If no reasons are selected, all notifications will be shown.
-      </span>
+      </i>
       <div
         class="mt-3 mb-2 text-sm"
       >
@@ -219,6 +221,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-approval_requested"
             id="approval_requested"
             type="checkbox"
           />
@@ -231,9 +234,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Approval Requested
             </label>
-            <span
+            <div
               aria-label="tooltip-approval_requested"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-approval_requested"
               id="tooltip-approval_requested"
             >
               <svg
@@ -252,7 +256,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -264,6 +268,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-assign"
             id="assign"
             type="checkbox"
           />
@@ -276,9 +281,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Assigned
             </label>
-            <span
+            <div
               aria-label="tooltip-assign"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-assign"
               id="tooltip-assign"
             >
               <svg
@@ -297,7 +303,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -309,6 +315,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-author"
             id="author"
             type="checkbox"
           />
@@ -321,9 +328,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Authored
             </label>
-            <span
+            <div
               aria-label="tooltip-author"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-author"
               id="tooltip-author"
             >
               <svg
@@ -342,7 +350,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -354,6 +362,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-ci_activity"
             id="ci_activity"
             type="checkbox"
           />
@@ -366,9 +375,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Workflow Run Completed
             </label>
-            <span
+            <div
               aria-label="tooltip-ci_activity"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-ci_activity"
               id="tooltip-ci_activity"
             >
               <svg
@@ -387,7 +397,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -399,6 +409,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-comment"
             id="comment"
             type="checkbox"
           />
@@ -411,9 +422,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Commented
             </label>
-            <span
+            <div
               aria-label="tooltip-comment"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-comment"
               id="tooltip-comment"
             >
               <svg
@@ -432,7 +444,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -444,6 +456,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-invitation"
             id="invitation"
             type="checkbox"
           />
@@ -456,9 +469,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Invitation Received
             </label>
-            <span
+            <div
               aria-label="tooltip-invitation"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-invitation"
               id="tooltip-invitation"
             >
               <svg
@@ -477,7 +491,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -489,6 +503,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-manual"
             id="manual"
             type="checkbox"
           />
@@ -501,9 +516,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Updated
             </label>
-            <span
+            <div
               aria-label="tooltip-manual"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-manual"
               id="tooltip-manual"
             >
               <svg
@@ -522,7 +538,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -534,6 +550,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-member_feature_requested"
             id="member_feature_requested"
             type="checkbox"
           />
@@ -546,9 +563,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Member Feature Requested
             </label>
-            <span
+            <div
               aria-label="tooltip-member_feature_requested"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-member_feature_requested"
               id="tooltip-member_feature_requested"
             >
               <svg
@@ -567,7 +585,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -579,6 +597,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-mention"
             id="mention"
             type="checkbox"
           />
@@ -591,9 +610,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Mentioned
             </label>
-            <span
+            <div
               aria-label="tooltip-mention"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-mention"
               id="tooltip-mention"
             >
               <svg
@@ -612,7 +632,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -624,6 +644,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-review_requested"
             id="review_requested"
             type="checkbox"
           />
@@ -636,9 +657,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Review Requested
             </label>
-            <span
+            <div
               aria-label="tooltip-review_requested"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-review_requested"
               id="tooltip-review_requested"
             >
               <svg
@@ -657,7 +679,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -669,6 +691,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-security_advisory_credit"
             id="security_advisory_credit"
             type="checkbox"
           />
@@ -681,9 +704,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Security Advisory Credit Received
             </label>
-            <span
+            <div
               aria-label="tooltip-security_advisory_credit"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-security_advisory_credit"
               id="tooltip-security_advisory_credit"
             >
               <svg
@@ -702,7 +726,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -714,6 +738,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-security_alert"
             id="security_alert"
             type="checkbox"
           />
@@ -726,9 +751,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Security Alert Received
             </label>
-            <span
+            <div
               aria-label="tooltip-security_alert"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-security_alert"
               id="tooltip-security_alert"
             >
               <svg
@@ -747,7 +773,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -759,6 +785,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-state_change"
             id="state_change"
             type="checkbox"
           />
@@ -771,9 +798,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               State Changed
             </label>
-            <span
+            <div
               aria-label="tooltip-state_change"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-state_change"
               id="tooltip-state_change"
             >
               <svg
@@ -792,7 +820,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -804,6 +832,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-subscribed"
             id="subscribed"
             type="checkbox"
           />
@@ -816,9 +845,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Updated
             </label>
-            <span
+            <div
               aria-label="tooltip-subscribed"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-subscribed"
               id="tooltip-subscribed"
             >
               <svg
@@ -837,7 +867,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -849,6 +879,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
+            data-testid="checkbox-team_mention"
             id="team_mention"
             type="checkbox"
           />
@@ -861,9 +892,10 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             >
               Team Mentioned
             </label>
-            <span
+            <div
               aria-label="tooltip-team_mention"
-              class="relative"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-team_mention"
               id="tooltip-team_mention"
             >
               <svg
@@ -882,7 +914,7 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
                   d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                 />
               </svg>
-            </span>
+            </div>
           </div>
         </div>
       </div>
@@ -962,6 +994,7 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re
   >
     <input
       class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-mention"
       id="mention"
       type="checkbox"
     />
@@ -974,9 +1007,10 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re
       >
         Mentioned
       </label>
-      <span
+      <div
         aria-label="tooltip-mention"
-        class="relative"
+        class="Box-sc-g0xbh4-0 relative"
+        data-testid="tooltip-tooltip-mention"
         id="tooltip-mention"
       >
         <svg
@@ -995,7 +1029,7 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re
             d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
           />
         </svg>
-      </span>
+      </div>
     </div>
   </div>
 </div>
@@ -1010,6 +1044,7 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re
   >
     <input
       class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-mention"
       id="mention"
       type="checkbox"
     />
@@ -1022,9 +1057,10 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re
       >
         Mentioned
       </label>
-      <span
+      <div
         aria-label="tooltip-mention"
-        class="relative"
+        class="Box-sc-g0xbh4-0 relative"
+        data-testid="tooltip-tooltip-mention"
         id="tooltip-mention"
       >
         <svg
@@ -1043,7 +1079,7 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re
             d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
           />
         </svg>
-      </span>
+      </div>
     </div>
   </div>
 </div>
@@ -1058,6 +1094,7 @@ exports[`renderer/routes/Filters.tsx Users section should be able to toggle the
   >
     <input
       class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-hideBots"
       id="hideBots"
       type="checkbox"
     />
@@ -1070,9 +1107,10 @@ exports[`renderer/routes/Filters.tsx Users section should be able to toggle the
       >
         Hide notifications from Bot accounts
       </label>
-      <span
+      <div
         aria-label="tooltip-hideBots"
-        class="relative"
+        class="Box-sc-g0xbh4-0 relative"
+        data-testid="tooltip-tooltip-hideBots"
         id="tooltip-hideBots"
       >
         <svg
@@ -1091,7 +1129,7 @@ exports[`renderer/routes/Filters.tsx Users section should be able to toggle the
             d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
           />
         </svg>
-      </span>
+      </div>
     </div>
   </div>
 </div>
@@ -1106,6 +1144,7 @@ exports[`renderer/routes/Filters.tsx Users section should not be able to toggle
   >
     <input
       class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-hideBots"
       disabled=""
       id="hideBots"
       type="checkbox"
@@ -1119,9 +1158,10 @@ exports[`renderer/routes/Filters.tsx Users section should not be able to toggle
       >
         Hide notifications from Bot accounts
       </label>
-      <span
+      <div
         aria-label="tooltip-hideBots"
-        class="relative"
+        class="Box-sc-g0xbh4-0 relative"
+        data-testid="tooltip-tooltip-hideBots"
         id="tooltip-hideBots"
       >
         <svg
@@ -1140,7 +1180,7 @@ exports[`renderer/routes/Filters.tsx Users section should not be able to toggle
             d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
           />
         </svg>
-      </span>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index 522d6cdaf..e94ffed2a 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -360,6 +360,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             <input
               checked=""
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-detailedNotifications"
               id="detailedNotifications"
               type="checkbox"
             />
@@ -372,9 +373,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 Detailed notifications
               </label>
-              <span
+              <div
                 aria-label="tooltip-detailedNotifications"
-                class="relative"
+                class="Box-sc-g0xbh4-0 relative"
+                data-testid="tooltip-tooltip-detailedNotifications"
                 id="tooltip-detailedNotifications"
               >
                 <svg
@@ -393,7 +395,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                     d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                   />
                 </svg>
-              </span>
+              </div>
             </div>
           </div>
         </div>
@@ -406,6 +408,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             <input
               checked=""
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-showPills"
               id="showPills"
               type="checkbox"
             />
@@ -418,9 +421,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 Show notification metric pills
               </label>
-              <span
+              <div
                 aria-label="tooltip-showPills"
-                class="relative"
+                class="Box-sc-g0xbh4-0 relative"
+                data-testid="tooltip-tooltip-showPills"
                 id="tooltip-showPills"
               >
                 <svg
@@ -439,7 +443,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                     d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                   />
                 </svg>
-              </span>
+              </div>
             </div>
           </div>
         </div>
@@ -452,6 +456,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             <input
               checked=""
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-showNumber"
               id="showNumber"
               type="checkbox"
             />
@@ -464,9 +469,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 Show number
               </label>
-              <span
+              <div
                 aria-label="tooltip-showNumber"
-                class="relative"
+                class="Box-sc-g0xbh4-0 relative"
+                data-testid="tooltip-tooltip-showNumber"
                 id="tooltip-showNumber"
               >
                 <svg
@@ -485,7 +491,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                     d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                   />
                 </svg>
-              </span>
+              </div>
             </div>
           </div>
         </div>
@@ -498,6 +504,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             <input
               checked=""
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-showAccountHeader"
               disabled=""
               id="showAccountHeader"
               type="checkbox"
@@ -571,14 +578,15 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               <input
                 checked=""
                 class="size-4 cursor-pointer"
-                id="groupBy_repository"
+                data-testid="radio-groupby-repository"
+                id="radio-groupby-repository"
                 name="groupBy"
                 type="radio"
                 value="REPOSITORY"
               />
               <label
                 class="mr-3 font-medium cursor-pointer"
-                for="groupBy_repository"
+                for="radio-groupby-repository"
               >
                 Repository
               </label>
@@ -588,14 +596,15 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             >
               <input
                 class="size-4 cursor-pointer"
-                id="groupBy_date"
+                data-testid="radio-groupby-date"
+                id="radio-groupby-date"
                 name="groupBy"
                 type="radio"
                 value="DATE"
               />
               <label
                 class="mr-3 font-medium cursor-pointer"
-                for="groupBy_date"
+                for="radio-groupby-date"
               >
                 Date
               </label>
@@ -611,6 +620,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             <input
               checked=""
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-fetchAllNotifications"
               id="fetchAllNotifications"
               type="checkbox"
             />
@@ -623,9 +633,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 Fetch all notifications
               </label>
-              <span
+              <div
                 aria-label="tooltip-fetchAllNotifications"
-                class="relative"
+                class="Box-sc-g0xbh4-0 relative"
+                data-testid="tooltip-tooltip-fetchAllNotifications"
                 id="tooltip-fetchAllNotifications"
               >
                 <svg
@@ -644,7 +655,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                     d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                   />
                 </svg>
-              </span>
+              </div>
             </div>
           </div>
         </div>
@@ -656,6 +667,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-showOnlyParticipating"
               id="showOnlyParticipating"
               type="checkbox"
             />
@@ -668,9 +680,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 Show only participating
               </label>
-              <span
+              <div
                 aria-label="tooltip-showOnlyParticipating"
-                class="relative"
+                class="Box-sc-g0xbh4-0 relative"
+                data-testid="tooltip-tooltip-showOnlyParticipating"
                 id="tooltip-showOnlyParticipating"
               >
                 <svg
@@ -689,7 +702,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                     d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                   />
                 </svg>
-              </span>
+              </div>
             </div>
           </div>
         </div>
@@ -701,6 +714,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-markAsDoneOnOpen"
               id="markAsDoneOnOpen"
               type="checkbox"
             />
@@ -713,9 +727,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 Mark as done on open
               </label>
-              <span
+              <div
                 aria-label="tooltip-markAsDoneOnOpen"
-                class="relative"
+                class="Box-sc-g0xbh4-0 relative"
+                data-testid="tooltip-tooltip-markAsDoneOnOpen"
                 id="tooltip-markAsDoneOnOpen"
               >
                 <svg
@@ -734,7 +749,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                     d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                   />
                 </svg>
-              </span>
+              </div>
             </div>
           </div>
         </div>
@@ -746,6 +761,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-markAsDoneOnUnsubscribe"
               id="markAsDoneOnUnsubscribe"
               type="checkbox"
             />
@@ -758,9 +774,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 Mark as done on unsubscribe
               </label>
-              <span
+              <div
                 aria-label="tooltip-markAsDoneOnUnsubscribe"
-                class="relative"
+                class="Box-sc-g0xbh4-0 relative"
+                data-testid="tooltip-tooltip-markAsDoneOnUnsubscribe"
                 id="tooltip-markAsDoneOnUnsubscribe"
               >
                 <svg
@@ -779,7 +796,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                     d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                   />
                 </svg>
-              </span>
+              </div>
             </div>
           </div>
         </div>
@@ -791,6 +808,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-delayNotificationState"
               id="delayNotificationState"
               type="checkbox"
             />
@@ -803,9 +821,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 Delay notification state
               </label>
-              <span
+              <div
                 aria-label="tooltip-delayNotificationState"
-                class="relative"
+                class="Box-sc-g0xbh4-0 relative"
+                data-testid="tooltip-tooltip-delayNotificationState"
                 id="tooltip-delayNotificationState"
               >
                 <svg
@@ -824,7 +843,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                     d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                   />
                 </svg>
-              </span>
+              </div>
             </div>
           </div>
         </div>
@@ -885,14 +904,15 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               <input
                 checked=""
                 class="size-4 cursor-pointer"
-                id="openLinks_foreground"
+                data-testid="radio-openlinks-foreground"
+                id="radio-openlinks-foreground"
                 name="openLinks"
                 type="radio"
                 value="FOREGROUND"
               />
               <label
                 class="mr-3 font-medium cursor-pointer"
-                for="openLinks_foreground"
+                for="radio-openlinks-foreground"
               >
                 Foreground
               </label>
@@ -902,14 +922,15 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             >
               <input
                 class="size-4 cursor-pointer"
-                id="openLinks_background"
+                data-testid="radio-openlinks-background"
+                id="radio-openlinks-background"
                 name="openLinks"
                 type="radio"
                 value="BACKGROUND"
               />
               <label
                 class="mr-3 font-medium cursor-pointer"
-                for="openLinks_background"
+                for="radio-openlinks-background"
               >
                 Background
               </label>
@@ -925,7 +946,8 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             <input
               checked=""
               class="size-4 rounded-sm cursor-pointer"
-              id="keyboardShortcutEnabled"
+              data-testid="checkbox-keyboardShortcut"
+              id="keyboardShortcut"
               type="checkbox"
             />
             <div
@@ -933,14 +955,15 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             >
               <label
                 class="font-medium text-gitify-font cursor-pointer"
-                for="keyboardShortcutEnabled"
+                for="keyboardShortcut"
               >
                 Enable keyboard shortcut
               </label>
-              <span
-                aria-label="tooltip-keyboardShortcutEnabled"
-                class="relative"
-                id="tooltip-keyboardShortcutEnabled"
+              <div
+                aria-label="tooltip-keyboardShortcut"
+                class="Box-sc-g0xbh4-0 relative"
+                data-testid="tooltip-tooltip-keyboardShortcut"
+                id="tooltip-keyboardShortcut"
               >
                 <svg
                   aria-hidden="true"
@@ -958,7 +981,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                     d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                   />
                 </svg>
-              </span>
+              </div>
             </div>
           </div>
         </div>
@@ -971,6 +994,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             <input
               checked=""
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-showNotificationsCountInTray"
               id="showNotificationsCountInTray"
               type="checkbox"
             />
@@ -995,6 +1019,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             <input
               checked=""
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-showNotifications"
               id="showNotifications"
               type="checkbox"
             />
@@ -1019,6 +1044,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             <input
               checked=""
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-playSound"
               id="playSound"
               type="checkbox"
             />
@@ -1042,6 +1068,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-useAlternateIdleIcon"
               id="useAlternateIdleIcon"
               type="checkbox"
             />
@@ -1054,9 +1081,10 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 Use alternate idle icon
               </label>
-              <span
+              <div
                 aria-label="tooltip-useAlternateIdleIcon"
-                class="relative"
+                class="Box-sc-g0xbh4-0 relative"
+                data-testid="tooltip-tooltip-useAlternateIdleIcon"
                 id="tooltip-useAlternateIdleIcon"
               >
                 <svg
@@ -1075,7 +1103,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                     d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
                   />
                 </svg>
-              </span>
+              </div>
             </div>
           </div>
         </div>
@@ -1087,7 +1115,8 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
-              id="openAtStartUp"
+              data-testid="checkbox-openAtStartup"
+              id="openAtStartup"
               type="checkbox"
             />
             <div
@@ -1095,7 +1124,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             >
               <label
                 class="font-medium text-gitify-font cursor-pointer"
-                for="openAtStartUp"
+                for="openAtStartup"
               >
                 Open at startup
               </label>

From 3a0d88ac91c854104178941deb0f9817d8b4b6d5 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Sat, 25 Jan 2025 10:45:34 -0500
Subject: [PATCH 3/4] refactor: notification row layouts

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/App.tsx                          |    6 +-
 src/renderer/components/fields/Checkbox.tsx   |   58 +-
 src/renderer/components/fields/RadioGroup.tsx |   59 +-
 .../__snapshots__/Checkbox.test.tsx.snap      |   78 +-
 .../__snapshots__/RadioGroup.test.tsx.snap    |  304 +-
 src/renderer/components/primitives/Title.tsx  |   22 +-
 .../__snapshots__/Header.test.tsx.snap        |  124 +-
 .../__snapshots__/Title.test.tsx.snap         |  124 +-
 .../settings/AppearanceSettings.tsx           |  386 +--
 .../settings/NotificationSettings.tsx         |  193 +-
 .../components/settings/SystemSettings.tsx    |  155 +-
 src/renderer/routes/Accounts.tsx              |    4 +-
 src/renderer/routes/Filters.tsx               |   57 +-
 src/renderer/routes/Settings.tsx              |    4 +-
 .../__snapshots__/Accounts.test.tsx.snap      |  222 +-
 .../__snapshots__/Filters.test.tsx.snap       | 2845 ++++++++++++-----
 .../LoginWithOAuthApp.test.tsx.snap           |  124 +-
 ...LoginWithPersonalAccessToken.test.tsx.snap |  124 +-
 .../__snapshots__/Settings.test.tsx.snap      | 1496 ++++-----
 19 files changed, 3972 insertions(+), 2413 deletions(-)

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index cc4bdee3a..eda622c32 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -7,7 +7,7 @@ import {
   useLocation,
 } from 'react-router-dom';
 
-import { BaseStyles, ThemeProvider } from '@primer/react';
+import { BaseStyles, Box, ThemeProvider } from '@primer/react';
 
 import { Loading } from './components/Loading';
 import { Sidebar } from './components/Sidebar';
@@ -47,7 +47,7 @@ export const App = () => {
       <BaseStyles>
         <AppProvider>
           <Router>
-            <div className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-sidebar bg-gitify-background">
+            <Box className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-sidebar bg-gitify-background">
               <Loading />
               <Sidebar />
               <Routes>
@@ -93,7 +93,7 @@ export const App = () => {
                   element={<LoginWithOAuthAppRoute />}
                 />
               </Routes>
-            </div>
+            </Box>
           </Router>
         </AppProvider>
       </BaseStyles>
diff --git a/src/renderer/components/fields/Checkbox.tsx b/src/renderer/components/fields/Checkbox.tsx
index 264afeba7..4a0fd8581 100644
--- a/src/renderer/components/fields/Checkbox.tsx
+++ b/src/renderer/components/fields/Checkbox.tsx
@@ -1,4 +1,7 @@
 import type { FC, ReactNode } from 'react';
+
+import { Stack } from '@primer/react';
+
 import { cn } from '../../utils/cn';
 import { Tooltip } from './Tooltip';
 
@@ -13,33 +16,34 @@ export interface ICheckbox {
 
 export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
   return (
-    <div className="mt-3 mb-2 text-sm">
-      <div className="flex items-center">
-        <input
-          type="checkbox"
-          id={props.name}
-          className="size-4 rounded-sm cursor-pointer"
-          checked={props.checked}
-          onChange={props.onChange}
-          disabled={props.disabled}
-          data-testid={`checkbox-${props.name}`}
-        />
+    <Stack
+      direction="horizontal"
+      gap="condensed"
+      align="center"
+      className="text-sm"
+    >
+      <input
+        type="checkbox"
+        id={props.name}
+        className="size-4 rounded-sm cursor-pointer"
+        checked={props.checked}
+        onChange={props.onChange}
+        disabled={props.disabled}
+        data-testid={`checkbox-${props.name}`}
+      />
 
-        <div className="flex items-center ml-3">
-          <label
-            htmlFor={props.name}
-            className={cn(
-              'font-medium text-gitify-font cursor-pointer',
-              props.disabled && 'line-through',
-            )}
-          >
-            {props.label}
-          </label>
-          {props.tooltip && (
-            <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
-          )}
-        </div>
-      </div>
-    </div>
+      <label
+        htmlFor={props.name}
+        className={cn(
+          'font-medium text-gitify-font cursor-pointer',
+          props.disabled && 'line-through',
+        )}
+      >
+        {props.label}
+      </label>
+      {props.tooltip && (
+        <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
+      )}
+    </Stack>
   );
 };
diff --git a/src/renderer/components/fields/RadioGroup.tsx b/src/renderer/components/fields/RadioGroup.tsx
index 4c5fbe143..d395edeb4 100644
--- a/src/renderer/components/fields/RadioGroup.tsx
+++ b/src/renderer/components/fields/RadioGroup.tsx
@@ -1,4 +1,7 @@
 import type { ChangeEvent, FC } from 'react';
+
+import { Stack } from '@primer/react';
+
 import type { RadioGroupItem } from '../../types';
 import { FieldLabel } from './FieldLabel';
 
@@ -12,34 +15,38 @@ export interface IRadioGroup {
 
 export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
   return (
-    <div className="flex items-start my-2 text-sm font-medium">
+    <Stack
+      direction="horizontal"
+      gap="condensed"
+      align="center"
+      className="text-sm"
+    >
       <FieldLabel name={props.name} label={props.label} />
 
-      <div
-        className="flex items-center space-x-4"
-        role="group"
-        aria-labelledby={props.name}
-      >
-        {props.options.map((item) => {
-          const name = `radio-${props.name}-${item.value}`.toLowerCase();
+      {props.options.map((item) => {
+        const name = `radio-${props.name}-${item.value}`.toLowerCase();
 
-          return (
-            <div className="flex items-center gap-2" key={name}>
-              <input
-                type="radio"
-                className="size-4 cursor-pointer"
-                id={name}
-                name={props.name}
-                value={item.value}
-                onChange={props.onChange}
-                checked={item.value === props.value}
-                data-testid={name}
-              />
-              <FieldLabel name={name} label={item.label} />
-            </div>
-          );
-        })}
-      </div>
-    </div>
+        return (
+          <Stack
+            direction="horizontal"
+            gap="condensed"
+            align="center"
+            key={name}
+          >
+            <input
+              type="radio"
+              className="size-4 cursor-pointer"
+              id={name}
+              name={props.name}
+              value={item.value}
+              onChange={props.onChange}
+              checked={item.value === props.value}
+              data-testid={name}
+            />
+            <FieldLabel name={name} label={item.label} />
+          </Stack>
+        );
+      })}
+    </Stack>
   );
 };
diff --git a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
index 748f774a7..9f0e78ed3 100644
--- a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
@@ -6,38 +6,13 @@ exports[`renderer/components/fields/Checkbox.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="mt-3 mb-2 text-sm"
-      >
-        <div
-          class="flex items-center"
-        >
-          <input
-            checked=""
-            class="size-4 rounded-sm cursor-pointer"
-            data-testid="checkbox-appearance"
-            id="appearance"
-            type="checkbox"
-          />
-          <div
-            class="flex items-center ml-3"
-          >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="appearance"
-            >
-              Appearance
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="mt-3 mb-2 text-sm"
-    >
-      <div
-        class="flex items-center"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
         <input
           checked=""
@@ -46,18 +21,39 @@ exports[`renderer/components/fields/Checkbox.tsx should render 1`] = `
           id="appearance"
           type="checkbox"
         />
-        <div
-          class="flex items-center ml-3"
+        <label
+          class="font-medium text-gitify-font cursor-pointer"
+          for="appearance"
         >
-          <label
-            class="font-medium text-gitify-font cursor-pointer"
-            for="appearance"
-          >
-            Appearance
-          </label>
-        </div>
+          Appearance
+        </label>
       </div>
     </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="condensed"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="nowrap"
+    >
+      <input
+        checked=""
+        class="size-4 rounded-sm cursor-pointer"
+        data-testid="checkbox-appearance"
+        id="appearance"
+        type="checkbox"
+      />
+      <label
+        class="font-medium text-gitify-font cursor-pointer"
+        for="appearance"
+      >
+        Appearance
+      </label>
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap b/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
index a9e3e3979..519825efd 100644
--- a/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/RadioGroup.test.tsx.snap
@@ -6,7 +6,13 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex items-start my-2 text-sm font-medium"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
         <label
           class="mr-3 font-medium cursor-pointer"
@@ -15,68 +21,13 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
           Appearance
         </label>
         <div
-          aria-labelledby="appearance"
-          class="flex items-center space-x-4"
-          role="group"
-        >
-          <div
-            class="flex items-center gap-2"
-          >
-            <input
-              class="size-4 cursor-pointer"
-              data-testid="radio-appearance-one"
-              id="radio-appearance-one"
-              name="appearance"
-              type="radio"
-              value="one"
-            />
-            <label
-              class="mr-3 font-medium cursor-pointer"
-              for="radio-appearance-one"
-            >
-              Value 1
-            </label>
-          </div>
-          <div
-            class="flex items-center gap-2"
-          >
-            <input
-              checked=""
-              class="size-4 cursor-pointer"
-              data-testid="radio-appearance-two"
-              id="radio-appearance-two"
-              name="appearance"
-              type="radio"
-              value="two"
-            />
-            <label
-              class="mr-3 font-medium cursor-pointer"
-              for="radio-appearance-two"
-            >
-              Value 2
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="flex items-start my-2 text-sm font-medium"
-    >
-      <label
-        class="mr-3 font-medium cursor-pointer"
-        for="appearance"
-      >
-        Appearance
-      </label>
-      <div
-        aria-labelledby="appearance"
-        class="flex items-center space-x-4"
-        role="group"
-      >
-        <div
-          class="flex items-center gap-2"
+          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"
         >
           <input
             class="size-4 cursor-pointer"
@@ -94,7 +45,13 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
           </label>
         </div>
         <div
-          class="flex items-center gap-2"
+          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"
         >
           <input
             checked=""
@@ -114,6 +71,73 @@ exports[`renderer/components/fields/RadioGroup.tsx should render 1`] = `
         </div>
       </div>
     </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="condensed"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="nowrap"
+    >
+      <label
+        class="mr-3 font-medium cursor-pointer"
+        for="appearance"
+      >
+        Appearance
+      </label>
+      <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"
+      >
+        <input
+          class="size-4 cursor-pointer"
+          data-testid="radio-appearance-one"
+          id="radio-appearance-one"
+          name="appearance"
+          type="radio"
+          value="one"
+        />
+        <label
+          class="mr-3 font-medium cursor-pointer"
+          for="radio-appearance-one"
+        >
+          Value 1
+        </label>
+      </div>
+      <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"
+      >
+        <input
+          checked=""
+          class="size-4 cursor-pointer"
+          data-testid="radio-appearance-two"
+          id="radio-appearance-two"
+          name="appearance"
+          type="radio"
+          value="two"
+        />
+        <label
+          class="mr-3 font-medium cursor-pointer"
+          for="radio-appearance-two"
+        >
+          Value 2
+        </label>
+      </div>
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
@@ -175,7 +199,13 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
   "baseElement": <body>
     <div>
       <div
-        class="flex items-start my-2 text-sm font-medium"
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
         <label
           class="mr-3 font-medium cursor-pointer"
@@ -184,68 +214,13 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
           Appearance
         </label>
         <div
-          aria-labelledby="appearance"
-          class="flex items-center space-x-4"
-          role="group"
-        >
-          <div
-            class="flex items-center gap-2"
-          >
-            <input
-              class="size-4 cursor-pointer"
-              data-testid="radio-appearance-one"
-              id="radio-appearance-one"
-              name="appearance"
-              type="radio"
-              value="one"
-            />
-            <label
-              class="mr-3 font-medium cursor-pointer"
-              for="radio-appearance-one"
-            >
-              Value 1
-            </label>
-          </div>
-          <div
-            class="flex items-center gap-2"
-          >
-            <input
-              checked=""
-              class="size-4 cursor-pointer"
-              data-testid="radio-appearance-two"
-              id="radio-appearance-two"
-              name="appearance"
-              type="radio"
-              value="two"
-            />
-            <label
-              class="mr-3 font-medium cursor-pointer"
-              for="radio-appearance-two"
-            >
-              Value 2
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="flex items-start my-2 text-sm font-medium"
-    >
-      <label
-        class="mr-3 font-medium cursor-pointer"
-        for="appearance"
-      >
-        Appearance
-      </label>
-      <div
-        aria-labelledby="appearance"
-        class="flex items-center space-x-4"
-        role="group"
-      >
-        <div
-          class="flex items-center gap-2"
+          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"
         >
           <input
             class="size-4 cursor-pointer"
@@ -263,7 +238,13 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
           </label>
         </div>
         <div
-          class="flex items-center gap-2"
+          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"
         >
           <input
             checked=""
@@ -283,6 +264,73 @@ exports[`renderer/components/fields/RadioGroup.tsx should render as disabled 1`]
         </div>
       </div>
     </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+      data-align="center"
+      data-direction="horizontal"
+      data-gap="condensed"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="nowrap"
+    >
+      <label
+        class="mr-3 font-medium cursor-pointer"
+        for="appearance"
+      >
+        Appearance
+      </label>
+      <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"
+      >
+        <input
+          class="size-4 cursor-pointer"
+          data-testid="radio-appearance-one"
+          id="radio-appearance-one"
+          name="appearance"
+          type="radio"
+          value="one"
+        />
+        <label
+          class="mr-3 font-medium cursor-pointer"
+          for="radio-appearance-one"
+        >
+          Value 1
+        </label>
+      </div>
+      <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"
+      >
+        <input
+          checked=""
+          class="size-4 cursor-pointer"
+          data-testid="radio-appearance-two"
+          id="radio-appearance-two"
+          name="appearance"
+          type="radio"
+          value="two"
+        />
+        <label
+          class="mr-3 font-medium cursor-pointer"
+          for="radio-appearance-two"
+        >
+          Value 2
+        </label>
+      </div>
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/components/primitives/Title.tsx b/src/renderer/components/primitives/Title.tsx
index 953ef596f..acaa79686 100644
--- a/src/renderer/components/primitives/Title.tsx
+++ b/src/renderer/components/primitives/Title.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 
 import type { Icon } from '@primer/octicons-react';
-import { Heading, Stack } from '@primer/react';
+import { Box, Heading, Stack } from '@primer/react';
 
 interface ITitle {
   icon: Icon;
@@ -12,15 +12,17 @@ interface ITitle {
 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>
+      <Box className="mb-2">
+        <Stack
+          direction="horizontal"
+          align="center"
+          gap="condensed"
+          id={props.children.toLowerCase().replace(' ', '-')}
+        >
+          <props.icon size="small" />
+          <Heading sx={{ fontSize: size }}>{props.children}</Heading>
+        </Stack>
+      </Box>
     </legend>
   );
 };
diff --git a/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap
index f05169e64..7008c4ec5 100644
--- a/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap
@@ -46,37 +46,41 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
           </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="test-header"
+              class="Box-sc-g0xbh4-0 mb-2"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-mark-github"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
+              <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="test-header"
               >
-                <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"
-                />
-              </svg>
-              <h2
-                class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-                sx="[object Object]"
-              >
-                Test Header
-              </h2>
+                <svg
+                  aria-hidden="true"
+                  class="octicon octicon-mark-github"
+                  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 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>
+                <h2
+                  class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+                  sx="[object Object]"
+                >
+                  Test Header
+                </h2>
+              </div>
             </div>
           </legend>
         </div>
@@ -125,37 +129,41 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
         </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="test-header"
+            class="Box-sc-g0xbh4-0 mb-2"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-mark-github"
-              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 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>
-            <h2
-              class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-              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"
+              id="test-header"
             >
-              Test Header
-            </h2>
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-mark-github"
+                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 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>
+              <h2
+                class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+                sx="[object Object]"
+              >
+                Test Header
+              </h2>
+            </div>
           </div>
         </legend>
       </div>
diff --git a/src/renderer/components/primitives/__snapshots__/Title.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/Title.test.tsx.snap
index c0c5afa98..deb9cc972 100644
--- a/src/renderer/components/primitives/__snapshots__/Title.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/Title.test.tsx.snap
@@ -4,37 +4,41 @@ exports[`renderer/routes/components/primitives/Title.tsx should render the title
 <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"
+      class="Box-sc-g0xbh4-0 mb-2"
     >
-      <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"
+      <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"
       >
-        <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>
+        <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>
     </div>
   </legend>
 </div>
@@ -44,37 +48,41 @@ exports[`renderer/routes/components/primitives/Title.tsx should render the title
 <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"
+      class="Box-sc-g0xbh4-0 mb-2"
     >
-      <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]"
+      <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"
       >
-        Legend
-      </h2>
+        <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>
     </div>
   </legend>
 </div>
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index 6b6e506fa..17ec47bbe 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -14,6 +14,7 @@ import {
   XCircleIcon,
 } from '@primer/octicons-react';
 import {
+  Box,
   Button,
   ButtonGroup,
   IconButton,
@@ -78,199 +79,218 @@ export const AppearanceSettings: FC = () => {
     <fieldset>
       <Title icon={PaintbrushIcon}>Appearance</Title>
 
-      <div className="flex items-center mt-3 mb-2 text-sm">
-        <FieldLabel name="theme" label="Theme:" />
-
-        <Select
-          id="theme"
-          value={settings.theme}
-          onChange={(evt) => updateSetting('theme', evt.target.value as Theme)}
-          data-testid="settings-theme"
+      <Stack direction="vertical" gap="condensed">
+        <Stack
+          direction="horizontal"
+          gap="condensed"
+          align="center"
+          className="text-sm"
         >
-          <Select.OptGroup label="System">
-            <Select.Option value={Theme.SYSTEM}>System</Select.Option>
-          </Select.OptGroup>
-          <Select.OptGroup label="Light">
-            <Select.Option value={Theme.LIGHT}>Light default</Select.Option>
-            <Select.Option value={Theme.LIGHT_HIGH_CONTRAST}>
-              Light high contrast
-            </Select.Option>
-            <Select.Option value={Theme.LIGHT_COLORBLIND}>
-              Light Protanopia & Deuteranopia
-            </Select.Option>
-            <Select.Option value={Theme.LIGHT_TRITANOPIA}>
-              Light Tritanopia
-            </Select.Option>
-          </Select.OptGroup>
-          <Select.OptGroup label="Dark">
-            <Select.Option value={Theme.DARK}>Dark default</Select.Option>
-            <Select.Option value={Theme.DARK_HIGH_CONTRAST}>
-              Dark high contrast
-            </Select.Option>
-            <Select.Option value={Theme.DARK_COLORBLIND}>
-              Dark Protanopia & Deuteranopia
-            </Select.Option>
-            <Select.Option value={Theme.DARK_TRITANOPIA}>
-              Dark Tritanopia
-            </Select.Option>
-            <Select.Option value={Theme.DARK_DIMMED}>Dark dimmed</Select.Option>
-          </Select.OptGroup>
-        </Select>
-      </div>
-
-      <div className="flex items-center mt-3 mb-2 text-sm">
-        <FieldLabel name="zoom" label="Zoom:" />
-
-        <ButtonGroup className="ml-2">
-          <IconButton
-            aria-label="Zoom out"
-            size="small"
-            icon={DashIcon}
-            unsafeDisableTooltip={true}
-            onClick={() =>
-              zoomPercentage > 0 &&
-              webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage - 10))
+          <FieldLabel name="theme" label="Theme:" />
+          <Select
+            id="theme"
+            value={settings.theme}
+            onChange={(evt) =>
+              updateSetting('theme', evt.target.value as Theme)
             }
-            data-testid="settings-zoom-out"
-          />
+            data-testid="settings-theme"
+          >
+            <Select.OptGroup label="System">
+              <Select.Option value={Theme.SYSTEM}>System</Select.Option>
+            </Select.OptGroup>
+            <Select.OptGroup label="Light">
+              <Select.Option value={Theme.LIGHT}>Light default</Select.Option>
+              <Select.Option value={Theme.LIGHT_HIGH_CONTRAST}>
+                Light high contrast
+              </Select.Option>
+              <Select.Option value={Theme.LIGHT_COLORBLIND}>
+                Light Protanopia & Deuteranopia
+              </Select.Option>
+              <Select.Option value={Theme.LIGHT_TRITANOPIA}>
+                Light Tritanopia
+              </Select.Option>
+            </Select.OptGroup>
+            <Select.OptGroup label="Dark">
+              <Select.Option value={Theme.DARK}>Dark default</Select.Option>
+              <Select.Option value={Theme.DARK_HIGH_CONTRAST}>
+                Dark high contrast
+              </Select.Option>
+              <Select.Option value={Theme.DARK_COLORBLIND}>
+                Dark Protanopia & Deuteranopia
+              </Select.Option>
+              <Select.Option value={Theme.DARK_TRITANOPIA}>
+                Dark Tritanopia
+              </Select.Option>
+              <Select.Option value={Theme.DARK_DIMMED}>
+                Dark dimmed
+              </Select.Option>
+            </Select.OptGroup>
+          </Select>
+        </Stack>
 
-          <Button aria-label="Zoom percentage" size="small" disabled>
-            {zoomPercentage.toFixed(0)}%
-          </Button>
+        <Stack
+          direction="horizontal"
+          gap="condensed"
+          align="center"
+          className="text-sm"
+        >
+          <FieldLabel name="zoom" label="Zoom:" />
 
-          <IconButton
-            aria-label="Zoom in"
-            size="small"
-            icon={PlusIcon}
-            unsafeDisableTooltip={true}
-            onClick={() =>
-              zoomPercentage < 120 &&
-              webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage + 10))
-            }
-            data-testid="settings-zoom-in"
-          />
+          <ButtonGroup className="ml-2">
+            <IconButton
+              aria-label="Zoom out"
+              size="small"
+              icon={DashIcon}
+              unsafeDisableTooltip={true}
+              onClick={() =>
+                zoomPercentage > 0 &&
+                webFrame.setZoomLevel(
+                  zoomPercentageToLevel(zoomPercentage - 10),
+                )
+              }
+              data-testid="settings-zoom-out"
+            />
 
-          <IconButton
-            aria-label="Reset zoom"
-            size="small"
-            variant="danger"
-            icon={XCircleIcon}
-            unsafeDisableTooltip={true}
-            onClick={() => webFrame.setZoomLevel(0)}
-            data-testid="settings-zoom-reset"
-          />
-        </ButtonGroup>
-      </div>
+            <Button aria-label="Zoom percentage" size="small" disabled>
+              {zoomPercentage.toFixed(0)}%
+            </Button>
 
-      <Checkbox
-        name="detailedNotifications"
-        label="Detailed notifications"
-        checked={settings.detailedNotifications}
-        onChange={(evt) =>
-          updateSetting('detailedNotifications', evt.target.checked)
-        }
-        tooltip={
-          <Stack direction="vertical" gap="condensed">
-            <Text>
-              Enrich notifications with author or last commenter profile
-              information, state and GitHub-like colors.
-            </Text>
-            <Text className="text-gitify-caution">
-              ⚠️ Users with a large number of unread notifications <i>may</i>{' '}
-              experience rate limiting under certain circumstances. Disable this
-              setting if you experience this.
-            </Text>
-          </Stack>
-        }
-      />
+            <IconButton
+              aria-label="Zoom in"
+              size="small"
+              icon={PlusIcon}
+              unsafeDisableTooltip={true}
+              onClick={() =>
+                zoomPercentage < 120 &&
+                webFrame.setZoomLevel(
+                  zoomPercentageToLevel(zoomPercentage + 10),
+                )
+              }
+              data-testid="settings-zoom-in"
+            />
 
-      <Checkbox
-        name="showPills"
-        label="Show notification metric pills"
-        checked={settings.showPills}
-        onChange={(evt) => updateSetting('showPills', evt.target.checked)}
-        tooltip={
-          <div>
-            <div>Show notification metric pills for:</div>
-            <div className="pl-4">
-              <ul>
-                <li className="flex items-center gap-1">
-                  <IssueClosedIcon size={Size.SMALL} />
-                  linked issues
-                </li>
-                <li className="flex items-center gap-1">
-                  <CheckIcon size={Size.SMALL} />
-                  pr reviews
-                </li>
-                <li className="flex items-center gap-1">
-                  <CommentIcon size={Size.SMALL} />
-                  comments
-                </li>
-                <li className="flex items-center gap-1">
-                  <TagIcon size={Size.SMALL} />
-                  labels
-                </li>
-                <li className="flex items-center gap-1">
-                  <MilestoneIcon size={Size.SMALL} />
-                  milestones
-                </li>
-              </ul>
-            </div>
-          </div>
-        }
-      />
+            <IconButton
+              aria-label="Reset zoom"
+              size="small"
+              variant="danger"
+              icon={XCircleIcon}
+              unsafeDisableTooltip={true}
+              onClick={() => webFrame.setZoomLevel(0)}
+              data-testid="settings-zoom-reset"
+            />
+          </ButtonGroup>
+        </Stack>
 
-      <Checkbox
-        name="showNumber"
-        label="Show number"
-        checked={settings.detailedNotifications && settings.showNumber}
-        onChange={(evt) =>
-          settings.detailedNotifications &&
-          updateSetting('showNumber', evt.target.checked)
-        }
-        disabled={!settings.detailedNotifications}
-        tooltip={
-          <Stack direction="vertical" gap="condensed">
-            <div>Show GitHub number for:</div>
-            <div className="pl-4">
-              <ul>
-                <li>
-                  <Stack direction="horizontal" gap="condensed">
-                    <CommentIcon size={Size.SMALL} />
-                    Discussion
-                  </Stack>
-                </li>
-                <li>
-                  <Stack direction="horizontal" gap="condensed">
+        <Checkbox
+          name="detailedNotifications"
+          label="Detailed notifications"
+          checked={settings.detailedNotifications}
+          onChange={(evt) =>
+            updateSetting('detailedNotifications', evt.target.checked)
+          }
+          tooltip={
+            <Stack direction="vertical" gap="condensed">
+              <Text>
+                Enrich notifications with author or last commenter profile
+                information, state and GitHub-like colors.
+              </Text>
+              <Text className="text-gitify-caution">
+                ⚠️ Users with a large number of unread notifications <i>may</i>{' '}
+                experience rate limiting under certain circumstances. Disable
+                this setting if you experience this.
+              </Text>
+            </Stack>
+          }
+        />
+
+        <Checkbox
+          name="showPills"
+          label="Show notification metric pills"
+          checked={settings.showPills}
+          onChange={(evt) => updateSetting('showPills', evt.target.checked)}
+          tooltip={
+            <Box>
+              <Text>Show notification metric pills for:</Text>
+              <Box className="pl-4">
+                <ul>
+                  <li className="flex items-center gap-1">
                     <IssueClosedIcon size={Size.SMALL} />
-                    Issue
-                  </Stack>
-                </li>
-                <li>
-                  <Stack direction="horizontal" gap="condensed">
-                    <GitPullRequestIcon size={Size.SMALL} />
-                    Pull Request
-                  </Stack>
-                </li>
-              </ul>
-            </div>
-            <Text className="text-gitify-caution">
-              ⚠️ This setting requires{' '}
-              <Text as="strong">Detailed Notifications</Text> to be enabled.
-            </Text>
-          </Stack>
-        }
-      />
+                    linked issues
+                  </li>
+                  <li className="flex items-center gap-1">
+                    <CheckIcon size={Size.SMALL} />
+                    pr reviews
+                  </li>
+                  <li className="flex items-center gap-1">
+                    <CommentIcon size={Size.SMALL} />
+                    comments
+                  </li>
+                  <li className="flex items-center gap-1">
+                    <TagIcon size={Size.SMALL} />
+                    labels
+                  </li>
+                  <li className="flex items-center gap-1">
+                    <MilestoneIcon size={Size.SMALL} />
+                    milestones
+                  </li>
+                </ul>
+              </Box>
+            </Box>
+          }
+        />
 
-      <Checkbox
-        name="showAccountHeader"
-        label="Show account header"
-        checked={settings.showAccountHeader || hasMultipleAccounts(auth)}
-        disabled={hasMultipleAccounts(auth)}
-        onChange={(evt) =>
-          updateSetting('showAccountHeader', evt.target.checked)
-        }
-      />
+        <Checkbox
+          name="showNumber"
+          label="Show number"
+          checked={settings.detailedNotifications && settings.showNumber}
+          onChange={(evt) =>
+            settings.detailedNotifications &&
+            updateSetting('showNumber', evt.target.checked)
+          }
+          disabled={!settings.detailedNotifications}
+          tooltip={
+            <Stack direction="vertical" gap="condensed">
+              <Text>Show GitHub number for:</Text>
+              <Box className="pl-4">
+                <ul>
+                  <li>
+                    <Stack direction="horizontal" gap="condensed">
+                      <CommentIcon size={Size.SMALL} />
+                      Discussion
+                    </Stack>
+                  </li>
+                  <li>
+                    <Stack direction="horizontal" gap="condensed">
+                      <IssueClosedIcon size={Size.SMALL} />
+                      Issue
+                    </Stack>
+                  </li>
+                  <li>
+                    <Stack direction="horizontal" gap="condensed">
+                      <GitPullRequestIcon size={Size.SMALL} />
+                      Pull Request
+                    </Stack>
+                  </li>
+                </ul>
+              </Box>
+              <Text className="text-gitify-caution">
+                ⚠️ This setting requires{' '}
+                <Text as="strong">Detailed Notifications</Text> to be enabled.
+              </Text>
+            </Stack>
+          }
+        />
+
+        <Checkbox
+          name="showAccountHeader"
+          label="Show account header"
+          checked={settings.showAccountHeader || hasMultipleAccounts(auth)}
+          disabled={hasMultipleAccounts(auth)}
+          onChange={(evt) =>
+            updateSetting('showAccountHeader', evt.target.checked)
+          }
+        />
+      </Stack>
     </fieldset>
   );
 };
diff --git a/src/renderer/components/settings/NotificationSettings.tsx b/src/renderer/components/settings/NotificationSettings.tsx
index 181aa71e4..3a67853ab 100644
--- a/src/renderer/components/settings/NotificationSettings.tsx
+++ b/src/renderer/components/settings/NotificationSettings.tsx
@@ -17,105 +17,108 @@ export const NotificationSettings: FC = () => {
   return (
     <fieldset>
       <Title icon={BellIcon}>Notifications</Title>
-      <RadioGroup
-        name="groupBy"
-        label="Group by:"
-        value={settings.groupBy}
-        options={[
-          { label: 'Repository', value: GroupBy.REPOSITORY },
-          { label: 'Date', value: GroupBy.DATE },
-        ]}
-        onChange={(evt) => {
-          updateSetting('groupBy', evt.target.value as GroupBy);
-        }}
-      />
-      <Checkbox
-        name="fetchAllNotifications"
-        label="Fetch all notifications"
-        checked={settings.fetchAllNotifications}
-        onChange={(evt) =>
-          updateSetting('fetchAllNotifications', evt.target.checked)
-        }
-        tooltip={
-          <Stack direction="vertical" gap="condensed">
+
+      <Stack direction="vertical" gap="condensed">
+        <RadioGroup
+          name="groupBy"
+          label="Group by:"
+          value={settings.groupBy}
+          options={[
+            { label: 'Repository', value: GroupBy.REPOSITORY },
+            { label: 'Date', value: GroupBy.DATE },
+          ]}
+          onChange={(evt) => {
+            updateSetting('groupBy', evt.target.value as GroupBy);
+          }}
+        />
+        <Checkbox
+          name="fetchAllNotifications"
+          label="Fetch all notifications"
+          checked={settings.fetchAllNotifications}
+          onChange={(evt) =>
+            updateSetting('fetchAllNotifications', evt.target.checked)
+          }
+          tooltip={
+            <Stack direction="vertical" gap="condensed">
+              <Text>
+                When <Text as="em">checked</Text>, Gitify will fetch{' '}
+                <Text as="strong">all</Text> notifications from your inbox.
+              </Text>
+              <Text>
+                When <Text as="em">unchecked</Text>, Gitify will only fetch the
+                first page of notifications (max 50 records per GitHub account)
+              </Text>
+            </Stack>
+          }
+        />
+        <Checkbox
+          name="showOnlyParticipating"
+          label="Show only participating"
+          checked={settings.participating}
+          onChange={(evt) => updateSetting('participating', evt.target.checked)}
+          tooltip={
+            <Text>
+              See{' '}
+              <button
+                type="button"
+                className="text-gitify-link"
+                title="Open GitHub documentation for participating and watching notifications"
+                onClick={(event: MouseEvent<HTMLElement>) => {
+                  // Don't trigger onClick of parent element.
+                  event.stopPropagation();
+                  openGitHubParticipatingDocs();
+                }}
+              >
+                official docs
+              </button>{' '}
+              for more details.
+            </Text>
+          }
+        />
+        <Checkbox
+          name="markAsDoneOnOpen"
+          label="Mark as done on open"
+          checked={settings.markAsDoneOnOpen}
+          onChange={(evt) =>
+            updateSetting('markAsDoneOnOpen', evt.target.checked)
+          }
+          tooltip={
+            <Text>
+              <Text as="strong">Mark as done</Text> feature is supported in
+              GitHub Cloud and GitHub Enterprise Server 3.13 or later.
+            </Text>
+          }
+        />
+        <Checkbox
+          name="markAsDoneOnUnsubscribe"
+          label="Mark as done on unsubscribe"
+          checked={settings.markAsDoneOnUnsubscribe}
+          onChange={(evt) =>
+            updateSetting('markAsDoneOnUnsubscribe', evt.target.checked)
+          }
+          tooltip={
             <Text>
-              When <Text as="em">checked</Text>, Gitify will fetch{' '}
-              <Text as="strong">all</Text> notifications from your inbox.
+              <Text as="strong">Mark as done</Text> feature is supported in
+              GitHub Cloud and GitHub Enterprise Server 3.13 or later.
             </Text>
+          }
+        />
+        <Checkbox
+          name="delayNotificationState"
+          label="Delay notification state"
+          checked={settings.delayNotificationState}
+          onChange={(evt) =>
+            updateSetting('delayNotificationState', evt.target.checked)
+          }
+          tooltip={
             <Text>
-              When <Text as="em">unchecked</Text>, Gitify will only fetch the
-              first page of notifications (max 50 records per GitHub account)
+              Keep the notification within {APPLICATION.NAME} upon interaction
+              (ie: open notification, mark as read, mark as done) until the next
+              refresh window (scheduled or user initiated).
             </Text>
-          </Stack>
-        }
-      />
-      <Checkbox
-        name="showOnlyParticipating"
-        label="Show only participating"
-        checked={settings.participating}
-        onChange={(evt) => updateSetting('participating', evt.target.checked)}
-        tooltip={
-          <Text>
-            See{' '}
-            <button
-              type="button"
-              className="text-gitify-link"
-              title="Open GitHub documentation for participating and watching notifications"
-              onClick={(event: MouseEvent<HTMLElement>) => {
-                // Don't trigger onClick of parent element.
-                event.stopPropagation();
-                openGitHubParticipatingDocs();
-              }}
-            >
-              official docs
-            </button>{' '}
-            for more details.
-          </Text>
-        }
-      />
-      <Checkbox
-        name="markAsDoneOnOpen"
-        label="Mark as done on open"
-        checked={settings.markAsDoneOnOpen}
-        onChange={(evt) =>
-          updateSetting('markAsDoneOnOpen', evt.target.checked)
-        }
-        tooltip={
-          <div>
-            <strong>Mark as done</strong> feature is supported in GitHub Cloud
-            and GitHub Enterprise Server 3.13 or later.
-          </div>
-        }
-      />
-      <Checkbox
-        name="markAsDoneOnUnsubscribe"
-        label="Mark as done on unsubscribe"
-        checked={settings.markAsDoneOnUnsubscribe}
-        onChange={(evt) =>
-          updateSetting('markAsDoneOnUnsubscribe', evt.target.checked)
-        }
-        tooltip={
-          <div>
-            <strong>Mark as done</strong> feature is supported in GitHub Cloud
-            and GitHub Enterprise Server 3.13 or later.
-          </div>
-        }
-      />
-      <Checkbox
-        name="delayNotificationState"
-        label="Delay notification state"
-        checked={settings.delayNotificationState}
-        onChange={(evt) =>
-          updateSetting('delayNotificationState', evt.target.checked)
-        }
-        tooltip={
-          <div>
-            Keep the notification within {APPLICATION.NAME} upon interaction
-            (ie: open notification, mark as read, mark as done) until the next
-            refresh window (scheduled or user initiated).
-          </div>
-        }
-      />
+          }
+        />
+      </Stack>
     </fieldset>
   );
 };
diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx
index 2f9b3b059..91f3e5f42 100644
--- a/src/renderer/components/settings/SystemSettings.tsx
+++ b/src/renderer/components/settings/SystemSettings.tsx
@@ -18,87 +18,92 @@ export const SystemSettings: FC = () => {
   return (
     <fieldset>
       <Title icon={DeviceDesktopIcon}>System</Title>
-      <RadioGroup
-        name="openLinks"
-        label="Open Links:"
-        value={settings.openLinks}
-        options={[
-          { label: 'Foreground', value: OpenPreference.FOREGROUND },
-          { label: 'Background', value: OpenPreference.BACKGROUND },
-        ]}
-        onChange={(evt) => {
-          updateSetting('openLinks', evt.target.value as OpenPreference);
-        }}
-      />
-      <Checkbox
-        name="keyboardShortcut"
-        label="Enable keyboard shortcut"
-        checked={settings.keyboardShortcut}
-        onChange={(evt) =>
-          updateSetting('keyboardShortcut', evt.target.checked)
-        }
-        tooltip={
-          <Box>
-            When enabled you can use the hotkeys{' '}
-            <Text as="strong" className="text-gitify-caution">
-              {Constants.DEFAULT_KEYBOARD_SHORTCUT}
-            </Text>{' '}
-            to show or hide {APPLICATION.NAME}.
-          </Box>
-        }
-      />
-      {isMacOS() && (
+
+      <Stack direction="vertical" gap="condensed">
+        <RadioGroup
+          name="openLinks"
+          label="Open Links:"
+          value={settings.openLinks}
+          options={[
+            { label: 'Foreground', value: OpenPreference.FOREGROUND },
+            { label: 'Background', value: OpenPreference.BACKGROUND },
+          ]}
+          onChange={(evt) => {
+            updateSetting('openLinks', evt.target.value as OpenPreference);
+          }}
+        />
+        <Checkbox
+          name="keyboardShortcut"
+          label="Enable keyboard shortcut"
+          checked={settings.keyboardShortcut}
+          onChange={(evt) =>
+            updateSetting('keyboardShortcut', evt.target.checked)
+          }
+          tooltip={
+            <Box>
+              When enabled you can use the hotkeys{' '}
+              <Text as="strong" className="text-gitify-caution">
+                {Constants.DEFAULT_KEYBOARD_SHORTCUT}
+              </Text>{' '}
+              to show or hide {APPLICATION.NAME}.
+            </Box>
+          }
+        />
+        {isMacOS() && (
+          <Checkbox
+            name="showNotificationsCountInTray"
+            label="Show notifications count in tray"
+            checked={settings.showNotificationsCountInTray}
+            onChange={(evt) =>
+              updateSetting('showNotificationsCountInTray', evt.target.checked)
+            }
+          />
+        )}
         <Checkbox
-          name="showNotificationsCountInTray"
-          label="Show notifications count in tray"
-          checked={settings.showNotificationsCountInTray}
+          name="showNotifications"
+          label="Show system notifications"
+          checked={settings.showNotifications}
           onChange={(evt) =>
-            updateSetting('showNotificationsCountInTray', evt.target.checked)
+            updateSetting('showNotifications', evt.target.checked)
           }
         />
-      )}
-      <Checkbox
-        name="showNotifications"
-        label="Show system notifications"
-        checked={settings.showNotifications}
-        onChange={(evt) =>
-          updateSetting('showNotifications', evt.target.checked)
-        }
-      />
-      <Checkbox
-        name="playSound"
-        label="Play sound"
-        checked={settings.playSound}
-        onChange={(evt) => updateSetting('playSound', evt.target.checked)}
-      />
-      <Checkbox
-        name="useAlternateIdleIcon"
-        label="Use alternate idle icon"
-        checked={settings.useAlternateIdleIcon}
-        onChange={(evt) =>
-          updateSetting('useAlternateIdleIcon', evt.target.checked)
-        }
-        tooltip={
-          <Stack direction="vertical" gap="condensed">
-            <Text>
-              Use a white {APPLICATION.NAME} logo (instead of the default black
-              logo) when all notifications are read.
-            </Text>
-            <Text>
-              This is particularly useful for devices which have a dark-themed
-              menubar or taskbar.
-            </Text>
-          </Stack>
-        }
-      />
-      {!isLinux() && (
         <Checkbox
-          name="openAtStartup"
-          label="Open at startup"
-          checked={settings.openAtStartup}
-          onChange={(evt) => updateSetting('openAtStartup', evt.target.checked)}
+          name="playSound"
+          label="Play sound"
+          checked={settings.playSound}
+          onChange={(evt) => updateSetting('playSound', evt.target.checked)}
+        />
+        <Checkbox
+          name="useAlternateIdleIcon"
+          label="Use alternate idle icon"
+          checked={settings.useAlternateIdleIcon}
+          onChange={(evt) =>
+            updateSetting('useAlternateIdleIcon', evt.target.checked)
+          }
+          tooltip={
+            <Stack direction="vertical" gap="condensed">
+              <Text>
+                Use a white {APPLICATION.NAME} logo (instead of the default
+                black logo) when all notifications are read.
+              </Text>
+              <Text>
+                This is particularly useful for devices which have a dark-themed
+                menubar or taskbar.
+              </Text>
+            </Stack>
+          }
         />
-      )}
+        {!isLinux() && (
+          <Checkbox
+            name="openAtStartup"
+            label="Open at startup"
+            checked={settings.openAtStartup}
+            onChange={(evt) =>
+              updateSetting('openAtStartup', evt.target.checked)
+            }
+          />
+        )}
+      </Stack>
     </fieldset>
   );
 };
diff --git a/src/renderer/routes/Accounts.tsx b/src/renderer/routes/Accounts.tsx
index 3138e59cf..50d542851 100644
--- a/src/renderer/routes/Accounts.tsx
+++ b/src/renderer/routes/Accounts.tsx
@@ -119,7 +119,7 @@ export const AccountsRoute: FC = () => {
 
                   <Box className="pl-4 pb-2 text-xs">
                     <Stack direction="vertical" gap="condensed">
-                      <div hidden={!account.user.name}>
+                      <Box hidden={!account.user.name}>
                         <Stack
                           direction="horizontal"
                           gap="condensed"
@@ -128,7 +128,7 @@ export const AccountsRoute: FC = () => {
                           <PersonIcon />
                           <Text>{account.user?.name}</Text>
                         </Stack>
-                      </div>
+                      </Box>
 
                       <button
                         title="Open host"
diff --git a/src/renderer/routes/Filters.tsx b/src/renderer/routes/Filters.tsx
index 10b30af9b..102a39e82 100644
--- a/src/renderer/routes/Filters.tsx
+++ b/src/renderer/routes/Filters.tsx
@@ -6,7 +6,7 @@ import {
   FilterRemoveIcon,
   NoteIcon,
 } from '@primer/octicons-react';
-import { Button, Text, Tooltip } from '@primer/react';
+import { Box, Button, Stack, Text, Tooltip } from '@primer/react';
 
 import { Checkbox } from '../components/fields/Checkbox';
 import { Contents } from '../components/layout/Contents';
@@ -46,6 +46,7 @@ export const FiltersRoute: FC = () => {
       <Contents>
         <fieldset className="mb-3">
           <Title icon={FeedPersonIcon}>Users</Title>
+
           <Checkbox
             name="hideBots"
             label="Hide notifications from Bot accounts"
@@ -56,39 +57,45 @@ export const FiltersRoute: FC = () => {
             }
             disabled={!settings.detailedNotifications}
             tooltip={
-              <div>
-                <div className="pb-3">
+              <Stack direction="vertical" gap="condensed">
+                <Text>
                   Hide notifications from GitHub Bot accounts, such as
                   @dependabot, @renovate, @netlify, etc
-                </div>
-                <div className="text-gitify-caution">
+                </Text>
+                <Text className="text-gitify-caution">
                   ⚠️ This filter requires the{' '}
-                  <strong>Detailed Notifications</strong> setting to be enabled.
-                </div>
-              </div>
+                  <Text as="strong">Detailed Notifications</Text> setting to be
+                  enabled.
+                </Text>
+              </Stack>
             }
           />
         </fieldset>
 
         <fieldset className="mb-3">
           <Title icon={NoteIcon}>Reason</Title>
-          <Text as="i" className="text-xs">
-            Note: If no reasons are selected, all notifications will be shown.
-          </Text>
-          {Object.keys(FORMATTED_REASONS).map((reason: Reason) => {
-            return (
-              <Checkbox
-                key={reason}
-                name={reason}
-                label={formatReason(reason).title}
-                checked={shouldShowReason(reason)}
-                onChange={(evt) =>
-                  updateReasonFilter(reason, evt.target.checked)
-                }
-                tooltip={<div>{formatReason(reason).description}</div>}
-              />
-            );
-          })}
+          <Box className="text-xs -mt-2 mb-2">
+            <Text as="i">
+              Note: If no reasons are selected, all notifications will be shown.
+            </Text>
+          </Box>
+
+          <Stack direction="vertical" gap="condensed">
+            {Object.keys(FORMATTED_REASONS).map((reason: Reason) => {
+              return (
+                <Checkbox
+                  key={reason}
+                  name={reason}
+                  label={formatReason(reason).title}
+                  checked={shouldShowReason(reason)}
+                  onChange={(evt) =>
+                    updateReasonFilter(reason, evt.target.checked)
+                  }
+                  tooltip={<Text>{formatReason(reason).description}</Text>}
+                />
+              );
+            })}
+          </Stack>
         </fieldset>
       </Contents>
 
diff --git a/src/renderer/routes/Settings.tsx b/src/renderer/routes/Settings.tsx
index 67ff6950b..c7df4285c 100644
--- a/src/renderer/routes/Settings.tsx
+++ b/src/renderer/routes/Settings.tsx
@@ -1,7 +1,7 @@
 import { type FC, useCallback, useContext, useState } from 'react';
 
 import { GearIcon } from '@primer/octicons-react';
-import { Button, Stack } from '@primer/react';
+import { Button, Stack, Text } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
 
 import { Contents } from '../components/layout/Contents';
@@ -64,7 +64,7 @@ export const SettingsRoute: FC = () => {
               data-testid="reset-dialog"
             >
               Please confirm that you want to reset all settings to the{' '}
-              <strong>Gitify defaults</strong>
+              <Text as="strong">Gitify defaults</Text>
             </Dialog>
           )}
         </Stack>
diff --git a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
index 368b861ff..5658d01f7 100644
--- a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
@@ -46,37 +46,41 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
       </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="accounts"
+          class="Box-sc-g0xbh4-0 mb-2"
         >
-          <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]"
+          <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="accounts"
           >
-            Accounts
-          </h2>
+            <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]"
+            >
+              Accounts
+            </h2>
+          </div>
         </div>
       </legend>
     </div>
@@ -164,7 +168,9 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
               data-padding="none"
               data-wrap="nowrap"
             >
-              <div>
+              <div
+                class="Box-sc-g0xbh4-0"
+              >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
@@ -524,7 +530,9 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
               data-padding="none"
               data-wrap="nowrap"
             >
-              <div>
+              <div
+                class="Box-sc-g0xbh4-0"
+              >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
@@ -884,7 +892,9 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
               data-padding="none"
               data-wrap="nowrap"
             >
-              <div>
+              <div
+                class="Box-sc-g0xbh4-0"
+              >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
@@ -1273,37 +1283,41 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
       </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="accounts"
+          class="Box-sc-g0xbh4-0 mb-2"
         >
-          <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]"
+          <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="accounts"
           >
-            Accounts
-          </h2>
+            <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]"
+            >
+              Accounts
+            </h2>
+          </div>
         </div>
       </legend>
     </div>
@@ -1391,7 +1405,9 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
               data-padding="none"
               data-wrap="nowrap"
             >
-              <div>
+              <div
+                class="Box-sc-g0xbh4-0"
+              >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
@@ -1751,7 +1767,9 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
               data-padding="none"
               data-wrap="nowrap"
             >
-              <div>
+              <div
+                class="Box-sc-g0xbh4-0"
+              >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
@@ -2111,7 +2129,9 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
               data-padding="none"
               data-wrap="nowrap"
             >
-              <div>
+              <div
+                class="Box-sc-g0xbh4-0"
+              >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
@@ -2500,37 +2520,41 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
       </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="accounts"
+          class="Box-sc-g0xbh4-0 mb-2"
         >
-          <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]"
+          <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="accounts"
           >
-            Accounts
-          </h2>
+            <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]"
+            >
+              Accounts
+            </h2>
+          </div>
         </div>
       </legend>
     </div>
@@ -2618,7 +2642,9 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
               data-padding="none"
               data-wrap="nowrap"
             >
-              <div>
+              <div
+                class="Box-sc-g0xbh4-0"
+              >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
@@ -2978,7 +3004,9 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
               data-padding="none"
               data-wrap="nowrap"
             >
-              <div>
+              <div
+                class="Box-sc-g0xbh4-0"
+              >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
@@ -3338,7 +3366,9 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
               data-padding="none"
               data-wrap="nowrap"
             >
-              <div>
+              <div
+                class="Box-sc-g0xbh4-0"
+              >
                 <div
                   class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
                   data-align="center"
diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
index 833646884..d5b788875 100644
--- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
@@ -46,37 +46,41 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
       </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="filters"
+          class="Box-sc-g0xbh4-0 mb-2"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-filter"
-            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="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"
-            />
-          </svg>
-          <h2
-            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-            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"
+            id="filters"
           >
-            Filters
-          </h2>
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-filter"
+              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="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"
+              />
+            </svg>
+            <h2
+              class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+              sx="[object Object]"
+            >
+              Filters
+            </h2>
+          </div>
         </div>
       </legend>
     </div>
@@ -89,18 +93,73 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
     >
       <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"
+          class="Box-sc-g0xbh4-0 mb-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"
+            id="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>
+        </div>
+      </legend>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+        data-align="center"
+        data-direction="horizontal"
+        data-gap="condensed"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
+      >
+        <input
+          class="size-4 rounded-sm cursor-pointer"
+          data-testid="checkbox-hideBots"
+          id="hideBots"
+          type="checkbox"
+        />
+        <label
+          class="font-medium text-gitify-font cursor-pointer"
+          for="hideBots"
+        >
+          Hide notifications from Bot accounts
+        </label>
+        <div
+          aria-label="tooltip-hideBots"
+          class="Box-sc-g0xbh4-0 relative"
+          data-testid="tooltip-tooltip-hideBots"
+          id="tooltip-hideBots"
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-feed-person"
+            class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
             display="inline-block"
             fill="currentColor"
             focusable="false"
@@ -111,113 +170,80 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             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"
+              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
             />
           </svg>
-          <h2
-            class="Heading__StyledHeading-sc-1c1dgg0-0 lfvrLU"
-            sx="[object Object]"
-          >
-            Users
-          </h2>
         </div>
-      </legend>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
+      </div>
+    </fieldset>
+    <fieldset
+      class="mb-3"
+    >
+      <legend>
         <div
-          class="flex items-center"
+          class="Box-sc-g0xbh4-0 mb-2"
         >
-          <input
-            class="size-4 rounded-sm cursor-pointer"
-            data-testid="checkbox-hideBots"
-            id="hideBots"
-            type="checkbox"
-          />
           <div
-            class="flex items-center ml-3"
+            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"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="hideBots"
+            <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"
             >
-              Hide notifications from Bot accounts
-            </label>
-            <div
-              aria-label="tooltip-hideBots"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-hideBots"
-              id="tooltip-hideBots"
+              <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]"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              Reason
+            </h2>
           </div>
         </div>
+      </legend>
+      <div
+        class="Box-sc-g0xbh4-0 text-xs -mt-2 mb-2"
+      >
+        <i
+          class="Text-sc-17v1xeu-0 hmAFGJ"
+        >
+          Note: If no reasons are selected, all notifications will be shown.
+        </i>
       </div>
-    </fieldset>
-    <fieldset
-      class="mb-3"
-    >
-      <legend>
+      <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"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
           data-align="center"
           data-direction="horizontal"
           data-gap="condensed"
           data-justify="start"
           data-padding="none"
           data-wrap="nowrap"
-          id="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>
-      <i
-        class="Text-sc-17v1xeu-0 hmAFGJ text-xs"
-      >
-        Note: If no reasons are selected, all notifications will be shown.
-      </i>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
-        <div
-          class="flex items-center"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -225,46 +251,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="approval_requested"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="approval_requested"
+          >
+            Approval Requested
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-approval_requested"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-approval_requested"
+            id="tooltip-approval_requested"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="approval_requested"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Approval Requested
-            </label>
-            <div
-              aria-label="tooltip-approval_requested"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-approval_requested"
-              id="tooltip-approval_requested"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -272,46 +296,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="assign"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="assign"
+          >
+            Assigned
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-assign"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-assign"
+            id="tooltip-assign"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="assign"
-            >
-              Assigned
-            </label>
-            <div
-              aria-label="tooltip-assign"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-assign"
-              id="tooltip-assign"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              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-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -319,46 +341,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="author"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="author"
+          >
+            Authored
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-author"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-author"
+            id="tooltip-author"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="author"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Authored
-            </label>
-            <div
-              aria-label="tooltip-author"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-author"
-              id="tooltip-author"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -366,46 +386,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="ci_activity"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="ci_activity"
+          >
+            Workflow Run Completed
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-ci_activity"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-ci_activity"
+            id="tooltip-ci_activity"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="ci_activity"
-            >
-              Workflow Run Completed
-            </label>
-            <div
-              aria-label="tooltip-ci_activity"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-ci_activity"
-              id="tooltip-ci_activity"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              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-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -413,46 +431,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="comment"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="comment"
+          >
+            Commented
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-comment"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-comment"
+            id="tooltip-comment"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="comment"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Commented
-            </label>
-            <div
-              aria-label="tooltip-comment"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-comment"
-              id="tooltip-comment"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -460,93 +476,89 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="invitation"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="invitation"
+          >
+            Invitation Received
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-invitation"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-invitation"
+            id="tooltip-invitation"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="invitation"
-            >
-              Invitation Received
-            </label>
-            <div
-              aria-label="tooltip-invitation"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-invitation"
-              id="tooltip-invitation"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              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-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
-        >
-          <input
-            class="size-4 rounded-sm cursor-pointer"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <input
+            class="size-4 rounded-sm cursor-pointer"
             data-testid="checkbox-manual"
             id="manual"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="manual"
+          >
+            Updated
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-manual"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-manual"
+            id="tooltip-manual"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="manual"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Updated
-            </label>
-            <div
-              aria-label="tooltip-manual"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-manual"
-              id="tooltip-manual"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -554,46 +566,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="member_feature_requested"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="member_feature_requested"
+          >
+            Member Feature Requested
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-member_feature_requested"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-member_feature_requested"
+            id="tooltip-member_feature_requested"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="member_feature_requested"
-            >
-              Member Feature Requested
-            </label>
-            <div
-              aria-label="tooltip-member_feature_requested"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-member_feature_requested"
-              id="tooltip-member_feature_requested"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              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-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -601,46 +611,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="mention"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="mention"
+          >
+            Mentioned
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-mention"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-mention"
+            id="tooltip-mention"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="mention"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Mentioned
-            </label>
-            <div
-              aria-label="tooltip-mention"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-mention"
-              id="tooltip-mention"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -648,46 +656,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="review_requested"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="review_requested"
+          >
+            Review Requested
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-review_requested"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-review_requested"
+            id="tooltip-review_requested"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="review_requested"
-            >
-              Review Requested
-            </label>
-            <div
-              aria-label="tooltip-review_requested"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-review_requested"
-              id="tooltip-review_requested"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              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-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -695,46 +701,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="security_advisory_credit"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="security_advisory_credit"
+          >
+            Security Advisory Credit Received
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-security_advisory_credit"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-security_advisory_credit"
+            id="tooltip-security_advisory_credit"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="security_advisory_credit"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Security Advisory Credit Received
-            </label>
-            <div
-              aria-label="tooltip-security_advisory_credit"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-security_advisory_credit"
-              id="tooltip-security_advisory_credit"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -742,46 +746,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="security_alert"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="security_alert"
+          >
+            Security Alert Received
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-security_alert"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-security_alert"
+            id="tooltip-security_alert"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="security_alert"
-            >
-              Security Alert Received
-            </label>
-            <div
-              aria-label="tooltip-security_alert"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-security_alert"
-              id="tooltip-security_alert"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              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-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -789,46 +791,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="state_change"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="state_change"
+          >
+            State Changed
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-state_change"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-state_change"
+            id="tooltip-state_change"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="state_change"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              State Changed
-            </label>
-            <div
-              aria-label="tooltip-state_change"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-state_change"
-              id="tooltip-state_change"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -836,46 +836,44 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="subscribed"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="subscribed"
+          >
+            Updated
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-subscribed"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-subscribed"
+            id="tooltip-subscribed"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="subscribed"
-            >
-              Updated
-            </label>
-            <div
-              aria-label="tooltip-subscribed"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-subscribed"
-              id="tooltip-subscribed"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              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-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
-      </div>
-      <div
-        class="mt-3 mb-2 text-sm"
-      >
         <div
-          class="flex items-center"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
           <input
             class="size-4 rounded-sm cursor-pointer"
@@ -883,38 +881,34 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             id="team_mention"
             type="checkbox"
           />
+          <label
+            class="font-medium text-gitify-font cursor-pointer"
+            for="team_mention"
+          >
+            Team Mentioned
+          </label>
           <div
-            class="flex items-center ml-3"
+            aria-label="tooltip-team_mention"
+            class="Box-sc-g0xbh4-0 relative"
+            data-testid="tooltip-tooltip-team_mention"
+            id="tooltip-team_mention"
           >
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="team_mention"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Team Mentioned
-            </label>
-            <div
-              aria-label="tooltip-team_mention"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-team_mention"
-              id="tooltip-team_mention"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                />
-              </svg>
-            </div>
+              <path
+                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+              />
+            </svg>
           </div>
         </div>
       </div>
@@ -987,135 +981,1402 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
 
 exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle reason type - none already set 1`] = `
 <div
-  class="mt-3 mb-2 text-sm"
+  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="flex items-center"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
   >
     <input
       class="size-4 rounded-sm cursor-pointer"
-      data-testid="checkbox-mention"
-      id="mention"
+      data-testid="checkbox-approval_requested"
+      id="approval_requested"
       type="checkbox"
     />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="approval_requested"
+    >
+      Approval Requested
+    </label>
     <div
-      class="flex items-center ml-3"
+      aria-label="tooltip-approval_requested"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-approval_requested"
+      id="tooltip-approval_requested"
     >
-      <label
-        class="font-medium text-gitify-font cursor-pointer"
-        for="mention"
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        display="inline-block"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        Mentioned
-      </label>
-      <div
-        aria-label="tooltip-mention"
-        class="Box-sc-g0xbh4-0 relative"
-        data-testid="tooltip-tooltip-mention"
-        id="tooltip-mention"
-      >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-          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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-          />
-        </svg>
-      </div>
+        <path
+          d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
     </div>
   </div>
-</div>
-`;
-
-exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle reason type - some filters already set 1`] = `
-<div
-  class="mt-3 mb-2 text-sm"
->
   <div
-    class="flex items-center"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
   >
     <input
       class="size-4 rounded-sm cursor-pointer"
-      data-testid="checkbox-mention"
-      id="mention"
+      data-testid="checkbox-assign"
+      id="assign"
       type="checkbox"
     />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="assign"
+    >
+      Assigned
+    </label>
     <div
-      class="flex items-center ml-3"
+      aria-label="tooltip-assign"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-assign"
+      id="tooltip-assign"
     >
-      <label
-        class="font-medium text-gitify-font cursor-pointer"
-        for="mention"
-      >
-        Mentioned
-      </label>
-      <div
-        aria-label="tooltip-mention"
-        class="Box-sc-g0xbh4-0 relative"
-        data-testid="tooltip-tooltip-mention"
-        id="tooltip-mention"
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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-question ml-1 text-gitify-tooltip-icon"
-          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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-          />
-        </svg>
-      </div>
+        <path
+          d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-author"
+      id="author"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="author"
+    >
+      Authored
+    </label>
+    <div
+      aria-label="tooltip-author"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-author"
+      id="tooltip-author"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-ci_activity"
+      id="ci_activity"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="ci_activity"
+    >
+      Workflow Run Completed
+    </label>
+    <div
+      aria-label="tooltip-ci_activity"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-ci_activity"
+      id="tooltip-ci_activity"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-comment"
+      id="comment"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="comment"
+    >
+      Commented
+    </label>
+    <div
+      aria-label="tooltip-comment"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-comment"
+      id="tooltip-comment"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-invitation"
+      id="invitation"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="invitation"
+    >
+      Invitation Received
+    </label>
+    <div
+      aria-label="tooltip-invitation"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-invitation"
+      id="tooltip-invitation"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-manual"
+      id="manual"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="manual"
+    >
+      Updated
+    </label>
+    <div
+      aria-label="tooltip-manual"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-manual"
+      id="tooltip-manual"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-member_feature_requested"
+      id="member_feature_requested"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="member_feature_requested"
+    >
+      Member Feature Requested
+    </label>
+    <div
+      aria-label="tooltip-member_feature_requested"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-member_feature_requested"
+      id="tooltip-member_feature_requested"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-mention"
+      id="mention"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="mention"
+    >
+      Mentioned
+    </label>
+    <div
+      aria-label="tooltip-mention"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-mention"
+      id="tooltip-mention"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-review_requested"
+      id="review_requested"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="review_requested"
+    >
+      Review Requested
+    </label>
+    <div
+      aria-label="tooltip-review_requested"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-review_requested"
+      id="tooltip-review_requested"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-security_advisory_credit"
+      id="security_advisory_credit"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="security_advisory_credit"
+    >
+      Security Advisory Credit Received
+    </label>
+    <div
+      aria-label="tooltip-security_advisory_credit"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-security_advisory_credit"
+      id="tooltip-security_advisory_credit"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-security_alert"
+      id="security_alert"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="security_alert"
+    >
+      Security Alert Received
+    </label>
+    <div
+      aria-label="tooltip-security_alert"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-security_alert"
+      id="tooltip-security_alert"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-state_change"
+      id="state_change"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="state_change"
+    >
+      State Changed
+    </label>
+    <div
+      aria-label="tooltip-state_change"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-state_change"
+      id="tooltip-state_change"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-subscribed"
+      id="subscribed"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="subscribed"
+    >
+      Updated
+    </label>
+    <div
+      aria-label="tooltip-subscribed"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-subscribed"
+      id="tooltip-subscribed"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-team_mention"
+      id="team_mention"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="team_mention"
+    >
+      Team Mentioned
+    </label>
+    <div
+      aria-label="tooltip-team_mention"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-team_mention"
+      id="tooltip-team_mention"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
     </div>
   </div>
 </div>
 `;
 
-exports[`renderer/routes/Filters.tsx Users section should be able to toggle the hideBots checkbox when detailedNotifications is enabled 1`] = `
+exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle reason type - some filters already set 1`] = `
 <div
-  class="mt-3 mb-2 text-sm"
+  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="flex items-center"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
   >
     <input
       class="size-4 rounded-sm cursor-pointer"
-      data-testid="checkbox-hideBots"
-      id="hideBots"
+      data-testid="checkbox-approval_requested"
+      id="approval_requested"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="approval_requested"
+    >
+      Approval Requested
+    </label>
+    <div
+      aria-label="tooltip-approval_requested"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-approval_requested"
+      id="tooltip-approval_requested"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-assign"
+      id="assign"
       type="checkbox"
     />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="assign"
+    >
+      Assigned
+    </label>
     <div
-      class="flex items-center ml-3"
+      aria-label="tooltip-assign"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-assign"
+      id="tooltip-assign"
     >
-      <label
-        class="font-medium text-gitify-font cursor-pointer"
-        for="hideBots"
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        display="inline-block"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        Hide notifications from Bot accounts
-      </label>
+        <path
+          d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-author"
+      id="author"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="author"
+    >
+      Authored
+    </label>
+    <div
+      aria-label="tooltip-author"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-author"
+      id="tooltip-author"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-ci_activity"
+      id="ci_activity"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="ci_activity"
+    >
+      Workflow Run Completed
+    </label>
+    <div
+      aria-label="tooltip-ci_activity"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-ci_activity"
+      id="tooltip-ci_activity"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-comment"
+      id="comment"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="comment"
+    >
+      Commented
+    </label>
+    <div
+      aria-label="tooltip-comment"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-comment"
+      id="tooltip-comment"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-invitation"
+      id="invitation"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="invitation"
+    >
+      Invitation Received
+    </label>
+    <div
+      aria-label="tooltip-invitation"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-invitation"
+      id="tooltip-invitation"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-manual"
+      id="manual"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="manual"
+    >
+      Updated
+    </label>
+    <div
+      aria-label="tooltip-manual"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-manual"
+      id="tooltip-manual"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-member_feature_requested"
+      id="member_feature_requested"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="member_feature_requested"
+    >
+      Member Feature Requested
+    </label>
+    <div
+      aria-label="tooltip-member_feature_requested"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-member_feature_requested"
+      id="tooltip-member_feature_requested"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-mention"
+      id="mention"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="mention"
+    >
+      Mentioned
+    </label>
+    <div
+      aria-label="tooltip-mention"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-mention"
+      id="tooltip-mention"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-review_requested"
+      id="review_requested"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="review_requested"
+    >
+      Review Requested
+    </label>
+    <div
+      aria-label="tooltip-review_requested"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-review_requested"
+      id="tooltip-review_requested"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-security_advisory_credit"
+      id="security_advisory_credit"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="security_advisory_credit"
+    >
+      Security Advisory Credit Received
+    </label>
+    <div
+      aria-label="tooltip-security_advisory_credit"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-security_advisory_credit"
+      id="tooltip-security_advisory_credit"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      checked=""
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-security_alert"
+      id="security_alert"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="security_alert"
+    >
+      Security Alert Received
+    </label>
+    <div
+      aria-label="tooltip-security_alert"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-security_alert"
+      id="tooltip-security_alert"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-state_change"
+      id="state_change"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="state_change"
+    >
+      State Changed
+    </label>
+    <div
+      aria-label="tooltip-state_change"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-state_change"
+      id="tooltip-state_change"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-subscribed"
+      id="subscribed"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="subscribed"
+    >
+      Updated
+    </label>
+    <div
+      aria-label="tooltip-subscribed"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-subscribed"
+      id="tooltip-subscribed"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-team_mention"
+      id="team_mention"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="team_mention"
+    >
+      Team Mentioned
+    </label>
+    <div
+      aria-label="tooltip-team_mention"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-team_mention"
+      id="tooltip-team_mention"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renderer/routes/Filters.tsx Users section should be able to toggle the hideBots checkbox when detailedNotifications is enabled 1`] = `
+<fieldset
+  class="mb-3"
+>
+  <legend>
+    <div
+      class="Box-sc-g0xbh4-0 mb-2"
+    >
       <div
-        aria-label="tooltip-hideBots"
-        class="Box-sc-g0xbh4-0 relative"
-        data-testid="tooltip-tooltip-hideBots"
-        id="tooltip-hideBots"
+        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"
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+          class="octicon octicon-feed-person"
           display="inline-block"
           fill="currentColor"
           focusable="false"
@@ -1126,47 +2387,87 @@ exports[`renderer/routes/Filters.tsx Users section should be able to toggle the
           width="16"
         >
           <path
-            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+            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>
     </div>
-  </div>
-</div>
-`;
-
-exports[`renderer/routes/Filters.tsx Users section should not be able to toggle the hideBots checkbox when detailedNotifications is disabled 1`] = `
-<div
-  class="mt-3 mb-2 text-sm"
->
+  </legend>
   <div
-    class="flex items-center"
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
   >
     <input
       class="size-4 rounded-sm cursor-pointer"
       data-testid="checkbox-hideBots"
-      disabled=""
       id="hideBots"
       type="checkbox"
     />
+    <label
+      class="font-medium text-gitify-font cursor-pointer"
+      for="hideBots"
+    >
+      Hide notifications from Bot accounts
+    </label>
     <div
-      class="flex items-center ml-3"
+      aria-label="tooltip-hideBots"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-hideBots"
+      id="tooltip-hideBots"
     >
-      <label
-        class="font-medium text-gitify-font cursor-pointer line-through"
-        for="hideBots"
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        display="inline-block"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
       >
-        Hide notifications from Bot accounts
-      </label>
+        <path
+          d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`renderer/routes/Filters.tsx Users section should not be able to toggle the hideBots checkbox when detailedNotifications is disabled 1`] = `
+<fieldset
+  class="mb-3"
+>
+  <legend>
+    <div
+      class="Box-sc-g0xbh4-0 mb-2"
+    >
       <div
-        aria-label="tooltip-hideBots"
-        class="Box-sc-g0xbh4-0 relative"
-        data-testid="tooltip-tooltip-hideBots"
-        id="tooltip-hideBots"
+        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"
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+          class="octicon octicon-feed-person"
           display="inline-block"
           fill="currentColor"
           focusable="false"
@@ -1177,11 +2478,63 @@ exports[`renderer/routes/Filters.tsx Users section should not be able to toggle
           width="16"
         >
           <path
-            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+            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>
     </div>
+  </legend>
+  <div
+    class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+    data-align="center"
+    data-direction="horizontal"
+    data-gap="condensed"
+    data-justify="start"
+    data-padding="none"
+    data-wrap="nowrap"
+  >
+    <input
+      class="size-4 rounded-sm cursor-pointer"
+      data-testid="checkbox-hideBots"
+      disabled=""
+      id="hideBots"
+      type="checkbox"
+    />
+    <label
+      class="font-medium text-gitify-font cursor-pointer line-through"
+      for="hideBots"
+    >
+      Hide notifications from Bot accounts
+    </label>
+    <div
+      aria-label="tooltip-hideBots"
+      class="Box-sc-g0xbh4-0 relative"
+      data-testid="tooltip-tooltip-hideBots"
+      id="tooltip-hideBots"
+    >
+      <svg
+        aria-hidden="true"
+        class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+        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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        />
+      </svg>
+    </div>
   </div>
-</div>
+</fieldset>
 `;
diff --git a/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index fc2649e45..59d63d833 100644
--- a/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -50,37 +50,41 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             </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"
+                class="Box-sc-g0xbh4-0 mb-2"
               >
-                <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]"
+                <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"
                 >
-                  Login with OAuth App
-                </h2>
+                  <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>
               </div>
             </legend>
           </div>
@@ -521,37 +525,41 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
           </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"
+              class="Box-sc-g0xbh4-0 mb-2"
             >
-              <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]"
+              <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"
               >
-                Login with OAuth App
-              </h2>
+                <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>
             </div>
           </legend>
         </div>
diff --git a/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index b241a5142..cd87a5094 100644
--- a/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -50,37 +50,41 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
             </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"
+                class="Box-sc-g0xbh4-0 mb-2"
               >
-                <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]"
+                <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"
                 >
-                  Login with Personal Access Token
-                </h2>
+                  <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>
               </div>
             </legend>
           </div>
@@ -498,37 +502,41 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
           </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"
+              class="Box-sc-g0xbh4-0 mb-2"
             >
-              <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]"
+              <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"
               >
-                Login with Personal Access Token
-              </h2>
+                <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>
             </div>
           </legend>
         </div>
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index e94ffed2a..843d8055d 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -46,55 +46,8 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
       </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="settings"
+          class="Box-sc-g0xbh4-0 mb-2"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-gear"
-            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 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"
-            />
-          </svg>
-          <h2
-            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-            sx="[object Object]"
-          >
-            Settings
-          </h2>
-        </div>
-      </legend>
-    </div>
-  </div>
-  <div
-    class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
-  >
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-      data-align="stretch"
-      data-direction="vertical"
-      data-gap="spacious"
-      data-justify="start"
-      data-padding="none"
-      data-wrap="nowrap"
-    >
-      <fieldset>
-        <legend>
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
             data-align="center"
@@ -103,11 +56,11 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
-            id="appearance"
+            id="settings"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-paintbrush"
+              class="octicon octicon-gear"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -118,141 +71,50 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               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"
+                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"
               />
             </svg>
             <h2
-              class="Heading__StyledHeading-sc-1c1dgg0-0 lfvrLU"
+              class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
               sx="[object Object]"
             >
-              Appearance
+              Settings
             </h2>
           </div>
-        </legend>
-        <div
-          class="flex items-center mt-3 mb-2 text-sm"
-        >
-          <label
-            class="mr-3 font-medium cursor-pointer"
-            for="theme"
-          >
-            Theme:
-          </label>
-          <span
-            class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 gSHUap iCKcNi"
-            sx="[object Object]"
-          >
-            <select
-              aria-invalid="false"
-              class="Select__StyledSelect-sc-li6bhs-0 gdxHkq"
-              data-hasplaceholder="false"
-              data-testid="settings-theme"
-              id="theme"
-            >
-              <optgroup
-                label="System"
-              >
-                <option
-                  value="SYSTEM"
-                >
-                  System
-                </option>
-              </optgroup>
-              <optgroup
-                label="Light"
-              >
-                <option
-                  value="LIGHT"
-                >
-                  Light default
-                </option>
-                <option
-                  value="LIGHT_HIGH_CONTRAST"
-                >
-                  Light high contrast
-                </option>
-                <option
-                  value="LIGHT_COLORBLIND"
-                >
-                  Light Protanopia & Deuteranopia
-                </option>
-                <option
-                  value="LIGHT_TRITANOPIA"
-                >
-                  Light Tritanopia
-                </option>
-              </optgroup>
-              <optgroup
-                label="Dark"
-              >
-                <option
-                  value="DARK"
-                >
-                  Dark default
-                </option>
-                <option
-                  value="DARK_HIGH_CONTRAST"
-                >
-                  Dark high contrast
-                </option>
-                <option
-                  value="DARK_COLORBLIND"
-                >
-                  Dark Protanopia & Deuteranopia
-                </option>
-                <option
-                  value="DARK_TRITANOPIA"
-                >
-                  Dark Tritanopia
-                </option>
-                <option
-                  value="DARK_DIMMED"
-                >
-                  Dark dimmed
-                </option>
-              </optgroup>
-            </select>
-            <svg
-              aria-hidden="true"
-              class="Select__ArrowIndicator-sc-li6bhs-1 eMZdJP"
-              fill="currentColor"
-              height="16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427ZM4.074 7.47 7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426Z"
-              />
-            </svg>
-          </span>
         </div>
-        <div
-          class="flex items-center mt-3 mb-2 text-sm"
-        >
-          <label
-            class="mr-3 font-medium cursor-pointer"
-            for="zoom"
-          >
-            Zoom:
-          </label>
+      </legend>
+    </div>
+  </div>
+  <div
+    class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
+  >
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="vertical"
+      data-gap="spacious"
+      data-justify="start"
+      data-padding="none"
+      data-wrap="nowrap"
+    >
+      <fieldset>
+        <legend>
           <div
-            class="ButtonGroup-sc-1gxhls1-0 jXbkKi ml-2"
+            class="Box-sc-g0xbh4-0 mb-2"
           >
-            <button
-              aria-describedby=":r1:-loading-announcement"
-              aria-label="Zoom out"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="settings-zoom-out"
-              sx="[object Object]"
-              type="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"
+              id="appearance"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-dash"
+                class="octicon octicon-paintbrush"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -263,125 +125,163 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                 width="16"
               >
                 <path
-                  d="M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z"
+                  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>
-            </button>
-            <button
-              aria-describedby=":r2:-loading-announcement"
-              aria-label="Zoom percentage"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              disabled=""
-              sx="[object Object]"
-              type="button"
-            >
-              <span
-                class="Box-sc-g0xbh4-0 srpGE"
-                data-component="buttonContent"
+              <h2
+                class="Heading__StyledHeading-sc-1c1dgg0-0 lfvrLU"
                 sx="[object Object]"
               >
-                <span
-                  data-component="text"
-                >
-                  100
-                  %
-                </span>
-              </span>
-            </button>
-            <button
-              aria-describedby=":r3:-loading-announcement"
-              aria-label="Zoom in"
-              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="settings-zoom-in"
-              sx="[object Object]"
-              type="button"
+                Appearance
+              </h2>
+            </div>
+          </div>
+        </legend>
+        <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 text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <label
+              class="mr-3 font-medium cursor-pointer"
+              for="theme"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-plus"
-                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.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"
-                />
-              </svg>
-            </button>
-            <button
-              aria-describedby=":r4:-loading-announcement"
-              aria-label="Reset zoom"
-              class="types__StyledButton-sc-ws60qy-0 cYZGEC"
-              data-component="IconButton"
-              data-loading="false"
-              data-no-visuals="true"
-              data-size="small"
-              data-testid="settings-zoom-reset"
+              Theme:
+            </label>
+            <span
+              class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 gSHUap iCKcNi"
               sx="[object Object]"
-              type="button"
             >
+              <select
+                aria-invalid="false"
+                class="Select__StyledSelect-sc-li6bhs-0 gdxHkq"
+                data-hasplaceholder="false"
+                data-testid="settings-theme"
+                id="theme"
+              >
+                <optgroup
+                  label="System"
+                >
+                  <option
+                    value="SYSTEM"
+                  >
+                    System
+                  </option>
+                </optgroup>
+                <optgroup
+                  label="Light"
+                >
+                  <option
+                    value="LIGHT"
+                  >
+                    Light default
+                  </option>
+                  <option
+                    value="LIGHT_HIGH_CONTRAST"
+                  >
+                    Light high contrast
+                  </option>
+                  <option
+                    value="LIGHT_COLORBLIND"
+                  >
+                    Light Protanopia & Deuteranopia
+                  </option>
+                  <option
+                    value="LIGHT_TRITANOPIA"
+                  >
+                    Light Tritanopia
+                  </option>
+                </optgroup>
+                <optgroup
+                  label="Dark"
+                >
+                  <option
+                    value="DARK"
+                  >
+                    Dark default
+                  </option>
+                  <option
+                    value="DARK_HIGH_CONTRAST"
+                  >
+                    Dark high contrast
+                  </option>
+                  <option
+                    value="DARK_COLORBLIND"
+                  >
+                    Dark Protanopia & Deuteranopia
+                  </option>
+                  <option
+                    value="DARK_TRITANOPIA"
+                  >
+                    Dark Tritanopia
+                  </option>
+                  <option
+                    value="DARK_DIMMED"
+                  >
+                    Dark dimmed
+                  </option>
+                </optgroup>
+              </select>
               <svg
                 aria-hidden="true"
-                class="octicon octicon-x-circle"
-                display="inline-block"
+                class="Select__ArrowIndicator-sc-li6bhs-1 eMZdJP"
                 fill="currentColor"
-                focusable="false"
                 height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
                 width="16"
+                xmlns="http://www.w3.org/2000/svg"
               >
                 <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"
+                  d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427ZM4.074 7.47 7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426Z"
                 />
               </svg>
-            </button>
+            </span>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <input
-              checked=""
-              class="size-4 rounded-sm cursor-pointer"
-              data-testid="checkbox-detailedNotifications"
-              id="detailedNotifications"
-              type="checkbox"
-            />
+            <label
+              class="mr-3 font-medium cursor-pointer"
+              for="zoom"
+            >
+              Zoom:
+            </label>
             <div
-              class="flex items-center ml-3"
+              class="ButtonGroup-sc-1gxhls1-0 jXbkKi ml-2"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="detailedNotifications"
-              >
-                Detailed notifications
-              </label>
-              <div
-                aria-label="tooltip-detailedNotifications"
-                class="Box-sc-g0xbh4-0 relative"
-                data-testid="tooltip-tooltip-detailedNotifications"
-                id="tooltip-detailedNotifications"
+              <button
+                aria-describedby=":r1:-loading-announcement"
+                aria-label="Zoom out"
+                class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                data-component="IconButton"
+                data-loading="false"
+                data-no-visuals="true"
+                data-size="small"
+                data-testid="settings-zoom-out"
+                sx="[object Object]"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                  class="octicon octicon-dash"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -392,44 +292,49 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                   width="16"
                 >
                   <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                    d="M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z"
                   />
                 </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
-          <div
-            class="flex items-center"
-          >
-            <input
-              checked=""
-              class="size-4 rounded-sm cursor-pointer"
-              data-testid="checkbox-showPills"
-              id="showPills"
-              type="checkbox"
-            />
-            <div
-              class="flex items-center ml-3"
-            >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="showPills"
+              </button>
+              <button
+                aria-describedby=":r2:-loading-announcement"
+                aria-label="Zoom percentage"
+                class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                data-loading="false"
+                data-no-visuals="true"
+                data-size="small"
+                disabled=""
+                sx="[object Object]"
+                type="button"
               >
-                Show notification metric pills
-              </label>
-              <div
-                aria-label="tooltip-showPills"
-                class="Box-sc-g0xbh4-0 relative"
-                data-testid="tooltip-tooltip-showPills"
-                id="tooltip-showPills"
+                <span
+                  class="Box-sc-g0xbh4-0 srpGE"
+                  data-component="buttonContent"
+                  sx="[object Object]"
+                >
+                  <span
+                    data-component="text"
+                  >
+                    100
+                    %
+                  </span>
+                </span>
+              </button>
+              <button
+                aria-describedby=":r3:-loading-announcement"
+                aria-label="Zoom in"
+                class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                data-component="IconButton"
+                data-loading="false"
+                data-no-visuals="true"
+                data-size="small"
+                data-testid="settings-zoom-in"
+                sx="[object Object]"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                  class="octicon octicon-plus"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -440,44 +345,25 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                   width="16"
                 >
                   <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                    d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"
                   />
                 </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
-          <div
-            class="flex items-center"
-          >
-            <input
-              checked=""
-              class="size-4 rounded-sm cursor-pointer"
-              data-testid="checkbox-showNumber"
-              id="showNumber"
-              type="checkbox"
-            />
-            <div
-              class="flex items-center ml-3"
-            >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="showNumber"
-              >
-                Show number
-              </label>
-              <div
-                aria-label="tooltip-showNumber"
-                class="Box-sc-g0xbh4-0 relative"
-                data-testid="tooltip-tooltip-showNumber"
-                id="tooltip-showNumber"
+              </button>
+              <button
+                aria-describedby=":r4:-loading-announcement"
+                aria-label="Reset zoom"
+                class="types__StyledButton-sc-ws60qy-0 cYZGEC"
+                data-component="IconButton"
+                data-loading="false"
+                data-no-visuals="true"
+                data-size="small"
+                data-testid="settings-zoom-reset"
+                sx="[object Object]"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
-                  class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                  class="octicon octicon-x-circle"
                   display="inline-block"
                   fill="currentColor"
                   focusable="false"
@@ -488,92 +374,248 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
                   width="16"
                 >
                   <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                    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>
-              </div>
+              </button>
             </div>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               checked=""
               class="size-4 rounded-sm cursor-pointer"
-              data-testid="checkbox-showAccountHeader"
-              disabled=""
-              id="showAccountHeader"
+              data-testid="checkbox-detailedNotifications"
+              id="detailedNotifications"
               type="checkbox"
             />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="detailedNotifications"
+            >
+              Detailed notifications
+            </label>
             <div
-              class="flex items-center ml-3"
+              aria-label="tooltip-detailedNotifications"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-detailedNotifications"
+              id="tooltip-detailedNotifications"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer line-through"
-                for="showAccountHeader"
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
               >
-                Show account header
-              </label>
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
             </div>
           </div>
-        </div>
-      </fieldset>
-      <fieldset>
-        <legend>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
             data-align="center"
             data-direction="horizontal"
             data-gap="condensed"
             data-justify="start"
             data-padding="none"
             data-wrap="nowrap"
-            id="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"
+            <input
+              checked=""
+              class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-showPills"
+              id="showPills"
+              type="checkbox"
+            />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="showPills"
             >
-              <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]"
+              Show notification metric pills
+            </label>
+            <div
+              aria-label="tooltip-showPills"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-showPills"
+              id="tooltip-showPills"
             >
-              Notifications
-            </h2>
-          </div>
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </div>
+          </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <input
+              checked=""
+              class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-showNumber"
+              id="showNumber"
+              type="checkbox"
+            />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="showNumber"
+            >
+              Show number
+            </label>
+            <div
+              aria-label="tooltip-showNumber"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-showNumber"
+              id="tooltip-showNumber"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </div>
+          </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <input
+              checked=""
+              class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-showAccountHeader"
+              disabled=""
+              id="showAccountHeader"
+              type="checkbox"
+            />
+            <label
+              class="font-medium text-gitify-font cursor-pointer line-through"
+              for="showAccountHeader"
+            >
+              Show account header
+            </label>
+          </div>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>
+          <div
+            class="Box-sc-g0xbh4-0 mb-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"
+              id="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>
+          </div>
         </legend>
         <div
-          class="flex items-start my-2 text-sm font-medium"
+          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"
         >
-          <label
-            class="mr-3 font-medium cursor-pointer"
-            for="groupBy"
-          >
-            Group by:
-          </label>
           <div
-            aria-labelledby="groupBy"
-            class="flex items-center space-x-4"
-            role="group"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
+            <label
+              class="mr-3 font-medium cursor-pointer"
+              for="groupBy"
+            >
+              Group by:
+            </label>
             <div
-              class="flex items-center gap-2"
+              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"
             >
               <input
                 checked=""
@@ -592,7 +634,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </label>
             </div>
             <div
-              class="flex items-center gap-2"
+              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"
             >
               <input
                 class="size-4 cursor-pointer"
@@ -610,12 +658,14 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </label>
             </div>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               checked=""
@@ -624,46 +674,44 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="fetchAllNotifications"
               type="checkbox"
             />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="fetchAllNotifications"
+            >
+              Fetch all notifications
+            </label>
             <div
-              class="flex items-center ml-3"
+              aria-label="tooltip-fetchAllNotifications"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-fetchAllNotifications"
+              id="tooltip-fetchAllNotifications"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="fetchAllNotifications"
-              >
-                Fetch all notifications
-              </label>
-              <div
-                aria-label="tooltip-fetchAllNotifications"
-                class="Box-sc-g0xbh4-0 relative"
-                data-testid="tooltip-tooltip-fetchAllNotifications"
-                id="tooltip-fetchAllNotifications"
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                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-question ml-1 text-gitify-tooltip-icon"
-                  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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </div>
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
             </div>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
@@ -671,46 +719,44 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="showOnlyParticipating"
               type="checkbox"
             />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="showOnlyParticipating"
+            >
+              Show only participating
+            </label>
             <div
-              class="flex items-center ml-3"
+              aria-label="tooltip-showOnlyParticipating"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-showOnlyParticipating"
+              id="tooltip-showOnlyParticipating"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="showOnlyParticipating"
-              >
-                Show only participating
-              </label>
-              <div
-                aria-label="tooltip-showOnlyParticipating"
-                class="Box-sc-g0xbh4-0 relative"
-                data-testid="tooltip-tooltip-showOnlyParticipating"
-                id="tooltip-showOnlyParticipating"
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                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-question ml-1 text-gitify-tooltip-icon"
-                  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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </div>
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
             </div>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
@@ -718,46 +764,44 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="markAsDoneOnOpen"
               type="checkbox"
             />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="markAsDoneOnOpen"
+            >
+              Mark as done on open
+            </label>
             <div
-              class="flex items-center ml-3"
+              aria-label="tooltip-markAsDoneOnOpen"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-markAsDoneOnOpen"
+              id="tooltip-markAsDoneOnOpen"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="markAsDoneOnOpen"
-              >
-                Mark as done on open
-              </label>
-              <div
-                aria-label="tooltip-markAsDoneOnOpen"
-                class="Box-sc-g0xbh4-0 relative"
-                data-testid="tooltip-tooltip-markAsDoneOnOpen"
-                id="tooltip-markAsDoneOnOpen"
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                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-question ml-1 text-gitify-tooltip-icon"
-                  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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </div>
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
             </div>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
@@ -765,46 +809,44 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="markAsDoneOnUnsubscribe"
               type="checkbox"
             />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="markAsDoneOnUnsubscribe"
+            >
+              Mark as done on unsubscribe
+            </label>
             <div
-              class="flex items-center ml-3"
+              aria-label="tooltip-markAsDoneOnUnsubscribe"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-markAsDoneOnUnsubscribe"
+              id="tooltip-markAsDoneOnUnsubscribe"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="markAsDoneOnUnsubscribe"
-              >
-                Mark as done on unsubscribe
-              </label>
-              <div
-                aria-label="tooltip-markAsDoneOnUnsubscribe"
-                class="Box-sc-g0xbh4-0 relative"
-                data-testid="tooltip-tooltip-markAsDoneOnUnsubscribe"
-                id="tooltip-markAsDoneOnUnsubscribe"
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                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-question ml-1 text-gitify-tooltip-icon"
-                  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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </div>
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
             </div>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
@@ -812,38 +854,34 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="delayNotificationState"
               type="checkbox"
             />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="delayNotificationState"
+            >
+              Delay notification state
+            </label>
             <div
-              class="flex items-center ml-3"
+              aria-label="tooltip-delayNotificationState"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-delayNotificationState"
+              id="tooltip-delayNotificationState"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="delayNotificationState"
-              >
-                Delay notification state
-              </label>
-              <div
-                aria-label="tooltip-delayNotificationState"
-                class="Box-sc-g0xbh4-0 relative"
-                data-testid="tooltip-tooltip-delayNotificationState"
-                id="tooltip-delayNotificationState"
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                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-question ml-1 text-gitify-tooltip-icon"
-                  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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </div>
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
             </div>
           </div>
         </div>
@@ -851,55 +889,75 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
       <fieldset>
         <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"
+            class="Box-sc-g0xbh4-0 mb-2"
           >
-            <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]"
+            <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"
             >
-              System
-            </h2>
+              <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>
           </div>
         </legend>
         <div
-          class="flex items-start my-2 text-sm font-medium"
+          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"
         >
-          <label
-            class="mr-3 font-medium cursor-pointer"
-            for="openLinks"
-          >
-            Open Links:
-          </label>
           <div
-            aria-labelledby="openLinks"
-            class="flex items-center space-x-4"
-            role="group"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
+            <label
+              class="mr-3 font-medium cursor-pointer"
+              for="openLinks"
+            >
+              Open Links:
+            </label>
             <div
-              class="flex items-center gap-2"
+              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"
             >
               <input
                 checked=""
@@ -918,7 +976,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </label>
             </div>
             <div
-              class="flex items-center gap-2"
+              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"
             >
               <input
                 class="size-4 cursor-pointer"
@@ -936,12 +1000,14 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               </label>
             </div>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               checked=""
@@ -950,46 +1016,44 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="keyboardShortcut"
               type="checkbox"
             />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="keyboardShortcut"
+            >
+              Enable keyboard shortcut
+            </label>
             <div
-              class="flex items-center ml-3"
+              aria-label="tooltip-keyboardShortcut"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-keyboardShortcut"
+              id="tooltip-keyboardShortcut"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="keyboardShortcut"
-              >
-                Enable keyboard shortcut
-              </label>
-              <div
-                aria-label="tooltip-keyboardShortcut"
-                class="Box-sc-g0xbh4-0 relative"
-                data-testid="tooltip-tooltip-keyboardShortcut"
-                id="tooltip-keyboardShortcut"
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                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-question ml-1 text-gitify-tooltip-icon"
-                  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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </div>
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
             </div>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               checked=""
@@ -998,23 +1062,21 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="showNotificationsCountInTray"
               type="checkbox"
             />
-            <div
-              class="flex items-center ml-3"
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="showNotificationsCountInTray"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="showNotificationsCountInTray"
-              >
-                Show notifications count in tray
-              </label>
-            </div>
+              Show notifications count in tray
+            </label>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               checked=""
@@ -1023,23 +1085,21 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="showNotifications"
               type="checkbox"
             />
-            <div
-              class="flex items-center ml-3"
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="showNotifications"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="showNotifications"
-              >
-                Show system notifications
-              </label>
-            </div>
+              Show system notifications
+            </label>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               checked=""
@@ -1048,23 +1108,21 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="playSound"
               type="checkbox"
             />
-            <div
-              class="flex items-center ml-3"
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="playSound"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="playSound"
-              >
-                Play sound
-              </label>
-            </div>
+              Play sound
+            </label>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
@@ -1072,46 +1130,44 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="useAlternateIdleIcon"
               type="checkbox"
             />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="useAlternateIdleIcon"
+            >
+              Use alternate idle icon
+            </label>
             <div
-              class="flex items-center ml-3"
+              aria-label="tooltip-useAlternateIdleIcon"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-useAlternateIdleIcon"
+              id="tooltip-useAlternateIdleIcon"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="useAlternateIdleIcon"
-              >
-                Use alternate idle icon
-              </label>
-              <div
-                aria-label="tooltip-useAlternateIdleIcon"
-                class="Box-sc-g0xbh4-0 relative"
-                data-testid="tooltip-tooltip-useAlternateIdleIcon"
-                id="tooltip-useAlternateIdleIcon"
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                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-question ml-1 text-gitify-tooltip-icon"
-                  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 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </div>
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
             </div>
           </div>
-        </div>
-        <div
-          class="mt-3 mb-2 text-sm"
-        >
           <div
-            class="flex items-center"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
             <input
               class="size-4 rounded-sm cursor-pointer"
@@ -1119,16 +1175,12 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               id="openAtStartup"
               type="checkbox"
             />
-            <div
-              class="flex items-center ml-3"
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="openAtStartup"
             >
-              <label
-                class="font-medium text-gitify-font cursor-pointer"
-                for="openAtStartup"
-              >
-                Open at startup
-              </label>
-            </div>
+              Open at startup
+            </label>
           </div>
         </div>
       </fieldset>

From 0c4fab8b1f106e50b720d122e3e79ef666886114 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Sat, 25 Jan 2025 10:49:54 -0500
Subject: [PATCH 4/4] add todos for future us

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/components/avatars/AvatarWithFallback.tsx | 2 ++
 src/renderer/utils/theme.ts                            | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/renderer/components/avatars/AvatarWithFallback.tsx b/src/renderer/components/avatars/AvatarWithFallback.tsx
index 693928074..a2f6149a3 100644
--- a/src/renderer/components/avatars/AvatarWithFallback.tsx
+++ b/src/renderer/components/avatars/AvatarWithFallback.tsx
@@ -26,6 +26,8 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
   const [isBroken, setIsBroken] = useState(false);
 
   const isNonHuman = isNonHumanUser(userType);
+
+  // TODO explore using AnchoredOverlay component (https://primer.style/components/anchored-overlay/react/alpha) to render Avatar Card on hover
   return (
     <Stack
       direction="horizontal"
diff --git a/src/renderer/utils/theme.ts b/src/renderer/utils/theme.ts
index eb8fccf65..70f28a8d0 100644
--- a/src/renderer/utils/theme.ts
+++ b/src/renderer/utils/theme.ts
@@ -30,6 +30,7 @@ export function setDarkMode() {
 }
 
 /**
+ * TODO find a way to set scrollbar colors based on GitHub Primer Theme Provider / Design Tokens
  * @deprecated
  */
 export function setScrollbarTheme(mode?: ColorModeWithAuto) {