diff --git a/.gitignore b/.gitignore
index 3aaf82c..f574442 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,5 +34,11 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# Playwright
+/playwright/.auth/
+/playwright-report/
+/test-results/
+.env.test
+
 # AI agents
 .agents/
diff --git a/app/blocks/inventory-management/add-item-modal.tsx b/app/blocks/inventory-management/add-item-modal.tsx
index eb292e6..ac87f4f 100644
--- a/app/blocks/inventory-management/add-item-modal.tsx
+++ b/app/blocks/inventory-management/add-item-modal.tsx
@@ -1,5 +1,5 @@
 import { useState, useRef } from "react";
-import { Form } from "react-router";
+import { Form, useSubmit } from "react-router";
 import { IconX, IconScan, IconLoader2, IconCheck } from "@tabler/icons-react";
 import { toast } from "sonner";
 import styles from "./add-item-modal.module.css";
@@ -17,6 +17,8 @@ const steps = ["Basic Info", "Purchase Details", "Marketplace"];
 
 export function AddItemModal({ className, onClose, item, isDuplicate = false }: Props) {
   const [step, setStep] = useState(0);
+  const submit = useSubmit();
+  const formRef = useRef<HTMLFormElement>(null);
 
   // Controlled fields that OCR can pre-fill
   const [sku, setSku] = useState<string>(item?.sku ?? "");
@@ -107,199 +109,195 @@ export function AddItemModal({ className, onClose, item, isDuplicate = false }:
             </div>
           ))}
         </div>
-        <Form method="post" action="/app/inventory">
+        <Form ref={formRef} method="post" action="/app/inventory">
           <input type="hidden" name="intent" value={item && !isDuplicate ? "update" : "create"} />
           {item && !isDuplicate && <input type="hidden" name="itemId" value={item.id} />}
           <div className={styles.body}>
