diff --git a/.gitignore b/.gitignore
index 09806c3..97f1d8f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,10 @@
 
 # testing
 /coverage
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
 
 # next.js
 /.next/
@@ -50,3 +54,7 @@ next-env.d.ts
 
 # claude code
 .claude
+
+# Playwright
+node_modules/
+/playwright/.auth/
diff --git a/README.md b/README.md
index b407a95..5ad04cf 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,17 @@
-# TRE - Next.js TypeScript Starter
+# TRE - Childcan Website
 
-A modern, production-ready Next.js starter template with TypeScript, Tailwind CSS v4, and best practices built-in.
+A modern Next.js website built with TypeScript, Tailwind CSS v4, and Sanity CMS integration.
 
 ## 🚀 Features
 
-- ⚡ **Next.js 15.5** - The latest version of Next.js with App Router
+- ⚡ **Next.js 16** - Latest version with App Router
 - 🔷 **TypeScript** - Type safety and better developer experience
-- 🎨 **Tailwind CSS v4** - The latest version with modern CSS capabilities
-- 📦 **Optimized Build** - Production-ready build configuration
-- 🧪 **Type Checking** - Strict TypeScript configuration
-- 🎯 **Developer Experience** - ESLint, Prettier-ready, and hot reload
+- 🎨 **Tailwind CSS v4** - Modern CSS capabilities with @theme directives
+- 📦 **Sanity CMS** - Headless CMS for content management
+- 🧪 **E2E Testing** - Playwright test suite for quality assurance
+- 🎯 **Developer Experience** - ESLint, Prettier, and hot reload
 - 📱 **Responsive** - Mobile-first design approach
-- 🌙 **Dark Mode** - Built-in dark mode support
-- 📝 **Template System** - Issue and PR templates included
+- 🗺️ **Google Maps** - Interactive location features
 
 ## 📋 Prerequisites
 
