diff --git a/.github/workflows/build-app.yml b/.github/workflows/build-app.yml
index 61fa14856..004a6c73b 100644
--- a/.github/workflows/build-app.yml
+++ b/.github/workflows/build-app.yml
@@ -11,147 +11,66 @@ on:
 
 jobs:
   build-macos:
+    name: Build macOS (electron-builder)
     runs-on: macos-latest
 
     steps:
       - uses: actions/checkout@v4
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: .nvmrc
-
       - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
+      - uses: actions/setup-node@v4
         with:
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
-        run: pnpm build
-
-      - name: Make macOS (electron-builder)
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm build
+      - run: pnpm make:macos --publish=never -c.mac.identity=null
         env:
           CSC_LINK: ${{ secrets.mac_certs }}
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
-        run: pnpm make:macos --publish=never -c.mac.identity=null
-
       - name: Clean up builds
         run: rm -rfv dist/mac-universal
-
       - uses: actions/upload-artifact@v3
         with:
           name: Gitify-dist-mac
           path: dist/
 
   build-windows:
+    name: Build Windows (electron-builder)
     runs-on: windows-latest
 
     steps:
       - uses: actions/checkout@v4
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: .nvmrc
-
       - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
+      - uses: actions/setup-node@v4
         with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
-        run: pnpm build
-
-      - name: Make Windows (electron-builder)
-        run: pnpm make:win --publish=never
-
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm build
+      - run: pnpm make:win --publish=never
       - name: Clean up builds
         run: Remove-Item dist/win-unpacked -Recurse
-
       - uses: actions/upload-artifact@v3
         with:
           name: Gitify-dist-win
           path: dist
 
   build-linux:
+    name: Build Linux (electron-builder)
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: .nvmrc
-
       - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
+      - uses: actions/setup-node@v4
         with:
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
-        run: pnpm build
-
-      - name: Make Linux (electron-builder)
-        run: pnpm make:linux --publish=never
-
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm build
+      - run: pnpm make:linux --publish=never
       - name: Clean up builds
         run: rm -rfv dist/linux-unpacked
-
       - uses: actions/upload-artifact@v3
         with:
           name: Gitify-dist-linux
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index e9357e796..e1ae726f6 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -7,46 +7,22 @@ on:
 
 jobs:
   release-macos:
+    name: Publish macOS (electron-builder)
     runs-on: macos-latest
 
     steps:
       - uses: actions/checkout@v4
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: .nvmrc
-
       - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
+      - uses: actions/setup-node@v4
         with:
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm build
         env:
           OAUTH_CLIENT_ID: ${{ secrets.oauth_client_id }}
           OAUTH_CLIENT_SECRET: ${{ secrets.oauth_client_secret }}
-        run: pnpm build
-
-      - name: Publish macOS (electron-builder)
+      - run: pnpm make:macos --publish onTagOrDraft
         env:
           APPLEID_USERNAME: ${{ secrets.appleid_username }}
           APPLEID_PASSWORD: ${{ secrets.appleid_password }}
@@ -54,94 +30,43 @@ jobs:
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
           GH_TOKEN: ${{ secrets.gh_token }}
           NOTARIZE: true
-        run: pnpm make:macos --publish onTagOrDraft
 
   release-windows:
+    name: Publish Windows (electron-builder)
     runs-on: windows-latest
 
     steps:
       - uses: actions/checkout@v4
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: .nvmrc
-
       - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
+      - uses: actions/setup-node@v4
         with:
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm build
         env:
           OAUTH_CLIENT_ID: ${{ secrets.oauth_client_id }}
           OAUTH_CLIENT_SECRET: ${{ secrets.oauth_client_secret }}
-        run: pnpm build
-
-      - name: Publish Windows (electron-builder)
+      - run: pnpm make:win --publish onTagOrDraft
         env:
           GH_TOKEN: ${{ secrets.gh_token }}
-        run: pnpm make:win --publish onTagOrDraft
 
   release-linux:
+    name: Publish Linux (electron-builder)
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: .nvmrc
-
       - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
+      - uses: actions/setup-node@v4
         with:
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm build
         env:
           OAUTH_CLIENT_ID: ${{ secrets.oauth_client_id }}
           OAUTH_CLIENT_SECRET: ${{ secrets.oauth_client_secret }}
-        run: pnpm build
-
-      - name: Publish Linuxs (electron-builder)
+      - run: pnpm make:linux --publish onTagOrDraft
         env:
           GH_TOKEN: ${{ secrets.gh_token }}