-            {step === 0 && (
-              <>
-                {/* ── AI Scan Receipt Button ── */}
-                <div className={styles.scanArea}>
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept="image/jpeg,image/png,image/webp,image/gif"
-                    className={styles.hiddenFileInput}
-                    onChange={handleFileChange}
-                    aria-label="Upload receipt or invoice image"
-                    id="receipt-scan-input"
-                  />
-                  <button
-                    type="button"
-                    id="scan-receipt-btn"
-                    className={[
-                      styles.scanBtn,
-                      scanState === "scanning" ? styles.scanning : "",
-                      scanState === "success" ? styles.scanSuccess : "",
-                    ]
-                      .filter(Boolean)
-                      .join(" ")}
-                    onClick={handleScanClick}
-                    disabled={scanState === "scanning"}
-                    aria-live="polite"
-                  >
-                    <span className={styles.scanIcon}>
-                      {scanState === "scanning" ? (
-                        <IconLoader2 size={16} className={styles.spinnerIcon} />
-                      ) : scanState === "success" ? (
-                        <IconCheck size={16} />
-                      ) : (
-                        <IconScan size={16} />
-                      )}
-                    </span>
-                    {scanButtonLabel}
-                  </button>
-                  <span className={styles.scanHint}>AI will auto-fill SKU, name &amp; price from your image</span>
-                </div>
+          <div style={{ display: step === 0 ? "block" : "none" }}>
+            {/* ── AI Scan Receipt Button ── */}
+            <div className={styles.scanArea}>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/jpeg,image/png,image/webp,image/gif"
+                className={styles.hiddenFileInput}
+                onChange={handleFileChange}
+                aria-label="Upload receipt or invoice image"
+                id="receipt-scan-input"
+              />
+              <button
+                type="button"
+                id="scan-receipt-btn"
+                className={[
+                  styles.scanBtn,
+                  scanState === "scanning" ? styles.scanning : "",
+                  scanState === "success" ? styles.scanSuccess : "",
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+                onClick={handleScanClick}
+                disabled={scanState === "scanning"}
+                aria-live="polite"
+              >
+                <span className={styles.scanIcon}>
+                  {scanState === "scanning" ? (
+                    <IconLoader2 size={16} className={styles.spinnerIcon} />
+                  ) : scanState === "success" ? (
+                    <IconCheck size={16} />
+                  ) : (
+                    <IconScan size={16} />
+                  )}
+                </span>
+                {scanButtonLabel}
+              </button>
+              <span className={styles.scanHint}>AI will auto-fill SKU, name &amp; price from your image</span>
+            </div>
 
-                {/* ── Basic Info Fields ── */}
-                <div className={styles.field}>
-                  <label className={styles.label} htmlFor="field-sku">
-                    SKU *
-                  </label>
-                  <input
-                    id="field-sku"
-                    name="sku"
-                    value={sku}
-                    onChange={(e) => setSku(e.target.value)}
-                    className={styles.input}
-                    placeholder="e.g. DD1391-100"
-                    required
-                  />
-                </div>
-                <div className={styles.field}>
-                  <label className={styles.label} htmlFor="field-name">
-                    Product Name *
-                  </label>
-                  <input
-                    id="field-name"
-                    name="name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    className={styles.input}
-                    placeholder="e.g. Air Jordan 1 Retro High OG Chicago"
-                    required
-                  />
-                </div>
-                <div className={styles.row}>
-                  <div className={styles.field}>
-                    <label className={styles.label} htmlFor="field-brand">
-                      Brand *
-                    </label>
-                    <input
-                      id="field-brand"
-                      name="brand"
-                      defaultValue={item?.brand}
-                      className={styles.input}
-                      placeholder="Nike"
-                      required
-                    />
-                  </div>
-                  <div className={styles.field}>
-                    <label className={styles.label} htmlFor="field-size">
-                      Size *
-                    </label>
-                    <input
-                      id="field-size"
-                      name="size"
-                      defaultValue={item?.size}
-                      className={styles.input}
-                      placeholder="10.5"
-                      required
-                    />
-                  </div>
-                </div>
-                <div className={styles.field}>
-                  <label className={styles.label} htmlFor="field-colorway">
-                    Colorway
-                  </label>
-                  <input
-                    id="field-colorway"
-                    name="colorway"
-                    className={styles.input}
-                    placeholder="e.g. Varsity Red/Black/White"
-                  />
-                </div>
-              </>
-            )}
-            {step === 1 && (
-              <>
-                <div className={styles.row}>
-                  <div className={styles.field}>
-                    <label className={styles.label} htmlFor="field-purchase-price">
-                      Purchase Price *
-                    </label>
-                    <input
-                      id="field-purchase-price"
-                      name="purchasePrice"
-                      value={purchasePrice}
-                      onChange={(e) => setPurchasePrice(e.target.value)}
-                      className={styles.input}
-                      type="number"
-                      placeholder="170"
-                      required
-                    />
-                  </div>
-                  <div className={styles.field}>
-                    <label className={styles.label} htmlFor="field-purchase-date">
-                      Purchase Date *
-                    </label>
-                    <input
-                      id="field-purchase-date"
-                      name="purchaseDate"
-                      defaultValue={item?.purchaseDate ? new Date(item.purchaseDate).toISOString().split("T")[0] : ""}
-                      className={styles.input}
-                      type="date"
-                      required
-                    />
-                  </div>
-                </div>
-                <div className={styles.field}>
-                  <label className={styles.label} htmlFor="field-condition">
-                    Condition
-                  </label>
-                  <select
-                    id="field-condition"
-                    name="condition"
-                    defaultValue={item?.condition || "DEADSTOCK"}
-                    className={styles.input}
-                  >
-                    <option value="DEADSTOCK">Deadstock</option>
-                    <option value="NEW_WITH_BOX">New with Box</option>
-                    <option value="USED">Used</option>
-                  </select>
-                </div>
-                <div className={styles.field}>
-                  <label className={styles.label} htmlFor="field-notes">
-                    Notes
-                  </label>
-                  <textarea id="field-notes" name="notes" className={styles.input} rows={3} placeholder="Any additional notes..." />
-                </div>
-              </>
-            )}
-            {step === 2 && (
-              <>
-                <div className={styles.field}>
-                  <label className={styles.label} htmlFor="field-marketplace">
-                    Listing Marketplace
-                  </label>
-                  <select id="field-marketplace" className={styles.input}>
-                    <option value="">Not listed</option>
-                    <option>StockX</option>
-                    <option>GOAT</option>
-                    <option>eBay</option>
-                    <option>Flight Club</option>
-                    <option>Stadium Goods</option>
-                  </select>
-                </div>
-                <div className={styles.field}>
-                  <label className={styles.label} htmlFor="field-asking-price">
-                    Asking Price
-                  </label>
-                  <input id="field-asking-price" className={styles.input} type="number" placeholder="Optional" />
-                </div>
-              </>
-            )}
+            {/* ── Basic Info Fields ── */}
+            <div className={styles.field}>
+              <label className={styles.label} htmlFor="field-sku">
+                SKU *
+              </label>
+              <input
+                id="field-sku"
+                name="sku"
+                value={sku}
+                onChange={(e) => setSku(e.target.value)}
+                className={styles.input}
+                placeholder="e.g. DD1391-100"
+                required
+              />
+            </div>
+            <div className={styles.field}>
+              <label className={styles.label} htmlFor="field-name">
+                Product Name *
+              </label>
+              <input
+                id="field-name"
+                name="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className={styles.input}
+                placeholder="e.g. Air Jordan 1 Retro High OG Chicago"
+                required
+              />
+            </div>
+            <div className={styles.row}>
+              <div className={styles.field}>
+                <label className={styles.label} htmlFor="field-brand">
+                  Brand *
+                </label>
+                <input
+                  id="field-brand"
+                  name="brand"
+                  defaultValue={item?.brand}
+                  className={styles.input}
+                  placeholder="Nike"
+                  required
+                />
+              </div>
+              <div className={styles.field}>
+                <label className={styles.label} htmlFor="field-size">
+                  Size *
+                </label>
+                <input
+                  id="field-size"
+                  name="size"
+                  defaultValue={item?.size}
+                  className={styles.input}
+                  placeholder="10.5"
+                  required
+                />
+              </div>
+            </div>
+            <div className={styles.field}>
+              <label className={styles.label} htmlFor="field-colorway">
+                Colorway
+              </label>
+              <input
+                id="field-colorway"
+                name="colorway"
+                className={styles.input}
+                placeholder="e.g. Varsity Red/Black/White"
+              />
+            </div>
+          </div>
+          
+          <div style={{ display: step === 1 ? "block" : "none" }}>
+            <div className={styles.row}>
+              <div className={styles.field}>
+                <label className={styles.label} htmlFor="field-purchase-price">
+                  Purchase Price *
+                </label>
+                <input
+                  id="field-purchase-price"
+                  name="purchasePrice"
+                  value={purchasePrice}
+                  onChange={(e) => setPurchasePrice(e.target.value)}
+                  className={styles.input}
+                  type="number"
+                  placeholder="170"
+                  required
+                />
+              </div>
+              <div className={styles.field}>
+                <label className={styles.label} htmlFor="field-purchase-date">
+                  Purchase Date *
+                </label>
+                <input
+                  id="field-purchase-date"
+                  name="purchaseDate"
+                  defaultValue={item?.purchaseDate ? new Date(item.purchaseDate).toISOString().split("T")[0] : ""}
+                  className={styles.input}
+                  type="date"
+                  required
+                />
+              </div>
+            </div>
+            <div className={styles.field}>
+              <label className={styles.label} htmlFor="field-condition">
+                Condition
+              </label>
+              <select
+                id="field-condition"
+                name="condition"
+                defaultValue={item?.condition || "DEADSTOCK"}
+                className={styles.input}
+              >
+                <option value="DEADSTOCK">Deadstock</option>
+                <option value="NEW_WITH_BOX">New with Box</option>
+                <option value="USED">Used</option>
+              </select>
+            </div>
+            <div className={styles.field}>
+              <label className={styles.label} htmlFor="field-notes">
+                Notes
+              </label>
+              <textarea id="field-notes" name="notes" className={styles.input} rows={3} placeholder="Any additional notes..." />
+            </div>
+          </div>
+
+          <div style={{ display: step === 2 ? "block" : "none" }}>
+            <div className={styles.field}>
+              <label className={styles.label} htmlFor="field-marketplace">
+                Listing Marketplace
+              </label>
+              <select id="field-marketplace" className={styles.input}>
+                <option value="">Not listed</option>
+                <option>StockX</option>
+                <option>GOAT</option>
+                <option>eBay</option>
+                <option>Flight Club</option>
+                <option>Stadium Goods</option>
+              </select>
+            </div>
+            <div className={styles.field}>
+              <label className={styles.label} htmlFor="field-asking-price">
+                Asking Price
+              </label>
+              <input id="field-asking-price" className={styles.input} type="number" placeholder="Optional" />
+            </div>
+          </div>
           </div>
           <div className={styles.footer}>
             {step > 0 ? (
@@ -317,7 +315,17 @@ export function AddItemModal({ className, onClose, item, isDuplicate = false }:
                 Next
               </button>
             ) : (
-              <button type="submit" className={styles.nextBtn}>
+              <button 
+                type="button" 
+                data-testid="submit-add-item"
+                className={styles.nextBtn}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (formRef.current) {
+                    submit(formRef.current, { method: "post", action: "/app/inventory" });
+                  }
+                }}
+              >
                 {isDuplicate ? "Duplicate Item" : item ? "Save Changes" : "Add Item"}
               </button>
             )}
diff --git a/app/routes/inventory-management.tsx b/app/routes/inventory-management.tsx
index 5139a31..df68340 100644
--- a/app/routes/inventory-management.tsx
+++ b/app/routes/inventory-management.tsx
@@ -203,7 +203,7 @@ export async function action({ request }: Route.ActionArgs) {
         purchasePrice,
         purchaseDate: new Date(purchaseDate),
         condition,
-        colorway,
+        color: colorway,
         notes,
         status: "IN_STOCK",
       },
@@ -230,7 +230,7 @@ export async function action({ request }: Route.ActionArgs) {
         purchasePrice,
         purchaseDate: new Date(purchaseDate),
         condition,
-        colorway,
+        color: colorway,
         notes,
       },
     });