@@ -56,31 +55,48 @@ Open [http://localhost:3000](http://localhost:3000) in your browser to see the r
 
 ## 📜 Available Scripts
 
+### Development
+
 - `npm run dev` - Start the development server with Turbopack
 - `npm run build` - Build the application for production
 - `npm run start` - Start the production server
-- `npm run lint` - Run ESLint to check code quality (if configured)
+- `npm run lint` - Run ESLint to check code quality
+- `npm run format` - Format code with Prettier
+
+### Testing
+
+- `npm test` - Run all Playwright tests (headless)
+- `npm run test:ui` - Run tests with interactive UI mode
+- `npm run test:smoke` - Run quick smoke tests to verify all pages load
+- `npm run test:headed` - Run tests in headed mode (visible browser)
+- `npm run test:debug` - Run tests in debug mode with Playwright Inspector
 
 ## 📁 Project Structure
 
 ```
 tre/
 ├── app/                    # Next.js App Router directory
+│   ├── (main-route)/      # Main website routes
+│   │   ├── page.tsx       # Home page
+│   │   ├── about-us/      # About page
+│   │   ├── contact/       # Contact page
+│   │   ├── events/        # Events pages
+│   │   └── ...            # Other routes
+│   ├── sanity/            # Sanity Studio integration
 │   ├── layout.tsx         # Root layout component
-│   ├── page.tsx           # Home page
-│   ├── globals.css        # Global styles with Tailwind
-│   └── favicon.ico        # Favicon
-├── public/                # Static files
-├── .github/               # GitHub templates
-│   ├── ISSUE_TEMPLATE/    # Issue templates
-│   └── pull_request_template.md
-├── .env.example           # Environment variables template
-├── .gitignore            # Git ignore rules
+│   └── globals.css        # Global styles with Tailwind
+├── components/            # Reusable React components
+│   └── header/           # Header and navigation
+├── e2e/                  # Playwright E2E tests
+│   ├── smoke.spec.ts     # Page load tests
+│   ├── navigation.spec.ts # Navigation tests
+│   └── forms.spec.ts     # Form interaction tests
+├── public/               # Static files
+├── .env.example          # Environment variables template
+├── playwright.config.ts  # Playwright test configuration
 ├── next.config.ts        # Next.js configuration
 ├── package.json          # Project dependencies
-├── postcss.config.mjs    # PostCSS configuration for Tailwind
-├── tsconfig.json         # TypeScript configuration
-└── README.md             # This file
+└── tsconfig.json         # TypeScript configuration
 ```
 
 ## 🎨 Tailwind CSS v4
@@ -149,6 +165,45 @@ To start the production server:
 npm run start
 ```
 
+## 🧪 Testing
+
+This project uses [Playwright](https://playwright.dev/) for end-to-end testing.
+
+### Running Tests
+
+```bash
+# Quick smoke tests (recommended before deployment)
+npm run test:smoke
+
+# All tests with interactive UI
+npm run test:ui
+
+# Run all tests headless
+npm test
+
+# Debug a specific test
+npm run test:debug
+```
+
+### Test Structure
+
+The test suite is located in the `e2e/` directory:
+
+- **smoke.spec.ts** - Verifies all pages load without errors
+- **navigation.spec.ts** - Tests header navigation and responsive design
+- **forms.spec.ts** - Form interaction tests (customize for your forms)
+
+### What Gets Tested
+
+- ✅ All pages load successfully
+- ✅ No console errors on key pages
+- ✅ Navigation links work correctly
+- ✅ Mobile menu functionality
+- ✅ Responsive design across devices
+- ✅ Cross-browser compatibility (Chrome, Firefox, Safari)
+
+For more details, see [e2e/README.md](e2e/README.md).
+
 ## 🚀 Deployment
 
 ### Vercel (Recommended)
diff --git a/e2e/README.md b/e2e/README.md
new file mode 100644
index 0000000..59267d3
--- /dev/null
+++ b/e2e/README.md
@@ -0,0 +1,94 @@
+# Playwright Test Suite
+
+## Quick Start
+
+```bash
+# Run all tests (headless)
+npm test
+
+# Run tests with UI mode (recommended for development)
+npm run test:ui
+
+# Run only smoke tests (fast, checks all pages load)
+npm run test:smoke
+
+# Run tests in headed mode (see browser)
+npm run test:headed
+
+# Debug mode (opens Playwright Inspector)
+npm run test:debug
+```
+
+## Test Structure
+
+### `smoke.spec.ts`
+
+Fast tests that verify all pages load without errors. Run these first after deployment.
+
+### `navigation.spec.ts`
+
+Tests for header navigation, mobile menu, and responsive design.
+
+### `forms.spec.ts`
+
+Form interaction tests (mostly skipped - customize based on your forms).
+
+## What to Update
+
+1. **Forms tests** - Currently skipped. Update selectors to match your actual form fields
+2. **Navigation tests** - Verify the link selectors match your header structure
+3. **Add dynamic route tests** - Test `/our-families-stories/[slug]` and `/events/[slug]` with real slugs
+4. **Base URL** - Update `playwright.config.ts` to uncomment `baseURL` if you want to use relative paths in tests
+5. **Web Server** - Uncomment `webServer` config if you want Playwright to auto-start your dev server
+
+## Testing Workflow
+
+**Before deploying:**
+
+```bash
+npm run test:smoke  # Quick verification (2-3 minutes)
+```
+
+**Full test run:**
+
+```bash
+npm test  # Runs across all browsers
+```
+
+**Visual debugging:**
+
+```bash
+npm run test:ui  # Interactive UI, great for writing new tests
+```
+
+## Next Steps
+
+- [ ] Customize form tests in `forms.spec.ts`
+- [ ] Add tests for dynamic routes with real content
+- [ ] Add visual regression tests if needed
+- [ ] Set up CI/CD to run tests automatically
+- [ ] Uncomment mobile browser testing in `playwright.config.ts` if needed
+
+## CI Integration
+
+The config is CI-ready. On CI:
+
+- Tests run with 2 retries (0 retries locally)
+- Uses single worker for stability
+- Configured for continuous integration environments
+
+## Browsers Tested
+
+- ✅ Desktop: Chromium, Firefox, Safari (WebKit)
+
+Mobile browser testing is available but currently disabled. To enable:
+
+1. Uncomment the mobile projects in `playwright.config.ts`
+
+To test only one browser:
+
+```bash
+npx playwright test --project=chromium
+npx playwright test --project=firefox
+npx playwright test --project=webkit
+```
diff --git a/e2e/forms.spec.ts b/e2e/forms.spec.ts
new file mode 100644
index 0000000..5a70669
--- /dev/null
+++ b/e2e/forms.spec.ts
@@ -0,0 +1,53 @@
+import { test, expect } from "@playwright/test";
+
+/**
+ * Forms and interactions tests
+ * Verify forms are present and can be interacted with
+ */
+
+test.describe("Contact Form", () => {
+  test.skip("contact form is visible", async ({ page }) => {
+    // Skip by default - enable once you verify the form structure
+    await page.goto("/contact");
+
+    // Update these selectors based on your actual form structure
+    const form = page.locator("form");
+    await expect(form).toBeVisible();
+  });
+
+  test.skip("contact form fields are present", async ({ page }) => {
+    // Skip by default - customize based on your form fields
+    await page.goto("/contact");
+
+    // Example - update with your actual field names/IDs
+    await expect(page.locator('input[name="name"]')).toBeVisible();
+    await expect(page.locator('input[name="email"]')).toBeVisible();
+    await expect(page.locator('textarea[name="message"]')).toBeVisible();
+  });
+
+  test.skip("can fill out and submit contact form", async ({ page }) => {
+    // Skip by default - customize based on your form
+    await page.goto("/contact");
+
+    // Fill form
+    await page.fill('input[name="name"]', "Test User");
+    await page.fill('input[name="email"]', "test@example.com");
+    await page.fill('textarea[name="message"]', "This is a test message");
+
+    // Submit
+    await page.click('button[type="submit"]');
+
+    // Verify success (customize based on your success message/redirect)
+    await expect(page.locator("text=/thank you|success/i")).toBeVisible();
+  });
+});
+
+test.describe("Search Functionality", () => {
+  test.skip("search bar is present on homepage", async ({ page }) => {
+    // Skip by default - enable if you have search
+    await page.goto("/");
+
+    const searchBar = page.locator('input[type="search"]');
+    await expect(searchBar).toBeVisible();
+  });
+});
diff --git a/e2e/navigation.spec.ts b/e2e/navigation.spec.ts
new file mode 100644
index 0000000..9cf7ec5
--- /dev/null
+++ b/e2e/navigation.spec.ts
@@ -0,0 +1,74 @@
+import { test, expect } from "@playwright/test";
+
+/**
+ * Navigation tests - verify core user flows work
+ */
+
+test.describe("Navigation", () => {
+  test("header navigation is visible and functional", async ({ page }) => {
+    await page.goto("/");
+
+    // Check header is visible
+    const header = page.locator("header");
+    await expect(header).toBeVisible();
+  });
+
+  test("can navigate between pages via header links", async ({ page }) => {
+    await page.goto("/");
+
+    // Click on About Us link (adjust selector as needed)
+    await page.click('a[href*="about"]');
+    await expect(page).toHaveURL(/about/);
+
+    // Navigate to another page
+    await page.click('a[href*="contact"]');
+    await expect(page).toHaveURL(/contact/);
+  });
+
+  test("mobile menu works on small screens", async ({ page }) => {
+    // Set mobile viewport
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto("/");
+
+    // Mobile menu should be present
+    const header = page.locator("header");
+    await expect(header).toBeVisible();
+  });
+
+  test("all header links are clickable", async ({ page }) => {
+    await page.goto("/");
+
+    // Get all navigation links
+    const navLinks = page.locator('header a[href^="/"]');
+    const count = await navLinks.count();
+
+    // Verify we have navigation links
+    expect(count).toBeGreaterThan(0);
+
+    // Verify each link has an href
+    for (let i = 0; i < count; i++) {
+      const href = await navLinks.nth(i).getAttribute("href");
+      expect(href).toBeTruthy();
+    }
+  });
+});
+
+test.describe("Responsive Design", () => {
+  test("homepage is responsive on mobile", async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto("/");
+    await page.waitForLoadState("networkidle");
+
+    // Take screenshot for visual reference
+    await page.screenshot({ path: "test-results/mobile-homepage.png" });
+  });
+
+  test("homepage is responsive on desktop", async ({ page }) => {
+    await page.setViewportSize({ width: 1920, height: 1080 });
+    await page.goto("/");
+    await page.waitForLoadState("networkidle");
+
+    // Take screenshot for visual reference
+    await page.screenshot({ path: "test-results/desktop-homepage.png" });
+  });
+});
diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
new file mode 100644
index 0000000..46557d2
--- /dev/null
+++ b/e2e/smoke.spec.ts
@@ -0,0 +1,67 @@
+import { test, expect } from "@playwright/test";
+
+/**
+ * Smoke tests - verify all pages load without errors
+ * These tests ensure basic functionality after migration
+ */
+
+test.describe("Smoke Tests - All Pages Load", () => {
+  test("homepage loads successfully", async ({ page }) => {
+    await page.goto("/");
+    await expect(page).toHaveTitle(/./); // Has some title
+
+    // Check for no console errors
+    const errors: string[] = [];
+    page.on("console", (msg) => {
+      if (msg.type() === "error") {
+        errors.push(msg.text());
+      }
+    });
+
+    // Wait for page to be fully loaded
+    await page.waitForLoadState("networkidle");
+    expect(errors).toHaveLength(0);
+  });
+
+  test("about us page loads", async ({ page }) => {
+    await page.goto("/about-us");
+    await expect(page).toHaveURL(/about-us/);
+    await page.waitForLoadState("networkidle");
+  });
+
+  test("contact page loads", async ({ page }) => {
+    await page.goto("/contact");
+    await expect(page).toHaveURL(/contact/);
+    await page.waitForLoadState("networkidle");
+  });
+
+  test("events page loads", async ({ page }) => {
+    await page.goto("/events");
+    await expect(page).toHaveURL(/events/);
+    await page.waitForLoadState("networkidle");
+  });
+
+  test("for families page loads", async ({ page }) => {
+    await page.goto("/for-families");
+    await expect(page).toHaveURL(/for-families/);
+    await page.waitForLoadState("networkidle");
+  });
+
+  test("how to help page loads", async ({ page }) => {
+    await page.goto("/how-to-help");
+    await expect(page).toHaveURL(/how-to-help/);
+    await page.waitForLoadState("networkidle");
+  });
+
+  test("support page loads", async ({ page }) => {
+    await page.goto("/support");
+    await expect(page).toHaveURL(/support/);
+    await page.waitForLoadState("networkidle");
+  });
+
+  test("privacy policy page loads", async ({ page }) => {
+    await page.goto("/privacy-policy");
+    await expect(page).toHaveURL(/privacy-policy/);
+    await page.waitForLoadState("networkidle");
+  });
+});
diff --git a/package-lock.json b/package-lock.json
index fcb8878..cedfde2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.38.0",
+        "@playwright/test": "^1.58.2",
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
         "@types/react": "^19.2.2",
@@ -4382,7 +4383,6 @@
       "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
       "integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 20.19.0"
       },
@@ -4655,6 +4655,23 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "playwright": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@pnpm/config.env-replace": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz",
@@ -4891,7 +4908,6 @@
       "resolved": "https://registry.npmjs.org/@portabletext/sanity-bridge/-/sanity-bridge-2.0.0.tgz",
       "integrity": "sha512-lh5+4Z25huoHejtl8IUyoYqK7m7za1R8MNSjJ4riLqntu7wii7/2QFLj8X/EG3euCekftVmZ1zAcIugpwo92Mg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@portabletext/schema": "^2.1.1",
         "@sanity/schema": "^5.0.0",
@@ -10701,6 +10717,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -15364,6 +15381,53 @@
         "ce-la-react": "^0.3.0"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/pluralize": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
@@ -16327,7 +16391,6 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
diff --git a/package.json b/package.json
index 018bb65..841b989 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,12 @@
     "build": "next build --turbopack",
     "start": "next start",
     "format": "prettier --write .",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "test:smoke": "playwright test smoke.spec.ts",
+    "test:debug": "playwright test --debug"
   },
   "dependencies": {
     "@sanity/image-url": "^2.0.3",
@@ -24,6 +29,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
+    "@playwright/test": "^1.58.2",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19.2.2",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..caaca66
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,79 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://localhost:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});