diff --git a/.gitignore b/.gitignore
index 43345b6..5fd72b9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,7 @@ logs
 .env
 .env.*
 !.env.example
+
+# Playwright
+test-results/
+playwright-report/
diff --git a/i18n.config.ts b/i18n.config.ts
index c8de7e7..0e211b3 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -13,6 +13,8 @@ export default defineI18nConfig(() => ({
       PAUSE: "PAUSE",
       Move: "Move",
       Continue: "Continue",
+      "Back to menu": "Back to menu",
+      "Puzzle Complete!": "Puzzle Complete!",
     },
   },
 }));
diff --git a/modules/game/components/FinishModal.vue b/modules/game/components/FinishModal.vue
index 7cb615c..1527ba2 100644
--- a/modules/game/components/FinishModal.vue
+++ b/modules/game/components/FinishModal.vue
@@ -32,7 +32,7 @@ const submitHandler = () => {
   >
     <template #content>
       <div class="h-full flex flex-col items-center justify-center">
-        <div class="text-7xl mb-6">Pause</div>
+        <div class="text-7xl mb-6">{{ $t("Puzzle Complete!") }}</div>
         <div class="mt-4 mb-6">
           <div class="flex justify-between w-[200px]">
             <h2 class="font-semibold">Time</h2>
diff --git a/modules/game/composables/useEventGame.ts b/modules/game/composables/useEventGame.ts
index db6d8b9..ea8d3b2 100644
--- a/modules/game/composables/useEventGame.ts
+++ b/modules/game/composables/useEventGame.ts
@@ -4,7 +4,6 @@ import type { TODO } from "~core/types";
 export interface Options {
   openModal: () => void;
 }
-console.log('ss')
 
 export async function useEventGame(
   props: GameProps,
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 247434f..09e4d70 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: "2024-11-10",
+  compatibilityDate: "2025-06-07",
   app: {
     head: {
       title: "Perplex Image",
@@ -42,5 +42,4 @@ export default defineNuxtConfig({
     // options here
   },
 
-  compatibilityDate: "2025-06-07"
 });
\ No newline at end of file
diff --git a/package.json b/package.json
index a50fb7f..3d2ac6d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,9 @@
     "preview": "nuxt preview",
     "start": "nuxt start",
     "test": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
     "lint-staged": "lint-staged",
     "prepare": "husky"
   },
@@ -23,6 +26,7 @@
     "@nuxt/eslint": "^0.6.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@nuxtjs/tailwindcss": "^6.2.0",
+    "@playwright/test": "^1.58.2",
     "@typescript-eslint/eslint-plugin": "^8.12.2",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-vue": "^4.0.0",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..6ebc6e4
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: "list",
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+    actionTimeout: 10_000,
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    command: "pnpm dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 75557b7..cf6de14 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,9 @@ importers:
       '@nuxtjs/tailwindcss':
         specifier: ^6.2.0
         version: 6.12.2(magicast@0.3.5)(rollup@4.24.3)
+      '@playwright/test':
+        specifier: ^1.58.2
+        version: 1.58.2
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.12.2
         version: 8.12.2(@typescript-eslint/parser@5.62.0(eslint@9.14.0(jiti@2.4.0))(typescript@4.9.5))(eslint@9.14.0(jiti@2.4.0))(typescript@4.9.5)
@@ -1235,6 +1238,11 @@ packages:
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@playwright/test@1.58.2':
+    resolution: {integrity: sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
@@ -3074,6 +3082,11 @@ packages:
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -4251,6 +4264,16 @@ packages:
   pkg-types@1.2.1:
     resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
 
+  playwright-core@1.58.2:
+    resolution: {integrity: sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.58.2:
+    resolution: {integrity: sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -6899,6 +6922,10 @@ snapshots:
 
   '@pkgr/core@0.1.1': {}
 
+  '@playwright/test@1.58.2':
+    dependencies:
+      playwright: 1.58.2
+
   '@polka/url@1.0.0-next.28': {}
 
   '@redocly/ajv@8.11.2':
@@ -9162,6 +9189,9 @@ snapshots:
 
   fs.realpath@1.0.0: {}
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -10546,6 +10576,14 @@ snapshots:
       mlly: 1.7.2
       pathe: 1.1.2
 
+  playwright-core@1.58.2: {}
+
+  playwright@1.58.2:
+    dependencies:
+      playwright-core: 1.58.2
+    optionalDependencies:
+      fsevents: 2.3.2
+
   pluralize@8.0.0: {}
 
   portfinder@1.0.32:
diff --git a/tests/e2e/advanced.spec.ts b/tests/e2e/advanced.spec.ts
new file mode 100644
index 0000000..05d9f8b
--- /dev/null
+++ b/tests/e2e/advanced.spec.ts
@@ -0,0 +1,92 @@
+import { test, expect, mockPhoto, mockApiRoutes } from "./fixtures";
+
+test.describe("Game page – layout", () => {
+  test("displays puzzle pieces", async ({ gamePage }) => {
+    const pieces = gamePage.locator("[draggable='true']");
+    await expect(pieces.first()).toBeVisible();
+  });
+
+  test("displays the correct number of pieces for 9x13 level", async ({
+    gamePage,
+  }) => {
+    // mockPhoto: height=800, width=1200 → cols=9, rows=Math.round(800/1200*9)=6 → 54 pieces
+    const pieces = gamePage.locator("[draggable='true']");
+    await expect(pieces).toHaveCount(54);
+  });
+
+  test("displays the image preview thumbnail", async ({ gamePage }) => {
+    const preview = gamePage.locator("img[alt='']").first();
+    await expect(preview).toBeVisible();
+  });
+
+  test("displays move counter starting at 0", async ({ gamePage }) => {
+    await expect(gamePage.getByText(/0 Move/)).toBeVisible();
+  });
+
+  test("displays stopwatch starting at 00:00:00", async ({ gamePage }) => {
+    await expect(gamePage.getByText("00:00:00")).toBeVisible();
+  });
+
+  test("displays RESTART button", async ({ gamePage }) => {
+    await expect(
+      gamePage.getByRole("button", { name: /RESTART/i })
+    ).toBeVisible();
+  });
+
+  test("displays PAUSE button", async ({ gamePage }) => {
+    await expect(
+      gamePage.getByRole("button", { name: /PAUSE/i })
+    ).toBeVisible();
+  });
+});
+
+test.describe("Game page – pause flow", () => {
+  test("opens pause modal when PAUSE is clicked", async ({ gamePage }) => {
+    await gamePage.getByRole("button", { name: /PAUSE/i }).click();
+    await expect(gamePage.locator("div.fixed")).toBeVisible();
+    await expect(gamePage.locator("div.text-7xl")).toContainText("Pause");
+  });
+
+  test("pause modal shows Continue button", async ({ gamePage }) => {
+    await gamePage.getByRole("button", { name: /PAUSE/i }).click();
+    await expect(
+      gamePage.getByRole("button", { name: /Continue/i })
+    ).toBeVisible();
+  });
+
+  test("continue button closes pause modal", async ({ gamePage }) => {
+    await gamePage.getByRole("button", { name: /PAUSE/i }).click();
+    await gamePage.getByRole("button", { name: /Continue/i }).click();
+    await expect(gamePage.locator("div.fixed")).not.toBeVisible();
+  });
+});
+
+test.describe("Game page – restart", () => {
+  test("RESTART resets move counter to 0", async ({ gamePage }) => {
+    await gamePage.getByRole("button", { name: /RESTART/i }).click();
+    await expect(gamePage.getByText(/0 Move/)).toBeVisible();
+  });
+
+  test("RESTART resets stopwatch to 00:00:00", async ({ gamePage }) => {
+    await gamePage.getByRole("button", { name: /RESTART/i }).click();
+    await expect(gamePage.getByText("00:00:00")).toBeVisible();
+  });
+});
+
+test.describe("Game page – levels", () => {
+  test("15x23 level renders correct piece count", async ({ page }) => {
+    await mockApiRoutes(page);
+    await page.goto(`/game/${mockPhoto.id}?level=15x23`);
+    await page.waitForSelector("[draggable='true']", { timeout: 15_000 });
+    // mockPhoto: height=800, width=1200 → cols=15, rows=Math.round(800/1200*15)=10 → 150 pieces
+    await expect(page.locator("[draggable='true']")).toHaveCount(150);
+  });
+
+  test("18x26 level renders correct piece count", async ({ page }) => {
+    await mockApiRoutes(page);
+    await page.goto(`/game/${mockPhoto.id}?level=18x26`);
+    await page.waitForSelector("[draggable='true']", { timeout: 15_000 });
+    // mockPhoto: height=800, width=1200 → cols=18, rows=Math.round(800/1200*18)=12 → 216 pieces
+    await expect(page.locator("[draggable='true']")).toHaveCount(216);
+  });
+});
diff --git a/tests/e2e/fixtures.ts b/tests/e2e/fixtures.ts
new file mode 100644
index 0000000..de30e80
--- /dev/null
+++ b/tests/e2e/fixtures.ts
@@ -0,0 +1,92 @@
+import { test as base, type Page } from "@playwright/test";
+
+/** A minimal PexelPhoto fixture served via the local dev-server image. */
+export const mockPhoto = {
+  id: 1,
+  alt: "Test photo",
+  avg_color: "#808080",
+  height: 800,
+  width: 1200,
+  liked: false,
+  photographer: "Test Photographer",
+  photographer_id: 1,
+  photographer_url: "https://www.pexels.com/@test",
+  src: {
+    landscape: "http://localhost:3000/img/img.jpeg",
+    large: "http://localhost:3000/img/img.jpeg",
+    large2x: "http://localhost:3000/img/img.jpeg",
+    medium: "http://localhost:3000/img/img.jpeg",
+    original: "http://localhost:3000/img/img.jpeg",
+    portrait: "http://localhost:3000/img/img.jpeg",
+    small: "http://localhost:3000/img/img.jpeg",
+    tiny: "http://localhost:3000/img/img.jpeg",
+    url: "http://localhost:3000/img/img.jpeg",
+  },
+  url: "https://www.pexels.com/photo/1",
+};
+
+export const mockPhotosResponse = {
+  id: "dyck2i1",
+  media: [mockPhoto],
+  page: 1,
+  per_page: 1,
+  total_results: 1,
+};
+
+/**
+ * Intercept the Pexels API proxy routes so tests never call the real API.
+ *
+ * IMPORTANT: register the more-specific `get-image` route FIRST (lower priority)
+ * and `get-images` LAST (higher priority), because Playwright's last-registered
+ * route wins when multiple patterns match the same URL.
+ * `**\/api\/get-image**` would otherwise also match `get-images` requests.
+ */
+export async function mockApiRoutes(page: Page) {
+  // Lower priority – matches /api/get-image?id=... only when get-images does not match
+  await page.route("**/api/get-image**", (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(mockPhoto),
+    })
+  );
+  // Higher priority – must be registered LAST so it takes precedence over get-image
+  await page.route("**/api/get-images**", (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(mockPhotosResponse),
+    })
+  );
+}
+
+type Fixtures = {
+  homePage: Page;
+  gamePage: Page;
+};
+
+export const test = base.extend<Fixtures>({
+  homePage: async ({ page }, use) => {
+    await mockApiRoutes(page);
+    // Register the response waiter BEFORE navigating to catch the onMounted fetch
+    const getImagesResponse = page.waitForResponse("**/api/get-images**", {
+      timeout: 30_000,
+    });
+    await page.goto("/");
+    // Wait for the getImages() API call to be fulfilled by the mock
+    await getImagesResponse;
+    // Wait for loading to complete: the shimmer disappears and the image appears
+    await page.waitForSelector("img.w-full", { timeout: 15_000 });
+    await use(page);
+  },
+
+  gamePage: async ({ page }, use) => {
+    await mockApiRoutes(page);
+    await page.goto(`/game/${mockPhoto.id}?level=9x13`);
+    // Wait for at least one puzzle piece to be rendered
+    await page.waitForSelector("[draggable='true']", { timeout: 15_000 });
+    await use(page);
+  },
+});
+
+export { expect } from "@playwright/test";
diff --git a/tests/e2e/main.spec.ts b/tests/e2e/main.spec.ts
new file mode 100644
index 0000000..02f484f
--- /dev/null
+++ b/tests/e2e/main.spec.ts
@@ -0,0 +1,91 @@
+import { test, expect, mockPhoto } from "./fixtures";
+
+test.describe("Home page", () => {
+  test("has correct page title", async ({ homePage }) => {
+    await expect(homePage).toHaveTitle(/Perplex Image/i);
+  });
+
+  test("displays tagline heading", async ({ homePage }) => {
+    await expect(
+      homePage.getByText("A tile-sliding picture game.")
+    ).toBeVisible();
+  });
+
+  test("displays subtitle", async ({ homePage }) => {
+    await expect(
+      homePage.getByText("Rearrange tiles by dragging to put the image together.")
+    ).toBeVisible();
+  });
+
+  test("displays selected image preview", async ({ homePage }) => {
+    // Image appears once loading is false and selectedImage is set
+    await expect(homePage.locator("img.w-full")).toBeVisible({ timeout: 15_000 });
+  });
+
+  test("displays Shuffle picture button", async ({ homePage }) => {
+    await expect(
+      homePage.getByRole("button", { name: /Shuffle picture/i })
+    ).toBeVisible();
+  });
+
+  test("displays Choose manually button", async ({ homePage }) => {
+    await expect(
+      homePage.getByRole("button", { name: /Choose manually/i })
+    ).toBeVisible();
+  });
+
+  test("displays Play button", async ({ homePage }) => {
+    await expect(
+      homePage.getByRole("button", { name: /Play/i })
+    ).toBeVisible();
+  });
+
+  test("displays three level options", async ({ homePage }) => {
+    await expect(homePage.locator("label[for='9x13']")).toBeVisible();
+    await expect(homePage.locator("label[for='15x23']")).toBeVisible();
+    await expect(homePage.locator("label[for='18x26']")).toBeVisible();
+  });
+
+  test("9x13 level is selected by default", async ({ homePage }) => {
+    const radio = homePage.locator("input[value='9x13']");
+    await expect(radio).toBeChecked();
+  });
+
+  test("level can be changed to 15x23", async ({ homePage }) => {
+    await homePage.locator("label[for='15x23']").click();
+    await expect(homePage.locator("input[value='15x23']")).toBeChecked();
+  });
+
+  test("level can be changed to 18x26", async ({ homePage }) => {
+    // Use dispatchEvent to avoid interaction with the Shuffle icon that visually
+    // overlaps the label center due to CSS rotate transform
+    await homePage.locator("label[for='18x26']").dispatchEvent("click");
+    await expect(homePage.locator("input[value='18x26']")).toBeChecked();
+  });
+});
+
+test.describe("Home page – Select image modal", () => {
+  test("opens when Choose manually is clicked", async ({ homePage }) => {
+    await homePage.getByRole("button", { name: /Choose manually/i }).click();
+    // UiModal renders as div.fixed.top-0.left-0
+    await expect(homePage.locator("div.fixed")).toBeVisible();
+  });
+
+  test("closes when clicking outside the modal", async ({ homePage }) => {
+    await homePage.getByRole("button", { name: /Choose manually/i }).click();
+    const modal = homePage.locator("div.fixed");
+    await expect(modal).toBeVisible();
+    // Click at the top-left corner, outside the centered modal container
+    await homePage.mouse.click(10, 10);
+    await expect(modal).not.toBeVisible();
+  });
+});
+
+test.describe("Navigation – Play button", () => {
+  test("navigates to game page when Play is clicked", async ({ homePage }) => {
+    await homePage.getByRole("button", { name: /Play/i }).click();
+    await expect(homePage).toHaveURL(
+      new RegExp(`/game/${mockPhoto.id}`)
+    );
+  });
+});