diff --git a/biome.json b/biome.json
index 4663b8ca1..6c5a29bc3 100644
--- a/biome.json
+++ b/biome.json
@@ -17,10 +17,13 @@
               ":BLANK_LINE:",
               ":PACKAGE:",
               ":BLANK_LINE:",
+              "**/shared/**",
+              ":BLANK_LINE:",
               "**"
             ]
           }
-        }
+        },
+        "useSortedAttributes": "on"
       }
     }
   },
@@ -41,7 +44,12 @@
         "useExhaustiveDependencies": {
           "level": "warn",
           "options": {
-            "hooks": [{ "name": "useNavigate", "stableResult": true }]
+            "hooks": [
+              {
+                "name": "useNavigate",
+                "stableResult": true
+              }
+            ]
           }
         },
         "useUniqueElementIds": "warn"
diff --git a/src/main/index.ts b/src/main/index.ts
index f8f73d5a0..265b5f060 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -6,6 +6,7 @@ import { APPLICATION } from '../shared/constants';
 import { namespacedEvent } from '../shared/events';
 import { logInfo, logWarn } from '../shared/logger';
 import { isLinux, isWindows } from '../shared/platform';
+
 import { onFirstRunMaybe } from './first-run';
 import { TrayIcons } from './icons';
 import MenuBuilder from './menu';
diff --git a/src/main/menu.ts b/src/main/menu.ts
index 7465977e9..e4be9c4c6 100644
--- a/src/main/menu.ts
+++ b/src/main/menu.ts
@@ -4,6 +4,7 @@ import type { Menubar } from 'menubar';
 
 import { APPLICATION } from '../shared/constants';
 import { isMacOS, isWindows } from '../shared/platform';
