diff --git a/Website/.env.development b/Website/.env.development
index da987ec9d..a1ea5e64d 100644
--- a/Website/.env.development
+++ b/Website/.env.development
@@ -1,3 +1,4 @@
+PUBLIC_ENABLE_MSW=true
 PUBLIC_DAWNSHARD_URL=http://localhost:3001/
 PUBLIC_DAWNSHARD_API_URL=http://localhost:3001/api/ # use Vite proxy
 DAWNSHARD_API_URL_SSR=http://localhost:5000
diff --git a/Website/package.json b/Website/package.json
index 5b2fc4916..c8c049084 100644
--- a/Website/package.json
+++ b/Website/package.json
@@ -8,6 +8,7 @@
     "dev:test": "vite dev --mode test",
     "api": "dotnet run --project ../DragaliaAPI/DragaliaAPI",
     "build": "vite build",
+    "build:dev": "vite build --mode development",
     "preview": "vite preview",
     "test": "playwright test",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
diff --git a/Website/playwright.config.ts b/Website/playwright.config.ts
index 9a37a1a46..fa701ec03 100644
--- a/Website/playwright.config.ts
+++ b/Website/playwright.config.ts
@@ -1,24 +1,22 @@
 import { devices, type PlaywrightTestConfig } from '@playwright/test';
 