diff --git a/e2e/auth.setup.ts b/e2e/auth.setup.ts
new file mode 100644
index 0000000..81c0855
--- /dev/null
+++ b/e2e/auth.setup.ts
@@ -0,0 +1,23 @@
+import { test as setup, expect } from '@playwright/test';
+const authFile = 'playwright/.auth/user.json';
+
+setup('authenticate', async ({ page }) => {
+  // Use environment variables for credentials, falling back to the demo user for local e2e dev
+  const username = process.env.E2E_USERNAME || 'demo@fliptrack.app';
+  const password = process.env.E2E_PASSWORD || 'password123';
+
+  await page.goto('/auth/login');
+  
+  // Fill in the login form
+  // Using generic selectors that should match typical login forms if exact labels are unknown
+  // But wait, earlier I saw the button was 'text=Sign in to your account'
+  await page.locator('input[name="email"]').fill(username);
+  await page.locator('input[name="password"]').fill(password);
+  await page.locator('button', { hasText: /^Sign In$/ }).click();
+
+  // Wait for navigation to the dashboard
+  await page.waitForURL('**/app/dashboard*');
+
+  // Save storage state to a file
+  await page.context().storageState({ path: authFile });
+});
diff --git a/e2e/inventory.spec.ts b/e2e/inventory.spec.ts
new file mode 100644
index 0000000..bab0654
--- /dev/null
+++ b/e2e/inventory.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Inventory Management', () => {
+  test('can create a new inventory item', async ({ page }) => {
+    // Generate a unique item name to avoid collisions with existing data
+    const uniqueId = Date.now();
+    const itemName = `E2E Test Sneaker ${uniqueId}`;
+    const itemSku = `E2E-${uniqueId}`;
+
+    // Navigate to inventory page
+    await page.goto('/app/inventory');
+    await expect(page.getByRole('heading', { name: 'Inventory' })).toBeVisible();
+
+    // Open the Add Item modal via the header button (use .first() to distinguish from the always-mounted form submit button)
+    await page.getByRole('button', { name: 'Add Item' }).first().click();
+
+    // Verify modal opened — the modal title "Add Inventory Item" should be visible
+    await expect(page.getByText('Add Inventory Item')).toBeVisible();
+
+    // ── Step 0: Basic Info ──
+    // Labels lack for/id pairing, so we target inputs by their name attribute.
+    await page.locator('input[name="sku"]').fill(itemSku);
+    await page.locator('input[name="name"]').fill(itemName);
+    await page.locator('input[name="brand"]').fill('TestBrand');
+    await page.locator('input[name="size"]').fill('10');
+    await page.getByRole('button', { name: 'Next' }).click();
+
+    // ── Step 1: Purchase Details ──
+    await page.locator('input[name="purchasePrice"]').fill('150');
+    await page.locator('input[name="purchaseDate"]').fill('2025-01-15');
+    await page.getByRole('button', { name: 'Next' }).click();
+
+    // ── Step 2: Marketplace (optional fields — skip) ──
+    // Submit the form. On step 2, the submit button reads "Add Item".
+    await page.getByTestId('submit-add-item').click();
+
+    // Verify success toast appears (sonner toast)
+    await expect(page.getByText('Item added successfully')).toBeVisible();
+
+    // Verify the newly created item appears in the inventory table as a link
+    await expect(page.getByRole('link', { name: itemName })).toBeVisible();
+  });
+});
diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
new file mode 100644
index 0000000..94ac368
--- /dev/null
+++ b/e2e/smoke.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test('application loads and displays dashboard for authenticated user', async ({ page }) => {
+  await page.goto('/app/dashboard');
+  
+  // Verify we are not redirected to login
+  await expect(page).toHaveURL(/.*\/app\/dashboard/);
+  
+  // Verify dashboard content is visible
+  await expect(page.getByRole('heading', { name: 'Dashboard', exact: true })).toBeVisible();
+});
diff --git a/package-lock.json b/package-lock.json
index 7753209..abfcb2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "zod": "^4.4.3"
       },
       "devDependencies": {
+        "@playwright/test": "^1.61.1",
         "@react-router/dev": "^7.16.0",
         "@types/node": "^24.12.4",
         "@types/react": "^19.2.16",
@@ -568,35 +569,38 @@
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
-      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.2.tgz",
+      "integrity": "sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==",
       "dev": true,
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
+        "@emnapi/wasi-threads": "1.2.2",
         "tslib": "^2.4.0"
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
-      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.2.tgz",
+      "integrity": "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==",
       "dev": true,
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
     },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
