diff --git a/.gitignore b/.gitignore
index e8eb7fb..5408a11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,4 +40,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.env.local
+env.local
diff --git a/README.md b/README.md
index 0ee428b..493d549 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ The engine is built on a "Decoupled Orchestration" model:
 | :--- | :--- | :--- |
 | **Job Application** | Cover Letters & Resume Summaries | Self-critique of tone and skill alignment. |
 | **Marketplace** | Product titles, descriptions & SEO tags | Automatic extraction of selling points and SEO optimization. |
-| **Comparison** | Job Description vs. Resume analysis | Semantic gap analysis with ✅/❌ match reporting. |
+| **Job Comparison** | Job Description vs. Resume analysis | Semantic gap analysis with ✅/❌ match reporting. |
 
 ---
 
diff --git a/env.example b/env.example
new file mode 100644
index 0000000..c6944a4
--- /dev/null
+++ b/env.example
@@ -0,0 +1,4 @@
+USE_AI=true
+GEMINI_API_KEY=your_api_key_here
+GROQ_API_KEY=your_groq_key_here
+OPENAI_API_KEY=your_openai_key_here
\ No newline at end of file
diff --git a/env.local b/env.local
deleted file mode 100644
index f9e2deb..0000000
--- a/env.local
+++ /dev/null
@@ -1,2 +0,0 @@
-OPENAI_API_KEY=your_sk_key_here
-USE_OPENAI=true
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8cdb533..0b51905 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,9 @@
       "name": "hybrid-text-engine",
       "version": "0.1.0",
       "dependencies": {
-        "next": "16.1.4",
+        "@google/generative-ai": "^0.24.1",
+        "lucide-react": "^0.575.0",
+        "next": "^16.1.6",
         "node-fetch": "^3.3.2",
         "react": "19.2.3",
         "react-dom": "19.2.3"
@@ -686,6 +688,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@google/generative-ai": {
+      "version": "0.24.1",
+      "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.24.1.tgz",
+      "integrity": "sha512-MqO+MLfM6kjxcKoy0p1wRzG3b4ZZXtPI+z2IE26UogS2Cm/XHO+7gGRBh6gcJsOiIVoH93UwKvW4HdgiOZCy9Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -2608,9 +2619,10 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.4.tgz",
-      "integrity": "sha512-gkrXnZyxPUy0Gg6SrPQPccbNVLSP3vmW8LU5dwEttEEC1RwDivk8w4O+sZIjFvPrSICXyhQDCG+y3VmjlJf+9A=="
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
+      "integrity": "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==",
+      "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "16.1.4",
@@ -2622,12 +2634,13 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.4.tgz",
-      "integrity": "sha512-T8atLKuvk13XQUdVLCv1ZzMPgLPW0+DWWbHSQXs0/3TjPrKNxTmUIhOEaoEyl3Z82k8h/gEtqyuoZGv6+Ugawg==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.6.tgz",
+      "integrity": "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -2637,12 +2650,13 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.4.tgz",
-      "integrity": "sha512-AKC/qVjUGUQDSPI6gESTx0xOnOPQ5gttogNS3o6bA83yiaSZJek0Am5yXy82F1KcZCx3DdOwdGPZpQCluonuxg==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.6.tgz",
+      "integrity": "sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -2652,12 +2666,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.4.tgz",
-      "integrity": "sha512-POQ65+pnYOkZNdngWfMEt7r53bzWiKkVNbjpmCt1Zb3V6lxJNXSsjwRuTQ8P/kguxDC8LRkqaL3vvsFrce4dMQ==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.6.tgz",
+      "integrity": "sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -2667,12 +2682,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.4.tgz",
-      "integrity": "sha512-3Wm0zGYVCs6qDFAiSSDL+Z+r46EdtCv/2l+UlIdMbAq9hPJBvGu/rZOeuvCaIUjbArkmXac8HnTyQPJFzFWA0Q==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.6.tgz",
+      "integrity": "sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -2682,12 +2698,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.4.tgz",
-      "integrity": "sha512-lWAYAezFinaJiD5Gv8HDidtsZdT3CDaCeqoPoJjeB57OqzvMajpIhlZFce5sCAH6VuX4mdkxCRqecCJFwfm2nQ==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.6.tgz",
+      "integrity": "sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -2697,12 +2714,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.4.tgz",
-      "integrity": "sha512-fHaIpT7x4gA6VQbdEpYUXRGyge/YbRrkG6DXM60XiBqDM2g2NcrsQaIuj375egnGFkJow4RHacgBOEsHfGbiUw==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.6.tgz",
+      "integrity": "sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -2712,12 +2730,13 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.4.tgz",
-      "integrity": "sha512-MCrXxrTSE7jPN1NyXJr39E+aNFBrQZtO154LoCz7n99FuKqJDekgxipoodLNWdQP7/DZ5tKMc/efybx1l159hw==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.6.tgz",
+      "integrity": "sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -2727,12 +2746,13 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.4.tgz",
-      "integrity": "sha512-JSVlm9MDhmTXw/sO2PE/MRj+G6XOSMZB+BcZ0a7d6KwVFZVpkHcb2okyoYFBaco6LeiL53BBklRlOrDDbOeE5w==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.6.tgz",
+      "integrity": "sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -3445,12 +3465,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^2.0.2"
       },
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -3792,10 +3813,11 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -9868,6 +9890,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.575.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.575.0.tgz",
+      "integrity": "sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -9972,10 +10003,11 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -10044,11 +10076,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.1.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.4.tgz",
-      "integrity": "sha512-gKSecROqisnV7Buen5BfjmXAm7Xlpx9o2ueVQRo5DxQcjC8d330dOM1xiGWc2k3Dcnz0In3VybyRPOsudwgiqQ==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
+      "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
+      "license": "MIT",
       "dependencies": {
-        "@next/env": "16.1.4",
+        "@next/env": "16.1.6",
         "@swc/helpers": "0.5.15",
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001579",
@@ -10062,14 +10095,14 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.4",
-        "@next/swc-darwin-x64": "16.1.4",
-        "@next/swc-linux-arm64-gnu": "16.1.4",
-        "@next/swc-linux-arm64-musl": "16.1.4",
-        "@next/swc-linux-x64-gnu": "16.1.4",
-        "@next/swc-linux-x64-musl": "16.1.4",
-        "@next/swc-win32-arm64-msvc": "16.1.4",
-        "@next/swc-win32-x64-msvc": "16.1.4",
+        "@next/swc-darwin-arm64": "16.1.6",
+        "@next/swc-darwin-x64": "16.1.6",
+        "@next/swc-linux-arm64-gnu": "16.1.6",
+        "@next/swc-linux-arm64-musl": "16.1.6",
+        "@next/swc-linux-x64-gnu": "16.1.6",
+        "@next/swc-linux-x64-musl": "16.1.6",
+        "@next/swc-win32-arm64-msvc": "16.1.6",
+        "@next/swc-win32-x64-msvc": "16.1.6",
         "sharp": "^0.34.4"
       },
       "peerDependencies": {
diff --git a/package.json b/package.json
index 0f745f5..ede2088 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "next": "16.1.4",
+    "@google/generative-ai": "^0.24.1",
+    "lucide-react": "^0.575.0",
+    "next": "^16.1.6",
     "node-fetch": "^3.3.2",
     "react": "19.2.3",
     "react-dom": "19.2.3"
diff --git a/src/app/api/generate/route.ts b/src/app/api/generate/route.ts
index acf6fd1..f636e95 100644
--- a/src/app/api/generate/route.ts
+++ b/src/app/api/generate/route.ts
@@ -1,31 +1,27 @@
 import { NextRequest, NextResponse } from "next/server"
 import { runEngine } from "@/engine/core/engine"
 import { EngineRequest } from "@/engine/core/request"
-import { OpenAIRunner } from "../../../engine/runner/openAIRunner";
-import { FakeRunner } from "@/engine/runner/fakeRunner"
 import { MODE_REGISTRY } from "@/engine/core/registry"
+import { getRunner } from "@/engine/runner/factory";
+
 
 export async function POST(req: NextRequest) {
   try {
-
-
     const body: EngineRequest = await req.json();
+    const modeLogic = MODE_REGISTRY[body.mode];
+  
+  if (!modeLogic) {
+    return NextResponse.json({ error: "Invalid mode" }, { status: 400 });
+  }
 
-    const mode = MODE_REGISTRY[body.mode];
-    if (!mode) {
-      return NextResponse.json({ error: "Invalid mode" }, { status: 400 });
-    }
-
-    const runner = 
-      process.env.USE_OPENAI === "true"
-      ? new OpenAIRunner({apiKey: process.env.OPENAI_API_KEY})
-      : new FakeRunner();
+    const runner = getRunner(body.provider);
 
-    const result = await runEngine(mode, body, runner);
+    const result = await runEngine(modeLogic, body, runner);
 
     return NextResponse.json(result);
   } catch (err) {
     console.error("API Error:", err);
+
     return NextResponse.json(
       { error: err instanceof Error ? err.message : "Internal Server Error" },
       { status: 500 }
diff --git a/src/app/job-application/page.tsx b/src/app/job-application/page.tsx
new file mode 100644
index 0000000..6934a49
--- /dev/null
+++ b/src/app/job-application/page.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+import { Audience, EngineContext, EngineModeId, Provider, Tone } from "@/engine/core/types";
+
+export default function JobApplicationPage() {
+  const [formData, setFormData] = useState({ resume: "", jd: "" });
+  const [result, setResult] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleGenerate = async () => {
+    setLoading(true);
+    // Note: This uses the 'job-application' mode in your registry
+    const res = await fetch("/api/generate", {
+      method: "POST",
+      body: JSON.stringify({
+        mode: EngineModeId.JOB_APPLICATION,
+        provider: Provider.GEMINI,
+        context: EngineContext.JOB, 
+        tone: Tone.PROFESSIONAL, 
+        audience: Audience.RECRUITERS,
+        content: {
+          resume: formData.resume,
+          jd: formData.jd
+        }
+      }),
+    });
+    const data = await res.json();
+    setResult(data);
+    setLoading(false);
+  };
+
+  return (
+    <main className="max-w-5xl mx-auto p-8">
+      <Link href="/" className="text-indigo-600 font-bold mb-4 inline-block">← BACK</Link>
+      
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-10">
+        <div className="lg:col-span-2 space-y-6">
+          <h1 className="text-3xl font-black text-slate-900">Application Writer</h1>
+          <p className="text-slate-500">Generate a custom cover letter based on your experience.</p>
+          
+          <textarea 
+            placeholder="Paste your Resume text..."
+            className="w-full h-48 p-4 border rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none bg-white 
+             text-slate-900 placeholder:text-slate-400"
+            onChange={(e) => setFormData({...formData, resume: e.target.value})}
+          />
+          <textarea 
+            placeholder="Paste the Job Description..."
+            className="w-full h-48 p-4 border rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none bg-white 
+             text-slate-900 placeholder:text-slate-400"
+            onChange={(e) => setFormData({...formData, jd: e.target.value})}
+          />
+          <button 
+            onClick={handleGenerate}
+            className="w-full bg-blue-600 text-white py-4 rounded-2xl font-bold shadow-lg hover:bg-blue-700 transition-all"
+          >
+            {loading ? "Writing..." : "Write Application"}
+          </button>
+        </div>
+
+        <div className="lg:col-span-3">
+          {result ? (
+            <div className="bg-white p-8 rounded-3xl border shadow-sm min-h-[500px]">
+              <h2 className="font-bold text-slate-400 uppercase text-xs mb-6">Tailored Cover Letter</h2>
+              <div className="text-slate-800 whitespace-pre-wrap leading-loose">
+                {result.body}
+              </div>
+            </div>
+          ) : (
+            <div className="h-full border-2 border-dashed border-slate-200 rounded-3xl flex items-center justify-center text-slate-300">
+              Result will appear here
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/app/job-comparison/page.tsx b/src/app/job-comparison/page.tsx
new file mode 100644
index 0000000..72c249b
--- /dev/null
+++ b/src/app/job-comparison/page.tsx
@@ -0,0 +1,94 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import { EngineModeId, Provider } from "@/engine/core/types";
+
+export default function JobComparisonPage() {
+  const [formData, setFormData] = useState({ resume: "", jd: "" });
+  const [result, setResult] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  // ComparisonPage.tsx
+  const [resumeText, setResumeText] = useState("");
+  const [jdText, setJdText] = useState("");
+  const [selectedProvider, setSelectedProvider] = useState("gemini"); // Default provider
+
+  const handleMatch = async () => {
+    setLoading(true);
+    const payload = {
+        mode: "comparison",     // Required for the Registry to find the mode
+        context: "comparison",  // THIS IS THE MISSING PIECE causing your error
+        provider: selectedProvider,
+        tone: "professional",
+        audience: "recruiters",
+        content: {
+            userResume: resumeText,      // Ensure keys match: userResume
+            jobDescription: jdText,      // Ensure keys match: jobDescription
+        },
+        };
+    const res = await fetch("/api/generate", {
+      method: "POST",
+      body: JSON.stringify({
+        payload
+      }),
+    });
+    const data = await res.json();
+    setResult(data);
+    setLoading(false);
+  };
+
+  return (
+    <main className="max-w-5xl mx-auto p-8">
+      <Link href="/" className="text-sm font-bold text-indigo-600 mb-6 inline-block">← MENU</Link>
+      
+      <div className="mb-10 text-center">
+        <h1 className="text-3xl font-black text-slate-900">Suitability Matcher</h1>
+        <p className="text-slate-500">Find out if your profile matches the role requirements.</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+        <textarea 
+          placeholder="Paste CV..." 
+          className="h-80 p-4 border rounded-2xl bg-white text-slate-900 shadow-inner focus:ring-2 focus:ring-indigo-500 outline-none"
+          onChange={(e) => setFormData({...formData, resume: e.target.value})}
+        />
+        <textarea 
+          placeholder="Paste Job Description..." 
+          className="h-80 p-4 border rounded-2xl bg-white text-slate-900 shadow-inner focus:ring-2 focus:ring-indigo-500 outline-none"
+          onChange={(e) => setFormData({...formData, jd: e.target.value})}
+        />
+      </div>
+
+      <button 
+        onClick={handleMatch}
+        disabled={loading}
+        className="w-full bg-emerald-600 text-white py-5 rounded-2xl font-black text-xl hover:bg-emerald-700 shadow-lg transition-all"
+      >
+        {loading ? "Calculating Match..." : "Calculate Suitability Score"}
+      </button>
+
+      {result && (
+        <div className="mt-12 bg-white rounded-3xl border-2 border-slate-100 p-8 shadow-xl">
+            <div className="flex items-center gap-6 mb-8">
+                <div className="text-5xl font-black text-emerald-600 bg-emerald-50 w-24 h-24 flex items-center justify-center rounded-full border-4 border-emerald-100">
+                {/* 1. Add the '?' to prevent crashing if analysis is missing */}
+                {/* 2. Add '|| 0' to show 0 instead of blank if it's not there yet */}
+                {result.analysis?.score ?? 0}%
+                </div>
+                <div>
+                <h2 className="text-2xl font-bold text-slate-900">Match Probability</h2>
+                <p className="text-slate-500">Based on semantic keyword analysis.</p>
+                </div>
+            </div>
+            
+            <div className="space-y-4">
+                <h3 className="font-bold text-slate-800 border-b pb-2">Suitability Analysis</h3>
+                {/* Protect the body as well */}
+                <p className="text-slate-700 leading-relaxed italic">
+                "{result?.body || "No analysis generated."}"
+                </p>
+            </div>
+        </div>
+        )}
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/app/marketplace/page.tsx b/src/app/marketplace/page.tsx
new file mode 100644
index 0000000..5336847
--- /dev/null
+++ b/src/app/marketplace/page.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Audience, EngineContext, EngineModeId, Provider, Tone } from "@/engine/core/types";
+
+export default function MarketplacePage() {
+  const [formData, setFormData] = useState({ productName: "", description: "", price: "" });
+  const [result, setResult] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleGenerate = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          mode: EngineModeId.MARKETPLACE,
+          provider: Provider.GEMINI, 
+          context: EngineContext.MARKETPLACE, 
+          tone: Tone.FRIENDLY,
+          audience: Audience.BUYERS,
+          content: {
+            productName: formData.productName,
+            description: formData.description,
+            price: formData.price,
+          }
+        }),
+      });
+
+      const data = await res.json();
+      setResult(data);
+    } catch (error) {
+      console.error("Frontend Error:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="max-w-4xl mx-auto p-6">
+      <Link href="/" className="text-indigo-600 font-medium mb-4 inline-block">← Back to Lab</Link>
+      
+      <div className="bg-white rounded-3xl shadow-sm border p-8">
+        <h1 className="text-3xl font-bold text-slate-900 mb-2">Marketplace Generator</h1>
+        <p className="text-slate-500 mb-8">Turn basic items into professional listings.</p>
+
+        <div className="space-y-4 mb-6">
+          <input 
+            className="w-full p-4 border rounded-xl outline-none focus:ring-2 focus:ring-indigo-500 bg-white 
+             text-slate-900 placeholder:text-slate-400"
+            placeholder="What are you selling? (e.g. 1990s Denim Jacket)"
+            onChange={(e) => setFormData({...formData, productName: e.target.value})}
+          />
+          <textarea 
+            className="w-full p-4 border rounded-xl h-32 outline-none focus:ring-2 focus:ring-indigo-500 bg-white 
+             text-slate-900 placeholder:text-slate-400"
+            placeholder="Basic details (size, condition, flaws...)"
+            onChange={(e) => setFormData({...formData, description: e.target.value})}
+          />
+          <input 
+            type="text"
+            className="w-full p-4 border rounded-xl outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-slate-900 placeholder:text-slate-400"
+            placeholder="Price (e.g. €45 or Open to offers)"
+            onChange={(e) => setFormData({...formData, price: e.target.value})}
+          />
+        </div>
+
+        <button 
+          onClick={handleGenerate}
+          disabled={loading}
+          className="w-full bg-indigo-600 text-white py-4 rounded-xl font-bold hover:bg-indigo-700 transition-all"
+        >
+          {loading ? "Crafting Listing..." : "Generate Pro Listing"}
+        </button>
+      </div>
+
+      {result && (
+        <div className="mt-8 space-y-6 animate-in fade-in duration-700">
+            {/* The Listing Card */}
+            <div className="bg-white border-2 border-slate-100 rounded-3xl p-8 shadow-xl">
+            <div className="flex justify-between items-start mb-6">
+                <h2 className="text-2xl font-black text-slate-900">
+                {result.sections?.title || "Generated Listing"}
+                </h2>
+                <span className="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-xs font-bold">
+                {result.meta?.mode}
+                </span>
+            </div>
+
+            <div className="prose prose-slate max-w-none">
+                <p className="text-slate-700 leading-relaxed whitespace-pre-wrap">
+                {/* Use the description from sections if body is generic */}
+                {result.sections?.description || result.body}
+                </p>
+            </div>
+
+            {/* SEO Tags */}
+            {result.sections?.seoTags && (
+                <div className="mt-6 pt-6 border-t border-slate-50">
+                <span className="text-xs font-bold text-slate-400 uppercase">Tags: </span>
+                <code className="text-sm text-indigo-500">{result.sections.seoTags}</code>
+                </div>
+            )}
+            </div>
+
+            {/* The Analysis Card (The Critic) */}
+            <div className="bg-amber-50 border border-amber-100 rounded-2xl p-6">
+            <h3 className="text-amber-800 font-bold mb-2 flex items-center gap-2">
+                ✨ AI Optimization Score: {result.analysis?.score}%
+            </h3>
+            <p className="text-amber-700 text-sm mb-4">{result.analysis?.critique}</p>
+            <ul className="list-disc pl-5 text-sm text-amber-700 space-y-1">
+                {result.analysis?.suggestions?.map((s: string, i: number) => (
+                <li key={i}>{s}</li>
+                ))}
+            </ul>
+            </div>
+        </div>
+        )}
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4b21567..f64bb99 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,32 +1,48 @@
-import { runEngine } from "@/engine/core/engine"
-import { marketplaceMode } from "@/engine/modes/marketplace"
-import { FakeRunner } from "@/engine/runner/fakeRunner";
+"use client";
 
-export default async function Home() {
-  const runner = new FakeRunner();
-  const result = await runEngine(
-    marketplaceMode,
-     {
-    context: "marketplace",
-    tone: "friendly",
-    audience: "online buyers",
-    content: {
-        productName: "Vintage denim jacket",
-        description: "Classic denim jacket, very good condition",
-        price: 85,
-        platform: "Vinted",
-    }
-    },
-    runner
-  );
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export default function Home() {
+  const [selection, setSelection] = useState("marketplace");
+  const router = useRouter();
+
+  const handleNavigation = () => {
+    router.push(`/${selection}`);
+  };
 
   return (
-    <main className="p-8 max-w-2xl mx-auto">
-      <h1 className="text-2xl font-bold mb-4">Hybrid AI Text Engine</h1>
-      <pre className="bg-gray-100 p-4 rounded">
-        {result.body}
-      </pre>
-    </main>
-  )
-}
+    <main className="min-h-screen flex items-center justify-center bg-slate-50 p-6">
+      <div className="bg-white p-10 rounded-3xl shadow-2xl border w-full max-w-lg">
+        <h1 className="text-4xl font-black text-slate-900 mb-2 text-center">
+          AI Engine <span className="text-indigo-600">Lab</span>
+        </h1>
+        <p className="text-slate-500 text-center mb-10">Select an specialized AI workflow to begin.</p>
+        
+        <div className="space-y-6">
+          <div>
+            <label className="block text-xs font-bold uppercase tracking-widest text-slate-400 mb-3 ml-1">
+              Choose your tool
+            </label>
+            <select 
+              value={selection}
+              onChange={(e) => setSelection(e.target.value)}
+              className="w-full p-4 border-2 border-slate-100 rounded-2xl bg-slate-50 text-slate-700 font-medium focus:border-indigo-500 focus:ring-0 outline-none transition-all appearance-none cursor-pointer"
+            >
+              <option value="marketplace">🛍️ Marketplace Listing Generator</option>
+              <option value="job-application">📄 CV & Cover Letter Writer</option>
+              <option value="job-comparison">⚖️ Job Suitability Matcher</option>
+            </select>
+          </div>
 
+          <button 
+            onClick={handleNavigation}
+            className="w-full bg-indigo-600 text-white py-4 rounded-2xl font-bold text-lg hover:bg-indigo-700 hover:-translate-y-1 transition-all active:scale-95 shadow-xl shadow-indigo-200"
+          >
+            Launch Tool
+          </button>
+        </div>
+      </div>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ComparisonView.tsx b/src/components/ComparisonView.tsx
new file mode 100644
index 0000000..96aa4ac
--- /dev/null
+++ b/src/components/ComparisonView.tsx
@@ -0,0 +1,90 @@
+
+import { CheckCircle, AlertCircle, TrendingUp } from "lucide-react";
+
+interface ComparisonProps {
+  result: {
+    body: string;
+    analysis: {
+      score: number;
+      feedback: string[];
+    };
+  };
+}
+
+export default function ComparisonView({ result }: ComparisonProps) {
+  const { score, feedback } = result.analysis;
+
+  return (
+    <div className="space-y-6 animate-in slide-in-from-bottom-4 duration-500">
+      {/* Hero Score Card */}
+      <div className="bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 p-6 rounded-2xl shadow-sm">
+        <div className="flex justify-between items-center">
+          <div>
+            <h3 className="text-indigo-900 font-bold text-lg">Match Analysis</h3>
+            <p className="text-indigo-600 text-sm">Semantic Alignment Result</p>
+          </div>
+          <div className="relative flex items-center justify-center">
+            <svg className="w-20 h-20">
+              <circle cx="40" cy="40" r="36" fill="none" stroke="#e0e7ff" strokeWidth="8" />
+              <circle cx="40" cy="40" r="36" fill="none" stroke="#4f46e5" strokeWidth="8" 
+                strokeDasharray={226} strokeDashoffset={226 - (226 * score) / 100}
+                strokeLinecap="round" className="transition-all duration-1000" />
+            </svg>
+            <span className="absolute font-bold text-indigo-700 text-xl">{score}%</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* The Response */}
+        <div className="bg-white border rounded-xl p-5">
+          <h4 className="flex items-center gap-2 text-sm font-bold text-gray-500 mb-3 uppercase">
+            <TrendingUp size={16} /> Strategy & Cover Letter
+          </h4>
+          <div className="text-gray-700 text-sm leading-relaxed whitespace-pre-wrap">
+            {result.body}
+          </div>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-6">
+        {/* Left Column: The Feedback (Gap Analysis) */}
+        <div className="md:col-span-1 space-y-4">
+            <div className="bg-amber-50 border border-amber-200 p-4 rounded-xl">
+            <h4 className="text-amber-800 font-bold text-sm mb-2 flex items-center gap-2">
+                ⚠️ Missing from Resume
+            </h4>
+            <ul className="text-sm text-amber-700 space-y-2">
+                {result.analysis.feedback.map((f, i) => (
+                <li key={i} className="flex gap-2"><span>•</span> {f}</li>
+                ))}
+            </ul>
+            </div>
+        </div>
+
+        {/* Right Column: The Drafted Text */}
+        <div className="md:col-span-2 bg-white border rounded-xl p-6 shadow-sm">
+            <h4 className="text-slate-400 text-xs font-bold uppercase mb-4 tracking-widest">Optimized Application Pitch</h4>
+            <div className="prose prose-slate max-w-none text-slate-800">
+            {result.body}
+            </div>
+        </div>
+        </div>
+
+        {/* The Critic Gaps */}
+        <div className="bg-slate-50 border rounded-xl p-5">
+          <h4 className="flex items-center gap-2 text-sm font-bold text-gray-500 mb-3 uppercase">
+            <AlertCircle size={16} /> Improvement Gaps
+          </h4>
+          <ul className="space-y-3">
+            {feedback.map((item, i) => (
+              <li key={i} className="flex gap-2 text-sm text-slate-700">
+                <span className="text-indigo-500 mt-1">●</span>
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/EngineResult.tsx b/src/components/EngineResult.tsx
new file mode 100644
index 0000000..4efc5bf
--- /dev/null
+++ b/src/components/EngineResult.tsx
@@ -0,0 +1,47 @@
+import { EngineOutput } from "@/engine/core/types";
+
+export default function EngineResult({ result }: { result: EngineOutput }) {
+  const { score, critique, suggestions } = result.analysis || { 
+    score: 0, 
+    critique: "No analysis available", 
+    suggestions: [] 
+  };
+
+  return (
+    <div className="mt-8 space-y-6 animate-in fade-in duration-700">
+      {/* Score Header */}
+      <div className="flex items-center justify-between border-b pb-4">
+        <h2 className="text-xl font-semibold text-gray-800">Engine Analysis</h2>
+        <div className={`px-4 py-1 rounded-full text-white font-bold ${
+          score >= 80 ? 'bg-green-500' : 'bg-amber-500'
+        }`}>
+          {score}/100
+        </div>
+      </div>
+
+      {/* Main Content (Uses critique instead of body for AI-generated text) */}
+      <div className="bg-white border rounded-lg p-6 shadow-sm">
+        <h3 className="text-sm uppercase tracking-wider text-gray-500 mb-2 font-bold">
+            Analysis Summary
+        </h3>
+        <p className="text-gray-800 whitespace-pre-wrap leading-relaxed">
+            {critique}
+        </p>
+      </div>
+
+      {/* Critic's Feedback (Mapped from suggestions array) */}
+      {suggestions.length > 0 && (
+        <div className="bg-blue-50 border border-blue-100 rounded-lg p-4">
+          <h3 className="text-blue-800 font-medium mb-2 flex items-center gap-2">
+            <span>🔍</span> Refinement Suggestions
+          </h3>
+          <ul className="list-disc list-inside text-sm text-blue-700 space-y-1">
+            {suggestions.map((suggestion, i) => (
+              <li key={i}>{suggestion}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/engine/core/content.ts b/src/engine/core/content.ts
index b4349fb..30127d9 100644
--- a/src/engine/core/content.ts
+++ b/src/engine/core/content.ts
@@ -13,3 +13,8 @@ export interface MarketplaceContent {
   audience?: string;
   platform?: string;
 }
+
+export interface ComparisonContent {
+  jobDescription: string;
+  userResume: string;
+}
diff --git a/src/engine/core/engine.ts b/src/engine/core/engine.ts
index d8af16f..2ed0691 100644
--- a/src/engine/core/engine.ts
+++ b/src/engine/core/engine.ts
@@ -1,10 +1,11 @@
 import { EngineInput, EngineOutput } from "./types"
 import { EngineMode } from "./mode"
-import { EngineRunner } from "../runner/engineRunner";
+
 import { assertContextMatch } from "./assertions";
+import { EngineRunner } from "../runner/types";
 
 export async function runEngine<TContent>(
-mode: EngineMode<TContent>,
+  mode: EngineMode<TContent>,
   input: EngineInput<TContent>,
   runner: EngineRunner
 ): Promise<EngineOutput> {
@@ -13,7 +14,7 @@ mode: EngineMode<TContent>,
   const firstPrompt = mode.buildPrompt(input);
   const firstRaw = await runner.run(firstPrompt);
   let result = mode.formatOutput(firstRaw, input);
-
+  
 if (result.analysis && result.analysis.score < 80) {
     const refinementPrompt = `
       Your previous attempt received a quality score of ${result.analysis.score}/100.
diff --git a/src/engine/core/registry.ts b/src/engine/core/registry.ts
index 5d438b1..40f470a 100644
--- a/src/engine/core/registry.ts
+++ b/src/engine/core/registry.ts
@@ -1,11 +1,11 @@
 import { EngineModeId } from "./types";
 import { jobApplicationMode } from "../modes/jobApplication";
 import { marketplaceMode } from "../modes/marketplace";
-import { comparisonMode } from "../modes/comparison";
 import { EngineMode } from "./mode";
+import { jobComparisonMode } from "../modes/jobComparison";
 
 export const MODE_REGISTRY: Record<EngineModeId, EngineMode<any>> = {
   jobApplication: jobApplicationMode,
   marketplace: marketplaceMode,
-  comparison: comparisonMode,
+  jobComparison: jobComparisonMode,
 };
\ No newline at end of file
diff --git a/src/engine/core/request.ts b/src/engine/core/request.ts
index d953d0f..248de6a 100644
--- a/src/engine/core/request.ts
+++ b/src/engine/core/request.ts
@@ -1,24 +1,38 @@
-import { JobApplicationContent, MarketplaceContent } from "./content";
-import { ComparisonContent, EngineInput, Tone } from "./types";
+import { JobApplicationContent, ComparisonContent, MarketplaceContent } from "./content";
+import { Audience,  EngineContext,  EngineModeId, Provider, Tone } from "./types";
 
-export type JobApplicationRequest = {
-  mode: "jobApplication"
-  context: "job"
+type BaseRequest = {
+  provider: Provider;
+  tone: Tone;
+  audience: Audience;
+};
+
+export type JobApplicationRequest = BaseRequest & {
+  mode: typeof EngineModeId.JOB_APPLICATION;
+  context: typeof EngineContext.JOB;
   tone: Tone
-  audience: string
+  audience: Audience
   content: JobApplicationContent
 }
 
-export type MarketplaceRequest = {
-  mode: "marketplace"
-  context: "marketplace"
-  tone: Tone
-  audience: string
+export type MarketplaceRequest = BaseRequest & {
+  mode: typeof EngineModeId.MARKETPLACE;
+  context: typeof EngineContext.MARKETPLACE;
+  tone: Tone;
+  audience: Audience;
   content: MarketplaceContent
 }
 
-export type EngineRequest =
-  | (EngineInput<JobApplicationContent> & { mode: "jobApplication" })
-  | (EngineInput<MarketplaceContent> & { mode: "marketplace" })
-  | (EngineInput<ComparisonContent> & { mode: "comparison" });
+export type JobComparisonRequest = BaseRequest & {
+  mode: typeof EngineModeId.JOB_COMPARISON;
+  context: typeof EngineContext.COMPARISON;
+  tone: Tone;
+  audience: Audience;
+  content: ComparisonContent;
+};
+
+export type EngineRequest = 
+  | JobApplicationRequest 
+  | MarketplaceRequest 
+  | JobComparisonRequest;
 
diff --git a/src/engine/core/types.ts b/src/engine/core/types.ts
index b896d48..4a8331e 100644
--- a/src/engine/core/types.ts
+++ b/src/engine/core/types.ts
@@ -7,6 +7,15 @@ export const EngineContext = {
 export type EngineContext =
   (typeof EngineContext)[keyof typeof EngineContext];
 
+export const EngineModeId = {
+  JOB_APPLICATION: "jobApplication",
+  MARKETPLACE: "marketplace",
+  JOB_COMPARISON: "jobComparison",
+} as const;
+
+export type EngineModeId =
+  (typeof EngineModeId)[keyof typeof EngineModeId];
+
 export const Tone = {
   PROFESSIONAL: "professional",
   FRIENDLY: "friendly",
@@ -16,6 +25,22 @@ export const Tone = {
 
 export type Tone = (typeof Tone)[keyof typeof Tone];
 
+export const Audience = {
+  RECRUITERS: "recruiters",
+  BUYERS: "buyers",
+  GENERAL: "general",
+} as const;
+
+export type Audience = (typeof Audience)[keyof typeof Audience];
+
+export const Provider = {
+  GEMINI: "gemini",
+  OPENAI: "openai",
+  GROQ: "groq"
+} as const;
+
+export type Provider = (typeof Provider)[keyof typeof Provider];
+
 export interface EngineConstraints {
   language?: string
   maxLength?: number
@@ -25,7 +50,7 @@ export interface EngineConstraints {
 export interface EngineInput<TContent> {
   context: EngineContext
   tone: Tone
-  audience: string
+  audience: Audience
   constraints?: EngineConstraints
   content: TContent
 }
@@ -44,11 +69,3 @@ export interface EngineOutput {
     tone?: Tone;
   };
 }
-
-export interface ComparisonContent {
-  jobDescription: string;
-  userResume: string;
-}
-
-export type EngineModeId = "jobApplication" | "marketplace" | "comparison";
-
diff --git a/src/engine/modes/comparison.ts b/src/engine/modes/jobComparison.ts
similarity index 91%
rename from src/engine/modes/comparison.ts
rename to src/engine/modes/jobComparison.ts
index e8ec6b3..9ef3bd2 100644
--- a/src/engine/modes/comparison.ts
+++ b/src/engine/modes/jobComparison.ts
@@ -1,7 +1,8 @@
-import { EngineInput, EngineOutput, EngineContext, ComparisonContent } from "../core/types";
+import { EngineInput, EngineOutput, EngineContext } from "../core/types";
 import { EngineMode } from "../core/mode";
+import { ComparisonContent } from "../core/content"
 
-export const comparisonMode: EngineMode<ComparisonContent> = {
+export const jobComparisonMode: EngineMode<ComparisonContent> = {
   id: EngineContext.COMPARISON,
   name: "Match Analysis",
 
diff --git a/src/engine/runner/engineRunner.ts b/src/engine/runner/engineRunner.ts
deleted file mode 100644
index 1ca3ff4..0000000
--- a/src/engine/runner/engineRunner.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface EngineRunner {
-  run(prompt: string): Promise<string>;
-}
diff --git a/src/engine/runner/factory.ts b/src/engine/runner/factory.ts
new file mode 100644
index 0000000..b66e2b1
--- /dev/null
+++ b/src/engine/runner/factory.ts
@@ -0,0 +1,33 @@
+import { GeminiRunner } from "./geminiRunner";
+import { OpenAIRunner } from "./openAIRunner";
+import { FakeRunner } from "./fakeRunner";
+import { EngineRunner } from "./types";
+import { Provider } from "../core/types";
+
+import { GroqRunner } from "./groqRunner";
+
+export function getRunner(provider: Provider): EngineRunner {
+  const keys = {
+    openai: process.env.OPENAI_API_KEY,
+    gemini: process.env.GEMINI_API_KEY,
+    groq: process.env.GROQ_API_KEY,
+  };
+
+  const isPlaceholder = (key?: string) => 
+    !key || key.includes("_your_") || key.includes("sk_****");
+
+ switch (provider) {
+    case Provider.OPENAI:
+      return isPlaceholder(keys.openai) ? new FakeRunner() : new OpenAIRunner({ apiKey: keys.openai! });
+    
+    case Provider.GEMINI:
+      return isPlaceholder(keys.gemini) ? new FakeRunner() : new GeminiRunner({ apiKey: keys.gemini! });
+
+    case Provider.GROQ:
+      // When you build RitaRunner, just swap this out!
+      return isPlaceholder(keys.groq) ? new FakeRunner() : new GroqRunner({ apiKey: keys.groq! }); 
+
+    default:
+      return new FakeRunner();
+  }
+}
\ No newline at end of file
diff --git a/src/engine/runner/fakeRunner.ts b/src/engine/runner/fakeRunner.ts
index e0966e3..9581013 100644
--- a/src/engine/runner/fakeRunner.ts
+++ b/src/engine/runner/fakeRunner.ts
@@ -1,4 +1,4 @@
-import { EngineRunner } from "./engineRunner";
+import { EngineRunner } from "./types";
 
 export class FakeRunner implements EngineRunner {
   async run(prompt: string): Promise<string> {
diff --git a/src/engine/runner/geminiRunner.ts b/src/engine/runner/geminiRunner.ts
new file mode 100644
index 0000000..21c87be
--- /dev/null
+++ b/src/engine/runner/geminiRunner.ts
@@ -0,0 +1,21 @@
+import { GoogleGenerativeAI } from "@google/generative-ai";
+import { EngineRunner } from "./types";
+
+export class GeminiRunner implements EngineRunner {
+  private genAI: GoogleGenerativeAI;
+
+  constructor(config: { apiKey: string }) {
+    this.genAI = new GoogleGenerativeAI(config.apiKey);
+  }
+
+  async run(prompt: string): Promise<string> {
+    // the FLASH model is included in the free-tier, so we can use it for testing without needing a paid account
+    const model = this.genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+    
+    const result = await model.generateContent(prompt);
+    const text = result.response.text();
+
+    // Regex to remove Markdown code blocks
+    return text.replace(/```json\n?|```/g, "").trim();
+  }
+}
\ No newline at end of file
diff --git a/src/engine/runner/groqRunner.ts b/src/engine/runner/groqRunner.ts
new file mode 100644
index 0000000..e152573
--- /dev/null
+++ b/src/engine/runner/groqRunner.ts
@@ -0,0 +1,31 @@
+import { EngineRunner } from "./types";
+
+export class GroqRunner implements EngineRunner {
+  private apiKey: string;
+  private baseUrl = "https://api.groq.com/openai/v1/chat/completions";
+
+  constructor(config: { apiKey: string }) {
+    this.apiKey = config.apiKey;
+  }
+
+  async run(prompt: string): Promise<string> {
+    const response = await fetch(this.baseUrl, {
+      method: "POST",
+      headers: {
+        "Authorization": `Bearer ${this.apiKey}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        model: "llama-3.3-70b-versatile", // One of Groq's fastest free models
+        messages: [{ role: "user", content: prompt }],
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Groq API Error: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data.choices[0].message.content;
+  }
+}
\ No newline at end of file
diff --git a/src/engine/runner/openAIRunner.ts b/src/engine/runner/openAIRunner.ts
index 56b9edf..2d693bf 100644
--- a/src/engine/runner/openAIRunner.ts
+++ b/src/engine/runner/openAIRunner.ts
@@ -1,6 +1,5 @@
 import fetch from "node-fetch";
-import { EngineRunner } from "./engineRunner";
-import { OpenAIResponse, OpenAIError } from "./types";
+import { OpenAIResponse, OpenAIError, EngineRunner } from "./types";
 /**
  * OpenAIRunner: stub for connecting the engine to OpenAI
  * Currently does a simple fetch, with timeout & basic retry logic
diff --git a/src/engine/runner/types.ts b/src/engine/runner/types.ts
index cbfc67b..511082d 100644
--- a/src/engine/runner/types.ts
+++ b/src/engine/runner/types.ts
@@ -1,3 +1,6 @@
+export interface EngineRunner {
+  run(prompt: string): Promise<string>;
+}
 
 export interface OpenAIResponse {
   choices: {
diff --git a/tests/api/generate.test.ts b/tests/api/generate.test.ts
index ff66c52..0b493cc 100644
--- a/tests/api/generate.test.ts
+++ b/tests/api/generate.test.ts
@@ -25,7 +25,7 @@ jest.mock("next/server", () => ({
 describe("POST /api/generate", () => {
 
   beforeAll(() => {
-    process.env.USE_OPENAI = "false"; 
+    process.env.AI = "false"; 
   });
 
   
diff --git a/tests/engine/jobApplication.test.ts b/tests/engine/jobApplication.test.ts
index 4761883..85f6d50 100644
--- a/tests/engine/jobApplication.test.ts
+++ b/tests/engine/jobApplication.test.ts
@@ -1,6 +1,6 @@
 import { jobApplicationMode } from "../../src/engine/modes/jobApplication"
 import { runEngine } from "../../src/engine/core/engine"
-import { EngineContext, EngineInput, Tone } from "../../src/engine/core/types"
+import { Audience, EngineContext, EngineInput, Tone } from "../../src/engine/core/types"
 import { FakeRunner } from "@/engine/runner/fakeRunner"
 import { JobApplicationContent } from "@/engine/core/content"
 
@@ -9,7 +9,7 @@ describe("JobApplicationMode", () => {
     const input: EngineInput<JobApplicationContent> = {
       context: EngineContext.JOB,
       tone: Tone.PROFESSIONAL,
-      audience: "HR",
+      audience: Audience.RECRUITERS,
       content: {
         role: "Frontend Developer",
         company: "Awesome Startup",
diff --git a/tests/engine/jobComparison.test.ts b/tests/engine/jobComparison.test.ts
new file mode 100644
index 0000000..1563819
--- /dev/null
+++ b/tests/engine/jobComparison.test.ts
@@ -0,0 +1,77 @@
+import { runEngine } from "@/engine/core/engine";
+import { EngineContext, Tone } from "@/engine/core/types";
+import { jobComparisonMode } from "@/engine/modes/jobComparison";
+import { FakeRunner } from "@/engine/runner/fakeRunner";
+
+
+describe("Job Comparison Mode", () => {
+  it("should analyze resume against JD and format output correctly", async () => {
+    // 1. Setup Input following the ComparisonContent interface
+    const input = {
+      context: EngineContext.COMPARISON,
+      tone: Tone.PROFESSIONAL,
+      audience: "Recruiter",
+      content: {
+        userResume: "Senior Dev with React and Node experience.",
+        jobDescription: "Wanted: Senior Engineer expert in React and Rust."
+      },
+    };
+
+    // 2. Setup FakeRunner to return the specific JSON structure the mode expects
+    const runner = new FakeRunner();
+    jest.spyOn(runner, "run").mockResolvedValue(JSON.stringify({
+      matchScore: 85,
+      matchingSkills: ["React", "Seniority"],
+      missingSkills: ["Rust"],
+      summary: "Strong candidate with a minor stack gap.",
+      actionPlan: ["Learn Rust basics", "Highlight Node backend strength"]
+    }));
+
+    // 3. Execute
+    const result = await runEngine(jobComparisonMode, input as any, runner);
+
+    // 4. Assertions based on your formatOutput logic
+    expect(result.sections.score).toBe("85%");
+    expect(result.sections.matches).toContain("✅ React");
+    expect(result.sections.gaps).toContain("❌ Rust");
+    expect(result.body).toContain("### Match Score: 85%");
+    
+    // Check Analysis mapping (used for the auto-refinement logic)
+    expect(result.analysis?.score).toBe(85);
+    expect(result.analysis?.suggestions).toHaveLength(2);
+  });
+
+  it("should handle invalid JSON from AI gracefully", async () => {
+    const input = {
+      context: EngineContext.COMPARISON,
+      content: { userResume: "...", jobDescription: "..." }
+    };
+
+    const runner = new FakeRunner();
+    jest.spyOn(runner, "run").mockResolvedValue("Not a JSON string");
+
+    const result = await runEngine(jobComparisonMode, input as any, runner);
+
+    expect(result.body).toBe("Error parsing comparison data.");
+    expect(result.sections.error).toBeDefined();
+  });
+
+  it("should throw a mismatch error when context is missing (undefined)", async () => {
+    // We intentionally omit 'context' to reproduce your error
+    const inputWithMissingContext = {
+      // context: EngineContext.COMPARISON, <--- Missing!
+      tone: Tone.PROFESSIONAL,
+      content: {
+        userResume: "...",
+        jobDescription: "..."
+      },
+    };
+
+    const runner = new FakeRunner();
+
+    // We expect runEngine to throw the specific error you've been seeing
+    await expect(
+      runEngine(jobComparisonMode, inputWithMissingContext as any, runner)
+    ).rejects.toThrow("Engine context mismatch: mode 'comparison' cannot handle context 'undefined'");
+  });
+});
\ No newline at end of file
diff --git a/tests/engine/marketplace.test.ts b/tests/engine/marketplace.test.ts
index d790ec6..2697ee5 100644
--- a/tests/engine/marketplace.test.ts
+++ b/tests/engine/marketplace.test.ts
@@ -1,6 +1,6 @@
 // tests/engine/marketplace.test.ts
 import { marketplaceMode } from "../../src/engine/modes/marketplace"; 
-import { EngineContext, EngineInput, Tone } from "@/engine/core/types";
+import { Audience, EngineContext, EngineInput, Tone } from "@/engine/core/types";
 import { MarketplaceContent } from "@/engine/core/content";
 import { FakeRunner } from "@/engine/runner/fakeRunner";
 import { runEngine } from "@/engine/core/engine";
@@ -10,7 +10,7 @@ describe("Marketplace Mode", () => {
     const input: EngineInput<MarketplaceContent> = {
       context: EngineContext.MARKETPLACE,
       tone: Tone.FRIENDLY,
-      audience: "general buyers",
+      audience: Audience.BUYERS,
       content: {
         productName: "Vintage Leather Bag",
         description: "Genuine leather, slightly used, excellent condition",
diff --git a/tests/engine/openAIRunner.test.ts b/tests/engine/openAIRunner.test.ts
index ce2288f..f3fbaf9 100644
--- a/tests/engine/openAIRunner.test.ts
+++ b/tests/engine/openAIRunner.test.ts
@@ -1,6 +1,6 @@
 import { MarketplaceContent } from "@/engine/core/content";
 import { runEngine } from "@/engine/core/engine";
-import { EngineContext, EngineInput, Tone } from "@/engine/core/types";
+import { Audience, EngineContext, EngineInput, Tone } from "@/engine/core/types";
 import { marketplaceMode } from "@/engine/modes/marketplace";
 import { OpenAIRunner } from "@/engine/runner/openAIRunner";
 
@@ -34,7 +34,7 @@ describe("OpenAIRunner Integration (mocked fetch)", () => {
         const input: EngineInput<MarketplaceContent> = {
             context: EngineContext.MARKETPLACE,
             tone: Tone.FRIENDLY,
-            audience: "online buyers",
+            audience: Audience.BUYERS,
             content: {
                 productName: "Vintage Denim Jacket",
                 description: "Classic denim jacket, very good condition",
diff --git a/tsconfig.json b/tsconfig.json
index e5c292c..9265213 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,18 +1,24 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "strict": true,
     "noEmit": true,
     "module": "esnext",
-    "moduleResolution": "bundler", 
+    "moduleResolution": "bundler",
     "jsx": "react-jsx",
     "isolatedModules": true,
     "ignoreDeprecations": "5.0",
-    "baseUrl": ".", 
+    "baseUrl": ".",
     "rootDir": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*"
+      ]
     },
     "plugins": [
       {
@@ -30,7 +36,10 @@
     "src/**/*.ts",
     "src/**/*.tsx",
     "tests/**/*.ts",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }