diff --git a/package.json b/package.json
index ab1ba9f7f..29228184c 100644
--- a/package.json
+++ b/package.json
@@ -171,7 +171,6 @@
     "nprogress": "0.2.0",
     "postcss": "8.5.1",
     "postcss-loader": "8.1.1",
-    "react-final-form": "6.5.9",
     "rimraf": "6.0.1",
     "semver": "7.6.3",
     "styled-components": "6.1.14",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4870b9a01..9b3dd2103 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -138,9 +138,6 @@ importers:
       postcss-loader:
         specifier: 8.1.1
         version: 8.1.1(postcss@8.5.1)(typescript@5.7.3)(webpack@5.97.1)
-      react-final-form:
-        specifier: 6.5.9
-        version: 6.5.9(final-form@4.20.10)(react@19.0.0)
       rimraf:
         specifier: 6.0.1
         version: 6.0.1
@@ -3638,12 +3635,6 @@ packages:
     peerDependencies:
       react: ^19.0.0
 
-  react-final-form@6.5.9:
-    resolution: {integrity: sha512-x3XYvozolECp3nIjly+4QqxdjSSWfcnpGEL5K8OBT6xmGrq5kBqbA6+/tOqoom9NwqIPPbxPNsOViFlbKgowbA==}
-    peerDependencies:
-      final-form: ^4.20.4
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   react-intersection-observer@9.13.1:
     resolution: {integrity: sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==}
     peerDependencies:
@@ -8598,12 +8589,6 @@ snapshots:
       react: 19.0.0
       scheduler: 0.25.0
 
-  react-final-form@6.5.9(final-form@4.20.10)(react@19.0.0):
-    dependencies:
-      '@babel/runtime': 7.24.1
-      final-form: 4.20.10
-      react: 19.0.0
-
   react-intersection-observer@9.13.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       react: 19.0.0
diff --git a/src/renderer/components/fields/FieldInput.test.tsx b/src/renderer/components/fields/FieldInput.test.tsx
deleted file mode 100644
index 0e2035a9a..000000000
--- a/src/renderer/components/fields/FieldInput.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { render } from '@testing-library/react';
-import { Form } from 'react-final-form';
-import { FieldInput, type IFieldInput } from './FieldInput';
-
-describe('renderer/components/fields/FieldInput.tsx', () => {
-  const props: IFieldInput = {
-    name: 'appearance',
-    label: 'Appearance',
-    placeholder: 'This is some placeholder text',
-    helpText: 'This is some helper text',
-  };
-
-  it('should render', () => {
-    const tree = render(
-      <Form
-        onSubmit={() => {}}
-        hand
-        render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
-            <FieldInput {...props} />
-          </form>
-        )}
-      />,
-    );
-    expect(tree).toMatchSnapshot();
-  });
-});
diff --git a/src/renderer/components/fields/FieldInput.tsx b/src/renderer/components/fields/FieldInput.tsx
deleted file mode 100644
index c58207c8f..000000000
--- a/src/renderer/components/fields/FieldInput.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import { Field } from 'react-final-form';
-import { cn } from '../../utils/cn';
-
-export interface IFieldInput {
-  name: string;
-  type?: string;
-  label: string;
-  placeholder?: string;
-  helpText?: ReactNode | string;
-  required?: boolean;
-}
-
-export const FieldInput: FC<IFieldInput> = ({
-  label,
-  name,
-  placeholder,
-  helpText,
-  type = 'text',
-  required = false,
-}) => {
-  return (
-    <Field name={name}>
-      {({ input, meta: { touched, error } }) => (
-        <div className="mb-4">
-          <label
-            className="mb-2 block text-sm font-semibold tracking-wide"
-            htmlFor={input.name}
-          >
-            {label}
-          </label>
-
-          <input
-            type={type}
-            className={cn(
-              'text-sm mb-2 px-4 py-1.5 block w-full appearance-none',
-              'rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden',
-              error ? 'border-red-500' : 'border-gray-500',
-            )}
-            id={input.name}
-            placeholder={placeholder}
-            required={required}
-            {...input}
-          />
-
-          {helpText && (
-            <div className="mt-3 text-xs text-gitify-font">{helpText}</div>
-          )}
-
-          {touched && error && (
-            <div className="mt-2 text-xs italic text-gitify-error">{error}</div>
-          )}
-        </div>
-      )}
-    </Field>
-  );
-};
diff --git a/src/renderer/components/fields/__snapshots__/FieldInput.test.tsx.snap b/src/renderer/components/fields/__snapshots__/FieldInput.test.tsx.snap
deleted file mode 100644
index f2d15383f..000000000
--- a/src/renderer/components/fields/__snapshots__/FieldInput.test.tsx.snap
+++ /dev/null
@@ -1,114 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renderer/components/fields/FieldInput.tsx should render 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <form>
-        <div
-          class="mb-4"
-        >
-          <label
-            class="mb-2 block text-sm font-semibold tracking-wide"
-            for="appearance"
-          >
-            Appearance
-          </label>
-          <input
-            class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-gray-500"
-            id="appearance"
-            name="appearance"
-            placeholder="This is some placeholder text"
-            type="text"
-            value=""
-          />
-          <div
-            class="mt-3 text-xs text-gitify-font"
-          >
-            This is some helper text
-          </div>
-        </div>
-      </form>
-    </div>
-  </body>,
-  "container": <div>
-    <form>
-      <div
-        class="mb-4"
-      >
-        <label
-          class="mb-2 block text-sm font-semibold tracking-wide"
-          for="appearance"
-        >
-          Appearance
-        </label>
-        <input
-          class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-gray-500"
-          id="appearance"
-          name="appearance"
-          placeholder="This is some placeholder text"
-          type="text"
-          value=""
-        />
-        <div
-          class="mt-3 text-xs text-gitify-font"
-        >
-          This is some helper text
-        </div>
-      </div>
-    </form>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
diff --git a/src/renderer/components/layout/Centered.tsx b/src/renderer/components/layout/Centered.tsx
index 3e13f17a3..65ab9f793 100644
--- a/src/renderer/components/layout/Centered.tsx
+++ b/src/renderer/components/layout/Centered.tsx
@@ -3,20 +3,17 @@ import type { FC, ReactNode } from 'react';
 
 interface ICentered {
   children: ReactNode;
-  fullHeight?: boolean;
+  fullHeight: boolean;
 }
 
