diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 8d2235c6..3a3526e4 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -23,4 +23,33 @@ jobs:
           cache: true
       - run: echo -e "TTS_SUBSCRIPTION_KEY=${{ secrets.TTS_SUBSCRIPTION_KEY }}\nRESEND_API_KEY=${{ secrets.RESEND_API_KEY }}" > .env
       - run: flutter build appbundle --debug --dart-define-from-file=.env
-      - run: flutter build ios --release --no-codesign --dart-define-from-file=.env
\ No newline at end of file
+      - run: flutter build ios --release --no-codesign --dart-define-from-file=.env
+
+  website-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run build
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'build/'
+
+  website-deploy:
+    needs: website-build
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/website/src/routes/+error.svelte b/website/src/routes/+error.svelte
new file mode 100644
index 00000000..bc44d67e
--- /dev/null
+++ b/website/src/routes/+error.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { base } from '$app/paths';
+	import { page } from '$app/stores';
+</script>
+
+<svelte:head>
+	<title>{$page.error?.message} | Only Bible App</title>
+</svelte:head>
+
+<main id="content" class="prose">
+	<div class="max-w-[50rem] mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="flex flex-col">
+			<h1 class="text-4xl font-bold">{$page.status} - {$page.error?.message}</h1>
+			<p class="my-4">
+				{#if $page.status === 404}
+					The page you were looking for doesn't exist.
+				{:else}
+					Something went wrong. Please try again later.
+				{/if}
+			</p>
+			<a href="{base}/" class="underline mt-4"> Go back home </a>
+		</div>
+	</div>
+</main>
diff --git a/website/svelte.config.js b/website/svelte.config.js
index 2ca5922a..fb8a96e2 100644
--- a/website/svelte.config.js
+++ b/website/svelte.config.js
@@ -2,12 +2,12 @@ import adapter from '@sveltejs/adapter-auto';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
-	}
+  kit: {
+    adapter: adapter({
+      strict: true,
+      fallback: '404.html'
+    })
+  }
 };
 
 export default config;