-const url = process.env.CI ? 'http://localhost:4173' : 'http://localhost:3001';
-
 const config: PlaywrightTestConfig = {
   webServer: {
-    command: 'pnpm run build && pnpm run preview -- --mode dev',
-    url,
+    command: 'pnpm run build:dev && pnpm run preview',
+    url: 'http://localhost:3001',
     stdout: 'pipe',
     reuseExistingServer: !process.env.CI,
     timeout: 120000
   },
   use: {
-    baseURL: url
+    baseURL: 'http://localhost:3001'
   },
   updateSnapshots: process.env.UPDATE_SNAPSHOTS ? 'all' : 'missing',
   ignoreSnapshots: !process.env.CI,
   testDir: 'tests',
   snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
   testMatch: /(.+\.)?(test|spec)\.[jt]s/,
-  timeout: 600000,
+  timeout: 60000,
   projects: [
     {
       name: 'chromium',
diff --git a/Website/src/hooks.client.ts b/Website/src/hooks.client.ts
index e3f04d061..57e1bde7c 100644
--- a/Website/src/hooks.client.ts
+++ b/Website/src/hooks.client.ts
@@ -1,6 +1,6 @@
-import { dev } from '$app/environment';
+import { PUBLIC_ENABLE_MSW } from '$env/static/public';
 
-if (dev) {
+if (PUBLIC_ENABLE_MSW === 'true') {
   const { worker } = await import('./mocks/browser');
 
   await worker.start({
diff --git a/Website/src/hooks.server.ts b/Website/src/hooks.server.ts
index f549441f8..89225d2ff 100644
--- a/Website/src/hooks.server.ts
+++ b/Website/src/hooks.server.ts
@@ -1,15 +1,15 @@
 import type { Handle, HandleFetch } from '@sveltejs/kit';
 
-import { dev } from '$app/environment';
 import { DAWNSHARD_API_URL_SSR } from '$env/static/private';
 import { PUBLIC_DAWNSHARD_API_URL } from '$env/static/public';
+import { PUBLIC_ENABLE_MSW } from '$env/static/public';
 import Cookies from '$lib/auth/cookies.ts';
 import getJwtMetadata from '$lib/auth/jwt.ts';
 
 const publicApiUrl = new URL(PUBLIC_DAWNSHARD_API_URL);
 const internalApiUrl = new URL(DAWNSHARD_API_URL_SSR);
 
-if (dev) {
+if (PUBLIC_ENABLE_MSW === 'true') {
   const { server } = await import('./mocks/node');
   server.listen();
 }
diff --git a/Website/src/routes/(main)/header.svelte b/Website/src/routes/(main)/header.svelte
index c23b16bfc..a30408b24 100644
--- a/Website/src/routes/(main)/header.svelte
+++ b/Website/src/routes/(main)/header.svelte
@@ -10,6 +10,7 @@
   import HeaderContents from './headerContents.svelte';
 
   let enhance = false;
+  let drawerOpen = false;
 
   export let hasValidJwt: boolean;
 
@@ -19,13 +20,15 @@
 </script>
 
 {#if enhance}
-  <Drawer.Root direction="left">
-    <header id="header" class="z-50 gap-1 bg-background px-1 md:gap-2 md:px-3">
-      <Drawer.Trigger class="md:hidden">
-        <Button variant="ghost" class="md:hidden">
-          <Menu />
-        </Button>
-      </Drawer.Trigger>
+  <Drawer.Root direction="left" bind:open={drawerOpen}>
+    <header id="header" class="top-0 z-50 gap-1 bg-background px-1 md:gap-2 md:px-3">
+      <Button
+        variant="ghost"
+        class="md:hidden"
+        aria-label="Open navigation"
+        on:click={() => (drawerOpen = true)}>
+        <Menu class="h-[1.2rem] w-[1.2rem]" />
+      </Button>
       <HeaderContents {hasValidJwt} />
 
       <Drawer.Portal class="md:hidden">
@@ -33,12 +36,10 @@
           id="drawer-content"
           class="fixed bottom-0 left-0 top-0 mt-0 w-[75%] bg-background pl-6 pr-2 pt-2">
           <div id="my-content" class="flex flex-col">
-            <Drawer.Close class="self-end">
-              <Button variant="ghost">
-                Close <Close class="ml-2 mt-0.5 h-5 w-5" />
-              </Button>
-            </Drawer.Close>
-            <Routes {hasValidJwt} />
+            <Button variant="ghost" class="w-[7rem] self-end" on:click={() => (drawerOpen = false)}>
+              Close <Close class="ml-2 mt-0.5 h-5 w-5" />
+            </Button>
+            <Routes {hasValidJwt} on:navigate={() => (drawerOpen = false)} />
           </div>
         </Drawer.Content>
       </Drawer.Portal>
diff --git a/Website/src/routes/(main)/routes.svelte b/Website/src/routes/(main)/routes.svelte
index 2d00368d3..a88d6818a 100644
--- a/Website/src/routes/(main)/routes.svelte
+++ b/Website/src/routes/(main)/routes.svelte
@@ -1,17 +1,30 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
   import { Button } from '$shadcn/components/ui/button';
   import { cn } from '$shadcn/utils.js.ts';
 
   import { routeGroups } from './routes.ts';
 
   export let hasValidJwt: boolean;
+
+  const dispatch = createEventDispatcher();
+
+  const onClick = () => {
+    dispatch('navigate');
+  };
 </script>
 
 {#each routeGroups as routeGroup}
   {#if !routeGroup.requireAuth || (routeGroup.requireAuth && hasValidJwt)}
     <h2 class="text-m scroll-m-20 font-semibold tracking-tight">{routeGroup.title}</h2>
     {#each routeGroup.routes as route}
-      <Button href={route.href} variant="ghost" size="sm" class={cn('justify-start', 'w-[90%]')}>
+      <Button
+        href={route.href}
+        variant="ghost"
+        size="sm"
+        class={cn('justify-start', 'w-[90%]')}
+        on:click={onClick}>
         <svelte:component this={route.icon} class="mr-2 size-4" aria-hidden="true" />
         {route.title}
       </Button>
diff --git a/Website/tests/__screenshots__/home.test.ts/displays-correctly-1.png b/Website/tests/__screenshots__/home.test.ts/displays-correctly-1.png
new file mode 100644
index 000000000..2e757941a
--- /dev/null
+++ b/Website/tests/__screenshots__/home.test.ts/displays-correctly-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:74a1d6f16f2b5f117340fec9956e3358d8713c7f8ad5c8661bca69fbabf5e523
+size 891429
diff --git a/Website/tests/__screenshots__/home.test.ts/displays-correctly-on-mobile-1.png b/Website/tests/__screenshots__/home.test.ts/displays-correctly-on-mobile-1.png
new file mode 100644
index 000000000..8beb99d8f
--- /dev/null
+++ b/Website/tests/__screenshots__/home.test.ts/displays-correctly-on-mobile-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:49d0324da237b156eabcbbe67583ef6e2a5d39a932e5febfa274b25165b20b6d
+size 159048
diff --git a/Website/tests/__screenshots__/news.test.ts/displays-correctly-1.png b/Website/tests/__screenshots__/news.test.ts/displays-correctly-1.png
new file mode 100644
index 000000000..bc7e560bb
--- /dev/null
+++ b/Website/tests/__screenshots__/news.test.ts/displays-correctly-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e31ee669a4d8d5242f8c31c48ea193f43898ee8ffd4d6df20826aae027464c2e
+size 191851
diff --git a/Website/tests/__screenshots__/news.test.ts/displays-correctly-on-mobile-1.png b/Website/tests/__screenshots__/news.test.ts/displays-correctly-on-mobile-1.png
new file mode 100644
index 000000000..3e66a9533
--- /dev/null
+++ b/Website/tests/__screenshots__/news.test.ts/displays-correctly-on-mobile-1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f6199e376502dad493d0cd063f95c3339aef1d9ff79468669abcb53a09af1832
+size 155490
diff --git a/Website/tests/home.test.ts b/Website/tests/home.test.ts
index 09380ff96..c23d192dd 100644
--- a/Website/tests/home.test.ts
+++ b/Website/tests/home.test.ts
@@ -1,6 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { devices, expect, test } from '@playwright/test';
 
-test('index page has expected h1', async ({ page }) => {
+test('displays correctly', async ({ page }) => {
   await page.goto('/');
 
   await expect(page.getByRole('heading', { name: 'Dawnshard', exact: true })).toBeVisible();
@@ -8,3 +8,14 @@ test('index page has expected h1', async ({ page }) => {
 
   await expect(page).toHaveScreenshot({ fullPage: true });
 });
+
+test('displays correctly on mobile', async ({ page }) => {
+  await page.setViewportSize(devices['iPhone 13'].viewport);
+
+  await page.goto('/');
+
+  await expect(page.getByRole('heading', { name: 'Dawnshard', exact: true })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Welcome to Dawnshard' })).toBeVisible();
+
+  await expect(page).toHaveScreenshot();
+});
diff --git a/Website/tests/news.test.ts b/Website/tests/news.test.ts
new file mode 100644
index 000000000..53889e4e8
--- /dev/null
+++ b/Website/tests/news.test.ts
@@ -0,0 +1,41 @@
+import { devices, expect, test } from '@playwright/test';
+
+test('displays correctly', async ({ page }) => {
+  await page.goto('/');
+
+  const newsLink = page.getByRole('link', { name: 'News' });
+  await expect(newsLink).toBeVisible();
+  await newsLink.click();
+
+  await expect(page.getByRole('heading', { name: 'News' })).toBeVisible();
+
+  await expect(page).toHaveScreenshot();
+});
+
+test('displays correctly on mobile', async ({ page }) => {
+  await page.setViewportSize(devices['iPhone 13'].viewport);
+
+  await page.goto('/');
+
+  await page.getByRole('button', { name: 'Open navigation' }).click();
+  await page.getByRole('link', { name: 'News' }).click();
+
+  await expect(page.getByRole('heading', { name: 'News' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Game updated!' })).toBeVisible();
+
+  await expect(page).toHaveScreenshot();
+});
+
+test('change page', async ({ page }) => {
+  await page.goto('/news/1');
+
+  await page.getByRole('link', { name: 'Next' }).click();
+
+  await expect(page.getByRole('heading', { name: 'News' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Paging works' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Previous' }).click();
+
+  await expect(page.getByRole('heading', { name: 'News' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Game updated!' })).toBeVisible();
+});
diff --git a/Website/vite.config.ts b/Website/vite.config.ts
index cd4bd36c3..b64b6177e 100644
--- a/Website/vite.config.ts
+++ b/Website/vite.config.ts
@@ -3,7 +3,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import checker from 'vite-plugin-checker';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [
     sveltekit(),
     enhancedImages(),
@@ -15,5 +15,12 @@ export default defineConfig({
   ],
   server: {
     port: 3001
+  },
+  build: {
+    // Hack to get top-level await support required by Mock Service Worker for Playwright
+    target: mode === 'development' ? 'es2022' : 'modules'
+  },
+  preview: {
+    port: 3001
   }
-});
+}));