-export const Centered: FC<ICentered> = ({
-  fullHeight = true,
-  ...props
-}: ICentered) => {
+export const Centered: FC<ICentered> = (props: ICentered) => {
   return (
     <Stack
       direction="vertical"
       align="center"
       justify="center"
       padding="spacious"
-      className={fullHeight && 'h-screen'}
+      className={props.fullHeight && 'h-screen'}
     >
       {props.children}
     </Stack>
diff --git a/src/renderer/components/layout/Contents.tsx b/src/renderer/components/layout/Contents.tsx
index d7d4a1e25..b50b08272 100644
--- a/src/renderer/components/layout/Contents.tsx
+++ b/src/renderer/components/layout/Contents.tsx
@@ -1,3 +1,4 @@
+import { Box } from '@primer/react';
 import type { FC, ReactNode } from 'react';
 
 interface IContents {
@@ -5,5 +6,9 @@ interface IContents {
 }
 
 export const Contents: FC<IContents> = (props: IContents) => {
-  return <div className="grow overflow-x-auto px-8 pb-4">{props.children}</div>;
+  return (
+    <Box className="grow overflow-x-auto px-8 pb-2 mb-12 ">
+      {props.children}
+    </Box>
+  );
 };
diff --git a/src/renderer/components/layout/Page.test.tsx b/src/renderer/components/layout/Page.test.tsx
index 9c1727373..bf51c7ec6 100644
--- a/src/renderer/components/layout/Page.test.tsx
+++ b/src/renderer/components/layout/Page.test.tsx
@@ -2,22 +2,8 @@ import { render } from '@testing-library/react';
 import { Page } from './Page';
 
 describe('renderer/components/layout/Page.tsx', () => {
-  it('should render itself & its children - full', () => {
-    const tree = render(
-      <Page id="test" type="h-full">
-        Test
-      </Page>,
-    );
-
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('should render itself & its children - screen', () => {
-    const tree = render(
-      <Page id="test" type="h-screen">
-        Test
-      </Page>,
-    );
+  it('should render itself & its children', () => {
+    const tree = render(<Page id="test">Test</Page>);
 
     expect(tree).toMatchSnapshot();
   });
diff --git a/src/renderer/components/layout/Page.tsx b/src/renderer/components/layout/Page.tsx
index 2d335f6bb..123ccdac0 100644
--- a/src/renderer/components/layout/Page.tsx
+++ b/src/renderer/components/layout/Page.tsx
@@ -1,16 +1,15 @@
+import { Box } from '@primer/react';
 import type { FC, ReactNode } from 'react';
-import { cn } from '../../utils/cn';
 
 interface IPage {
   children: ReactNode;
   id: string;
-  type: 'h-full' | 'h-screen';
 }
 
 export const Page: FC<IPage> = (props: IPage) => {
   return (
-    <div className={cn('flex flex-col', props.type)} data-testid={props.id}>
+    <Box className="flex flex-col h-screen" data-testid={props.id}>
       {props.children}
-    </div>
+    </Box>
   );
 };
diff --git a/src/renderer/components/layout/__snapshots__/Contents.test.tsx.snap b/src/renderer/components/layout/__snapshots__/Contents.test.tsx.snap
index 94a38f280..ef2f6fb2f 100644
--- a/src/renderer/components/layout/__snapshots__/Contents.test.tsx.snap
+++ b/src/renderer/components/layout/__snapshots__/Contents.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/layout/Contents.tsx should render itself & its chil
   "baseElement": <body>
     <div>
       <div
-        class="grow overflow-x-auto px-8 pb-4"
+        class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
       >
         Test
       </div>
@@ -14,7 +14,7 @@ exports[`renderer/components/layout/Contents.tsx should render itself & its chil
   </body>,
   "container": <div>
     <div
-      class="grow overflow-x-auto px-8 pb-4"
+      class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
     >
       Test
     </div>
diff --git a/src/renderer/components/layout/__snapshots__/Page.test.tsx.snap b/src/renderer/components/layout/__snapshots__/Page.test.tsx.snap
index 4fbafd1e1..2942df524 100644
--- a/src/renderer/components/layout/__snapshots__/Page.test.tsx.snap
+++ b/src/renderer/components/layout/__snapshots__/Page.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderer/components/layout/Page.tsx should render itself & its children - full 1`] = `
+exports[`renderer/components/layout/Page.tsx should render itself & its children 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col h-full"
+        class="Box-sc-g0xbh4-0 flex flex-col h-screen"
         data-testid="test"
       >
         Test
@@ -15,82 +15,7 @@ exports[`renderer/components/layout/Page.tsx should render itself & its children
   </body>,
   "container": <div>
     <div
-      class="flex flex-col h-full"
-      data-testid="test"
-    >
-      Test
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`renderer/components/layout/Page.tsx should render itself & its children - screen 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="flex flex-col h-screen"
-        data-testid="test"
-      >
-        Test
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="flex flex-col h-screen"
+      class="Box-sc-g0xbh4-0 flex flex-col h-screen"
       data-testid="test"
     >
       Test
diff --git a/src/renderer/components/primitives/Footer.tsx b/src/renderer/components/primitives/Footer.tsx
index c1d2d637b..861d9f95c 100644
--- a/src/renderer/components/primitives/Footer.tsx
+++ b/src/renderer/components/primitives/Footer.tsx
@@ -1,4 +1,4 @@
-import { Stack } from '@primer/react';
+import { Box, Stack } from '@primer/react';
 import type { FC, ReactNode } from 'react';
 
 interface IFooter {
@@ -8,13 +8,10 @@ interface IFooter {
 
 export const Footer: FC<IFooter> = (props: IFooter) => {
   return (
-    <Stack
-      direction="horizontal"
-      justify={props.justify}
-      padding="condensed"
-      className="bg-gitify-footer"
-    >
-      {props.children}
-    </Stack>
+    <Box className="fixed bottom-0 left-10 right-0 bg-gitify-footer">
+      <Stack direction="horizontal" justify={props.justify} padding="condensed">
+        {props.children}
+      </Stack>
+    </Box>
   );
 };
diff --git a/src/renderer/components/primitives/Header.tsx b/src/renderer/components/primitives/Header.tsx
index 189474a11..1d72ffb42 100644
--- a/src/renderer/components/primitives/Header.tsx
+++ b/src/renderer/components/primitives/Header.tsx
@@ -2,7 +2,7 @@ import { type FC, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ArrowLeftIcon, type Icon } from '@primer/octicons-react';
-import { IconButton, Stack } from '@primer/react';
+import { Box, IconButton, Stack } from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { Title } from './Title';
@@ -19,24 +19,26 @@ export const Header: FC<IHeader> = (props: IHeader) => {
   const { fetchNotifications } = useContext(AppContext);
 
   return (
-    <Stack direction="horizontal" justify="space-between" padding="spacious">
-      <IconButton
-        aria-labelledby="Go Back"
-        variant="invisible"
-        tooltipDirection="e"
-        icon={ArrowLeftIcon}
-        onClick={() => {
-          navigate(-1);
-          if (props.fetchOnBack) {
-            fetchNotifications();
-          }
-        }}
-        data-testid="header-nav-back"
-      />
+    <Box className="px-6 py-4">
+      <Stack direction="horizontal" justify="space-between">
+        <IconButton
+          aria-labelledby="Go Back"
+          variant="invisible"
+          tooltipDirection="e"
+          icon={ArrowLeftIcon}
+          onClick={() => {
+            navigate(-1);
+            if (props.fetchOnBack) {
+              fetchNotifications();
+            }
+          }}
+          data-testid="header-nav-back"
+        />
 
-      <Title icon={props.icon} size={3}>
-        {props.children}
-      </Title>
-    </Stack>
+        <Title icon={props.icon} size={3}>
+          {props.children}
+        </Title>
+      </Stack>
+    </Box>
   );
 };
diff --git a/src/renderer/components/primitives/__snapshots__/Footer.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/Footer.test.tsx.snap
index 10e487af2..d347c3a50 100644
--- a/src/renderer/components/primitives/__snapshots__/Footer.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/Footer.test.tsx.snap
@@ -6,7 +6,27 @@ exports[`renderer/components/primitives/Footer.tsx should render itself & its ch
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
+        class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-justify="end"
+          data-padding="condensed"
+          data-wrap="nowrap"
+        >
+          Test
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="stretch"
         data-direction="horizontal"
         data-justify="end"
@@ -16,18 +36,6 @@ exports[`renderer/components/primitives/Footer.tsx should render itself & its ch
         Test
       </div>
     </div>
-  </body>,
-  "container": <div>
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
-      data-align="stretch"
-      data-direction="horizontal"
-      data-justify="end"
-      data-padding="condensed"
-      data-wrap="nowrap"
-    >
-      Test
-    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
@@ -89,7 +97,27 @@ exports[`renderer/components/primitives/Footer.tsx should render itself & its ch
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
+        class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-justify="space-between"
+          data-padding="condensed"
+          data-wrap="nowrap"
+        >
+          Test
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
+    >
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="stretch"
         data-direction="horizontal"
         data-justify="space-between"
@@ -99,18 +127,6 @@ exports[`renderer/components/primitives/Footer.tsx should render itself & its ch
         Test
       </div>
     </div>
-  </body>,
-  "container": <div>
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
-      data-align="stretch"
-      data-direction="horizontal"
-      data-justify="space-between"
-      data-padding="condensed"
-      data-wrap="nowrap"
-    >
-      Test
-    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap
index 7c4323457..f05169e64 100644
--- a/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/Header.test.tsx.snap
@@ -5,12 +5,94 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <div
+        class="Box-sc-g0xbh4-0 px-6 py-4"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-justify="space-between"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <button
+            aria-describedby=":r0:-loading-announcement"
+            aria-labelledby="Go Back"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="header-nav-back"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-arrow-left"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+              />
+            </svg>
+          </button>
+          <legend>
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+              id="test-header"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-mark-github"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+                />
+              </svg>
+              <h2
+                class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+                sx="[object Object]"
+              >
+                Test Header
+              </h2>
+            </div>
+          </legend>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 px-6 py-4"
+    >
       <div
         class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
         data-align="stretch"
         data-direction="horizontal"
         data-justify="space-between"
-        data-padding="spacious"
+        data-padding="none"
         data-wrap="nowrap"
       >
         <button
@@ -78,80 +160,6 @@ exports[`renderer/components/primitives/Header.tsx should render itself & its ch
         </legend>
       </div>
     </div>
-  </body>,
-  "container": <div>
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-      data-align="stretch"
-      data-direction="horizontal"
-      data-justify="space-between"
-      data-padding="spacious"
-      data-wrap="nowrap"
-    >
-      <button
-        aria-describedby=":r0:-loading-announcement"
-        aria-labelledby="Go Back"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-component="IconButton"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="header-nav-back"
-        sx="[object Object]"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-arrow-left"
-          display="inline-block"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          overflow="visible"
-          style="vertical-align: text-bottom;"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-          />
-        </svg>
-      </button>
-      <legend>
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
-          id="test-header"
-        >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-mark-github"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-            />
-          </svg>
-          <h2
-            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-            sx="[object Object]"
-          >
-            Test Header
-          </h2>
-        </div>
-      </legend>
-    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
diff --git a/src/renderer/routes/Accounts.tsx b/src/renderer/routes/Accounts.tsx
index bc411c52c..cf22e5e31 100644
--- a/src/renderer/routes/Accounts.tsx
+++ b/src/renderer/routes/Accounts.tsx
@@ -28,9 +28,12 @@ import { Footer } from '../components/primitives/Footer';
 import { Header } from '../components/primitives/Header';
 import { AppContext } from '../context/App';
 import { type Account, Size } from '../types';
-import { getAccountUUID, refreshAccount } from '../utils/auth/utils';
+import {
+  formatRequiredScopes,
+  getAccountUUID,
+  refreshAccount,
+} from '../utils/auth/utils';
 import { updateTrayIcon, updateTrayTitle } from '../utils/comms';
-import { Constants } from '../utils/constants';
 import { getAuthMethodIcon, getPlatformIcon } from '../utils/icons';
 import {
   openAccountProfile,
@@ -77,7 +80,7 @@ export const AccountsRoute: FC = () => {
   }, []);
 
   return (
-    <Page id="accounts" type="h-screen">
+    <Page id="accounts">
       <Header icon={PersonIcon}>Accounts</Header>
 
       <Contents>
@@ -164,7 +167,7 @@ export const AccountsRoute: FC = () => {
                 <Stack direction="horizontal" gap="condensed">
                   <IconButton
                     icon={AlertFillIcon}
-                    aria-label={`This account is missing one or more required scopes: [${Constants.AUTH_SCOPE.join(', ')}]`}
+                    aria-label={`This account is missing one or more required scopes: [${formatRequiredScopes()}]`}
                     variant="danger"
                     onClick={() => openDeveloperSettings(account)}
                     size="small"
diff --git a/src/renderer/routes/Filters.tsx b/src/renderer/routes/Filters.tsx
index b46d71e29..9996608f3 100644
--- a/src/renderer/routes/Filters.tsx
+++ b/src/renderer/routes/Filters.tsx
@@ -38,7 +38,7 @@ export const FiltersRoute: FC = () => {
   };
 
   return (
-    <Page id="filters" type="h-screen">
+    <Page id="filters">
       <Header fetchOnBack={true} icon={FilterIcon}>
         Filters
       </Header>
diff --git a/src/renderer/routes/LoginWithOAuthApp.test.tsx b/src/renderer/routes/LoginWithOAuthApp.test.tsx
index 7a8c6b9dd..b1d79e982 100644
--- a/src/renderer/routes/LoginWithOAuthApp.test.tsx
+++ b/src/renderer/routes/LoginWithOAuthApp.test.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { AppContext } from '../context/App';
 import type { AuthState, ClientID, ClientSecret, Hostname } from '../types';
 import * as comms from '../utils/comms';
-import { LoginWithOAuthAppRoute, validate } from './LoginWithOAuthApp';
+import { LoginWithOAuthAppRoute, validateForm } from './LoginWithOAuthApp';
 
 const mockNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
@@ -62,9 +62,9 @@ describe('renderer/routes/LoginWithOAuthApp.tsx', () => {
     let values = {
       ...emptyValues,
     };
-    expect(validate(values).hostname).toBe('Required');
-    expect(validate(values).clientId).toBe('Required');
-    expect(validate(values).clientSecret).toBe('Required');
+    expect(validateForm(values).hostname).toBe('Hostname is required');
+    expect(validateForm(values).clientId).toBe('Client ID is required');
+    expect(validateForm(values).clientSecret).toBe('Client Secret is required');
 
     values = {
       ...emptyValues,
@@ -72,9 +72,11 @@ describe('renderer/routes/LoginWithOAuthApp.tsx', () => {
       clientId: '!@£INVALID-.1' as ClientID,
       clientSecret: '!@£INVALID-.1' as ClientSecret,
     };
-    expect(validate(values).hostname).toBe('Invalid hostname.');
-    expect(validate(values).clientId).toBe('Invalid client id.');
-    expect(validate(values).clientSecret).toBe('Invalid client secret.');
+    expect(validateForm(values).hostname).toBe('Hostname format is invalid');
+    expect(validateForm(values).clientId).toBe('Client ID format is invalid');
+    expect(validateForm(values).clientSecret).toBe(
+      'Client Secret format is invalid',
+    );
   });
 
   describe("'Create new OAuth App' button", () => {
@@ -87,6 +89,10 @@ describe('renderer/routes/LoginWithOAuthApp.tsx', () => {
         </AppContext.Provider>,
       );
 
+      fireEvent.change(screen.getByTestId('login-hostname'), {
+        target: { value: '' },
+      });
+
       fireEvent.click(screen.getByTestId('login-create-oauth-app'));
 
       expect(openExternalLinkMock).toHaveBeenCalledTimes(0);
@@ -101,7 +107,7 @@ describe('renderer/routes/LoginWithOAuthApp.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.change(screen.getByLabelText('Hostname'), {
+      fireEvent.change(screen.getByTestId('login-hostname'), {
         target: { value: 'company.github.com' },
       });
 
@@ -126,13 +132,13 @@ describe('renderer/routes/LoginWithOAuthApp.tsx', () => {
       </AppContext.Provider>,
     );
 
-    fireEvent.change(screen.getByLabelText('Hostname'), {
+    fireEvent.change(screen.getByTestId('login-hostname'), {
       target: { value: 'github.com' },
     });
-    fireEvent.change(screen.getByLabelText('Client ID'), {
+    fireEvent.change(screen.getByTestId('login-clientId'), {
       target: { value: '1234567890_ASDFGHJKL' },
     });
-    fireEvent.change(screen.getByLabelText('Client Secret'), {
+    fireEvent.change(screen.getByTestId('login-clientSecret'), {
       target: { value: '1234567890_asdfghjklPOIUYTREWQ0987654321' },
     });
 
@@ -153,21 +159,22 @@ describe('renderer/routes/LoginWithOAuthApp.tsx', () => {
       </AppContext.Provider>,
     );
 
-    fireEvent.change(screen.getByLabelText('Hostname'), {
+    fireEvent.change(screen.getByTestId('login-hostname'), {
       target: { value: 'test' },
     });
-    fireEvent.change(screen.getByLabelText('Client ID'), {
+    fireEvent.change(screen.getByTestId('login-clientId'), {
       target: { value: '123' },
     });
-    fireEvent.change(screen.getByLabelText('Client Secret'), {
+    fireEvent.change(screen.getByTestId('login-clientSecret'), {
       target: { value: 'abc' },
     });
 
     fireEvent.click(screen.getByTestId('login-submit'));
 
-    expect(screen.getByText('Invalid hostname.')).toBeTruthy();
-    expect(screen.getByText('Invalid client id.')).toBeTruthy();
-    expect(screen.getByText('Invalid client secret.')).toBeTruthy();
+    expect(screen.getByTestId('login-errors')).toBeTruthy();
+    expect(screen.getByText('Hostname format is invalid')).toBeTruthy();
+    expect(screen.getByText('Client ID format is invalid')).toBeTruthy();
+    expect(screen.getByText('Client Secret format is invalid')).toBeTruthy();
   });
 
   it('should open help docs in the browser', async () => {
diff --git a/src/renderer/routes/LoginWithOAuthApp.tsx b/src/renderer/routes/LoginWithOAuthApp.tsx
index da22b9dd3..0c57e863c 100644
--- a/src/renderer/routes/LoginWithOAuthApp.tsx
+++ b/src/renderer/routes/LoginWithOAuthApp.tsx
@@ -1,13 +1,27 @@
-import { type FC, useCallback, useContext } from 'react';
-import { Form, type FormRenderProps } from 'react-final-form';
+import { type FC, useCallback, useContext, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { BookIcon, PersonIcon, SignInIcon } from '@primer/octicons-react';
-import { Button, Stack, Text, Tooltip } from '@primer/react';
+import {
+  BookIcon,
+  EyeClosedIcon,
+  EyeIcon,
+  PersonIcon,
+  SignInIcon,
+} from '@primer/octicons-react';
+import {
+  Button,
+  FormControl,
+  Stack,
+  Text,
+  TextInput,
+  Tooltip,
+} from '@primer/react';
+import { Banner } from '@primer/react/experimental';
 
 import { logError } from '../../shared/logger';
-import { FieldInput } from '../components/fields/FieldInput';
+import { Contents } from '../components/layout/Contents';
 import { Page } from '../components/layout/Page';
+import { Footer } from '../components/primitives/Footer';
 import { Header } from '../components/primitives/Header';
 import { AppContext } from '../context/App';
 import type { ClientID, ClientSecret, Hostname, Token } from '../types';
@@ -21,7 +35,7 @@ import {
 import { openExternalLink } from '../utils/comms';
 import { Constants } from '../utils/constants';
 
-interface IValues {
+interface IFormData {
   hostname?: Hostname;
   clientId?: ClientID;
   clientSecret?: ClientSecret;
@@ -31,27 +45,28 @@ interface IFormErrors {
   hostname?: string;
   clientId?: string;
   clientSecret?: string;
+  invalidCredentialsForHost?: string;
 }
 
-export const validate = (values: IValues): IFormErrors => {
+export const validateForm = (values: IFormData): IFormErrors => {
   const errors: IFormErrors = {};
 
   if (!values.hostname) {
-    errors.hostname = 'Required';
+    errors.hostname = 'Hostname is required';
   } else if (!isValidHostname(values.hostname)) {
-    errors.hostname = 'Invalid hostname.';
+    errors.hostname = 'Hostname format is invalid';
   }
 
   if (!values.clientId) {
-    errors.clientId = 'Required';
+    errors.clientId = 'Client ID is required';
   } else if (!isValidClientId(values.clientId)) {
-    errors.clientId = 'Invalid client id.';
+    errors.clientId = 'Client ID format is invalid';
   }
 
   if (!values.clientSecret) {
-    errors.clientSecret = 'Required';
+    errors.clientSecret = 'Client Secret is required';
   } else if (!isValidToken(values.clientSecret as unknown as Token)) {
-    errors.clientSecret = 'Invalid client secret.';
+    errors.clientSecret = 'Client Secret format is invalid';
   }
 
   return errors;
@@ -62,110 +77,183 @@ export const LoginWithOAuthAppRoute: FC = () => {
 
   const { loginWithOAuthApp } = useContext(AppContext);
 
-  const renderForm = (formProps: FormRenderProps) => {
-    const { handleSubmit, submitting, pristine, values } = formProps;
-
-    return (
-      <Page id="Login With OAuth App" type="h-full">
-        <form onSubmit={handleSubmit} className="-mt-5">
-          <FieldInput
-            name="hostname"
-            label="Hostname"
-            placeholder="github.company.com"
-            helpText={
-              <Stack direction="vertical" gap="condensed">
-                <Stack direction="horizontal" align="center" gap="condensed">
-                  <Button
-                    size="small"
-                    leadingVisual={PersonIcon}
-                    disabled={!values.hostname}
-                    onClick={() =>
-                      openExternalLink(getNewOAuthAppURL(values.hostname))
-                    }
-                    data-testid="login-create-oauth-app"
-                  >
-                    Create new OAuth App
-                  </Button>
-                  <Text>on GitHub then paste your</Text>
-                </Stack>
-                <Text>
-                  <Text as="i">client id and client secret</Text> below.
-                </Text>
-              </Stack>
-            }
-          />
+  const [maskToken, setMaskToken] = useState(true);
 
-          <FieldInput
-            name="clientId"
-            label="Client ID"
-            placeholder="123456789"
-          />
+  const [formData, setFormData] = useState({
+    hostname: 'github.com' as Hostname,
+    clientId: '' as ClientID,
+    clientSecret: '' as ClientSecret,
+  } as IFormData);
 
-          <FieldInput
-            name="clientSecret"
-            label="Client Secret"
-            placeholder="ABC123DEF456"
-          />
+  const [errors, setErrors] = useState({} as IFormErrors);
 
-          <Stack direction="horizontal" justify="space-between" align="center">
-            <Tooltip text="GitHub documentation">
-              <Button
-                size="small"
-                leadingVisual={BookIcon}
-                onClick={() =>
-                  openExternalLink(Constants.GITHUB_DOCS.OAUTH_URL)
-                }
-                data-testid="login-docs"
-              >
-                Docs
-              </Button>
-            </Tooltip>
-
-            <Tooltip text="Login">
-              <Button
-                variant="primary"
-                leadingVisual={SignInIcon}
-                disabled={submitting || pristine}
-                type="submit"
-                data-testid="login-submit"
-              >
-                Login
-              </Button>
-            </Tooltip>
-          </Stack>
-        </form>
-      </Page>
-    );
+  const hasErrors = useMemo(() => {
+    return Object.values(errors).some((error) => error !== '');
+  }, [errors]);
+
+  const handleSubmit = async () => {
+    const newErrors = validateForm(formData);
+
+    setErrors(newErrors);
+
+    if (!newErrors.hostname && !newErrors.clientId && !newErrors.clientSecret) {
+      verifyLoginCredentials(formData);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
   };
 
-  const login = useCallback(
-    async (data: IValues) => {
+  const verifyLoginCredentials = useCallback(
+    async (data: IFormData) => {
       try {
         await loginWithOAuthApp(data as LoginOAuthAppOptions);
         navigate(-1);
       } catch (err) {
         logError('loginWithOAuthApp', 'Failed to login with OAuth App', err);
+        setErrors({
+          invalidCredentialsForHost: `Failed to validate provided Client ID and Secret against ${data.hostname}`,
+        });
       }
     },
     [loginWithOAuthApp],
   );
 
   return (
-    <div>
+    <Page id="Login With OAuth App">
       <Header icon={PersonIcon}>Login with OAuth App</Header>
-      <div className="px-8">
-        <Form
-          initialValues={{
-            hostname: '',
-            clientId: '',
-            clientSecret: '',
-          }}
-          onSubmit={login}
-          validate={validate}
+
+      <Contents>
+        {hasErrors && (
+          <Banner
+            title="Validation errors"
+            variant="critical"
+            hideTitle
+            description={
+              <Text color="danger.fg">
+                <Stack direction="vertical" gap="condensed">
+                  {errors.hostname && <Text>{errors.hostname}</Text>}
+                  {errors.clientId && <Text>{errors.clientId}</Text>}
+                  {errors.clientSecret && <Text>{errors.clientSecret}</Text>}
+                  {errors.invalidCredentialsForHost && (
+                    <Text>{errors.invalidCredentialsForHost}</Text>
+                  )}
+                </Stack>
+              </Text>
+            }
+            data-testid="login-errors"
+          />
+        )}
+        <Stack direction="vertical" gap="normal">
+          <FormControl required>
+            <FormControl.Label>Hostname</FormControl.Label>
+            <FormControl.Caption>
+              <Text as="i">
+                Change only if you are using GitHub Enterprise Server
+              </Text>
+            </FormControl.Caption>
+            <TextInput
+              name="hostname"
+              placeholder="github.com"
+              value={formData.hostname}
+              onChange={handleInputChange}
+              aria-invalid={errors.hostname ? 'true' : 'false'}
+              sx={{
+                borderColor: errors.hostname
+                  ? 'danger.emphasis'
+                  : 'border.default',
+              }}
+              data-testid="login-hostname"
+              block
+            />
+          </FormControl>
+          <Stack direction="horizontal" align="center" gap="condensed">
+            <Button
+              size="small"
+              leadingVisual={PersonIcon}
+              disabled={!formData.hostname}
+              onClick={() =>
+                openExternalLink(getNewOAuthAppURL(formData.hostname))
+              }
+              data-testid="login-create-oauth-app"
+            >
+              Create new OAuth App
+            </Button>
+            <Text className="text-xs">
+              and use your <Text as="i">client id & secret</Text> below.
+            </Text>
+          </Stack>
+          <FormControl required>
+            <FormControl.Label>Client ID</FormControl.Label>
+            <TextInput
+              name="clientId"
+              placeholder="Your generated client id (20 characters)"
+              value={formData.clientId}
+              onChange={handleInputChange}
+              aria-invalid={errors.clientId ? 'true' : 'false'}
+              sx={{
+                borderColor: errors.clientId
+                  ? 'danger.emphasis'
+                  : 'border.default',
+              }}
+              data-testid="login-clientId"
+              block
+            />
+          </FormControl>
+          <FormControl required>
+            <FormControl.Label>Client Secret</FormControl.Label>
+            <TextInput
+              name="clientSecret"
+              type={maskToken ? 'password' : 'text'}
+              placeholder="Your generated client secret (40 characters)"
+              value={formData.clientSecret}
+              onChange={handleInputChange}
+              aria-invalid={errors.clientSecret ? 'true' : 'false'}
+              sx={{
+                borderColor: errors.clientSecret
+                  ? 'danger.emphasis'
+                  : 'border.default',
+              }}
+              trailingAction={
+                <TextInput.Action
+                  onClick={() => setMaskToken(!maskToken)}
+                  icon={maskToken ? EyeIcon : EyeClosedIcon}
+                  aria-label={maskToken ? 'Show token' : 'Hide token'}
+                />
+              }
+              data-testid="login-clientSecret"
+              block
+            />
+          </FormControl>
+        </Stack>
+      </Contents>
+
+      <Footer justify="space-between">
+        <Tooltip text="GitHub documentation">
+          <Button
+            size="small"
+            leadingVisual={BookIcon}
+            onClick={() => openExternalLink(Constants.GITHUB_DOCS.OAUTH_URL)}
+            data-testid="login-docs"
+          >
+            Docs
+          </Button>
+        </Tooltip>
+
+        <Button
+          variant="primary"
+          leadingVisual={SignInIcon}
+          onClick={handleSubmit}
+          data-testid="login-submit"
         >
-          {renderForm}
-        </Form>
-      </div>
-    </div>
+          Login
+        </Button>
+      </Footer>
+    </Page>
   );
 };
diff --git a/src/renderer/routes/LoginWithPersonalAccessToken.test.tsx b/src/renderer/routes/LoginWithPersonalAccessToken.test.tsx
index 16bbb5085..a797413f8 100644
--- a/src/renderer/routes/LoginWithPersonalAccessToken.test.tsx
+++ b/src/renderer/routes/LoginWithPersonalAccessToken.test.tsx
@@ -4,7 +4,7 @@ import { AppContext } from '../context/App';
 import * as comms from '../utils/comms';
 import {
   LoginWithPersonalAccessTokenRoute,
-  validate,
+  validateForm,
 } from './LoginWithPersonalAccessToken';
 
 const mockNavigate = jest.fn();
@@ -54,16 +54,16 @@ describe('renderer/routes/LoginWithPersonalAccessToken.tsx', () => {
     let values = {
       ...emptyValues,
     };
-    expect(validate(values).hostname).toBe('Required');
-    expect(validate(values).token).toBe('Required');
+    expect(validateForm(values).hostname).toBe('Hostname is required');
+    expect(validateForm(values).token).toBe('Token is required');
 
     values = {
       ...emptyValues,
       hostname: 'hello',
       token: '!@£INVALID-.1',
     };
-    expect(validate(values).hostname).toBe('Invalid hostname.');
-    expect(validate(values).token).toBe('Invalid token.');
+    expect(validateForm(values).hostname).toBe('Hostname format is invalid');
+    expect(validateForm(values).token).toBe('Token format is invalid');
   });
 
   describe("'Generate a PAT' button", () => {
@@ -80,7 +80,7 @@ describe('renderer/routes/LoginWithPersonalAccessToken.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.change(screen.getByLabelText('Hostname'), {
+      fireEvent.change(screen.getByTestId('login-hostname'), {
         target: { value: '' },
       });
 
@@ -123,12 +123,12 @@ describe('renderer/routes/LoginWithPersonalAccessToken.tsx', () => {
       </AppContext.Provider>,
     );
 
-    fireEvent.change(screen.getByLabelText('Token'), {
-      target: { value: '1234567890123456789012345678901234567890' },
+    fireEvent.change(screen.getByTestId('login-hostname'), {
+      target: { value: 'github.com' },
     });
 
-    fireEvent.change(screen.getByLabelText('Hostname'), {
-      target: { value: 'github.com' },
+    fireEvent.change(screen.getByTestId('login-token'), {
+      target: { value: '1234567890123456789012345678901234567890' },
     });
 
     fireEvent.click(screen.getByTestId('login-submit'));
@@ -156,12 +156,12 @@ describe('renderer/routes/LoginWithPersonalAccessToken.tsx', () => {
       </AppContext.Provider>,
     );
 
-    fireEvent.change(screen.getByLabelText('Token'), {
-      target: { value: '1234567890123456789012345678901234567890' },
+    fireEvent.change(screen.getByTestId('login-hostname'), {
+      target: { value: 'github.com' },
     });
 
-    fireEvent.change(screen.getByLabelText('Hostname'), {
-      target: { value: 'github.com' },
+    fireEvent.change(screen.getByTestId('login-token'), {
+      target: { value: '1234567890123456789012345678901234567890' },
     });
 
     fireEvent.click(screen.getByTestId('login-submit'));
@@ -181,17 +181,18 @@ describe('renderer/routes/LoginWithPersonalAccessToken.tsx', () => {
       </MemoryRouter>,
     );
 
-    fireEvent.change(screen.getByLabelText('Hostname'), {
+    fireEvent.change(screen.getByTestId('login-hostname'), {
       target: { value: 'test' },
     });
-    fireEvent.change(screen.getByLabelText('Token'), {
+    fireEvent.change(screen.getByTestId('login-token'), {
       target: { value: '123' },
     });
 
     fireEvent.click(screen.getByTestId('login-submit'));
 
-    expect(screen.getByText('Invalid hostname.')).toBeDefined();
-    expect(screen.getByText('Invalid token.')).toBeDefined();
+    expect(screen.getByTestId('login-errors')).toBeTruthy();
+    expect(screen.getByText('Hostname format is invalid')).toBeTruthy();
+    expect(screen.getByText('Token format is invalid')).toBeTruthy();
   });
 
   it('should open help docs in the browser', async () => {
diff --git a/src/renderer/routes/LoginWithPersonalAccessToken.tsx b/src/renderer/routes/LoginWithPersonalAccessToken.tsx
index 540e3c825..64d77b4b3 100644
--- a/src/renderer/routes/LoginWithPersonalAccessToken.tsx
+++ b/src/renderer/routes/LoginWithPersonalAccessToken.tsx
@@ -1,18 +1,33 @@
-import { type FC, useCallback, useContext, useState } from 'react';
-import { Form, type FormRenderProps } from 'react-final-form';
+import { type FC, useCallback, useContext, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { BookIcon, KeyIcon, SignInIcon } from '@primer/octicons-react';
-import { Button, Stack, Text, Tooltip } from '@primer/react';
+import {
+  BookIcon,
+  EyeClosedIcon,
+  EyeIcon,
+  KeyIcon,
+  SignInIcon,
+} from '@primer/octicons-react';
+import {
+  Button,
+  FormControl,
+  Stack,
+  Text,
+  TextInput,
+  Tooltip,
+} from '@primer/react';
+import { Banner } from '@primer/react/experimental';
 
 import { logError } from '../../shared/logger';
-import { FieldInput } from '../components/fields/FieldInput';
+import { Contents } from '../components/layout/Contents';
 import { Page } from '../components/layout/Page';
+import { Footer } from '../components/primitives/Footer';
 import { Header } from '../components/primitives/Header';
 import { AppContext } from '../context/App';
 import type { Hostname, Token } from '../types';
 import type { LoginPersonalAccessTokenOptions } from '../utils/auth/types';
 import {
+  formatRequiredScopes,
   getNewTokenURL,
   isValidHostname,
   isValidToken,
@@ -20,7 +35,7 @@ import {
 import { openExternalLink } from '../utils/comms';
 import { Constants } from '../utils/constants';
 
-interface IValues {
+interface IFormData {
   token?: Token;
   hostname?: Hostname;
 }
@@ -28,108 +43,65 @@ interface IValues {
 interface IFormErrors {
   token?: string;
   hostname?: string;
+  invalidCredentialsForHost?: string;
 }
 
-export const validate = (values: IValues): IFormErrors => {
+export const validateForm = (values: IFormData): IFormErrors => {
   const errors: IFormErrors = {};
 
   if (!values.hostname) {
-    errors.hostname = 'Required';
+    errors.hostname = 'Hostname is required';
   } else if (!isValidHostname(values.hostname)) {
-    errors.hostname = 'Invalid hostname.';
+    errors.hostname = 'Hostname format is invalid';
   }
 
   if (!values.token) {
-    errors.token = 'Required';
+    errors.token = 'Token is required';
   } else if (!isValidToken(values.token)) {
-    errors.token = 'Invalid token.';
+    errors.token = 'Token format is invalid';
   }
 
   return errors;
 };
 
 export const LoginWithPersonalAccessTokenRoute: FC = () => {
-  const { loginWithPersonalAccessToken } = useContext(AppContext);
   const navigate = useNavigate();
-  const [isValidToken, setIsValidToken] = useState<boolean>(true);
-
-  const renderForm = (formProps: FormRenderProps) => {
-    const { handleSubmit, submitting, pristine, values } = formProps;
-
-    return (
-      <Page id="Login With Personal Access Token" type="h-full">
-        <form onSubmit={handleSubmit}>
-          <FieldInput
-            name="hostname"
-            label="Hostname"
-            placeholder="github.company.com"
-            helpText={
-              <Stack direction="vertical" gap="condensed">
-                <Text as="i">
-                  Change only if you are using GitHub Enterprise Server.
-                </Text>
-                <Stack direction="horizontal" align="center" gap="condensed">
-                  <Button
-                    size="small"
-                    leadingVisual={KeyIcon}
-                    disabled={!values.hostname}
-                    onClick={() =>
-                      openExternalLink(getNewTokenURL(values.hostname))
-                    }
-                    data-testid="login-create-token"
-                  >
-                    Generate a PAT
-                  </Button>
-                  <Text>on GitHub then paste your token below.</Text>
-                </Stack>
-                <Text as="i">
-                  The required scopes will be automatically selected for you.
-                </Text>
-              </Stack>
-            }
-          />
-          <FieldInput
-            name="token"
-            label="Token"
-            placeholder="The 40 characters token generated on GitHub"
-          />
-          {!isValidToken && (
-            <div className="my-4 text-sm font-medium text-gitify-error">
-              This token could not be validated with {values.hostname}.
-            </div>
-          )}
-          <Stack direction="horizontal" justify="space-between" align="center">
-            <Tooltip text="GitHub documentation">
-              <Button
-                size="small"
-                leadingVisual={BookIcon}
-                onClick={() => openExternalLink(Constants.GITHUB_DOCS.PAT_URL)}
-                data-testid="login-docs"
-              >
-                Docs
-              </Button>
-            </Tooltip>
 
-            <Tooltip text="Login">
-              <Button
-                variant="primary"
-                leadingVisual={SignInIcon}
-                disabled={submitting || pristine}
-                type="submit"
-                data-testid="login-submit"
-              >
-                Login
-              </Button>
-            </Tooltip>
-          </Stack>
-        </form>
-      </Page>
-    );
+  const { loginWithPersonalAccessToken } = useContext(AppContext);
+
+  const [maskClientSecret, setMaskClientSecret] = useState(true);
+
+  const [formData, setFormData] = useState({
+    hostname: 'github.com' as Hostname,
+    token: '' as Token,
+  } as IFormData);
+
+  const [errors, setErrors] = useState({} as IFormErrors);
+
+  const hasErrors = useMemo(() => {
+    return Object.values(errors).some((error) => error !== '');
+  }, [errors]);
+
+  const handleSubmit = async () => {
+    const newErrors = validateForm(formData);
+
+    setErrors(newErrors);
+
+    if (!newErrors.hostname && !newErrors.token) {
+      verifyLoginCredentials(formData);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
   };
 
-  const login = useCallback(
-    async (data: IValues) => {
-      setIsValidToken(true);
+  const verifyLoginCredentials = useCallback(
+    async (data: IFormData) => {
       try {
         await loginWithPersonalAccessToken(
           data as LoginPersonalAccessTokenOptions,
@@ -141,28 +113,138 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
           'Failed to login with PAT',
           err,
         );
-        setIsValidToken(false);
+        setErrors({
+          invalidCredentialsForHost: `Failed to validate provided token against ${data.hostname}`,
+        });
       }
     },
     [loginWithPersonalAccessToken],
   );
 
   return (
-    <>
+    <Page id="Login With Personal Access Token">
       <Header icon={KeyIcon}>Login with Personal Access Token</Header>
 
-      <div className="px-8">
-        <Form
-          initialValues={{
-            hostname: Constants.DEFAULT_AUTH_OPTIONS.hostname,
-            token: '' as Token,
-          }}
-          onSubmit={login}
-          validate={validate}
+      <Contents>
+        {hasErrors && (
+          <Banner
+            title="Form errors"
+            variant="critical"
+            hideTitle
+            description={
+              <Text color="danger.fg">
+                <Stack direction="vertical" gap="condensed">
+                  {errors.hostname && <Text>{errors.hostname}</Text>}
+                  {errors.token && <Text>{errors.token}</Text>}
+                  {errors.invalidCredentialsForHost && (
+                    <Text>{errors.invalidCredentialsForHost}</Text>
+                  )}
+                </Stack>
+              </Text>
+            }
+            data-testid="login-errors"
+          />
+        )}
+        <Stack direction="vertical" gap="normal">
+          <FormControl required>
+            <FormControl.Label>Hostname</FormControl.Label>
+            <FormControl.Caption>
+              <Text as="i">
+                Change only if you are using GitHub Enterprise Server
+              </Text>
+            </FormControl.Caption>
+            <TextInput
+              name="hostname"
+              placeholder="github.com"
+              value={formData.hostname}
+              onChange={handleInputChange}
+              aria-invalid={errors.hostname ? 'true' : 'false'}
+              sx={{
+                borderColor: errors.hostname
+                  ? 'danger.emphasis'
+                  : 'border.default',
+              }}
+              data-testid="login-hostname"
+              block
+            />
+          </FormControl>
+
+          <Stack direction="vertical" gap="condensed">
+            <Stack direction="horizontal" align="center" gap="condensed">
+              <Button
+                size="small"
+                leadingVisual={KeyIcon}
+                disabled={!formData.hostname}
+                onClick={() =>
+                  openExternalLink(getNewTokenURL(formData.hostname))
+                }
+                data-testid="login-create-token"
+              >
+                Generate a PAT
+              </Button>
+              <Text className="text-xs">
+                on GitHub to paste the token below.
+              </Text>
+            </Stack>
+
+            <Text as="i" className="text-xs">
+              The{' '}
+              <Tooltip text={formatRequiredScopes()} direction="se">
+                <Text as="u">required scopes</Text>
+              </Tooltip>{' '}
+              will be automatically selected for you.
+            </Text>
+          </Stack>
+
+          <FormControl required>
+            <FormControl.Label>Token</FormControl.Label>
+            <TextInput
+              name="token"
+              type={maskClientSecret ? 'password' : 'text'}
+              placeholder="Your generated token (40 characters)"
+              value={formData.token}
+              onChange={handleInputChange}
+              aria-invalid={errors.token ? 'true' : 'false'}
+              sx={{
+                borderColor: errors.token
+                  ? 'danger.emphasis'
+                  : 'border.default',
+              }}
+              trailingAction={
+                <TextInput.Action
+                  onClick={() => setMaskClientSecret(!maskClientSecret)}
+                  icon={maskClientSecret ? EyeIcon : EyeClosedIcon}
+                  aria-label={maskClientSecret ? 'Show token' : 'Hide token'}
+                />
+              }
+              data-testid="login-token"
+              block
+            />
+          </FormControl>
+        </Stack>
+      </Contents>
+
+      <Footer justify="space-between">
+        <Tooltip text="GitHub documentation" direction="ne">
+          <Button
+            size="small"
+            leadingVisual={BookIcon}
+            onClick={() => openExternalLink(Constants.GITHUB_DOCS.PAT_URL)}
+            data-testid="login-docs"
+          >
+            Docs
+          </Button>
+        </Tooltip>
+
+        <Button
+          variant="primary"
+          leadingVisual={SignInIcon}
+          onClick={handleSubmit}
+          data-testid="login-submit"
         >
-          {renderForm}
-        </Form>
-      </div>
-    </>
+          Login
+        </Button>
+      </Footer>
+    </Page>
   );
 };
diff --git a/src/renderer/routes/Settings.tsx b/src/renderer/routes/Settings.tsx
index 26685da09..67ff6950b 100644
--- a/src/renderer/routes/Settings.tsx
+++ b/src/renderer/routes/Settings.tsx
@@ -23,7 +23,7 @@ export const SettingsRoute: FC = () => {
   }, [resetSettings]);
 
   return (
-    <Page id="settings" type="h-screen">
+    <Page id="settings">
       <Header fetchOnBack icon={GearIcon}>
         Settings
       </Header>
diff --git a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
index fcf558fff..8633f1dca 100644
--- a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
@@ -2,59 +2,34 @@
 
 exports[`renderer/routes/Accounts.tsx Account interactions should render with PAT scopes warning 1`] = `
 <div
-  class="flex flex-col h-screen"
+  class="Box-sc-g0xbh4-0 flex flex-col h-screen"
   data-testid="accounts"
 >
   <div
-    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-    data-align="stretch"
-    data-direction="horizontal"
-    data-justify="space-between"
-    data-padding="spacious"
-    data-wrap="nowrap"
+    class="Box-sc-g0xbh4-0 px-6 py-4"
   >
-    <button
-      aria-describedby=":r2s:-loading-announcement"
-      aria-labelledby="Go Back"
-      class="types__StyledButton-sc-ws60qy-0 kQRupk"
-      data-component="IconButton"
-      data-loading="false"
-      data-no-visuals="true"
-      data-testid="header-nav-back"
-      sx="[object Object]"
-      type="button"
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="space-between"
+      data-padding="none"
+      data-wrap="nowrap"
     >
-      <svg
-        aria-hidden="true"
-        class="octicon octicon-arrow-left"
-        display="inline-block"
-        fill="currentColor"
-        focusable="false"
-        height="16"
-        overflow="visible"
-        style="vertical-align: text-bottom;"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-        />
-      </svg>
-    </button>
-    <legend>
-      <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-        data-align="center"
-        data-direction="horizontal"
-        data-gap="condensed"
-        data-justify="start"
-        data-padding="none"
-        data-wrap="nowrap"
-        id="accounts"
+      <button
+        aria-describedby=":r2s:-loading-announcement"
+        aria-labelledby="Go Back"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-component="IconButton"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="header-nav-back"
+        sx="[object Object]"
+        type="button"
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-person"
+          class="octicon octicon-arrow-left"
           display="inline-block"
           fill="currentColor"
           focusable="false"
@@ -65,20 +40,49 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
           width="16"
         >
           <path
-            d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
           />
         </svg>
-        <h2
-          class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-          sx="[object Object]"
+      </button>
+      <legend>
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+          id="accounts"
         >
-          Accounts
-        </h2>
-      </div>
-    </legend>
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-person"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+            />
+          </svg>
+          <h2
+            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+            sx="[object Object]"
+          >
+            Accounts
+          </h2>
+        </div>
+      </legend>
+    </div>
   </div>
   <div
-    class="grow overflow-x-auto px-8 pb-4"
+    class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
   >
     <div
       class="rounded-md p-2 mb-4 bg-gitify-accounts"
@@ -1174,118 +1178,97 @@ exports[`renderer/routes/Accounts.tsx Account interactions should render with PA
     </div>
   </div>
   <div
-    class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
-    data-align="stretch"
-    data-direction="horizontal"
-    data-justify="end"
-    data-padding="condensed"
-    data-wrap="nowrap"
+    class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
   >
-    <button
-      aria-describedby=":r3o:-loading-announcement"
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-      data-loading="false"
-      data-testid="account-add-new"
-      id=":r3o:"
-      sx="[object Object]"
-      tabindex="0"
-      type="button"
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="end"
+      data-padding="condensed"
+      data-wrap="nowrap"
     >
-      <span
-        class="Box-sc-g0xbh4-0 srpGE"
-        data-component="buttonContent"
+      <button
+        aria-describedby=":r3o:-loading-announcement"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+        data-loading="false"
+        data-testid="account-add-new"
+        id=":r3o:"
         sx="[object Object]"
+        tabindex="0"
+        type="button"
       >
         <span
-          class="Box-sc-g0xbh4-0 mhHOW"
-          data-component="leadingVisual"
+          class="Box-sc-g0xbh4-0 srpGE"
+          data-component="buttonContent"
           sx="[object Object]"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-person-add"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
+          <span
+            class="Box-sc-g0xbh4-0 mhHOW"
+            data-component="leadingVisual"
+            sx="[object Object]"
           >
-            <path
-              d="M7.9 8.548h-.001a5.528 5.528 0 0 1 3.1 4.659.75.75 0 1 1-1.498.086A4.01 4.01 0 0 0 5.5 9.5a4.01 4.01 0 0 0-4.001 3.793.75.75 0 1 1-1.498-.085 5.527 5.527 0 0 1 3.1-4.66 3.5 3.5 0 1 1 4.799 0ZM13.25 0a.75.75 0 0 1 .75.75V2h1.25a.75.75 0 0 1 0 1.5H14v1.25a.75.75 0 0 1-1.5 0V3.5h-1.25a.75.75 0 0 1 0-1.5h1.25V.75a.75.75 0 0 1 .75-.75ZM5.5 4a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 4Z"
-            />
-          </svg>
-        </span>
-        <span
-          data-component="text"
-        >
-          Add new account
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-person-add"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M7.9 8.548h-.001a5.528 5.528 0 0 1 3.1 4.659.75.75 0 1 1-1.498.086A4.01 4.01 0 0 0 5.5 9.5a4.01 4.01 0 0 0-4.001 3.793.75.75 0 1 1-1.498-.085 5.527 5.527 0 0 1 3.1-4.66 3.5 3.5 0 1 1 4.799 0ZM13.25 0a.75.75 0 0 1 .75.75V2h1.25a.75.75 0 0 1 0 1.5H14v1.25a.75.75 0 0 1-1.5 0V3.5h-1.25a.75.75 0 0 1 0-1.5h1.25V.75a.75.75 0 0 1 .75-.75ZM5.5 4a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 4Z"
+              />
+            </svg>
+          </span>
+          <span
+            data-component="text"
+          >
+            Add new account
+          </span>
         </span>
-      </span>
-    </button>
+      </button>
+    </div>
   </div>
 </div>
 `;
 
 exports[`renderer/routes/Accounts.tsx Account interactions should set account as primary account 1`] = `
 <div
-  class="flex flex-col h-screen"
+  class="Box-sc-g0xbh4-0 flex flex-col h-screen"
   data-testid="accounts"
 >
   <div
-    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-    data-align="stretch"
-    data-direction="horizontal"
-    data-justify="space-between"
-    data-padding="spacious"
-    data-wrap="nowrap"
+    class="Box-sc-g0xbh4-0 px-6 py-4"
   >
-    <button
-      aria-describedby=":r3r:-loading-announcement"
-      aria-labelledby="Go Back"
-      class="types__StyledButton-sc-ws60qy-0 kQRupk"
-      data-component="IconButton"
-      data-loading="false"
-      data-no-visuals="true"
-      data-testid="header-nav-back"
-      sx="[object Object]"
-      type="button"
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="space-between"
+      data-padding="none"
+      data-wrap="nowrap"
     >
-      <svg
-        aria-hidden="true"
-        class="octicon octicon-arrow-left"
-        display="inline-block"
-        fill="currentColor"
-        focusable="false"
-        height="16"
-        overflow="visible"
-        style="vertical-align: text-bottom;"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-        />
-      </svg>
-    </button>
-    <legend>
-      <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-        data-align="center"
-        data-direction="horizontal"
-        data-gap="condensed"
-        data-justify="start"
-        data-padding="none"
-        data-wrap="nowrap"
-        id="accounts"
+      <button
+        aria-describedby=":r3r:-loading-announcement"
+        aria-labelledby="Go Back"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-component="IconButton"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="header-nav-back"
+        sx="[object Object]"
+        type="button"
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-person"
+          class="octicon octicon-arrow-left"
           display="inline-block"
           fill="currentColor"
           focusable="false"
@@ -1296,20 +1279,49 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
           width="16"
         >
           <path
-            d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
           />
         </svg>
-        <h2
-          class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-          sx="[object Object]"
+      </button>
+      <legend>
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+          id="accounts"
         >
-          Accounts
-        </h2>
-      </div>
-    </legend>
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-person"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+            />
+          </svg>
+          <h2
+            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+            sx="[object Object]"
+          >
+            Accounts
+          </h2>
+        </div>
+      </legend>
+    </div>
   </div>
   <div
-    class="grow overflow-x-auto px-8 pb-4"
+    class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
   >
     <div
       class="rounded-md p-2 mb-4 bg-gitify-accounts"
@@ -2405,118 +2417,97 @@ exports[`renderer/routes/Accounts.tsx Account interactions should set account as
     </div>
   </div>
   <div
-    class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
-    data-align="stretch"
-    data-direction="horizontal"
-    data-justify="end"
-    data-padding="condensed"
-    data-wrap="nowrap"
+    class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
   >
-    <button
-      aria-describedby=":r4n:-loading-announcement"
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-      data-loading="false"
-      data-testid="account-add-new"
-      id=":r4n:"
-      sx="[object Object]"
-      tabindex="0"
-      type="button"
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="end"
+      data-padding="condensed"
+      data-wrap="nowrap"
     >
-      <span
-        class="Box-sc-g0xbh4-0 srpGE"
-        data-component="buttonContent"
+      <button
+        aria-describedby=":r4n:-loading-announcement"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+        data-loading="false"
+        data-testid="account-add-new"
+        id=":r4n:"
         sx="[object Object]"
+        tabindex="0"
+        type="button"
       >
         <span
-          class="Box-sc-g0xbh4-0 mhHOW"
-          data-component="leadingVisual"
+          class="Box-sc-g0xbh4-0 srpGE"
+          data-component="buttonContent"
           sx="[object Object]"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-person-add"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
+          <span
+            class="Box-sc-g0xbh4-0 mhHOW"
+            data-component="leadingVisual"
+            sx="[object Object]"
           >
-            <path
-              d="M7.9 8.548h-.001a5.528 5.528 0 0 1 3.1 4.659.75.75 0 1 1-1.498.086A4.01 4.01 0 0 0 5.5 9.5a4.01 4.01 0 0 0-4.001 3.793.75.75 0 1 1-1.498-.085 5.527 5.527 0 0 1 3.1-4.66 3.5 3.5 0 1 1 4.799 0ZM13.25 0a.75.75 0 0 1 .75.75V2h1.25a.75.75 0 0 1 0 1.5H14v1.25a.75.75 0 0 1-1.5 0V3.5h-1.25a.75.75 0 0 1 0-1.5h1.25V.75a.75.75 0 0 1 .75-.75ZM5.5 4a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 4Z"
-            />
-          </svg>
-        </span>
-        <span
-          data-component="text"
-        >
-          Add new account
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-person-add"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M7.9 8.548h-.001a5.528 5.528 0 0 1 3.1 4.659.75.75 0 1 1-1.498.086A4.01 4.01 0 0 0 5.5 9.5a4.01 4.01 0 0 0-4.001 3.793.75.75 0 1 1-1.498-.085 5.527 5.527 0 0 1 3.1-4.66 3.5 3.5 0 1 1 4.799 0ZM13.25 0a.75.75 0 0 1 .75.75V2h1.25a.75.75 0 0 1 0 1.5H14v1.25a.75.75 0 0 1-1.5 0V3.5h-1.25a.75.75 0 0 1 0-1.5h1.25V.75a.75.75 0 0 1 .75-.75ZM5.5 4a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 4Z"
+              />
+            </svg>
+          </span>
+          <span
+            data-component="text"
+          >
+            Add new account
+          </span>
         </span>
-      </span>
-    </button>
+      </button>
+    </div>
   </div>
 </div>
 `;
 
 exports[`renderer/routes/Accounts.tsx General should render itself & its children 1`] = `
 <div
-  class="flex flex-col h-screen"
+  class="Box-sc-g0xbh4-0 flex flex-col h-screen"
   data-testid="accounts"
 >
   <div
-    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-    data-align="stretch"
-    data-direction="horizontal"
-    data-justify="space-between"
-    data-padding="spacious"
-    data-wrap="nowrap"
+    class="Box-sc-g0xbh4-0 px-6 py-4"
   >
-    <button
-      aria-describedby=":r0:-loading-announcement"
-      aria-labelledby="Go Back"
-      class="types__StyledButton-sc-ws60qy-0 kQRupk"
-      data-component="IconButton"
-      data-loading="false"
-      data-no-visuals="true"
-      data-testid="header-nav-back"
-      sx="[object Object]"
-      type="button"
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="space-between"
+      data-padding="none"
+      data-wrap="nowrap"
     >
-      <svg
-        aria-hidden="true"
-        class="octicon octicon-arrow-left"
-        display="inline-block"
-        fill="currentColor"
-        focusable="false"
-        height="16"
-        overflow="visible"
-        style="vertical-align: text-bottom;"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-        />
-      </svg>
-    </button>
-    <legend>
-      <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-        data-align="center"
-        data-direction="horizontal"
-        data-gap="condensed"
-        data-justify="start"
-        data-padding="none"
-        data-wrap="nowrap"
-        id="accounts"
+      <button
+        aria-describedby=":r0:-loading-announcement"
+        aria-labelledby="Go Back"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-component="IconButton"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="header-nav-back"
+        sx="[object Object]"
+        type="button"
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-person"
+          class="octicon octicon-arrow-left"
           display="inline-block"
           fill="currentColor"
           focusable="false"
@@ -2527,20 +2518,49 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           width="16"
         >
           <path
-            d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
           />
         </svg>
-        <h2
-          class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-          sx="[object Object]"
+      </button>
+      <legend>
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+          id="accounts"
         >
-          Accounts
-        </h2>
-      </div>
-    </legend>
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-person"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+            />
+          </svg>
+          <h2
+            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+            sx="[object Object]"
+          >
+            Accounts
+          </h2>
+        </div>
+      </legend>
+    </div>
   </div>
   <div
-    class="grow overflow-x-auto px-8 pb-4"
+    class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
   >
     <div
       class="rounded-md p-2 mb-4 bg-gitify-accounts"
@@ -3636,59 +3656,63 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
     </div>
   </div>
   <div
-    class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
-    data-align="stretch"
-    data-direction="horizontal"
-    data-justify="end"
-    data-padding="condensed"
-    data-wrap="nowrap"
+    class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
   >
-    <button
-      aria-describedby=":rs:-loading-announcement"
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-      data-loading="false"
-      data-testid="account-add-new"
-      id=":rs:"
-      sx="[object Object]"
-      tabindex="0"
-      type="button"
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="end"
+      data-padding="condensed"
+      data-wrap="nowrap"
     >
-      <span
-        class="Box-sc-g0xbh4-0 srpGE"
-        data-component="buttonContent"
+      <button
+        aria-describedby=":rs:-loading-announcement"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+        data-loading="false"
+        data-testid="account-add-new"
+        id=":rs:"
         sx="[object Object]"
+        tabindex="0"
+        type="button"
       >
         <span
-          class="Box-sc-g0xbh4-0 mhHOW"
-          data-component="leadingVisual"
+          class="Box-sc-g0xbh4-0 srpGE"
+          data-component="buttonContent"
           sx="[object Object]"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-person-add"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
+          <span
+            class="Box-sc-g0xbh4-0 mhHOW"
+            data-component="leadingVisual"
+            sx="[object Object]"
           >
-            <path
-              d="M7.9 8.548h-.001a5.528 5.528 0 0 1 3.1 4.659.75.75 0 1 1-1.498.086A4.01 4.01 0 0 0 5.5 9.5a4.01 4.01 0 0 0-4.001 3.793.75.75 0 1 1-1.498-.085 5.527 5.527 0 0 1 3.1-4.66 3.5 3.5 0 1 1 4.799 0ZM13.25 0a.75.75 0 0 1 .75.75V2h1.25a.75.75 0 0 1 0 1.5H14v1.25a.75.75 0 0 1-1.5 0V3.5h-1.25a.75.75 0 0 1 0-1.5h1.25V.75a.75.75 0 0 1 .75-.75ZM5.5 4a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 4Z"
-            />
-          </svg>
-        </span>
-        <span
-          data-component="text"
-        >
-          Add new account
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-person-add"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M7.9 8.548h-.001a5.528 5.528 0 0 1 3.1 4.659.75.75 0 1 1-1.498.086A4.01 4.01 0 0 0 5.5 9.5a4.01 4.01 0 0 0-4.001 3.793.75.75 0 1 1-1.498-.085 5.527 5.527 0 0 1 3.1-4.66 3.5 3.5 0 1 1 4.799 0ZM13.25 0a.75.75 0 0 1 .75.75V2h1.25a.75.75 0 0 1 0 1.5H14v1.25a.75.75 0 0 1-1.5 0V3.5h-1.25a.75.75 0 0 1 0-1.5h1.25V.75a.75.75 0 0 1 .75-.75ZM5.5 4a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 4Z"
+              />
+            </svg>
+          </span>
+          <span
+            data-component="text"
+          >
+            Add new account
+          </span>
         </span>
-      </span>
-    </button>
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
index 1a288aa44..c79e05f1d 100644
--- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
@@ -2,59 +2,34 @@
 
 exports[`renderer/routes/Filters.tsx General should render itself & its children 1`] = `
 <div
-  class="flex flex-col h-screen"
+  class="Box-sc-g0xbh4-0 flex flex-col h-screen"
   data-testid="filters"
 >
   <div
-    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-    data-align="stretch"
-    data-direction="horizontal"
-    data-justify="space-between"
-    data-padding="spacious"
-    data-wrap="nowrap"
+    class="Box-sc-g0xbh4-0 px-6 py-4"
   >
-    <button
-      aria-describedby=":r0:-loading-announcement"
-      aria-labelledby="Go Back"
-      class="types__StyledButton-sc-ws60qy-0 kQRupk"
-      data-component="IconButton"
-      data-loading="false"
-      data-no-visuals="true"
-      data-testid="header-nav-back"
-      sx="[object Object]"
-      type="button"
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="space-between"
+      data-padding="none"
+      data-wrap="nowrap"
     >
-      <svg
-        aria-hidden="true"
-        class="octicon octicon-arrow-left"
-        display="inline-block"
-        fill="currentColor"
-        focusable="false"
-        height="16"
-        overflow="visible"
-        style="vertical-align: text-bottom;"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-        />
-      </svg>
-    </button>
-    <legend>
-      <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-        data-align="center"
-        data-direction="horizontal"
-        data-gap="condensed"
-        data-justify="start"
-        data-padding="none"
-        data-wrap="nowrap"
-        id="filters"
+      <button
+        aria-describedby=":r0:-loading-announcement"
+        aria-labelledby="Go Back"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-component="IconButton"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="header-nav-back"
+        sx="[object Object]"
+        type="button"
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-filter"
+          class="octicon octicon-arrow-left"
           display="inline-block"
           fill="currentColor"
           focusable="false"
@@ -65,20 +40,49 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
           width="16"
         >
           <path
-            d="M.75 3h14.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5ZM3 7.75A.75.75 0 0 1 3.75 7h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 7.75Zm3 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
+            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
           />
         </svg>
-        <h2
-          class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-          sx="[object Object]"
+      </button>
+      <legend>
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+          id="filters"
         >
-          Filters
-        </h2>
-      </div>
-    </legend>
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-filter"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M.75 3h14.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5ZM3 7.75A.75.75 0 0 1 3.75 7h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 7.75Zm3 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
+            />
+          </svg>
+          <h2
+            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+            sx="[object Object]"
+          >
+            Filters
+          </h2>
+        </div>
+      </legend>
+    </div>
   </div>
   <div
-    class="grow overflow-x-auto px-8 pb-4"
+    class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
   >
     <fieldset
       class="mb-3"
@@ -885,62 +889,66 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
     </fieldset>
   </div>
   <div
-    class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
-    data-align="stretch"
-    data-direction="horizontal"
-    data-justify="end"
-    data-padding="condensed"
-    data-wrap="nowrap"
+    class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
   >
-    <span
-      aria-label="Clear all filters"
-      class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-      id=":r1:"
-      role="tooltip"
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="end"
+      data-padding="condensed"
+      data-wrap="nowrap"
     >
-      <button
-        aria-describedby=":r2:-loading-announcement"
-        class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-        data-loading="false"
-        data-testid="filters-clear"
-        sx="[object Object]"
-        type="button"
+      <span
+        aria-label="Clear all filters"
+        class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
+        id=":r1:"
+        role="tooltip"
       >
-        <span
-          class="Box-sc-g0xbh4-0 srpGE"
-          data-component="buttonContent"
+        <button
+          aria-describedby=":r2:-loading-announcement"
+          class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+          data-loading="false"
+          data-testid="filters-clear"
           sx="[object Object]"
+          type="button"
         >
           <span
-            class="Box-sc-g0xbh4-0 mhHOW"
-            data-component="leadingVisual"
+            class="Box-sc-g0xbh4-0 srpGE"
+            data-component="buttonContent"
             sx="[object Object]"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-filter-remove"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
+            <span
+              class="Box-sc-g0xbh4-0 mhHOW"
+              data-component="leadingVisual"
+              sx="[object Object]"
             >
-              <path
-                d="M14.384 4.57a.752.752 0 0 0 1.061 0 .752.752 0 0 0 0-1.061l-.884-.884.883-.884A.75.75 0 0 0 14.384.68l-.884.884-.884-.884a.75.75 0 0 0-1.06 1.061l.883.884-.883.884a.75.75 0 0 0 1.06 1.061l.884-.884.884.884ZM.75 3a.75.75 0 0 0 0 1.5H9A.75.75 0 0 0 9 3H.75ZM3 7.75A.75.75 0 0 1 3.75 7h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 7.75Zm3 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
-              />
-            </svg>
-          </span>
-          <span
-            data-component="text"
-          >
-            Clear filters
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-filter-remove"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M14.384 4.57a.752.752 0 0 0 1.061 0 .752.752 0 0 0 0-1.061l-.884-.884.883-.884A.75.75 0 0 0 14.384.68l-.884.884-.884-.884a.75.75 0 0 0-1.06 1.061l.883.884-.883.884a.75.75 0 0 0 1.06 1.061l.884-.884.884.884ZM.75 3a.75.75 0 0 0 0 1.5H9A.75.75 0 0 0 9 3H.75ZM3 7.75A.75.75 0 0 1 3.75 7h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 7.75Zm3 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
+                />
+              </svg>
+            </span>
+            <span
+              data-component="text"
+            >
+              Clear filters
+            </span>
           </span>
-        </span>
-      </button>
-    </span>
+        </button>
+      </span>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index bbdccd7db..7551718b3 100644
--- a/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -5,57 +5,35 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <div>
+      <div
+        class="Box-sc-g0xbh4-0 flex flex-col h-screen"
+        data-testid="Login With OAuth App"
+      >
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="stretch"
-          data-direction="horizontal"
-          data-justify="space-between"
-          data-padding="spacious"
-          data-wrap="nowrap"
+          class="Box-sc-g0xbh4-0 px-6 py-4"
         >
-          <button
-            aria-describedby=":r0:-loading-announcement"
-            aria-labelledby="Go Back"
-            class="types__StyledButton-sc-ws60qy-0 kQRupk"
-            data-component="IconButton"
-            data-loading="false"
-            data-no-visuals="true"
-            data-testid="header-nav-back"
-            sx="[object Object]"
-            type="button"
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-justify="space-between"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-arrow-left"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-              />
-            </svg>
-          </button>
-          <legend>
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
-              data-direction="horizontal"
-              data-gap="condensed"
-              data-justify="start"
-              data-padding="none"
-              data-wrap="nowrap"
-              id="login-with oauth app"
+            <button
+              aria-describedby=":r0:-loading-announcement"
+              aria-labelledby="Go Back"
+              class="types__StyledButton-sc-ws60qy-0 kQRupk"
+              data-component="IconButton"
+              data-loading="false"
+              data-no-visuals="true"
+              data-testid="header-nav-back"
+              sx="[object Object]"
+              type="button"
             >
               <svg
                 aria-hidden="true"
-                class="octicon octicon-person"
+                class="octicon octicon-arrow-left"
                 display="inline-block"
                 fill="currentColor"
                 focusable="false"
@@ -66,332 +44,461 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 width="16"
               >
                 <path
-                  d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+                  d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
                 />
               </svg>
-              <h2
-                class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-                sx="[object Object]"
+            </button>
+            <legend>
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+                id="login-with oauth app"
               >
-                Login with OAuth App
-              </h2>
-            </div>
-          </legend>
+                <svg
+                  aria-hidden="true"
+                  class="octicon octicon-person"
+                  display="inline-block"
+                  fill="currentColor"
+                  focusable="false"
+                  height="16"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+                  />
+                </svg>
+                <h2
+                  class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+                  sx="[object Object]"
+                >
+                  Login with OAuth App
+                </h2>
+              </div>
+            </legend>
+          </div>
         </div>
         <div
-          class="px-8"
+          class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
         >
           <div
-            class="flex flex-col h-full"
-            data-testid="Login With OAuth App"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="vertical"
+            data-gap="normal"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
           >
-            <form
-              class="-mt-5"
+            <div
+              alignitems="flex-start"
+              class="Box-sc-g0xbh4-0 XtrQP"
+              display="flex"
+              flexdirection="column"
+              sx="[object Object]"
             >
-              <div
-                class="mb-4"
+              <label
+                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hmMihG"
+                for=":r1:"
+                sx="[object Object]"
               >
-                <label
-                  class="mb-2 block text-sm font-semibold tracking-wide"
-                  for="hostname"
+                <span
+                  class="Box-sc-g0xbh4-0 kNbgVw"
+                  display="flex"
                 >
-                  Hostname
-                </label>
+                  <div
+                    class="Box-sc-g0xbh4-0 gspezS"
+                    mr="1"
+                  >
+                    Hostname
+                  </div>
+                  <span>
+                    *
+                  </span>
+                </span>
+              </label>
+              <span
+                aria-busy="false"
+                class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 fGSBWG iLQRLY TextInput-wrapper"
+                sx="[object Object]"
+              >
                 <input
-                  class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-red-500"
-                  id="hostname"
+                  aria-describedby=":r1:-caption"
+                  aria-invalid="false"
+                  aria-required="true"
+                  class="UnstyledTextInput-sc-14ypya-0 dnEFlY"
+                  data-component="input"
+                  data-testid="login-hostname"
+                  id=":r1:"
                   name="hostname"
-                  placeholder="github.company.com"
+                  placeholder="github.com"
                   type="text"
-                  value=""
+                  value="github.com"
                 />
-                <div
-                  class="mt-3 text-xs text-gitify-font"
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 bnvpKU"
+                color="fg.muted"
+                display="block"
+                font-size="0"
+                id=":r1:-caption"
+              >
+                <i
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
                 >
-                  <div
-                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                    data-align="stretch"
-                    data-direction="vertical"
-                    data-gap="condensed"
-                    data-justify="start"
-                    data-padding="none"
-                    data-wrap="nowrap"
+                  Change only if you are using GitHub Enterprise Server
+                </i>
+              </span>
+            </div>
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+            >
+              <button
+                aria-describedby=":r2:-loading-announcement"
+                class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                data-loading="false"
+                data-size="small"
+                data-testid="login-create-oauth-app"
+                sx="[object Object]"
+                type="button"
+              >
+                <span
+                  class="Box-sc-g0xbh4-0 srpGE"
+                  data-component="buttonContent"
+                  sx="[object Object]"
+                >
+                  <span
+                    class="Box-sc-g0xbh4-0 mhHOW"
+                    data-component="leadingVisual"
+                    sx="[object Object]"
                   >
-                    <div
-                      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                      data-align="center"
-                      data-direction="horizontal"
-                      data-gap="condensed"
-                      data-justify="start"
-                      data-padding="none"
-                      data-wrap="nowrap"
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-person"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="16"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="16"
                     >
-                      <button
-                        aria-describedby=":r1:-loading-announcement"
-                        class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-                        data-loading="false"
-                        data-size="small"
-                        data-testid="login-create-oauth-app"
-                        disabled=""
-                        sx="[object Object]"
-                        type="button"
-                      >
-                        <span
-                          class="Box-sc-g0xbh4-0 srpGE"
-                          data-component="buttonContent"
-                          sx="[object Object]"
-                        >
-                          <span
-                            class="Box-sc-g0xbh4-0 mhHOW"
-                            data-component="leadingVisual"
-                            sx="[object Object]"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="octicon octicon-person"
-                              display="inline-block"
-                              fill="currentColor"
-                              focusable="false"
-                              height="16"
-                              overflow="visible"
-                              style="vertical-align: text-bottom;"
-                              viewBox="0 0 16 16"
-                              width="16"
-                            >
-                              <path
-                                d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            data-component="text"
-                          >
-                            Create new OAuth App
-                          </span>
-                        </span>
-                      </button>
-                      <span
-                        class="Text-sc-17v1xeu-0 hmAFGJ"
-                      >
-                        on GitHub then paste your
-                      </span>
-                    </div>
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      <i
-                        class="Text-sc-17v1xeu-0 hmAFGJ"
-                      >
-                        client id and client secret
-                      </i>
-                       below.
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="mb-4"
+                      <path
+                        d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    data-component="text"
+                  >
+                    Create new OAuth App
+                  </span>
+                </span>
+              </button>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xs"
               >
-                <label
-                  class="mb-2 block text-sm font-semibold tracking-wide"
-                  for="clientId"
+                and use your 
+                <i
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
                 >
-                  Client ID
-                </label>
+                  client id & secret
+                </i>
+                 below.
+              </span>
+            </div>
+            <div
+              alignitems="flex-start"
+              class="Box-sc-g0xbh4-0 XtrQP"
+              display="flex"
+              flexdirection="column"
+              sx="[object Object]"
+            >
+              <label
+                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hmMihG"
+                for=":r3:"
+                sx="[object Object]"
+              >
+                <span
+                  class="Box-sc-g0xbh4-0 kNbgVw"
+                  display="flex"
+                >
+                  <div
+                    class="Box-sc-g0xbh4-0 gspezS"
+                    mr="1"
+                  >
+                    Client ID
+                  </div>
+                  <span>
+                    *
+                  </span>
+                </span>
+              </label>
+              <span
+                aria-busy="false"
+                class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 fGSBWG iLQRLY TextInput-wrapper"
+                sx="[object Object]"
+              >
                 <input
-                  class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-red-500"
-                  id="clientId"
+                  aria-describedby=""
+                  aria-invalid="false"
+                  aria-required="true"
+                  class="UnstyledTextInput-sc-14ypya-0 dnEFlY"
+                  data-component="input"
+                  data-testid="login-clientId"
+                  id=":r3:"
                   name="clientId"
-                  placeholder="123456789"
+                  placeholder="Your generated client id (20 characters)"
                   type="text"
                   value=""
                 />
-              </div>
-              <div
-                class="mb-4"
+              </span>
+            </div>
+            <div
+              alignitems="flex-start"
+              class="Box-sc-g0xbh4-0 XtrQP"
+              display="flex"
+              flexdirection="column"
+              sx="[object Object]"
+            >
+              <label
+                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hmMihG"
+                for=":r4:"
+                sx="[object Object]"
               >
-                <label
-                  class="mb-2 block text-sm font-semibold tracking-wide"
-                  for="clientSecret"
+                <span
+                  class="Box-sc-g0xbh4-0 kNbgVw"
+                  display="flex"
                 >
-                  Client Secret
-                </label>
+                  <div
+                    class="Box-sc-g0xbh4-0 gspezS"
+                    mr="1"
+                  >
+                    Client Secret
+                  </div>
+                  <span>
+                    *
+                  </span>
+                </span>
+              </label>
+              <span
+                aria-busy="false"
+                class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 bTIaXm cvYBKD TextInput-wrapper"
+                sx="[object Object]"
+              >
                 <input
-                  class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-red-500"
-                  id="clientSecret"
+                  aria-describedby=""
+                  aria-invalid="false"
+                  aria-required="true"
+                  class="UnstyledTextInput-sc-14ypya-0 dnEFlY"
+                  data-component="input"
+                  data-testid="login-clientSecret"
+                  id=":r4:"
                   name="clientSecret"
-                  placeholder="ABC123DEF456"
-                  type="text"
+                  placeholder="Your generated client secret (40 characters)"
+                  type="password"
                   value=""
                 />
-              </div>
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="center"
-                data-direction="horizontal"
-                data-justify="space-between"
-                data-padding="none"
-                data-wrap="nowrap"
-              >
                 <span
-                  aria-label="GitHub documentation"
-                  class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-                  id=":r2:"
-                  role="tooltip"
+                  class="Box-sc-g0xbh4-0 BAYYW TextInput-action"
+                  lineheight="0"
+                  marginleft="1"
+                  marginright="1"
                 >
                   <button
-                    aria-describedby=":r3:-loading-announcement"
-                    class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                    aria-describedby=":r6:-loading-announcement"
+                    aria-labelledby=":r5:"
+                    class="types__StyledButton-sc-ws60qy-0 lfpsMw"
+                    data-component="IconButton"
                     data-loading="false"
+                    data-no-visuals="true"
                     data-size="small"
-                    data-testid="login-docs"
                     sx="[object Object]"
                     type="button"
                   >
-                    <span
-                      class="Box-sc-g0xbh4-0 srpGE"
-                      data-component="buttonContent"
-                      sx="[object Object]"
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-eye"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="16"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="16"
                     >
-                      <span
-                        class="Box-sc-g0xbh4-0 mhHOW"
-                        data-component="leadingVisual"
-                        sx="[object Object]"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="octicon octicon-book"
-                          display="inline-block"
-                          fill="currentColor"
-                          focusable="false"
-                          height="16"
-                          overflow="visible"
-                          style="vertical-align: text-bottom;"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
-                          />
-                        </svg>
-                      </span>
-                      <span
-                        data-component="text"
-                      >
-                        Docs
-                      </span>
-                    </span>
+                      <path
+                        d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"
+                      />
+                    </svg>
                   </button>
+                  <span
+                    aria-hidden="true"
+                    class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+                    data-direction="s"
+                    id=":r5:"
+                    popover="auto"
+                  >
+                    Show token
+                  </span>
                 </span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
+        >
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="horizontal"
+            data-justify="space-between"
+            data-padding="condensed"
+            data-wrap="nowrap"
+          >
+            <span
+              aria-label="GitHub documentation"
+              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
+              id=":r7:"
+              role="tooltip"
+            >
+              <button
+                aria-describedby=":r8:-loading-announcement"
+                class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                data-loading="false"
+                data-size="small"
+                data-testid="login-docs"
+                sx="[object Object]"
+                type="button"
+              >
                 <span
-                  aria-label="Login"
-                  class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-                  id=":r4:"
-                  role="tooltip"
+                  class="Box-sc-g0xbh4-0 srpGE"
+                  data-component="buttonContent"
+                  sx="[object Object]"
                 >
-                  <button
-                    aria-describedby=":r5:-loading-announcement"
-                    class="types__StyledButton-sc-ws60qy-0 gEWhIh"
-                    data-loading="false"
-                    data-testid="login-submit"
-                    disabled=""
+                  <span
+                    class="Box-sc-g0xbh4-0 mhHOW"
+                    data-component="leadingVisual"
                     sx="[object Object]"
-                    type="submit"
                   >
-                    <span
-                      class="Box-sc-g0xbh4-0 srpGE"
-                      data-component="buttonContent"
-                      sx="[object Object]"
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-book"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="16"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="16"
                     >
-                      <span
-                        class="Box-sc-g0xbh4-0 mhHOW"
-                        data-component="leadingVisual"
-                        sx="[object Object]"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="octicon octicon-sign-in"
-                          display="inline-block"
-                          fill="currentColor"
-                          focusable="false"
-                          height="16"
-                          overflow="visible"
-                          style="vertical-align: text-bottom;"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
-                          />
-                        </svg>
-                      </span>
-                      <span
-                        data-component="text"
-                      >
-                        Login
-                      </span>
-                    </span>
-                  </button>
+                      <path
+                        d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    data-component="text"
+                  >
+                    Docs
+                  </span>
                 </span>
-              </div>
-            </form>
+              </button>
+            </span>
+            <button
+              aria-describedby=":r9:-loading-announcement"
+              class="types__StyledButton-sc-ws60qy-0 gEWhIh"
+              data-loading="false"
+              data-testid="login-submit"
+              sx="[object Object]"
+              type="button"
+            >
+              <span
+                class="Box-sc-g0xbh4-0 srpGE"
+                data-component="buttonContent"
+                sx="[object Object]"
+              >
+                <span
+                  class="Box-sc-g0xbh4-0 mhHOW"
+                  data-component="leadingVisual"
+                  sx="[object Object]"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-sign-in"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  data-component="text"
+                >
+                  Login
+                </span>
+              </span>
+            </button>
           </div>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
-    <div>
+    <div
+      class="Box-sc-g0xbh4-0 flex flex-col h-screen"
+      data-testid="Login With OAuth App"
+    >
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-        data-align="stretch"
-        data-direction="horizontal"
-        data-justify="space-between"
-        data-padding="spacious"
-        data-wrap="nowrap"
+        class="Box-sc-g0xbh4-0 px-6 py-4"
       >
-        <button
-          aria-describedby=":r0:-loading-announcement"
-          aria-labelledby="Go Back"
-          class="types__StyledButton-sc-ws60qy-0 kQRupk"
-          data-component="IconButton"
-          data-loading="false"
-          data-no-visuals="true"
-          data-testid="header-nav-back"
-          sx="[object Object]"
-          type="button"
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-justify="space-between"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-arrow-left"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-            />
-          </svg>
-        </button>
-        <legend>
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
-            id="login-with oauth app"
+          <button
+            aria-describedby=":r0:-loading-announcement"
+            aria-labelledby="Go Back"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="header-nav-back"
+            sx="[object Object]"
+            type="button"
           >
             <svg
               aria-hidden="true"
-              class="octicon octicon-person"
+              class="octicon octicon-arrow-left"
               display="inline-block"
               fill="currentColor"
               focusable="false"
@@ -402,275 +509,426 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               width="16"
             >
               <path
-                d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+                d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
               />
             </svg>
-            <h2
-              class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-              sx="[object Object]"
+          </button>
+          <legend>
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+              id="login-with oauth app"
             >
-              Login with OAuth App
-            </h2>
-          </div>
-        </legend>
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-person"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+                />
+              </svg>
+              <h2
+                class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+                sx="[object Object]"
+              >
+                Login with OAuth App
+              </h2>
+            </div>
+          </legend>
+        </div>
       </div>
       <div
-        class="px-8"
+        class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
       >
         <div
-          class="flex flex-col h-full"
-          data-testid="Login With OAuth App"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="vertical"
+          data-gap="normal"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
         >
-          <form
-            class="-mt-5"
+          <div
+            alignitems="flex-start"
+            class="Box-sc-g0xbh4-0 XtrQP"
+            display="flex"
+            flexdirection="column"
+            sx="[object Object]"
           >
-            <div
-              class="mb-4"
+            <label
+              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hmMihG"
+              for=":r1:"
+              sx="[object Object]"
             >
-              <label
-                class="mb-2 block text-sm font-semibold tracking-wide"
-                for="hostname"
+              <span
+                class="Box-sc-g0xbh4-0 kNbgVw"
+                display="flex"
               >
-                Hostname
-              </label>
+                <div
+                  class="Box-sc-g0xbh4-0 gspezS"
+                  mr="1"
+                >
+                  Hostname
+                </div>
+                <span>
+                  *
+                </span>
+              </span>
+            </label>
+            <span
+              aria-busy="false"
+              class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 fGSBWG iLQRLY TextInput-wrapper"
+              sx="[object Object]"
+            >
               <input
-                class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-red-500"
-                id="hostname"
+                aria-describedby=":r1:-caption"
+                aria-invalid="false"
+                aria-required="true"
+                class="UnstyledTextInput-sc-14ypya-0 dnEFlY"
+                data-component="input"
+                data-testid="login-hostname"
+                id=":r1:"
                 name="hostname"
-                placeholder="github.company.com"
+                placeholder="github.com"
                 type="text"
-                value=""
+                value="github.com"
               />
-              <div
-                class="mt-3 text-xs text-gitify-font"
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 bnvpKU"
+              color="fg.muted"
+              display="block"
+              font-size="0"
+              id=":r1:-caption"
+            >
+              <i
+                class="Text-sc-17v1xeu-0 hmAFGJ"
               >
-                <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                  data-align="stretch"
-                  data-direction="vertical"
-                  data-gap="condensed"
-                  data-justify="start"
-                  data-padding="none"
-                  data-wrap="nowrap"
+                Change only if you are using GitHub Enterprise Server
+              </i>
+            </span>
+          </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <button
+              aria-describedby=":r2:-loading-announcement"
+              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+              data-loading="false"
+              data-size="small"
+              data-testid="login-create-oauth-app"
+              sx="[object Object]"
+              type="button"
+            >
+              <span
+                class="Box-sc-g0xbh4-0 srpGE"
+                data-component="buttonContent"
+                sx="[object Object]"
+              >
+                <span
+                  class="Box-sc-g0xbh4-0 mhHOW"
+                  data-component="leadingVisual"
+                  sx="[object Object]"
                 >
-                  <div
-                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                    data-align="center"
-                    data-direction="horizontal"
-                    data-gap="condensed"
-                    data-justify="start"
-                    data-padding="none"
-                    data-wrap="nowrap"
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-person"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    <button
-                      aria-describedby=":r1:-loading-announcement"
-                      class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-                      data-loading="false"
-                      data-size="small"
-                      data-testid="login-create-oauth-app"
-                      disabled=""
-                      sx="[object Object]"
-                      type="button"
-                    >
-                      <span
-                        class="Box-sc-g0xbh4-0 srpGE"
-                        data-component="buttonContent"
-                        sx="[object Object]"
-                      >
-                        <span
-                          class="Box-sc-g0xbh4-0 mhHOW"
-                          data-component="leadingVisual"
-                          sx="[object Object]"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="octicon octicon-person"
-                            display="inline-block"
-                            fill="currentColor"
-                            focusable="false"
-                            height="16"
-                            overflow="visible"
-                            style="vertical-align: text-bottom;"
-                            viewBox="0 0 16 16"
-                            width="16"
-                          >
-                            <path
-                              d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          data-component="text"
-                        >
-                          Create new OAuth App
-                        </span>
-                      </span>
-                    </button>
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      on GitHub then paste your
-                    </span>
-                  </div>
-                  <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
-                  >
-                    <i
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      client id and client secret
-                    </i>
-                     below.
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div
-              class="mb-4"
+                    <path
+                      d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  data-component="text"
+                >
+                  Create new OAuth App
+                </span>
+              </span>
+            </button>
+            <span
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xs"
             >
-              <label
-                class="mb-2 block text-sm font-semibold tracking-wide"
-                for="clientId"
+              and use your 
+              <i
+                class="Text-sc-17v1xeu-0 hmAFGJ"
               >
-                Client ID
-              </label>
+                client id & secret
+              </i>
+               below.
+            </span>
+          </div>
+          <div
+            alignitems="flex-start"
+            class="Box-sc-g0xbh4-0 XtrQP"
+            display="flex"
+            flexdirection="column"
+            sx="[object Object]"
+          >
+            <label
+              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hmMihG"
+              for=":r3:"
+              sx="[object Object]"
+            >
+              <span
+                class="Box-sc-g0xbh4-0 kNbgVw"
+                display="flex"
+              >
+                <div
+                  class="Box-sc-g0xbh4-0 gspezS"
+                  mr="1"
+                >
+                  Client ID
+                </div>
+                <span>
+                  *
+                </span>
+              </span>
+            </label>
+            <span
+              aria-busy="false"
+              class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 fGSBWG iLQRLY TextInput-wrapper"
+              sx="[object Object]"
+            >
               <input
-                class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-red-500"
-                id="clientId"
+                aria-describedby=""
+                aria-invalid="false"
+                aria-required="true"
+                class="UnstyledTextInput-sc-14ypya-0 dnEFlY"
+                data-component="input"
+                data-testid="login-clientId"
+                id=":r3:"
                 name="clientId"
-                placeholder="123456789"
+                placeholder="Your generated client id (20 characters)"
                 type="text"
                 value=""
               />
-            </div>
-            <div
-              class="mb-4"
+            </span>
+          </div>
+          <div
+            alignitems="flex-start"
+            class="Box-sc-g0xbh4-0 XtrQP"
+            display="flex"
+            flexdirection="column"
+            sx="[object Object]"
+          >
+            <label
+              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hmMihG"
+              for=":r4:"
+              sx="[object Object]"
             >
-              <label
-                class="mb-2 block text-sm font-semibold tracking-wide"
-                for="clientSecret"
+              <span
+                class="Box-sc-g0xbh4-0 kNbgVw"
+                display="flex"
               >
-                Client Secret
-              </label>
+                <div
+                  class="Box-sc-g0xbh4-0 gspezS"
+                  mr="1"
+                >
+                  Client Secret
+                </div>
+                <span>
+                  *
+                </span>
+              </span>
+            </label>
+            <span
+              aria-busy="false"
+              class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 bTIaXm cvYBKD TextInput-wrapper"
+              sx="[object Object]"
+            >
               <input
-                class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-red-500"
-                id="clientSecret"
+                aria-describedby=""
+                aria-invalid="false"
+                aria-required="true"
+                class="UnstyledTextInput-sc-14ypya-0 dnEFlY"
+                data-component="input"
+                data-testid="login-clientSecret"
+                id=":r4:"
                 name="clientSecret"
-                placeholder="ABC123DEF456"
-                type="text"
+                placeholder="Your generated client secret (40 characters)"
+                type="password"
                 value=""
               />
-            </div>
-            <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
-              data-direction="horizontal"
-              data-justify="space-between"
-              data-padding="none"
-              data-wrap="nowrap"
-            >
               <span
-                aria-label="GitHub documentation"
-                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-                id=":r2:"
-                role="tooltip"
+                class="Box-sc-g0xbh4-0 BAYYW TextInput-action"
+                lineheight="0"
+                marginleft="1"
+                marginright="1"
               >
                 <button
-                  aria-describedby=":r3:-loading-announcement"
-                  class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                  aria-describedby=":r6:-loading-announcement"
+                  aria-labelledby=":r5:"
+                  class="types__StyledButton-sc-ws60qy-0 lfpsMw"
+                  data-component="IconButton"
                   data-loading="false"
+                  data-no-visuals="true"
                   data-size="small"
-                  data-testid="login-docs"
                   sx="[object Object]"
                   type="button"
                 >
-                  <span
-                    class="Box-sc-g0xbh4-0 srpGE"
-                    data-component="buttonContent"
-                    sx="[object Object]"
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-eye"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    <span
-                      class="Box-sc-g0xbh4-0 mhHOW"
-                      data-component="leadingVisual"
-                      sx="[object Object]"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="octicon octicon-book"
-                        display="inline-block"
-                        fill="currentColor"
-                        focusable="false"
-                        height="16"
-                        overflow="visible"
-                        style="vertical-align: text-bottom;"
-                        viewBox="0 0 16 16"
-                        width="16"
-                      >
-                        <path
-                          d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
-                        />
-                      </svg>
-                    </span>
-                    <span
-                      data-component="text"
-                    >
-                      Docs
-                    </span>
-                  </span>
+                    <path
+                      d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"
+                    />
+                  </svg>
                 </button>
+                <span
+                  aria-hidden="true"
+                  class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+                  data-direction="s"
+                  id=":r5:"
+                  popover="auto"
+                >
+                  Show token
+                </span>
               </span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-justify="space-between"
+          data-padding="condensed"
+          data-wrap="nowrap"
+        >
+          <span
+            aria-label="GitHub documentation"
+            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
+            id=":r7:"
+            role="tooltip"
+          >
+            <button
+              aria-describedby=":r8:-loading-announcement"
+              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+              data-loading="false"
+              data-size="small"
+              data-testid="login-docs"
+              sx="[object Object]"
+              type="button"
+            >
               <span
-                aria-label="Login"
-                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-                id=":r4:"
-                role="tooltip"
+                class="Box-sc-g0xbh4-0 srpGE"
+                data-component="buttonContent"
+                sx="[object Object]"
               >
-                <button
-                  aria-describedby=":r5:-loading-announcement"
-                  class="types__StyledButton-sc-ws60qy-0 gEWhIh"
-                  data-loading="false"
-                  data-testid="login-submit"
-                  disabled=""
+                <span
+                  class="Box-sc-g0xbh4-0 mhHOW"
+                  data-component="leadingVisual"
                   sx="[object Object]"
-                  type="submit"
                 >
-                  <span
-                    class="Box-sc-g0xbh4-0 srpGE"
-                    data-component="buttonContent"
-                    sx="[object Object]"
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-book"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="16"
                   >
-                    <span
-                      class="Box-sc-g0xbh4-0 mhHOW"
-                      data-component="leadingVisual"
-                      sx="[object Object]"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="octicon octicon-sign-in"
-                        display="inline-block"
-                        fill="currentColor"
-                        focusable="false"
-                        height="16"
-                        overflow="visible"
-                        style="vertical-align: text-bottom;"
-                        viewBox="0 0 16 16"
-                        width="16"
-                      >
-                        <path
-                          d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
-                        />
-                      </svg>
-                    </span>
-                    <span
-                      data-component="text"
-                    >
-                      Login
-                    </span>
-                  </span>
-                </button>
+                    <path
+                      d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  data-component="text"
+                >
+                  Docs
+                </span>
               </span>
-            </div>
-          </form>
+            </button>
+          </span>
+          <button
+            aria-describedby=":r9:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 gEWhIh"
+            data-loading="false"
+            data-testid="login-submit"
+            sx="[object Object]"
+            type="button"
+          >
+            <span
+              class="Box-sc-g0xbh4-0 srpGE"
+              data-component="buttonContent"
+              sx="[object Object]"
+            >
+              <span
+                class="Box-sc-g0xbh4-0 mhHOW"
+                data-component="leadingVisual"
+                sx="[object Object]"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="octicon octicon-sign-in"
+                  display="inline-block"
+                  fill="currentColor"
+                  focusable="false"
+                  height="16"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
+                  />
+                </svg>
+              </span>
+              <span
+                data-component="text"
+              >
+                Login
+              </span>
+            </span>
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index c62d9a7ec..4f7aa5447 100644
--- a/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -6,223 +6,181 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
   "baseElement": <body>
     <div>
       <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-        data-align="stretch"
-        data-direction="horizontal"
-        data-justify="space-between"
-        data-padding="spacious"
-        data-wrap="nowrap"
+        class="Box-sc-g0xbh4-0 flex flex-col h-screen"
+        data-testid="Login With Personal Access Token"
       >
-        <button
-          aria-describedby=":r0:-loading-announcement"
-          aria-labelledby="Go Back"
-          class="types__StyledButton-sc-ws60qy-0 kQRupk"
-          data-component="IconButton"
-          data-loading="false"
-          data-no-visuals="true"
-          data-testid="header-nav-back"
-          sx="[object Object]"
-          type="button"
+        <div
+          class="Box-sc-g0xbh4-0 px-6 py-4"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-arrow-left"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-            />
-          </svg>
-        </button>
-        <legend>
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
+            data-align="stretch"
             data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
+            data-justify="space-between"
             data-padding="none"
             data-wrap="nowrap"
-            id="login-with personal access token"
           >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-key"
-              display="inline-block"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              overflow="visible"
-              style="vertical-align: text-bottom;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-              />
-            </svg>
-            <h2
-              class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+            <button
+              aria-describedby=":r0:-loading-announcement"
+              aria-labelledby="Go Back"
+              class="types__StyledButton-sc-ws60qy-0 kQRupk"
+              data-component="IconButton"
+              data-loading="false"
+              data-no-visuals="true"
+              data-testid="header-nav-back"
               sx="[object Object]"
+              type="button"
             >
-              Login with Personal Access Token
-            </h2>
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-arrow-left"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+                />
+              </svg>
+            </button>
+            <legend>
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
+                id="login-with personal access token"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="octicon octicon-key"
+                  display="inline-block"
+                  fill="currentColor"
+                  focusable="false"
+                  height="16"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+                  />
+                </svg>
+                <h2
+                  class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+                  sx="[object Object]"
+                >
+                  Login with Personal Access Token
+                </h2>
+              </div>
+            </legend>
           </div>
-        </legend>
-      </div>
-      <div
-        class="px-8"
-      >
+        </div>
         <div
-          class="flex flex-col h-full"
-          data-testid="Login With Personal Access Token"
+          class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
         >
-          <form>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="vertical"
+            data-gap="normal"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
             <div
-              class="mb-4"
+              alignitems="flex-start"
+              class="Box-sc-g0xbh4-0 XtrQP"
+              display="flex"
+              flexdirection="column"
+              sx="[object Object]"
             >
               <label
-                class="mb-2 block text-sm font-semibold tracking-wide"
-                for="hostname"
-              >
-                Hostname
-              </label>
-              <input
-                class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-gray-500"
-                id="hostname"
-                name="hostname"
-                placeholder="github.company.com"
-                type="text"
-                value="github.com"
-              />
-              <div
-                class="mt-3 text-xs text-gitify-font"
+                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hmMihG"
+                for=":r1:"
+                sx="[object Object]"
               >
-                <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                  data-align="stretch"
-                  data-direction="vertical"
-                  data-gap="condensed"
-                  data-justify="start"
-                  data-padding="none"
-                  data-wrap="nowrap"
+                <span
+                  class="Box-sc-g0xbh4-0 kNbgVw"
+                  display="flex"
                 >
-                  <i
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
-                  >
-                    Change only if you are using GitHub Enterprise Server.
-                  </i>
                   <div
-                    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                    data-align="center"
-                    data-direction="horizontal"
-                    data-gap="condensed"
-                    data-justify="start"
-                    data-padding="none"
-                    data-wrap="nowrap"
+                    class="Box-sc-g0xbh4-0 gspezS"
+                    mr="1"
                   >
-                    <button
-                      aria-describedby=":r1:-loading-announcement"
-                      class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-                      data-loading="false"
-                      data-size="small"
-                      data-testid="login-create-token"
-                      sx="[object Object]"
-                      type="button"
-                    >
-                      <span
-                        class="Box-sc-g0xbh4-0 srpGE"
-                        data-component="buttonContent"
-                        sx="[object Object]"
-                      >
-                        <span
-                          class="Box-sc-g0xbh4-0 mhHOW"
-                          data-component="leadingVisual"
-                          sx="[object Object]"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="octicon octicon-key"
-                            display="inline-block"
-                            fill="currentColor"
-                            focusable="false"
-                            height="16"
-                            overflow="visible"
-                            style="vertical-align: text-bottom;"
-                            viewBox="0 0 16 16"
-                            width="16"
-                          >
-                            <path
-                              d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          data-component="text"
-                        >
-                          Generate a PAT
-                        </span>
-                      </span>
-                    </button>
-                    <span
-                      class="Text-sc-17v1xeu-0 hmAFGJ"
-                    >
-                      on GitHub then paste your token below.
-                    </span>
+                    Hostname
                   </div>
-                  <i
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
-                  >
-                    The required scopes will be automatically selected for you.
-                  </i>
-                </div>
-              </div>
-            </div>
-            <div
-              class="mb-4"
-            >
-              <label
-                class="mb-2 block text-sm font-semibold tracking-wide"
-                for="token"
-              >
-                Token
+                  <span>
+                    *
+                  </span>
+                </span>
               </label>
-              <input
-                class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-red-500"
-                id="token"
-                name="token"
-                placeholder="The 40 characters token generated on GitHub"
-                type="text"
-                value=""
-              />
+              <span
+                aria-busy="false"
+                class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 fGSBWG iLQRLY TextInput-wrapper"
+                sx="[object Object]"
+              >
+                <input
+                  aria-describedby=":r1:-caption"
+                  aria-invalid="false"
+                  aria-required="true"
+                  class="UnstyledTextInput-sc-14ypya-0 dnEFlY"
+                  data-component="input"
+                  data-testid="login-hostname"
+                  id=":r1:"
+                  name="hostname"
+                  placeholder="github.com"
+                  type="text"
+                  value="github.com"
+                />
+              </span>
+              <span
+                class="Text-sc-17v1xeu-0 bnvpKU"
+                color="fg.muted"
+                display="block"
+                font-size="0"
+                id=":r1:-caption"
+              >
+                <i
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  Change only if you are using GitHub Enterprise Server
+                </i>
+              </span>
             </div>
             <div
               class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-              data-align="center"
-              data-direction="horizontal"
-              data-justify="space-between"
+              data-align="stretch"
+              data-direction="vertical"
+              data-gap="condensed"
+              data-justify="start"
               data-padding="none"
               data-wrap="nowrap"
             >
-              <span
-                aria-label="GitHub documentation"
-                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-                id=":r2:"
-                role="tooltip"
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
               >
                 <button
-                  aria-describedby=":r3:-loading-announcement"
+                  aria-describedby=":r2:-loading-announcement"
                   class="types__StyledButton-sc-ws60qy-0 jTCgqj"
                   data-loading="false"
                   data-size="small"
-                  data-testid="login-docs"
+                  data-testid="login-create-token"
                   sx="[object Object]"
                   type="button"
                 >
@@ -238,7 +196,7 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
                     >
                       <svg
                         aria-hidden="true"
-                        class="octicon octicon-book"
+                        class="octicon octicon-key"
                         display="inline-block"
                         fill="currentColor"
                         focusable="false"
@@ -249,289 +207,156 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
                         width="16"
                       >
                         <path
-                          d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
+                          d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
                         />
                       </svg>
                     </span>
                     <span
                       data-component="text"
                     >
-                      Docs
+                      Generate a PAT
                     </span>
                   </span>
                 </button>
-              </span>
-              <span
-                aria-label="Login"
-                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-                id=":r4:"
-                role="tooltip"
+                <span
+                  class="Text-sc-17v1xeu-0 hmAFGJ text-xs"
+                >
+                  on GitHub to paste the token below.
+                </span>
+              </div>
+              <i
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xs"
               >
-                <button
-                  aria-describedby=":r5:-loading-announcement"
-                  class="types__StyledButton-sc-ws60qy-0 gEWhIh"
-                  data-loading="false"
-                  data-testid="login-submit"
-                  disabled=""
-                  sx="[object Object]"
-                  type="submit"
+                The
+                 
+                <span
+                  aria-label="read:user, notifications, repo"
+                  class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
+                  id=":r3:"
+                  role="tooltip"
                 >
-                  <span
-                    class="Box-sc-g0xbh4-0 srpGE"
-                    data-component="buttonContent"
-                    sx="[object Object]"
+                  <u
+                    class="Text-sc-17v1xeu-0 hmAFGJ"
                   >
-                    <span
-                      class="Box-sc-g0xbh4-0 mhHOW"
-                      data-component="leadingVisual"
-                      sx="[object Object]"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="octicon octicon-sign-in"
-                        display="inline-block"
-                        fill="currentColor"
-                        focusable="false"
-                        height="16"
-                        overflow="visible"
-                        style="vertical-align: text-bottom;"
-                        viewBox="0 0 16 16"
-                        width="16"
-                      >
-                        <path
-                          d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
-                        />
-                      </svg>
-                    </span>
-                    <span
-                      data-component="text"
-                    >
-                      Login
-                    </span>
-                  </span>
-                </button>
-              </span>
+                    required scopes
+                  </u>
+                </span>
+                 
+                will be automatically selected for you.
+              </i>
             </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-      data-align="stretch"
-      data-direction="horizontal"
-      data-justify="space-between"
-      data-padding="spacious"
-      data-wrap="nowrap"
-    >
-      <button
-        aria-describedby=":r0:-loading-announcement"
-        aria-labelledby="Go Back"
-        class="types__StyledButton-sc-ws60qy-0 kQRupk"
-        data-component="IconButton"
-        data-loading="false"
-        data-no-visuals="true"
-        data-testid="header-nav-back"
-        sx="[object Object]"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="octicon octicon-arrow-left"
-          display="inline-block"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          overflow="visible"
-          style="vertical-align: text-bottom;"
-          viewBox="0 0 16 16"
-          width="16"
-        >
-          <path
-            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-          />
-        </svg>
-      </button>
-      <legend>
-        <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-          data-align="center"
-          data-direction="horizontal"
-          data-gap="condensed"
-          data-justify="start"
-          data-padding="none"
-          data-wrap="nowrap"
-          id="login-with personal access token"
-        >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-key"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-            />
-          </svg>
-          <h2
-            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-            sx="[object Object]"
-          >
-            Login with Personal Access Token
-          </h2>
-        </div>
-      </legend>
-    </div>
-    <div
-      class="px-8"
-    >
-      <div
-        class="flex flex-col h-full"
-        data-testid="Login With Personal Access Token"
-      >
-        <form>
-          <div
-            class="mb-4"
-          >
-            <label
-              class="mb-2 block text-sm font-semibold tracking-wide"
-              for="hostname"
-            >
-              Hostname
-            </label>
-            <input
-              class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-gray-500"
-              id="hostname"
-              name="hostname"
-              placeholder="github.company.com"
-              type="text"
-              value="github.com"
-            />
             <div
-              class="mt-3 text-xs text-gitify-font"
+              alignitems="flex-start"
+              class="Box-sc-g0xbh4-0 XtrQP"
+              display="flex"
+              flexdirection="column"
+              sx="[object Object]"
             >
-              <div
-                class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                data-align="stretch"
-                data-direction="vertical"
-                data-gap="condensed"
-                data-justify="start"
-                data-padding="none"
-                data-wrap="nowrap"
+              <label
+                class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hmMihG"
+                for=":r4:"
+                sx="[object Object]"
               >
-                <i
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                <span
+                  class="Box-sc-g0xbh4-0 kNbgVw"
+                  display="flex"
                 >
-                  Change only if you are using GitHub Enterprise Server.
-                </i>
-                <div
-                  class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-                  data-align="center"
-                  data-direction="horizontal"
-                  data-gap="condensed"
-                  data-justify="start"
-                  data-padding="none"
-                  data-wrap="nowrap"
+                  <div
+                    class="Box-sc-g0xbh4-0 gspezS"
+                    mr="1"
+                  >
+                    Token
+                  </div>
+                  <span>
+                    *
+                  </span>
+                </span>
+              </label>
+              <span
+                aria-busy="false"
+                class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 bTIaXm cvYBKD TextInput-wrapper"
+                sx="[object Object]"
+              >
+                <input
+                  aria-describedby=""
+                  aria-invalid="false"
+                  aria-required="true"
+                  class="UnstyledTextInput-sc-14ypya-0 dnEFlY"
+                  data-component="input"
+                  data-testid="login-token"
+                  id=":r4:"
+                  name="token"
+                  placeholder="Your generated token (40 characters)"
+                  type="password"
+                  value=""
+                />
+                <span
+                  class="Box-sc-g0xbh4-0 BAYYW TextInput-action"
+                  lineheight="0"
+                  marginleft="1"
+                  marginright="1"
                 >
                   <button
-                    aria-describedby=":r1:-loading-announcement"
-                    class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+                    aria-describedby=":r6:-loading-announcement"
+                    aria-labelledby=":r5:"
+                    class="types__StyledButton-sc-ws60qy-0 lfpsMw"
+                    data-component="IconButton"
                     data-loading="false"
+                    data-no-visuals="true"
                     data-size="small"
-                    data-testid="login-create-token"
                     sx="[object Object]"
                     type="button"
                   >
-                    <span
-                      class="Box-sc-g0xbh4-0 srpGE"
-                      data-component="buttonContent"
-                      sx="[object Object]"
+                    <svg
+                      aria-hidden="true"
+                      class="octicon octicon-eye"
+                      display="inline-block"
+                      fill="currentColor"
+                      focusable="false"
+                      height="16"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
+                      viewBox="0 0 16 16"
+                      width="16"
                     >
-                      <span
-                        class="Box-sc-g0xbh4-0 mhHOW"
-                        data-component="leadingVisual"
-                        sx="[object Object]"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="octicon octicon-key"
-                          display="inline-block"
-                          fill="currentColor"
-                          focusable="false"
-                          height="16"
-                          overflow="visible"
-                          style="vertical-align: text-bottom;"
-                          viewBox="0 0 16 16"
-                          width="16"
-                        >
-                          <path
-                            d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-                          />
-                        </svg>
-                      </span>
-                      <span
-                        data-component="text"
-                      >
-                        Generate a PAT
-                      </span>
-                    </span>
+                      <path
+                        d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"
+                      />
+                    </svg>
                   </button>
                   <span
-                    class="Text-sc-17v1xeu-0 hmAFGJ"
+                    aria-hidden="true"
+                    class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+                    data-direction="s"
+                    id=":r5:"
+                    popover="auto"
                   >
-                    on GitHub then paste your token below.
+                    Show token
                   </span>
-                </div>
-                <i
-                  class="Text-sc-17v1xeu-0 hmAFGJ"
-                >
-                  The required scopes will be automatically selected for you.
-                </i>
-              </div>
+                </span>
+              </span>
             </div>
           </div>
-          <div
-            class="mb-4"
-          >
-            <label
-              class="mb-2 block text-sm font-semibold tracking-wide"
-              for="token"
-            >
-              Token
-            </label>
-            <input
-              class="text-sm mb-2 px-4 py-1.5 block w-full appearance-none rounded-sm border bg-gitify-input-rest focus:bg-gitify-input-focus focus:outline-hidden border-red-500"
-              id="token"
-              name="token"
-              placeholder="The 40 characters token generated on GitHub"
-              type="text"
-              value=""
-            />
-          </div>
+        </div>
+        <div
+          class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
+        >
           <div
             class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-            data-align="center"
+            data-align="stretch"
             data-direction="horizontal"
             data-justify="space-between"
-            data-padding="none"
+            data-padding="condensed"
             data-wrap="nowrap"
           >
             <span
               aria-label="GitHub documentation"
-              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-              id=":r2:"
+              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-ne"
+              id=":r7:"
               role="tooltip"
             >
               <button
-                aria-describedby=":r3:-loading-announcement"
+                aria-describedby=":r8:-loading-announcement"
                 class="types__StyledButton-sc-ws60qy-0 jTCgqj"
                 data-loading="false"
                 data-size="small"
@@ -574,20 +399,232 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
                 </span>
               </button>
             </span>
+            <button
+              aria-describedby=":r9:-loading-announcement"
+              class="types__StyledButton-sc-ws60qy-0 gEWhIh"
+              data-loading="false"
+              data-testid="login-submit"
+              sx="[object Object]"
+              type="button"
+            >
+              <span
+                class="Box-sc-g0xbh4-0 srpGE"
+                data-component="buttonContent"
+                sx="[object Object]"
+              >
+                <span
+                  class="Box-sc-g0xbh4-0 mhHOW"
+                  data-component="leadingVisual"
+                  sx="[object Object]"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-sign-in"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  data-component="text"
+                >
+                  Login
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Box-sc-g0xbh4-0 flex flex-col h-screen"
+      data-testid="Login With Personal Access Token"
+    >
+      <div
+        class="Box-sc-g0xbh4-0 px-6 py-4"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-justify="space-between"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <button
+            aria-describedby=":r0:-loading-announcement"
+            aria-labelledby="Go Back"
+            class="types__StyledButton-sc-ws60qy-0 kQRupk"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="header-nav-back"
+            sx="[object Object]"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-arrow-left"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+              />
+            </svg>
+          </button>
+          <legend>
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
+              id="login-with personal access token"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-key"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+                />
+              </svg>
+              <h2
+                class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+                sx="[object Object]"
+              >
+                Login with Personal Access Token
+              </h2>
+            </div>
+          </legend>
+        </div>
+      </div>
+      <div
+        class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="vertical"
+          data-gap="normal"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+        >
+          <div
+            alignitems="flex-start"
+            class="Box-sc-g0xbh4-0 XtrQP"
+            display="flex"
+            flexdirection="column"
+            sx="[object Object]"
+          >
+            <label
+              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hmMihG"
+              for=":r1:"
+              sx="[object Object]"
+            >
+              <span
+                class="Box-sc-g0xbh4-0 kNbgVw"
+                display="flex"
+              >
+                <div
+                  class="Box-sc-g0xbh4-0 gspezS"
+                  mr="1"
+                >
+                  Hostname
+                </div>
+                <span>
+                  *
+                </span>
+              </span>
+            </label>
             <span
-              aria-label="Login"
-              class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-              id=":r4:"
-              role="tooltip"
+              aria-busy="false"
+              class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 fGSBWG iLQRLY TextInput-wrapper"
+              sx="[object Object]"
+            >
+              <input
+                aria-describedby=":r1:-caption"
+                aria-invalid="false"
+                aria-required="true"
+                class="UnstyledTextInput-sc-14ypya-0 dnEFlY"
+                data-component="input"
+                data-testid="login-hostname"
+                id=":r1:"
+                name="hostname"
+                placeholder="github.com"
+                type="text"
+                value="github.com"
+              />
+            </span>
+            <span
+              class="Text-sc-17v1xeu-0 bnvpKU"
+              color="fg.muted"
+              display="block"
+              font-size="0"
+              id=":r1:-caption"
+            >
+              <i
+                class="Text-sc-17v1xeu-0 hmAFGJ"
+              >
+                Change only if you are using GitHub Enterprise Server
+              </i>
+            </span>
+          </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+            data-align="stretch"
+            data-direction="vertical"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <div
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="center"
+              data-direction="horizontal"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
             >
               <button
-                aria-describedby=":r5:-loading-announcement"
-                class="types__StyledButton-sc-ws60qy-0 gEWhIh"
+                aria-describedby=":r2:-loading-announcement"
+                class="types__StyledButton-sc-ws60qy-0 jTCgqj"
                 data-loading="false"
-                data-testid="login-submit"
-                disabled=""
+                data-size="small"
+                data-testid="login-create-token"
                 sx="[object Object]"
-                type="submit"
+                type="button"
               >
                 <span
                   class="Box-sc-g0xbh4-0 srpGE"
@@ -601,7 +638,7 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
                   >
                     <svg
                       aria-hidden="true"
-                      class="octicon octicon-sign-in"
+                      class="octicon octicon-key"
                       display="inline-block"
                       fill="currentColor"
                       focusable="false"
@@ -612,20 +649,241 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
                       width="16"
                     >
                       <path
-                        d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
+                        d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
                       />
                     </svg>
                   </span>
                   <span
                     data-component="text"
                   >
-                    Login
+                    Generate a PAT
                   </span>
                 </span>
               </button>
+              <span
+                class="Text-sc-17v1xeu-0 hmAFGJ text-xs"
+              >
+                on GitHub to paste the token below.
+              </span>
+            </div>
+            <i
+              class="Text-sc-17v1xeu-0 hmAFGJ text-xs"
+            >
+              The
+               
+              <span
+                aria-label="read:user, notifications, repo"
+                class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-se"
+                id=":r3:"
+                role="tooltip"
+              >
+                <u
+                  class="Text-sc-17v1xeu-0 hmAFGJ"
+                >
+                  required scopes
+                </u>
+              </span>
+               
+              will be automatically selected for you.
+            </i>
+          </div>
+          <div
+            alignitems="flex-start"
+            class="Box-sc-g0xbh4-0 XtrQP"
+            display="flex"
+            flexdirection="column"
+            sx="[object Object]"
+          >
+            <label
+              class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 hmMihG"
+              for=":r4:"
+              sx="[object Object]"
+            >
+              <span
+                class="Box-sc-g0xbh4-0 kNbgVw"
+                display="flex"
+              >
+                <div
+                  class="Box-sc-g0xbh4-0 gspezS"
+                  mr="1"
+                >
+                  Token
+                </div>
+                <span>
+                  *
+                </span>
+              </span>
+            </label>
+            <span
+              aria-busy="false"
+              class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 bTIaXm cvYBKD TextInput-wrapper"
+              sx="[object Object]"
+            >
+              <input
+                aria-describedby=""
+                aria-invalid="false"
+                aria-required="true"
+                class="UnstyledTextInput-sc-14ypya-0 dnEFlY"
+                data-component="input"
+                data-testid="login-token"
+                id=":r4:"
+                name="token"
+                placeholder="Your generated token (40 characters)"
+                type="password"
+                value=""
+              />
+              <span
+                class="Box-sc-g0xbh4-0 BAYYW TextInput-action"
+                lineheight="0"
+                marginleft="1"
+                marginright="1"
+              >
+                <button
+                  aria-describedby=":r6:-loading-announcement"
+                  aria-labelledby=":r5:"
+                  class="types__StyledButton-sc-ws60qy-0 lfpsMw"
+                  data-component="IconButton"
+                  data-loading="false"
+                  data-no-visuals="true"
+                  data-size="small"
+                  sx="[object Object]"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-eye"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"
+                    />
+                  </svg>
+                </button>
+                <span
+                  aria-hidden="true"
+                  class="Tooltip__StyledTooltip-sc-e45c7z-0 eELanX"
+                  data-direction="s"
+                  id=":r5:"
+                  popover="auto"
+                >
+                  Show token
+                </span>
+              </span>
             </span>
           </div>
-        </form>
+        </div>
+      </div>
+      <div
+        class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
+      >
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="stretch"
+          data-direction="horizontal"
+          data-justify="space-between"
+          data-padding="condensed"
+          data-wrap="nowrap"
+        >
+          <span
+            aria-label="GitHub documentation"
+            class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-ne"
+            id=":r7:"
+            role="tooltip"
+          >
+            <button
+              aria-describedby=":r8:-loading-announcement"
+              class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+              data-loading="false"
+              data-size="small"
+              data-testid="login-docs"
+              sx="[object Object]"
+              type="button"
+            >
+              <span
+                class="Box-sc-g0xbh4-0 srpGE"
+                data-component="buttonContent"
+                sx="[object Object]"
+              >
+                <span
+                  class="Box-sc-g0xbh4-0 mhHOW"
+                  data-component="leadingVisual"
+                  sx="[object Object]"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-book"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  data-component="text"
+                >
+                  Docs
+                </span>
+              </span>
+            </button>
+          </span>
+          <button
+            aria-describedby=":r9:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 gEWhIh"
+            data-loading="false"
+            data-testid="login-submit"
+            sx="[object Object]"
+            type="button"
+          >
+            <span
+              class="Box-sc-g0xbh4-0 srpGE"
+              data-component="buttonContent"
+              sx="[object Object]"
+            >
+              <span
+                class="Box-sc-g0xbh4-0 mhHOW"
+                data-component="leadingVisual"
+                sx="[object Object]"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="octicon octicon-sign-in"
+                  display="inline-block"
+                  fill="currentColor"
+                  focusable="false"
+                  height="16"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
+                  />
+                </svg>
+              </span>
+              <span
+                data-component="text"
+              >
+                Login
+              </span>
+            </span>
+          </button>
+        </div>
       </div>
     </div>
   </div>,
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index 73503354c..f5345dd2e 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -2,59 +2,34 @@
 
 exports[`renderer/routes/Settings.tsx should render itself & its children 1`] = `
 <div
-  class="flex flex-col h-screen"
+  class="Box-sc-g0xbh4-0 flex flex-col h-screen"
   data-testid="settings"
 >
   <div
-    class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-    data-align="stretch"
-    data-direction="horizontal"
-    data-justify="space-between"
-    data-padding="spacious"
-    data-wrap="nowrap"
+    class="Box-sc-g0xbh4-0 px-6 py-4"
   >
-    <button
-      aria-describedby=":r0:-loading-announcement"
-      aria-labelledby="Go Back"
-      class="types__StyledButton-sc-ws60qy-0 kQRupk"
-      data-component="IconButton"
-      data-loading="false"
-      data-no-visuals="true"
-      data-testid="header-nav-back"
-      sx="[object Object]"
-      type="button"
+    <div
+      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+      data-align="stretch"
+      data-direction="horizontal"
+      data-justify="space-between"
+      data-padding="none"
+      data-wrap="nowrap"
     >
-      <svg
-        aria-hidden="true"
-        class="octicon octicon-arrow-left"
-        display="inline-block"
-        fill="currentColor"
-        focusable="false"
-        height="16"
-        overflow="visible"
-        style="vertical-align: text-bottom;"
-        viewBox="0 0 16 16"
-        width="16"
-      >
-        <path
-          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
-        />
-      </svg>
-    </button>
-    <legend>
-      <div
-        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-        data-align="center"
-        data-direction="horizontal"
-        data-gap="condensed"
-        data-justify="start"
-        data-padding="none"
-        data-wrap="nowrap"
-        id="settings"
+      <button
+        aria-describedby=":r0:-loading-announcement"
+        aria-labelledby="Go Back"
+        class="types__StyledButton-sc-ws60qy-0 kQRupk"
+        data-component="IconButton"
+        data-loading="false"
+        data-no-visuals="true"
+        data-testid="header-nav-back"
+        sx="[object Object]"
+        type="button"
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-gear"
+          class="octicon octicon-arrow-left"
           display="inline-block"
           fill="currentColor"
           focusable="false"
@@ -65,20 +40,49 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
           width="16"
         >
           <path
-            d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"
+            d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
           />
         </svg>
-        <h2
-          class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
-          sx="[object Object]"
+      </button>
+      <legend>
+        <div
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+          data-align="center"
+          data-direction="horizontal"
+          data-gap="condensed"
+          data-justify="start"
+          data-padding="none"
+          data-wrap="nowrap"
+          id="settings"
         >
-          Settings
-        </h2>
-      </div>
-    </legend>
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-gear"
+            display="inline-block"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"
+            />
+          </svg>
+          <h2
+            class="Heading__StyledHeading-sc-1c1dgg0-0 fuhZuh"
+            sx="[object Object]"
+          >
+            Settings
+          </h2>
+        </div>
+      </legend>
+    </div>
   </div>
   <div
-    class="grow overflow-x-auto px-8 pb-4"
+    class="Box-sc-g0xbh4-0 grow overflow-x-auto px-8 pb-2 mb-12 "
   >
     <div
       class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
@@ -1131,131 +1135,135 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
     </div>
   </div>
   <div
-    class="Stack__StyledStack-sc-x3xa2i-0 duhwY bg-gitify-footer"
-    data-align="stretch"
-    data-direction="horizontal"
-    data-justify="space-between"
-    data-padding="condensed"
-    data-wrap="nowrap"
+    class="Box-sc-g0xbh4-0 fixed bottom-0 left-10 right-0 bg-gitify-footer"
   >
     <div
       class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
       data-align="stretch"
       data-direction="horizontal"
-      data-justify="start"
-      data-padding="none"
+      data-justify="space-between"
+      data-padding="condensed"
       data-wrap="nowrap"
     >
-      <span
-        aria-label="View release notes"
-        class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-        id=":r6:"
-        role="tooltip"
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <button
-          aria-describedby=":r7:-loading-announcement"
-          class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-          data-loading="false"
-          data-no-visuals="true"
-          data-testid="settings-release-notes"
-          sx="[object Object]"
-          type="button"
+        <span
+          aria-label="View release notes"
+          class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
+          id=":r6:"
+          role="tooltip"
         >
-          <span
-            class="Box-sc-g0xbh4-0 srpGE"
-            data-component="buttonContent"
+          <button
+            aria-describedby=":r7:-loading-announcement"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="settings-release-notes"
             sx="[object Object]"
+            type="button"
           >
             <span
-              data-component="text"
+              class="Box-sc-g0xbh4-0 srpGE"
+              data-component="buttonContent"
+              sx="[object Object]"
             >
-              Gitify
-               
-              v0.0.1
+              <span
+                data-component="text"
+              >
+                Gitify
+                 
+                v0.0.1
+              </span>
             </span>
-          </span>
-        </button>
-      </span>
-    </div>
-    <div
-      class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
-      data-align="stretch"
-      data-direction="horizontal"
-      data-gap="normal"
-      data-justify="start"
-      data-padding="none"
-      data-wrap="nowrap"
-    >
-      <span
-        aria-label="Accounts"
-        class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
-        id=":r8:"
-        role="tooltip"
+          </button>
+        </span>
+      </div>
+      <div
+        class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+        data-align="stretch"
+        data-direction="horizontal"
+        data-gap="normal"
+        data-justify="start"
+        data-padding="none"
+        data-wrap="nowrap"
       >
-        <button
-          aria-describedby=":r9:-loading-announcement"
+        <span
           aria-label="Accounts"
-          class="types__StyledButton-sc-ws60qy-0 jTCgqj"
-          data-component="IconButton"
-          data-loading="false"
-          data-no-visuals="true"
-          data-testid="settings-accounts"
-          sx="[object Object]"
-          type="button"
+          class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-n"
+          id=":r8:"
+          role="tooltip"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-person"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
+          <button
+            aria-describedby=":r9:-loading-announcement"
+            aria-label="Accounts"
+            class="types__StyledButton-sc-ws60qy-0 jTCgqj"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="settings-accounts"
+            sx="[object Object]"
+            type="button"
           >
-            <path
-              d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
-            />
-          </svg>
-        </button>
-      </span>
-      <span
-        aria-label="Quit Gitify"
-        class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-nw"
-        id=":ra:"
-        role="tooltip"
-      >
-        <button
-          aria-describedby=":rb:-loading-announcement"
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-person"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
+              />
+            </svg>
+          </button>
+        </span>
+        <span
           aria-label="Quit Gitify"
-          class="types__StyledButton-sc-ws60qy-0 cYZGEC"
-          data-component="IconButton"
-          data-loading="false"
-          data-no-visuals="true"
-          data-testid="settings-quit"
-          sx="[object Object]"
-          type="button"
+          class="Tooltip__TooltipBase-sc-17tf59c-0 fcVRmg tooltipped-nw"
+          id=":ra:"
+          role="tooltip"
         >
-          <svg
-            aria-hidden="true"
-            class="octicon octicon-x-circle"
-            display="inline-block"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            overflow="visible"
-            style="vertical-align: text-bottom;"
-            viewBox="0 0 16 16"
-            width="16"
+          <button
+            aria-describedby=":rb:-loading-announcement"
+            aria-label="Quit Gitify"
+            class="types__StyledButton-sc-ws60qy-0 cYZGEC"
+            data-component="IconButton"
+            data-loading="false"
+            data-no-visuals="true"
+            data-testid="settings-quit"
+            sx="[object Object]"
+            type="button"
           >
-            <path
-              d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"
-            />
-          </svg>
-        </button>
-      </span>
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-x-circle"
+              display="inline-block"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/renderer/utils/auth/utils.ts b/src/renderer/utils/auth/utils.ts
index d0a3504ff..878ec920b 100644
--- a/src/renderer/utils/auth/utils.ts
+++ b/src/renderer/utils/auth/utils.ts
@@ -284,3 +284,7 @@ export function hasAccounts(auth: AuthState) {
 export function hasMultipleAccounts(auth: AuthState) {
   return auth.accounts.length > 1;
 }
+
+export function formatRequiredScopes() {
+  return Constants.AUTH_SCOPE.join(', ');
+}