-      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
       "dev": true,
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -745,6 +749,22 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@prisma/client": {
       "version": "5.22.0",
       "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.22.0.tgz",
@@ -2714,6 +2734,40 @@
         "node": "^20.19.0 || >=22.12.0"
       }
     },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.3.tgz",
@@ -4270,18 +4324,6 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
-    "node_modules/jiti": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
-      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "jiti": "lib/jiti-cli.mjs"
-      }
-    },
     "node_modules/jose": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/jose/-/jose-5.10.0.tgz",
@@ -4957,6 +4999,53 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": 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/postcss": {
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
diff --git a/package.json b/package.json
index 7c1380d..1b659d4 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "build": "prisma generate && react-router build",
     "dev": "react-router dev",
     "start": "react-router-serve ./build/server/index.js",
+    "test:e2e": "playwright test",
     "typecheck": "react-router typegen && tsc",
     "postinstall": "prisma generate"
   },
@@ -34,6 +35,7 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.61.1",
     "@react-router/dev": "^7.16.0",
     "@types/node": "^24.12.4",
     "@types/react": "^19.2.16",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..13262f0
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+
+// Read from .env.test
+dotenv.config({ path: '.env.test' });
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    { name: 'setup', testMatch: /.*\.setup\.ts/ },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'playwright/.auth/user.json',
+      },
+      dependencies: ['setup'],
+    },
+  ],
+  webServer: {
+    command: 'npm run build && npm run start',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});
diff --git a/scripts/create-demo-user.ts b/scripts/create-demo-user.ts
index 47226f0..11074d4 100644
--- a/scripts/create-demo-user.ts
+++ b/scripts/create-demo-user.ts
@@ -3,10 +3,11 @@ import { PrismaClient } from "@prisma/client";
 import "dotenv/config";
 
 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