+
 import { openLogsDirectory, resetApp, takeScreenshot } from './utils';
 
 export default class MenuBuilder {
diff --git a/src/main/updater.ts b/src/main/updater.ts
index c1f5202a8..60dac989a 100644
--- a/src/main/updater.ts
+++ b/src/main/updater.ts
@@ -5,6 +5,7 @@ import type { Menubar } from 'menubar';
 
 import { APPLICATION } from '../shared/constants';
 import { logError, logInfo } from '../shared/logger';
+
 import type MenuBuilder from './menu';
 
 /**
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 9f7f3694c..adf1f35b4 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -28,7 +28,7 @@ function RequireAuth({ children }) {
   return isLoggedIn ? (
     children
   ) : (
-    <Navigate to="/login" replace state={{ from: location }} />
+    <Navigate replace state={{ from: location }} to="/login" />
   );
 }
 
@@ -41,45 +41,45 @@ export const App = () => {
             <AppLayout>
               <Routes>
                 <Route
-                  path="/"
                   element={
                     <RequireAuth>
                       <NotificationsRoute />
                     </RequireAuth>
                   }
+                  path="/"
                 />
                 <Route
-                  path="/filters"
                   element={
                     <RequireAuth>
                       <FiltersRoute />
                     </RequireAuth>
                   }
+                  path="/filters"
                 />
                 <Route
-                  path="/settings"
                   element={
                     <RequireAuth>
                       <SettingsRoute />
                     </RequireAuth>
                   }
+                  path="/settings"
                 />
                 <Route
-                  path="/accounts"
                   element={
                     <RequireAuth>
                       <AccountsRoute />
                     </RequireAuth>
                   }
+                  path="/accounts"
                 />
-                <Route path="/login" element={<LoginRoute />} />
+                <Route element={<LoginRoute />} path="/login" />
                 <Route
-                  path="/login-personal-access-token"
                   element={<LoginWithPersonalAccessTokenRoute />}
+                  path="/login-personal-access-token"
                 />
                 <Route
-                  path="/login-oauth-app"
                   element={<LoginWithOAuthAppRoute />}
+                  path="/login-oauth-app"
                 />
               </Routes>
             </AppLayout>
diff --git a/src/renderer/components/AllRead.tsx b/src/renderer/components/AllRead.tsx
index 4109d4d33..5dca686a7 100644
--- a/src/renderer/components/AllRead.tsx
+++ b/src/renderer/components/AllRead.tsx
@@ -25,6 +25,6 @@ export const AllRead: FC<IAllRead> = ({ fullHeight = true }: IAllRead) => {
   const heading = `No new ${hasFilters ? 'filtered ' : ''} notifications`;
 
   return (
-    <EmojiSplash emoji={emoji} heading={heading} fullHeight={fullHeight} />
+    <EmojiSplash emoji={emoji} fullHeight={fullHeight} heading={heading} />
   );
 };
diff --git a/src/renderer/components/Oops.tsx b/src/renderer/components/Oops.tsx
index c6352b3da..38beccb1c 100644
--- a/src/renderer/components/Oops.tsx
+++ b/src/renderer/components/Oops.tsx
@@ -20,9 +20,9 @@ export const Oops: FC<IOops> = ({ error, fullHeight = true }: IOops) => {
   return (
     <EmojiSplash
       emoji={emoji}
+      fullHeight={fullHeight}
       heading={err.title}
       subHeadings={err.descriptions}
-      fullHeight={fullHeight}
     />
   );
 };
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index 49c511401..c01c15c23 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/src/renderer/components/Sidebar.tsx
@@ -13,6 +13,7 @@ import {
 import { IconButton, Stack } from '@primer/react';
 
 import { APPLICATION } from '../../shared/constants';
+
 import { AppContext } from '../context/App';
 import { quitApp } from '../utils/comms';
 import { Constants } from '../utils/constants';
@@ -72,129 +73,129 @@ export const Sidebar: FC = () => {
 
   return (
     <Stack
+      className="fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar text-white"
       direction="vertical"
       justify="space-between"
-      className="fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar text-white"
     >
       <Stack
-        direction="vertical"
         align="center"
+        direction="vertical"
         gap="condensed"
         padding="normal"
       >
         <IconButton
-          icon={LogoIcon}
           aria-label={APPLICATION.NAME}
+          data-testid="sidebar-home"
           description="Home"
-          unsafeDisableTooltip={false}
+          icon={LogoIcon}
+          onClick={() => navigate('/', { replace: true })}
           size="small"
-          variant="invisible"
           tooltipDirection="e"
-          onClick={() => navigate('/', { replace: true })}
-          data-testid="sidebar-home"
+          unsafeDisableTooltip={false}
+          variant="invisible"
         />
 
         <IconButton
-          icon={BellIcon}
           aria-label="Notifications"
+          data-testid="sidebar-notifications"
           description={`${notificationsCount} unread notifications`}
-          unsafeDisableTooltip={false}
-          size="small"
-          variant={notificationsCount > 0 ? 'primary' : 'invisible'}
-          tooltipDirection="e"
+          icon={BellIcon}
           onClick={() => openGitHubNotifications(primaryAccountHostname)}
-          data-testid="sidebar-notifications"
+          size="small"
           sx={sidebarButtonStyle}
+          tooltipDirection="e"
+          unsafeDisableTooltip={false}
+          variant={notificationsCount > 0 ? 'primary' : 'invisible'}
         />
 
         {isLoggedIn && (
           <IconButton
-            icon={FilterIcon}
             aria-label="Filters"
+            data-testid="sidebar-filter-notifications"
             description="Filter notifications"
-            unsafeDisableTooltip={false}
-            size="small"
-            variant={hasAnyFiltersSet(settings) ? 'primary' : 'invisible'}
-            tooltipDirection="e"
+            icon={FilterIcon}
             onClick={() => toggleFilters()}
-            data-testid="sidebar-filter-notifications"
+            size="small"
             sx={sidebarButtonStyle}
+            tooltipDirection="e"
+            unsafeDisableTooltip={false}
+            variant={hasAnyFiltersSet(settings) ? 'primary' : 'invisible'}
           />
         )}
 
         <IconButton
-          icon={IssueOpenedIcon}
           aria-label="My issues"
-          unsafeDisableTooltip={false}
-          size="small"
-          variant="invisible"
-          tooltipDirection="e"
-          onClick={() => openGitHubIssues(primaryAccountHostname)}
           data-testid="sidebar-my-issues"
+          icon={IssueOpenedIcon}
+          onClick={() => openGitHubIssues(primaryAccountHostname)}
+          size="small"
           sx={sidebarButtonStyle}
+          tooltipDirection="e"
+          unsafeDisableTooltip={false}
+          variant="invisible"
         />
 
         <IconButton
-          icon={GitPullRequestIcon}
           aria-label="My pull requests"
-          unsafeDisableTooltip={false}
-          size="small"
-          variant="invisible"
-          tooltipDirection="e"
-          onClick={() => openGitHubPulls(primaryAccountHostname)}
           data-testid="sidebar-my-pull-requests"
+          icon={GitPullRequestIcon}
+          onClick={() => openGitHubPulls(primaryAccountHostname)}
+          size="small"
           sx={sidebarButtonStyle}
+          tooltipDirection="e"
+          unsafeDisableTooltip={false}
+          variant="invisible"
         />
       </Stack>
 
       <Stack
-        direction="vertical"
         align="center"
+        direction="vertical"
         gap="condensed"
         padding="normal"
       >
         {isLoggedIn && (
           <>
             <IconButton
-              icon={SyncIcon}
               aria-label="Refresh"
+              data-testid="sidebar-refresh"
               description="Refresh notifications"
-              unsafeDisableTooltip={false}
-              size="small"
-              variant="invisible"
-              tooltipDirection="e"
-              loading={status === 'loading'}
               disabled={status === 'loading'}
+              icon={SyncIcon}
+              loading={status === 'loading'}
               onClick={() => refreshNotifications()}
-              data-testid="sidebar-refresh"
+              size="small"
               sx={sidebarButtonStyle}
+              tooltipDirection="e"
+              unsafeDisableTooltip={false}
+              variant="invisible"
             />
 
             <IconButton
-              icon={GearIcon}
               aria-label="Settings"
-              unsafeDisableTooltip={false}
-              size="small"
-              variant="invisible"
-              tooltipDirection="e"
-              onClick={() => toggleSettings()}
               data-testid="sidebar-settings"
+              icon={GearIcon}
+              onClick={() => toggleSettings()}
+              size="small"
               sx={sidebarButtonStyle}
+              tooltipDirection="e"
+              unsafeDisableTooltip={false}
+              variant="invisible"
             />
           </>
         )}
 
         {!isLoggedIn && (
           <IconButton
-            icon={XCircleIcon}
             aria-label={`Quit ${APPLICATION.NAME}`}
-            unsafeDisableTooltip={false}
-            size="small"
-            variant="invisible"
-            tooltipDirection="e"
-            onClick={() => quitApp()}
             data-testid="sidebar-quit"
+            icon={XCircleIcon}
+            onClick={() => quitApp()}
+            size="small"
             sx={sidebarButtonStyle}
+            tooltipDirection="e"
+            unsafeDisableTooltip={false}
+            variant="invisible"
           />
         )}
       </Stack>
diff --git a/src/renderer/components/avatars/AvatarWithFallback.tsx b/src/renderer/components/avatars/AvatarWithFallback.tsx
index fc6607372..2f1116af1 100644
--- a/src/renderer/components/avatars/AvatarWithFallback.tsx
+++ b/src/renderer/components/avatars/AvatarWithFallback.tsx
@@ -31,24 +31,24 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
   // TODO explore using AnchoredOverlay component (https://primer.style/components/anchored-overlay/react/alpha) to render Avatar Card on hover
   return (
     <Stack
-      direction="horizontal"
       align="center"
-      gap="condensed"
       data-testid="avatar"
+      direction="horizontal"
+      gap="condensed"
     >
       {!src || isBroken ? (
         <DefaultUserIcon size={size} />
       ) : (
         <Avatar
-          src={src}
           alt={alt}
+          onError={() => setIsBroken(true)}
           size={size}
           square={isNonHuman}
-          onError={() => setIsBroken(true)}
+          src={src}
         />
       )}
       {name && (
-        <Truncate title={name} inline maxWidth={280}>
+        <Truncate inline maxWidth={280} title={name}>
           {name}
         </Truncate>
       )}
diff --git a/src/renderer/components/fields/Checkbox.test.tsx b/src/renderer/components/fields/Checkbox.test.tsx
index 623a59d91..7d004caf7 100644
--- a/src/renderer/components/fields/Checkbox.test.tsx
+++ b/src/renderer/components/fields/Checkbox.test.tsx
@@ -33,12 +33,12 @@ describe('renderer/components/fields/Checkbox.tsx', () => {
   });
 
   it('should render - positive counter unselected', () => {
-    const tree = render(<Checkbox {...props} counter={5} checked={false} />);
+    const tree = render(<Checkbox {...props} checked={false} counter={5} />);
     expect(tree).toMatchSnapshot();
   });
 
   it('should render - positive counter selected', () => {
-    const tree = render(<Checkbox {...props} counter={5} checked={true} />);
+    const tree = render(<Checkbox {...props} checked={true} counter={5} />);
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/src/renderer/components/fields/Checkbox.tsx b/src/renderer/components/fields/Checkbox.tsx
index 4a7e77c55..f78e54c32 100644
--- a/src/renderer/components/fields/Checkbox.tsx
+++ b/src/renderer/components/fields/Checkbox.tsx
@@ -26,27 +26,27 @@ export const Checkbox: FC<ICheckbox> = ({
   return (
     visible && (
       <Stack
-        direction="horizontal"
-        gap="condensed"
         align="center"
         className="text-sm"
+        direction="horizontal"
+        gap="condensed"
       >
         <input
-          type="checkbox"
-          id={props.name}
-          className="size-4 rounded-sm cursor-pointer"
           checked={props.checked}
-          onChange={props.onChange}
-          disabled={props.disabled}
+          className="size-4 rounded-sm cursor-pointer"
           data-testid={`checkbox-${props.name}`}
+          disabled={props.disabled}
+          id={props.name}
+          onChange={props.onChange}
+          type="checkbox"
         />
 
         <label
-          htmlFor={props.name}
           className={cn(
             'font-medium text-gitify-font cursor-pointer',
             props.disabled && 'line-through',
           )}
+          htmlFor={props.name}
         >
           {props.label}
         </label>
diff --git a/src/renderer/components/fields/FieldLabel.tsx b/src/renderer/components/fields/FieldLabel.tsx
index 633d1225d..471dc0b7f 100644
--- a/src/renderer/components/fields/FieldLabel.tsx
+++ b/src/renderer/components/fields/FieldLabel.tsx
@@ -7,7 +7,7 @@ export interface IFieldLabel {
 
 export const FieldLabel: FC<IFieldLabel> = (props: IFieldLabel) => {
   return (
-    <label htmlFor={props.name} className="mr-3 font-medium cursor-pointer">
+    <label className="mr-3 font-medium cursor-pointer" htmlFor={props.name}>
       {props.label}
     </label>
   );
diff --git a/src/renderer/components/fields/RadioGroup.tsx b/src/renderer/components/fields/RadioGroup.tsx
index 0a92cf1e6..bb1a52e58 100644
--- a/src/renderer/components/fields/RadioGroup.tsx
+++ b/src/renderer/components/fields/RadioGroup.tsx
@@ -16,34 +16,34 @@ export interface IRadioGroup {
 export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
   return (
     <Stack
-      direction="horizontal"
-      gap="condensed"
       align="center"
       className="text-sm"
+      direction="horizontal"
+      gap="condensed"
     >
-      <FieldLabel name={props.name} label={props.label} />
+      <FieldLabel label={props.label} name={props.name} />
 
       {props.options.map((item) => {
         const name = `radio-${props.name}-${item.value.toLowerCase()}`;
 
         return (
           <Stack
+            align="center"
             direction="horizontal"
             gap="condensed"
-            align="center"
             key={name}
           >
             <input
-              type="radio"
+              checked={item.value === props.value}
               className="size-4 cursor-pointer"
+              data-testid={name}
               id={name}
               name={props.name}
-              value={item.value}
               onChange={props.onChange}
-              checked={item.value === props.value}
-              data-testid={name}
+              type="radio"
+              value={item.value}
             />
-            <FieldLabel name={name} label={item.label} />
+            <FieldLabel label={item.label} name={name} />
           </Stack>
         );
       })}
diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx
index 75ca2335a..79708b671 100644
--- a/src/renderer/components/fields/Tooltip.tsx
+++ b/src/renderer/components/fields/Tooltip.tsx
@@ -13,12 +13,12 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
 
   return (
     <Box
-      id={props.name}
       aria-label={props.name}
       className="relative"
+      data-testid={`tooltip-${props.name}`}
+      id={props.name}
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
-      data-testid={`tooltip-${props.name}`}
     >
       <QuestionIcon className="text-gitify-tooltip-icon" />
       {showTooltip && (
diff --git a/src/renderer/components/filters/FilterSection.test.tsx b/src/renderer/components/filters/FilterSection.test.tsx
index c840d8f55..1f8332428 100644
--- a/src/renderer/components/filters/FilterSection.test.tsx
+++ b/src/renderer/components/filters/FilterSection.test.tsx
@@ -31,14 +31,14 @@ describe('renderer/components/filters/FilterSection.tsx', () => {
         >
           <MemoryRouter>
             <FilterSection
-              id={'FilterSectionTest'}
-              title={'FilterSectionTitle'}
-              icon={MarkGithubIcon}
               filter={{
                 ...mockFilter,
                 requiresDetailsNotifications: true,
               }}
               filterSetting={mockFilterSetting}
+              icon={MarkGithubIcon}
+              id={'FilterSectionTest'}
+              title={'FilterSectionTitle'}
             />
           </MemoryRouter>
         </AppContext.Provider>,
@@ -59,14 +59,14 @@ describe('renderer/components/filters/FilterSection.tsx', () => {
           }}
         >
           <FilterSection
-            id={'FilterSectionTest'}
-            title={'FilterSectionTitle'}
-            icon={MarkGithubIcon}
             filter={{
               ...mockFilter,
               requiresDetailsNotifications: false,
             }}
             filterSetting={mockFilterSetting}
+            icon={MarkGithubIcon}
+            id={'FilterSectionTest'}
+            title={'FilterSectionTitle'}
           />
         </AppContext.Provider>,
       );
@@ -90,11 +90,11 @@ describe('renderer/components/filters/FilterSection.tsx', () => {
         >
           <MemoryRouter>
             <FilterSection
-              id={'FilterSectionTest'}
-              title={'FilterSectionTitle'}
-              icon={MarkGithubIcon}
               filter={mockFilter}
               filterSetting={mockFilterSetting}
+              icon={MarkGithubIcon}
+              id={'FilterSectionTest'}
+              title={'FilterSectionTitle'}
             />
           </MemoryRouter>
         </AppContext.Provider>,
@@ -125,11 +125,11 @@ describe('renderer/components/filters/FilterSection.tsx', () => {
         >
           <MemoryRouter>
             <FilterSection
-              id={'FilterSectionTest'}
-              title={'FilterSectionTitle'}
-              icon={MarkGithubIcon}
               filter={mockFilter}
               filterSetting={mockFilterSetting}
+              icon={MarkGithubIcon}
+              id={'FilterSectionTest'}
+              title={'FilterSectionTitle'}
             />
           </MemoryRouter>
         </AppContext.Provider>,
diff --git a/src/renderer/components/filters/FilterSection.tsx b/src/renderer/components/filters/FilterSection.tsx
index e4e39a385..47dbf8517 100644
--- a/src/renderer/components/filters/FilterSection.tsx
+++ b/src/renderer/components/filters/FilterSection.tsx
@@ -34,7 +34,7 @@ export const FilterSection = <T extends FilterValue>({
 
   return (
     <fieldset id={id}>
-      <Stack direction="horizontal" gap="condensed" align="baseline">
+      <Stack align="baseline" direction="horizontal" gap="condensed">
         <Title icon={icon}>{title}</Title>
         {tooltip && (
           <Tooltip
@@ -64,19 +64,19 @@ export const FilterSection = <T extends FilterValue>({
 
           return (
             <Checkbox
+              checked={isChecked}
+              counter={count}
+              disabled={
+                filter.requiresDetailsNotifications &&
+                !settings.detailedNotifications
+              }
               key={type as string}
-              name={typeTitle}
               label={typeTitle}
-              checked={isChecked}
+              name={typeTitle}
               onChange={(evt) =>
                 updateFilter(filterSetting, type, evt.target.checked)
               }
               tooltip={typeDescription ? <Text>{typeDescription}</Text> : null}
-              disabled={
-                filter.requiresDetailsNotifications &&
-                !settings.detailedNotifications
-              }
-              counter={count}
             />
           );
         })}
diff --git a/src/renderer/components/filters/OrganizationFilter.tsx b/src/renderer/components/filters/OrganizationFilter.tsx
index 369087f06..0bea7ab21 100644
--- a/src/renderer/components/filters/OrganizationFilter.tsx
+++ b/src/renderer/components/filters/OrganizationFilter.tsx
@@ -135,7 +135,7 @@ export const OrganizationFilter: FC = () => {
 
   return (
     <fieldset id="filter-organizations">
-      <Stack direction="horizontal" gap="condensed" align="baseline">
+      <Stack align="baseline" direction="horizontal" gap="condensed">
         <Title icon={OrganizationIcon}>Organizations</Title>
         <Tooltip
           name="tooltip-filter-organizations"
@@ -148,56 +148,56 @@ export const OrganizationFilter: FC = () => {
       </Stack>
       <Stack direction="vertical" gap="condensed">
         <Stack
-          direction="horizontal"
-          gap="condensed"
           align="center"
           className="text-sm"
+          direction="horizontal"
+          gap="condensed"
         >
           <Box className="font-medium text-gitify-font w-28">
-            <Stack direction="horizontal" gap="condensed" align="center">
+            <Stack align="center" direction="horizontal" gap="condensed">
               <CheckCircleFillIcon className={IconColor.GREEN} />
               <Text>Include:</Text>
             </Stack>
           </Box>
           <TextInputWithTokens
-            title="Include organizations"
-            tokens={includeOrganizations}
-            onTokenRemove={removeIncludeOrganizationToken}
-            onKeyDown={includeOrganizationsKeyDown}
-            onBlur={addIncludeOrganizationsToken}
-            size="small"
+            block
             disabled={
               !settings.detailedNotifications ||
               hasExcludeOrganizationFilters(settings)
             }
-            block
+            onBlur={addIncludeOrganizationsToken}
+            onKeyDown={includeOrganizationsKeyDown}
+            onTokenRemove={removeIncludeOrganizationToken}
+            size="small"
+            title="Include organizations"
+            tokens={includeOrganizations}
           />
         </Stack>
 
         <Stack
-          direction="horizontal"
-          gap="condensed"
           align="center"
           className="text-sm"
+          direction="horizontal"
+          gap="condensed"
         >
           <Box className="font-medium text-gitify-font w-28">
-            <Stack direction="horizontal" gap="condensed" align="center">
+            <Stack align="center" direction="horizontal" gap="condensed">
               <NoEntryFillIcon className={IconColor.RED} />
               <Text>Exclude:</Text>
             </Stack>
           </Box>
           <TextInputWithTokens
-            title="Exclude organizations"
-            tokens={excludeOrganizations}
-            onTokenRemove={removeExcludeOrganizationToken}
-            onKeyDown={excludeOrganizationsKeyDown}
-            onBlur={addExcludeOrganizationsToken}
-            size="small"
+            block
             disabled={
               !settings.detailedNotifications ||
               hasIncludeOrganizationFilters(settings)
             }
-            block
+            onBlur={addExcludeOrganizationsToken}
+            onKeyDown={excludeOrganizationsKeyDown}
+            onTokenRemove={removeExcludeOrganizationToken}
+            size="small"
+            title="Exclude organizations"
+            tokens={excludeOrganizations}
           />
         </Stack>
       </Stack>
diff --git a/src/renderer/components/filters/ReasonFilter.tsx b/src/renderer/components/filters/ReasonFilter.tsx
index 94c4ec505..a9a5f2292 100644
--- a/src/renderer/components/filters/ReasonFilter.tsx
+++ b/src/renderer/components/filters/ReasonFilter.tsx
@@ -9,11 +9,11 @@ import { FilterSection } from './FilterSection';
 export const ReasonFilter: FC = () => {
   return (
     <FilterSection
-      id="filter-reasons"
-      title="Reason"
-      icon={NoteIcon}
       filter={reasonFilter}
       filterSetting="filterReasons"
+      icon={NoteIcon}
+      id="filter-reasons"
+      title="Reason"
       tooltip={<Text>Filter notifications by reason.</Text>}
     />
   );
diff --git a/src/renderer/components/filters/StateFilter.tsx b/src/renderer/components/filters/StateFilter.tsx
index b6f41b87d..54869ef37 100644
--- a/src/renderer/components/filters/StateFilter.tsx
+++ b/src/renderer/components/filters/StateFilter.tsx
@@ -9,11 +9,11 @@ import { FilterSection } from './FilterSection';
 export const StateFilter: FC = () => {
   return (
     <FilterSection
-      id="filter-state"
-      title="State"
-      icon={IssueOpenedIcon}
       filter={stateFilter}
       filterSetting="filterStates"
+      icon={IssueOpenedIcon}
+      id="filter-state"
+      title="State"
       tooltip={<Text>Filter notifications by state.</Text>}
     />
   );
diff --git a/src/renderer/components/filters/SubjectTypeFilter.tsx b/src/renderer/components/filters/SubjectTypeFilter.tsx
index 25ed975c3..e2e04b774 100644
--- a/src/renderer/components/filters/SubjectTypeFilter.tsx
+++ b/src/renderer/components/filters/SubjectTypeFilter.tsx
@@ -9,11 +9,11 @@ import { FilterSection } from './FilterSection';
 export const SubjectTypeFilter: FC = () => {
   return (
     <FilterSection
-      id="filter-subject-type"
-      title="Type"
-      icon={BellIcon}
       filter={subjectTypeFilter}
       filterSetting="filterSubjectTypes"
+      icon={BellIcon}
+      id="filter-subject-type"
+      title="Type"
       tooltip={<Text>Filter notifications by type.</Text>}
     />
   );
diff --git a/src/renderer/components/filters/UserHandleFilter.tsx b/src/renderer/components/filters/UserHandleFilter.tsx
index 2264c53ce..9c96a7e7b 100644
--- a/src/renderer/components/filters/UserHandleFilter.tsx
+++ b/src/renderer/components/filters/UserHandleFilter.tsx
@@ -121,7 +121,7 @@ export const UserHandleFilter: FC = () => {
 
   return (
     <fieldset id="filter-user-handles">
-      <Stack direction="horizontal" gap="condensed" align="baseline">
+      <Stack align="baseline" direction="horizontal" gap="condensed">
         <Title icon={MentionIcon}>Handles</Title>
         <Tooltip
           name="tooltip-filter-handles"
@@ -135,56 +135,56 @@ export const UserHandleFilter: FC = () => {
       </Stack>
       <Stack direction="vertical" gap="condensed">
         <Stack
-          direction="horizontal"
-          gap="condensed"
           align="center"
           className="text-sm"
+          direction="horizontal"
+          gap="condensed"
         >
           <Box className="font-medium text-gitify-font w-28">
-            <Stack direction="horizontal" gap="condensed" align="center">
+            <Stack align="center" direction="horizontal" gap="condensed">
               <CheckCircleFillIcon className={IconColor.GREEN} />
               <Text>Include:</Text>
             </Stack>
           </Box>
           <TextInputWithTokens
-            title="Include handles"
-            tokens={includeHandles}
-            onTokenRemove={removeIncludeHandleToken}
-            onKeyDown={includeHandlesKeyDown}
-            onBlur={addIncludeHandlesToken}
-            size="small"
+            block
             disabled={
               !settings.detailedNotifications ||
               hasExcludeHandleFilters(settings)
             }
-            block
+            onBlur={addIncludeHandlesToken}
+            onKeyDown={includeHandlesKeyDown}
+            onTokenRemove={removeIncludeHandleToken}
+            size="small"
+            title="Include handles"
+            tokens={includeHandles}
           />
         </Stack>
 
         <Stack
-          direction="horizontal"
-          gap="condensed"
           align="center"
           className="text-sm"
+          direction="horizontal"
+          gap="condensed"
         >
           <Box className="font-medium text-gitify-font w-28">
-            <Stack direction="horizontal" gap="condensed" align="center">
+            <Stack align="center" direction="horizontal" gap="condensed">
               <NoEntryFillIcon className={IconColor.RED} />
               <Text>Exclude:</Text>
             </Stack>
           </Box>
           <TextInputWithTokens
-            title="Exclude handles"
-            tokens={excludeHandles}
-            onTokenRemove={removeExcludeHandleToken}
-            onKeyDown={excludeHandlesKeyDown}
-            onBlur={addExcludeHandlesToken}
-            size="small"
+            block
             disabled={
               !settings.detailedNotifications ||
               hasIncludeHandleFilters(settings)
             }
-            block
+            onBlur={addExcludeHandlesToken}
+            onKeyDown={excludeHandlesKeyDown}
+            onTokenRemove={removeExcludeHandleToken}
+            size="small"
+            title="Exclude handles"
+            tokens={excludeHandles}
           />
         </Stack>
       </Stack>
diff --git a/src/renderer/components/filters/UserTypeFilter.tsx b/src/renderer/components/filters/UserTypeFilter.tsx
index 565a91adb..bdc19a482 100644
--- a/src/renderer/components/filters/UserTypeFilter.tsx
+++ b/src/renderer/components/filters/UserTypeFilter.tsx
@@ -15,12 +15,12 @@ import { FilterSection } from './FilterSection';
 export const UserTypeFilter: FC = () => {
   return (
     <FilterSection
-      id="filter-user-types"
-      title="User Type"
-      icon={FeedPersonIcon}
       filter={userTypeFilter}
       filterSetting="filterUserTypes"
+      icon={FeedPersonIcon}
+      id="filter-user-types"
       layout="horizontal"
+      title="User Type"
       tooltip={
         <Stack direction="vertical" gap="condensed">
           <Text>Filter notifications by user type:</Text>
diff --git a/src/renderer/components/icons/LogoIcon.tsx b/src/renderer/components/icons/LogoIcon.tsx
index c583ac2c5..7bec9cc84 100644
--- a/src/renderer/components/icons/LogoIcon.tsx
+++ b/src/renderer/components/icons/LogoIcon.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 
 import { APPLICATION } from '../../../shared/constants';
+
 import { Size } from '../../types';
 import { cn } from '../../utils/cn';
 
@@ -23,45 +24,45 @@ export const LogoIcon: FC<ILogoIcon> = ({
   ...props
 }: ILogoIcon) => (
   <svg
+    aria-label={`${APPLICATION.NAME} Logo`}
     className={cn(
       size === Size.SMALL && 'size-5',
       size === Size.MEDIUM && 'size-10',
       size === Size.LARGE && 'size-16',
     )}
     onClick={() => onClick?.()}
+    role="img"
+    viewBox="0 0 500 500"
     xmlns="https://www.w3.org/2000/svg"
     xmlnsXlink="https://www.w3.org/1999/xlink"
-    viewBox="0 0 500 500"
-    role="img"
-    aria-label={`${APPLICATION.NAME} Logo`}
     {...props}
   >
     <defs>
       <linearGradient
+        id={isDark ? 'linearGradient-dark' : 'linearGradient-light'}
         x1="90.8779989%"
-        y1="80.0676288%"
         x2="-1.30249747%"
+        y1="80.0676288%"
         y2="32.7108237%"
-        id={isDark ? 'linearGradient-dark' : 'linearGradient-light'}
       >
         <stop
-          stopColor={isDark ? DARK_GRADIENT_START : LIGHT_GRADIENT_START}
           offset="0%"
+          stopColor={isDark ? DARK_GRADIENT_START : LIGHT_GRADIENT_START}
         />
         <stop
-          stopColor={isDark ? DARK_GRADIENT_END : LIGHT_GRADIENT_END}
           offset="100%"
+          stopColor={isDark ? DARK_GRADIENT_END : LIGHT_GRADIENT_END}
         />
       </linearGradient>
     </defs>
-    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
       <g
-        id="Logo"
-        transform="translate(6.000000, 6.000000)"
         fill={`url(${
           isDark ? '#linearGradient-dark' : '#linearGradient-light'
         })`}
         fillRule="nonzero"
+        id="Logo"
+        transform="translate(6.000000, 6.000000)"
       >
         <path d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z" />
       </g>
diff --git a/src/renderer/components/icons/VolumeDownIcon.tsx b/src/renderer/components/icons/VolumeDownIcon.tsx
index 4c7a84f8a..1cfec34d1 100644
--- a/src/renderer/components/icons/VolumeDownIcon.tsx
+++ b/src/renderer/components/icons/VolumeDownIcon.tsx
@@ -2,14 +2,14 @@ import type { FC } from 'react';
 
 export const VolumeDownIcon: FC = () => (
   <svg
+    aria-label="Volume Down Icon"
     className="size-4"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
+    fill="currentColor"
     height="24"
     role="img"
-    aria-label="Volume Down Icon"
-    fill="currentColor"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <g transform="translate(2, 0)">
       <path d="M11.553 3.064A.75.75 0 0 1 12 3.75v16.5a.75.75 0 0 1-1.255.555L5.46 16H2.75A1.75 1.75 0 0 1 1 14.25v-4.5C1 8.784 1.784 8 2.75 8h2.71l5.285-4.805a.752.752 0 0 1 .808-.13ZM10.5 5.445l-4.245 3.86a.748.748 0 0 1-.505.195h-3a.25.25 0 0 0-.25.25v4.5c0 .138.112.25.25.25h3c.187 0 .367.069.505.195l4.245 3.86z" />
diff --git a/src/renderer/components/icons/VolumeUpIcon.tsx b/src/renderer/components/icons/VolumeUpIcon.tsx
index e49492266..632b95cd8 100644
--- a/src/renderer/components/icons/VolumeUpIcon.tsx
+++ b/src/renderer/components/icons/VolumeUpIcon.tsx
@@ -2,14 +2,14 @@ import type { FC } from 'react';
 
 export const VolumeUpIcon: FC = () => (
   <svg
+    aria-label="Volume Up Icon"
     className="size-4"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
+    fill="currentColor"
     height="24"
     role="img"
-    aria-label="Volume Up Icon"
-    fill="currentColor"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M11.553 3.064A.75.75 0 0 1 12 3.75v16.5a.75.75 0 0 1-1.255.555L5.46 16H2.75A1.75 1.75 0 0 1 1 14.25v-4.5C1 8.784 1.784 8 2.75 8h2.71l5.285-4.805a.752.752 0 0 1 .808-.13ZM10.5 5.445l-4.245 3.86a.748.748 0 0 1-.505.195h-3a.25.25 0 0 0-.25.25v4.5c0 .138.112.25.25.25h3c.187 0 .367.069.505.195l4.245 3.86Zm8.218-1.223a.75.75 0 0 1 1.06 0c4.296 4.296 4.296 11.26 0 15.556a.75.75 0 0 1-1.06-1.06 9.5 9.5 0 0 0 0-13.436.75.75 0 0 1 0-1.06Z" />
     <path d="M16.243 7.757a.75.75 0 1 0-1.061 1.061 4.5 4.5 0 0 1 0 6.364.75.75 0 0 0 1.06 1.06 6 6 0 0 0 0-8.485Z" />
diff --git a/src/renderer/components/layout/Centered.tsx b/src/renderer/components/layout/Centered.tsx
index c1bd80e04..e5d78504f 100644
--- a/src/renderer/components/layout/Centered.tsx
+++ b/src/renderer/components/layout/Centered.tsx
@@ -10,11 +10,11 @@ interface ICentered {
 export const Centered: FC<ICentered> = (props: ICentered) => {
   return (
     <Stack
-      direction="vertical"
       align="center"
+      className={props.fullHeight && 'h-screen'}
+      direction="vertical"
       justify="center"
       padding="spacious"
-      className={props.fullHeight && 'h-screen'}
     >
       {props.children}
     </Stack>
diff --git a/src/renderer/components/layout/EmojiSplash.tsx b/src/renderer/components/layout/EmojiSplash.tsx
index f8f5a0971..521e6406e 100644
--- a/src/renderer/components/layout/EmojiSplash.tsx
+++ b/src/renderer/components/layout/EmojiSplash.tsx
@@ -33,7 +33,7 @@ export const EmojiSplash: FC<IEmojiSplash> = ({
         {subHeadings.map((description, i) => {
           return (
             // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
-            <Box key={`error_description_${i}`} className="text-center">
+            <Box className="text-center" key={`error_description_${i}`}>
               {description}
             </Box>
           );
diff --git a/src/renderer/components/metrics/MetricGroup.tsx b/src/renderer/components/metrics/MetricGroup.tsx
index f07b5ee4e..adecd3d73 100644
--- a/src/renderer/components/metrics/MetricGroup.tsx
+++ b/src/renderer/components/metrics/MetricGroup.tsx
@@ -40,10 +40,10 @@ export const MetricGroup: FC<IMetricGroup> = ({
       <Box className="flex gap-1">
         {notification.subject?.linkedIssues?.length > 0 && (
           <MetricPill
-            title={linkedIssuesPillDescription}
-            metric={notification.subject.linkedIssues.length}
-            icon={IssueClosedIcon}
             color={IconColor.GREEN}
+            icon={IssueClosedIcon}
+            metric={notification.subject.linkedIssues.length}
+            title={linkedIssuesPillDescription}
           />
         )}
 
@@ -55,39 +55,39 @@ export const MetricGroup: FC<IMetricGroup> = ({
 
           return (
             <MetricPill
+              color={icon.color}
+              icon={icon.type}
               key={review.state}
-              title={icon.description}
               metric={review.users.length}
-              icon={icon.type}
-              color={icon.color}
+              title={icon.description}
             />
           );
         })}
         {notification.subject?.comments > 0 && (
           <MetricPill
-            title={commentsPillDescription}
-            metric={notification.subject.comments}
-            icon={CommentIcon}
             color={IconColor.GRAY}
+            icon={CommentIcon}
+            metric={notification.subject.comments}
+            title={commentsPillDescription}
           />
         )}
         {notification.subject?.labels?.length > 0 && (
           <MetricPill
-            title={labelsPillDescription}
-            metric={notification.subject.labels.length}
-            icon={TagIcon}
             color={IconColor.GRAY}
+            icon={TagIcon}
+            metric={notification.subject.labels.length}
+            title={labelsPillDescription}
           />
         )}
         {notification.subject.milestone && (
           <MetricPill
-            title={notification.subject.milestone.title}
-            icon={MilestoneIcon}
             color={
               notification.subject.milestone.state === 'open'
                 ? IconColor.GREEN
                 : IconColor.RED
             }
+            icon={MilestoneIcon}
+            title={notification.subject.milestone.title}
           />
         )}
       </Box>
diff --git a/src/renderer/components/metrics/MetricPill.tsx b/src/renderer/components/metrics/MetricPill.tsx
index 1840c51a3..990f226f6 100644
--- a/src/renderer/components/metrics/MetricPill.tsx
+++ b/src/renderer/components/metrics/MetricPill.tsx
@@ -16,13 +16,13 @@ export interface IMetricPill {
 export const MetricPill: FC<IMetricPill> = (props: IMetricPill) => {
   return (
     <Label
-      variant="secondary"
+      className="hover:bg-gitify-notification-pill-hover"
       size="small"
       title={props.title}
-      className="hover:bg-gitify-notification-pill-hover"
+      variant="secondary"
     >
-      <Stack direction="horizontal" align="center" gap="none">
-        <props.icon size={Size.XSMALL} className={props.color} />
+      <Stack align="center" direction="horizontal" gap="none">
+        <props.icon className={props.color} size={Size.XSMALL} />
         {props.metric ? (
           <Text className="text-xxs px-1">{props.metric}</Text>
         ) : null}
diff --git a/src/renderer/components/notifications/AccountNotifications.tsx b/src/renderer/components/notifications/AccountNotifications.tsx
index f203d9edf..c11af63dc 100644
--- a/src/renderer/components/notifications/AccountNotifications.tsx
+++ b/src/renderer/components/notifications/AccountNotifications.tsx
@@ -78,51 +78,51 @@ export const AccountNotifications: FC<IAccountNotifications> = (
           onClick={actionToggleAccountNotifications}
         >
           <Stack
-            direction="horizontal"
             align="center"
-            gap="condensed"
             className="relative"
+            direction="horizontal"
+            gap="condensed"
           >
             <Button
-              title="Open account profile"
-              variant="invisible"
               alignContent="center"
               count={notifications.length}
+              data-testid="account-profile"
               onClick={(event: MouseEvent<HTMLElement>) => {
                 // Don't trigger onClick of parent element.
                 event.stopPropagation();
                 openAccountProfile(account);
               }}
-              data-testid="account-profile"
+              title="Open account profile"
+              variant="invisible"
             >
               <AvatarWithFallback
-                src={account.user.avatar}
                 alt={account.user.login}
                 name={`@${account.user.login}`}
                 size={Size.MEDIUM}
+                src={account.user.avatar}
               />
             </Button>
 
             <HoverGroup bgColor="group-hover:bg-gitify-account-rest">
               <HoverButton
-                label="My Issues"
+                action={() => openGitHubIssues(account.hostname)}
                 icon={IssueOpenedIcon}
+                label="My Issues"
                 testid="account-issues"
-                action={() => openGitHubIssues(account.hostname)}
               />
 
               <HoverButton
-                label="My Pull Requests"
+                action={() => openGitHubPulls(account.hostname)}
                 icon={GitPullRequestIcon}
+                label="My Pull Requests"
                 testid="account-pull-requests"
-                action={() => openGitHubPulls(account.hostname)}
               />
 
               <HoverButton
-                label={Chevron.label}
+                action={actionToggleAccountNotifications}
                 icon={Chevron.icon}
+                label={Chevron.label}
                 testid="account-toggle"
-                action={actionToggleAccountNotifications}
               />
             </HoverGroup>
           </Stack>
diff --git a/src/renderer/components/notifications/NotificationFooter.tsx b/src/renderer/components/notifications/NotificationFooter.tsx
index f5c9b25bb..ac95d0546 100644
--- a/src/renderer/components/notifications/NotificationFooter.tsx
+++ b/src/renderer/components/notifications/NotificationFooter.tsx
@@ -21,26 +21,26 @@ export const NotificationFooter: FC<INotificationFooter> = ({
 
   return (
     <Stack
-      direction="horizontal"
       align="center"
+      className={cn('text-xs', Opacity.MEDIUM)}
+      direction="horizontal"
       gap="condensed"
       wrap="wrap"
-      className={cn('text-xs', Opacity.MEDIUM)}
     >
       {notification.subject.user ? (
         <Box
-          title={notification.subject.user.login}
+          data-testid="view-profile"
           onClick={(event: MouseEvent<HTMLElement>) => {
             // Don't trigger onClick of parent element.
             event.stopPropagation();
             openUserProfile(notification.subject.user);
           }}
-          data-testid="view-profile"
+          title={notification.subject.user.login}
         >
           <AvatarWithFallback
-            src={notification.subject.user.avatar_url}
             alt={notification.subject.user.login}
             size={Size.SMALL}
+            src={notification.subject.user.avatar_url}
             userType={notification.subject.user.type}
           />
         </Box>
@@ -57,7 +57,7 @@ export const NotificationFooter: FC<INotificationFooter> = ({
       )}
 
       <Stack direction="horizontal" gap="none">
-        <Text title={reason.description} className="pr-1">
+        <Text className="pr-1" title={reason.description}>
           {reason.title}
         </Text>
         <RelativeTime datetime={notification.updated_at} />
diff --git a/src/renderer/components/notifications/NotificationHeader.tsx b/src/renderer/components/notifications/NotificationHeader.tsx
index 2e41e7b22..d7e57ce5c 100644
--- a/src/renderer/components/notifications/NotificationHeader.tsx
+++ b/src/renderer/components/notifications/NotificationHeader.tsx
@@ -29,22 +29,22 @@ export const NotificationHeader: FC<INotificationHeader> = ({
   return (
     groupByDate && (
       <Box className="py-0.5">
-        <Stack direction="horizontal" align="center" gap="condensed">
+        <Stack align="center" direction="horizontal" gap="condensed">
           <Box
-            title="Open repository"
             className="text-xs font-medium"
+            data-testid="view-repository"
             onClick={(event: MouseEvent<HTMLElement>) => {
               // Don't trigger onClick of parent element.
               event.stopPropagation();
               openRepository(notification.repository);
             }}
-            data-testid="view-repository"
+            title="Open repository"
           >
             <AvatarWithFallback
-              src={notification.repository.owner.avatar_url}
               alt={repoSlug}
               name={repoSlug}
               size={Size.SMALL}
+              src={notification.repository.owner.avatar_url}
               userType={notification.repository.owner.type}
             />
           </Box>
diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx
index 6b2108728..c83c85d88 100644
--- a/src/renderer/components/notifications/NotificationRow.tsx
+++ b/src/renderer/components/notifications/NotificationRow.tsx
@@ -80,7 +80,6 @@ export const NotificationRow: FC<INotificationRow> = ({
 
   return (
     <Box
-      id={notification.id}
       className={cn(
         'group border-b',
         'pl-3 pr-1 py-1.5',
@@ -89,39 +88,40 @@ export const NotificationRow: FC<INotificationRow> = ({
           'translate-x-full opacity-0 transition duration-350 ease-in-out',
         (isRead || showAsRead) && Opacity.READ,
       )}
+      id={notification.id}
     >
       <Stack
-        direction="horizontal"
         align="center"
-        gap="condensed"
         className="relative"
+        direction="horizontal"
+        gap="condensed"
       >
-        <Tooltip text={notificationType} direction="e">
-          <NotificationIcon size={Size.LARGE} className={iconColor} />
+        <Tooltip direction="e" text={notificationType}>
+          <NotificationIcon className={iconColor} size={Size.LARGE} />
         </Tooltip>
 
         <Stack
-          direction="vertical"
-          gap="none"
           className={cn(
             'cursor-pointer text-sm w-full',
             !settings.wrapNotificationTitle && 'truncate',
           )}
+          direction="vertical"
+          gap="none"
           onClick={() => handleNotification()}
         >
           <NotificationHeader notification={notification} />
 
           <Stack
-            direction="horizontal"
             align="start"
-            justify="space-between"
-            gap="condensed"
-            title={notificationTitle}
             className={cn(
               'mb-0.5',
               !settings.wrapNotificationTitle && 'truncate',
             )}
             data-testid="notification-row"
+            direction="horizontal"
+            gap="condensed"
+            justify="space-between"
+            title={notificationTitle}
           >
             <Text className={!settings.wrapNotificationTitle && 'truncate'}>
               {notification.subject.title}
@@ -143,25 +143,25 @@ export const NotificationRow: FC<INotificationRow> = ({
         {!animateExit && (
           <HoverGroup bgColor="group-hover:bg-gitify-notification-hover">
             <HoverButton
-              label="Mark as done"
-              icon={CheckIcon}
+              action={actionMarkAsDone}
               enabled={isMarkAsDoneFeatureSupported(notification.account)}
+              icon={CheckIcon}
+              label="Mark as done"
               testid="notification-mark-as-done"
-              action={actionMarkAsDone}
             />
 
             <HoverButton
-              label="Mark as read"
+              action={actionMarkAsRead}
               icon={ReadIcon}
+              label="Mark as read"
               testid="notification-mark-as-read"
-              action={actionMarkAsRead}
             />
 
             <HoverButton
-              label="Unsubscribe from thread"
+              action={actionUnsubscribeFromThread}
               icon={BellSlashIcon}
+              label="Unsubscribe from thread"
               testid="notification-unsubscribe-from-thread"
-              action={actionUnsubscribeFromThread}
             />
           </HoverGroup>
         )}
diff --git a/src/renderer/components/notifications/RepositoryNotifications.tsx b/src/renderer/components/notifications/RepositoryNotifications.tsx
index 2d7e5c488..9753a7e6b 100644
--- a/src/renderer/components/notifications/RepositoryNotifications.tsx
+++ b/src/renderer/components/notifications/RepositoryNotifications.tsx
@@ -68,28 +68,28 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
         onClick={actionToggleRepositoryNotifications}
       >
         <Stack
-          direction="horizontal"
           align="center"
-          gap="condensed"
           className="relative"
+          direction="horizontal"
+          gap="condensed"
         >
           <Button
-            title="Open repository"
-            variant="invisible"
             alignContent="center"
             count={repoNotifications.length}
+            data-testid="open-repository"
             onClick={(event: MouseEvent<HTMLElement>) => {
               // Don't trigger onClick of parent element.
               event.stopPropagation();
               openRepository(repoNotifications[0].repository);
             }}
-            data-testid="open-repository"
+            title="Open repository"
+            variant="invisible"
           >
             <AvatarWithFallback
-              src={avatarUrl}
               alt={repoName}
               name={repoName}
               size={Size.LARGE}
+              src={avatarUrl}
               userType={repoNotifications[0].repository.owner.type}
             />
           </Button>
@@ -97,27 +97,27 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           {!animateExit && (
             <HoverGroup bgColor="group-hover:bg-gitify-repository">
               <HoverButton
-                label="Mark repository as done"
-                icon={CheckIcon}
+                action={actionMarkAsDone}
                 enabled={isMarkAsDoneFeatureSupported(
                   repoNotifications[0].account,
                 )}
+                icon={CheckIcon}
+                label="Mark repository as done"
                 testid="repository-mark-as-done"
-                action={actionMarkAsDone}
               />
 
               <HoverButton
-                label="Mark repository as read"
+                action={actionMarkAsRead}
                 icon={ReadIcon}
+                label="Mark repository as read"
                 testid="repository-mark-as-read"
-                action={actionMarkAsRead}
               />
 
               <HoverButton
-                label={Chevron.label}
+                action={actionToggleRepositoryNotifications}
                 icon={Chevron.icon}
+                label={Chevron.label}
                 testid="repository-toggle"
-                action={actionToggleRepositoryNotifications}
               />
             </HoverGroup>
           )}
@@ -127,10 +127,10 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
       {showRepositoryNotifications &&
         repoNotifications.map((notification) => (
           <NotificationRow
-            key={notification.id}
-            notification={notification}
             isAnimated={animateExit}
             isRead={showAsRead}
+            key={notification.id}
+            notification={notification}
           />
         ))}
     </>
diff --git a/src/renderer/components/primitives/EmojiText.tsx b/src/renderer/components/primitives/EmojiText.tsx
index 46bee61c5..0731d8c87 100644
--- a/src/renderer/components/primitives/EmojiText.tsx
+++ b/src/renderer/components/primitives/EmojiText.tsx
@@ -17,5 +17,5 @@ export const EmojiText: FC<IEmojiText> = ({ text }) => {
     }
   }, [text]);
 
-  return <Box ref={ref} className="text-5xl" />;
+  return <Box className="text-5xl" ref={ref} />;
 };
diff --git a/src/renderer/components/primitives/Header.tsx b/src/renderer/components/primitives/Header.tsx
index 1d72ffb42..eeba64059 100644
--- a/src/renderer/components/primitives/Header.tsx
+++ b/src/renderer/components/primitives/Header.tsx
@@ -23,8 +23,7 @@ export const Header: FC<IHeader> = (props: IHeader) => {
       <Stack direction="horizontal" justify="space-between">
         <IconButton
           aria-labelledby="Go Back"
-          variant="invisible"
-          tooltipDirection="e"
+          data-testid="header-nav-back"
           icon={ArrowLeftIcon}
           onClick={() => {
             navigate(-1);
@@ -32,7 +31,8 @@ export const Header: FC<IHeader> = (props: IHeader) => {
               fetchNotifications();
             }
           }}
-          data-testid="header-nav-back"
+          tooltipDirection="e"
+          variant="invisible"
         />
 
         <Title icon={props.icon} size={3}>
diff --git a/src/renderer/components/primitives/HoverButton.test.tsx b/src/renderer/components/primitives/HoverButton.test.tsx
index b79e0eeac..adc447273 100644
--- a/src/renderer/components/primitives/HoverButton.test.tsx
+++ b/src/renderer/components/primitives/HoverButton.test.tsx
@@ -10,10 +10,10 @@ describe('renderer/components/primitives/HoverButton.tsx', () => {
 
     const tree = render(
       <HoverButton
-        label="Hover Button"
+        action={mockAction}
         icon={MarkGithubIcon}
+        label="Hover Button"
         testid="hover-button"
-        action={mockAction}
       />,
     );
     expect(tree).toMatchSnapshot();
@@ -24,11 +24,11 @@ describe('renderer/components/primitives/HoverButton.tsx', () => {
 
     const tree = render(
       <HoverButton
-        label="Hover Button"
+        action={mockAction}
+        enabled={false}
         icon={MarkGithubIcon}
+        label="Hover Button"
         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
index 1e77dd88d..bc74676a9 100644
--- a/src/renderer/components/primitives/HoverButton.tsx
+++ b/src/renderer/components/primitives/HoverButton.tsx
@@ -19,16 +19,16 @@ export const HoverButton: FC<IHoverButton> = ({
     enabled && (
       <IconButton
         aria-label={props.label}
-        unsafeDisableTooltip={true}
-        title={props.label}
+        data-testid={props.testid}
         icon={props.icon}
-        size="small"
-        variant="invisible"
         onClick={(event) => {
           event.stopPropagation();
           props.action();
         }}
-        data-testid={props.testid}
+        size="small"
+        title={props.label}
+        unsafeDisableTooltip={true}
+        variant="invisible"
       />
     )
   );
diff --git a/src/renderer/components/primitives/HoverGroup.tsx b/src/renderer/components/primitives/HoverGroup.tsx
index 8197e3af5..0c17157a0 100644
--- a/src/renderer/components/primitives/HoverGroup.tsx
+++ b/src/renderer/components/primitives/HoverGroup.tsx
@@ -18,14 +18,14 @@ export const HoverGroup: FC<IHoverGroup> = ({
 }: IHoverGroup) => {
   return (
     <Stack
-      direction="horizontal"
       align="center"
-      gap="none"
       className={cn(
         'absolute right-0 h-full',
         'opacity-0 transition-opacity group-hover:opacity-100',
         bgColor,
       )}
+      direction="horizontal"
+      gap="none"
     >
       {children}
     </Stack>
diff --git a/src/renderer/components/primitives/Title.tsx b/src/renderer/components/primitives/Title.tsx
index acaa79686..b55fba6b8 100644
--- a/src/renderer/components/primitives/Title.tsx
+++ b/src/renderer/components/primitives/Title.tsx
@@ -14,8 +14,8 @@ export const Title: FC<ITitle> = ({ size = 2, ...props }) => {
     <legend>
       <Box className="mb-2">
         <Stack
-          direction="horizontal"
           align="center"
+          direction="horizontal"
           gap="condensed"
           id={props.children.toLowerCase().replace(' ', '-')}
         >
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index 6dbf75c70..1566d980b 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -51,19 +51,19 @@ export const AppearanceSettings: FC = () => {
 
       <Stack direction="vertical" gap="condensed">
         <Stack
-          direction="horizontal"
-          gap="condensed"
           align="center"
           className="text-sm"
+          direction="horizontal"
+          gap="condensed"
         >
-          <FieldLabel name="theme" label="Theme:" />
+          <FieldLabel label="Theme:" name="theme" />
           <Select
+            data-testid="settings-theme"
             id="theme"
-            value={settings.theme}
             onChange={(evt) =>
               updateSetting('theme', evt.target.value as Theme)
             }
-            data-testid="settings-theme"
+            value={settings.theme}
           >
             <Select.OptGroup label="System">
               <Select.Option value={Theme.SYSTEM}>System</Select.Option>
@@ -91,9 +91,9 @@ export const AppearanceSettings: FC = () => {
         </Stack>
 
         <Checkbox
-          name="increaseContrast"
-          label="Increase contrast"
           checked={settings.increaseContrast}
+          label="Increase contrast"
+          name="increaseContrast"
           onChange={(evt) =>
             updateSetting('increaseContrast', evt.target.checked)
           }
@@ -101,72 +101,72 @@ export const AppearanceSettings: FC = () => {
         />
 
         <Stack
-          direction="horizontal"
-          gap="condensed"
           align="center"
           className="text-sm"
+          direction="horizontal"
+          gap="condensed"
         >
-          <FieldLabel name="zoom" label="Zoom:" />
+          <FieldLabel label="Zoom:" name="zoom" />
 
           <ButtonGroup className="ml-2">
             <IconButton
               aria-label="Zoom out"
-              size="small"
+              data-testid="settings-zoom-out"
               icon={ZoomOutIcon}
-              unsafeDisableTooltip={true}
               onClick={() =>
                 zoomPercentage > 0 &&
                 webFrame.setZoomLevel(
                   zoomPercentageToLevel(zoomPercentage - 10),
                 )
               }
-              data-testid="settings-zoom-out"
+              size="small"
+              unsafeDisableTooltip={true}
             />
 
-            <Button aria-label="Zoom percentage" size="small" disabled>
+            <Button aria-label="Zoom percentage" disabled size="small">
               {zoomPercentage.toFixed(0)}%
             </Button>
 
             <IconButton
               aria-label="Zoom in"
-              size="small"
+              data-testid="settings-zoom-in"
               icon={ZoomInIcon}
-              unsafeDisableTooltip={true}
               onClick={() =>
                 zoomPercentage < 120 &&
                 webFrame.setZoomLevel(
                   zoomPercentageToLevel(zoomPercentage + 10),
                 )
               }
-              data-testid="settings-zoom-in"
+              size="small"
+              unsafeDisableTooltip={true}
             />
 
             <IconButton
               aria-label="Reset zoom"
-              size="small"
-              variant="danger"
+              data-testid="settings-zoom-reset"
               icon={SyncIcon}
-              unsafeDisableTooltip={true}
               onClick={() => webFrame.setZoomLevel(0)}
-              data-testid="settings-zoom-reset"
+              size="small"
+              unsafeDisableTooltip={true}
+              variant="danger"
             />
           </ButtonGroup>
         </Stack>
 
         <Checkbox
-          name="showAccountHeader"
-          label="Show account header"
           checked={settings.showAccountHeader}
-          visible={!hasMultipleAccounts(auth)}
+          label="Show account header"
+          name="showAccountHeader"
           onChange={(evt) =>
             updateSetting('showAccountHeader', evt.target.checked)
           }
+          visible={!hasMultipleAccounts(auth)}
         />
 
         <Checkbox
-          name="wrapNotificationTitle"
-          label="Show full notification title"
           checked={settings.wrapNotificationTitle}
+          label="Show full notification title"
+          name="wrapNotificationTitle"
           onChange={(evt) =>
             updateSetting('wrapNotificationTitle', evt.target.checked)
           }
diff --git a/src/renderer/components/settings/NotificationSettings.tsx b/src/renderer/components/settings/NotificationSettings.tsx
index 78aaae595..bc21c2b15 100644
--- a/src/renderer/components/settings/NotificationSettings.tsx
+++ b/src/renderer/components/settings/NotificationSettings.tsx
@@ -12,6 +12,7 @@ import {
 import { Box, Stack, Text } from '@primer/react';
 
 import { APPLICATION } from '../../../shared/constants';
+
 import { AppContext } from '../../context/App';
 import { GroupBy, Size } from '../../types';
 import { openGitHubParticipatingDocs } from '../../utils/links';
@@ -28,22 +29,22 @@ export const NotificationSettings: FC = () => {
 
       <Stack direction="vertical" gap="condensed">
         <RadioGroup
-          name="groupBy"
           label="Group by:"
-          value={settings.groupBy}
+          name="groupBy"
+          onChange={(evt) => {
+            updateSetting('groupBy', evt.target.value as GroupBy);
+          }}
           options={[
             { label: 'Repository', value: GroupBy.REPOSITORY },
             { label: 'Date', value: GroupBy.DATE },
           ]}
-          onChange={(evt) => {
-            updateSetting('groupBy', evt.target.value as GroupBy);
-          }}
+          value={settings.groupBy}
         />
 
         <Checkbox
-          name="fetchAllNotifications"
-          label="Fetch all notifications"
           checked={settings.fetchAllNotifications}
+          label="Fetch all notifications"
+          name="fetchAllNotifications"
           onChange={(evt) =>
             updateSetting('fetchAllNotifications', evt.target.checked)
           }
@@ -63,9 +64,9 @@ export const NotificationSettings: FC = () => {
         />
 
         <Checkbox
-          name="detailedNotifications"
-          label="Fetch detailed notifications"
           checked={settings.detailedNotifications}
+          label="Fetch detailed notifications"
+          name="detailedNotifications"
           onChange={(evt) =>
             updateSetting('detailedNotifications', evt.target.checked)
           }
@@ -94,9 +95,9 @@ export const NotificationSettings: FC = () => {
         <Box className="pl-6" hidden={!settings.detailedNotifications}>
           <Stack direction="vertical" gap="condensed">
             <Checkbox
-              name="showPills"
-              label="Show notification metric pills"
               checked={settings.showPills}
+              label="Show notification metric pills"
+              name="showPills"
               onChange={(evt) => updateSetting('showPills', evt.target.checked)}
               tooltip={
                 <Stack direction="vertical" gap="condensed">
@@ -130,9 +131,9 @@ export const NotificationSettings: FC = () => {
             />
 
             <Checkbox
-              name="showNumber"
-              label="Show GitHub number"
               checked={settings.showNumber}
+              label="Show GitHub number"
+              name="showNumber"
               onChange={(evt) =>
                 updateSetting('showNumber', evt.target.checked)
               }
@@ -168,9 +169,9 @@ export const NotificationSettings: FC = () => {
         </Box>
 
         <Checkbox
-          name="showOnlyParticipating"
-          label="Fetch only participating"
           checked={settings.participating}
+          label="Fetch only participating"
+          name="showOnlyParticipating"
           onChange={(evt) => updateSetting('participating', evt.target.checked)}
           tooltip={
             <Stack direction="vertical" gap="condensed">
@@ -186,12 +187,12 @@ export const NotificationSettings: FC = () => {
                 See{' '}
                 <Box
                   className="text-gitify-link cursor-pointer"
-                  title="Open GitHub documentation for participating and watching notifications"
                   onClick={(event: MouseEvent<HTMLElement>) => {
                     // Don't trigger onClick of parent element.
                     event.stopPropagation();
                     openGitHubParticipatingDocs();
                   }}
+                  title="Open GitHub documentation for participating and watching notifications"
                 >
                   official docs
                 </Box>{' '}
@@ -202,9 +203,9 @@ export const NotificationSettings: FC = () => {
         />
 
         <Checkbox
-          name="markAsDoneOnOpen"
-          label="Mark as done on open"
           checked={settings.markAsDoneOnOpen}
+          label="Mark as done on open"
+          name="markAsDoneOnOpen"
           onChange={(evt) =>
             updateSetting('markAsDoneOnOpen', evt.target.checked)
           }
@@ -217,9 +218,9 @@ export const NotificationSettings: FC = () => {
         />
 
         <Checkbox
-          name="markAsDoneOnUnsubscribe"
-          label="Mark as done on unsubscribe"
           checked={settings.markAsDoneOnUnsubscribe}
+          label="Mark as done on unsubscribe"
+          name="markAsDoneOnUnsubscribe"
           onChange={(evt) =>
             updateSetting('markAsDoneOnUnsubscribe', evt.target.checked)
           }
@@ -232,9 +233,9 @@ export const NotificationSettings: FC = () => {
         />
 
         <Checkbox
-          name="delayNotificationState"
-          label="Delay notification state"
           checked={settings.delayNotificationState}
+          label="Delay notification state"
+          name="delayNotificationState"
           onChange={(evt) =>
             updateSetting('delayNotificationState', evt.target.checked)
           }
diff --git a/src/renderer/components/settings/SettingsFooter.tsx b/src/renderer/components/settings/SettingsFooter.tsx
index 4b8016dc6..3994deb94 100644
--- a/src/renderer/components/settings/SettingsFooter.tsx
+++ b/src/renderer/components/settings/SettingsFooter.tsx
@@ -5,6 +5,7 @@ import { PersonIcon, XCircleIcon } from '@primer/octicons-react';
 import { Button, IconButton, Stack, Tooltip } from '@primer/react';
 
 import { APPLICATION } from '../../../shared/constants';
+
 import { getAppVersion, quitApp } from '../../utils/comms';
 import { openGitifyReleaseNotes } from '../../utils/links';
 import { Footer } from '../primitives/Footer';
@@ -27,36 +28,36 @@ export const SettingsFooter: FC = () => {
   return (
     <Footer justify="space-between">
       <Stack direction="horizontal">
-        <Tooltip text="View release notes" direction="n">
+        <Tooltip direction="n" text="View release notes">
           <Button
-            onClick={() => openGitifyReleaseNotes(appVersion)}
             data-testid="settings-release-notes"
+            onClick={() => openGitifyReleaseNotes(appVersion)}
           >
             {APPLICATION.NAME} {appVersion}
           </Button>
         </Tooltip>
       </Stack>
       <Stack direction="horizontal" gap="normal">
-        <Tooltip text="Accounts" direction="n">
+        <Tooltip direction="n" text="Accounts">
           <IconButton
             aria-label="Accounts"
+            data-testid="settings-accounts"
             icon={PersonIcon}
             onClick={() => {
               navigate('/accounts');
             }}
-            data-testid="settings-accounts"
           />
         </Tooltip>
 
-        <Tooltip text={`Quit ${APPLICATION.NAME}`} direction="nw">
+        <Tooltip direction="nw" text={`Quit ${APPLICATION.NAME}`}>
           <IconButton
             aria-label={`Quit ${APPLICATION.NAME}`}
-            variant="danger"
+            data-testid="settings-quit"
             icon={XCircleIcon}
             onClick={() => {
               quitApp();
             }}
-            data-testid="settings-quit"
+            variant="danger"
           />
         </Tooltip>
       </Stack>
diff --git a/src/renderer/components/settings/SettingsReset.tsx b/src/renderer/components/settings/SettingsReset.tsx
index 35b969dce..0e7cf39a9 100644
--- a/src/renderer/components/settings/SettingsReset.tsx
+++ b/src/renderer/components/settings/SettingsReset.tsx
@@ -17,18 +17,16 @@ export const SettingsReset: FC = () => {
   return (
     <Stack align="center">
       <Button
-        variant="danger"
-        onClick={() => setIsOpen(!isOpen)}
         data-testid="settings-reset"
+        onClick={() => setIsOpen(!isOpen)}
         sx={{ width: '200px' }}
+        variant="danger"
       >
         Reset Settings
       </Button>
       {isOpen && (
         <Dialog
-          title="Reset Settings"
-          width="large"
-          onClose={onDialogClose}
+          data-testid="reset-dialog"
           footerButtons={[
             {
               buttonType: 'default',
@@ -41,7 +39,9 @@ export const SettingsReset: FC = () => {
               onClick: onDialogProceed,
             },
           ]}
-          data-testid="reset-dialog"
+          onClose={onDialogClose}
+          title="Reset Settings"
+          width="large"
         >
           Please confirm that you want to reset all settings to the{' '}
           <Text as="strong">Gitify defaults</Text>
diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx
index 8d53a7025..a69c337b0 100644
--- a/src/renderer/components/settings/SystemSettings.tsx
+++ b/src/renderer/components/settings/SystemSettings.tsx
@@ -12,6 +12,7 @@ import {
 
 import { APPLICATION } from '../../../shared/constants';
 import { isLinux, isMacOS } from '../../../shared/platform';
+
 import { AppContext } from '../../context/App';
 import { defaultSettings } from '../../context/defaults';
 import { OpenPreference } from '../../types';
@@ -31,22 +32,22 @@ export const SystemSettings: FC = () => {
 
       <Stack direction="vertical" gap="condensed">
         <RadioGroup
-          name="openLinks"
           label="Open Links:"
-          value={settings.openLinks}
+          name="openLinks"
+          onChange={(evt) => {
+            updateSetting('openLinks', evt.target.value as OpenPreference);
+          }}
           options={[
             { label: 'Foreground', value: OpenPreference.FOREGROUND },
             { label: 'Background', value: OpenPreference.BACKGROUND },
           ]}
-          onChange={(evt) => {
-            updateSetting('openLinks', evt.target.value as OpenPreference);
-          }}
+          value={settings.openLinks}
         />
 
         <Checkbox
-          name="keyboardShortcut"
-          label="Enable keyboard shortcut"
           checked={settings.keyboardShortcut}
+          label="Enable keyboard shortcut"
+          name="keyboardShortcut"
           onChange={(evt) =>
             updateSetting('keyboardShortcut', evt.target.checked)
           }
@@ -62,19 +63,19 @@ export const SystemSettings: FC = () => {
         />
 
         <Checkbox
-          name="showNotificationsCountInTray"
-          label="Show notification count in tray"
           checked={settings.showNotificationsCountInTray}
-          visible={isMacOS()}
+          label="Show notification count in tray"
+          name="showNotificationsCountInTray"
           onChange={(evt) =>
             updateSetting('showNotificationsCountInTray', evt.target.checked)
           }
+          visible={isMacOS()}
         />
 
         <Checkbox
-          name="showNotifications"
-          label="Show system notifications"
           checked={settings.showNotifications}
+          label="Show system notifications"
+          name="showNotifications"
           onChange={(evt) =>
             updateSetting('showNotifications', evt.target.checked)
           }
@@ -82,28 +83,27 @@ export const SystemSettings: FC = () => {
 
         <Box>
           <Stack
-            direction="horizontal"
-            gap="condensed"
             align="center"
             className="text-sm"
+            direction="horizontal"
+            gap="condensed"
           >
             <Checkbox
-              name="playSound"
-              label="Play sound"
               checked={settings.playSound}
+              label="Play sound"
+              name="playSound"
               onChange={(evt) => updateSetting('playSound', evt.target.checked)}
             />
 
             <ButtonGroup
               className="ml-2"
-              hidden={!settings.playSound}
               data-testid="settings-volume-group"
+              hidden={!settings.playSound}
             >
               <IconButton
                 aria-label="Volume down"
-                size="small"
+                data-testid="settings-volume-down"
                 icon={VolumeDownIcon}
-                unsafeDisableTooltip={true}
                 onClick={() => {
                   const newVolume = Math.max(
                     settings.notificationVolume - 10,
@@ -111,18 +111,18 @@ export const SystemSettings: FC = () => {
                   );
                   updateSetting('notificationVolume', newVolume);
                 }}
-                data-testid="settings-volume-down"
+                size="small"
+                unsafeDisableTooltip={true}
               />
 
-              <Button aria-label="Volume percentage" size="small" disabled>
+              <Button aria-label="Volume percentage" disabled size="small">
                 {settings.notificationVolume.toFixed(0)}%
               </Button>
 
               <IconButton
                 aria-label="Volume up"
-                size="small"
+                data-testid="settings-volume-up"
                 icon={VolumeUpIcon}
-                unsafeDisableTooltip={true}
                 onClick={() => {
                   const newVolume = Math.min(
                     settings.notificationVolume + 10,
@@ -130,31 +130,32 @@ export const SystemSettings: FC = () => {
                   );
                   updateSetting('notificationVolume', newVolume);
                 }}
-                data-testid="settings-volume-up"
+                size="small"
+                unsafeDisableTooltip={true}
               />
 
               <IconButton
                 aria-label="Reset volume"
-                size="small"
-                variant="danger"
+                data-testid="settings-volume-reset"
                 icon={SyncIcon}
-                unsafeDisableTooltip={true}
                 onClick={() => {
                   updateSetting(
                     'notificationVolume',
                     defaultSettings.notificationVolume,
                   );
                 }}
-                data-testid="settings-volume-reset"
+                size="small"
+                unsafeDisableTooltip={true}
+                variant="danger"
               />
             </ButtonGroup>
           </Stack>
         </Box>
 
         <Checkbox
-          name="useAlternateIdleIcon"
-          label="Use alternate idle icon"
           checked={settings.useAlternateIdleIcon}
+          label="Use alternate idle icon"
+          name="useAlternateIdleIcon"
           onChange={(evt) =>
             updateSetting('useAlternateIdleIcon', evt.target.checked)
           }
@@ -173,11 +174,11 @@ export const SystemSettings: FC = () => {
         />
 
         <Checkbox
-          name="openAtStartup"
-          label="Open at startup"
           checked={settings.openAtStartup}
-          visible={!isLinux()}
+          label="Open at startup"
+          name="openAtStartup"
           onChange={(evt) => updateSetting('openAtStartup', evt.target.checked)}
+          visible={!isLinux()}
         />
       </Stack>
     </fieldset>
diff --git a/src/renderer/context/App.test.tsx b/src/renderer/context/App.test.tsx
index bca9dd94b..b04c78297 100644
--- a/src/renderer/context/App.test.tsx
+++ b/src/renderer/context/App.test.tsx
@@ -100,7 +100,7 @@ describe('renderer/context/App.tsx', () => {
         const { fetchNotifications } = useContext(AppContext);
 
         return (
-          <button type="button" onClick={fetchNotifications}>
+          <button onClick={fetchNotifications} type="button">
             Test Case
           </button>
         );
@@ -121,8 +121,8 @@ describe('renderer/context/App.tsx', () => {
 
         return (
           <button
-            type="button"
             onClick={() => markNotificationsAsRead([mockSingleNotification])}
+            type="button"
           >
             Test Case
           </button>
@@ -146,8 +146,8 @@ describe('renderer/context/App.tsx', () => {
 
         return (
           <button
-            type="button"
             onClick={() => markNotificationsAsDone([mockSingleNotification])}
+            type="button"
           >
             Test Case
           </button>
@@ -171,8 +171,8 @@ describe('renderer/context/App.tsx', () => {
 
         return (
           <button
-            type="button"
             onClick={() => unsubscribeNotification(mockSingleNotification)}
+            type="button"
           >
             Test Case
           </button>
@@ -209,13 +209,13 @@ describe('renderer/context/App.tsx', () => {
 
         return (
           <button
-            type="button"
             onClick={() =>
               loginWithPersonalAccessToken({
                 hostname: 'github.com' as Hostname,
                 token: '123-456' as Token,
               })
             }
+            type="button"
           >
             Test Case
           </button>
@@ -263,8 +263,8 @@ describe('renderer/context/App.tsx', () => {
 
         return (
           <button
-            type="button"
             onClick={() => updateSetting('participating', true)}
+            type="button"
           >
             Test Case
           </button>
@@ -299,8 +299,8 @@ describe('renderer/context/App.tsx', () => {
 
         return (
           <button
-            type="button"
             onClick={() => updateSetting('openAtStartup', true)}
+            type="button"
           >
             Test Case
           </button>
@@ -335,7 +335,7 @@ describe('renderer/context/App.tsx', () => {
         const { clearFilters } = useContext(AppContext);
 
         return (
-          <button type="button" onClick={() => clearFilters()}>
+          <button onClick={() => clearFilters()} type="button">
             Test Case
           </button>
         );
@@ -370,7 +370,7 @@ describe('renderer/context/App.tsx', () => {
         const { resetSettings } = useContext(AppContext);
 
         return (
-          <button type="button" onClick={() => resetSettings()}>
+          <button onClick={() => resetSettings()} type="button">
             Test Case
           </button>
         );
diff --git a/src/renderer/context/App.tsx b/src/renderer/context/App.tsx
index fe51084a6..3049a418c 100644
--- a/src/renderer/context/App.tsx
+++ b/src/renderer/context/App.tsx
@@ -12,6 +12,7 @@ import { ipcRenderer, webFrame } from 'electron';
 import { useTheme } from '@primer/react';
 
 import { namespacedEvent } from '../../shared/events';
+
 import { useInterval } from '../hooks/useInterval';
 import { useNotifications } from '../hooks/useNotifications';
 import type {
diff --git a/src/renderer/hooks/useNotifications.test.ts b/src/renderer/hooks/useNotifications.test.ts
index 9f5196bf2..c1c93e0fb 100644
--- a/src/renderer/hooks/useNotifications.test.ts
+++ b/src/renderer/hooks/useNotifications.test.ts
@@ -4,6 +4,7 @@ import axios, { AxiosError } from 'axios';
 import nock from 'nock';
 
 import * as logger from '../../shared/logger';
+
 import {
   mockAuth,
   mockGitHubCloudAccount,
diff --git a/src/renderer/hooks/useNotifications.ts b/src/renderer/hooks/useNotifications.ts
index b5b8cdf6b..b6dd044b6 100644
--- a/src/renderer/hooks/useNotifications.ts
+++ b/src/renderer/hooks/useNotifications.ts
@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 
 import { logError } from '../../shared/logger';
+
 import type {
   Account,
   AccountNotifications,
diff --git a/src/renderer/routes/Accounts.tsx b/src/renderer/routes/Accounts.tsx
index e6c28c7ac..6c7892a64 100644
--- a/src/renderer/routes/Accounts.tsx
+++ b/src/renderer/routes/Accounts.tsx
@@ -23,6 +23,7 @@ import {
 } from '@primer/react';
 
 import { logError } from '../../shared/logger';
+
 import { AvatarWithFallback } from '../components/avatars/AvatarWithFallback';
 import { Contents } from '../components/layout/Contents';
 import { Page } from '../components/layout/Page';
@@ -121,37 +122,37 @@ export const AccountsRoute: FC = () => {
 
           return (
             <Box
-              key={accountUUID}
               className="rounded-md p-2 mb-4 bg-gitify-accounts"
+              key={accountUUID}
             >
-              <Stack direction="vertical" align="stretch">
-                <Stack direction="horizontal" align="start">
+              <Stack align="stretch" direction="vertical">
+                <Stack align="start" direction="horizontal">
                   <Button
-                    title="Open account profile"
-                    onClick={() => openAccountProfile(account)}
                     data-testid="account-profile"
+                    onClick={() => openAccountProfile(account)}
+                    title="Open account profile"
                   >
                     <AvatarWithFallback
-                      src={account.user.avatar}
                       alt={account.user.login}
                       name={`@${account.user.login}`}
                       size={Size.XLARGE}
+                      src={account.user.avatar}
                     />
                   </Button>
                 </Stack>
 
                 <Stack
+                  align="start"
                   direction="horizontal"
                   justify="space-between"
-                  align="start"
                 >
                   <Box className="pl-4 pb-2 text-xs">
                     <Stack direction="vertical" gap="condensed">
                       <Box hidden={!account.user.name}>
                         <Stack
+                          align="center"
                           direction="horizontal"
                           gap="condensed"
-                          align="center"
                         >
                           <PersonIcon />
                           <Text>{account.user?.name}</Text>
@@ -159,15 +160,15 @@ export const AccountsRoute: FC = () => {
                       </Box>
 
                       <Box
-                        title="Open host"
-                        onClick={() => openHost(account.hostname)}
                         className="cursor-pointer"
                         data-testid="account-host"
+                        onClick={() => openHost(account.hostname)}
+                        title="Open host"
                       >
                         <Stack
+                          align="center"
                           direction="horizontal"
                           gap="condensed"
-                          align="center"
                         >
                           <PlatformIcon />
                           <Text>{account.hostname}</Text>
@@ -175,15 +176,15 @@ export const AccountsRoute: FC = () => {
                       </Box>
 
                       <Box
-                        title="Open developer settings"
-                        onClick={() => openDeveloperSettings(account)}
                         className="cursor-pointer"
                         data-testid="account-developer-settings"
+                        onClick={() => openDeveloperSettings(account)}
+                        title="Open developer settings"
                       >
                         <Stack
+                          align="center"
                           direction="horizontal"
                           gap="condensed"
-                          align="center"
                         >
                           <AuthMethodIcon />
                           <Text>{account.method}</Text>
@@ -194,44 +195,44 @@ export const AccountsRoute: FC = () => {
 
                   <Stack direction="horizontal" gap="condensed">
                     <IconButton
-                      icon={AlertFillIcon}
                       aria-label={`This account is missing one or more required scopes: [${formatRecommendedOAuthScopes()}] or [${formatAlternateOAuthScopes()}]`}
-                      style={{ color: 'orange' }}
-                      onClick={() => openDeveloperSettings(account)}
-                      size="small"
-                      data-testid="account-missing-scopes"
                       className={
                         account.hasRequiredScopes ? 'invisible' : 'visible'
                       }
+                      data-testid="account-missing-scopes"
+                      icon={AlertFillIcon}
+                      onClick={() => openDeveloperSettings(account)}
+                      size="small"
+                      style={{ color: 'orange' }}
                     />
 
                     <IconButton
-                      icon={i === 0 ? StarFillIcon : StarIcon}
                       aria-label={
                         i === 0 ? 'Primary account' : 'Set as primary account'
                       }
-                      variant={i === 0 ? 'primary' : 'default'}
+                      data-testid="account-set-primary"
+                      icon={i === 0 ? StarFillIcon : StarIcon}
                       onClick={() => setAsPrimaryAccount(account)}
                       size="small"
-                      data-testid="account-set-primary"
+                      variant={i === 0 ? 'primary' : 'default'}
                     />
 
                     <IconButton
-                      icon={SyncIcon}
                       aria-label={`Refresh ${account.user.login}`}
+                      data-testid="account-refresh"
+                      icon={SyncIcon}
+                      loading={loadingStates[accountUUID] || false}
                       onClick={() => handleRefresh(account)}
                       size="small"
-                      loading={loadingStates[accountUUID] || false}
-                      data-testid="account-refresh"
                     />
 
                     <IconButton
-                      icon={SignOutIcon}
                       aria-label={`Logout ${account.user.login}`}
-                      variant="danger"
+                      data-testid="account-logout"
+                      icon={SignOutIcon}
                       onClick={() => logoutAccount(account)}
                       size="small"
-                      data-testid="account-logout"
+                      variant="danger"
                     />
                   </Stack>
                 </Stack>
@@ -244,7 +245,7 @@ export const AccountsRoute: FC = () => {
       <Footer justify="end">
         <ActionMenu>
           <ActionMenu.Anchor>
-            <Button leadingVisual={PersonAddIcon} data-testid="account-add-new">
+            <Button data-testid="account-add-new" leadingVisual={PersonAddIcon}>
               Add new account
             </Button>
           </ActionMenu.Anchor>
@@ -252,8 +253,8 @@ export const AccountsRoute: FC = () => {
           <ActionMenu.Overlay width="medium">
             <ActionList>
               <ActionList.Item
-                onSelect={() => loginWithGitHub()}
                 data-testid="account-add-github"
+                onSelect={() => loginWithGitHub()}
               >
                 <ActionList.LeadingVisual>
                   <MarkGithubIcon />
@@ -262,8 +263,8 @@ export const AccountsRoute: FC = () => {
               </ActionList.Item>
 
               <ActionList.Item
-                onSelect={() => loginWithPersonalAccessToken()}
                 data-testid="account-add-pat"
+                onSelect={() => loginWithPersonalAccessToken()}
               >
                 <ActionList.LeadingVisual>
                   <KeyIcon />
@@ -272,8 +273,8 @@ export const AccountsRoute: FC = () => {
               </ActionList.Item>
 
               <ActionList.Item
-                onSelect={() => loginWithOAuthApp()}
                 data-testid="account-add-oauth-app"
+                onSelect={() => loginWithOAuthApp()}
               >
                 <ActionList.LeadingVisual>
                   <PersonIcon />
diff --git a/src/renderer/routes/Filters.tsx b/src/renderer/routes/Filters.tsx
index ebd7c9658..fff1568e5 100644
--- a/src/renderer/routes/Filters.tsx
+++ b/src/renderer/routes/Filters.tsx
@@ -36,11 +36,11 @@ export const FiltersRoute: FC = () => {
       </Contents>
 
       <Footer justify="end">
-        <Tooltip text="Clear all filters" direction="n">
+        <Tooltip direction="n" text="Clear all filters">
           <Button
+            data-testid="filters-clear"
             leadingVisual={FilterRemoveIcon}
             onClick={clearFilters}
-            data-testid="filters-clear"
           >
             Clear filters
           </Button>
diff --git a/src/renderer/routes/Login.tsx b/src/renderer/routes/Login.tsx
index 536ad389e..675f55fdf 100644
--- a/src/renderer/routes/Login.tsx
+++ b/src/renderer/routes/Login.tsx
@@ -5,6 +5,7 @@ import { KeyIcon, MarkGithubIcon, PersonIcon } from '@primer/octicons-react';
 import { Button, Heading, Stack, Text } from '@primer/react';
 
 import { logError } from '../../shared/logger';
+
 import { LogoIcon } from '../components/icons/LogoIcon';
 import { Centered } from '../components/layout/Centered';
 import { AppContext } from '../context/App';
@@ -32,8 +33,8 @@ export const LoginRoute: FC = () => {
 
   return (
     <Centered fullHeight={true}>
-      <Stack direction="vertical" align="center">
-        <LogoIcon size={Size.LARGE} isDark />
+      <Stack align="center" direction="vertical">
+        <LogoIcon isDark size={Size.LARGE} />
 
         <Stack align="center" gap="none">
           <Heading sx={{ fontSize: 4 }}>GitHub Notifications</Heading>
@@ -44,26 +45,26 @@ export const LoginRoute: FC = () => {
           <Text>Login with</Text>
 
           <Button
+            data-testid="login-github"
             leadingVisual={MarkGithubIcon}
-            variant="primary"
             onClick={() => loginUser()}
-            data-testid="login-github"
+            variant="primary"
           >
             GitHub
           </Button>
 
           <Button
+            data-testid="login-pat"
             leadingVisual={KeyIcon}
             onClick={() => navigate('/login-personal-access-token')}
-            data-testid="login-pat"
           >
             Personal Access Token
           </Button>
 
           <Button
+            data-testid="login-oauth-app"
             leadingVisual={PersonIcon}
             onClick={() => navigate('/login-oauth-app')}
-            data-testid="login-oauth-app"
           >
             OAuth App
           </Button>
diff --git a/src/renderer/routes/LoginWithOAuthApp.tsx b/src/renderer/routes/LoginWithOAuthApp.tsx
index 01db90704..e3a51f8aa 100644
--- a/src/renderer/routes/LoginWithOAuthApp.tsx
+++ b/src/renderer/routes/LoginWithOAuthApp.tsx
@@ -19,6 +19,7 @@ import {
 import { Banner } from '@primer/react/experimental';
 
 import { logError } from '../../shared/logger';
+
 import { Contents } from '../components/layout/Contents';
 import { Page } from '../components/layout/Page';
 import { Footer } from '../components/primitives/Footer';
@@ -135,9 +136,7 @@ export const LoginWithOAuthAppRoute: FC = () => {
       <Contents>
         {hasErrors && (
           <Banner
-            title="Validation errors"
-            variant="critical"
-            hideTitle
+            data-testid="login-errors"
             description={
               <Text color="danger.fg">
                 <Stack direction="vertical" gap="condensed">
@@ -150,7 +149,9 @@ export const LoginWithOAuthAppRoute: FC = () => {
                 </Stack>
               </Text>
             }
-            data-testid="login-errors"
+            hideTitle
+            title="Validation errors"
+            variant="critical"
           />
         )}
         <Stack direction="vertical" gap="normal">
@@ -162,29 +163,29 @@ export const LoginWithOAuthAppRoute: FC = () => {
               </Text>
             </FormControl.Caption>
             <TextInput
+              aria-invalid={errors.hostname ? 'true' : 'false'}
+              block
+              data-testid="login-hostname"
               name="hostname"
-              placeholder="github.com"
-              value={formData.hostname}
               onChange={handleInputChange}
-              aria-invalid={errors.hostname ? 'true' : 'false'}
+              placeholder="github.com"
               sx={{
                 borderColor: errors.hostname
                   ? 'danger.emphasis'
                   : 'border.default',
               }}
-              data-testid="login-hostname"
-              block
+              value={formData.hostname}
             />
           </FormControl>
-          <Stack direction="horizontal" align="center" gap="condensed">
+          <Stack align="center" direction="horizontal" gap="condensed">
             <Button
-              size="small"
-              leadingVisual={PersonIcon}
+              data-testid="login-create-oauth-app"
               disabled={!formData.hostname}
+              leadingVisual={PersonIcon}
               onClick={() =>
                 openExternalLink(getNewOAuthAppURL(formData.hostname))
               }
-              data-testid="login-create-oauth-app"
+              size="small"
             >
               Create new OAuth App
             </Button>
@@ -195,29 +196,29 @@ export const LoginWithOAuthAppRoute: FC = () => {
           <FormControl required>
             <FormControl.Label>Client ID</FormControl.Label>
             <TextInput
+              aria-invalid={errors.clientId ? 'true' : 'false'}
+              block
+              data-testid="login-clientId"
               name="clientId"
-              placeholder="Your generated client id (20 characters)"
-              value={formData.clientId}
               onChange={handleInputChange}
-              aria-invalid={errors.clientId ? 'true' : 'false'}
+              placeholder="Your generated client id (20 characters)"
               sx={{
                 borderColor: errors.clientId
                   ? 'danger.emphasis'
                   : 'border.default',
               }}
-              data-testid="login-clientId"
-              block
+              value={formData.clientId}
             />
           </FormControl>
           <FormControl required>
             <FormControl.Label>Client Secret</FormControl.Label>
             <TextInput
+              aria-invalid={errors.clientSecret ? 'true' : 'false'}
+              block
+              data-testid="login-clientSecret"
               name="clientSecret"
-              type={maskToken ? 'password' : 'text'}
-              placeholder="Your generated client secret (40 characters)"
-              value={formData.clientSecret}
               onChange={handleInputChange}
-              aria-invalid={errors.clientSecret ? 'true' : 'false'}
+              placeholder="Your generated client secret (40 characters)"
               sx={{
                 borderColor: errors.clientSecret
                   ? 'danger.emphasis'
@@ -225,13 +226,13 @@ export const LoginWithOAuthAppRoute: FC = () => {
               }}
               trailingAction={
                 <TextInput.Action
-                  onClick={() => setMaskToken(!maskToken)}
-                  icon={maskToken ? EyeIcon : EyeClosedIcon}
                   aria-label={maskToken ? 'Show token' : 'Hide token'}
+                  icon={maskToken ? EyeIcon : EyeClosedIcon}
+                  onClick={() => setMaskToken(!maskToken)}
                 />
               }
-              data-testid="login-clientSecret"
-              block
+              type={maskToken ? 'password' : 'text'}
+              value={formData.clientSecret}
             />
           </FormControl>
         </Stack>
@@ -240,21 +241,21 @@ export const LoginWithOAuthAppRoute: FC = () => {
       <Footer justify="space-between">
         <Tooltip text="GitHub documentation">
           <Button
-            size="small"
+            data-testid="login-docs"
             leadingVisual={BookIcon}
             onClick={() => openExternalLink(Constants.GITHUB_DOCS.OAUTH_URL)}
-            data-testid="login-docs"
+            size="small"
           >
             Docs
           </Button>
         </Tooltip>
 
         <Button
-          variant="primary"
+          data-testid="login-submit"
           leadingVisual={SignInIcon}
-          onClick={handleSubmit}
           loading={isVerifyingCredentials}
-          data-testid="login-submit"
+          onClick={handleSubmit}
+          variant="primary"
         >
           Login
         </Button>
diff --git a/src/renderer/routes/LoginWithPersonalAccessToken.tsx b/src/renderer/routes/LoginWithPersonalAccessToken.tsx
index b13f4e31f..b7729f1ff 100644
--- a/src/renderer/routes/LoginWithPersonalAccessToken.tsx
+++ b/src/renderer/routes/LoginWithPersonalAccessToken.tsx
@@ -19,6 +19,7 @@ import {
 import { Banner } from '@primer/react/experimental';
 
 import { logError } from '../../shared/logger';
+
 import { Contents } from '../components/layout/Contents';
 import { Page } from '../components/layout/Page';
 import { Footer } from '../components/primitives/Footer';
@@ -131,9 +132,7 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
       <Contents>
         {hasErrors && (
           <Banner
-            title="Form errors"
-            variant="critical"
-            hideTitle
+            data-testid="login-errors"
             description={
               <Text color="danger.fg">
                 <Stack direction="vertical" gap="condensed">
@@ -145,7 +144,9 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
                 </Stack>
               </Text>
             }
-            data-testid="login-errors"
+            hideTitle
+            title="Form errors"
+            variant="critical"
           />
         )}
         <Stack direction="vertical" gap="normal">
@@ -157,31 +158,31 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
               </Text>
             </FormControl.Caption>
             <TextInput
+              aria-invalid={errors.hostname ? 'true' : 'false'}
+              block
+              data-testid="login-hostname"
               name="hostname"
-              placeholder="github.com"
-              value={formData.hostname}
               onChange={handleInputChange}
-              aria-invalid={errors.hostname ? 'true' : 'false'}
+              placeholder="github.com"
               sx={{
                 borderColor: errors.hostname
                   ? 'danger.emphasis'
                   : 'border.default',
               }}
-              data-testid="login-hostname"
-              block
+              value={formData.hostname}
             />
           </FormControl>
 
           <Stack direction="vertical" gap="condensed">
-            <Stack direction="horizontal" align="center" gap="condensed">
+            <Stack align="center" direction="horizontal" gap="condensed">
               <Button
-                size="small"
-                leadingVisual={KeyIcon}
+                data-testid="login-create-token"
                 disabled={!formData.hostname}
+                leadingVisual={KeyIcon}
                 onClick={() =>
                   openExternalLink(getNewTokenURL(formData.hostname))
                 }
-                data-testid="login-create-token"
+                size="small"
               >
                 Generate a PAT
               </Button>
@@ -192,7 +193,7 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
 
             <Text as="i" className="text-xs">
               The{' '}
-              <Tooltip text={formatRecommendedOAuthScopes()} direction="se">
+              <Tooltip direction="se" text={formatRecommendedOAuthScopes()}>
                 <Text as="u">required scopes</Text>
               </Tooltip>{' '}
               will be automatically selected for you.
@@ -202,12 +203,12 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
           <FormControl required>
             <FormControl.Label>Token</FormControl.Label>
             <TextInput
+              aria-invalid={errors.token ? 'true' : 'false'}
+              block
+              data-testid="login-token"
               name="token"
-              type={maskClientSecret ? 'password' : 'text'}
-              placeholder="Your generated token (40 characters)"
-              value={formData.token}
               onChange={handleInputChange}
-              aria-invalid={errors.token ? 'true' : 'false'}
+              placeholder="Your generated token (40 characters)"
               sx={{
                 borderColor: errors.token
                   ? 'danger.emphasis'
@@ -215,36 +216,36 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
               }}
               trailingAction={
                 <TextInput.Action
-                  onClick={() => setMaskClientSecret(!maskClientSecret)}
-                  icon={maskClientSecret ? EyeIcon : EyeClosedIcon}
                   aria-label={maskClientSecret ? 'Show token' : 'Hide token'}
+                  icon={maskClientSecret ? EyeIcon : EyeClosedIcon}
+                  onClick={() => setMaskClientSecret(!maskClientSecret)}
                 />
               }
-              data-testid="login-token"
-              block
+              type={maskClientSecret ? 'password' : 'text'}
+              value={formData.token}
             />
           </FormControl>
         </Stack>
       </Contents>
 
       <Footer justify="space-between">
-        <Tooltip text="GitHub documentation" direction="ne">
+        <Tooltip direction="ne" text="GitHub documentation">
           <Button
-            size="small"
+            data-testid="login-docs"
             leadingVisual={BookIcon}
             onClick={() => openExternalLink(Constants.GITHUB_DOCS.PAT_URL)}
-            data-testid="login-docs"
+            size="small"
           >
             Docs
           </Button>
         </Tooltip>
 
         <Button
-          variant="primary"
+          data-testid="login-submit"
           leadingVisual={SignInIcon}
-          onClick={handleSubmit}
           loading={isVerifyingCredentials}
-          data-testid="login-submit"
+          onClick={handleSubmit}
+          variant="primary"
         >
           Login
         </Button>
diff --git a/src/renderer/routes/Notifications.tsx b/src/renderer/routes/Notifications.tsx
index 7cce6e8cb..7aca46a15 100644
--- a/src/renderer/routes/Notifications.tsx
+++ b/src/renderer/routes/Notifications.tsx
@@ -41,10 +41,10 @@ export const NotificationsRoute: FC = () => {
       <Contents paddingHorizontal={false}>
         {notifications.map((accountNotifications) => (
           <AccountNotifications
-            key={getAccountUUID(accountNotifications.account)}
             account={accountNotifications.account}
-            notifications={accountNotifications.notifications}
             error={accountNotifications.error}
+            key={getAccountUUID(accountNotifications.account)}
+            notifications={accountNotifications.notifications}
             showAccountHeader={
               hasMultipleAccounts || settings.showAccountHeader
             }
diff --git a/src/renderer/utils/api/client.test.ts b/src/renderer/utils/api/client.test.ts
index 84d2e7257..5b85d285d 100644
--- a/src/renderer/utils/api/client.test.ts
+++ b/src/renderer/utils/api/client.test.ts
@@ -1,6 +1,7 @@
 import axios, { type AxiosPromise, type AxiosResponse } from 'axios';
 
 import * as logger from '../../../shared/logger';
+
 import {
   mockGitHubCloudAccount,
   mockGitHubEnterpriseServerAccount,
diff --git a/src/renderer/utils/api/client.ts b/src/renderer/utils/api/client.ts
index 70f835f9c..2c3485f2c 100644
--- a/src/renderer/utils/api/client.ts
+++ b/src/renderer/utils/api/client.ts
@@ -2,6 +2,7 @@ import type { AxiosPromise } from 'axios';
 import { print } from 'graphql/language/printer';
 
 import { logError } from '../../../shared/logger';
+
 import type {
   Account,
   Hostname,
diff --git a/src/renderer/utils/api/request.ts b/src/renderer/utils/api/request.ts
index 134ea04a0..324d4844f 100644
--- a/src/renderer/utils/api/request.ts
+++ b/src/renderer/utils/api/request.ts
@@ -5,6 +5,7 @@ import axios, {
 } from 'axios';
 
 import { logError } from '../../../shared/logger';
+
 import type { Link, Token } from '../../types';
 import { decryptValue } from '../comms';
 import { getNextURLFromLinkHeader } from './utils';
diff --git a/src/renderer/utils/auth/utils.ts b/src/renderer/utils/auth/utils.ts
index 59ca2d0e3..c1b84add4 100644
--- a/src/renderer/utils/auth/utils.ts
+++ b/src/renderer/utils/auth/utils.ts
@@ -6,6 +6,7 @@ import semver from 'semver';
 import { APPLICATION } from '../../../shared/constants';
 import { namespacedEvent } from '../../../shared/events';
 import { logError, logInfo, logWarn } from '../../../shared/logger';
+
 import type {
   Account,
   AuthCode,
diff --git a/src/renderer/utils/comms.test.ts b/src/renderer/utils/comms.test.ts
index cc090e496..3e9ba81d3 100644
--- a/src/renderer/utils/comms.test.ts
+++ b/src/renderer/utils/comms.test.ts
@@ -1,6 +1,7 @@
 import { ipcRenderer, shell } from 'electron';
 
 import { namespacedEvent } from '../../shared/events';
+
 import { mockSettings } from '../__mocks__/state-mocks';
 import type { Link } from '../types';
 import {
diff --git a/src/renderer/utils/comms.ts b/src/renderer/utils/comms.ts
index 6476727e1..573d732ad 100644
--- a/src/renderer/utils/comms.ts
+++ b/src/renderer/utils/comms.ts
@@ -1,6 +1,7 @@
 import { ipcRenderer, shell } from 'electron';
 
 import { namespacedEvent } from '../../shared/events';
+
 import { defaultSettings } from '../context/defaults';
 import { type Link, OpenPreference } from '../types';
 import { Constants } from './constants';
diff --git a/src/renderer/utils/helpers.test.ts b/src/renderer/utils/helpers.test.ts
index c65f93121..fe1975d95 100644
--- a/src/renderer/utils/helpers.test.ts
+++ b/src/renderer/utils/helpers.test.ts
@@ -7,6 +7,7 @@ import {
 import type { AxiosPromise, AxiosResponse } from 'axios';
 
 import * as logger from '../../shared/logger';
+
 import { mockPersonalAccessTokenAccount } from '../__mocks__/state-mocks';
 import type { Hostname, Link } from '../types';
 import type { SubjectType } from '../typesGitHub';
diff --git a/src/renderer/utils/helpers.ts b/src/renderer/utils/helpers.ts
index 24d47c7dc..838ffe023 100644
--- a/src/renderer/utils/helpers.ts
+++ b/src/renderer/utils/helpers.ts
@@ -5,6 +5,7 @@ import {
 } from '@primer/octicons-react';
 
 import { logError, logWarn } from '../../shared/logger';
+
 import type { Chevron, Hostname, Link } from '../types';
 import type { Notification } from '../typesGitHub';
 import { getHtmlUrl, getLatestDiscussion } from './api/client';
diff --git a/src/renderer/utils/notifications/native.ts b/src/renderer/utils/notifications/native.ts
index b456e8b3a..3a3ed50dc 100644
--- a/src/renderer/utils/notifications/native.ts
+++ b/src/renderer/utils/notifications/native.ts
@@ -2,6 +2,7 @@ import path from 'node:path';
 
 import { APPLICATION } from '../../../shared/constants';
 import { isWindows } from '../../../shared/platform';
+
 import type { AccountNotifications, GitifyState } from '../../types';
 import { Notification } from '../../typesGitHub';
 import { getAccountUUID } from '../auth/utils';
diff --git a/src/renderer/utils/notifications/notifications.test.ts b/src/renderer/utils/notifications/notifications.test.ts
index e326caf81..498bae3c0 100644
--- a/src/renderer/utils/notifications/notifications.test.ts
+++ b/src/renderer/utils/notifications/notifications.test.ts
@@ -2,6 +2,7 @@ import axios from 'axios';
 import nock from 'nock';
 
 import * as logger from '../../../shared/logger';
+
 import { mockSingleAccountNotifications } from '../../__mocks__/notifications-mocks';
 import { partialMockNotification } from '../../__mocks__/partial-mocks';
 import { mockSettings } from '../../__mocks__/state-mocks';
diff --git a/src/renderer/utils/notifications/notifications.ts b/src/renderer/utils/notifications/notifications.ts
index 767e02aed..a1de6ba86 100644
--- a/src/renderer/utils/notifications/notifications.ts
+++ b/src/renderer/utils/notifications/notifications.ts
@@ -1,4 +1,5 @@
 import { logError, logWarn } from '../../../shared/logger';
+
 import type {
   AccountNotifications,
   GitifyState,