From 77ba4e290115d75a15d7fa562cd66100c91e2cb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Moreau?= <rphlmr@users.noreply.github.com>
Date: Thu, 31 Aug 2023 16:13:36 +0200
Subject: [PATCH] prepare remix v2 (#75)

---
 .eslintrc                                     | 144 +++---
 .github/workflows/deploy.yml                  | 438 +++++++++---------
 .../workflows/for-this-stack-repo-only.yml    | 240 +++++-----
 .prettierrc.cjs                               |   5 +
 Dockerfile                                    |   2 +-
 README.md                                     | 201 ++++----
 app/database/db.server.ts                     |  16 +-
 app/database/seed.server.ts                   | 138 +++---
 app/entry.client.tsx                          |  20 +-
 app/entry.server.tsx                          |  96 ++--
 app/hooks/use-fetcher.ts                      |  10 -
 app/hooks/use-interval.ts                     |  30 +-
 app/hooks/use-matches-data.ts                 |  12 +-
 app/integrations/i18n/config.ts               |  18 +-
 app/integrations/i18n/i18next.client.tsx      |  62 +--
 app/integrations/i18n/i18next.server.tsx      |  68 +--
 app/integrations/supabase/client.ts           |  48 +-
 .../components/continue-with-email-form.tsx   |  90 ++--
 app/modules/auth/components/logout-button.tsx |  27 +-
 app/modules/auth/index.ts                     |  24 +-
 app/modules/auth/mappers.ts                   |  28 +-
 app/modules/auth/service.server.ts            |  90 ++--
 app/modules/auth/session.server.ts            | 274 +++++------
 app/modules/auth/types.ts                     |  12 +-
 app/modules/note/service.server.ts            |  64 +--
 app/modules/user/service.server.test.ts       | 411 ++++++++--------
 app/modules/user/service.server.ts            |  86 ++--
 app/root.tsx                                  | 102 ++--
 app/routes/_index.tsx                         | 167 +++++++
 app/routes/forgot-password.tsx                | 188 ++++----
 app/routes/healthcheck.tsx                    |  36 +-
 app/routes/index.tsx                          | 166 -------
 app/routes/join.tsx                           | 340 +++++++-------
 app/routes/login.tsx                          | 345 +++++++-------
 app/routes/logout.tsx                         |   6 +-
 app/routes/notes.$noteId.tsx                  |  67 +++
 app/routes/notes._index.tsx                   |  23 +
 app/routes/notes.new.tsx                      | 113 +++++
 app/routes/notes.tsx                          |  99 ++--
 app/routes/notes/$noteId.tsx                  |  67 ---
 app/routes/notes/index.tsx                    |  26 --
 app/routes/notes/new.tsx                      | 109 -----
 app/routes/oauth.callback.tsx                 | 216 ++++-----
 app/routes/reset-password.tsx                 | 373 +++++++--------
 app/routes/send-magic-link.tsx                |  57 +--
 app/utils/env.ts                              |  66 +--
 app/utils/form.ts                             |   2 +-
 app/utils/http.server.ts                      |  72 +--
 app/utils/http.test.ts                        | 136 +++---
 app/utils/is-browser.ts                       |   2 +-
 app/utils/tw-classes.ts                       |   2 +-
 app/utils/zod.ts                              |  12 +-
 cypress.config.ts                             |  42 +-
 cypress/.eslintrc.js                          |   8 +-
 cypress/e2e/smoke.cy.ts                       |  96 ++--
 cypress/support/commands.ts                   | 102 ++--
 cypress/support/create-user.ts                |  50 +-
 cypress/support/delete-user.ts                |  52 +--
 cypress/support/e2e.ts                        |  20 +-
 cypress/tsconfig.json                         |  51 +-
 .../0001-split-tailwind-classes-with-tw.md    |  70 +--
 mocks/handlers.js                             | 116 ++---
 mocks/index.js                                |   2 +-
 mocks/user.js                                 |   6 +-
 package.json                                  | 179 ++++---
 public/locales/en/auth.json                   |  56 +--
 public/locales/fr/auth.json                   |  56 +--
 public/locales/ru/auth.json                   |  56 +--
 remix.config.js                               |  18 +-
 remix.init/index.js                           | 178 +++----
 remix.init/package.json                       |  16 +-
 tailwind.config.js                            |  12 -
 tailwind.config.ts                            |  13 +
 test/setup-test-env.ts                        |  10 +-
 tsconfig.json                                 |  46 +-
 vitest.config.ts                              |  27 +-
 76 files changed, 3402 insertions(+), 3326 deletions(-)
 create mode 100644 .prettierrc.cjs
 delete mode 100644 app/hooks/use-fetcher.ts
 create mode 100644 app/routes/_index.tsx
 delete mode 100644 app/routes/index.tsx
 create mode 100644 app/routes/notes.$noteId.tsx
 create mode 100644 app/routes/notes._index.tsx
 create mode 100644 app/routes/notes.new.tsx
 delete mode 100644 app/routes/notes/$noteId.tsx
 delete mode 100644 app/routes/notes/index.tsx
 delete mode 100644 app/routes/notes/new.tsx
 delete mode 100644 tailwind.config.js
 create mode 100644 tailwind.config.ts

diff --git a/.eslintrc b/.eslintrc
index 00e74b1..5e9d6d8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,74 +1,74 @@
 {
-  "plugins": ["tailwindcss"],
-  "extends": [
-    "@remix-run/eslint-config",
-    "@remix-run/eslint-config/node",
-    "plugin:tailwindcss/recommended",
-    "prettier"
-  ],
-  "parserOptions": {
-    "project": ["./tsconfig.json"]
-  },
-  "settings": {
-    // Help eslint-plugin-tailwindcss to parse Tailwind classes outside of className
-    "tailwindcss": {
-      "callees": ["tw"]
-    },
-    "jest": {
-      "version": 27
-    }
-  },
-  "rules": {
-    "no-console": "warn",
-    "arrow-body-style": ["warn", "as-needed"],
-    // @typescript-eslint
-    "@typescript-eslint/no-duplicate-imports": "error",
-    "@typescript-eslint/consistent-type-imports": "error",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        "vars": "all",
-        "args": "all",
-        "argsIgnorePattern": "^_",
-        "destructuredArrayIgnorePattern": "^_",
-        "ignoreRestSiblings": false
-      }
-    ],
-    //import
-    "import/no-cycle": "error",
-    "import/no-unresolved": "error",
-    "import/no-default-export": "warn",
-    "import/order": [
-      "error",
-      {
-        "groups": ["builtin", "external", "internal"],
-        "pathGroups": [
-          {
-            "pattern": "react",
-            "group": "external",
-            "position": "before"
-          }
-        ],
-        "pathGroupsExcludedImportTypes": ["react"],
-        "newlines-between": "always",
-        "alphabetize": {
-          "order": "asc",
-          "caseInsensitive": true
-        }
-      }
-    ]
-  },
-  "overrides": [
-    {
-      "files": [
-        "./app/root.tsx",
-        "./app/entry.client.tsx",
-        "./app/entry.server.tsx",
-        "./app/routes/**/*.tsx"
-      ],
-      "rules": {
-        "import/no-default-export": "off"
-      }
-    }
-  ]
+	"plugins": ["tailwindcss"],
+	"extends": [
+		"@remix-run/eslint-config",
+		"@remix-run/eslint-config/node",
+		"plugin:tailwindcss/recommended",
+		"prettier"
+	],
+	"parserOptions": {
+		"project": ["./tsconfig.json"]
+	},
+	"settings": {
+		// Help eslint-plugin-tailwindcss to parse Tailwind classes outside of className
+		"tailwindcss": {
+			"callees": ["tw"]
+		},
+		"jest": {
+			"version": 27
+		}
+	},
+	"rules": {
+		"no-console": "warn",
+		"arrow-body-style": ["warn", "as-needed"],
+		// @typescript-eslint
+		"@typescript-eslint/no-duplicate-imports": "error",
+		"@typescript-eslint/consistent-type-imports": "error",
+		"@typescript-eslint/no-unused-vars": [
+			"warn",
+			{
+				"vars": "all",
+				"args": "all",
+				"argsIgnorePattern": "^_",
+				"destructuredArrayIgnorePattern": "^_",
+				"ignoreRestSiblings": false
+			}
+		],
+		//import
+		"import/no-cycle": "error",
+		"import/no-unresolved": "error",
+		"import/no-default-export": "warn",
+		"import/order": [
+			"error",
+			{
+				"groups": ["builtin", "external", "internal"],
+				"pathGroups": [
+					{
+						"pattern": "react",
+						"group": "external",
+						"position": "before"
+					}
+				],
+				"pathGroupsExcludedImportTypes": ["react"],
+				"newlines-between": "always",
+				"alphabetize": {
+					"order": "asc",
+					"caseInsensitive": true
+				}
+			}
+		]
+	},
+	"overrides": [
+		{
+			"files": [
+				"./app/root.tsx",
+				"./app/entry.client.tsx",
+				"./app/entry.server.tsx",
+				"./app/routes/**/*.tsx"
+			],
+			"rules": {
+				"import/no-default-export": "off"
+			}
+		}
+	]
 }
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 8e0543f..e46ad48 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,224 +1,224 @@
 name: 🚀 Deploy
 on:
-  push:
-    branches:
-      - main
-      - dev
-  pull_request: {}
+    push:
+        branches:
+            - main
+            - dev
+    pull_request: {}
 permissions:
-  actions: write
-  contents: read
+    actions: write
+    contents: read
 
 jobs:
-  lint:
-    name: ⬣ ESLint
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: 📥 Download deps
-        uses: bahmutov/npm-install@v1
-        with:
-          useLockFile: false
-
-      - name: 🔬 Lint
-        run: npm run lint
-
-  typecheck:
-    name: ʦ TypeScript
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: 📥 Download deps
-        uses: bahmutov/npm-install@v1
-        with:
-          useLockFile: false
-
-      - name: 🔎 Type check
-        run: npm run typecheck --if-present
-
-  vitest:
-    name: ⚡ Vitest
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: 📥 Download deps
-        uses: bahmutov/npm-install@v1
-        with:
-          useLockFile: false
-
-      - name: ⚡ Run vitest
-        run: npm run test -- --coverage
-
-  cypress:
-    name: ⚫️ Cypress
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: 🔑 Make envfile
-        uses: SpicyPizza/create-envfile@v1.3
-        with:
-          envkey_SESSION_SECRET: ${{ secrets.SESSION_SECRET }}
-          envkey_SUPABASE_ANON_PUBLIC: ${{ secrets.SUPABASE_ANON_PUBLIC }}
-          envkey_SUPABASE_SERVICE_ROLE: ${{ secrets.SUPABASE_SERVICE_ROLE }}
-          envkey_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
-          envkey_SERVER_URL: ${{ secrets.SERVER_URL }}
-          envkey_DATABASE_URL: ${{ secrets.DATABASE_URL }}
-          file_name: .env
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: 📥 Download deps
-        uses: bahmutov/npm-install@v1
-        with:
-          useLockFile: false
-
-      # uncomment if you really want to reset your testing database
-      # - name: 🛠 Setup Database
-      #   run: npx prisma migrate reset --force
-
-      - name: ⚙️ Build
-        run: npm run build
-
-      - name: 🌳 Cypress run
-        uses: cypress-io/github-action@v4
-        with:
-          start: npm run start:ci
-          wait-on: "http://localhost:8811"
-          browser: chrome
-          headed: true
-        env:
-          PORT: "8811"
-
-  build:
-    name: 🐳 Build
-    # only build/deploy main branch on pushes
-    if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: 👀 Read app name
-        uses: SebRollen/toml-action@v1.0.0
-        id: app_name
-        with:
-          file: "fly.toml"
-          field: "app"
-
-      - name: 🐳 Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
-      # Setup cache
-      - name: ⚡️ Cache Docker layers
-        uses: actions/cache@v3
-        with:
-          path: /tmp/.buildx-cache
-          key: ${{ runner.os }}-buildx-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-buildx-
-
-      - name: 🔑 Fly Registry Auth
-        uses: docker/login-action@v2
-        with:
-          registry: registry.fly.io
-          username: x
-          password: ${{ secrets.FLY_API_TOKEN }}
-
-      - name: 🐳 Docker build
-        uses: docker/build-push-action@v3
-        with:
-          context: .
-          push: true
-          tags: registry.fly.io/${{ steps.app_name.outputs.value }}:${{ github.ref_name }}-${{ github.sha }}
-          build-args: |
-            COMMIT_SHA=${{ github.sha }}
-          cache-from: type=local,src=/tmp/.buildx-cache
-          cache-to: type=local,mode=max,dest=/tmp/.buildx-cache-new
-
-      # This ugly bit is necessary if you don't want your cache to grow forever
-      # till it hits GitHub's limit of 5GB.
-      # Temp fix
-      # https://github.com/docker/build-push-action/issues/252
-      # https://github.com/moby/buildkit/issues/1896
-      - name: 🚚 Move cache
-        run: |
-          rm -rf /tmp/.buildx-cache
-          mv /tmp/.buildx-cache-new /tmp/.buildx-cache
-
-  deploy:
-    name: 🚀 Deploy
-    runs-on: ubuntu-latest
-    needs: [lint, typecheck, vitest, cypress, build]
-    # only build/deploy main branch on pushes
-    if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
-
-    steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: 👀 Read app name
-        uses: SebRollen/toml-action@v1.0.0
-        id: app_name
-        with:
-          file: "fly.toml"
-          field: "app"
-
-      - name: 🚀 Deploy Staging
-        if: ${{ github.ref == 'refs/heads/dev' }}
-        uses: superfly/flyctl-actions@1.3
-        with:
-          args: "deploy --app ${{ steps.app_name.outputs.value }}-staging --image registry.fly.io/${{ steps.app_name.outputs.value }}:${{ github.ref_name }}-${{ github.sha }}"
-        env:
-          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
-
-      - name: 🚀 Deploy Production
-        if: ${{ github.ref == 'refs/heads/main' }}
-        uses: superfly/flyctl-actions@1.3
-        with:
-          args: "deploy --image registry.fly.io/${{ steps.app_name.outputs.value }}:${{ github.ref_name }}-${{ github.sha }}"
-        env:
-          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+    lint:
+        name: ⬣ ESLint
+        runs-on: ubuntu-latest
+        steps:
+            - name: 🛑 Cancel Previous Runs
+              uses: styfle/cancel-workflow-action@0.11.0
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v3
+
+            - name: ⎔ Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+
+            - name: 📥 Download deps
+              uses: bahmutov/npm-install@v1
+              with:
+                  useLockFile: false
+
+            - name: 🔬 Lint
+              run: npm run lint
+
+    typecheck:
+        name: ʦ TypeScript
+        runs-on: ubuntu-latest
+        steps:
+            - name: 🛑 Cancel Previous Runs
+              uses: styfle/cancel-workflow-action@0.11.0
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v3
+
+            - name: ⎔ Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+
+            - name: 📥 Download deps
+              uses: bahmutov/npm-install@v1
+              with:
+                  useLockFile: false
+
+            - name: 🔎 Type check
+              run: npm run typecheck --if-present
+
+    vitest:
+        name: ⚡ Vitest
+        runs-on: ubuntu-latest
+        steps:
+            - name: 🛑 Cancel Previous Runs
+              uses: styfle/cancel-workflow-action@0.11.0
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v3
+
+            - name: ⎔ Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+
+            - name: 📥 Download deps
+              uses: bahmutov/npm-install@v1
+              with:
+                  useLockFile: false
+
+            - name: ⚡ Run vitest
+              run: npm run test -- --coverage
+
+    cypress:
+        name: ⚫️ Cypress
+        runs-on: ubuntu-latest
+        steps:
+            - name: 🛑 Cancel Previous Runs
+              uses: styfle/cancel-workflow-action@0.11.0
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v3
+
+            - name: 🔑 Make envfile
+              uses: SpicyPizza/create-envfile@v1.3
+              with:
+                  envkey_SESSION_SECRET: ${{ secrets.SESSION_SECRET }}
+                  envkey_SUPABASE_ANON_PUBLIC: ${{ secrets.SUPABASE_ANON_PUBLIC }}
+                  envkey_SUPABASE_SERVICE_ROLE: ${{ secrets.SUPABASE_SERVICE_ROLE }}
+                  envkey_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+                  envkey_SERVER_URL: ${{ secrets.SERVER_URL }}
+                  envkey_DATABASE_URL: ${{ secrets.DATABASE_URL }}
+                  file_name: .env
+
+            - name: ⎔ Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+
+            - name: 📥 Download deps
+              uses: bahmutov/npm-install@v1
+              with:
+                  useLockFile: false
+
+            # uncomment if you really want to reset your testing database
+            # - name: 🛠 Setup Database
+            #   run: npx prisma migrate reset --force
+
+            - name: ⚙️ Build
+              run: npm run build
+
+            - name: 🌳 Cypress run
+              uses: cypress-io/github-action@v4
+              with:
+                  start: npm run start:ci
+                  wait-on: "http://localhost:8811"
+                  browser: chrome
+                  headed: true
+              env:
+                  PORT: "8811"
+
+    build:
+        name: 🐳 Build
+        # only build/deploy main branch on pushes
+        if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
+        runs-on: ubuntu-latest
+        steps:
+            - name: 🛑 Cancel Previous Runs
+              uses: styfle/cancel-workflow-action@0.11.0
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v3
+
+            - name: 👀 Read app name
+              uses: SebRollen/toml-action@v1.0.0
+              id: app_name
+              with:
+                  file: "fly.toml"
+                  field: "app"
+
+            - name: 🐳 Set up Docker Buildx
+              uses: docker/setup-buildx-action@v2
+
+            # Setup cache
+            - name: ⚡️ Cache Docker layers
+              uses: actions/cache@v3
+              with:
+                  path: /tmp/.buildx-cache
+                  key: ${{ runner.os }}-buildx-${{ github.sha }}
+                  restore-keys: |
+                      ${{ runner.os }}-buildx-
+
+            - name: 🔑 Fly Registry Auth
+              uses: docker/login-action@v2
+              with:
+                  registry: registry.fly.io
+                  username: x
+                  password: ${{ secrets.FLY_API_TOKEN }}
+
+            - name: 🐳 Docker build
+              uses: docker/build-push-action@v3
+              with:
+                  context: .
+                  push: true
+                  tags: registry.fly.io/${{ steps.app_name.outputs.value }}:${{ github.ref_name }}-${{ github.sha }}
+                  build-args: |
+                      COMMIT_SHA=${{ github.sha }}
+                  cache-from: type=local,src=/tmp/.buildx-cache
+                  cache-to: type=local,mode=max,dest=/tmp/.buildx-cache-new
+
+            # This ugly bit is necessary if you don't want your cache to grow forever
+            # till it hits GitHub's limit of 5GB.
+            # Temp fix
+            # https://github.com/docker/build-push-action/issues/252
+            # https://github.com/moby/buildkit/issues/1896
+            - name: 🚚 Move cache
+              run: |
+                  rm -rf /tmp/.buildx-cache
+                  mv /tmp/.buildx-cache-new /tmp/.buildx-cache
+
+    deploy:
+        name: 🚀 Deploy
+        runs-on: ubuntu-latest
+        needs: [lint, typecheck, vitest, cypress, build]
+        # only build/deploy main branch on pushes
+        if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
+
+        steps:
+            - name: 🛑 Cancel Previous Runs
+              uses: styfle/cancel-workflow-action@0.11.0
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v3
+
+            - name: 👀 Read app name
+              uses: SebRollen/toml-action@v1.0.0
+              id: app_name
+              with:
+                  file: "fly.toml"
+                  field: "app"
+
+            - name: 🚀 Deploy Staging
+              if: ${{ github.ref == 'refs/heads/dev' }}
+              uses: superfly/flyctl-actions@1.3
+              with:
+                  args: "deploy --app ${{ steps.app_name.outputs.value }}-staging --image registry.fly.io/${{ steps.app_name.outputs.value }}:${{ github.ref_name }}-${{ github.sha }}"
+              env:
+                  FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+
+            - name: 🚀 Deploy Production
+              if: ${{ github.ref == 'refs/heads/main' }}
+              uses: superfly/flyctl-actions@1.3
+              with:
+                  args: "deploy --image registry.fly.io/${{ steps.app_name.outputs.value }}:${{ github.ref_name }}-${{ github.sha }}"
+              env:
+                  FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
diff --git a/.github/workflows/for-this-stack-repo-only.yml b/.github/workflows/for-this-stack-repo-only.yml
index 5ec5f82..34e9002 100644
--- a/.github/workflows/for-this-stack-repo-only.yml
+++ b/.github/workflows/for-this-stack-repo-only.yml
@@ -1,125 +1,125 @@
 name: 🚀 Check Stack
 on:
-  push:
-    branches:
-      - main
-      - dev
-  pull_request: {}
+    push:
+        branches:
+            - main
+            - dev
+    pull_request: {}
 permissions:
-  actions: write
-  contents: read
+    actions: write
+    contents: read
 
 jobs:
-  lint:
-    name: ⬣ ESLint
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: 📥 Download deps
-        uses: bahmutov/npm-install@v1
-        with:
-          useLockFile: false
-
-      - name: 🔬 Lint
-        run: npm run lint
-
-  typecheck:
-    name: ʦ TypeScript
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: 📥 Download deps
-        uses: bahmutov/npm-install@v1
-        with:
-          useLockFile: false
-
-      - name: 🔎 Type check
-        run: npm run typecheck --if-present
-
-  vitest:
-    name: ⚡ Vitest
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: 📥 Download deps
-        uses: bahmutov/npm-install@v1
-        with:
-          useLockFile: false
-
-      - name: ⚡ Run vitest
-        run: npm run test -- --coverage
-
-  cypress:
-    name: ⚫️ Cypress
-    runs-on: ubuntu-latest
-    needs: [lint, typecheck, vitest]
-    steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
-
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: 🔑 Make envfile
-        uses: SpicyPizza/create-envfile@v1.3
-        with:
-          envkey_SESSION_SECRET: ${{ secrets.SESSION_SECRET }}
-          envkey_SUPABASE_ANON_PUBLIC: ${{ secrets.SUPABASE_ANON_PUBLIC }}
-          envkey_SUPABASE_SERVICE_ROLE: ${{ secrets.SUPABASE_SERVICE_ROLE }}
-          envkey_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
-          envkey_SERVER_URL: ${{ secrets.SERVER_URL }}
-          envkey_DATABASE_URL: ${{ secrets.DATABASE_URL }}
-          file_name: .env
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: 📥 Download deps
-        uses: bahmutov/npm-install@v1
-        with:
-          useLockFile: false
-
-      - name: ⚙️ Build
-        run: npm run build
-
-      - name: 🌳 Cypress run
-        uses: cypress-io/github-action@v4
-        with:
-          start: npm run start:ci
-          wait-on: "http://localhost:8811"
-          browser: chrome
-          headed: true
-        env:
-          PORT: "8811"
+    lint:
+        name: ⬣ ESLint
+        runs-on: ubuntu-latest
+        steps:
+            - name: 🛑 Cancel Previous Runs
+              uses: styfle/cancel-workflow-action@0.11.0
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v3
+
+            - name: ⎔ Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+
+            - name: 📥 Download deps
+              uses: bahmutov/npm-install@v1
+              with:
+                  useLockFile: false
+
+            - name: 🔬 Lint
+              run: npm run lint
+
+    typecheck:
+        name: ʦ TypeScript
+        runs-on: ubuntu-latest
+        steps:
+            - name: 🛑 Cancel Previous Runs
+              uses: styfle/cancel-workflow-action@0.11.0
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v3
+
+            - name: ⎔ Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+
+            - name: 📥 Download deps
+              uses: bahmutov/npm-install@v1
+              with:
+                  useLockFile: false
+
+            - name: 🔎 Type check
+              run: npm run typecheck --if-present
+
+    vitest:
+        name: ⚡ Vitest
+        runs-on: ubuntu-latest
+        steps:
+            - name: 🛑 Cancel Previous Runs
+              uses: styfle/cancel-workflow-action@0.11.0
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v3
+
+            - name: ⎔ Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+
+            - name: 📥 Download deps
+              uses: bahmutov/npm-install@v1
+              with:
+                  useLockFile: false
+
+            - name: ⚡ Run vitest
+              run: npm run test -- --coverage
+
+    cypress:
+        name: ⚫️ Cypress
+        runs-on: ubuntu-latest
+        needs: [lint, typecheck, vitest]
+        steps:
+            - name: 🛑 Cancel Previous Runs
+              uses: styfle/cancel-workflow-action@0.11.0
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v3
+
+            - name: 🔑 Make envfile
+              uses: SpicyPizza/create-envfile@v1.3
+              with:
+                  envkey_SESSION_SECRET: ${{ secrets.SESSION_SECRET }}
+                  envkey_SUPABASE_ANON_PUBLIC: ${{ secrets.SUPABASE_ANON_PUBLIC }}
+                  envkey_SUPABASE_SERVICE_ROLE: ${{ secrets.SUPABASE_SERVICE_ROLE }}
+                  envkey_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+                  envkey_SERVER_URL: ${{ secrets.SERVER_URL }}
+                  envkey_DATABASE_URL: ${{ secrets.DATABASE_URL }}
+                  file_name: .env
+
+            - name: ⎔ Setup node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+
+            - name: 📥 Download deps
+              uses: bahmutov/npm-install@v1
+              with:
+                  useLockFile: false
+
+            - name: ⚙️ Build
+              run: npm run build
+
+            - name: 🌳 Cypress run
+              uses: cypress-io/github-action@v4
+              with:
+                  start: npm run start:ci
+                  wait-on: "http://localhost:8811"
+                  browser: chrome
+                  headed: true
+              env:
+                  PORT: "8811"
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
new file mode 100644
index 0000000..9d4eec2
--- /dev/null
+++ b/.prettierrc.cjs
@@ -0,0 +1,5 @@
+/** @type {import("prettier").Options} */
+module.exports = {
+	tabWidth: 4,
+	useTabs: true,
+};
diff --git a/Dockerfile b/Dockerfile
index 99f6e15..1623377 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,5 +1,5 @@
 # base node image
-FROM node:16-bullseye-slim as base
+FROM node:18-bookworm-slim as base
 
 # set for base and all layer that inherit from it
 ENV NODE_ENV production
diff --git a/README.md b/README.md
index 5c6197d..cdf3ef1 100644
--- a/README.md
+++ b/README.md
@@ -12,40 +12,39 @@ npx create-remix --template rphlmr/supa-fly-stack
 
 ## What's in the stack
 