-        run: pnpm make:linux --publish onTagOrDraft
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
index 909d37d1c..44d1cf7d1 100644
--- a/.github/workflows/run-tests.yml
+++ b/.github/workflows/run-tests.yml
@@ -1,6 +1,6 @@
 name: Run Tests
 
-on: 
+on:
   push:
     branches:
       - main
@@ -8,47 +8,19 @@ on:
 
 jobs:
   run-unit-tests:
+    name: Run Tests
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: .nvmrc
-
       - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
+      - uses: actions/setup-node@v4
         with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Run Prettier (Check)
-        run: pnpm prettier:check
-
-      - name: Run Typechecking
-        run: pnpm tsc --noEmit
-
-      - name: Run Jest
-        run: pnpm test -- --coverage --runInBand --verbose
-
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - run: pnpm install
+      - run: pnpm prettier:check
+      - run: pnpm tsc --noEmit
+      - run: pnpm test -- --coverage --runInBand --verbose
       - name: Coveralls
         uses: coverallsapp/github-action@v2
diff --git a/.github/workflows/validator.yml b/.github/workflows/validator.yml
index ba383e24e..ead305b6c 100644
--- a/.github/workflows/validator.yml
+++ b/.github/workflows/validator.yml
@@ -35,18 +35,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-
       - uses: actions/setup-node@v3
         with:
           node-version-file: .nvmrc
-
       - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
         with:
           run_install: false
-
       - run: pnpm install --global renovate
-
       - name: Validate Renovate config
         run: renovate-config-validator
diff --git a/package.json b/package.json
index 54b02f6f6..e6fc8ed3b 100644
--- a/package.json
+++ b/package.json
@@ -116,8 +116,10 @@
     "@testing-library/react": "14.0.0",
     "@types/jest": "29.5.10",
     "@types/node": "18.18.0",
+    "@types/nprogress": "^0.2.3",
     "@types/react": "18.2.42",
     "@types/react-router-dom": "5.3.3",
+    "@types/react-test-renderer": "^18.0.7",
     "@types/react-transition-group": "4.4.7",
     "autoprefixer": "10.4.16",
     "css-loader": "6.8.1",
@@ -138,7 +140,7 @@
     "webpack-cli": "5.1.4",
     "webpack-merge": "5.9.0"
   },
