diff --git a/.github/workflows/development.yml b/.github/workflows/ci.yml
similarity index 94%
rename from .github/workflows/development.yml
rename to .github/workflows/ci.yml
index 9928e56..a2ae3b6 100644
--- a/.github/workflows/development.yml
+++ b/.github/workflows/ci.yml
@@ -19,9 +19,9 @@ jobs:
       - name: 🎭 Install Playwright
         run: npx playwright install --with-deps
       - name: 📦 Build the worker
-        run: npm run build
+        run: npx remix vite:build
       - name: 💣 Run some tests
-        run: npm run test
+        run: npx playwright test
 
   lint:
     name: ⬣ Linting
diff --git a/.gitignore b/.gitignore
index c731f12..c2a97d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,5 +8,9 @@ node_modules
 # Cloudflare
 .wrangler
 
+# Playwright
+/test-results
+/playwright-report
+
 # Remix stacks
 /package-lock.json
\ No newline at end of file
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 36af219..2312dc5 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged
diff --git a/app/root.tsx b/app/root.tsx
index 7118f7a..2904861 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -95,7 +95,9 @@ function Layout({
 	return (
 		<div className="container mx-auto">
 			<div className="flex flex-col-reverse lg:flex-row">
-				<section className="flex-1 relative border-t lg:border-t-0">
+				<section
+					className={`flex-1 relative ${children ? 'border-t lg:border-t-0' : ''}`.trim()}
+				>
 					<div className="sticky top-0">
 						<div className="flex flex-col lg:min-h-screen lg:py-10 px-5 py-5">
 							<header className="py-4">
@@ -115,7 +117,7 @@ function Layout({
 									</a>
 								) : null}
 							</div>
-							<footer>
+							<footer className="pt-8">
 								Wanna know more about Remix? Check out{' '}
 								<a className="underline" href="https://remix.guide">
 									Remix Guide
diff --git a/package.json b/package.json
index 91d0dbc..e8c9c6f 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,17 @@
 {
 	"private": true,
-	"name": "remix-worker-template",
+	"name": "remix-cloudflare-template",
+	"type": "module",
 	"description": "All-in-one remix starter template for Cloudflare Pages",
-	"module": "./dist/worker.mjs",
 	"scripts": {
 		"dev": "remix vite:dev",
-		"test": "NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" playwright test",
+		"test": "playwright test --ui",
 		"start": "wrangler pages dev ./build/client",
 		"build": "remix vite:build",
-		"cleanup": "rimraf .cache ./build ./public/build",
+		"cleanup": "rimraf .cache ./build",
 		"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
 		"typecheck": "tsc",
-		"prepare": "husky install"
+		"prepare": "husky"
 	},
 	"dependencies": {
 		"@markdoc/markdoc": "^0.4.0",
@@ -39,6 +39,7 @@
 		"husky": "^9.0.10",
 		"lint-staged": "^15.2.2",
 		"miniflare": "^3.20240129.1",
+		"msw": "^2.1.7",
 		"postcss": "^8.4.35",
 		"prettier": "^3.2.5",
 		"rimraf": "^5.0.5",
diff --git a/playwright.config.ts b/playwright.config.ts
index a74c062..0026eb3 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,24 +1,28 @@
-import { type PlaywrightTestConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 
-const config: PlaywrightTestConfig = {
+const PORT = process.env.PORT || '5173';
+
+export default defineConfig({
+	testDir: './tests/e2e',
+	timeout: 15 * 1000,
+	expect: {
+		timeout: 5 * 1000,
+	},
 	forbidOnly: !!process.env.CI,
 	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: 'html',
 	use: {
+		baseURL: `http://localhost:${PORT}`,
 		trace: 'on-first-retry',
 	},
+
 	projects: [
 		{
 			name: 'chromium',
-			use: { ...devices['Desktop Chrome'] },
-		},
-		{
-			name: 'firefox',
-			use: { ...devices['Desktop Firefox'] },
-		},
-		{
-			name: 'webkit',
-			use: { ...devices['Desktop Safari'] },
+			use: {
+				...devices['Desktop Chrome'],
+			},
 		},
 	],
-};
-export default config;
+});
diff --git a/postcss.config.js b/postcss.config.js
index e873f1a..7b75c83 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	plugins: {
 		tailwindcss: {},
 		autoprefixer: {},
diff --git a/tailwind.config.js b/tailwind.config.js
index 91f1831..3c4ff11 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,7 @@
-module.exports = {
+import typeography from '@tailwindcss/typography';
+
+export default {
 	content: ['./app/**/*.tsx', './app/**/*.ts'],
 	theme: {},
-	plugins: [require('@tailwindcss/typography')],
+	plugins: [typeography],
 };
diff --git a/tests/e2e/index.test.ts b/tests/e2e/index.test.ts
new file mode 100644
index 0000000..420c0b6
--- /dev/null
+++ b/tests/e2e/index.test.ts
@@ -0,0 +1,65 @@
+import { http } from 'msw';
+import { test, expect } from '../playwright';
+
+/**
+ * You can interact with browser through the page instance
+ */
+test('shows the package name', async ({ page }) => {
+	await page.goto('/');
+
+	const title = page.getByRole('heading', {
+		name: 'remix-cloudflare-template',
+		level: 2,
+	});
+
+	await expect(title).toBeVisible();
+});
+
+/**
+ * You can interact with the wrangler binding similar to the remix app
+ */
+test('cache the README in KV', async ({ page, wrangler }) => {
+	await wrangler.bindings.cache.put('github/README.md', '# cached-readme');
+	await page.goto('/');
+
+	const title = page.getByRole('heading', {
+		name: 'cached-readme',
+		level: 1,
+	});
+
+	await expect(title).toBeVisible();
+});
+
+/**
+ * You can also mock the requests with MSW
+ */
+test('fetch README from GitHub if not cached', async ({
+	page,
+	wrangler,
+	msw,
+}) => {
+	// Mock request
+	msw.use(
+		http.get(
+			'https://api.github.com/repos/edmundhung/remix-cloudflare-template/contents/README.md',
+			() => {
+				return Response.json({
+					type: 'file',
+					content: btoa('# testing'),
+				});
+			},
+		),
+	);
+
+	// Clear cache
+	await wrangler.bindings.cache.delete('github/README.md');
+
+	await page.goto('/');
+
+	const title = page.getByRole('heading', {
+		name: 'testing',
+		level: 1,
+	});
+
+	await expect(title).toBeVisible();
+});
diff --git a/tests/index.spec.ts b/tests/index.spec.ts
deleted file mode 100644
index 30e90a3..0000000
--- a/tests/index.spec.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { test, expect } from './setup';
-
-test.beforeEach(async ({ page }) => {
-	await page.goto('/');
-});
-
-/**
- * You can interact with the page or browser through the page / queries
- */
-test('if the page shows the package name', async ({ page }) => {
-	const title = page.getByText('remix-worker-template', {
-		exact: false,
-	});
-
-	await expect(title).toBeVisible();
-});
-
-/**
- * You can interact with the miniflare instance as well
- * Like reading KV values saved with `mf.getKVNamespace('...')`
- * Or even interacting with the DO by `mf.getDurableObjectNamespace(...)`
- */
-test('if the binding are set properly', async ({ mf }) => {
-	const bindings = await mf.getBindings();
-
-	expect(bindings).toEqual({
-		__STATIC_CONTENT: expect.anything(),
-		__STATIC_CONTENT_MANIFEST: expect.anything(),
-	});
-});
-
-/**
- * You can also mock the requests sent out from the workers
- * @see https://github.com/nodejs/undici/blob/main/docs/api/MockAgent.md
- */
-test('if the request is sent', async ({ mockAgent }) => {
-	const client = mockAgent.get('http://example.com');
-
-	client
-		.intercept({
-			method: 'GET',
-			path: '/hello-world',
-		})
-		.reply(200, {
-			foo: 'bar',
-		});
-
-	// expect() something happens
-});
diff --git a/tests/playwright.ts b/tests/playwright.ts
new file mode 100644
index 0000000..20a432e
--- /dev/null
+++ b/tests/playwright.ts
@@ -0,0 +1,81 @@
+import { test as baseTest, expect as baseExpect } from '@playwright/test';
+import type { Env } from 'env';
+import { type ViteDevServer, createServer } from 'vite';
+import { type SetupServer, setupServer } from 'msw/node';
+import { type BindingsProxy, getBindingsProxy } from 'wrangler';
+
+interface TestFixtures {}
+
+interface WorkerFixtures {
+	port: number;
+	wrangler: BindingsProxy<Env>;
+	server: ViteDevServer;
+	msw: SetupServer;
+}
+
+export const expect = baseExpect.extend({});
+
+export const test = baseTest.extend<TestFixtures, WorkerFixtures>({
+	// Assign a unique "port" for each worker process
+	port: [
+		// eslint-disable-next-line no-empty-pattern
+		async ({}, use, workerInfo) => {
+			await use(3515 + workerInfo.workerIndex);
+		},
+		{ scope: 'worker' },
+	],
+
+	// Ensure visits works with relative path
+	baseURL: ({ port }, use) => {
+		use(`http://localhost:${port}`);
+	},
+
+	// Start a Vite dev server for each worker
+	// This allows MSW to intercept requests properly
+	server: [
+		async ({ port }, use) => {
+			const server = await createServer({
+				configFile: './vite.config.ts',
+			});
+
+			await server.listen(port);
+
+			await use(server);
+
+			await server.close();
+		},
+		{ scope: 'worker', auto: true },
+	],
+
+	msw: [
+		// eslint-disable-next-line no-empty-pattern
+		async ({}, use) => {
+			const server = setupServer();
+
+			server.listen();
+
+			await use(server);
+
+			server.close();
+		},
+		{ scope: 'worker', auto: true },
+	],
+
+	// To access wrangler bindings similar to Remix / Vite
+	wrangler: [
+		// eslint-disable-next-line no-empty-pattern
+		async ({}, use) => {
+			const bindings = await getBindingsProxy<Env>();
+
+			// To access bindings in the tests.
+			await use(bindings);
+
+			await bindings.dispose();
+		},
+		{ scope: 'worker', auto: true },
+	],
+});
+
+test.beforeEach(({ msw }) => {
+	msw.resetHandlers();
+});
diff --git a/tests/setup.ts b/tests/setup.ts
deleted file mode 100644
index e0dd087..0000000
--- a/tests/setup.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { test as base, expect } from '@playwright/test';
-import { Miniflare } from 'miniflare';
-import { MockAgent, setGlobalDispatcher } from 'undici';
-import packageJson from '../package.json';
-
-interface TestFixtures {
-	mockAgent: MockAgent;
-}
-
-interface WorkerFixtures {
-	mf: Miniflare;
-	port: number;
-}
-
-export { expect };
-
-export const test = base.extend<TestFixtures, WorkerFixtures>({
-	// Assign a unique "port" for each worker process
-	port: [
-		// eslint-disable-next-line no-empty-pattern
-		async ({}, use, workerInfo) => {
-			await use(3001 + workerInfo.workerIndex);
-		},
-		{ scope: 'worker' },
-	],
-
-	// Ensure visits works with relative path
-	baseURL: ({ port }, use) => {
-		use(`http://localhost:${port}`);
-	},
-
-	// Setup mock client for requests initiated by the Worker
-	mockAgent:
-		// eslint-disable-next-line no-empty-pattern
-		async ({}, use) => {
-			const mockAgent = new MockAgent();
-
-			// Optional: This makes all the request fails if no matching mock is found
-			// mockAgent.disableNetConnect();
-
-			setGlobalDispatcher(mockAgent);
-
-			await use(mockAgent);
-		},
-
-	// Miniflare instance
-	mf: [
-		async ({ port }, use) => {
-			const mf = new Miniflare({
-				scriptPath: packageJson.module,
-				modules: true,
-				wranglerConfigPath: true,
-				port,
-			});
-
-			// Start the server.
-			let server = await mf.startServer();
-
-			// Use the server in the tests.
-			await use(mf);
-
-			// Cleanup.
-			await new Promise<void>((resolve, reject) => {
-				server.close((error) => (error ? reject(error) : resolve()));
-			});
-		},
-		{ scope: 'worker', auto: true },
-	],
-});
diff --git a/wrangler.toml b/wrangler.toml
index 2ebd589..01f7671 100644
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -1,4 +1,4 @@
 name = "remix-cloudflare-template"
 kv_namespaces = [
-  { binding = "cache", id = "7bd353e1660544f497319275f6e241fa" }
+  { binding = "cache", id = "cache" }
 ]
\ No newline at end of file