-- [Fly app deployment](https://fly.io) with [Docker](https://www.docker.com/products/docker-desktop/)
-- Production-ready [Supabase Database](https://supabase.com/)
-- Healthcheck endpoint for [Fly backups region fallbacks](https://fly.io/docs/reference/configuration/#services-http_checks)
-- [GitHub Actions](https://github.com/features/actions) to deploy on merge to production and staging environments
-- Email/Password Authentication / Magic Link, with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
-- Database ORM with [Prisma](https://prisma.io)
-- Forms Schema (client and server sides !) validation with [Remix Params Helper](https://github.com/kiliman/remix-params-helper)
-- Styling with [Tailwind](https://tailwindcss.com/)
-- End-to-end testing with [Cypress](https://cypress.io)
-- Local third party request mocking with [MSW](https://mswjs.io)
-- Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)
-- Code formatting with [Prettier](https://prettier.io)
-- Linting with [ESLint](https://eslint.org)
-- Static Types with [TypeScript](https://typescriptlang.org)
+-   [Fly app deployment](https://fly.io) with [Docker](https://www.docker.com/products/docker-desktop/)
+-   Production-ready [Supabase Database](https://supabase.com/)
+-   Healthcheck endpoint for [Fly backups region fallbacks](https://fly.io/docs/reference/configuration/#services-http_checks)
+-   [GitHub Actions](https://github.com/features/actions) to deploy on merge to production and staging environments
+-   Email/Password Authentication / Magic Link, with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
+-   Database ORM with [Prisma](https://prisma.io)
+-   Forms Schema (client and server sides !) validation with [Remix Params Helper](https://github.com/kiliman/remix-params-helper)
+-   Styling with [Tailwind](https://tailwindcss.com/)
+-   End-to-end testing with [Cypress](https://cypress.io)
+-   Local third party request mocking with [MSW](https://mswjs.io)
+-   Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)
+-   Code formatting with [Prettier](https://prettier.io)
+-   Linting with [ESLint](https://eslint.org)
+-   Static Types with [TypeScript](https://typescriptlang.org)
 
 Not a fan of bits of the stack? Fork it, change it, and use `npx create-remix --template your/repo`! Make it your own.
 
 ## Development
 
-- Create a [Supabase Database](https://supabase.com/) (free tier gives you 2 databases)
+-   Create a [Supabase Database](https://supabase.com/) (free tier gives you 2 databases)
 
-  > **Note:** Only one for playing around with Supabase or 2 for `staging` and `production`
+    > **Note:** Only one for playing around with Supabase or 2 for `staging` and `production`
 
-  > **Note:** Used all your free tiers ? Also works with [Supabase CLI](https://github.com/supabase/cli) and local self-hosting
+    > **Note:** Used all your free tiers ? Also works with [Supabase CLI](https://github.com/supabase/cli) and local self-hosting
 
-  > **Note:** Create a strong database password, but prefer a passphrase, it'll be more easy to use in connection string (no need to escape special char)
-  >
-  > _example : my_strong_passphrase_
-
-- Go to https://app.supabase.io/project/{PROJECT}/settings/api to find your secrets
-- "Project API keys"
-- Add your `SUPABASE_URL`, `SERVER_URL`, `SUPABASE_SERVICE_ROLE` (aka `service_role` `secret`), `SUPABASE_ANON_PUBLIC` (aka `anon` `public`) and `DATABASE_URL` in the `.env` file
-  > **Note:** `SERVER_URL` is your localhost on dev. It'll work for magic link login
+    > **Note:** Create a strong database password, but prefer a passphrase, it'll be more easy to use in connection string (no need to escape special char)
+    >
+    > _example : my_strong_passphrase_
 
+-   Go to https://app.supabase.io/project/{PROJECT}/settings/api to find your secrets
+-   "Project API keys"
+-   Add your `SUPABASE_URL`, `SERVER_URL`, `SUPABASE_SERVICE_ROLE` (aka `service_role` `secret`), `SUPABASE_ANON_PUBLIC` (aka `anon` `public`) and `DATABASE_URL` in the `.env` file
+    > **Note:** `SERVER_URL` is your localhost on dev. It'll work for magic link login
 
 ```en
 DATABASE_URL="postgres://postgres:{STAGING_POSTGRES_PASSWORD}@db.{STAGING_YOUR_INSTANCE_NAME}.supabase.co:5432/postgres"
@@ -56,37 +55,37 @@ SESSION_SECRET="super-duper-s3cret"
 SERVER_URL="http://localhost:3000"
 ```
 
-- This step only applies if you've opted out of having the CLI install dependencies for you:
+-   This step only applies if you've opted out of having the CLI install dependencies for you:
 
-  ```sh
-  npx remix init
-  ```
+    ```sh
+    npx remix init
+    ```
 
-- Initial setup:
+-   Initial setup:
 
-  ```sh
-  npm run setup
-  ```
+    ```sh
+    npm run setup
+    ```
 
-- Start dev server:
+-   Start dev server:
 
-  ```sh
-  npm run dev
-  ```
+    ```sh
+    npm run dev
+    ```
 
 This starts your app in development mode, rebuilding assets on file changes.
 
 The database seed script creates a new user with some data you can use to get started:
 
-- Email: `hello@supabase.com`
-- Password: `supabase`
+-   Email: `hello@supabase.com`
+-   Password: `supabase`
 
 ### Relevant code:
 
 This is a pretty simple note-taking app, but it's a good example of how you can build a full-stack app with Prisma, Supabase, and Remix. The main functionality is creating users, logging in and out (handling access and refresh tokens + refresh on expiration), and creating and deleting notes.
 
-- auth / session [./app/modules/auth](./app/modules/auth)
-- creating, and deleting notes [./app/modules/note](./app/modules/note)
+-   auth / session [./app/modules/auth](./app/modules/auth)
+-   creating, and deleting notes [./app/modules/note](./app/modules/note)
 
 ## Deployment
 
@@ -96,65 +95,65 @@ This Remix Stack comes with two GitHub Actions that handle automatically deployi
 
 Prior to your first deployment, you'll need to do a few things:
 
-- [Install Fly](https://fly.io/docs/getting-started/installing-flyctl/)
+-   [Install Fly](https://fly.io/docs/getting-started/installing-flyctl/)
 
-- Sign up and log in to Fly
+-   Sign up and log in to Fly
 
-  ```sh
-  fly auth signup
-  ```
+    ```sh
+    fly auth signup
+    ```
 
-  > **Note:** If you have more than one Fly account, ensure that you are signed into the same account in the Fly CLI as you are in the browser. In your terminal, run `fly auth whoami` and ensure the email matches the Fly account signed into the browser.
+    > **Note:** If you have more than one Fly account, ensure that you are signed into the same account in the Fly CLI as you are in the browser. In your terminal, run `fly auth whoami` and ensure the email matches the Fly account signed into the browser.
 
-- Create two apps on Fly, one for staging and one for production:
+-   Create two apps on Fly, one for staging and one for production:
 
-  ```sh
-  fly apps create supa-fly-stack-template
-  fly apps create supa-fly-stack-template-staging  # ** not mandatory if you don't want a staging environnement **
-  ```
+    ```sh
+    fly apps create supa-fly-stack-template
+    fly apps create supa-fly-stack-template-staging  # ** not mandatory if you don't want a staging environnement **
+    ```
 
-  > **Note:** For production app, make sure this name matches the `app` set in your `fly.toml` file. Otherwise, you will not be able to deploy.
+    > **Note:** For production app, make sure this name matches the `app` set in your `fly.toml` file. Otherwise, you will not be able to deploy.
 
-  - Initialize Git.
+    -   Initialize Git.
 
-  ```sh
-  git init
-  ```
+    ```sh
+    git init
+    ```
 
-- Create a new [GitHub Repository](https://repo.new), and then add it as the remote for your project. **Do not push your app yet!**
+-   Create a new [GitHub Repository](https://repo.new), and then add it as the remote for your project. **Do not push your app yet!**
 
-  ```sh
-  git remote add origin <ORIGIN_URL>
-  ```
+    ```sh
+    git remote add origin <ORIGIN_URL>
+    ```
 
-- Add a `FLY_API_TOKEN` to your GitHub repo. To do this, go to your user settings on Fly and create a new [token](https://web.fly.io/user/personal_access_tokens/new), then add it to [your repo secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) with the name `FLY_API_TOKEN`.
+-   Add a `FLY_API_TOKEN` to your GitHub repo. To do this, go to your user settings on Fly and create a new [token](https://web.fly.io/user/personal_access_tokens/new), then add it to [your repo secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) with the name `FLY_API_TOKEN`.
 
-- Add a `SESSION_SECRET`, `SUPABASE_URL`, `SUPABASE_SERVICE_ROLE`,`SUPABASE_ANON_PUBLIC`, `SERVER_URL` and `DATABASE_URL` to your fly app secrets
+-   Add a `SESSION_SECRET`, `SUPABASE_URL`, `SUPABASE_SERVICE_ROLE`,`SUPABASE_ANON_PUBLIC`, `SERVER_URL` and `DATABASE_URL` to your fly app secrets
 
-  > **Note:** To find your `SERVER_URL`, go to [your fly.io dashboard](https://fly.io/apps/supa-fly-stack-template-3a36)
+    > **Note:** To find your `SERVER_URL`, go to [your fly.io dashboard](https://fly.io/apps/supa-fly-stack-template-3a36)
 
-  To do this you can run the following commands:
+    To do this you can run the following commands:
 
-  ```sh
-  # production (--app name is resolved from fly.toml)
-  fly secrets set SESSION_SECRET=$(openssl rand -hex 32)
-  fly secrets set SUPABASE_URL="https://{YOUR_INSTANCE_NAME}.supabase.co"
-  fly secrets set SUPABASE_SERVICE_ROLE="{SUPABASE_SERVICE_ROLE}"
-  fly secrets set SUPABASE_ANON_PUBLIC="{SUPABASE_ANON_PUBLIC}"
-  fly secrets set DATABASE_URL="postgres://postgres:{POSTGRES_PASSWORD}@db.{YOUR_INSTANCE_NAME}.supabase.co:5432/postgres"
-  fly secrets set SERVER_URL="https://{YOUR_STAGING_SERVEUR_URL}"
+    ```sh
+    # production (--app name is resolved from fly.toml)
+    fly secrets set SESSION_SECRET=$(openssl rand -hex 32)
+    fly secrets set SUPABASE_URL="https://{YOUR_INSTANCE_NAME}.supabase.co"
+    fly secrets set SUPABASE_SERVICE_ROLE="{SUPABASE_SERVICE_ROLE}"
+    fly secrets set SUPABASE_ANON_PUBLIC="{SUPABASE_ANON_PUBLIC}"
+    fly secrets set DATABASE_URL="postgres://postgres:{POSTGRES_PASSWORD}@db.{YOUR_INSTANCE_NAME}.supabase.co:5432/postgres"
+    fly secrets set SERVER_URL="https://{YOUR_STAGING_SERVEUR_URL}"
 
-  # staging (specify --app name) ** not mandatory if you don't want a staging environnement **
-  fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app supa-fly-stack-template-staging
-  fly secrets set SUPABASE_URL="https://{YOUR_STAGING_INSTANCE_NAME}.supabase.co" --app supa-fly-stack-template-staging
-  fly secrets set SUPABASE_SERVICE_ROLE="{STAGING_SUPABASE_SERVICE_ROLE}" --app supa-fly-stack-template-staging
-  fly secrets set SUPABASE_ANON_PUBLIC="{STAGING_SUPABASE_ANON_PUBLIC}" --app supa-fly-stack-template-staging
-  fly secrets set DATABASE_URL="postgres://postgres:{STAGING_POSTGRES_PASSWORD}@db.{STAGING_YOUR_INSTANCE_NAME}.supabase.co:5432/postgres" --app supa-fly-stack-template-staging
-  fly secrets set SERVER_URL="https://{YOUR_STAGING_SERVEUR_URL}" --app supa-fly-stack-template-staging
+    # staging (specify --app name) ** not mandatory if you don't want a staging environnement **
+    fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app supa-fly-stack-template-staging
+    fly secrets set SUPABASE_URL="https://{YOUR_STAGING_INSTANCE_NAME}.supabase.co" --app supa-fly-stack-template-staging
+    fly secrets set SUPABASE_SERVICE_ROLE="{STAGING_SUPABASE_SERVICE_ROLE}" --app supa-fly-stack-template-staging
+    fly secrets set SUPABASE_ANON_PUBLIC="{STAGING_SUPABASE_ANON_PUBLIC}" --app supa-fly-stack-template-staging
+    fly secrets set DATABASE_URL="postgres://postgres:{STAGING_POSTGRES_PASSWORD}@db.{STAGING_YOUR_INSTANCE_NAME}.supabase.co:5432/postgres" --app supa-fly-stack-template-staging
+    fly secrets set SERVER_URL="https://{YOUR_STAGING_SERVEUR_URL}" --app supa-fly-stack-template-staging
 
-  ```
+    ```
 
-  If you don't have openssl installed, you can also use [1password](https://1password.com/generate-password) to generate a random secret, just replace `$(openssl rand -hex 32)` with the generated secret.
+    If you don't have openssl installed, you can also use [1password](https://1password.com/generate-password) to generate a random secret, just replace `$(openssl rand -hex 32)` with the generated secret.
 
 Now that everything is set up you can commit and push your changes to your repo. Every commit to your `main` branch will trigger a deployment to your production environment, and every commit to your `dev` branch will trigger a deployment to your staging environment.
 
@@ -184,7 +183,7 @@ We also have a utility to auto-delete the user at the end of your test. Just mak
 
 ```ts
 afterEach(() => {
-  cy.cleanupUser();
+	cy.cleanupUser();
 });
 ```
 
@@ -211,23 +210,25 @@ We use [Prettier](https://prettier.io/) for auto-formatting in this project. It'
 You are now ready to go further, congrats!
 
 To extend your Prisma schema and apply changes on your supabase database :
-- Make your changes in [./app/database/schema.prisma](./app/database/schema.prisma)
-- Prepare your schema migration
-  ```sh
-  npm run db:prepare-migration
-  ```
-- Check your migration in [./app/database/migrations](./app/database)
-- Apply this migration to production
-
-  ```sh
-  npm run db:deploy-migration
-  ```
+
+-   Make your changes in [./app/database/schema.prisma](./app/database/schema.prisma)
+-   Prepare your schema migration
+    ```sh
+    npm run db:prepare-migration
+    ```
+-   Check your migration in [./app/database/migrations](./app/database)
+-   Apply this migration to production
+
+    ```sh
+    npm run db:deploy-migration
+    ```
 
 ## If your token expires in less than 1 hour (3600 seconds in Supabase Dashboard)
 
 If you have a lower token lifetime than me (1 hour), you should take a look at `REFRESH_ACCESS_TOKEN_THRESHOLD` in [./app/modules/auth/session.server.ts](./app/modules/auth/session.server.ts) and set what you think is the best value for your use case.
 
 ## Supabase RLS
+
 You may ask "can I use RLS with Remix".
 
 The answer is "Yes" but It has a cost.
@@ -242,9 +243,9 @@ In order to make the register/login with magic link work, you will need to add s
 You need to add the site url as well as the redirect urls of your local, test and live app that will be used for oauth
 To do that navigate to Authentication > URL configiration and add the folowing values:
 
-- https://localhost:3000/oauth/callback
-- https://localhost:3000/reset-password
-- https://staging-domain.com/oauth/callback
-- https://staging-domain.com/reset-password
-- https://live-domain.com/oauth/callback
-- https://live-domain.com/reset-password
\ No newline at end of file
+-   https://localhost:3000/oauth/callback
+-   https://localhost:3000/reset-password
+-   https://staging-domain.com/oauth/callback
+-   https://staging-domain.com/reset-password
+-   https://live-domain.com/oauth/callback
+-   https://live-domain.com/reset-password
diff --git a/app/database/db.server.ts b/app/database/db.server.ts
index a9b89ec..fee08cf 100644
--- a/app/database/db.server.ts
+++ b/app/database/db.server.ts
@@ -6,8 +6,8 @@ export type { Note, User } from "@prisma/client";
 let db: PrismaClient;
 
 declare global {
-  // eslint-disable-next-line no-var
-  var __db__: PrismaClient;
+	// eslint-disable-next-line no-var
+	var __db__: PrismaClient;
 }
 
 // this is needed because in development we don't want to restart
@@ -15,13 +15,13 @@ declare global {
 // create a new connection to the DB with every change either.
 // in production, we'll have a single connection to the DB.
 if (NODE_ENV === "production") {
-  db = new PrismaClient();
+	db = new PrismaClient();
 } else {
-  if (!global.__db__) {
-    global.__db__ = new PrismaClient();
-  }
-  db = global.__db__;
-  db.$connect();
+	if (!global.__db__) {
+		global.__db__ = new PrismaClient();
+	}
+	db = global.__db__;
+	db.$connect();
 }
 
 export { db };
diff --git a/app/database/seed.server.ts b/app/database/seed.server.ts
index 37e7a8f..c9e3fbd 100644
--- a/app/database/seed.server.ts
+++ b/app/database/seed.server.ts
@@ -5,10 +5,10 @@ import { createClient } from "@supabase/supabase-js";
 import { SUPABASE_SERVICE_ROLE, SUPABASE_URL } from "../utils/env";
 
 const supabaseAdmin = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE, {
-  auth: {
-    autoRefreshToken: false,
-    persistSession: false,
-  },
+	auth: {
+		autoRefreshToken: false,
+		persistSession: false,
+	},
 });
 
 const prisma = new PrismaClient();
@@ -16,80 +16,80 @@ const prisma = new PrismaClient();
 const email = "hello@supabase.com";
 
 const getUserId = async (): Promise<string> => {
-  const userList = await supabaseAdmin.auth.admin.listUsers();
+	const userList = await supabaseAdmin.auth.admin.listUsers();
 
-  if (userList.error) {
-    throw userList.error;
-  }
+	if (userList.error) {
+		throw userList.error;
+	}
 
-  const existingUserId = userList.data.users.find(
-    (user) => user.email === email
-  )?.id;
+	const existingUserId = userList.data.users.find(
+		(user) => user.email === email,
+	)?.id;
 
-  if (existingUserId) {
-    return existingUserId;
-  }
+	if (existingUserId) {
+		return existingUserId;
+	}
 
-  const newUser = await supabaseAdmin.auth.admin.createUser({
-    email,
-    password: "supabase",
-    email_confirm: true,
-  });
+	const newUser = await supabaseAdmin.auth.admin.createUser({
+		email,
+		password: "supabase",
+		email_confirm: true,
+	});
 
-  if (newUser.error) {
-    throw newUser.error;
-  }
+	if (newUser.error) {
+		throw newUser.error;
+	}
 
-  return newUser.data.user.id;
+	return newUser.data.user.id;
 };
 
 async function seed() {
-  try {
-    const id = await getUserId();
-
-    // cleanup the existing database
-    await prisma.user.delete({ where: { email } }).catch(() => {
-      // no worries if it doesn't exist yet
-    });
-
-    const user = await prisma.user.create({
-      data: {
-        email,
-        id,
-      },
-    });
-
-    await prisma.note.create({
-      data: {
-        title: "My first note",
-        body: "Hello, world!",
-        userId: user.id,
-      },
-    });
-
-    await prisma.note.create({
-      data: {
-        title: "My second note",
-        body: "Hello, world!",
-        userId: user.id,
-      },
-    });
-
-    console.log(`Database has been seeded. 🌱\n`);
-    console.log(
-      `User added to your database 👇 \n🆔: ${user.id}\n📧: ${user.email}\n🔑: supabase`
-    );
-  } catch (cause) {
-    console.error(cause);
-    throw new Error("Seed failed 🥲");
-  }
+	try {
+		const id = await getUserId();
+
+		// cleanup the existing database
+		await prisma.user.delete({ where: { email } }).catch(() => {
+			// no worries if it doesn't exist yet
+		});
+
+		const user = await prisma.user.create({
+			data: {
+				email,
+				id,
+			},
+		});
+
+		await prisma.note.create({
+			data: {
+				title: "My first note",
+				body: "Hello, world!",
+				userId: user.id,
+			},
+		});
+
+		await prisma.note.create({
+			data: {
+				title: "My second note",
+				body: "Hello, world!",
+				userId: user.id,
+			},
+		});
+
+		console.log(`Database has been seeded. 🌱\n`);
+		console.log(
+			`User added to your database 👇 \n🆔: ${user.id}\n📧: ${user.email}\n🔑: supabase`,
+		);
+	} catch (cause) {
+		console.error(cause);
+		throw new Error("Seed failed 🥲");
+	}
 }
 
 seed()
-  .catch((e) => {
-    console.error(e);
-    process.exit(1);
-  })
-  .finally(async () => {
-    await prisma.$disconnect();
-  });
+	.catch((e) => {
+		console.error(e);
+		process.exit(1);
+	})
+	.finally(async () => {
+		await prisma.$disconnect();
+	});
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
index 93ef8b9..c2ca900 100644
--- a/app/entry.client.tsx
+++ b/app/entry.client.tsx
@@ -6,16 +6,16 @@ import { hydrateRoot } from "react-dom/client";
 import { I18nClientProvider, initI18nextClient } from "./integrations/i18n"; // your i18n configuration file
 
 function hydrate() {
-  React.startTransition(() => {
-    hydrateRoot(
-      document,
-      <React.StrictMode>
-        <I18nClientProvider>
-          <RemixBrowser />
-        </I18nClientProvider>
-      </React.StrictMode>
-    );
-  });
+	React.startTransition(() => {
+		hydrateRoot(
+			document,
+			<React.StrictMode>
+				<I18nClientProvider>
+					<RemixBrowser />
+				</I18nClientProvider>
+			</React.StrictMode>,
+		);
+	});
 }
 
 initI18nextClient(hydrate);
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
index 606015d..dcaf358 100644
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -1,7 +1,7 @@
 import { PassThrough } from "stream";
 
 import { Response } from "@remix-run/node";
-import type { EntryContext, Headers } from "@remix-run/node";
+import type { EntryContext } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
@@ -12,52 +12,52 @@ import { createI18nextServerInstance } from "./integrations/i18n";
 const ABORT_DELAY = 5000;
 
 export default async function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext
+	request: Request,
+	responseStatusCode: number,
+	responseHeaders: Headers,
+	remixContext: EntryContext,
 ) {
-  const callbackName = isbot(request.headers.get("user-agent"))
-    ? "onAllReady"
-    : "onShellReady";
-
-  return new Promise(async (res, reject) => {
-    let didError = false;
-
-    // First, we create a new instance of i18next so every request will have a
-    // completely unique instance and not share any state
-    const instance = await createI18nextServerInstance(request, remixContext);
-
-    const { pipe, abort } = renderToPipeableStream(
-      <I18nextProvider i18n={instance}>
-        <RemixServer
-          context={remixContext}
-          url={request.url}
-        />
-      </I18nextProvider>,
-      {
-        [callbackName]() {
-          const body = new PassThrough();
-
-          responseHeaders.set("Content-Type", "text/html");
-
-          res(
-            new Response(body, {
-              status: didError ? 500 : responseStatusCode,
-              headers: responseHeaders,
-            })
-          );
-          pipe(body);
-        },
-        onShellError(err: unknown) {
-          reject(err);
-        },
-        onError(error: unknown) {
-          didError = true;
-          console.error(error);
-        },
-      }
-    );
-    setTimeout(abort, ABORT_DELAY);
-  });
+	const callbackName = isbot(request.headers.get("user-agent"))
+		? "onAllReady"
+		: "onShellReady";
+
+	return new Promise(async (res, reject) => {
+		let didError = false;
+
+		// First, we create a new instance of i18next so every request will have a
+		// completely unique instance and not share any state
+		const instance = await createI18nextServerInstance(
+			request,
+			remixContext,
+		);
+
+		const { pipe, abort } = renderToPipeableStream(
+			<I18nextProvider i18n={instance}>
+				<RemixServer context={remixContext} url={request.url} />
+			</I18nextProvider>,
+			{
+				[callbackName]() {
+					const body = new PassThrough();
+
+					responseHeaders.set("Content-Type", "text/html");
+
+					res(
+						new Response(body, {
+							status: didError ? 500 : responseStatusCode,
+							headers: responseHeaders,
+						}),
+					);
+					pipe(body);
+				},
+				onShellError(err: unknown) {
+					reject(err);
+				},
+				onError(error: unknown) {
+					didError = true;
+					console.error(error);
+				},
+			},
+		);
+		setTimeout(abort, ABORT_DELAY);
+	});
 }
diff --git a/app/hooks/use-fetcher.ts b/app/hooks/use-fetcher.ts
deleted file mode 100644
index d5d00b8..0000000
--- a/app/hooks/use-fetcher.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { SerializeFrom } from "@remix-run/node";
-import { useFetcher } from "@remix-run/react";
-import type { FetcherWithComponents } from "@remix-run/react";
-
-type TypedFetcherWithComponents<T> = Omit<FetcherWithComponents<T>, "data"> & {
-  data: SerializeFrom<T> | null;
-};
-export function useTypedFetcher<T>(): TypedFetcherWithComponents<T> {
-  return useFetcher<T>() as TypedFetcherWithComponents<T>;
-}
diff --git a/app/hooks/use-interval.ts b/app/hooks/use-interval.ts
index 01024a5..c3072d4 100644
--- a/app/hooks/use-interval.ts
+++ b/app/hooks/use-interval.ts
@@ -8,21 +8,21 @@ import { useEffect, useRef } from "react";
  * @param delay - in seconds
  */
 export function useInterval(callback: () => void, delay?: number) {
-  const savedCallback = useRef<() => void>();
+	const savedCallback = useRef<() => void>();
 
-  // Remember the latest callback.
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
+	// Remember the latest callback.
+	useEffect(() => {
+		savedCallback.current = callback;
+	}, [callback]);
 
-  // Set up the interval.
-  useEffect(() => {
-    function tick() {
-      savedCallback.current?.();
-    }
-    if (delay) {
-      const id = setInterval(tick, delay * 1_000);
-      return () => clearInterval(id);
-    }
-  }, [delay]);
+	// Set up the interval.
+	useEffect(() => {
+		function tick() {
+			savedCallback.current?.();
+		}
+		if (delay) {
+			const id = setInterval(tick, delay * 1_000);
+			return () => clearInterval(id);
+		}
+	}, [delay]);
 }
diff --git a/app/hooks/use-matches-data.ts b/app/hooks/use-matches-data.ts
index 113ef4b..c303a82 100644
--- a/app/hooks/use-matches-data.ts
+++ b/app/hooks/use-matches-data.ts
@@ -9,10 +9,10 @@ import { useMatches } from "@remix-run/react";
  * @returns {JSON|undefined} The router data or undefined if not found
  */
 export function useMatchesData<T>(id: string): T | undefined {
-  const matchingRoutes = useMatches();
-  const route = useMemo(
-    () => matchingRoutes.find((route) => route.id === id),
-    [matchingRoutes, id]
-  );
-  return (route?.data as T) || undefined;
+	const matchingRoutes = useMatches();
+	const route = useMemo(
+		() => matchingRoutes.find((route) => route.id === id),
+		[matchingRoutes, id],
+	);
+	return (route?.data as T) || undefined;
 }
diff --git a/app/integrations/i18n/config.ts b/app/integrations/i18n/config.ts
index 4754512..9d83191 100644
--- a/app/integrations/i18n/config.ts
+++ b/app/integrations/i18n/config.ts
@@ -1,11 +1,11 @@
 export const config = {
-  // This is the list of languages your application supports
-  supportedLngs: ["en", "fr", "ru"],
-  // This is the language you want to use in case
-  // if the user language is not in the supportedLngs
-  fallbackLng: "en",
-  // The default namespace of i18next is "translation", but you can customize it here
-  defaultNS: "common",
-  // Disabling suspense is recommended
-  react: { useSuspense: false },
+	// This is the list of languages your application supports
+	supportedLngs: ["en", "fr", "ru"],
+	// This is the language you want to use in case
+	// if the user language is not in the supportedLngs
+	fallbackLng: "en",
+	// The default namespace of i18next is "translation", but you can customize it here
+	defaultNS: "common",
+	// Disabling suspense is recommended
+	react: { useSuspense: false },
 };
diff --git a/app/integrations/i18n/i18next.client.tsx b/app/integrations/i18n/i18next.client.tsx
index 99e3428..e55f437 100644
--- a/app/integrations/i18n/i18next.client.tsx
+++ b/app/integrations/i18n/i18next.client.tsx
@@ -7,40 +7,40 @@ import { getInitialNamespaces } from "remix-i18next";
 import { config } from "./config";
 
 export function initI18nextClient(hydrate: IdleRequestCallback) {
-  i18next
-    .use(initReactI18next) // Tell i18next to use the react-i18next plugin
-    .use(LanguageDetector) // Setup a client-side language detector
-    .use(Backend) // Setup your backend
-    .init({
-      ...config, // spread the configuration
-      // This function detects the namespaces your routes rendered while SSR use
-      ns: getInitialNamespaces(),
-      backend: {
-        loadPath: "/locales/{{lng}}/{{ns}}.json",
-      },
-      detection: {
-        // Here only enable htmlTag detection, we'll detect the language only
-        // server-side with remix-i18next, by using the `<html lang>` attribute
-        // we can communicate to the client the language detected server-side
-        order: ["htmlTag"],
-        // Because we only use htmlTag, there's no reason to cache the language
-        // on the browser, so we disable it
-        caches: [],
-      },
-    })
-    .then(() => {
-      if (window.requestIdleCallback) {
-        window.requestIdleCallback(hydrate);
-      } else {
-        window.setTimeout(hydrate, 1);
-      }
-    });
+	i18next
+		.use(initReactI18next) // Tell i18next to use the react-i18next plugin
+		.use(LanguageDetector) // Setup a client-side language detector
+		.use(Backend) // Setup your backend
+		.init({
+			...config, // spread the configuration
+			// This function detects the namespaces your routes rendered while SSR use
+			ns: getInitialNamespaces(),
+			backend: {
+				loadPath: "/locales/{{lng}}/{{ns}}.json",
+			},
+			detection: {
+				// Here only enable htmlTag detection, we'll detect the language only
+				// server-side with remix-i18next, by using the `<html lang>` attribute
+				// we can communicate to the client the language detected server-side
+				order: ["htmlTag"],
+				// Because we only use htmlTag, there's no reason to cache the language
+				// on the browser, so we disable it
+				caches: [],
+			},
+		})
+		.then(() => {
+			if (window.requestIdleCallback) {
+				window.requestIdleCallback(hydrate);
+			} else {
+				window.setTimeout(hydrate, 1);
+			}
+		});
 }
 
 export function I18nClientProvider({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) {
-  return <I18nextProvider i18n={i18next}>{children}</I18nextProvider>;
+	return <I18nextProvider i18n={i18next}>{children}</I18nextProvider>;
 }
diff --git a/app/integrations/i18n/i18next.server.tsx b/app/integrations/i18n/i18next.server.tsx
index c0c46ce..0f592aa 100644
--- a/app/integrations/i18n/i18next.server.tsx
+++ b/app/integrations/i18n/i18next.server.tsx
@@ -9,44 +9,44 @@ import { RemixI18Next } from "remix-i18next";
 import { config } from "./config"; // your i18n configuration file
 
 export const i18nextServer = new RemixI18Next({
-  detection: {
-    supportedLanguages: config.supportedLngs,
-    fallbackLanguage: config.fallbackLng,
-  },
-  // This is the configuration for i18next used
-  // when translating messages server-side  only
-  i18next: {
-    ...config,
-    backend: {
-      loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
-    },
-  },
-  // The backend you want to use to load the translations
-  // Tip: You could pass `resources` to the `i18next` configuration and avoid
-  // a backend here
-  // @ts-expect-error - `i18next-fs-backend` is not typed
-  backend: Backend,
+	detection: {
+		supportedLanguages: config.supportedLngs,
+		fallbackLanguage: config.fallbackLng,
+	},
+	// This is the configuration for i18next used
+	// when translating messages server-side  only
+	i18next: {
+		...config,
+		backend: {
+			loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
+		},
+	},
+	// The backend you want to use to load the translations
+	// Tip: You could pass `resources` to the `i18next` configuration and avoid
+	// a backend here
+	// @ts-expect-error - `i18next-fs-backend` is not typed
+	backend: Backend,
 });
 
 export async function createI18nextServerInstance(
-  request: Request,
-  remixContext: EntryContext,
+	request: Request,
+	remixContext: EntryContext,
 ) {
-  // Create a new instance of i18next so every request will have a
-  // completely unique instance and not share any state
-  const instance = createInstance();
+	// Create a new instance of i18next so every request will have a
+	// completely unique instance and not share any state
+	const instance = createInstance();
 
-  await instance
-    .use(initReactI18next) // Tell our instance to use react-i18next
-    .use(Backend) // Setup our backend
-    .init({
-      ...config, // spread the configuration
-      lng: await i18nextServer.getLocale(request), // detect locale from the request
-      ns: i18nextServer.getRouteNamespaces(remixContext), // detect what namespaces the routes about to render want to use
-      backend: {
-        loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
-      },
-    });
+	await instance
+		.use(initReactI18next) // Tell our instance to use react-i18next
+		.use(Backend) // Setup our backend
+		.init({
+			...config, // spread the configuration
+			lng: await i18nextServer.getLocale(request), // detect locale from the request
+			ns: i18nextServer.getRouteNamespaces(remixContext), // detect what namespaces the routes about to render want to use
+			backend: {
+				loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
+			},
+		});
 
-  return instance;
+	return instance;
 }
diff --git a/app/integrations/supabase/client.ts b/app/integrations/supabase/client.ts
index 8b16e69..55df16f 100644
--- a/app/integrations/supabase/client.ts
+++ b/app/integrations/supabase/client.ts
@@ -1,32 +1,32 @@
 import { createClient } from "@supabase/supabase-js";
 
 import {
-  SUPABASE_SERVICE_ROLE,
-  SUPABASE_URL,
-  SUPABASE_ANON_PUBLIC,
+	SUPABASE_SERVICE_ROLE,
+	SUPABASE_URL,
+	SUPABASE_ANON_PUBLIC,
 } from "~/utils/env";
 import { isBrowser } from "~/utils/is-browser";
 
 // ⚠️ cloudflare needs you define fetch option : https://github.com/supabase/supabase-js#custom-fetch-implementation
 // Use Remix fetch polyfill for node (See https://remix.run/docs/en/v1/other-api/node)
 function getSupabaseClient(supabaseKey: string, accessToken?: string) {
-  const global = accessToken
-    ? {
-        global: {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-          },
-        },
-      }
-    : {};
+	const global = accessToken
+		? {
+				global: {
+					headers: {
+						Authorization: `Bearer ${accessToken}`,
+					},
+				},
+		  }
+		: {};
 
-  return createClient(SUPABASE_URL, supabaseKey, {
-    auth: {
-      autoRefreshToken: false,
-      persistSession: false,
-    },
-    ...global,
-  });
+	return createClient(SUPABASE_URL, supabaseKey, {
+		auth: {
+			autoRefreshToken: false,
+			persistSession: false,
+		},
+		...global,
+	});
 }
 
 /**
@@ -37,12 +37,12 @@ function getSupabaseClient(supabaseKey: string, accessToken?: string) {
  * Reason : https://github.com/rphlmr/supa-fly-stack/pull/43#issue-1336412790
  */
 function getSupabaseAdmin() {
-  if (isBrowser)
-    throw new Error(
-      "getSupabaseAdmin is not available in browser and should NOT be used in insecure environments"
-    );
+	if (isBrowser)
+		throw new Error(
+			"getSupabaseAdmin is not available in browser and should NOT be used in insecure environments",
+		);
 
-  return getSupabaseClient(SUPABASE_SERVICE_ROLE);
+	return getSupabaseClient(SUPABASE_SERVICE_ROLE);
 }
 
 const supabaseClient = getSupabaseClient(SUPABASE_ANON_PUBLIC);
diff --git a/app/modules/auth/components/continue-with-email-form.tsx b/app/modules/auth/components/continue-with-email-form.tsx
index 54a1a9a..c0d535f 100644
--- a/app/modules/auth/components/continue-with-email-form.tsx
+++ b/app/modules/auth/components/continue-with-email-form.tsx
@@ -1,55 +1,55 @@
 import React from "react";
 
+import { useFetcher } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 
-import { useTypedFetcher } from "~/hooks/use-fetcher";
 import type { action } from "~/routes/send-magic-link";
 
 export function ContinueWithEmailForm() {
-  const ref = React.useRef<HTMLFormElement>(null);
-  const sendMagicLink = useTypedFetcher<typeof action>();
-  const { data, state, type } = sendMagicLink;
-  const isSuccessFull = type === "done" && !data?.error;
-  const isLoading = state === "submitting" || state === "loading";
-  const { t } = useTranslation("auth");
-  const buttonLabel = isLoading
-    ? t("register.sendingLink")
-    : t("register.continueWithEmail");
+	const ref = React.useRef<HTMLFormElement>(null);
+	const sendMagicLink = useFetcher<typeof action>();
+	const { data, state } = sendMagicLink;
+	const isSuccessFull = state === "idle" && data != null && !data.error;
+	const isLoading = state === "submitting" || state === "loading";
+	const { t } = useTranslation("auth");
+	const buttonLabel = isLoading
+		? t("register.sendingLink")
+		: t("register.continueWithEmail");
 
-  React.useEffect(() => {
-    if (isSuccessFull) {
-      ref.current?.reset();
-    }
-  }, [isSuccessFull]);
+	React.useEffect(() => {
+		if (isSuccessFull) {
+			ref.current?.reset();
+		}
+	}, [isSuccessFull]);
 
-  return (
-    <sendMagicLink.Form
-      method="post"
-      action="/send-magic-link"
-      replace={false}
-      ref={ref}
-    >
-      <input
-        type="email"
-        name="email"
-        id="magic-link"
-        className="mb-1 w-full rounded border border-gray-500 px-2 py-1 text-lg"
-        disabled={isLoading}
-      />
-      <div
-        className={`mb-2 h-6 text-center ${data?.error ? "text-red-600" : ""} ${
-          isSuccessFull ? "text-green-600" : ""
-        }`}
-      >
-        {!isSuccessFull ? data?.error : t("register.checkEmail")}
-      </div>
-      <button
-        type="submit"
-        disabled={isLoading}
-        className="flex w-full items-center justify-center rounded-md bg-green-500 px-4 py-3 font-medium text-white hover:bg-green-600  "
-      >
-        {buttonLabel}
-      </button>
-    </sendMagicLink.Form>
-  );
+	return (
+		<sendMagicLink.Form
+			method="post"
+			action="/send-magic-link"
+			replace={false}
+			ref={ref}
+		>
+			<input
+				type="email"
+				name="email"
+				id="magic-link"
+				className="mb-1 w-full rounded border border-gray-500 px-2 py-1 text-lg"
+				disabled={isLoading}
+			/>
+			<div
+				className={`mb-2 h-6 text-center ${
+					data?.error ? "text-red-600" : ""
+				} ${isSuccessFull ? "text-green-600" : ""}`}
+			>
+				{!isSuccessFull ? data?.error : t("register.checkEmail")}
+			</div>
+			<button
+				type="submit"
+				disabled={isLoading}
+				className="flex w-full items-center justify-center rounded-md bg-green-500 px-4 py-3 font-medium text-white hover:bg-green-600  "
+			>
+				{buttonLabel}
+			</button>
+		</sendMagicLink.Form>
+	);
 }
diff --git a/app/modules/auth/components/logout-button.tsx b/app/modules/auth/components/logout-button.tsx
index 3440708..38f95aa 100644
--- a/app/modules/auth/components/logout-button.tsx
+++ b/app/modules/auth/components/logout-button.tsx
@@ -2,20 +2,17 @@ import { Form } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 
 export function LogoutButton() {
-  const { t } = useTranslation("auth");
+	const { t } = useTranslation("auth");
 
-  return (
-    <Form
-      action="/logout"
-      method="post"
-    >
-      <button
-        data-test-id="logout"
-        type="submit"
-        className="rounded bg-slate-600 py-2 px-4 text-blue-100 hover:bg-blue-500 active:bg-blue-600"
-      >
-        {t("logout.action")}
-      </button>
-    </Form>
-  );
+	return (
+		<Form action="/logout" method="post">
+			<button
+				data-test-id="logout"
+				type="submit"
+				className="rounded bg-slate-600 py-2 px-4 text-blue-100 hover:bg-blue-500 active:bg-blue-600"
+			>
+				{t("logout.action")}
+			</button>
+		</Form>
+	);
 }
diff --git a/app/modules/auth/index.ts b/app/modules/auth/index.ts
index 4f45bab..908e18a 100644
--- a/app/modules/auth/index.ts
+++ b/app/modules/auth/index.ts
@@ -1,18 +1,18 @@
 export {
-  createEmailAuthAccount,
-  deleteAuthAccount,
-  signInWithEmail,
-  sendMagicLink,
-  refreshAccessToken,
-  updateAccountPassword,
-  sendResetPasswordLink,
+	createEmailAuthAccount,
+	deleteAuthAccount,
+	signInWithEmail,
+	sendMagicLink,
+	refreshAccessToken,
+	updateAccountPassword,
+	sendResetPasswordLink,
 } from "./service.server";
 export {
-  commitAuthSession,
-  createAuthSession,
-  destroyAuthSession,
-  requireAuthSession,
-  getAuthSession,
+	commitAuthSession,
+	createAuthSession,
+	destroyAuthSession,
+	requireAuthSession,
+	getAuthSession,
 } from "./session.server";
 export * from "./types";
 export * from "./components";
diff --git a/app/modules/auth/mappers.ts b/app/modules/auth/mappers.ts
index e5421eb..45b119f 100644
--- a/app/modules/auth/mappers.ts
+++ b/app/modules/auth/mappers.ts
@@ -3,22 +3,22 @@ import type { SupabaseAuthSession } from "~/integrations/supabase";
 import type { AuthSession } from "./types";
 
 export function mapAuthSession(
-  supabaseAuthSession: SupabaseAuthSession | null
+	supabaseAuthSession: SupabaseAuthSession | null,
 ): AuthSession | null {
-  if (!supabaseAuthSession) return null;
+	if (!supabaseAuthSession) return null;
 
-  if (!supabaseAuthSession.refresh_token)
-    throw new Error("User should have a refresh token");
+	if (!supabaseAuthSession.refresh_token)
+		throw new Error("User should have a refresh token");
 
-  if (!supabaseAuthSession.user?.email)
-    throw new Error("User should have an email");
+	if (!supabaseAuthSession.user?.email)
+		throw new Error("User should have an email");
 
-  return {
-    accessToken: supabaseAuthSession.access_token,
-    refreshToken: supabaseAuthSession.refresh_token,
-    userId: supabaseAuthSession.user.id,
-    email: supabaseAuthSession.user.email,
-    expiresIn: supabaseAuthSession.expires_in ?? -1,
-    expiresAt: supabaseAuthSession.expires_at ?? -1,
-  };
+	return {
+		accessToken: supabaseAuthSession.access_token,
+		refreshToken: supabaseAuthSession.refresh_token,
+		userId: supabaseAuthSession.user.id,
+		email: supabaseAuthSession.user.email,
+		expiresIn: supabaseAuthSession.expires_in ?? -1,
+		expiresAt: supabaseAuthSession.expires_at ?? -1,
+	};
 }
diff --git a/app/modules/auth/service.server.ts b/app/modules/auth/service.server.ts
index 218a5f1..87e3814 100644
--- a/app/modules/auth/service.server.ts
+++ b/app/modules/auth/service.server.ts
@@ -5,88 +5,88 @@ import { mapAuthSession } from "./mappers";
 import type { AuthSession } from "./types";
 
 export async function createEmailAuthAccount(email: string, password: string) {
-  const { data, error } = await getSupabaseAdmin().auth.admin.createUser({
-    email,
-    password,
-    email_confirm: true, // FIXME: demo purpose, assert that email is confirmed. For production, check email confirmation
-  });
+	const { data, error } = await getSupabaseAdmin().auth.admin.createUser({
+		email,
+		password,
+		email_confirm: true, // FIXME: demo purpose, assert that email is confirmed. For production, check email confirmation
+	});
 
-  if (!data.user || error) return null;
+	if (!data.user || error) return null;
 
-  return data.user;
+	return data.user;
 }
 
 export async function signInWithEmail(email: string, password: string) {
-  const { data, error } = await getSupabaseAdmin().auth.signInWithPassword({
-    email,
-    password,
-  });
+	const { data, error } = await getSupabaseAdmin().auth.signInWithPassword({
+		email,
+		password,
+	});
 
-  if (!data.session || error) return null;
+	if (!data.session || error) return null;
 
-  return mapAuthSession(data.session);
+	return mapAuthSession(data.session);
 }
 
 export async function sendMagicLink(email: string) {
-  return getSupabaseAdmin().auth.signInWithOtp({
-    email,
-    options: {
-      emailRedirectTo: `${SERVER_URL}/oauth/callback`,
-    },
-  });
+	return getSupabaseAdmin().auth.signInWithOtp({
+		email,
+		options: {
+			emailRedirectTo: `${SERVER_URL}/oauth/callback`,
+		},
+	});
 }
 
 export async function sendResetPasswordLink(email: string) {
-  return getSupabaseAdmin().auth.resetPasswordForEmail(email, {
-    redirectTo: `${SERVER_URL}/reset-password`,
-  });
+	return getSupabaseAdmin().auth.resetPasswordForEmail(email, {
+		redirectTo: `${SERVER_URL}/reset-password`,
+	});
 }
 
 export async function updateAccountPassword(id: string, password: string) {
-  const { data, error } = await getSupabaseAdmin().auth.admin.updateUserById(
-    id,
-    { password }
-  );
+	const { data, error } = await getSupabaseAdmin().auth.admin.updateUserById(
+		id,
+		{ password },
+	);
 
-  if (!data.user || error) return null;
+	if (!data.user || error) return null;
 
-  return data.user;
+	return data.user;
 }
 
 export async function deleteAuthAccount(userId: string) {
-  const { error } = await getSupabaseAdmin().auth.admin.deleteUser(userId);
+	const { error } = await getSupabaseAdmin().auth.admin.deleteUser(userId);
 
-  if (error) return null;
+	if (error) return null;
 
-  return true;
+	return true;
 }
 
 export async function getAuthAccountByAccessToken(accessToken: string) {
-  const { data, error } = await getSupabaseAdmin().auth.getUser(accessToken);
+	const { data, error } = await getSupabaseAdmin().auth.getUser(accessToken);
 
-  if (!data.user || error) return null;
+	if (!data.user || error) return null;
 
-  return data.user;
+	return data.user;
 }
 
 export async function refreshAccessToken(
-  refreshToken?: string
+	refreshToken?: string,
 ): Promise<AuthSession | null> {
-  if (!refreshToken) return null;
+	if (!refreshToken) return null;
 
-  const { data, error } = await getSupabaseAdmin().auth.refreshSession({
-    refresh_token: refreshToken,
-  });
+	const { data, error } = await getSupabaseAdmin().auth.refreshSession({
+		refresh_token: refreshToken,
+	});
 
-  if (!data.session || error) return null;
+	if (!data.session || error) return null;
 
-  return mapAuthSession(data.session);
+	return mapAuthSession(data.session);
 }
 
 export async function verifyAuthSession(authSession: AuthSession) {
-  const authAccount = await getAuthAccountByAccessToken(
-    authSession.accessToken
-  );
+	const authAccount = await getAuthAccountByAccessToken(
+		authSession.accessToken,
+	);
 
-  return Boolean(authAccount);
+	return Boolean(authAccount);
 }
diff --git a/app/modules/auth/session.server.ts b/app/modules/auth/session.server.ts
index 72ca757..0c1829e 100644
--- a/app/modules/auth/session.server.ts
+++ b/app/modules/auth/session.server.ts
@@ -1,12 +1,12 @@
 import { createCookieSessionStorage, redirect } from "@remix-run/node";
 
 import {
-  getCurrentPath,
-  isGet,
-  makeRedirectToFromHere,
-  NODE_ENV,
-  safeRedirect,
-  SESSION_SECRET,
+	getCurrentPath,
+	isGet,
+	makeRedirectToFromHere,
+	NODE_ENV,
+	safeRedirect,
+	SESSION_SECRET,
 } from "~/utils";
 
 import { refreshAccessToken, verifyAuthSession } from "./service.server";
@@ -23,102 +23,104 @@ const REFRESH_ACCESS_TOKEN_THRESHOLD = 60 * 10; // 10 minutes left before token
  */
 
 const sessionStorage = createCookieSessionStorage({
-  cookie: {
-    name: "__authSession",
-    httpOnly: true,
-    path: "/",
-    sameSite: "lax",
-    secrets: [SESSION_SECRET],
-    secure: NODE_ENV === "production",
-  },
+	cookie: {
+		name: "__authSession",
+		httpOnly: true,
+		path: "/",
+		sameSite: "lax",
+		secrets: [SESSION_SECRET],
+		secure: NODE_ENV === "production",
+	},
 });
 
 export async function createAuthSession({
-  request,
-  authSession,
-  redirectTo,
+	request,
+	authSession,
+	redirectTo,
 }: {
-  request: Request;
-  authSession: AuthSession;
-  redirectTo: string;
+	request: Request;
+	authSession: AuthSession;
+	redirectTo: string;
 }) {
-  return redirect(safeRedirect(redirectTo), {
-    headers: {
-      "Set-Cookie": await commitAuthSession(request, {
-        authSession,
-        flashErrorMessage: null,
-      }),
-    },
-  });
+	return redirect(safeRedirect(redirectTo), {
+		headers: {
+			"Set-Cookie": await commitAuthSession(request, {
+				authSession,
+				flashErrorMessage: null,
+			}),
+		},
+	});
 }
 
 async function getSession(request: Request) {
-  const cookie = request.headers.get("Cookie");
-  return sessionStorage.getSession(cookie);
+	const cookie = request.headers.get("Cookie");
+	return sessionStorage.getSession(cookie);
 }
 
 export async function getAuthSession(
-  request: Request
+	request: Request,
 ): Promise<AuthSession | null> {
-  const session = await getSession(request);
-  return session.get(SESSION_KEY);
+	const session = await getSession(request);
+	return session.get(SESSION_KEY);
 }
 
 export async function commitAuthSession(
-  request: Request,
-  {
-    authSession,
-    flashErrorMessage,
-  }: {
-    authSession?: AuthSession | null;
-    flashErrorMessage?: string | null;
-  } = {}
+	request: Request,
+	{
+		authSession,
+		flashErrorMessage,
+	}: {
+		authSession?: AuthSession | null;
+		flashErrorMessage?: string | null;
+	} = {},
 ) {
-  const session = await getSession(request);
+	const session = await getSession(request);
 
-  // allow user session to be null.
-  // useful you want to clear session and display a message explaining why
-  if (authSession !== undefined) {
-    session.set(SESSION_KEY, authSession);
-  }
+	// allow user session to be null.
+	// useful you want to clear session and display a message explaining why
+	if (authSession !== undefined) {
+		session.set(SESSION_KEY, authSession);
+	}
 
-  session.flash(SESSION_ERROR_KEY, flashErrorMessage);
+	session.flash(SESSION_ERROR_KEY, flashErrorMessage);
 
-  return sessionStorage.commitSession(session, { maxAge: SESSION_MAX_AGE });
+	return sessionStorage.commitSession(session, { maxAge: SESSION_MAX_AGE });
 }
 
 export async function destroyAuthSession(request: Request) {
-  const session = await getSession(request);
+	const session = await getSession(request);
 
-  return redirect("/", {
-    headers: {
-      "Set-Cookie": await sessionStorage.destroySession(session),
-    },
-  });
+	return redirect("/", {
+		headers: {
+			"Set-Cookie": await sessionStorage.destroySession(session),
+		},
+	});
 }
 
 async function assertAuthSession(
-  request: Request,
-  { onFailRedirectTo }: { onFailRedirectTo?: string } = {}
+	request: Request,
+	{ onFailRedirectTo }: { onFailRedirectTo?: string } = {},
 ) {
-  const authSession = await getAuthSession(request);
-
-  // If there is no user session, Fly, You Fools! 🧙‍♂️
-  if (!authSession?.accessToken || !authSession?.refreshToken) {
-    throw redirect(
-      `${onFailRedirectTo || LOGIN_URL}?${makeRedirectToFromHere(request)}`,
-      {
-        headers: {
-          "Set-Cookie": await commitAuthSession(request, {
-            authSession: null,
-            flashErrorMessage: "no-user-session",
-          }),
-        },
-      }
-    );
-  }
-
-  return authSession;
+	const authSession = await getAuthSession(request);
+
+	// If there is no user session, Fly, You Fools! 🧙‍♂️
+	if (!authSession?.accessToken || !authSession?.refreshToken) {
+		throw redirect(
+			`${onFailRedirectTo || LOGIN_URL}?${makeRedirectToFromHere(
+				request,
+			)}`,
+			{
+				headers: {
+					"Set-Cookie": await commitAuthSession(request, {
+						authSession: null,
+						flashErrorMessage: "no-user-session",
+					}),
+				},
+			},
+		);
+	}
+
+	return authSession;
 }
 
 /**
@@ -135,72 +137,72 @@ async function assertAuthSession(
  * - Destroy session if refresh token is expired
  */
 export async function requireAuthSession(
-  request: Request,
-  {
-    onFailRedirectTo,
-    verify,
-  }: { onFailRedirectTo?: string; verify: boolean } = { verify: false }
+	request: Request,
+	{
+		onFailRedirectTo,
+		verify,
+	}: { onFailRedirectTo?: string; verify: boolean } = { verify: false },
 ): Promise<AuthSession> {
-  // hello there
-  const authSession = await assertAuthSession(request, {
-    onFailRedirectTo,
-  });
-
-  // ok, let's challenge its access token.
-  // by default, we don't verify the access token from supabase auth api to save some time
-  const isValidSession = verify ? await verifyAuthSession(authSession) : true;
-
-  // damn, access token is not valid or expires soon
-  // let's try to refresh, in case of 🧐
-  if (!isValidSession || isExpiringSoon(authSession.expiresAt)) {
-    return refreshAuthSession(request);
-  }
-
-  // finally, we have a valid session, let's return it
-  return authSession;
+	// hello there
+	const authSession = await assertAuthSession(request, {
+		onFailRedirectTo,
+	});
+
+	// ok, let's challenge its access token.
+	// by default, we don't verify the access token from supabase auth api to save some time
+	const isValidSession = verify ? await verifyAuthSession(authSession) : true;
+
+	// damn, access token is not valid or expires soon
+	// let's try to refresh, in case of 🧐
+	if (!isValidSession || isExpiringSoon(authSession.expiresAt)) {
+		return refreshAuthSession(request);
+	}
+
+	// finally, we have a valid session, let's return it
+	return authSession;
 }
 
 function isExpiringSoon(expiresAt: number) {
-  return (expiresAt - REFRESH_ACCESS_TOKEN_THRESHOLD) * 1000 < Date.now();
+	return (expiresAt - REFRESH_ACCESS_TOKEN_THRESHOLD) * 1000 < Date.now();
 }
 
 async function refreshAuthSession(request: Request): Promise<AuthSession> {
-  const authSession = await getAuthSession(request);
-
-  const refreshedAuthSession = await refreshAccessToken(
-    authSession?.refreshToken
-  );
-
-  // 👾 game over, log in again
-  // yes, arbitrary, but it's a good way to don't let an illegal user here with an expired token
-  if (!refreshedAuthSession) {
-    const redirectUrl = `${LOGIN_URL}?${makeRedirectToFromHere(request)}`;
-
-    // here we throw instead of return because this function promise a AuthSession and not a response object
-    // https://remix.run/docs/en/v1/guides/constraints#higher-order-functions
-    throw redirect(redirectUrl, {
-      headers: {
-        "Set-Cookie": await commitAuthSession(request, {
-          authSession: null,
-          flashErrorMessage: "fail-refresh-auth-session",
-        }),
-      },
-    });
-  }
-
-  // refresh is ok and we can redirect
-  if (isGet(request)) {
-    // here we throw instead of return because this function promise a UserSession and not a response object
-    // https://remix.run/docs/en/v1/guides/constraints#higher-order-functions
-    throw redirect(getCurrentPath(request), {
-      headers: {
-        "Set-Cookie": await commitAuthSession(request, {
-          authSession: refreshedAuthSession,
-        }),
-      },
-    });
-  }
-
-  // we can't redirect because we are in an action, so, deal with it and don't forget to handle session commit 👮‍♀️
-  return refreshedAuthSession;
+	const authSession = await getAuthSession(request);
+
+	const refreshedAuthSession = await refreshAccessToken(
+		authSession?.refreshToken,
+	);
+
+	// 👾 game over, log in again
+	// yes, arbitrary, but it's a good way to don't let an illegal user here with an expired token
+	if (!refreshedAuthSession) {
+		const redirectUrl = `${LOGIN_URL}?${makeRedirectToFromHere(request)}`;
+
+		// here we throw instead of return because this function promise a AuthSession and not a response object
+		// https://remix.run/docs/en/v1/guides/constraints#higher-order-functions
+		throw redirect(redirectUrl, {
+			headers: {
+				"Set-Cookie": await commitAuthSession(request, {
+					authSession: null,
+					flashErrorMessage: "fail-refresh-auth-session",
+				}),
+			},
+		});
+	}
+
+	// refresh is ok and we can redirect
+	if (isGet(request)) {
+		// here we throw instead of return because this function promise a UserSession and not a response object
+		// https://remix.run/docs/en/v1/guides/constraints#higher-order-functions
+		throw redirect(getCurrentPath(request), {
+			headers: {
+				"Set-Cookie": await commitAuthSession(request, {
+					authSession: refreshedAuthSession,
+				}),
+			},
+		});
+	}
+
+	// we can't redirect because we are in an action, so, deal with it and don't forget to handle session commit 👮‍♀️
+	return refreshedAuthSession;
 }
diff --git a/app/modules/auth/types.ts b/app/modules/auth/types.ts
index 6af12e8..931b1b1 100644
--- a/app/modules/auth/types.ts
+++ b/app/modules/auth/types.ts
@@ -1,8 +1,8 @@
 export interface AuthSession {
-  accessToken: string;
-  refreshToken: string;
-  userId: string;
-  email: string;
-  expiresIn: number;
-  expiresAt: number;
+	accessToken: string;
+	refreshToken: string;
+	userId: string;
+	email: string;
+	expiresIn: number;
+	expiresAt: number;
 }
diff --git a/app/modules/note/service.server.ts b/app/modules/note/service.server.ts
index 1d0e2cb..cfc4f68 100644
--- a/app/modules/note/service.server.ts
+++ b/app/modules/note/service.server.ts
@@ -2,50 +2,50 @@ import type { Note, User } from "~/database";
 import { db } from "~/database";
 
 export async function getNote({
-  userId,
-  id,
+	userId,
+	id,
 }: Pick<Note, "id"> & {
-  userId: User["id"];
+	userId: User["id"];
 }) {
-  return db.note.findFirst({
-    select: { id: true, body: true, title: true },
-    where: { id, userId },
-  });
+	return db.note.findFirst({
+		select: { id: true, body: true, title: true },
+		where: { id, userId },
+	});
 }
 
 export async function getNotes({ userId }: { userId: User["id"] }) {
-  return db.note.findMany({
-    where: { userId },
-    select: { id: true, title: true },
-    orderBy: { updatedAt: "desc" },
-  });
+	return db.note.findMany({
+		where: { userId },
+		select: { id: true, title: true },
+		orderBy: { updatedAt: "desc" },
+	});
 }
 
 export async function createNote({
-  title,
-  body,
-  userId,
+	title,
+	body,
+	userId,
 }: Pick<Note, "body" | "title"> & {
-  userId: User["id"];
+	userId: User["id"];
 }) {
-  return db.note.create({
-    data: {
-      title,
-      body,
-      user: {
-        connect: {
-          id: userId,
-        },
-      },
-    },
-  });
+	return db.note.create({
+		data: {
+			title,
+			body,
+			user: {
+				connect: {
+					id: userId,
+				},
+			},
+		},
+	});
 }
 
 export async function deleteNote({
-  id,
-  userId,
+	id,
+	userId,
 }: Pick<Note, "id"> & { userId: User["id"] }) {
-  return db.note.deleteMany({
-    where: { id, userId },
-  });
+	return db.note.deleteMany({
+		where: { id, userId },
+	});
 }
diff --git a/app/modules/user/service.server.test.ts b/app/modules/user/service.server.test.ts
index 9d8ae12..295b318 100644
--- a/app/modules/user/service.server.test.ts
+++ b/app/modules/user/service.server.test.ts
@@ -2,10 +2,10 @@ import { matchRequestUrl, rest } from "msw";
 
 import { server } from "mocks";
 import {
-  SUPABASE_URL,
-  SUPABASE_AUTH_TOKEN_API,
-  SUPABASE_AUTH_ADMIN_USER_API,
-  authSession,
+	SUPABASE_URL,
+	SUPABASE_AUTH_TOKEN_API,
+	SUPABASE_AUTH_ADMIN_USER_API,
+	authSession,
 } from "mocks/handlers";
 import { USER_EMAIL, USER_ID, USER_PASSWORD } from "mocks/user";
 import { db } from "~/database";
@@ -17,205 +17,212 @@ import { createUserAccount } from "./service.server";
 
 // mock db
 vitest.mock("~/database", () => ({
-  db: {
-    user: {
-      create: vitest.fn().mockResolvedValue({}),
-    },
-  },
+	db: {
+		user: {
+			create: vitest.fn().mockResolvedValue({}),
+		},
+	},
 }));
 
 describe(createUserAccount.name, () => {
-  it("should return null if no auth account created", async () => {
-    expect.assertions(3);
-
-    const fetchAuthAdminUserAPI = new Map();
-
-    server.events.on("request:start", (req) => {
-      const matchesMethod = req.method === "POST";
-      const matchesUrl = matchRequestUrl(
-        req.url,
-        SUPABASE_AUTH_ADMIN_USER_API,
-        SUPABASE_URL
-      ).matches;
-
-      if (matchesMethod && matchesUrl) fetchAuthAdminUserAPI.set(req.id, req);
-    });
-
-    // https://mswjs.io/docs/api/setup-server/use#one-time-override
-    server.use(
-      rest.post(
-        `${SUPABASE_URL}${SUPABASE_AUTH_ADMIN_USER_API}`,
-        async (_req, res, ctx) =>
-          res.once(
-            ctx.status(400),
-            ctx.json({ message: "create-account-error", status: 400 })
-          )
-      )
-    );
-
-    const result = await createUserAccount(USER_EMAIL, USER_PASSWORD);
-
-    server.events.removeAllListeners();
-
-    expect(result).toBeNull();
-    expect(fetchAuthAdminUserAPI.size).toEqual(1);
-    const [request] = fetchAuthAdminUserAPI.values();
-    expect(request.body).toEqual({
-      email: USER_EMAIL,
-      password: USER_PASSWORD,
-      email_confirm: true,
-    });
-  });
-
-  it("should return null and delete auth account if unable to sign in", async () => {
-    expect.assertions(5);
-
-    const fetchAuthTokenAPI = new Map();
-    const fetchAuthAdminUserAPI = new Map();
-
-    server.events.on("request:start", (req) => {
-      const matchesMethod = req.method === "POST";
-      const matchesUrl = matchRequestUrl(
-        req.url,
-        SUPABASE_AUTH_TOKEN_API,
-        SUPABASE_URL
-      ).matches;
-
-      if (matchesMethod && matchesUrl) fetchAuthTokenAPI.set(req.id, req);
-    });
-
-    server.events.on("request:start", (req) => {
-      const matchesMethod = req.method === "DELETE";
-      const matchesUrl = matchRequestUrl(
-        req.url,
-        `${SUPABASE_AUTH_ADMIN_USER_API}/*`,
-        SUPABASE_URL
-      ).matches;
-
-      if (matchesMethod && matchesUrl) fetchAuthAdminUserAPI.set(req.id, req);
-    });
-
-    server.use(
-      rest.post(
-        `${SUPABASE_URL}${SUPABASE_AUTH_TOKEN_API}`,
-        async (_req, res, ctx) =>
-          res.once(
-            ctx.status(400),
-            ctx.json({ message: "sign-in-error", status: 400 })
-          )
-      )
-    );
-
-    const result = await createUserAccount(USER_EMAIL, USER_PASSWORD);
-
-    server.events.removeAllListeners();
-
-    expect(result).toBeNull();
-    expect(fetchAuthTokenAPI.size).toEqual(1);
-    const [signInRequest] = fetchAuthTokenAPI.values();
-    expect(signInRequest.body).toEqual({
-      email: USER_EMAIL,
-      password: USER_PASSWORD,
-      gotrue_meta_security: {},
-    });
-    expect(fetchAuthAdminUserAPI.size).toEqual(1);
-    // expect call delete auth account with the expected user id
-    const [authAdminUserReq] = fetchAuthAdminUserAPI.values();
-    expect(authAdminUserReq.url.pathname).toEqual(
-      `${SUPABASE_AUTH_ADMIN_USER_API}/${USER_ID}`
-    );
-  });
-
-  it("should return null and delete auth account if unable to create user in database", async () => {
-    expect.assertions(4);
-
-    const fetchAuthTokenAPI = new Map();
-    const fetchAuthAdminUserAPI = new Map();
-
-    server.events.on("request:start", (req) => {
-      const matchesMethod = req.method === "POST";
-      const matchesUrl = matchRequestUrl(
-        req.url,
-        SUPABASE_AUTH_TOKEN_API,
-        SUPABASE_URL
-      ).matches;
-
-      if (matchesMethod && matchesUrl) fetchAuthTokenAPI.set(req.id, req);
-    });
-
-    server.events.on("request:start", (req) => {
-      const matchesMethod = req.method === "DELETE";
-      const matchesUrl = matchRequestUrl(
-        req.url,
-        `${SUPABASE_AUTH_ADMIN_USER_API}/*`,
-        SUPABASE_URL
-      ).matches;
-
-      if (matchesMethod && matchesUrl) fetchAuthAdminUserAPI.set(req.id, req);
-    });
-
-    //@ts-expect-error missing vitest type
-    db.user.create.mockResolvedValue(null);
-
-    const result = await createUserAccount(USER_EMAIL, USER_PASSWORD);
-
-    server.events.removeAllListeners();
-
-    expect(result).toBeNull();
-    expect(fetchAuthTokenAPI.size).toEqual(1);
-    expect(fetchAuthAdminUserAPI.size).toEqual(1);
-
-    // expect call delete auth account with the expected user id
-    const [authAdminUserReq] = fetchAuthAdminUserAPI.values();
-    expect(authAdminUserReq.url.pathname).toEqual(
-      `${SUPABASE_AUTH_ADMIN_USER_API}/${USER_ID}`
-    );
-  });
-
-  it("should create an account", async () => {
-    expect.assertions(4);
-
-    const fetchAuthAdminUserAPI = new Map();
-    const fetchAuthTokenAPI = new Map();
-
-    server.events.on("request:start", (req) => {
-      const matchesMethod = req.method === "POST";
-      const matchesUrl = matchRequestUrl(
-        req.url,
-        SUPABASE_AUTH_ADMIN_USER_API,
-        SUPABASE_URL
-      ).matches;
-
-      if (matchesMethod && matchesUrl) fetchAuthAdminUserAPI.set(req.id, req);
-    });
-
-    server.events.on("request:start", (req) => {
-      const matchesMethod = req.method === "POST";
-      const matchesUrl = matchRequestUrl(
-        req.url,
-        SUPABASE_AUTH_TOKEN_API,
-        SUPABASE_URL
-      ).matches;
-
-      if (matchesMethod && matchesUrl) fetchAuthTokenAPI.set(req.id, req);
-    });
-
-    //@ts-expect-error missing vitest type
-    db.user.create.mockResolvedValue({ id: USER_ID, email: USER_EMAIL });
-
-    const result = await createUserAccount(USER_EMAIL, USER_PASSWORD);
-
-    // we don't want to test the implementation of the function
-    result!.expiresAt = -1;
-
-    server.events.removeAllListeners();
-
-    expect(db.user.create).toBeCalledWith({
-      data: { email: USER_EMAIL, id: USER_ID },
-    });
-
-    expect(result).toEqual(authSession);
-    expect(fetchAuthAdminUserAPI.size).toEqual(1);
-    expect(fetchAuthTokenAPI.size).toEqual(1);
-  });
+	it("should return null if no auth account created", async () => {
+		expect.assertions(3);
+
+		const fetchAuthAdminUserAPI = new Map();
+
+		server.events.on("request:start", (req) => {
+			const matchesMethod = req.method === "POST";
+			const matchesUrl = matchRequestUrl(
+				req.url,
+				SUPABASE_AUTH_ADMIN_USER_API,
+				SUPABASE_URL,
+			).matches;
+
+			if (matchesMethod && matchesUrl)
+				fetchAuthAdminUserAPI.set(req.id, req);
+		});
+
+		// https://mswjs.io/docs/api/setup-server/use#one-time-override
+		server.use(
+			rest.post(
+				`${SUPABASE_URL}${SUPABASE_AUTH_ADMIN_USER_API}`,
+				async (_req, res, ctx) =>
+					res.once(
+						ctx.status(400),
+						ctx.json({
+							message: "create-account-error",
+							status: 400,
+						}),
+					),
+			),
+		);
+
+		const result = await createUserAccount(USER_EMAIL, USER_PASSWORD);
+
+		server.events.removeAllListeners();
+
+		expect(result).toBeNull();
+		expect(fetchAuthAdminUserAPI.size).toEqual(1);
+		const [request] = fetchAuthAdminUserAPI.values();
+		expect(request.body).toEqual({
+			email: USER_EMAIL,
+			password: USER_PASSWORD,
+			email_confirm: true,
+		});
+	});
+
+	it("should return null and delete auth account if unable to sign in", async () => {
+		expect.assertions(5);
+
+		const fetchAuthTokenAPI = new Map();
+		const fetchAuthAdminUserAPI = new Map();
+
+		server.events.on("request:start", (req) => {
+			const matchesMethod = req.method === "POST";
+			const matchesUrl = matchRequestUrl(
+				req.url,
+				SUPABASE_AUTH_TOKEN_API,
+				SUPABASE_URL,
+			).matches;
+
+			if (matchesMethod && matchesUrl) fetchAuthTokenAPI.set(req.id, req);
+		});
+
+		server.events.on("request:start", (req) => {
+			const matchesMethod = req.method === "DELETE";
+			const matchesUrl = matchRequestUrl(
+				req.url,
+				`${SUPABASE_AUTH_ADMIN_USER_API}/*`,
+				SUPABASE_URL,
+			).matches;
+
+			if (matchesMethod && matchesUrl)
+				fetchAuthAdminUserAPI.set(req.id, req);
+		});
+
+		server.use(
+			rest.post(
+				`${SUPABASE_URL}${SUPABASE_AUTH_TOKEN_API}`,
+				async (_req, res, ctx) =>
+					res.once(
+						ctx.status(400),
+						ctx.json({ message: "sign-in-error", status: 400 }),
+					),
+			),
+		);
+
+		const result = await createUserAccount(USER_EMAIL, USER_PASSWORD);
+
+		server.events.removeAllListeners();
+
+		expect(result).toBeNull();
+		expect(fetchAuthTokenAPI.size).toEqual(1);
+		const [signInRequest] = fetchAuthTokenAPI.values();
+		expect(signInRequest.body).toEqual({
+			email: USER_EMAIL,
+			password: USER_PASSWORD,
+			gotrue_meta_security: {},
+		});
+		expect(fetchAuthAdminUserAPI.size).toEqual(1);
+		// expect call delete auth account with the expected user id
+		const [authAdminUserReq] = fetchAuthAdminUserAPI.values();
+		expect(authAdminUserReq.url.pathname).toEqual(
+			`${SUPABASE_AUTH_ADMIN_USER_API}/${USER_ID}`,
+		);
+	});
+
+	it("should return null and delete auth account if unable to create user in database", async () => {
+		expect.assertions(4);
+
+		const fetchAuthTokenAPI = new Map();
+		const fetchAuthAdminUserAPI = new Map();
+
+		server.events.on("request:start", (req) => {
+			const matchesMethod = req.method === "POST";
+			const matchesUrl = matchRequestUrl(
+				req.url,
+				SUPABASE_AUTH_TOKEN_API,
+				SUPABASE_URL,
+			).matches;
+
+			if (matchesMethod && matchesUrl) fetchAuthTokenAPI.set(req.id, req);
+		});
+
+		server.events.on("request:start", (req) => {
+			const matchesMethod = req.method === "DELETE";
+			const matchesUrl = matchRequestUrl(
+				req.url,
+				`${SUPABASE_AUTH_ADMIN_USER_API}/*`,
+				SUPABASE_URL,
+			).matches;
+
+			if (matchesMethod && matchesUrl)
+				fetchAuthAdminUserAPI.set(req.id, req);
+		});
+
+		//@ts-expect-error missing vitest type
+		db.user.create.mockResolvedValue(null);
+
+		const result = await createUserAccount(USER_EMAIL, USER_PASSWORD);
+
+		server.events.removeAllListeners();
+
+		expect(result).toBeNull();
+		expect(fetchAuthTokenAPI.size).toEqual(1);
+		expect(fetchAuthAdminUserAPI.size).toEqual(1);
+
+		// expect call delete auth account with the expected user id
+		const [authAdminUserReq] = fetchAuthAdminUserAPI.values();
+		expect(authAdminUserReq.url.pathname).toEqual(
+			`${SUPABASE_AUTH_ADMIN_USER_API}/${USER_ID}`,
+		);
+	});
+
+	it("should create an account", async () => {
+		expect.assertions(4);
+
+		const fetchAuthAdminUserAPI = new Map();
+		const fetchAuthTokenAPI = new Map();
+
+		server.events.on("request:start", (req) => {
+			const matchesMethod = req.method === "POST";
+			const matchesUrl = matchRequestUrl(
+				req.url,
+				SUPABASE_AUTH_ADMIN_USER_API,
+				SUPABASE_URL,
+			).matches;
+
+			if (matchesMethod && matchesUrl)
+				fetchAuthAdminUserAPI.set(req.id, req);
+		});
+
+		server.events.on("request:start", (req) => {
+			const matchesMethod = req.method === "POST";
+			const matchesUrl = matchRequestUrl(
+				req.url,
+				SUPABASE_AUTH_TOKEN_API,
+				SUPABASE_URL,
+			).matches;
+
+			if (matchesMethod && matchesUrl) fetchAuthTokenAPI.set(req.id, req);
+		});
+
+		//@ts-expect-error missing vitest type
+		db.user.create.mockResolvedValue({ id: USER_ID, email: USER_EMAIL });
+
+		const result = await createUserAccount(USER_EMAIL, USER_PASSWORD);
+
+		// we don't want to test the implementation of the function
+		result!.expiresAt = -1;
+
+		server.events.removeAllListeners();
+
+		expect(db.user.create).toBeCalledWith({
+			data: { email: USER_EMAIL, id: USER_ID },
+		});
+
+		expect(result).toEqual(authSession);
+		expect(fetchAuthAdminUserAPI.size).toEqual(1);
+		expect(fetchAuthTokenAPI.size).toEqual(1);
+	});
 });
diff --git a/app/modules/user/service.server.ts b/app/modules/user/service.server.ts
index b8c8f5e..6daa5b2 100644
--- a/app/modules/user/service.server.ts
+++ b/app/modules/user/service.server.ts
@@ -2,70 +2,70 @@ import type { User } from "~/database";
 import { db } from "~/database";
 import type { AuthSession } from "~/modules/auth";
 import {
-  createEmailAuthAccount,
-  signInWithEmail,
-  deleteAuthAccount,
+	createEmailAuthAccount,
+	signInWithEmail,
+	deleteAuthAccount,
 } from "~/modules/auth";
 
 export async function getUserByEmail(email: User["email"]) {
-  return db.user.findUnique({ where: { email: email.toLowerCase() } });
+	return db.user.findUnique({ where: { email: email.toLowerCase() } });
 }
 
 async function createUser({
-  email,
-  userId,
+	email,
+	userId,
 }: Pick<AuthSession, "userId" | "email">) {
-  return db.user
-    .create({
-      data: {
-        email,
-        id: userId,
-      },
-    })
-    .then((user) => user)
-    .catch(() => null);
+	return db.user
+		.create({
+			data: {
+				email,
+				id: userId,
+			},
+		})
+		.then((user) => user)
+		.catch(() => null);
 }
 
 export async function tryCreateUser({
-  email,
-  userId,
+	email,
+	userId,
 }: Pick<AuthSession, "userId" | "email">) {
-  const user = await createUser({
-    userId,
-    email,
-  });
+	const user = await createUser({
+		userId,
+		email,
+	});
 
-  // user account created and have a session but unable to store in User table
-  // we should delete the user account to allow retry create account again
-  if (!user) {
-    await deleteAuthAccount(userId);
-    return null;
-  }
+	// user account created and have a session but unable to store in User table
+	// we should delete the user account to allow retry create account again
+	if (!user) {
+		await deleteAuthAccount(userId);
+		return null;
+	}
 
-  return user;
+	return user;
 }
 
 export async function createUserAccount(
-  email: string,
-  password: string
+	email: string,
+	password: string,
 ): Promise<AuthSession | null> {
-  const authAccount = await createEmailAuthAccount(email, password);
+	const authAccount = await createEmailAuthAccount(email, password);
 
-  // ok, no user account created
-  if (!authAccount) return null;
+	// ok, no user account created
+	if (!authAccount) return null;
 
-  const authSession = await signInWithEmail(email, password);
+	const authSession = await signInWithEmail(email, password);
 
-  // user account created but no session 😱
-  // we should delete the user account to allow retry create account again
-  if (!authSession) {
-    await deleteAuthAccount(authAccount.id);
-    return null;
-  }
+	// user account created but no session 😱
+	// we should delete the user account to allow retry create account again
+	if (!authSession) {
+		await deleteAuthAccount(authAccount.id);
+		return null;
+	}
 
-  const user = await tryCreateUser(authSession);
+	const user = await tryCreateUser(authSession);
 
-  if (!user) return null;
+	if (!user) return null;
 
-  return authSession;
+	return authSession;
 }
diff --git a/app/root.tsx b/app/root.tsx
index 205e2ba..c329990 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,17 +1,18 @@
+import { cssBundleHref } from "@remix-run/css-bundle";
 import type {
-  LinksFunction,
-  LoaderFunction,
-  MetaFunction,
+	LinksFunction,
+	LoaderFunction,
+	V2_MetaFunction as MetaFunction,
 } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import {
-  Links,
-  LiveReload,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  useLoaderData,
+	Links,
+	LiveReload,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+	useLoaderData,
 } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import { useChangeLanguage } from "remix-i18next";
@@ -22,50 +23,57 @@ import tailwindStylesheetUrl from "./styles/tailwind.css";
 import { getBrowserEnv } from "./utils/env";
 
 export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: tailwindStylesheetUrl },
+	{ rel: "preload", href: tailwindStylesheetUrl, as: "style" },
+	{ rel: "stylesheet", href: tailwindStylesheetUrl, as: "style" },
+	...(cssBundleHref
+		? [
+				{ rel: "preload", href: cssBundleHref, as: "style" },
+				{ rel: "stylesheet", href: cssBundleHref },
+		  ]
+		: []),
 ];
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "Remix Notes",
-  viewport: "width=device-width,initial-scale=1",
-});
+export const meta: MetaFunction = () => [
+	{ title: "Remix Notes" },
+	{ name: "description", content: "Remix Notes App" },
+];
 
 export const loader: LoaderFunction = async ({ request }) => {
-  const locale = await i18nextServer.getLocale(request);
-  return json({
-    locale,
-    env: getBrowserEnv(),
-  });
+	const locale = await i18nextServer.getLocale(request);
+	return json({
+		locale,
+		env: getBrowserEnv(),
+	});
 };
 
 export default function App() {
-  const { env, locale } = useLoaderData<typeof loader>();
-  const { i18n } = useTranslation();
+	const { env, locale } = useLoaderData<typeof loader>();
+	const { i18n } = useTranslation();
 
-  useChangeLanguage(locale);
+	useChangeLanguage(locale);
 
-  return (
-    <html
-      lang={locale}
-      dir={i18n.dir()}
-      className="h-full"
-    >
-      <head>
-        <Meta />
-        <Links />
-      </head>
-      <body className="h-full">
-        <Outlet />
-        <ScrollRestoration />
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `window.env = ${JSON.stringify(env)}`,
-          }}
-        />
-        <Scripts />
-        <LiveReload />
-      </body>
-    </html>
-  );
+	return (
+		<html lang={locale} dir={i18n.dir()} className="h-full">
+			<head>
+				<Meta />
+				<meta charSet="utf-8" />
+				<meta
+					name="viewport"
+					content="width=device-width,initial-scale=1.0,maximum-scale=1.0"
+				/>
+				<Links />
+			</head>
+			<body className="h-full">
+				<Outlet />
+				<ScrollRestoration />
+				<script
+					dangerouslySetInnerHTML={{
+						__html: `window.env = ${JSON.stringify(env)}`,
+					}}
+				/>
+				<Scripts />
+				<LiveReload />
+			</body>
+		</html>
+	);
 }
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
new file mode 100644
index 0000000..6ae47a9
--- /dev/null
+++ b/app/routes/_index.tsx
@@ -0,0 +1,167 @@
+import type { LoaderArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Link, useLoaderData } from "@remix-run/react";
+import { useTranslation } from "react-i18next";
+
+import { getAuthSession } from "~/modules/auth";
+
+export async function loader({ request }: LoaderArgs) {
+	const { email } = (await getAuthSession(request)) || {};
+
+	return json({ email });
+}
+
+export default function Index() {
+	const { email } = useLoaderData<typeof loader>();
+	const { t } = useTranslation(["common", "auth"]);
+	return (
+		<main className="relative min-h-screen bg-black sm:flex sm:items-center sm:justify-center">
+			<div className="relative sm:pb-16 sm:pt-8">
+				<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
+					<div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
+						<div className="absolute inset-0">
+							<img
+								className="h-full w-full object-cover"
+								src="https://user-images.githubusercontent.com/1500684/157774694-99820c51-8165-4908-a031-34fc371ac0d6.jpg"
+								alt="Sonic Youth On Stage"
+							/>
+							<div className="absolute inset-0 bg-[color:rgba(254,204,27,0.5)] mix-blend-multiply" />
+						</div>
+						<div className="relative bg-black/50 px-4 pb-8 pt-16 sm:px-6 sm:pb-14 sm:pt-24 lg:px-8 lg:pb-20 lg:pt-32">
+							<h1 className="space-x-8 text-center text-6xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
+								<span className="uppercase text-green-500 drop-shadow-md">
+									Supa
+								</span>
+								<span className="uppercase text-purple-500 drop-shadow-md">
+									Fly
+								</span>
+								<span className="uppercase text-yellow-500 drop-shadow-md">
+									Stack
+								</span>
+							</h1>
+							<p className="mx-auto mt-6 max-w-lg text-center text-xl text-white sm:max-w-3xl">
+								Check the README.md file for instructions on how
+								to get this project deployed.
+							</p>
+							<div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
+								{email ? (
+									<Link
+										to="/notes"
+										className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-yellow-700 shadow-sm hover:bg-yellow-50 sm:px-8"
+									>
+										View Notes for {email}
+									</Link>
+								) : (
+									<div className="space-y-4">
+										<div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
+											<Link
+												data-test-id="join"
+												to="/join"
+												className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-yellow-700 shadow-sm hover:bg-yellow-50 sm:px-8"
+											>
+												{t("register.action", {
+													ns: "auth",
+												})}
+											</Link>
+											<Link
+												data-test-id="login"
+												to="/login"
+												className="flex items-center justify-center rounded-md bg-yellow-500 px-4 py-3 font-medium text-white hover:bg-yellow-600  "
+											>
+												{t("login.action", {
+													ns: "auth",
+												})}
+											</Link>
+										</div>
+									</div>
+								)}
+							</div>
+							<a href="https://remix.run">
+								<img
+									src="https://user-images.githubusercontent.com/1500684/158298926-e45dafff-3544-4b69-96d6-d3bcc33fc76a.svg"
+									alt="Remix"
+									className="mx-auto mt-16 w-full max-w-[12rem] md:max-w-[16rem]"
+								/>
+							</a>
+						</div>
+					</div>
+				</div>
+
+				<div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
+					<div className="mt-6 flex flex-wrap justify-center gap-8">
+						{[
+							{
+								src: "https://raw.githubusercontent.com/supabase/supabase/master/packages/common/assets/images/supabase-logo-wordmark--dark.svg#gh-dark-mode-only",
+								alt: "Supabase",
+								href: "https://supabase.com",
+							},
+							{
+								src: "https://fly.io/public/images/brand/logo-light.svg",
+								alt: "Fly.io",
+								href: "https://fly.io",
+							},
+							{
+								src: "https://user-images.githubusercontent.com/1500684/157764484-ad64a21a-d7fb-47e3-8669-ec046da20c1f.svg",
+								alt: "Prisma",
+								href: "https://prisma.io",
+							},
+							{
+								src: "https://tailwindcss.com/_next/static/media/tailwindcss-logotype-white.e0b2bd6155fa0bed8e24ff6b28f4a911.svg",
+								alt: "Tailwind",
+								href: "https://tailwindcss.com",
+							},
+							{
+								src: "https://github.com/colinhacks/zod/raw/master/logo.svg",
+								alt: "Zod",
+								href: "https://github.com/colinhacks/zod",
+							},
+							{
+								src: "https://user-images.githubusercontent.com/1500684/157764454-48ac8c71-a2a9-4b5e-b19c-edef8b8953d6.svg",
+								alt: "Cypress",
+								href: "https://www.cypress.io",
+							},
+							{
+								src: "https://user-images.githubusercontent.com/1500684/157772386-75444196-0604-4340-af28-53b236faa182.svg",
+								alt: "MSW",
+								href: "https://mswjs.io",
+							},
+							{
+								src: "https://user-images.githubusercontent.com/1500684/157772447-00fccdce-9d12-46a3-8bb4-fac612cdc949.svg",
+								alt: "Vitest",
+								href: "https://vitest.dev",
+							},
+							{
+								src: "https://user-images.githubusercontent.com/1500684/157772662-92b0dd3a-453f-4d18-b8be-9fa6efde52cf.png",
+								alt: "Testing Library",
+								href: "https://testing-library.com",
+							},
+							{
+								src: "https://user-images.githubusercontent.com/1500684/157772934-ce0a943d-e9d0-40f8-97f3-f464c0811643.svg",
+								alt: "Prettier",
+								href: "https://prettier.io",
+							},
+							{
+								src: "https://user-images.githubusercontent.com/1500684/157772990-3968ff7c-b551-4c55-a25c-046a32709a8e.svg",
+								alt: "ESLint",
+								href: "https://eslint.org",
+							},
+							{
+								src: "https://user-images.githubusercontent.com/1500684/157773063-20a0ed64-b9f8-4e0b-9d1e-0b65a3d4a6db.svg",
+								alt: "TypeScript",
+								href: "https://typescriptlang.org",
+							},
+						].map((img) => (
+							<a
+								key={img.href}
+								href={img.href}
+								className="flex h-16 w-32 justify-center p-1 grayscale transition hover:grayscale-0 focus:grayscale-0"
+							>
+								<img alt={img.alt} src={img.src} />
+							</a>
+						))}
+					</div>
+				</div>
+			</div>
+		</main>
+	);
+}
diff --git a/app/routes/forgot-password.tsx b/app/routes/forgot-password.tsx
index d55a052..8832242 100644
--- a/app/routes/forgot-password.tsx
+++ b/app/routes/forgot-password.tsx
@@ -1,6 +1,6 @@
 import type { ActionArgs, LoaderArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
-import { Form, useActionData, useTransition } from "@remix-run/react";
+import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import { parseFormAny, useZorm } from "react-zorm";
 import { z } from "zod";
@@ -10,111 +10,121 @@ import { getAuthSession, sendResetPasswordLink } from "~/modules/auth";
 import { assertIsPost, isFormProcessing, tw } from "~/utils";
 
 export async function loader({ request }: LoaderArgs) {
-  const authSession = await getAuthSession(request);
-  const t = await i18nextServer.getFixedT(request, "auth");
-  const title = t("login.forgotPassword");
+	const authSession = await getAuthSession(request);
+	const t = await i18nextServer.getFixedT(request, "auth");
+	const title = t("login.forgotPassword");
 
-  if (authSession) return redirect("/notes");
+	if (authSession) return redirect("/notes");
 
-  return json({ title });
+	return json({ title });
 }
 
 const ForgotPasswordSchema = z.object({
-  email: z
-    .string()
-    .email("invalid-email")
-    .transform((email) => email.toLowerCase()),
+	email: z
+		.string()
+		.email("invalid-email")
+		.transform((email) => email.toLowerCase()),
 });
 
 export async function action({ request }: ActionArgs) {
-  assertIsPost(request);
+	assertIsPost(request);
 
-  const formData = await request.formData();
-  const result = await ForgotPasswordSchema.safeParseAsync(
-    parseFormAny(formData)
-  );
+	const formData = await request.formData();
+	const result = await ForgotPasswordSchema.safeParseAsync(
+		parseFormAny(formData),
+	);
 
-  if (!result.success) {
-    return json(
-      {
-        message: "invalid-request",
-      },
-      { status: 400 }
-    );
-  }
+	if (!result.success) {
+		return json(
+			{
+				message: "invalid-request",
+			},
+			{ status: 400 },
+		);
+	}
 
-  const { email } = result.data;
+	const { email } = result.data;
 
-  const { error } = await sendResetPasswordLink(email);
+	const { error } = await sendResetPasswordLink(email);
 
-  if (error) {
-    return json(
-      {
-        message: "unable-to-send-reset-password-link",
-      },
-      { status: 500 }
-    );
-  }
+	if (error) {
+		return json(
+			{
+				message: "unable-to-send-reset-password-link",
+			},
+			{ status: 500 },
+		);
+	}
 
-  return json({ message: null });
+	return json({ message: null });
 }
 
 export default function ForgotPassword() {
-  const zo = useZorm("ForgotPasswordForm", ForgotPasswordSchema);
-  const { t } = useTranslation("auth");
-  const actionData = useActionData<typeof action>();
-  const transition = useTransition();
-  const disabled = isFormProcessing(transition.state);
+	const zo = useZorm("ForgotPasswordForm", ForgotPasswordSchema);
+	const { t } = useTranslation("auth");
+	const actionData = useActionData<typeof action>();
+	const navigation = useNavigation();
+	const disabled = isFormProcessing(navigation.state);
 
-  return (
-    <div className="flex min-h-full flex-col justify-center">
-      <div className="mx-auto w-full max-w-md px-8">
-        {!actionData ? (
-          <Form ref={zo.ref} method="post" className="space-y-6" replace>
-            <div>
-              <label
-                htmlFor={zo.fields.email()}
-                className="block text-sm font-medium text-gray-700"
-              >
-                {t("register.email")}
-              </label>
-              <div className="mt-1">
-                <input
-                  data-test-id="email"
-                  name={zo.fields.email()}
-                  type="email"
-                  autoComplete="email"
-                  className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-                  disabled={disabled}
-                />
-                {zo.errors.email()?.message && (
-                  <div className="pt-1 text-red-700" id="password-error">
-                    {zo.errors.email()?.message}
-                  </div>
-                )}
-              </div>
-            </div>
+	return (
+		<div className="flex min-h-full flex-col justify-center">
+			<div className="mx-auto w-full max-w-md px-8">
+				{!actionData ? (
+					<Form
+						ref={zo.ref}
+						method="post"
+						className="space-y-6"
+						replace
+					>
+						<div>
+							<label
+								htmlFor={zo.fields.email()}
+								className="block text-sm font-medium text-gray-700"
+							>
+								{t("register.email")}
+							</label>
+							<div className="mt-1">
+								<input
+									data-test-id="email"
+									name={zo.fields.email()}
+									type="email"
+									autoComplete="email"
+									className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+									disabled={disabled}
+								/>
+								{zo.errors.email()?.message && (
+									<div
+										className="pt-1 text-red-700"
+										id="password-error"
+									>
+										{zo.errors.email()?.message}
+									</div>
+								)}
+							</div>
+						</div>
 
-            <button
-              data-test-id="send-password-reset-link"
-              type="submit"
-              className="w-full rounded bg-blue-500  py-2 px-4 text-white focus:bg-blue-400 hover:bg-blue-600"
-              disabled={disabled}
-            >
-              {t("register.sendLink")}
-            </button>
-          </Form>
-        ) : (
-          <div
-            className={tw(
-              `mb-2 h-6 text-center`,
-              actionData.message ? "text-red-600" : "text-green-600"
-            )}
-          >
-            {actionData.message || t("register.checkEmail")}
-          </div>
-        )}
-      </div>
-    </div>
-  );
+						<button
+							data-test-id="send-password-reset-link"
+							type="submit"
+							className="w-full rounded bg-blue-500  px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
+							disabled={disabled}
+						>
+							{t("register.sendLink")}
+						</button>
+					</Form>
+				) : (
+					<div
+						className={tw(
+							`mb-2 h-6 text-center`,
+							actionData.message
+								? "text-red-600"
+								: "text-green-600",
+						)}
+					>
+						{actionData.message || t("register.checkEmail")}
+					</div>
+				)}
+			</div>
+		</div>
+	);
 }
diff --git a/app/routes/healthcheck.tsx b/app/routes/healthcheck.tsx
index 2bd0a81..0bad4a6 100644
--- a/app/routes/healthcheck.tsx
+++ b/app/routes/healthcheck.tsx
@@ -4,23 +4,23 @@ import type { LoaderArgs } from "@remix-run/node";
 import { db } from "~/database";
 
 export async function loader({ request }: LoaderArgs) {
-  const host =
-    request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
+	const host =
+		request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
 
-  try {
-    const url = new URL("/", `http://${host}`);
-    // if we can connect to the database and make a simple query
-    // and make a HEAD request to ourselves, then we're good.
-    await Promise.all([
-      db.user.count(),
-      fetch(url.toString(), { method: "HEAD" }).then((r) => {
-        if (!r.ok) return Promise.reject(r);
-      }),
-    ]);
-    return new Response("OK");
-  } catch (error: unknown) {
-    // eslint-disable-next-line no-console
-    console.log("healthcheck ❌", { error });
-    return new Response("ERROR", { status: 500 });
-  }
+	try {
+		const url = new URL("/", `http://${host}`);
+		// if we can connect to the database and make a simple query
+		// and make a HEAD request to ourselves, then we're good.
+		await Promise.all([
+			db.user.count(),
+			fetch(url.toString(), { method: "HEAD" }).then((r) => {
+				if (!r.ok) return Promise.reject(r);
+			}),
+		]);
+		return new Response("OK");
+	} catch (error: unknown) {
+		// eslint-disable-next-line no-console
+		console.log("healthcheck ❌", { error });
+		return new Response("ERROR", { status: 500 });
+	}
 }
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
deleted file mode 100644
index 7adb8ba..0000000
--- a/app/routes/index.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import type { LoaderArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { Link, useLoaderData } from "@remix-run/react";
-import { useTranslation } from "react-i18next";
-
-import { getAuthSession } from "~/modules/auth";
-
-export async function loader({ request }: LoaderArgs) {
-  const { email } = (await getAuthSession(request)) || {};
-
-  return json({ email });
-}
-
-export default function Index() {
-  const { email } = useLoaderData<typeof loader>();
-  const { t } = useTranslation(["common", "auth"]);
-  return (
-    <main className="relative min-h-screen bg-black sm:flex sm:items-center sm:justify-center">
-      <div className="relative sm:pb-16 sm:pt-8">
-        <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
-          <div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
-            <div className="absolute inset-0">
-              <img
-                className="h-full w-full object-cover"
-                src="https://user-images.githubusercontent.com/1500684/157774694-99820c51-8165-4908-a031-34fc371ac0d6.jpg"
-                alt="Sonic Youth On Stage"
-              />
-              <div className="absolute inset-0 bg-[color:rgba(254,204,27,0.5)] mix-blend-multiply" />
-            </div>
-            <div className="lg:pb-18 relative bg-black bg-opacity-50 px-4 pt-16 pb-8 sm:px-6 sm:pt-24 sm:pb-14 lg:px-8 lg:pt-32">
-              <h1 className="space-x-8 text-center text-6xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
-                <span className="uppercase text-green-500 drop-shadow-md">
-                  Supa
-                </span>
-                <span className="uppercase text-purple-500 drop-shadow-md">
-                  Fly
-                </span>
-                <span className="uppercase text-yellow-500 drop-shadow-md">
-                  Stack
-                </span>
-              </h1>
-              <p className="mx-auto mt-6 max-w-lg text-center text-xl text-white sm:max-w-3xl">
-                Check the README.md file for instructions on how to get this
-                project deployed.
-              </p>
-              <div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
-                {email ? (
-                  <Link
-                    to="/notes"
-                    className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-yellow-700 shadow-sm hover:bg-yellow-50 sm:px-8"
-                  >
-                    View Notes for {email}
-                  </Link>
-                ) : (
-                  <div className="space-y-4">
-                    <div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
-                      <Link
-                        data-test-id="join"
-                        to="/join"
-                        className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-yellow-700 shadow-sm hover:bg-yellow-50 sm:px-8"
-                      >
-                        {t("register.action", { ns: "auth" })}
-                      </Link>
-                      <Link
-                        data-test-id="login"
-                        to="/login"
-                        className="flex items-center justify-center rounded-md bg-yellow-500 px-4 py-3 font-medium text-white hover:bg-yellow-600  "
-                      >
-                        {t("login.action", { ns: "auth" })}
-                      </Link>
-                    </div>
-                  </div>
-                )}
-              </div>
-              <a href="https://remix.run">
-                <img
-                  src="https://user-images.githubusercontent.com/1500684/158298926-e45dafff-3544-4b69-96d6-d3bcc33fc76a.svg"
-                  alt="Remix"
-                  className="mx-auto mt-16 w-full max-w-[12rem] md:max-w-[16rem]"
-                />
-              </a>
-            </div>
-          </div>
-        </div>
-
-        <div className="mx-auto max-w-7xl py-2 px-4 sm:px-6 lg:px-8">
-          <div className="mt-6 flex flex-wrap justify-center gap-8">
-            {[
-              {
-                src: "https://raw.githubusercontent.com/supabase/supabase/master/packages/common/assets/images/supabase-logo-wordmark--dark.svg#gh-dark-mode-only",
-                alt: "Supabase",
-                href: "https://supabase.com",
-              },
-              {
-                src: "https://fly.io/public/images/brand/logo-light.svg",
-                alt: "Fly.io",
-                href: "https://fly.io",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157764484-ad64a21a-d7fb-47e3-8669-ec046da20c1f.svg",
-                alt: "Prisma",
-                href: "https://prisma.io",
-              },
-              {
-                src: "https://tailwindcss.com/_next/static/media/tailwindcss-logotype-white.e0b2bd6155fa0bed8e24ff6b28f4a911.svg",
-                alt: "Tailwind",
-                href: "https://tailwindcss.com",
-              },
-              {
-                src: "https://github.com/colinhacks/zod/raw/master/logo.svg",
-                alt: "Zod",
-                href: "https://github.com/colinhacks/zod",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157764454-48ac8c71-a2a9-4b5e-b19c-edef8b8953d6.svg",
-                alt: "Cypress",
-                href: "https://www.cypress.io",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157772386-75444196-0604-4340-af28-53b236faa182.svg",
-                alt: "MSW",
-                href: "https://mswjs.io",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157772447-00fccdce-9d12-46a3-8bb4-fac612cdc949.svg",
-                alt: "Vitest",
-                href: "https://vitest.dev",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157772662-92b0dd3a-453f-4d18-b8be-9fa6efde52cf.png",
-                alt: "Testing Library",
-                href: "https://testing-library.com",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157772934-ce0a943d-e9d0-40f8-97f3-f464c0811643.svg",
-                alt: "Prettier",
-                href: "https://prettier.io",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157772990-3968ff7c-b551-4c55-a25c-046a32709a8e.svg",
-                alt: "ESLint",
-                href: "https://eslint.org",
-              },
-              {
-                src: "https://user-images.githubusercontent.com/1500684/157773063-20a0ed64-b9f8-4e0b-9d1e-0b65a3d4a6db.svg",
-                alt: "TypeScript",
-                href: "https://typescriptlang.org",
-              },
-            ].map((img) => (
-              <a
-                key={img.href}
-                href={img.href}
-                className="flex h-16 w-32 justify-center p-1 grayscale transition focus:grayscale-0 hover:grayscale-0"
-              >
-                <img
-                  alt={img.alt}
-                  src={img.src}
-                />
-              </a>
-            ))}
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-}
diff --git a/app/routes/join.tsx b/app/routes/join.tsx
index 7d93bd8..6b71942 100644
--- a/app/routes/join.tsx
+++ b/app/routes/join.tsx
@@ -1,191 +1,203 @@
 import * as React from "react";
 
-import type { ActionArgs, LoaderArgs, MetaFunction } from "@remix-run/node";
+import type {
+	ActionArgs,
+	LoaderArgs,
+	V2_MetaFunction as MetaFunction,
+} from "@remix-run/node";
 import { redirect, json } from "@remix-run/node";
-import { Form, Link, useSearchParams, useTransition } from "@remix-run/react";
+import { Form, Link, useNavigation, useSearchParams } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import { parseFormAny, useZorm } from "react-zorm";
 import { z } from "zod";
 
 import { i18nextServer } from "~/integrations/i18n";
 import {
-  createAuthSession,
-  getAuthSession,
-  ContinueWithEmailForm,
+	createAuthSession,
+	getAuthSession,
+	ContinueWithEmailForm,
 } from "~/modules/auth";
 import { getUserByEmail, createUserAccount } from "~/modules/user";
 import { assertIsPost, isFormProcessing } from "~/utils";
 
 export async function loader({ request }: LoaderArgs) {
-  const authSession = await getAuthSession(request);
-  const t = await i18nextServer.getFixedT(request, "auth");
-  const title = t("register.title");
+	const authSession = await getAuthSession(request);
+	const t = await i18nextServer.getFixedT(request, "auth");
+	const title = t("register.title");
 
-  if (authSession) return redirect("/notes");
+	if (authSession) return redirect("/notes");
 
-  return json({ title });
+	return json({ title });
 }
 
 const JoinFormSchema = z.object({
-  email: z
-    .string()
-    .email("invalid-email")
-    .transform((email) => email.toLowerCase()),
-  password: z.string().min(8, "password-too-short"),
-  redirectTo: z.string().optional(),
+	email: z
+		.string()
+		.email("invalid-email")
+		.transform((email) => email.toLowerCase()),
+	password: z.string().min(8, "password-too-short"),
+	redirectTo: z.string().optional(),
 });
 
 export async function action({ request }: ActionArgs) {
-  assertIsPost(request);
-  const formData = await request.formData();
-  const result = await JoinFormSchema.safeParseAsync(parseFormAny(formData));
-
-  if (!result.success) {
-    return json(
-      {
-        errors: result.error,
-      },
-      { status: 400 }
-    );
-  }
-
-  const { email, password, redirectTo } = result.data;
-
-  const existingUser = await getUserByEmail(email);
-
-  if (existingUser) {
-    return json(
-      { errors: { email: "user-already-exist", password: null } },
-      { status: 400 }
-    );
-  }
-
-  const authSession = await createUserAccount(email, password);
-
-  if (!authSession) {
-    return json(
-      { errors: { email: "unable-to-create-account", password: null } },
-      { status: 500 }
-    );
-  }
-
-  return createAuthSession({
-    request,
-    authSession,
-    redirectTo: redirectTo || "/notes",
-  });
+	assertIsPost(request);
+	const formData = await request.formData();
+	const result = await JoinFormSchema.safeParseAsync(parseFormAny(formData));
+
+	if (!result.success) {
+		return json(
+			{
+				errors: result.error,
+			},
+			{ status: 400 },
+		);
+	}
+
+	const { email, password, redirectTo } = result.data;
+
+	const existingUser = await getUserByEmail(email);
+
+	if (existingUser) {
+		return json(
+			{ errors: { email: "user-already-exist", password: null } },
+			{ status: 400 },
+		);
+	}
+
+	const authSession = await createUserAccount(email, password);
+
+	if (!authSession) {
+		return json(
+			{ errors: { email: "unable-to-create-account", password: null } },
+			{ status: 500 },
+		);
+	}
+
+	return createAuthSession({
+		request,
+		authSession,
+		redirectTo: redirectTo || "/notes",
+	});
 }
 
-export const meta: MetaFunction = ({ data }) => ({
-  title: data.title,
-});
+export const meta: MetaFunction = ({ data }) => [
+	{
+		title: data.title,
+	},
+];
 
 export default function Join() {
-  const zo = useZorm("NewQuestionWizardScreen", JoinFormSchema);
-  const [searchParams] = useSearchParams();
-  const redirectTo = searchParams.get("redirectTo") ?? undefined;
-  const transition = useTransition();
-  const disabled = isFormProcessing(transition.state);
-  const { t } = useTranslation("auth");
-
-  return (
-    <div className="flex min-h-full flex-col justify-center">
-      <div className="mx-auto w-full max-w-md px-8">
-        <Form ref={zo.ref} method="post" className="space-y-6" replace>
-          <div>
-            <label
-              htmlFor={zo.fields.email()}
-              className="block text-sm font-medium text-gray-700"
-            >
-              {t("register.email")}
-            </label>
-            <div className="mt-1">
-              <input
-                data-test-id="email"
-                required
-                autoFocus={true}
-                name={zo.fields.email()}
-                type="email"
-                autoComplete="email"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-                disabled={disabled}
-              />
-              {zo.errors.email()?.message && (
-                <div className="pt-1 text-red-700" id="email-error">
-                  {zo.errors.email()?.message}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div>
-            <label
-              htmlFor={zo.fields.password()}
-              className="block text-sm font-medium text-gray-700"
-            >
-              {t("register.password")}
-            </label>
-            <div className="mt-1">
-              <input
-                data-test-id="password"
-                name={zo.fields.password()}
-                type="password"
-                autoComplete="new-password"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-                disabled={disabled}
-              />
-              {zo.errors.password()?.message && (
-                <div className="pt-1 text-red-700" id="password-error">
-                  {zo.errors.password()?.message}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <input
-            type="hidden"
-            name={zo.fields.redirectTo()}
-            value={redirectTo}
-          />
-          <button
-            data-test-id="create-account"
-            type="submit"
-            className="w-full rounded bg-blue-500  py-2 px-4 text-white focus:bg-blue-400 hover:bg-blue-600"
-            disabled={disabled}
-          >
-            {t("register.action")}
-          </button>
-          <div className="flex items-center justify-center">
-            <div className="text-center text-sm text-gray-500">
-              {t("register.alreadyHaveAnAccount")}{" "}
-              <Link
-                className="text-blue-500 underline"
-                to={{
-                  pathname: "/login",
-                  search: searchParams.toString(),
-                }}
-              >
-                {t("register.login")}
-              </Link>
-            </div>
-          </div>
-        </Form>
-        <div className="mt-6">
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-gray-300" />
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="bg-white px-2 text-gray-500">
-                {t("register.orContinueWith")}
-              </span>
-            </div>
-          </div>
-          <div className="mt-6">
-            <ContinueWithEmailForm />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+	const zo = useZorm("NewQuestionWizardScreen", JoinFormSchema);
+	const [searchParams] = useSearchParams();
+	const redirectTo = searchParams.get("redirectTo") ?? undefined;
+	const navigation = useNavigation();
+	const disabled = isFormProcessing(navigation.state);
+	const { t } = useTranslation("auth");
+
+	return (
+		<div className="flex min-h-full flex-col justify-center">
+			<div className="mx-auto w-full max-w-md px-8">
+				<Form ref={zo.ref} method="post" className="space-y-6" replace>
+					<div>
+						<label
+							htmlFor={zo.fields.email()}
+							className="block text-sm font-medium text-gray-700"
+						>
+							{t("register.email")}
+						</label>
+						<div className="mt-1">
+							<input
+								data-test-id="email"
+								required
+								autoFocus={true}
+								name={zo.fields.email()}
+								type="email"
+								autoComplete="email"
+								className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+								disabled={disabled}
+							/>
+							{zo.errors.email()?.message && (
+								<div
+									className="pt-1 text-red-700"
+									id="email-error"
+								>
+									{zo.errors.email()?.message}
+								</div>
+							)}
+						</div>
+					</div>
+
+					<div>
+						<label
+							htmlFor={zo.fields.password()}
+							className="block text-sm font-medium text-gray-700"
+						>
+							{t("register.password")}
+						</label>
+						<div className="mt-1">
+							<input
+								data-test-id="password"
+								name={zo.fields.password()}
+								type="password"
+								autoComplete="new-password"
+								className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+								disabled={disabled}
+							/>
+							{zo.errors.password()?.message && (
+								<div
+									className="pt-1 text-red-700"
+									id="password-error"
+								>
+									{zo.errors.password()?.message}
+								</div>
+							)}
+						</div>
+					</div>
+
+					<input
+						type="hidden"
+						name={zo.fields.redirectTo()}
+						value={redirectTo}
+					/>
+					<button
+						data-test-id="create-account"
+						type="submit"
+						className="w-full rounded bg-blue-500  px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
+						disabled={disabled}
+					>
+						{t("register.action")}
+					</button>
+					<div className="flex items-center justify-center">
+						<div className="text-center text-sm text-gray-500">
+							{t("register.alreadyHaveAnAccount")}{" "}
+							<Link
+								className="text-blue-500 underline"
+								to={{
+									pathname: "/login",
+									search: searchParams.toString(),
+								}}
+							>
+								{t("register.login")}
+							</Link>
+						</div>
+					</div>
+				</Form>
+				<div className="mt-6">
+					<div className="relative">
+						<div className="absolute inset-0 flex items-center">
+							<div className="w-full border-t border-gray-300" />
+						</div>
+						<div className="relative flex justify-center text-sm">
+							<span className="bg-white px-2 text-gray-500">
+								{t("register.orContinueWith")}
+							</span>
+						</div>
+					</div>
+					<div className="mt-6">
+						<ContinueWithEmailForm />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/app/routes/login.tsx b/app/routes/login.tsx
index a05e832..e28532e 100644
--- a/app/routes/login.tsx
+++ b/app/routes/login.tsx
@@ -1,191 +1,206 @@
 import * as React from "react";
 
-import type { ActionArgs, LoaderArgs, MetaFunction } from "@remix-run/node";
+import type {
+	ActionArgs,
+	LoaderArgs,
+	V2_MetaFunction as MetaFunction,
+} from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
-import { Form, Link, useSearchParams, useTransition } from "@remix-run/react";
+import { Form, Link, useNavigation, useSearchParams } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import { parseFormAny, useZorm } from "react-zorm";
 import { z } from "zod";
 
 import { i18nextServer } from "~/integrations/i18n";
 import {
-  createAuthSession,
-  getAuthSession,
-  signInWithEmail,
-  ContinueWithEmailForm,
+	createAuthSession,
+	getAuthSession,
+	signInWithEmail,
+	ContinueWithEmailForm,
 } from "~/modules/auth";
 import { assertIsPost, isFormProcessing } from "~/utils";
 
 export async function loader({ request }: LoaderArgs) {
-  const authSession = await getAuthSession(request);
-  const t = await i18nextServer.getFixedT(request, "auth");
-  const title = t("login.title");
+	const authSession = await getAuthSession(request);
+	const t = await i18nextServer.getFixedT(request, "auth");
+	const title = t("login.title");
 
-  if (authSession) return redirect("/notes");
+	if (authSession) return redirect("/notes");
 
-  return json({ title });
+	return json({ title });
 }
 
 const LoginFormSchema = z.object({
-  email: z
-    .string()
-    .email("invalid-email")
-    .transform((email) => email.toLowerCase()),
-  password: z.string().min(8, "password-too-short"),
-  redirectTo: z.string().optional(),
+	email: z
+		.string()
+		.email("invalid-email")
+		.transform((email) => email.toLowerCase()),
+	password: z.string().min(8, "password-too-short"),
+	redirectTo: z.string().optional(),
 });
 
 export async function action({ request }: ActionArgs) {
-  assertIsPost(request);
-  const formData = await request.formData();
-  const result = await LoginFormSchema.safeParseAsync(parseFormAny(formData));
-
-  if (!result.success) {
-    return json(
-      {
-        errors: result.error,
-      },
-      { status: 400 }
-    );
-  }
-
-  const { email, password, redirectTo } = result.data;
-
-  const authSession = await signInWithEmail(email, password);
-
-  if (!authSession) {
-    return json(
-      { errors: { email: "invalid-email-password", password: null } },
-      { status: 400 }
-    );
-  }
-
-  return createAuthSession({
-    request,
-    authSession,
-    redirectTo: redirectTo || "/notes",
-  });
+	assertIsPost(request);
+	const formData = await request.formData();
+	const result = await LoginFormSchema.safeParseAsync(parseFormAny(formData));
+
+	if (!result.success) {
+		return json(
+			{
+				errors: result.error,
+			},
+			{ status: 400 },
+		);
+	}
+
+	const { email, password, redirectTo } = result.data;
+
+	const authSession = await signInWithEmail(email, password);
+
+	if (!authSession) {
+		return json(
+			{ errors: { email: "invalid-email-password", password: null } },
+			{ status: 400 },
+		);
+	}
+
+	return createAuthSession({
+		request,
+		authSession,
+		redirectTo: redirectTo || "/notes",
+	});
 }
 
-export const meta: MetaFunction = ({ data }) => ({
-  title: data.title,
-});
+export const meta: MetaFunction = ({ data }) => [
+	{
+		title: data.title,
+	},
+];
 
 export default function LoginPage() {
-  const zo = useZorm("NewQuestionWizardScreen", LoginFormSchema);
-  const [searchParams] = useSearchParams();
-  const redirectTo = searchParams.get("redirectTo") ?? undefined;
-
-  const transition = useTransition();
-  const disabled = isFormProcessing(transition.state);
-  const { t } = useTranslation("auth");
-
-  return (
-    <div className="flex min-h-full flex-col justify-center">
-      <div className="mx-auto w-full max-w-md px-8">
-        <Form ref={zo.ref} method="post" className="space-y-6" replace>
-          <div>
-            <label
-              htmlFor={zo.fields.email()}
-              className="block text-sm font-medium text-gray-700"
-            >
-              {t("login.email")}
-            </label>
-
-            <div className="mt-1">
-              <input
-                data-test-id="email"
-                required
-                autoFocus={true}
-                name={zo.fields.email()}
-                type="email"
-                autoComplete="email"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-                disabled={disabled}
-              />
-              {zo.errors.email()?.message && (
-                <div className="pt-1 text-red-700" id="email-error">
-                  {zo.errors.email()?.message}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div>
-            <label
-              htmlFor={zo.fields.password()}
-              className="block text-sm font-medium text-gray-700"
-            >
-              {t("register.password")}
-            </label>
-            <div className="mt-1">
-              <input
-                data-test-id="password"
-                name={zo.fields.password()}
-                type="password"
-                autoComplete="new-password"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-                disabled={disabled}
-              />
-              {zo.errors.password()?.message && (
-                <div className="pt-1 text-red-700" id="password-error">
-                  {zo.errors.password()?.message}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <input
-            type="hidden"
-            name={zo.fields.redirectTo()}
-            value={redirectTo}
-          />
-          <button
-            data-test-id="login"
-            type="submit"
-            className="w-full rounded bg-blue-500 py-2 px-4 text-white focus:bg-blue-400 hover:bg-blue-600"
-            disabled={disabled}
-          >
-            {t("login.action")}
-          </button>
-          <div className="flex items-center justify-center">
-            <div className="text-center text-sm text-gray-500">
-              <Link className="text-blue-500 underline" to="/forgot-password">
-                {t("login.forgotPassword")}?
-              </Link>
-            </div>
-          </div>
-          <div className="flex items-center justify-center">
-            <div className="text-center text-sm text-gray-500">
-              {t("login.dontHaveAccount")}{" "}
-              <Link
-                className="text-blue-500 underline"
-                to={{
-                  pathname: "/join",
-                  search: searchParams.toString(),
-                }}
-              >
-                {t("login.signUp")}
-              </Link>
-            </div>
-          </div>
-        </Form>
-        <div className="mt-6">
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-gray-300" />
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="bg-white px-2 text-gray-500">
-                {t("login.orContinueWith")}
-              </span>
-            </div>
-          </div>
-          <div className="mt-6">
-            <ContinueWithEmailForm />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+	const zo = useZorm("NewQuestionWizardScreen", LoginFormSchema);
+	const [searchParams] = useSearchParams();
+	const redirectTo = searchParams.get("redirectTo") ?? undefined;
+
+	const navigation = useNavigation();
+	const disabled = isFormProcessing(navigation.state);
+	const { t } = useTranslation("auth");
+
+	return (
+		<div className="flex min-h-full flex-col justify-center">
+			<div className="mx-auto w-full max-w-md px-8">
+				<Form ref={zo.ref} method="post" className="space-y-6" replace>
+					<div>
+						<label
+							htmlFor={zo.fields.email()}
+							className="block text-sm font-medium text-gray-700"
+						>
+							{t("login.email")}
+						</label>
+
+						<div className="mt-1">
+							<input
+								data-test-id="email"
+								required
+								autoFocus={true}
+								name={zo.fields.email()}
+								type="email"
+								autoComplete="email"
+								className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+								disabled={disabled}
+							/>
+							{zo.errors.email()?.message && (
+								<div
+									className="pt-1 text-red-700"
+									id="email-error"
+								>
+									{zo.errors.email()?.message}
+								</div>
+							)}
+						</div>
+					</div>
+
+					<div>
+						<label
+							htmlFor={zo.fields.password()}
+							className="block text-sm font-medium text-gray-700"
+						>
+							{t("register.password")}
+						</label>
+						<div className="mt-1">
+							<input
+								data-test-id="password"
+								name={zo.fields.password()}
+								type="password"
+								autoComplete="new-password"
+								className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+								disabled={disabled}
+							/>
+							{zo.errors.password()?.message && (
+								<div
+									className="pt-1 text-red-700"
+									id="password-error"
+								>
+									{zo.errors.password()?.message}
+								</div>
+							)}
+						</div>
+					</div>
+
+					<input
+						type="hidden"
+						name={zo.fields.redirectTo()}
+						value={redirectTo}
+					/>
+					<button
+						data-test-id="login"
+						type="submit"
+						className="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
+						disabled={disabled}
+					>
+						{t("login.action")}
+					</button>
+					<div className="flex items-center justify-center">
+						<div className="text-center text-sm text-gray-500">
+							<Link
+								className="text-blue-500 underline"
+								to="/forgot-password"
+							>
+								{t("login.forgotPassword")}?
+							</Link>
+						</div>
+					</div>
+					<div className="flex items-center justify-center">
+						<div className="text-center text-sm text-gray-500">
+							{t("login.dontHaveAccount")}{" "}
+							<Link
+								className="text-blue-500 underline"
+								to={{
+									pathname: "/join",
+									search: searchParams.toString(),
+								}}
+							>
+								{t("login.signUp")}
+							</Link>
+						</div>
+					</div>
+				</Form>
+				<div className="mt-6">
+					<div className="relative">
+						<div className="absolute inset-0 flex items-center">
+							<div className="w-full border-t border-gray-300" />
+						</div>
+						<div className="relative flex justify-center text-sm">
+							<span className="bg-white px-2 text-gray-500">
+								{t("login.orContinueWith")}
+							</span>
+						</div>
+					</div>
+					<div className="mt-6">
+						<ContinueWithEmailForm />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/app/routes/logout.tsx b/app/routes/logout.tsx
index 4a3374f..a3aa4aa 100644
--- a/app/routes/logout.tsx
+++ b/app/routes/logout.tsx
@@ -5,11 +5,11 @@ import { destroyAuthSession } from "~/modules/auth";
 import { assertIsPost } from "~/utils";
 
 export async function action({ request }: ActionArgs) {
-  assertIsPost(request);
+	assertIsPost(request);
 
-  return destroyAuthSession(request);
+	return destroyAuthSession(request);
 }
 
 export async function loader() {
-  return redirect("/");
+	return redirect("/");
 }
diff --git a/app/routes/notes.$noteId.tsx b/app/routes/notes.$noteId.tsx
new file mode 100644
index 0000000..bc8dd93
--- /dev/null
+++ b/app/routes/notes.$noteId.tsx
@@ -0,0 +1,67 @@
+import type { ActionArgs, LoaderArgs } from "@remix-run/node";
+import { redirect, json } from "@remix-run/node";
+import { Form, useCatch, useLoaderData } from "@remix-run/react";
+
+import { requireAuthSession, commitAuthSession } from "~/modules/auth";
+import { deleteNote, getNote } from "~/modules/note";
+import { assertIsDelete, getRequiredParam } from "~/utils";
+
+export async function loader({ request, params }: LoaderArgs) {
+	const { userId } = await requireAuthSession(request);
+
+	const id = getRequiredParam(params, "noteId");
+
+	const note = await getNote({ userId, id });
+	if (!note) {
+		throw new Response("Not Found", { status: 404 });
+	}
+	return json({ note });
+}
+
+export async function action({ request, params }: ActionArgs) {
+	assertIsDelete(request);
+	const id = getRequiredParam(params, "noteId");
+	const authSession = await requireAuthSession(request);
+
+	await deleteNote({ userId: authSession.userId, id });
+
+	return redirect("/notes", {
+		headers: {
+			"Set-Cookie": await commitAuthSession(request, { authSession }),
+		},
+	});
+}
+
+export default function NoteDetailsPage() {
+	const data = useLoaderData<typeof loader>();
+
+	return (
+		<div>
+			<h3 className="text-2xl font-bold">{data.note.title}</h3>
+			<p className="py-6">{data.note.body}</p>
+			<hr className="my-4" />
+			<Form method="delete">
+				<button
+					type="submit"
+					className="rounded bg-blue-500  px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
+				>
+					Delete
+				</button>
+			</Form>
+		</div>
+	);
+}
+
+export function ErrorBoundary({ error }: { error: Error }) {
+	return <div>An unexpected error occurred: {error.message}</div>;
+}
+
+export function CatchBoundary() {
+	const caught = useCatch();
+
+	if (caught.status === 404) {
+		return <div>Note not found</div>;
+	}
+
+	throw new Error(`Unexpected caught response with status: ${caught.status}`);
+}
diff --git a/app/routes/notes._index.tsx b/app/routes/notes._index.tsx
new file mode 100644
index 0000000..5bd933f
--- /dev/null
+++ b/app/routes/notes._index.tsx
@@ -0,0 +1,23 @@
+import type { LoaderArgs } from "@remix-run/node";
+import { Link } from "@remix-run/react";
+
+import { requireAuthSession } from "~/modules/auth";
+
+export async function loader({ request }: LoaderArgs) {
+	await requireAuthSession(request);
+
+	return null;
+}
+
+export default function NoteIndexPage() {
+	return (
+		<>
+			<p>
+				No note selected. Select a note on the left, or{" "}
+				<Link to="new" className="text-blue-500 underline">
+					create a new note.
+				</Link>
+			</p>
+		</>
+	);
+}
diff --git a/app/routes/notes.new.tsx b/app/routes/notes.new.tsx
new file mode 100644
index 0000000..f894ed6
--- /dev/null
+++ b/app/routes/notes.new.tsx
@@ -0,0 +1,113 @@
+import * as React from "react";
+
+import type { LoaderArgs } from "@remix-run/node";
+import { json, redirect } from "@remix-run/node";
+import { Form, useNavigation } from "@remix-run/react";
+import { parseFormAny, useZorm } from "react-zorm";
+import { z } from "zod";
+
+import { requireAuthSession, commitAuthSession } from "~/modules/auth";
+import { createNote } from "~/modules/note";
+import { assertIsPost, isFormProcessing } from "~/utils";
+
+export const NewNoteFormSchema = z.object({
+	title: z.string().min(1, "require-title"),
+	body: z.string().min(1, "require-body"),
+});
+
+export async function action({ request }: LoaderArgs) {
+	assertIsPost(request);
+	const authSession = await requireAuthSession(request);
+	const formData = await request.formData();
+	const result = await NewNoteFormSchema.safeParseAsync(
+		parseFormAny(formData),
+	);
+
+	if (!result.success) {
+		return json(
+			{
+				errors: result.error,
+			},
+			{
+				status: 400,
+				headers: {
+					"Set-Cookie": await commitAuthSession(request, {
+						authSession,
+					}),
+				},
+			},
+		);
+	}
+
+	const { title, body } = result.data;
+
+	const note = await createNote({ title, body, userId: authSession.userId });
+
+	return redirect(`/notes/${note.id}`, {
+		headers: {
+			"Set-Cookie": await commitAuthSession(request, { authSession }),
+		},
+	});
+}
+
+export default function NewNotePage() {
+	const zo = useZorm("NewQuestionWizardScreen", NewNoteFormSchema);
+	const navigation = useNavigation();
+	const disabled = isFormProcessing(navigation.state);
+
+	return (
+		<Form
+			ref={zo.ref}
+			method="post"
+			style={{
+				display: "flex",
+				flexDirection: "column",
+				gap: 8,
+				width: "100%",
+			}}
+		>
+			<div>
+				<label className="flex w-full flex-col gap-1">
+					<span>Title: </span>
+					<input
+						name={zo.fields.title()}
+						className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
+						disabled={disabled}
+					/>
+				</label>
+				{zo.errors.title()?.message && (
+					<div className="pt-1 text-red-700" id="title-error">
+						{zo.errors.title()?.message}
+					</div>
+				)}
+			</div>
+
+			<div>
+				<label className="flex w-full flex-col gap-1">
+					<span>Body: </span>
+					<textarea
+						name={zo.fields.body()}
+						rows={8}
+						className="w-full flex-1 rounded-md border-2 border-blue-500 px-3 py-2 text-lg leading-6"
+						disabled={disabled}
+					/>
+				</label>
+				{zo.errors.body()?.message && (
+					<div className="pt-1 text-red-700" id="body-error">
+						{zo.errors.body()?.message}
+					</div>
+				)}
+			</div>
+
+			<div className="text-right">
+				<button
+					type="submit"
+					className="rounded bg-blue-500  px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
+					disabled={disabled}
+				>
+					Save
+				</button>
+			</div>
+		</Form>
+	);
+}
diff --git a/app/routes/notes.tsx b/app/routes/notes.tsx
index cf5b42f..0889d8b 100644
--- a/app/routes/notes.tsx
+++ b/app/routes/notes.tsx
@@ -7,65 +7,64 @@ import { getNotes } from "~/modules/note";
 import { notFound } from "~/utils/http.server";
 
 export async function loader({ request }: LoaderArgs) {
-  const { userId, email } = await requireAuthSession(request);
+	const { userId, email } = await requireAuthSession(request);
 
-  const notes = await getNotes({ userId });
+	const notes = await getNotes({ userId });
 
-  if (!notes) {
-    throw notFound(`No user with id ${userId}`);
-  }
+	if (!notes) {
+		throw notFound(`No user with id ${userId}`);
+	}
 
-  return json({ email, notes });
+	return json({ email, notes });
 }
 
 export default function NotesPage() {
-  const data = useLoaderData<typeof loader>();
+	const data = useLoaderData<typeof loader>();
 
-  return (
-    <div className="flex h-full min-h-screen flex-col">
-      <header className="flex items-center justify-between bg-slate-800 p-4 text-white">
-        <h1 className="text-3xl font-bold">
-          <Link to=".">Notes</Link>
-        </h1>
-        <p>{data.email}</p>
-        <LogoutButton />
-      </header>
+	return (
+		<div className="flex h-full min-h-screen flex-col">
+			<header className="flex items-center justify-between bg-slate-800 p-4 text-white">
+				<h1 className="text-3xl font-bold">
+					<Link to=".">Notes</Link>
+				</h1>
+				<p>{data.email}</p>
+				<LogoutButton />
+			</header>
 
-      <main className="flex h-full bg-white">
-        <div className="h-full w-80 border-r bg-gray-50">
-          <Link
-            to="new"
-            className="block p-4 text-xl text-blue-500"
-          >
-            + New Note
-          </Link>
+			<main className="flex h-full bg-white">
+				<div className="h-full w-80 border-r bg-gray-50">
+					<Link to="new" className="block p-4 text-xl text-blue-500">
+						+ New Note
+					</Link>
 
-          <hr />
+					<hr />
 
-          {data.notes.length === 0 ? (
-            <p className="p-4">No notes yet</p>
-          ) : (
-            <ol>
-              {data.notes.map((note) => (
-                <li key={note.id}>
-                  <NavLink
-                    className={({ isActive }) =>
-                      `block border-b p-4 text-xl ${isActive ? "bg-white" : ""}`
-                    }
-                    to={note.id}
-                  >
-                    📝 {note.title}
-                  </NavLink>
-                </li>
-              ))}
-            </ol>
-          )}
-        </div>
+					{data.notes.length === 0 ? (
+						<p className="p-4">No notes yet</p>
+					) : (
+						<ol>
+							{data.notes.map((note) => (
+								<li key={note.id}>
+									<NavLink
+										className={({ isActive }) =>
+											`block border-b p-4 text-xl ${
+												isActive ? "bg-white" : ""
+											}`
+										}
+										to={note.id}
+									>
+										📝 {note.title}
+									</NavLink>
+								</li>
+							))}
+						</ol>
+					)}
+				</div>
 
-        <div className="flex-1 p-6">
-          <Outlet />
-        </div>
-      </main>
-    </div>
-  );
+				<div className="flex-1 p-6">
+					<Outlet />
+				</div>
+			</main>
+		</div>
+	);
 }
diff --git a/app/routes/notes/$noteId.tsx b/app/routes/notes/$noteId.tsx
deleted file mode 100644
index d98b50f..0000000
--- a/app/routes/notes/$noteId.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { ActionArgs, LoaderArgs } from "@remix-run/node";
-import { redirect, json } from "@remix-run/node";
-import { Form, useCatch, useLoaderData } from "@remix-run/react";
-
-import { requireAuthSession, commitAuthSession } from "~/modules/auth";
-import { deleteNote, getNote } from "~/modules/note";
-import { assertIsDelete, getRequiredParam } from "~/utils";
-
-export async function loader({ request, params }: LoaderArgs) {
-  const { userId } = await requireAuthSession(request);
-
-  const id = getRequiredParam(params, "noteId");
-
-  const note = await getNote({ userId, id });
-  if (!note) {
-    throw new Response("Not Found", { status: 404 });
-  }
-  return json({ note });
-}
-
-export async function action({ request, params }: ActionArgs) {
-  assertIsDelete(request);
-  const id = getRequiredParam(params, "noteId");
-  const authSession = await requireAuthSession(request);
-
-  await deleteNote({ userId: authSession.userId, id });
-
-  return redirect("/notes", {
-    headers: {
-      "Set-Cookie": await commitAuthSession(request, { authSession }),
-    },
-  });
-}
-
-export default function NoteDetailsPage() {
-  const data = useLoaderData<typeof loader>();
-
-  return (
-    <div>
-      <h3 className="text-2xl font-bold">{data.note.title}</h3>
-      <p className="py-6">{data.note.body}</p>
-      <hr className="my-4" />
-      <Form method="delete">
-        <button
-          type="submit"
-          className="rounded bg-blue-500  py-2 px-4 text-white focus:bg-blue-400 hover:bg-blue-600"
-        >
-          Delete
-        </button>
-      </Form>
-    </div>
-  );
-}
-
-export function ErrorBoundary({ error }: { error: Error }) {
-  return <div>An unexpected error occurred: {error.message}</div>;
-}
-
-export function CatchBoundary() {
-  const caught = useCatch();
-
-  if (caught.status === 404) {
-    return <div>Note not found</div>;
-  }
-
-  throw new Error(`Unexpected caught response with status: ${caught.status}`);
-}
diff --git a/app/routes/notes/index.tsx b/app/routes/notes/index.tsx
deleted file mode 100644
index f7fa22e..0000000
--- a/app/routes/notes/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { LoaderArgs } from "@remix-run/node";
-import { Link } from "@remix-run/react";
-
-import { requireAuthSession } from "~/modules/auth";
-
-export async function loader({ request }: LoaderArgs) {
-  await requireAuthSession(request);
-
-  return null;
-}
-
-export default function NoteIndexPage() {
-  return (
-    <>
-      <p>
-        No note selected. Select a note on the left, or{" "}
-        <Link
-          to="new"
-          className="text-blue-500 underline"
-        >
-          create a new note.
-        </Link>
-      </p>
-    </>
-  );
-}
diff --git a/app/routes/notes/new.tsx b/app/routes/notes/new.tsx
deleted file mode 100644
index c09e96a..0000000
--- a/app/routes/notes/new.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import * as React from "react";
-
-import type { LoaderArgs } from "@remix-run/node";
-import { json, redirect } from "@remix-run/node";
-import { Form, useTransition } from "@remix-run/react";
-import { parseFormAny, useZorm } from "react-zorm";
-import { z } from "zod";
-
-import { requireAuthSession, commitAuthSession } from "~/modules/auth";
-import { createNote } from "~/modules/note";
-import { assertIsPost, isFormProcessing } from "~/utils";
-
-export const NewNoteFormSchema = z.object({
-  title: z.string().min(1, "require-title"),
-  body: z.string().min(1, "require-body"),
-});
-
-export async function action({ request }: LoaderArgs) {
-  assertIsPost(request);
-  const authSession = await requireAuthSession(request);
-  const formData = await request.formData();
-  const result = await NewNoteFormSchema.safeParseAsync(parseFormAny(formData));
-
-  if (!result.success) {
-    return json(
-      {
-        errors: result.error,
-      },
-      {
-        status: 400,
-        headers: {
-          "Set-Cookie": await commitAuthSession(request, { authSession }),
-        },
-      },
-    );
-  }
-
-  const { title, body } = result.data;
-
-  const note = await createNote({ title, body, userId: authSession.userId });
-
-  return redirect(`/notes/${note.id}`, {
-    headers: {
-      "Set-Cookie": await commitAuthSession(request, { authSession }),
-    },
-  });
-}
-
-export default function NewNotePage() {
-  const zo = useZorm("NewQuestionWizardScreen", NewNoteFormSchema);
-  const transition = useTransition();
-  const disabled = isFormProcessing(transition.state);
-
-  return (
-    <Form
-      ref={zo.ref}
-      method="post"
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: 8,
-        width: "100%",
-      }}
-    >
-      <div>
-        <label className="flex w-full flex-col gap-1">
-          <span>Title: </span>
-          <input
-            name={zo.fields.title()}
-            className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
-            disabled={disabled}
-          />
-        </label>
-        {zo.errors.title()?.message && (
-          <div className="pt-1 text-red-700" id="title-error">
-            {zo.errors.title()?.message}
-          </div>
-        )}
-      </div>
-
-      <div>
-        <label className="flex w-full flex-col gap-1">
-          <span>Body: </span>
-          <textarea
-            name={zo.fields.body()}
-            rows={8}
-            className="w-full flex-1 rounded-md border-2 border-blue-500 py-2 px-3 text-lg leading-6"
-            disabled={disabled}
-          />
-        </label>
-        {zo.errors.body()?.message && (
-          <div className="pt-1 text-red-700" id="body-error">
-            {zo.errors.body()?.message}
-          </div>
-        )}
-      </div>
-
-      <div className="text-right">
-        <button
-          type="submit"
-          className="rounded bg-blue-500  py-2 px-4 text-white focus:bg-blue-400 hover:bg-blue-600"
-          disabled={disabled}
-        >
-          Save
-        </button>
-      </div>
-    </Form>
-  );
-}
diff --git a/app/routes/oauth.callback.tsx b/app/routes/oauth.callback.tsx
index 0d984af..fd960db 100644
--- a/app/routes/oauth.callback.tsx
+++ b/app/routes/oauth.callback.tsx
@@ -8,9 +8,9 @@ import { z } from "zod";
 
 import { supabaseClient } from "~/integrations/supabase";
 import {
-  refreshAccessToken,
-  commitAuthSession,
-  getAuthSession,
+	refreshAccessToken,
+	commitAuthSession,
+	getAuthSession,
 } from "~/modules/auth";
 import { tryCreateUser, getUserByEmail } from "~/modules/user";
 import { assertIsPost, safeRedirect } from "~/utils";
@@ -18,117 +18,117 @@ import { assertIsPost, safeRedirect } from "~/utils";
 // imagine a user go back after OAuth login success or type this URL
 // we don't want him to fall in a black hole 👽
 export async function loader({ request }: LoaderArgs) {
-  const authSession = await getAuthSession(request);
+	const authSession = await getAuthSession(request);
 
-  if (authSession) return redirect("/notes");
+	if (authSession) return redirect("/notes");
 
-  return json({});
+	return json({});
 }
 
 export async function action({ request }: ActionArgs) {
-  assertIsPost(request);
-
-  const formData = await request.formData();
-  const result = await z
-    .object({
-      refreshToken: z.string(),
-      redirectTo: z.string().optional(),
-    })
-    .safeParseAsync(parseFormAny(formData));
-
-  if (!result.success) {
-    return json(
-      {
-        message: "invalid-request",
-      },
-      { status: 400 }
-    );
-  }
-
-  const { redirectTo, refreshToken } = result.data;
-  const safeRedirectTo = safeRedirect(redirectTo, "/notes");
-
-  // We should not trust what is sent from the client
-  // https://github.com/rphlmr/supa-fly-stack/issues/45
-  const authSession = await refreshAccessToken(refreshToken);
-
-  if (!authSession) {
-    return json(
-      {
-        message: "invalid-refresh-token",
-      },
-      { status: 401 }
-    );
-  }
-
-  // user have an account, skip creation part and just commit session
-  if (await getUserByEmail(authSession.email)) {
-    return redirect(safeRedirectTo, {
-      headers: {
-        "Set-Cookie": await commitAuthSession(request, {
-          authSession,
-        }),
-      },
-    });
-  }
-
-  // first time sign in, let's create a brand-new User row in supabase
-  const user = await tryCreateUser(authSession);
-
-  if (!user) {
-    return json(
-      {
-        message: "create-user-error",
-      },
-      { status: 500 }
-    );
-  }
-
-  return redirect(safeRedirectTo, {
-    headers: {
-      "Set-Cookie": await commitAuthSession(request, {
-        authSession,
-      }),
-    },
-  });
+	assertIsPost(request);
+
+	const formData = await request.formData();
+	const result = await z
+		.object({
+			refreshToken: z.string(),
+			redirectTo: z.string().optional(),
+		})
+		.safeParseAsync(parseFormAny(formData));
+
+	if (!result.success) {
+		return json(
+			{
+				message: "invalid-request",
+			},
+			{ status: 400 },
+		);
+	}
+
+	const { redirectTo, refreshToken } = result.data;
+	const safeRedirectTo = safeRedirect(redirectTo, "/notes");
+
+	// We should not trust what is sent from the client
+	// https://github.com/rphlmr/supa-fly-stack/issues/45
+	const authSession = await refreshAccessToken(refreshToken);
+
+	if (!authSession) {
+		return json(
+			{
+				message: "invalid-refresh-token",
+			},
+			{ status: 401 },
+		);
+	}
+
+	// user have an account, skip creation part and just commit session
+	if (await getUserByEmail(authSession.email)) {
+		return redirect(safeRedirectTo, {
+			headers: {
+				"Set-Cookie": await commitAuthSession(request, {
+					authSession,
+				}),
+			},
+		});
+	}
+
+	// first time sign in, let's create a brand-new User row in supabase
+	const user = await tryCreateUser(authSession);
+
+	if (!user) {
+		return json(
+			{
+				message: "create-user-error",
+			},
+			{ status: 500 },
+		);
+	}
+
+	return redirect(safeRedirectTo, {
+		headers: {
+			"Set-Cookie": await commitAuthSession(request, {
+				authSession,
+			}),
+		},
+	});
 }
 
 export default function LoginCallback() {
-  const error = useActionData<typeof action>();
-  const fetcher = useFetcher();
-  const [searchParams] = useSearchParams();
-  const redirectTo = searchParams.get("redirectTo") ?? "/notes";
-
-  useEffect(() => {
-    const {
-      data: { subscription },
-    } = supabaseClient.auth.onAuthStateChange((event, supabaseSession) => {
-      if (event === "SIGNED_IN") {
-        // supabase sdk has ability to read url fragment that contains your token after third party provider redirects you here
-        // this fragment url looks like https://.....#access_token=evxxxxxxxx&refresh_token=xxxxxx, and it's not readable server-side (Oauth security)
-        // supabase auth listener gives us a user session, based on what it founds in this fragment url
-        // we can't use it directly, client-side, because we can't access sessionStorage from here
-
-        // we should not trust what's happen client side
-        // so, we only pick the refresh token, and let's back-end getting user session from it
-        const refreshToken = supabaseSession?.refresh_token;
-
-        if (!refreshToken) return;
-
-        const formData = new FormData();
-
-        formData.append("refreshToken", refreshToken);
-        formData.append("redirectTo", redirectTo);
-
-        fetcher.submit(formData, { method: "post", replace: true });
-      }
-    });
-
-    return () => {
-      // prevent memory leak. Listener stays alive 👨‍🎤
-      subscription.unsubscribe();
-    };
-  }, [fetcher, redirectTo]);
-
-  return error ? <div>{error.message}</div> : null;
+	const error = useActionData<typeof action>();
+	const fetcher = useFetcher();
+	const [searchParams] = useSearchParams();
+	const redirectTo = searchParams.get("redirectTo") ?? "/notes";
+
+	useEffect(() => {
+		const {
+			data: { subscription },
+		} = supabaseClient.auth.onAuthStateChange((event, supabaseSession) => {
+			if (event === "SIGNED_IN") {
+				// supabase sdk has ability to read url fragment that contains your token after third party provider redirects you here
+				// this fragment url looks like https://.....#access_token=evxxxxxxxx&refresh_token=xxxxxx, and it's not readable server-side (Oauth security)
+				// supabase auth listener gives us a user session, based on what it founds in this fragment url
+				// we can't use it directly, client-side, because we can't access sessionStorage from here
+
+				// we should not trust what's happen client side
+				// so, we only pick the refresh token, and let's back-end getting user session from it
+				const refreshToken = supabaseSession?.refresh_token;
+
+				if (!refreshToken) return;
+
+				const formData = new FormData();
+
+				formData.append("refreshToken", refreshToken);
+				formData.append("redirectTo", redirectTo);
+
+				fetcher.submit(formData, { method: "post", replace: true });
+			}
+		});
+
+		return () => {
+			// prevent memory leak. Listener stays alive 👨‍🎤
+			subscription.unsubscribe();
+		};
+	}, [fetcher, redirectTo]);
+
+	return error ? <div>{error.message}</div> : null;
 }
diff --git a/app/routes/reset-password.tsx b/app/routes/reset-password.tsx
index d0d675e..f3f2e60 100644
--- a/app/routes/reset-password.tsx
+++ b/app/routes/reset-password.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 
 import type { ActionArgs, LoaderArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
-import { Form, Link, useActionData, useTransition } from "@remix-run/react";
+import { Form, Link, useActionData, useNavigation } from "@remix-run/react";
 import { useTranslation } from "react-i18next";
 import { parseFormAny, useZorm } from "react-zorm";
 import { z } from "zod";
@@ -10,198 +10,209 @@ import { z } from "zod";
 import { i18nextServer } from "~/integrations/i18n";
 import { supabaseClient } from "~/integrations/supabase";
 import {
-  commitAuthSession,
-  getAuthSession,
-  refreshAccessToken,
-  updateAccountPassword,
+	commitAuthSession,
+	getAuthSession,
+	refreshAccessToken,
+	updateAccountPassword,
 } from "~/modules/auth";
 import { assertIsPost, isFormProcessing, tw } from "~/utils";
 
 export async function loader({ request }: LoaderArgs) {
-  const authSession = await getAuthSession(request);
-  const t = await i18nextServer.getFixedT(request, "auth");
-  const title = t("register.changePassword");
+	const authSession = await getAuthSession(request);
+	const t = await i18nextServer.getFixedT(request, "auth");
+	const title = t("register.changePassword");
 
-  if (authSession) return redirect("/notes");
+	if (authSession) return redirect("/notes");
 
-  return json({ title });
+	return json({ title });
 }
 
 const ResetPasswordSchema = z
-  .object({
-    password: z.string().min(8, "password-too-short"),
-    confirmPassword: z.string().min(8, "password-too-short"),
-    refreshToken: z.string(),
-  })
-  .superRefine(({ password, confirmPassword, refreshToken }, ctx) => {
-    if (password !== confirmPassword) {
-      return ctx.addIssue({
-        code: z.ZodIssueCode.custom,
-        message: "Password and confirm password must match",
-        path: ["confirmPassword"],
-      });
-    }
-
-    return { password, confirmPassword, refreshToken };
-  });
+	.object({
+		password: z.string().min(8, "password-too-short"),
+		confirmPassword: z.string().min(8, "password-too-short"),
+		refreshToken: z.string(),
+	})
+	.superRefine(({ password, confirmPassword, refreshToken }, ctx) => {
+		if (password !== confirmPassword) {
+			return ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Password and confirm password must match",
+				path: ["confirmPassword"],
+			});
+		}
+
+		return { password, confirmPassword, refreshToken };
+	});
 
 export async function action({ request }: ActionArgs) {
-  assertIsPost(request);
-
-  const formData = await request.formData();
-  const result = await ResetPasswordSchema.safeParseAsync(
-    parseFormAny(formData)
-  );
-
-  if (!result.success) {
-    return json(
-      {
-        message: "invalid-request",
-      },
-      { status: 400 }
-    );
-  }
-
-  const { password, refreshToken } = result.data;
-
-  // We should not trust what is sent from the client
-  // https://github.com/rphlmr/supa-fly-stack/issues/45
-  const authSession = await refreshAccessToken(refreshToken);
-
-  if (!authSession) {
-    return json(
-      {
-        message: "invalid-refresh-token",
-      },
-      { status: 401 }
-    );
-  }
-
-  const user = await updateAccountPassword(authSession.userId, password);
-
-  if (!user) {
-    return json(
-      {
-        message: "update-password-error",
-      },
-      { status: 500 }
-    );
-  }
-
-  return redirect("/notes", {
-    headers: {
-      "Set-Cookie": await commitAuthSession(request, {
-        authSession,
-      }),
-    },
-  });
+	assertIsPost(request);
+
+	const formData = await request.formData();
+	const result = await ResetPasswordSchema.safeParseAsync(
+		parseFormAny(formData),
+	);
+
+	if (!result.success) {
+		return json(
+			{
+				message: "invalid-request",
+			},
+			{ status: 400 },
+		);
+	}
+
+	const { password, refreshToken } = result.data;
+
+	// We should not trust what is sent from the client
+	// https://github.com/rphlmr/supa-fly-stack/issues/45
+	const authSession = await refreshAccessToken(refreshToken);
+
+	if (!authSession) {
+		return json(
+			{
+				message: "invalid-refresh-token",
+			},
+			{ status: 401 },
+		);
+	}
+
+	const user = await updateAccountPassword(authSession.userId, password);
+
+	if (!user) {
+		return json(
+			{
+				message: "update-password-error",
+			},
+			{ status: 500 },
+		);
+	}
+
+	return redirect("/notes", {
+		headers: {
+			"Set-Cookie": await commitAuthSession(request, {
+				authSession,
+			}),
+		},
+	});
 }
 
 export default function ResetPassword() {
-  const zo = useZorm("ResetPasswordForm", ResetPasswordSchema);
-  const { t } = useTranslation("auth");
-  const [userRefreshToken, setUserRefreshToken] = useState("");
-  const actionData = useActionData<typeof action>();
-  const transition = useTransition();
-  const disabled = isFormProcessing(transition.state);
-
-  useEffect(() => {
-    const {
-      data: { subscription },
-    } = supabaseClient.auth.onAuthStateChange((event, supabaseSession) => {
-      // In local development, we doesn't see "PASSWORD_RECOVERY" event because:
-      // Effect run twice and break listener chain
-      if (event === "PASSWORD_RECOVERY" || event === "SIGNED_IN") {
-        const refreshToken = supabaseSession?.refresh_token;
-
-        if (!refreshToken) return;
-
-        setUserRefreshToken(refreshToken);
-      }
-    });
-
-    return () => {
-      // prevent memory leak. Listener stays alive 👨‍🎤
-      subscription.unsubscribe();
-    };
-  }, []);
-
-  return (
-    <div className="flex min-h-full flex-col justify-center">
-      <div className="mx-auto w-full max-w-md px-8">
-        <Form ref={zo.ref} method="post" className="space-y-6" replace>
-          <div>
-            <label
-              htmlFor={zo.fields.password()}
-              className="block text-sm font-medium text-gray-700"
-            >
-              {t("register.password")}
-            </label>
-            <div className="mt-1">
-              <input
-                data-test-id="password"
-                name={zo.fields.password()}
-                type="password"
-                autoComplete="new-password"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-                disabled={disabled}
-              />
-              {zo.errors.password()?.message && (
-                <div className="pt-1 text-red-700" id="password-error">
-                  {zo.errors.password()?.message}
-                </div>
-              )}
-            </div>
-          </div>
-          <div>
-            <label
-              htmlFor={zo.fields.confirmPassword()}
-              className="block text-sm font-medium text-gray-700"
-            >
-              {t("register.confirmPassword")}
-            </label>
-            <div className="mt-1">
-              <input
-                data-test-id="confirmPassword"
-                name={zo.fields.confirmPassword()}
-                type="password"
-                autoComplete="new-password"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-                disabled={disabled}
-              />
-              {zo.errors.confirmPassword()?.message && (
-                <div className="pt-1 text-red-700" id="password-error">
-                  {zo.errors.confirmPassword()?.message}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <input
-            type="hidden"
-            name={zo.fields.refreshToken()}
-            value={userRefreshToken}
-          />
-          <button
-            data-test-id="change-password"
-            type="submit"
-            className="w-full rounded bg-blue-500  py-2 px-4 text-white focus:bg-blue-400 hover:bg-blue-600"
-            disabled={disabled}
-          >
-            {t("register.changePassword")}
-          </button>
-        </Form>
-        {actionData?.message ? (
-          <div className="flex flex-col items-center">
-            <div className={tw(`mb-2 h-6 text-center text-red-600`)}>
-              {actionData.message}
-            </div>
-            <Link className="text-blue-500 underline" to="/forgot-password">
-              Resend link
-            </Link>
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
+	const zo = useZorm("ResetPasswordForm", ResetPasswordSchema);
+	const { t } = useTranslation("auth");
+	const [userRefreshToken, setUserRefreshToken] = useState("");
+	const actionData = useActionData<typeof action>();
+	const navigation = useNavigation();
+	const disabled = isFormProcessing(navigation.state);
+
+	useEffect(() => {
+		const {
+			data: { subscription },
+		} = supabaseClient.auth.onAuthStateChange((event, supabaseSession) => {
+			// In local development, we doesn't see "PASSWORD_RECOVERY" event because:
+			// Effect run twice and break listener chain
+			if (event === "PASSWORD_RECOVERY" || event === "SIGNED_IN") {
+				const refreshToken = supabaseSession?.refresh_token;
+
+				if (!refreshToken) return;
+
+				setUserRefreshToken(refreshToken);
+			}
+		});
+
+		return () => {
+			// prevent memory leak. Listener stays alive 👨‍🎤
+			subscription.unsubscribe();
+		};
+	}, []);
+
+	return (
+		<div className="flex min-h-full flex-col justify-center">
+			<div className="mx-auto w-full max-w-md px-8">
+				<Form ref={zo.ref} method="post" className="space-y-6" replace>
+					<div>
+						<label
+							htmlFor={zo.fields.password()}
+							className="block text-sm font-medium text-gray-700"
+						>
+							{t("register.password")}
+						</label>
+						<div className="mt-1">
+							<input
+								data-test-id="password"
+								name={zo.fields.password()}
+								type="password"
+								autoComplete="new-password"
+								className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+								disabled={disabled}
+							/>
+							{zo.errors.password()?.message && (
+								<div
+									className="pt-1 text-red-700"
+									id="password-error"
+								>
+									{zo.errors.password()?.message}
+								</div>
+							)}
+						</div>
+					</div>
+					<div>
+						<label
+							htmlFor={zo.fields.confirmPassword()}
+							className="block text-sm font-medium text-gray-700"
+						>
+							{t("register.confirmPassword")}
+						</label>
+						<div className="mt-1">
+							<input
+								data-test-id="confirmPassword"
+								name={zo.fields.confirmPassword()}
+								type="password"
+								autoComplete="new-password"
+								className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+								disabled={disabled}
+							/>
+							{zo.errors.confirmPassword()?.message && (
+								<div
+									className="pt-1 text-red-700"
+									id="password-error"
+								>
+									{zo.errors.confirmPassword()?.message}
+								</div>
+							)}
+						</div>
+					</div>
+
+					<input
+						type="hidden"
+						name={zo.fields.refreshToken()}
+						value={userRefreshToken}
+					/>
+					<button
+						data-test-id="change-password"
+						type="submit"
+						className="w-full rounded bg-blue-500  px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
+						disabled={disabled}
+					>
+						{t("register.changePassword")}
+					</button>
+				</Form>
+				{actionData?.message ? (
+					<div className="flex flex-col items-center">
+						<div
+							className={tw(`mb-2 h-6 text-center text-red-600`)}
+						>
+							{actionData.message}
+						</div>
+						<Link
+							className="text-blue-500 underline"
+							to="/forgot-password"
+						>
+							Resend link
+						</Link>
+					</div>
+				) : null}
+			</div>
+		</div>
+	);
 }
diff --git a/app/routes/send-magic-link.tsx b/app/routes/send-magic-link.tsx
index 99fab51..457df0b 100644
--- a/app/routes/send-magic-link.tsx
+++ b/app/routes/send-magic-link.tsx
@@ -7,37 +7,38 @@ import { sendMagicLink } from "~/modules/auth";
 import { assertIsPost } from "~/utils/http.server";
 
 export async function action({ request }: ActionArgs) {
-  assertIsPost(request);
+	assertIsPost(request);
 
-  const formData = await request.formData();
-  const result = await z
-    .object({
-      email: z
-        .string()
-        .email("invalid-email")
-        .transform((email) => email.toLowerCase()),
-    })
-    .safeParseAsync(parseFormAny(formData));
+	const formData = await request.formData();
+	const result = await z
+		.object({
+			email: z
+				.string()
+				.email("invalid-email")
+				.transform((email) => email.toLowerCase()),
+		})
+		.safeParseAsync(parseFormAny(formData));
 
-  if (!result.success) {
-    return json(
-      {
-        error: "invalid-email",
-      },
-      { status: 400 }
-    );
-  }
+	if (!result.success) {
+		return json(
+			{
+				error: "invalid-email",
+			},
+			{ status: 400 },
+		);
+	}
 
-  const { error } = await sendMagicLink(result.data.email);
+	const { error } = await sendMagicLink(result.data.email);
 
-  if (error) {
-    return json(
-      {
-        error: "unable-to-send-magic-link",
-      },
-      { status: 500 }
-    );
-  }
+	if (error) {
+		console.error(error);
+		return json(
+			{
+				error: "unable-to-send-magic-link",
+			},
+			{ status: 500 },
+		);
+	}
 
-  return json({ error: null });
+	return json({ error: null });
 }
diff --git a/app/utils/env.ts b/app/utils/env.ts
index 72a47af..0994a6d 100644
--- a/app/utils/env.ts
+++ b/app/utils/env.ts
@@ -1,45 +1,45 @@
 import { isBrowser } from "./is-browser";
 
 declare global {
-  interface Window {
-    env: {
-      SUPABASE_URL: string;
-      SUPABASE_ANON_PUBLIC: string;
-    };
-  }
+	interface Window {
+		env: {
+			SUPABASE_URL: string;
+			SUPABASE_ANON_PUBLIC: string;
+		};
+	}
 }
 
 declare global {
-  namespace NodeJS {
-    interface ProcessEnv {
-      SUPABASE_URL: string;
-      SUPABASE_SERVICE_ROLE: string;
-      SERVER_URL: string;
-      SUPABASE_ANON_PUBLIC: string;
-      SESSION_SECRET: string;
-    }
-  }
+	namespace NodeJS {
+		interface ProcessEnv {
+			SUPABASE_URL: string;
+			SUPABASE_SERVICE_ROLE: string;
+			SERVER_URL: string;
+			SUPABASE_ANON_PUBLIC: string;
+			SESSION_SECRET: string;
+		}
+	}
 }
 
 type EnvOptions = {
-  isSecret?: boolean;
-  isRequired?: boolean;
+	isSecret?: boolean;
+	isRequired?: boolean;
 };
 function getEnv(
-  name: string,
-  { isRequired, isSecret }: EnvOptions = { isSecret: true, isRequired: true }
+	name: string,
+	{ isRequired, isSecret }: EnvOptions = { isSecret: true, isRequired: true },
 ) {
-  if (isBrowser && isSecret) return "";
+	if (isBrowser && isSecret) return "";
 
-  const source = (isBrowser ? window.env : process.env) ?? {};
+	const source = (isBrowser ? window.env : process.env) ?? {};
 
-  const value = source[name as keyof typeof source];
+	const value = source[name as keyof typeof source];
 
-  if (!value && isRequired) {
-    throw new Error(`${name} is not set`);
-  }
+	if (!value && isRequired) {
+		throw new Error(`${name} is not set`);
+	}
 
-  return value;
+	return value;
 }
 
 /**
@@ -53,17 +53,17 @@ export const SESSION_SECRET = getEnv("SESSION_SECRET");
  * Shared envs
  */
 export const NODE_ENV = getEnv("NODE_ENV", {
-  isSecret: false,
-  isRequired: false,
+	isSecret: false,
+	isRequired: false,
 });
 export const SUPABASE_URL = getEnv("SUPABASE_URL", { isSecret: false });
 export const SUPABASE_ANON_PUBLIC = getEnv("SUPABASE_ANON_PUBLIC", {
-  isSecret: false,
+	isSecret: false,
 });
 
 export function getBrowserEnv() {
-  return {
-    SUPABASE_URL,
-    SUPABASE_ANON_PUBLIC,
-  };
+	return {
+		SUPABASE_URL,
+		SUPABASE_ANON_PUBLIC,
+	};
 }
diff --git a/app/utils/form.ts b/app/utils/form.ts
index ca79138..a4f7a90 100644
--- a/app/utils/form.ts
+++ b/app/utils/form.ts
@@ -1,3 +1,3 @@
 export function isFormProcessing(state: "idle" | "submitting" | "loading") {
-  return state === "submitting" || state === "loading";
+	return state === "submitting" || state === "loading";
 }
diff --git a/app/utils/http.server.ts b/app/utils/http.server.ts
index 52837c2..7a026e2 100644
--- a/app/utils/http.server.ts
+++ b/app/utils/http.server.ts
@@ -1,66 +1,66 @@
 export function getCurrentPath(request: Request) {
-  return new URL(request.url).pathname;
+	return new URL(request.url).pathname;
 }
 
 export function makeRedirectToFromHere(request: Request) {
-  return new URLSearchParams([["redirectTo", getCurrentPath(request)]]);
+	return new URLSearchParams([["redirectTo", getCurrentPath(request)]]);
 }
 
 export function getRedirectTo(request: Request, defaultRedirectTo = "/") {
-  const url = new URL(request.url);
-  return safeRedirect(url.searchParams.get("redirectTo"), defaultRedirectTo);
+	const url = new URL(request.url);
+	return safeRedirect(url.searchParams.get("redirectTo"), defaultRedirectTo);
 }
 
 export function isGet(request: Request) {
-  return request.method.toLowerCase() === "get";
+	return request.method.toLowerCase() === "get";
 }
 
 export function isPost(request: Request) {
-  return request.method.toLowerCase() === "post";
+	return request.method.toLowerCase() === "post";
 }
 
 export function isDelete(request: Request) {
-  return request.method.toLowerCase() === "delete";
+	return request.method.toLowerCase() === "delete";
 }
 
 export function notFound(message: string) {
-  return new Response(message, { status: 404 });
+	return new Response(message, { status: 404 });
 }
 
 function notAllowedMethod(message: string) {
-  return new Response(message, { status: 405 });
+	return new Response(message, { status: 405 });
 }
 
 function badRequest(message: string) {
-  return new Response(message, { status: 400 });
+	return new Response(message, { status: 400 });
 }
 
 export function getRequiredParam(
-  params: Record<string, string | undefined>,
-  key: string
+	params: Record<string, string | undefined>,
+	key: string,
 ) {
-  const value = params[key];
+	const value = params[key];
 
-  if (!value) {
-    throw badRequest(`Missing required request param "${key}"`);
-  }
+	if (!value) {
+		throw badRequest(`Missing required request param "${key}"`);
+	}
 
-  return value;
+	return value;
 }
 
 export function assertIsPost(request: Request, message = "Method not allowed") {
-  if (!isPost(request)) {
-    throw notAllowedMethod(message);
-  }
+	if (!isPost(request)) {
+		throw notAllowedMethod(message);
+	}
 }
 
 export function assertIsDelete(
-  request: Request,
-  message = "Method not allowed"
+	request: Request,
+	message = "Method not allowed",
 ) {
-  if (!isDelete(request)) {
-    throw notAllowedMethod(message);
-  }
+	if (!isDelete(request)) {
+		throw notAllowedMethod(message);
+	}
 }
 
 /**
@@ -71,17 +71,17 @@ export function assertIsDelete(
  * @param {string} defaultRedirect The redirect to use if the to is unsafe.
  */
 export function safeRedirect(
-  to: FormDataEntryValue | string | null | undefined,
-  defaultRedirect = "/"
+	to: FormDataEntryValue | string | null | undefined,
+	defaultRedirect = "/",
 ) {
-  if (
-    !to ||
-    typeof to !== "string" ||
-    !to.startsWith("/") ||
-    to.startsWith("//")
-  ) {
-    return defaultRedirect;
-  }
+	if (
+		!to ||
+		typeof to !== "string" ||
+		!to.startsWith("/") ||
+		to.startsWith("//")
+	) {
+		return defaultRedirect;
+	}
 
-  return to;
+	return to;
 }
diff --git a/app/utils/http.test.ts b/app/utils/http.test.ts
index 0c5130c..7dd881d 100644
--- a/app/utils/http.test.ts
+++ b/app/utils/http.test.ts
@@ -1,11 +1,11 @@
 import {
-  isGet,
-  getCurrentPath,
-  getRedirectTo,
-  makeRedirectToFromHere,
-  notFound,
-  isPost,
-  safeRedirect,
+	isGet,
+	getCurrentPath,
+	getRedirectTo,
+	makeRedirectToFromHere,
+	notFound,
+	isPost,
+	safeRedirect,
 } from "./http.server";
 
 // @vitest-environment node
@@ -14,88 +14,90 @@ import {
 const BASE_URL = "https://my-app.com";
 
 describe(getCurrentPath.name, () => {
-  it("should return current request url path", () => {
-    expect(getCurrentPath(new Request(`${BASE_URL}/profile`))).toBe("/profile");
-  });
+	it("should return current request url path", () => {
+		expect(getCurrentPath(new Request(`${BASE_URL}/profile`))).toBe(
+			"/profile",
+		);
+	});
 });
 
 describe(makeRedirectToFromHere.name, () => {
-  it("should return search params with redirectTo set with current request url path", () => {
-    expect(makeRedirectToFromHere(new Request(`${BASE_URL}/profile`))).toEqual(
-      new URLSearchParams([["redirectTo", "/profile"]]),
-    );
-  });
+	it("should return search params with redirectTo set with current request url path", () => {
+		expect(
+			makeRedirectToFromHere(new Request(`${BASE_URL}/profile`)),
+		).toEqual(new URLSearchParams([["redirectTo", "/profile"]]));
+	});
 });
 
 describe(getRedirectTo.name, () => {
-  it("should return default redirectTo value", () => {
-    expect(getRedirectTo(new Request(BASE_URL))).toBe("/");
-  });
+	it("should return default redirectTo value", () => {
+		expect(getRedirectTo(new Request(BASE_URL))).toBe("/");
+	});
 
-  it("should return url redirectTo param value", () => {
-    expect(getRedirectTo(new Request(`${BASE_URL}?redirectTo=/profile`))).toBe(
-      "/profile",
-    );
-  });
+	it("should return url redirectTo param value", () => {
+		expect(
+			getRedirectTo(new Request(`${BASE_URL}?redirectTo=/profile`)),
+		).toBe("/profile");
+	});
 
-  it("should return root redirectTo param value if invalid param value", () => {
-    expect(getRedirectTo(new Request(`${BASE_URL}?redirectTo=//profile`))).toBe(
-      "/",
-    );
-  });
+	it("should return root redirectTo param value if invalid param value", () => {
+		expect(
+			getRedirectTo(new Request(`${BASE_URL}?redirectTo=//profile`)),
+		).toBe("/");
+	});
 });
 
 describe(isGet.name, () => {
-  it("should return false for POST / PUT / PATCH / DELETE methods", () => {
-    expect(isGet(new Request(BASE_URL, { method: "POST" }))).toBeFalsy();
-    expect(isGet(new Request(BASE_URL, { method: "PUT" }))).toBeFalsy();
-    expect(isGet(new Request(BASE_URL, { method: "PATCH" }))).toBeFalsy();
-    expect(isGet(new Request(BASE_URL, { method: "DELETE" }))).toBeFalsy();
-  });
+	it("should return false for POST / PUT / PATCH / DELETE methods", () => {
+		expect(isGet(new Request(BASE_URL, { method: "POST" }))).toBeFalsy();
+		expect(isGet(new Request(BASE_URL, { method: "PUT" }))).toBeFalsy();
+		expect(isGet(new Request(BASE_URL, { method: "PATCH" }))).toBeFalsy();
+		expect(isGet(new Request(BASE_URL, { method: "DELETE" }))).toBeFalsy();
+	});
 
-  it("should return true for GET method", async () => {
-    expect(isGet(new Request(BASE_URL, { method: "GET" }))).toBeTruthy();
-  });
+	it("should return true for GET method", async () => {
+		expect(isGet(new Request(BASE_URL, { method: "GET" }))).toBeTruthy();
+	});
 });
 
 describe(isPost.name, () => {
-  it("should return false for GET / PUT / PATCH / DELETE methods", () => {
-    expect(isPost(new Request(BASE_URL, { method: "GET" }))).toBeFalsy();
-    expect(isPost(new Request(BASE_URL, { method: "PUT" }))).toBeFalsy();
-    expect(isPost(new Request(BASE_URL, { method: "PATCH" }))).toBeFalsy();
-    expect(isPost(new Request(BASE_URL, { method: "DELETE" }))).toBeFalsy();
-  });
+	it("should return false for GET / PUT / PATCH / DELETE methods", () => {
+		expect(isPost(new Request(BASE_URL, { method: "GET" }))).toBeFalsy();
+		expect(isPost(new Request(BASE_URL, { method: "PUT" }))).toBeFalsy();
+		expect(isPost(new Request(BASE_URL, { method: "PATCH" }))).toBeFalsy();
+		expect(isPost(new Request(BASE_URL, { method: "DELETE" }))).toBeFalsy();
+	});
 
-  it("should return true for POST method", async () => {
-    expect(isPost(new Request(BASE_URL, { method: "POST" }))).toBeTruthy();
-  });
+	it("should return true for POST method", async () => {
+		expect(isPost(new Request(BASE_URL, { method: "POST" }))).toBeTruthy();
+	});
 });
 
 describe(notFound.name, () => {
-  it("should return 404 status", () => {
-    expect(notFound("").status).toBe(404);
-  });
+	it("should return 404 status", () => {
+		expect(notFound("").status).toBe(404);
+	});
 
-  it("should return message", async () => {
-    expect(await notFound("not-found-message").text()).toBe(
-      "not-found-message",
-    );
-  });
+	it("should return message", async () => {
+		expect(await notFound("not-found-message").text()).toBe(
+			"not-found-message",
+		);
+	});
 });
 
 describe(safeRedirect.name, () => {
-  it("should return root path if invalid destination", () => {
-    expect(safeRedirect(null)).toBe("/");
-    expect(safeRedirect(undefined)).toBe("/");
-    // @ts-expect-error js wrong type
-    expect(safeRedirect(false)).toBe("/");
-    expect(safeRedirect("")).toBe("/");
-    expect(safeRedirect("my-url")).toBe("/");
-    expect(safeRedirect("//")).toBe("/");
-    expect(safeRedirect("//my-url")).toBe("/");
-  });
+	it("should return root path if invalid destination", () => {
+		expect(safeRedirect(null)).toBe("/");
+		expect(safeRedirect(undefined)).toBe("/");
+		// @ts-expect-error js wrong type
+		expect(safeRedirect(false)).toBe("/");
+		expect(safeRedirect("")).toBe("/");
+		expect(safeRedirect("my-url")).toBe("/");
+		expect(safeRedirect("//")).toBe("/");
+		expect(safeRedirect("//my-url")).toBe("/");
+	});
 
-  it("should return destination path", () => {
-    expect(safeRedirect("/notes")).toBe("/notes");
-  });
+	it("should return destination path", () => {
+		expect(safeRedirect("/notes")).toBe("/notes");
+	});
 });
diff --git a/app/utils/is-browser.ts b/app/utils/is-browser.ts
index 9202882..2790dd4 100644
--- a/app/utils/is-browser.ts
+++ b/app/utils/is-browser.ts
@@ -1,2 +1,2 @@
 export const isBrowser =
-  typeof document !== "undefined" && typeof process === "undefined";
+	typeof document !== "undefined" && typeof process === "undefined";
diff --git a/app/utils/tw-classes.ts b/app/utils/tw-classes.ts
index f6704ab..c6ca8fe 100644
--- a/app/utils/tw-classes.ts
+++ b/app/utils/tw-classes.ts
@@ -1,5 +1,5 @@
 import { twMerge } from "tailwind-merge";
 
 export function tw(...args: Parameters<typeof twMerge>) {
-  return twMerge(...args);
+	return twMerge(...args);
 }
diff --git a/app/utils/zod.ts b/app/utils/zod.ts
index 76ff5e4..ceabd68 100644
--- a/app/utils/zod.ts
+++ b/app/utils/zod.ts
@@ -3,11 +3,11 @@ import type { ZodCustomIssue, ZodIssue } from "zod";
 type ZodCustomIssueWithMessage = ZodCustomIssue & { message: string };
 
 export function createFormIssues(
-  issues?: ZodIssue[]
+	issues?: ZodIssue[],
 ): ZodCustomIssueWithMessage[] | undefined {
-  return issues?.map(({ message, path }) => ({
-    code: "custom",
-    message,
-    path,
-  }));
+	return issues?.map(({ message, path }) => ({
+		code: "custom",
+		message,
+		path,
+	}));
 }
diff --git a/cypress.config.ts b/cypress.config.ts
index 5300ed1..f945a95 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,28 +1,28 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
-  e2e: {
-    setupNodeEvents: (on, config) => {
-      const isDev = config.watchForFileChanges;
-      const port = process.env.PORT ?? (isDev ? "3000" : "8811");
-      const configOverrides: Partial<Cypress.PluginConfigOptions> = {
-        baseUrl: `http://localhost:${port}`,
-        video: false,
-        screenshotOnRunFailure: !process.env.CI,
-        defaultCommandTimeout: process.env.CI ? 90_000 : 30_000,
-      };
+	e2e: {
+		setupNodeEvents: (on, config) => {
+			const isDev = config.watchForFileChanges;
+			const port = process.env.PORT ?? (isDev ? "3000" : "8811");
+			const configOverrides: Partial<Cypress.PluginConfigOptions> = {
+				baseUrl: `http://localhost:${port}`,
+				video: false,
+				screenshotOnRunFailure: !process.env.CI,
+				defaultCommandTimeout: process.env.CI ? 90_000 : 30_000,
+			};
 
-      // To use this:
-      // cy.task('log', whateverYouWantInTheTerminal)
-      on("task", {
-        log: (message) => {
-          console.log(message);
+			// To use this:
+			// cy.task('log', whateverYouWantInTheTerminal)
+			on("task", {
+				log: (message) => {
+					console.log(message);
 
-          return null;
-        },
-      });
+					return null;
+				},
+			});
 
-      return { ...config, ...configOverrides };
-    },
-  },
+			return { ...config, ...configOverrides };
+		},
+	},
 });
diff --git a/cypress/.eslintrc.js b/cypress/.eslintrc.js
index 37c79ff..becb008 100644
--- a/cypress/.eslintrc.js
+++ b/cypress/.eslintrc.js
@@ -1,6 +1,6 @@
 module.exports = {
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: "./tsconfig.json",
-  },
+	parserOptions: {
+		tsconfigRootDir: __dirname,
+		project: "./tsconfig.json",
+	},
 };
diff --git a/cypress/e2e/smoke.cy.ts b/cypress/e2e/smoke.cy.ts
index 4d401bb..1a97fe8 100644
--- a/cypress/e2e/smoke.cy.ts
+++ b/cypress/e2e/smoke.cy.ts
@@ -1,65 +1,65 @@
 import { faker } from "@faker-js/faker";
 
 describe("smoke tests", () => {
-  afterEach(() => {
-    cy.cleanupUser();
-  });
+	afterEach(() => {
+		cy.cleanupUser();
+	});
 
-  it("should allow you to register and login", () => {
-    const loginForm = {
-      email: faker.internet
-        .email(undefined, undefined, "example.com")
-        .toLowerCase(),
-      password: faker.internet.password(),
-    };
-    cy.then(() => ({ email: loginForm.email })).as("user");
+	it("should allow you to register and login", () => {
+		const loginForm = {
+			email: faker.internet
+				.email(undefined, undefined, "example.com")
+				.toLowerCase(),
+			password: faker.internet.password(),
+		};
+		cy.then(() => ({ email: loginForm.email })).as("user");
 
-    cy.visit("/");
-    cy.findByTestId("join").click();
+		cy.visit("/");
+		cy.findByTestId("join").click();
 
-    cy.findByTestId("email").type(loginForm.email);
-    cy.findByTestId("password").type(loginForm.password);
-    cy.findByTestId("create-account").click();
+		cy.findByTestId("email").type(loginForm.email);
+		cy.findByTestId("password").type(loginForm.password);
+		cy.findByTestId("create-account").click();
 
-    cy.findByText("No notes yet");
+		cy.findByText("No notes yet");
 
-    cy.findByTestId("logout").click();
-    cy.findByTestId("login");
-  });
+		cy.findByTestId("logout").click();
+		cy.findByTestId("login");
+	});
 
-  it("should allow you to make a note", () => {
-    const testNote = {
-      title: faker.lorem.words(1),
-      body: faker.lorem.sentences(1),
-    };
-    const credentials = {
-      email: faker.internet
-        .email(undefined, undefined, "example.com")
-        .toLowerCase(),
-      password: faker.internet.password(),
-    };
+	it("should allow you to make a note", () => {
+		const testNote = {
+			title: faker.lorem.words(1),
+			body: faker.lorem.sentences(1),
+		};
+		const credentials = {
+			email: faker.internet
+				.email(undefined, undefined, "example.com")
+				.toLowerCase(),
+			password: faker.internet.password(),
+		};
 
-    cy.log("Create account with", credentials);
-    cy.createAccount(credentials);
-    cy.visit("/");
-    cy.findByTestId("login").click();
+		cy.log("Create account with", credentials);
+		cy.createAccount(credentials);
+		cy.visit("/");
+		cy.findByTestId("login").click();
 
-    cy.findByTestId("email").type(credentials.email);
-    cy.findByTestId("password").type(credentials.password);
-    cy.findByTestId("login").click();
+		cy.findByTestId("email").type(credentials.email);
+		cy.findByTestId("password").type(credentials.password);
+		cy.findByTestId("login").click();
 
-    cy.findByText("No notes yet");
+		cy.findByText("No notes yet");
 
-    cy.findByRole("link", { name: /\+ new note/i }).click();
+		cy.findByRole("link", { name: /\+ new note/i }).click();
 
-    cy.findByRole("textbox", { name: /title/i }).type(testNote.title);
-    cy.findByRole("textbox", { name: /body/i }).type(testNote.body);
-    cy.findByRole("button", { name: /save/i }).click();
+		cy.findByRole("textbox", { name: /title/i }).type(testNote.title);
+		cy.findByRole("textbox", { name: /body/i }).type(testNote.body);
+		cy.findByRole("button", { name: /save/i }).click();
 
-    cy.findByRole("button", { name: /delete/i }).click();
+		cy.findByRole("button", { name: /delete/i }).click();
 
-    cy.findByText("No notes yet");
-    cy.findByTestId("logout").click();
-    cy.findByTestId("login");
-  });
+		cy.findByText("No notes yet");
+		cy.findByTestId("logout").click();
+		cy.findByTestId("login");
+	});
 });
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 959e31e..fbb5aac 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -1,69 +1,69 @@
 import { faker } from "@faker-js/faker";
 
 declare global {
-  namespace Cypress {
-    interface Chainable {
-      /**
-       * Logs in with a random user. Yields the user and adds an alias to the user
-       *
-       * @returns {typeof createAccount}
-       * @memberof Chainable
-       * @example
-       *    cy.createAccount()
-       * @example
-       *    cy.createAccount({ email: 'whatever@example.com', password: 'password' })
-       */
-      createAccount: typeof createAccount;
+	namespace Cypress {
+		interface Chainable {
+			/**
+			 * Logs in with a random user. Yields the user and adds an alias to the user
+			 *
+			 * @returns {typeof createAccount}
+			 * @memberof Chainable
+			 * @example
+			 *    cy.createAccount()
+			 * @example
+			 *    cy.createAccount({ email: 'whatever@example.com', password: 'password' })
+			 */
+			createAccount: typeof createAccount;
 
-      /**
-       * Deletes the current @user
-       *
-       * @returns {typeof cleanupUser}
-       * @memberof Chainable
-       * @example
-       *    cy.cleanupUser()
-       * @example
-       *    cy.cleanupUser({ email: 'whatever@example.com' })
-       */
-      cleanupUser: typeof cleanupUser;
-    }
-  }
+			/**
+			 * Deletes the current @user
+			 *
+			 * @returns {typeof cleanupUser}
+			 * @memberof Chainable
+			 * @example
+			 *    cy.cleanupUser()
+			 * @example
+			 *    cy.cleanupUser({ email: 'whatever@example.com' })
+			 */
+			cleanupUser: typeof cleanupUser;
+		}
+	}
 }
 
 function createAccount({
-  email = faker.internet
-    .email(undefined, undefined, "example.com")
-    .toLowerCase(),
-  password = faker.internet.password(),
+	email = faker.internet
+		.email(undefined, undefined, "example.com")
+		.toLowerCase(),
+	password = faker.internet.password(),
 }: {
-  email?: string;
-  password?: string;
+	email?: string;
+	password?: string;
 } = {}) {
-  cy.exec(
-    `dotenv -- npx ts-node --require tsconfig-paths/register ./cypress/support/create-user.ts "${email}" "${password}"`
-  );
-  cy.then(() => ({ email, password })).as("user");
+	cy.exec(
+		`dotenv -- npx ts-node --require tsconfig-paths/register ./cypress/support/create-user.ts "${email}" "${password}"`,
+	);
+	cy.then(() => ({ email, password })).as("user");
 }
 
 function cleanupUser({ email }: { email?: string } = {}) {
-  if (email) {
-    deleteUserByEmail(email);
-  } else {
-    cy.get("@user").then((user) => {
-      const email = (user as { email?: string }).email;
-      if (email) {
-        deleteUserByEmail(email);
-      }
-    });
-  }
-  cy.clearCookie("__session");
+	if (email) {
+		deleteUserByEmail(email);
+	} else {
+		cy.get("@user").then((user) => {
+			const email = (user as { email?: string }).email;
+			if (email) {
+				deleteUserByEmail(email);
+			}
+		});
+	}
+	cy.clearCookie("__session");
 }
 
 function deleteUserByEmail(email: string) {
-  cy.exec(
-    `dotenv -- npx ts-node --require tsconfig-paths/register ./cypress/support/delete-user.ts "${email}"`
-  );
-  cy.clearCookie("__session");
+	cy.exec(
+		`dotenv -- npx ts-node --require tsconfig-paths/register ./cypress/support/delete-user.ts "${email}"`,
+	);
+	cy.clearCookie("__session");
 }
 
 Cypress.Commands.add("createAccount", createAccount);
diff --git a/cypress/support/create-user.ts b/cypress/support/create-user.ts
index d9adf97..6f447a4 100644
--- a/cypress/support/create-user.ts
+++ b/cypress/support/create-user.ts
@@ -12,31 +12,31 @@ import { createEmailAuthAccount } from "~/modules/auth";
 installGlobals();
 
 async function createAccount(email: string, password: string) {
-  if (!email || !password) {
-    throw new Error("email and password required to create account");
-  }
-  if (!email.endsWith("@example.com")) {
-    throw new Error("All test emails must end in @example.com");
-  }
-
-  const authAccount = await createEmailAuthAccount(email, password);
-
-  if (!authAccount) {
-    throw new Error("Failed to create user account for cypress");
-  }
-
-  const newUser = await db.user.create({
-    data: {
-      email: email.toLowerCase(),
-      id: authAccount.id,
-    },
-  });
-
-  if (!newUser) {
-    throw new Error("Failed to create user database entry");
-  }
-
-  return { email, password };
+	if (!email || !password) {
+		throw new Error("email and password required to create account");
+	}
+	if (!email.endsWith("@example.com")) {
+		throw new Error("All test emails must end in @example.com");
+	}
+
+	const authAccount = await createEmailAuthAccount(email, password);
+
+	if (!authAccount) {
+		throw new Error("Failed to create user account for cypress");
+	}
+
+	const newUser = await db.user.create({
+		data: {
+			email: email.toLowerCase(),
+			id: authAccount.id,
+		},
+	});
+
+	if (!newUser) {
+		throw new Error("Failed to create user database entry");
+	}
+
+	return { email, password };
 }
 
 createAccount(process.argv[2], process.argv[3]);
diff --git a/cypress/support/delete-user.ts b/cypress/support/delete-user.ts
index 7593d71..0e16fe5 100644
--- a/cypress/support/delete-user.ts
+++ b/cypress/support/delete-user.ts
@@ -3,7 +3,7 @@
 // npx ts-node --require tsconfig-paths/register ./cypress/support/delete-user.ts username@example.com
 // and that user will get deleted
 
-import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { installGlobals } from "@remix-run/node";
 
 import { db } from "~/database";
@@ -13,31 +13,31 @@ import { getUserByEmail } from "~/modules/user";
 installGlobals();
 
 async function deleteUser(email: string) {
-  if (!email) {
-    throw new Error("email required for login");
-  }
-  if (!email.endsWith("@example.com")) {
-    throw new Error("All test emails must end in @example.com");
-  }
-
-  const user = await getUserByEmail(email);
-
-  try {
-    await db.user.delete({ where: { email } });
-  } catch (error) {
-    if (
-      error instanceof PrismaClientKnownRequestError &&
-      error.code === "P2025"
-    ) {
-      console.log("User not found, so no need to delete");
-    } else {
-      throw error;
-    }
-  }
-
-  if (user?.id) {
-    await deleteAuthAccount(user.id);
-  }
+	if (!email) {
+		throw new Error("email required for login");
+	}
+	if (!email.endsWith("@example.com")) {
+		throw new Error("All test emails must end in @example.com");
+	}
+
+	const user = await getUserByEmail(email);
+
+	try {
+		await db.user.delete({ where: { email } });
+	} catch (error) {
+		if (
+			error instanceof PrismaClientKnownRequestError &&
+			error.code === "P2025"
+		) {
+			console.log("User not found, so no need to delete");
+		} else {
+			throw error;
+		}
+	}
+
+	if (user?.id) {
+		await deleteAuthAccount(user.id);
+	}
 }
 
 deleteUser(process.argv[2]);
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
index a354ef1..7936f02 100644
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@@ -3,16 +3,16 @@ import { configure } from "@testing-library/cypress";
 import "./commands";
 
 Cypress.on("uncaught:exception", (err) => {
-  // Cypress and React Hydrating the document don't get along
-  // for some unknown reason. Hopefully we figure out why eventually
-  // so we can remove this.
-  if (
-    /hydrat/i.test(err.message) ||
-    /Minified React error #418/.test(err.message) ||
-    /Minified React error #423/.test(err.message)
-  ) {
-    return false;
-  }
+	// Cypress and React Hydrating the document don't get along
+	// for some unknown reason. Hopefully we figure out why eventually
+	// so we can remove this.
+	if (
+		/hydrat/i.test(err.message) ||
+		/Minified React error #418/.test(err.message) ||
+		/Minified React error #423/.test(err.message)
+	) {
+		return false;
+	}
 });
 
 configure({ testIdAttribute: "data-test-id" });
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index 0d07fa8..e85881d 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -1,28 +1,27 @@
 {
-  "exclude": [
-    "../node_modules/@types/jest",
-    "../node_modules/@testing-library/jest-dom"
-  ],
-  "include": [
-    "e2e/**/*",
-    "support/**/*",
-    "../node_modules/cypress",
-    "../node_modules/@testing-library/cypress"
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "noEmit": true,
-    "types": ["node"],
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "moduleResolution": "node",
-    "target": "es2019",
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "typeRoots": ["../types", "../node_modules/@types"],
-    "paths": {
-      "~/*": ["../app/*"]
-    }
-  }
+	"exclude": [
+		"../node_modules/@types/jest",
+		"../node_modules/@testing-library/jest-dom"
+	],
+	"include": [
+		"e2e/**/*",
+		"support/**/*",
+		"../node_modules/cypress",
+		"../node_modules/@testing-library/cypress"
+	],
+	"compilerOptions": {
+		"baseUrl": ".",
+		"noEmit": true,
+		"esModuleInterop": true,
+		"jsx": "react-jsx",
+		"moduleResolution": "node",
+		"target": "es2019",
+		"strict": true,
+		"skipLibCheck": true,
+		"resolveJsonModule": true,
+		"typeRoots": ["../types", "../node_modules/@types"],
+		"paths": {
+			"~/*": ["../app/*"]
+		}
+	}
 }
diff --git a/decisions/0001-split-tailwind-classes-with-tw.md b/decisions/0001-split-tailwind-classes-with-tw.md
index 4af5b34..7fbbc97 100644
--- a/decisions/0001-split-tailwind-classes-with-tw.md
+++ b/decisions/0001-split-tailwind-classes-with-tw.md
@@ -24,22 +24,22 @@ https://github.com/dcastil/tailwind-merge
 
 ### Split classes across multiple lines and group similar classes together
 
-- positioning
-- size
-- content
-- border
-- color
+-   positioning
+-   size
+-   content
+-   border
+-   color
 
 ```js
 <div
-  className={tw(
-    "absolute -top-1 -right-0.5 m-2", //positioning
-    "h-4 w-4", //size
-    "flex items-center justify-center p-2", //content
-    "rounded-full focus:outline-none", //border
-    "bg-pink-500 text-white shadow-sm shadow-black" //color
-    // You can add comments to your styling code.
-  )}
+	className={tw(
+		"absolute -top-1 -right-0.5 m-2", //positioning
+		"h-4 w-4", //size
+		"flex items-center justify-center p-2", //content
+		"rounded-full focus:outline-none", //border
+		"bg-pink-500 text-white shadow-sm shadow-black", //color
+		// You can add comments to your styling code.
+	)}
 />
 ```
 
@@ -47,28 +47,28 @@ https://github.com/dcastil/tailwind-merge
 
 ```js
 <button
-  {...buttonProps}
-  className={tw(
-    "inline-flex items-center justify-center px-3 py-2", //default style
-    "min-w-0",
-    "inline-flex items-center justify-center",
-    "truncate bg-white text-xs font-bold focus:outline-none",
-    variant === "cta" && [
-      // variant
-      "py-2 px-3",
-      "text-indigo-500 lg:text-lg",
-      "rounded-lg border-2 border-gray-100",
-    ],
-    variant === "notification" && [
-      // variant
-      "py-[6px] px-3",
-      "text-gray-700",
-      "rounded-md border-2 border-gray-100",
-    ],
-    variant === "icon" && ["p-1", "rounded-lg border-2 border-gray-100"], // variant
-    variant === "text" && ["text-gray-700"], // variant
-    buttonProps.className // on demand style override
-  )}
+	{...buttonProps}
+	className={tw(
+		"inline-flex items-center justify-center px-3 py-2", //default style
+		"min-w-0",
+		"inline-flex items-center justify-center",
+		"truncate bg-white text-xs font-bold focus:outline-none",
+		variant === "cta" && [
+			// variant
+			"py-2 px-3",
+			"text-indigo-500 lg:text-lg",
+			"rounded-lg border-2 border-gray-100",
+		],
+		variant === "notification" && [
+			// variant
+			"py-[6px] px-3",
+			"text-gray-700",
+			"rounded-md border-2 border-gray-100",
+		],
+		variant === "icon" && ["p-1", "rounded-lg border-2 border-gray-100"], // variant
+		variant === "text" && ["text-gray-700"], // variant
+		buttonProps.className, // on demand style override
+	)}
 />
 ```
 
diff --git a/mocks/handlers.js b/mocks/handlers.js
index 079dca4..65d390b 100644
--- a/mocks/handlers.js
+++ b/mocks/handlers.js
@@ -3,24 +3,24 @@ const { rest } = require("msw");
 const { USER_EMAIL, USER_ID, USER_PASSWORD } = require("./user");
 
 const supabaseAuthSession = {
-  user: { id: USER_ID, email: USER_EMAIL },
-  refresh_token: "valid",
-  access_token: "valid",
-  expires_in: -1,
+	user: { id: USER_ID, email: USER_EMAIL },
+	refresh_token: "valid",
+	access_token: "valid",
+	expires_in: -1,
 };
 
 const authSession = {
-  refreshToken: "valid",
-  accessToken: "valid",
-  userId: USER_ID,
-  email: USER_EMAIL,
-  expiresIn: -1,
-  expiresAt: -1,
+	refreshToken: "valid",
+	accessToken: "valid",
+	userId: USER_ID,
+	email: USER_EMAIL,
+	expiresIn: -1,
+	expiresAt: -1,
 };
 
 const authAccount = {
-  id: USER_ID,
-  email: USER_EMAIL,
+	id: USER_ID,
+	email: USER_EMAIL,
 };
 
 const SUPABASE_URL = "https://supabase-project.supabase.co";
@@ -29,52 +29,60 @@ const SUPABASE_AUTH_USER_API = "/auth/v1/user";
 const SUPABASE_AUTH_ADMIN_USER_API = "/auth/v1/admin/users";
 
 const handlers = [
-  rest.post(
-    `${SUPABASE_URL}${SUPABASE_AUTH_TOKEN_API}`,
-    async (req, res, ctx) => {
-      const { email, password, refresh_token } = await req.json();
+	rest.post(
+		`${SUPABASE_URL}${SUPABASE_AUTH_TOKEN_API}`,
+		async (req, res, ctx) => {
+			const { email, password, refresh_token } = await req.json();
 
-      if (refresh_token) {
-        if (refresh_token !== "valid")
-          return res(ctx.status(401), ctx.json({ error: "Token expired" }));
-        return res(ctx.status(200), ctx.json(supabaseAuthSession));
-      }
+			if (refresh_token) {
+				if (refresh_token !== "valid")
+					return res(
+						ctx.status(401),
+						ctx.json({ error: "Token expired" }),
+					);
+				return res(ctx.status(200), ctx.json(supabaseAuthSession));
+			}
 
-      if (!email || !password || password !== USER_PASSWORD)
-        return res(
-          ctx.status(401),
-          ctx.json({ message: "Wrong email or password" })
-        );
-      return res(ctx.status(200), ctx.json(supabaseAuthSession));
-    }
-  ),
-  rest.get(
-    `${SUPABASE_URL}${SUPABASE_AUTH_USER_API}`,
-    async (req, res, ctx) => {
-      const token = req.headers.get("authorization")?.split("Bearer ")?.[1];
+			if (!email || !password || password !== USER_PASSWORD)
+				return res(
+					ctx.status(401),
+					ctx.json({ message: "Wrong email or password" }),
+				);
+			return res(ctx.status(200), ctx.json(supabaseAuthSession));
+		},
+	),
+	rest.get(
+		`${SUPABASE_URL}${SUPABASE_AUTH_USER_API}`,
+		async (req, res, ctx) => {
+			const token = req.headers
+				.get("authorization")
+				?.split("Bearer ")?.[1];
 
-      if (token !== "valid")
-        return res(ctx.status(401), ctx.json({ error: "Token expired" }));
-      return res(ctx.status(200), ctx.json({ id: USER_ID }));
-    }
-  ),
-  rest.post(
-    `${SUPABASE_URL}${SUPABASE_AUTH_ADMIN_USER_API}`,
-    async (req, res, ctx) => res(ctx.status(200), ctx.json(authAccount))
-  ),
-  rest.delete(
-    `${SUPABASE_URL}${SUPABASE_AUTH_ADMIN_USER_API}/*`,
-    async (req, res, ctx) => res(ctx.status(200), ctx.json({}))
-  ),
+			if (token !== "valid")
+				return res(
+					ctx.status(401),
+					ctx.json({ error: "Token expired" }),
+				);
+			return res(ctx.status(200), ctx.json({ id: USER_ID }));
+		},
+	),
+	rest.post(
+		`${SUPABASE_URL}${SUPABASE_AUTH_ADMIN_USER_API}`,
+		async (req, res, ctx) => res(ctx.status(200), ctx.json(authAccount)),
+	),
+	rest.delete(
+		`${SUPABASE_URL}${SUPABASE_AUTH_ADMIN_USER_API}/*`,
+		async (req, res, ctx) => res(ctx.status(200), ctx.json({})),
+	),
 ];
 
 module.exports = {
-  handlers,
-  SUPABASE_URL,
-  SUPABASE_AUTH_TOKEN_API,
-  SUPABASE_AUTH_USER_API,
-  SUPABASE_AUTH_ADMIN_USER_API,
-  authAccount,
-  authSession,
-  supabaseAuthSession,
+	handlers,
+	SUPABASE_URL,
+	SUPABASE_AUTH_TOKEN_API,
+	SUPABASE_AUTH_USER_API,
+	SUPABASE_AUTH_ADMIN_USER_API,
+	authAccount,
+	authSession,
+	supabaseAuthSession,
 };
diff --git a/mocks/index.js b/mocks/index.js
index aa9e127..5442a18 100644
--- a/mocks/index.js
+++ b/mocks/index.js
@@ -11,5 +11,5 @@ process.once("SIGINT", () => server.close());
 process.once("SIGTERM", () => server.close());
 
 module.exports = {
-  server,
+	server,
 };
diff --git a/mocks/user.js b/mocks/user.js
index daf91a1..4f8b52f 100644
--- a/mocks/user.js
+++ b/mocks/user.js
@@ -3,7 +3,7 @@ const USER_EMAIL = "hello@supabase.com";
 const USER_PASSWORD = "supabase";
 
 module.exports = {
-  USER_EMAIL,
-  USER_ID,
-  USER_PASSWORD,
+	USER_EMAIL,
+	USER_ID,
+	USER_PASSWORD,
 };
diff --git a/package.json b/package.json
index a6286e2..3259ce0 100644
--- a/package.json
+++ b/package.json
@@ -1,92 +1,91 @@
 {
-  "name": "supa-fly-stack-template",
-  "private": true,
-  "sideEffects": false,
-  "scripts": {
-    "build": "run-s build:*",
-    "build:remix": "remix build",
-    "db:prepare-migration": "prisma migrate dev --create-only --skip-seed",
-    "db:deploy-migration": "prisma migrate deploy",
-    "dev": "run-p dev:*",
-    "dev:remix": "remix dev",
-    "format": "prettier --write .",
-    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
-    "setup": "run-s setup:db setup:seed",
-    "setup:db": "prisma generate && prisma migrate deploy",
-    "setup:seed": "prisma db seed",
-    "start": "remix-serve build",
-    "start:ci": "dotenv -- remix-serve build",
-    "test": "vitest",
-    "test:cov": "vitest --coverage",
-    "test:e2e:dev": "start-server-and-test dev http://localhost:3000 'npx cypress open'",
-    "pretest:e2e:run": "npm run build",
-    "test:e2e:run": "dotenv -- cross-env PORT=8811 start-server-and-test http://localhost:8811 'npx cypress run'",
-    "typecheck": "tsc -b && tsc -b cypress",
-    "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run"
-  },
-  "prettier": {},
-  "dependencies": {
-    "@prisma/client": "^4.10.1",
-    "@remix-run/node": "*",
-    "@remix-run/react": "*",
-    "@remix-run/serve": "*",
-    "@supabase/supabase-js": "^2.26.0",
-    "cookie": "^0.5.0",
-    "i18next": "^21.9.1",
-    "i18next-browser-languagedetector": "^6.1.5",
-    "i18next-fs-backend": "^1.1.5",
-    "i18next-http-backend": "^1.4.1",
-    "isbot": "^3.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^11.18.5",
-    "react-zorm": "^0.6.1",
-    "remix-i18next": "^4.1.1",
-    "tailwind-merge": "^1.13.2",
-    "zod": "^3.21.4"
-  },
-  "devDependencies": {
-    "@faker-js/faker": "^8.0.2",
-    "@remix-run/dev": "*",
-    "@remix-run/eslint-config": "1.18.1",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "@testing-library/cypress": "^9.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/i18next-fs-backend": "^1.1.2",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^3.1.0",
-    "@vitest/coverage-v8": "^0.33.0",
-    "cross-env": "^7.0.3",
-    "cypress": "^12.17.1",
-    "dotenv-cli": "^7.0.0",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-tailwindcss": "^3.13.0",
-    "happy-dom": "^10.1.1",
-    "msw": "^1.2.2",
-    "npm-run-all": "^4.1.5",
-    "prettier": "3.0.0",
-    "prettier-plugin-tailwindcss": "^0.4.0",
-    "prisma": "^4.10.1",
-    "start-server-and-test": "^2.0.0",
-    "tailwind-scrollbar": "^3.0.4",
-    "tailwindcss": "^3.3.2",
-    "ts-node": "^10.9.1",
-    "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.1.6",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.33.0"
-  },
-  "engines": {
-    "node": ">=16"
-  },
-  "prisma": {
-    "schema": "app/database/schema.prisma",
-    "seed": "ts-node --require tsconfig-paths/register app/database/seed.server.ts"
-  }
+	"name": "supa-fly-stack-template",
+	"private": true,
+	"sideEffects": false,
+	"scripts": {
+		"build": "run-s build:*",
+		"build:remix": "remix build",
+		"db:prepare-migration": "prisma migrate dev --create-only --skip-seed",
+		"db:deploy-migration": "prisma migrate deploy",
+		"dev": "remix dev",
+		"format": "prettier --write .",
+		"lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
+		"setup": "run-s setup:db setup:seed",
+		"setup:db": "prisma generate && prisma migrate deploy",
+		"setup:seed": "prisma db seed",
+		"start": "remix-serve build",
+		"start:ci": "dotenv -- remix-serve build",
+		"test": "vitest",
+		"test:cov": "vitest --coverage",
+		"test:e2e:dev": "start-server-and-test dev http://localhost:3000 'npx cypress open'",
+		"pretest:e2e:run": "npm run build",
+		"test:e2e:run": "dotenv -- cross-env PORT=8811 start-server-and-test http://localhost:8811 'npx cypress run'",
+		"typecheck": "tsc -b && tsc -b cypress",
+		"validate": "run-p \"test -- --run\" lint typecheck test:e2e:run",
+		"postinstall": "prisma generate"
+	},
+	"dependencies": {
+		"@prisma/client": "^5.2.0",
+		"@remix-run/css-bundle": "^1.19.3",
+		"@remix-run/node": "*",
+		"@remix-run/react": "*",
+		"@remix-run/serve": "*",
+		"@supabase/supabase-js": "^2.33.1",
+		"cookie": "^0.5.0",
+		"i18next": "^21.9.1",
+		"i18next-browser-languagedetector": "^6.1.5",
+		"i18next-fs-backend": "^1.1.5",
+		"i18next-http-backend": "^1.4.1",
+		"isbot": "^3.6.13",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-i18next": "^11.18.5",
+		"react-zorm": "^0.9.0",
+		"remix-i18next": "^4.1.1",
+		"tailwind-merge": "^1.14.0",
+		"zod": "^3.22.2"
+	},
+	"devDependencies": {
+		"@faker-js/faker": "^8.0.2",
+		"@remix-run/dev": "*",
+		"@remix-run/eslint-config": "1.18.1",
+		"@tailwindcss/forms": "^0.5.6",
+		"@tailwindcss/typography": "^0.5.9",
+		"@testing-library/cypress": "^9.0.0",
+		"@testing-library/jest-dom": "^6.0.1",
+		"@testing-library/react": "^14.0.0",
+		"@testing-library/user-event": "^14.4.3",
+		"@types/i18next-fs-backend": "^1.1.2",
+		"@types/react": "^18.2.21",
+		"@types/react-dom": "^18.2.7",
+		"@vitejs/plugin-react": "^4.0.4",
+		"@vitest/coverage-v8": "^0.34.3",
+		"cross-env": "^7.0.3",
+		"cypress": "^13.0.0",
+		"dotenv-cli": "^7.3.0",
+		"eslint": "^8.48.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-tailwindcss": "^3.13.0",
+		"happy-dom": "^10.11.2",
+		"msw": "^1.2.5",
+		"npm-run-all": "^4.1.5",
+		"prettier": "3.0.3",
+		"prisma": "^5.2.0",
+		"start-server-and-test": "^2.0.0",
+		"tailwind-scrollbar": "^3.0.5",
+		"tailwindcss": "^3.3.2",
+		"ts-node": "^10.9.1",
+		"tsconfig-paths": "^4.2.0",
+		"typescript": "^5.2.2",
+		"vite": "^4.4.9",
+		"vite-tsconfig-paths": "^4.2.0",
+		"vitest": "^0.34.3"
+	},
+	"engines": {
+		"node": ">=18"
+	},
+	"prisma": {
+		"schema": "app/database/schema.prisma",
+		"seed": "ts-node --require tsconfig-paths/register app/database/seed.server.ts"
+	}
 }
diff --git a/public/locales/en/auth.json b/public/locales/en/auth.json
index 00a6cab..17ade1b 100644
--- a/public/locales/en/auth.json
+++ b/public/locales/en/auth.json
@@ -1,30 +1,30 @@
 {
-  "login": {
-    "action": "Log in",
-    "dontHaveAccount": "Don't have an account?",
-    "email": "Email address",
-    "orContinueWith": "Or continue with",
-    "password": "Password",
-    "signUp": "Sign up",
-    "title": "Login",
-    "forgotPassword": "Forgot Password"
-  },
-  "register": {
-    "action": "Create Account",
-    "alreadyHaveAnAccount": "Already have an account?",
-    "checkEmail": "Check your emails ✌️",
-    "continueWithEmail": "Continue with email",
-    "email": "Email address",
-    "login": "Log in",
-    "orContinueWith": "Or continue with",
-    "password": "Password",
-    "sendingLink": "Sending you a link...",
-    "title": "Sign Up",
-    "confirmPassword": "Confirm Password",
-    "changePassword": "Change my password",
-    "sendLink": "Send me a link"
-  },
-  "logout": {
-    "action": "Logout"
-  }
+	"login": {
+		"action": "Log in",
+		"dontHaveAccount": "Don't have an account?",
+		"email": "Email address",
+		"orContinueWith": "Or continue with",
+		"password": "Password",
+		"signUp": "Sign up",
+		"title": "Login",
+		"forgotPassword": "Forgot Password"
+	},
+	"register": {
+		"action": "Create Account",
+		"alreadyHaveAnAccount": "Already have an account?",
+		"checkEmail": "Check your emails ✌️",
+		"continueWithEmail": "Continue with email",
+		"email": "Email address",
+		"login": "Log in",
+		"orContinueWith": "Or continue with",
+		"password": "Password",
+		"sendingLink": "Sending you a link...",
+		"title": "Sign Up",
+		"confirmPassword": "Confirm Password",
+		"changePassword": "Change my password",
+		"sendLink": "Send me a link"
+	},
+	"logout": {
+		"action": "Logout"
+	}
 }
diff --git a/public/locales/fr/auth.json b/public/locales/fr/auth.json
index 0f89de4..3e7282b 100644
--- a/public/locales/fr/auth.json
+++ b/public/locales/fr/auth.json
@@ -1,30 +1,30 @@
 {
-  "login": {
-    "action": "Se connecter",
-    "dontHaveAccount": "Vous n'avez pas de compte ?",
-    "email": "Adresse email",
-    "orContinueWith": "Ou continuer avec",
-    "password": "Mot de passe",
-    "signUp": "S'inscrire",
-    "title": "Connexion",
-    "forgotPassword": "Mot de passe oublié"
-  },
-  "register": {
-    "action": "Créer un compte",
-    "alreadyHaveAnAccount": "Vous avez déjà un compte ?",
-    "checkEmail": "Vérifiez vos emails ✌️",
-    "continueWithEmail": "Continuer avec l'email",
-    "email": "Adresse email",
-    "login": "Se connecter",
-    "orContinueWith": "Ou continuer avec",
-    "password": "Mot de passe",
-    "sendingLink": "Envoie du lien en cours...",
-    "title": "S'inscrire",
-    "confirmPassword": "Confirmer le mot de passe",
-    "changePassword": "Modifier mon mot de passe",
-    "sendLink": "Envoyer le lien"
-  },
-  "logout": {
-    "action": "Déconnexion"
-  }
+	"login": {
+		"action": "Se connecter",
+		"dontHaveAccount": "Vous n'avez pas de compte ?",
+		"email": "Adresse email",
+		"orContinueWith": "Ou continuer avec",
+		"password": "Mot de passe",
+		"signUp": "S'inscrire",
+		"title": "Connexion",
+		"forgotPassword": "Mot de passe oublié"
+	},
+	"register": {
+		"action": "Créer un compte",
+		"alreadyHaveAnAccount": "Vous avez déjà un compte ?",
+		"checkEmail": "Vérifiez vos emails ✌️",
+		"continueWithEmail": "Continuer avec l'email",
+		"email": "Adresse email",
+		"login": "Se connecter",
+		"orContinueWith": "Ou continuer avec",
+		"password": "Mot de passe",
+		"sendingLink": "Envoie du lien en cours...",
+		"title": "S'inscrire",
+		"confirmPassword": "Confirmer le mot de passe",
+		"changePassword": "Modifier mon mot de passe",
+		"sendLink": "Envoyer le lien"
+	},
+	"logout": {
+		"action": "Déconnexion"
+	}
 }
diff --git a/public/locales/ru/auth.json b/public/locales/ru/auth.json
index c59dccc..9b9ef8f 100644
--- a/public/locales/ru/auth.json
+++ b/public/locales/ru/auth.json
@@ -1,30 +1,30 @@
 {
-  "login": {
-    "action": "Войти",
-    "dontHaveAccount": "Еще нет аккаунта?",
-    "email": "Электронная почта",
-    "orContinueWith": "ИЛИ",
-    "password": "Пароль",
-    "signUp": "Зарегистрироваться",
-    "title": "Войти",
-    "forgotPassword": "Забыли пароль"
-  },
-  "register": {
-    "action": "Зарегистрироваться",
-    "alreadyHaveAnAccount": "Уже есть аккаунт?",
-    "checkEmail": "Проверьте свою почту ✌️",
-    "continueWithEmail": "Войти через электронной почте",
-    "email": "Электронная почта",
-    "login": "Вход",
-    "orContinueWith": "ИЛИ",
-    "password": "Пароль",
-    "sendingLink": "Отправка ссылки по электронной почте в процессе...",
-    "title": "Зарегистрироваться",
-    "confirmPassword": "Подтвердите пароль",
-    "changePassword": "изменить пароль",
-    "sendLink": "Отправить ссылку"
-  },
-  "logout": {
-    "action": "Выйти"
-  }
+	"login": {
+		"action": "Войти",
+		"dontHaveAccount": "Еще нет аккаунта?",
+		"email": "Электронная почта",
+		"orContinueWith": "ИЛИ",
+		"password": "Пароль",
+		"signUp": "Зарегистрироваться",
+		"title": "Войти",
+		"forgotPassword": "Забыли пароль"
+	},
+	"register": {
+		"action": "Зарегистрироваться",
+		"alreadyHaveAnAccount": "Уже есть аккаунт?",
+		"checkEmail": "Проверьте свою почту ✌️",
+		"continueWithEmail": "Войти через электронной почте",
+		"email": "Электронная почта",
+		"login": "Вход",
+		"orContinueWith": "ИЛИ",
+		"password": "Пароль",
+		"sendingLink": "Отправка ссылки по электронной почте в процессе...",
+		"title": "Зарегистрироваться",
+		"confirmPassword": "Подтвердите пароль",
+		"changePassword": "изменить пароль",
+		"sendLink": "Отправить ссылку"
+	},
+	"logout": {
+		"action": "Выйти"
+	}
 }
diff --git a/remix.config.js b/remix.config.js
index 329bcab..a4f2404 100644
--- a/remix.config.js
+++ b/remix.config.js
@@ -2,8 +2,18 @@
  * @type {import('@remix-run/dev').AppConfig}
  */
 module.exports = {
-  ignoredRouteFiles: ["**/.*"],
-  future: {
-    unstable_tailwind: true
-  }
+	ignoredRouteFiles: ["**/.*"],
+	serverModuleFormat: "cjs",
+	future: {
+		v2_dev: true,
+		v2_errorBoundary: true,
+		v2_headers: true,
+		v2_meta: true,
+		v2_normalizeFormMethod: true,
+		v2_routeConvention: true,
+	},
+	tailwind: true,
+	postcss: true,
+	watchPaths: ["./tailwind.config.ts"],
+	serverPlatform: "node",
 };
diff --git a/remix.init/index.js b/remix.init/index.js
index 360c06e..028803a 100644
--- a/remix.init/index.js
+++ b/remix.init/index.js
@@ -7,103 +7,103 @@ const toml = require("@iarna/toml");
 const sort = require("sort-package-json");
 
 function escapeRegExp(string) {
-  // $& means the whole matched string
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	// $& means the whole matched string
+	return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
 function getRandomString(length) {
-  return crypto.randomBytes(length).toString("hex");
+	return crypto.randomBytes(length).toString("hex");
 }
 
 async function main({ rootDirectory, packageManager, isTypeScript }) {
-  console.log(`🚀  Making something cool with this template ...`);
-
-  if (!isTypeScript) {
-    throw new Error("😌  Sorry, this template only supports TypeScript");
-  }
-
-  const README_PATH = path.join(rootDirectory, "README.md");
-  const FLY_TOML_PATH = path.join(rootDirectory, "fly.toml");
-  const EXAMPLE_ENV_PATH = path.join(rootDirectory, ".env.example");
-  const ENV_PATH = path.join(rootDirectory, ".env");
-  const PACKAGE_JSON_PATH = path.join(rootDirectory, "package.json");
-  const STACK_GITHUB_ACTION = path.join(
-    rootDirectory,
-    ".github/workflows/for-this-stack-repo-only.yml"
-  );
-  const DOCKERFILE_PATH = path.join(rootDirectory, "Dockerfile");
-
-  const REPLACER = "supa-fly-stack-template";
-
-  const DIR_NAME = path.basename(rootDirectory);
-  const SUFFIX = getRandomString(2);
-  const APP_NAME = (DIR_NAME + "-" + SUFFIX)
-    // get rid of anything that's not allowed in an app name
-    .replace(/[^a-zA-Z0-9-_]/g, "-");
-
-  const [prodContent, readme, env, packageJson, dockerfile] = await Promise.all(
-    [
-      fs.readFile(FLY_TOML_PATH, "utf-8"),
-      fs.readFile(README_PATH, "utf-8"),
-      fs.readFile(EXAMPLE_ENV_PATH, "utf-8"),
-      fs.readFile(PACKAGE_JSON_PATH, "utf-8").then((s) => JSON.parse(s)),
-      fs.readFile(DOCKERFILE_PATH, "utf-8"),
-      fs.rm(STACK_GITHUB_ACTION),
-    ]
-  );
-
-  const newEnv = env.replace(
-    /^SESSION_SECRET=.*$/m,
-    `SESSION_SECRET="${getRandomString(16)}"`
-  );
-
-  const prodToml = toml.parse(prodContent);
-  prodToml.app = prodToml.app.replace(REPLACER, APP_NAME);
-
-  const newReadme = readme.replace(
-    new RegExp(escapeRegExp(REPLACER), "g"),
-    APP_NAME
-  );
-
-  const newPackageJson =
-    JSON.stringify(sort({ ...packageJson, name: APP_NAME }), null, 2) + "\n";
-
-  const lockfile = {
-    npm: "package-lock.json",
-    yarn: "yarn.lock",
-    pnpm: "pnpm-lock.yaml",
-  }[packageManager];
-
-  const newDockerfile = lockfile
-    ? dockerfile.replace(
-        new RegExp(escapeRegExp("ADD package.json"), "g"),
-        `ADD package.json ${lockfile}`
-      )
-    : dockerfile;
-
-  await Promise.all([
-    fs.writeFile(FLY_TOML_PATH, toml.stringify(prodToml)),
-    fs.writeFile(README_PATH, newReadme),
-    fs.writeFile(ENV_PATH, newEnv),
-    fs.writeFile(PACKAGE_JSON_PATH, newPackageJson),
-    fs.writeFile(DOCKERFILE_PATH, newDockerfile),
-    fs.copyFile(
-      path.join(rootDirectory, "remix.init", "gitignore"),
-      path.join(rootDirectory, ".gitignore")
-    ),
-  ]);
-
-  execSync("npm run format -- --loglevel warn", {
-    stdio: "inherit",
-    cwd: rootDirectory,
-  });
-
-  console.log(
-    `Setup is complete. You're now ready to rock and roll 🤘
+	console.log(`🚀  Making something cool with this template ...`);
+
+	if (!isTypeScript) {
+		throw new Error("😌  Sorry, this template only supports TypeScript");
+	}
+
+	const README_PATH = path.join(rootDirectory, "README.md");
+	const FLY_TOML_PATH = path.join(rootDirectory, "fly.toml");
+	const EXAMPLE_ENV_PATH = path.join(rootDirectory, ".env.example");
+	const ENV_PATH = path.join(rootDirectory, ".env");
+	const PACKAGE_JSON_PATH = path.join(rootDirectory, "package.json");
+	const STACK_GITHUB_ACTION = path.join(
+		rootDirectory,
+		".github/workflows/for-this-stack-repo-only.yml",
+	);
+	const DOCKERFILE_PATH = path.join(rootDirectory, "Dockerfile");
+
+	const REPLACER = "supa-fly-stack-template";
+
+	const DIR_NAME = path.basename(rootDirectory);
+	const SUFFIX = getRandomString(2);
+	const APP_NAME = (DIR_NAME + "-" + SUFFIX)
+		// get rid of anything that's not allowed in an app name
+		.replace(/[^a-zA-Z0-9-_]/g, "-");
+
+	const [prodContent, readme, env, packageJson, dockerfile] =
+		await Promise.all([
+			fs.readFile(FLY_TOML_PATH, "utf-8"),
+			fs.readFile(README_PATH, "utf-8"),
+			fs.readFile(EXAMPLE_ENV_PATH, "utf-8"),
+			fs.readFile(PACKAGE_JSON_PATH, "utf-8").then((s) => JSON.parse(s)),
+			fs.readFile(DOCKERFILE_PATH, "utf-8"),
+			fs.rm(STACK_GITHUB_ACTION),
+		]);
+
+	const newEnv = env.replace(
+		/^SESSION_SECRET=.*$/m,
+		`SESSION_SECRET="${getRandomString(16)}"`,
+	);
+
+	const prodToml = toml.parse(prodContent);
+	prodToml.app = prodToml.app.replace(REPLACER, APP_NAME);
+
+	const newReadme = readme.replace(
+		new RegExp(escapeRegExp(REPLACER), "g"),
+		APP_NAME,
+	);
+
+	const newPackageJson =
+		JSON.stringify(sort({ ...packageJson, name: APP_NAME }), null, 2) +
+		"\n";
+
+	const lockfile = {
+		npm: "package-lock.json",
+		yarn: "yarn.lock",
+		pnpm: "pnpm-lock.yaml",
+	}[packageManager];
+
+	const newDockerfile = lockfile
+		? dockerfile.replace(
+				new RegExp(escapeRegExp("ADD package.json"), "g"),
+				`ADD package.json ${lockfile}`,
+		  )
+		: dockerfile;
+
+	await Promise.all([
+		fs.writeFile(FLY_TOML_PATH, toml.stringify(prodToml)),
+		fs.writeFile(README_PATH, newReadme),
+		fs.writeFile(ENV_PATH, newEnv),
+		fs.writeFile(PACKAGE_JSON_PATH, newPackageJson),
+		fs.writeFile(DOCKERFILE_PATH, newDockerfile),
+		fs.copyFile(
+			path.join(rootDirectory, "remix.init", "gitignore"),
+			path.join(rootDirectory, ".gitignore"),
+		),
+	]);
+
+	execSync("npm run format -- --loglevel warn", {
+		stdio: "inherit",
+		cwd: rootDirectory,
+	});
+
+	console.log(
+		`Setup is complete. You're now ready to rock and roll 🤘
 
 Start development with \`npm run dev\`
-`.trim()
-  );
+`.trim(),
+	);
 }
 
 module.exports = main;
diff --git a/remix.init/package.json b/remix.init/package.json
index 933cc1c..b3404be 100644
--- a/remix.init/package.json
+++ b/remix.init/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "remix.init",
-  "private": true,
-  "main": "index.js",
-  "license": "MIT",
-  "dependencies": {
-    "@iarna/toml": "^2.2.5",
-    "sort-package-json": "^1.57.0"
-  }
+	"name": "remix.init",
+	"private": true,
+	"main": "index.js",
+	"license": "MIT",
+	"dependencies": {
+		"@iarna/toml": "^2.2.5",
+		"sort-package-json": "^1.57.0"
+	}
 }
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index cc0b78c..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-module.exports = {
-  content: ["./app/**/*.{ts,tsx,jsx,js}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    require("@tailwindcss/typography"),
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/aspect-ratio"),
-    require("tailwind-scrollbar"),
-  ],
-};
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..ca3c62a
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,13 @@
+import type { Config } from "tailwindcss";
+
+export default {
+	content: ["./app/**/*.{ts,tsx,jsx,js}"],
+	theme: {
+		extend: {},
+	},
+	plugins: [
+		require("@tailwindcss/typography"),
+		require("@tailwindcss/forms"),
+		require("tailwind-scrollbar"),
+	],
+} satisfies Config;
diff --git a/test/setup-test-env.ts b/test/setup-test-env.ts
index 262a737..17186c3 100644
--- a/test/setup-test-env.ts
+++ b/test/setup-test-env.ts
@@ -1,5 +1,5 @@
 import { installGlobals } from "@remix-run/node";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom/vitest";
 import { server } from "mocks";
 
 process.env.SESSION_SECRET = "super-duper-s3cret";
@@ -8,13 +8,11 @@ process.env.SUPABASE_ANON_PUBLIC = "{ANON_PUBLIC}";
 process.env.SUPABASE_URL = "https://supabase-project.supabase.co";
 process.env.SERVER_URL = "http://localhost:3000";
 
-
-if(typeof window !== 'undefined'){
-  // @ts-expect-error missing vitest type
-  window.happyDOM.settings.enableFileSystemHttpRequests = true;
+if (typeof window !== "undefined") {
+	// @ts-expect-error missing vitest type
+	window.happyDOM.settings.enableFileSystemHttpRequests = true;
 }
 
-
 installGlobals();
 
 beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
diff --git a/tsconfig.json b/tsconfig.json
index 0c903a3..c39a8b2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,25 @@
 {
-  "exclude": ["./cypress", "./cypress.config.ts"],
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
-  "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
-    "types": ["vitest/globals"],
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "module": "CommonJS",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "target": "ES2019",
-    "strict": true,
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./app/*"]
-    },
-    "skipLibCheck": true,
-    // Remix takes care of building everything in `remix build`.
-    "noEmit": true
-  }
+	"exclude": ["./cypress", "./cypress.config.ts"],
+	"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+	"compilerOptions": {
+		"lib": ["DOM", "DOM.Iterable", "ES2019"],
+		"types": ["vitest/globals"],
+		"isolatedModules": true,
+		"esModuleInterop": true,
+		"jsx": "react-jsx",
+		"module": "CommonJS",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"target": "ES2019",
+		"strict": true,
+		"allowJs": true,
+		"forceConsistentCasingInFileNames": true,
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["./app/*"]
+		},
+		"skipLibCheck": true,
+		// Remix takes care of building everything in `remix build`.
+		"noEmit": true
+	}
 }
diff --git a/vitest.config.ts b/vitest.config.ts
index a2e565f..3cb46a5 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,22 +1,21 @@
 /// <reference types="vitest" />
-/// <reference types="vite/client" />
 
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
-  test: {
-    globals: true,
-    environment: "happy-dom",
-    setupFiles: ["./test/setup-test-env.ts"],
-    includeSource: ["app/**/*.{js,ts}"],
-    exclude: ["node_modules", "mocks/**/*.{js,ts}"],
-    coverage: {
-      reporter: ["text", "json", "html"],
-      include: ["app/**/*.{js,ts}"],
-      all: true,
-    },
-  },
+	plugins: [react(), tsconfigPaths()],
+	test: {
+		globals: true,
+		environment: "happy-dom",
+		setupFiles: ["./test/setup-test-env.ts"],
+		includeSource: ["app/**/*.{js,ts}"],
+		exclude: ["node_modules", "mocks/**/*.{js,ts}"],
+		coverage: {
+			reporter: ["text", "json", "html"],
+			include: ["app/**/*.{js,ts}"],
+			all: true,
+		},
+	},
 });