-const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!; // We'll try with ANON key if service role is missing
+const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+const supabaseKey = serviceRoleKey || anonKey;
 const supabase = createClient(supabaseUrl, supabaseKey);
 const prisma = new PrismaClient();
-
 async function main() {
   console.log("Creating demo user...");
 
@@ -15,16 +16,29 @@ async function main() {
   const password = process.env.DEMO_USER_PASSWORD ?? "password123";
   const name = "Demo User";
 
-  const { data, error } = await supabase.auth.signUp({
-    email,
-    password,
-    options: {
-      data: { name },
-    },
-  });
+  let error;
+  
+  if (serviceRoleKey) {
+    const res = await supabase.auth.admin.createUser({
+      email,
+      password,
+      user_metadata: { name },
+      email_confirm: true,
+    });
+    error = res.error;
+  } else {
+    const res = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        data: { name },
+      }
+    });
+    error = res.error;
+  }
 
   if (error) {
-    if (error.message.includes("User already registered")) {
+    if (error.message.includes("already registered") || error.message.includes("already exists") || error.message.includes("already been registered")) {
       console.log("Demo user already exists in Supabase Auth.");
     } else {
       console.error("Failed to create demo user in Auth:", error.message);
diff --git a/vite.config.ts b/vite.config.ts
index 964a614..4c7891a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,4 +6,7 @@ export default defineConfig({
   resolve: {
     tsconfigPaths: true,
   },
+  ssr: {
+    noExternal: ['@tabler/icons-react'],
+  },
 });