-  "packageManager": "pnpm@8.9.0",
+  "packageManager": "pnpm@8.11.0",
   "lint-staged": {
     "*.{md,js,ts,tsx}": "prettier --write"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5324435fc..f62f09412 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,12 +67,18 @@ devDependencies:
   '@types/node':
     specifier: 18.18.0
     version: 18.18.0
+  '@types/nprogress':
+    specifier: ^0.2.3
+    version: 0.2.3
   '@types/react':
     specifier: 18.2.42
     version: 18.2.42
   '@types/react-router-dom':
     specifier: 5.3.3
     version: 5.3.3
+  '@types/react-test-renderer':
+    specifier: ^18.0.7
+    version: 18.0.7
   '@types/react-transition-group':
     specifier: 4.4.7
     version: 4.4.7
@@ -1083,6 +1089,10 @@ packages:
   /@types/node@18.18.0:
     resolution: {integrity: sha512-3xA4X31gHT1F1l38ATDIL9GpRLdwVhnEFC8Uikv5ZLlXATwrCYyPq7ZWHxzxc3J/30SUiwiYT+bQe0/XvKlWbw==}
 
+  /@types/nprogress@0.2.3:
+    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
+    dev: true
+
   /@types/plist@3.0.2:
     resolution: {integrity: sha512-ULqvZNGMv0zRFvqn8/4LSPtnmN4MfhlPNtJCTpKuIIxGVGZ2rYWzFXrvEBoh9CVyqSE7D6YFRJ1hydLHI6kbWw==}
     requiresBuild: true
@@ -1117,6 +1127,12 @@ packages:
       '@types/react': 18.2.42
     dev: true
 
+  /@types/react-test-renderer@18.0.7:
+    resolution: {integrity: sha512-1+ANPOWc6rB3IkSnElhjv6VLlKg2dSv/OWClUyZimbLsQyBn8Js9Vtdsi3UICJ2rIQ3k2la06dkB+C92QfhKmg==}
+    dependencies:
+      '@types/react': 18.2.42
+    dev: true
+
   /@types/react-transition-group@4.4.7:
     resolution: {integrity: sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==}
     dependencies:
diff --git a/src/components/Loading.test.tsx b/src/components/Loading.test.tsx
index 603b2f713..21b06474b 100644
--- a/src/components/Loading.test.tsx
+++ b/src/components/Loading.test.tsx
@@ -1,25 +1,20 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import NProgress from 'nprogress';
+import React from 'react';
 
 import { AppContext } from '../context/App';
 import { Loading } from './Loading';
 
-jest.mock('nprogress', () => {
-  return {
-    configure: jest.fn(),
-    start: jest.fn(),
-    done: jest.fn(),
-    remove: jest.fn(),
-  };
-});
+jest.mock('nprogress', () => ({
+  configure: jest.fn(),
+  start: jest.fn(),
+  done: jest.fn(),
+  remove: jest.fn(),
+}));
 
 describe('components/Loading.js', () => {
   beforeEach(() => {
-    NProgress.configure.mockReset();
-    NProgress.start.mockReset();
-    NProgress.done.mockReset();
-    NProgress.remove.mockReset();
+    jest.clearAllMocks();
   });
 
   it('should check that NProgress is getting called in when isFetching changes (loading)', () => {
diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx
index daa7d38e6..46d31292a 100644
--- a/src/routes/Settings.test.tsx
+++ b/src/routes/Settings.test.tsx
@@ -1,7 +1,6 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import TestRenderer, { act } from 'react-test-renderer';
 
 const { ipcRenderer } = require('electron');
 
@@ -31,10 +30,8 @@ describe('routes/Settings.tsx', () => {
   });
 
   it('should render itself & its children', async () => {
-    let tree: TestRenderer;
-
     await act(async () => {
-      tree = TestRenderer.create(
+      render(
         <AppContext.Provider
           value={{ settings: mockSettings, accounts: mockAccounts }}
         >
@@ -44,7 +41,7 @@ describe('routes/Settings.tsx', () => {
         </AppContext.Provider>,
       );
     });
-    expect(tree).toMatchSnapshot();
+    expect(screen.getByTestId('settings')).toMatchSnapshot();
   });
 
   it('should press the logout', async () => {
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index b43551699..1e38762a0 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -77,7 +77,10 @@ export const SettingsRoute: React.FC = () => {
     'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';
 
   return (
-    <div className="flex flex-1 flex-col dark:bg-gray-dark dark:text-white">
+    <div
+      className="flex flex-1 flex-col dark:bg-gray-dark dark:text-white"
+      data-testid="settings"
+    >
       <div className="flex justify-between items-center mt-4 py-2 mx-8">
         <button
           className="focus:outline-none"
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index c01feb0da..fe010b535 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -30,33 +30,26 @@ exports[`routes/Settings.tsx should not be able to enable colors due to missing
 
 exports[`routes/Settings.tsx should render itself & its children 1`] = `
 <div
-  className="flex flex-1 flex-col dark:bg-gray-dark dark:text-white"
+  class="flex flex-1 flex-col dark:bg-gray-dark dark:text-white"
+  data-testid="settings"
 >
   <div
-    className="flex justify-between items-center mt-4 py-2 mx-8"
+    class="flex justify-between items-center mt-4 py-2 mx-8"
   >
     <button
       aria-label="Go Back"
-      className="focus:outline-none"
-      onClick={[Function]}
+      class="focus:outline-none"
     >
       <svg
         aria-hidden="true"
-        className="hover:text-gray-400"
+        class="hover:text-gray-400"
         fill="currentColor"
         focusable="false"
-        height={20}
+        height="20"
         role="img"
-        style={
-          {
-            "display": "inline-block",
-            "overflow": "visible",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
+        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
         viewBox="0 0 16 16"
-        width={20}
+        width="20"
       >
         <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"
@@ -64,83 +57,78 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       </svg>
     </button>
     <h3
-      className="text-lg font-semibold"
+      class="text-lg font-semibold"
     >
       Settings
     </h3>
   </div>
   <div
-    className="flex-1 px-8"
+    class="flex-1 px-8"
   >
     <fieldset
-      className="mb-1"
+      class="mb-1"
       id="appearance"
     >
       <div>
         <legend
-          className="mb-1 text-base font-medium dark:text-white"
+          class="mb-1 text-base font-medium dark:text-white"
         >
           Appearance
         </legend>
       </div>
       <div
         aria-labelledby="appearance"
-        className="flex items-center space-x-4 py-2"
+        class="flex items-center space-x-4 py-2"
         role="group"
       >
         <div
-          className="flex items-center mt-1"
+          class="flex items-center mt-1"
         >
           <input
-            checked={true}
-            className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+            checked=""
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
             id="appearance_system"
             name="appearance"
-            onChange={[Function]}
             type="radio"
             value="SYSTEM"
           />
           <label
-            className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
-            htmlFor="appearance_system"
+            class="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+            for="appearance_system"
           >
             System
           </label>
         </div>
         <div
-          className="flex items-center mt-1"
+          class="flex items-center mt-1"
         >
           <input
-            checked={false}
-            className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
             id="appearance_light"
             name="appearance"
-            onChange={[Function]}
             type="radio"
             value="LIGHT"
           />
           <label
-            className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
-            htmlFor="appearance_light"
+            class="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+            for="appearance_light"
           >
             Light
           </label>
         </div>
         <div
-          className="flex items-center mt-1"
+          class="flex items-center mt-1"
         >
           <input
-            checked={false}
-            className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
             id="appearance_dark"
             name="appearance"
-            onChange={[Function]}
             type="radio"
             value="DARK"
           />
           <label
-            className="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
-            htmlFor="appearance_dark"
+            class="ml-3 block text-sm font-medium text-gray-700 dark:text-white"
+            for="appearance_dark"
           >
             Dark
           </label>
@@ -148,151 +136,141 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       </div>
     </fieldset>
     <div
-      className="flex items-start mt-1 mb-3"
+      class="flex items-start mt-1 mb-3"
     >
       <div
-        className="flex items-center h-5"
+        class="flex items-center h-5"
       >
         <input
-          checked={false}
-          className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-          disabled={false}
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
           id="colors"
-          onChange={[Function]}
           type="checkbox"
         />
       </div>
       <div
-        className="ml-3 text-sm"
+        class="ml-3 text-sm"
       >
         <label
-          className="font-medium text-gray-700 dark:text-gray-200"
-          htmlFor="colors"
+          class="font-medium text-gray-700 dark:text-gray-200"
+          for="colors"
+          style=""
         >
           Use GitHub-like state colors
         </label>
       </div>
     </div>
     <div
-      className="flex items-start mt-1 mb-3"
+      class="flex items-start mt-1 mb-3"
     >
       <div
-        className="flex items-center h-5"
+        class="flex items-center h-5"
       >
         <input
-          checked={false}
-          className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
           id="showOnlyParticipating"
-          onChange={[Function]}
           type="checkbox"
         />
       </div>
       <div
-        className="ml-3 text-sm"
+        class="ml-3 text-sm"
       >
         <label
-          className="font-medium text-gray-700 dark:text-gray-200"
-          htmlFor="showOnlyParticipating"
+          class="font-medium text-gray-700 dark:text-gray-200"
+          for="showOnlyParticipating"
         >
           Show only participating
         </label>
       </div>
     </div>
     <div
-      className="flex items-start mt-1 mb-3"
+      class="flex items-start mt-1 mb-3"
     >
       <div
-        className="flex items-center h-5"
+        class="flex items-center h-5"
       >
         <input
-          checked={true}
-          className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+          checked=""
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
           id="playSound"
-          onChange={[Function]}
           type="checkbox"
         />
       </div>
       <div
-        className="ml-3 text-sm"
+        class="ml-3 text-sm"
       >
         <label
-          className="font-medium text-gray-700 dark:text-gray-200"
-          htmlFor="playSound"
+          class="font-medium text-gray-700 dark:text-gray-200"
+          for="playSound"
         >
           Play sound
         </label>
       </div>
     </div>
     <div
-      className="flex items-start mt-1 mb-3"
+      class="flex items-start mt-1 mb-3"
     >
       <div
-        className="flex items-center h-5"
+        class="flex items-center h-5"
       >
         <input
-          checked={true}
-          className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+          checked=""
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
           id="showNotifications"
-          onChange={[Function]}
           type="checkbox"
         />
       </div>
       <div
-        className="ml-3 text-sm"
+        class="ml-3 text-sm"
       >
         <label
-          className="font-medium text-gray-700 dark:text-gray-200"
-          htmlFor="showNotifications"
+          class="font-medium text-gray-700 dark:text-gray-200"
+          for="showNotifications"
         >
           Show notifications
         </label>
       </div>
     </div>
     <div
-      className="flex items-start mt-1 mb-3"
+      class="flex items-start mt-1 mb-3"
     >
       <div
-        className="flex items-center h-5"
+        class="flex items-center h-5"
       >
         <input
-          checked={false}
-          className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
           id="onClickMarkAsRead"
-          onChange={[Function]}
           type="checkbox"
         />
       </div>
       <div
-        className="ml-3 text-sm"
+        class="ml-3 text-sm"
       >
         <label
-          className="font-medium text-gray-700 dark:text-gray-200"
-          htmlFor="onClickMarkAsRead"
+          class="font-medium text-gray-700 dark:text-gray-200"
+          for="onClickMarkAsRead"
         >
           Mark as read on click
         </label>
       </div>
     </div>
     <div
-      className="flex items-start mt-1 mb-3"
+      class="flex items-start mt-1 mb-3"
     >
       <div
-        className="flex items-center h-5"
+        class="flex items-center h-5"
       >
         <input
-          checked={false}
-          className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
           id="openAtStartUp"
-          onChange={[Function]}
           type="checkbox"
         />
       </div>
       <div
-        className="ml-3 text-sm"
+        class="ml-3 text-sm"
       >
         <label
-          className="font-medium text-gray-700 dark:text-gray-200"
-          htmlFor="openAtStartUp"
+          class="font-medium text-gray-700 dark:text-gray-200"
+          for="openAtStartUp"
         >
           Open at startup
         </label>
@@ -300,10 +278,10 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     </div>
   </div>
   <div
-    className="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-4 px-8"
+    class="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-4 px-8"
   >
     <small
-      className="font-semibold"
+      class="font-semibold"
     >
       Gitify v
       0.0.1
@@ -311,13 +289,12 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     <div>
       <button
         aria-label="Login with GitHub Enterprise"
-        className="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
-        onClick={[Function]}
+        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
       >
         <svg
           aria-hidden="true"
           aria-labelledby="iconAddAccountId"
-          className="w-5 h-5"
+          class="w-5 h-5"
           role="img"
           viewBox="0 0 640 512"
           xmlns="http://www.w3.org/2000/svg"
@@ -331,7 +308,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
             <path
               d="M640 224v32a16 16 0 01-16 16h-64v64a16 16 0 01-16 16h-32a16 16 0 01-16-16v-64h-64a16 16 0 01-16-16v-32a16 16 0 0116-16h64v-64a16 16 0 0116-16h32a16 16 0 0116 16v64h64a16 16 0 0116 16z"
               fill="currentColor"
-              opacity={0.4}
+              opacity="0.4"
             />
             <path
               d="M224 256A128 128 0 1096 128a128 128 0 00128 128zm89.6 32h-16.7a174.08 174.08 0 01-145.8 0h-16.7A134.43 134.43 0 000 422.4V464a48 48 0 0048 48h352a48 48 0 0048-48v-41.6A134.43 134.43 0 00313.6 288z"
@@ -342,13 +319,12 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       </button>
       <button
         aria-label="Logout"
-        className="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
-        onClick={[Function]}
+        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
       >
         <svg
           aria-hidden="true"
           aria-labelledby="iconLogoutId"
-          className="w-5 h-5"
+          class="w-5 h-5"
           role="img"
           viewBox="0 0 512 512"
           xmlns="http://www.w3.org/2000/svg"
@@ -362,7 +338,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
             <path
               d="M180 448H96a96 96 0 01-96-96V160a96 96 0 0196-96h84a12 12 0 0112 12v40a12 12 0 01-12 12H96a32 32 0 00-32 32v192a32 32 0 0032 32h84a12 12 0 0112 12v40a12 12 0 01-12 12z"
               fill="currentColor"
-              opacity={0.4}
+              opacity="0.4"
             />
             <path
               d="M353 88.3l151.9 150.6a24 24 0 010 34.1l-152 150.8a24.08 24.08 0 01-33.9-.1l-21.9-21.9a24.07 24.07 0 01.8-34.7l77.6-71.1H184a23.94 23.94 0 01-24-24v-32a23.94 23.94 0 0124-24h191.5l-77.6-71.1a24 24 0 01-.7-34.6l21.9-21.9a24 24 0 0133.9-.1z"
@@ -373,13 +349,12 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       </button>
       <button
         aria-label="Quit Gitify"
-        className="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none mr-0"
-        onClick={[Function]}
+        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none mr-0"
       >
         <svg
           aria-hidden="true"
           aria-labelledby="iconQuitId"
-          className="w-5 h-5"
+          class="w-5 h-5"
           role="img"
           viewBox="0 0 512 512"
           xmlns="http://www.w3.org/2000/svg"
@@ -393,7 +368,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
             <path
               d="M272 0a23.94 23.94 0 0124 24v240a23.94 23.94 0 01-24 24h-32a23.94 23.94 0 01-24-24V24a23.94 23.94 0 0124-24z"
               fill="currentColor"
-              opacity={0.4}
+              opacity="0.4"
             />
             <path
               d="M504 256c0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4A248 248 0 01111.8 54.2a24.07 24.07 0 0135 7.7L162.6 90a24 24 0 01-6.6 31 168 168 0 00100 303c91.6 0 168.6-74.2 168-169.1a168.07 168.07 0 00-68.1-134 23.86 23.86 0 01-6.5-30.9l15.8-28.1a24 24 0 0134.8-7.8A247.51 247.51 0 01504 256z"