From 719934c2ff438901ec6a30a8bc19fb46712aef9c Mon Sep 17 00:00:00 2001
From: zackKonfs <zack.konfs@gmail.com>
Date: Thu, 26 Mar 2026 23:13:43 +0800
Subject: [PATCH 01/13] feat: add interview AI coaching with real OpenAI
 scoring

---
 app/api/interview/coaching/route.ts |  90 ++++++++++++++++++++++++
 app/interview/page.tsx              | 105 ++++++----------------------
 package-lock.json                   |  13 ----
 3 files changed, 113 insertions(+), 95 deletions(-)
 create mode 100644 app/api/interview/coaching/route.ts

diff --git a/app/api/interview/coaching/route.ts b/app/api/interview/coaching/route.ts
new file mode 100644
index 0000000..b87e24b
--- /dev/null
+++ b/app/api/interview/coaching/route.ts
@@ -0,0 +1,90 @@
+export const runtime = "nodejs";
+
+import { NextRequest, NextResponse } from "next/server";
+import OpenAI from "openai";
+import Groq from "groq-sdk";
+
+const OPENAI_MODEL = "gpt-4o-mini";
+const GROQ_FALLBACK_MODEL = "llama-3.1-8b-instant";
+
+const SYSTEM_PROMPT = `You are an expert interview coach reviewing a mock interview conversation for a Singapore job seeker.
+
+Analyse the candidate's answers so far and return ONLY a valid JSON object with exactly these fields:
+{
+  "score": a number from 0 to 100 reflecting overall interview performance so far,
+  "strengths": an array of 2 specific things the candidate did well in their answers,
+  "improvements": an array of 2 specific coaching suggestions to improve their answers
+}
+
+Be specific and practical. Reference actual things the candidate said. No generic advice.`;
+
+function extractJson(text: string): string {
+  const fenceMatch = text.match(/```(?:json)?\s*\n?([\s\S]*?)```/);
+  if (fenceMatch) return fenceMatch[1].trim();
+  const braceStart = text.indexOf("{");
+  const braceEnd = text.lastIndexOf("}");
+  if (braceStart !== -1 && braceEnd > braceStart) {
+    return text.slice(braceStart, braceEnd + 1);
+  }
+  return text.trim();
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { conversation } = await req.json();
+
+    if (!Array.isArray(conversation) || conversation.length === 0) {
+      return NextResponse.json({ error: "No conversation provided" }, { status: 400 });
+    }
+
+    const transcript = conversation
+      .filter((m: { speaker: string; text: string }) => m.speaker !== "system")
+      .map((m: { speaker: string; text: string }) =>
+        `${m.speaker === "agent" ? "Interviewer" : "Candidate"}: ${m.text}`
+      )
+      .join("\n");
+
+    let raw = "";
+
+    const openaiKey = process.env.OPENAI_API_KEY;
+    if (openaiKey) {
+      try {
+        const client = new OpenAI({ apiKey: openaiKey });
+        const response = await client.chat.completions.create({
+          model: OPENAI_MODEL,
+          messages: [
+            { role: "system", content: SYSTEM_PROMPT },
+            { role: "user", content: transcript },
+          ],
+          temperature: 0,
+        });
+        raw = response.choices[0]?.message?.content ?? "";
+      } catch (err) {
+        console.warn("OpenAI coaching failed, falling back to Groq:", err);
+      }
+    }
+
+    if (!raw) {
+      const groqKey = process.env.GROQ_API_KEY;
+      if (!groqKey) {
+        return NextResponse.json({ error: "No AI API key configured" }, { status: 500 });
+      }
+      const client = new Groq({ apiKey: groqKey });
+      const response = await client.chat.completions.create({
+        model: GROQ_FALLBACK_MODEL,
+        messages: [
+          { role: "system", content: SYSTEM_PROMPT },
+          { role: "user", content: transcript },
+        ],
+        temperature: 0,
+      });
+      raw = response.choices[0]?.message?.content ?? "";
+    }
+
+    const parsed = JSON.parse(extractJson(raw));
+    return NextResponse.json(parsed);
+  } catch (err) {
+    console.error("Coaching route error:", err);
+    return NextResponse.json({ error: "Failed to generate coaching" }, { status: 500 });
+  }
+}
diff --git a/app/interview/page.tsx b/app/interview/page.tsx
index b2c6619..6b0b88d 100644
--- a/app/interview/page.tsx
+++ b/app/interview/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { useLanguage } from "@/components/providers/language-provider";
 import { createClient } from "@/lib/supabase/client";
@@ -60,81 +60,6 @@ function getOpeningLine(locale: string, role: InterviewRole, interviewType: Inte
   return `Hi, I’ll be your AI interviewer. We’re starting a ${interviewType} interview practice session for a ${roleLabel} role. Please begin by introducing yourself.`;
 }
 
-function buildMockCoaching(locale: string, messages: ConversationMessage[]) {
-  const userTurns = messages.filter((m) => m.speaker === "user");
-  const totalLength = userTurns.map((m) => m.text).join(" ").length;
-  const score = userTurns.length === 0 ? 0 : Math.max(58, Math.min(91, 58 + Math.floor(totalLength / 20)));
-
-  if (locale === "zh") {
-    return {
-      score,
-      strengths:
-        userTurns.length === 0
-          ? []
-          : totalLength > 180
-          ? ["回答更加完整", "表达更清晰", "结构逐渐改善"]
-          : ["愿意作答", "基础表达清楚"],
-      improvements:
-        userTurns.length === 0
-          ? []
-          : totalLength > 180
-          ? ["加入量化成果", "强化岗位相关性", "结尾更有说服力"]
-          : ["加入真实例子", "说明行动与结果", "补充更多细节"],
-    };
-  }
-
-  if (locale === "ms") {
-    return {
-      score,
-      strengths:
-        userTurns.length === 0
-          ? []
-          : totalLength > 180
-          ? ["Jawapan semakin lengkap", "Penyampaian lebih jelas", "Struktur semakin baik"]
-          : ["Sedia menjawab", "Asas jawapan boleh difahami"],
-      improvements:
-        userTurns.length === 0
-          ? []
-          : totalLength > 180
-          ? ["Tambah hasil yang boleh diukur", "Kaitkan lebih rapat dengan jawatan", "Penutup boleh lebih kuat"]
-          : ["Tambah contoh sebenar", "Terangkan tindakan dan hasil", "Tambah lebih banyak perincian"],
-    };
-  }
-
-  if (locale === "ta") {
-    return {
-      score,
-      strengths:
-        userTurns.length === 0
-          ? []
-          : totalLength > 180
-          ? ["பதில்கள் மேலும் முழுமையாக உள்ளன", "விளக்கம் தெளிவாக உள்ளது", "அமைப்பு மேம்படுகிறது"]
-          : ["பதிலளிக்கும் முனைப்பு உள்ளது", "அடிப்படை கருத்து புரிகிறது"],
-      improvements:
-        userTurns.length === 0
-          ? []
-          : totalLength > 180
-          ? ["அளவிடக்கூடிய முடிவுகளைச் சேர்க்கவும்", "பதவியுடன் தொடர்பை வலுப்படுத்தவும்", "முடிவை வலுப்படுத்தவும்"]
-          : ["உண்மையான உதாரணத்தைச் சேர்க்கவும்", "நடவடிக்கை மற்றும் முடிவை விளக்கவும்", "மேலும் விவரம் சேர்க்கவும்"],
-    };
-  }
-
-  return {
-    score,
-    strengths:
-      userTurns.length === 0
-        ? []
-        : totalLength > 180
-        ? ["Answers are becoming more complete", "Communication is clearer", "Structure is improving"]
-        : ["Willing to engage", "Basic ideas are understandable"],
-    improvements:
-      userTurns.length === 0
-        ? []
-        : totalLength > 180
-        ? ["Add measurable outcomes", "Tie answers closer to the role", "End more strongly"]
-        : ["Use a real example", "Explain actions and results", "Add more detail"],
-  };
-}
 
 export default function InterviewPage() {
   const router = useRouter();
@@ -152,10 +77,11 @@ export default function InterviewPage() {
   const [textInput, setTextInput] = useState("");
   const [sessionStarted, setSessionStarted] = useState(false);
 
-  const coaching = useMemo(
-    () => buildMockCoaching(safeLocale, conversation),
-    [safeLocale, conversation]
-  );
+  const [coaching, setCoaching] = useState<{
+    score: number;
+    strengths: string[];
+    improvements: string[];
+  }>({ score: 0, strengths: [], improvements: [] });
 
   function startSession() {
     setSessionStarted(true);
@@ -188,7 +114,7 @@ export default function InterviewPage() {
     ]);
   }
 
-  function sendTextReply() {
+  async function sendTextReply() {
     if (!textInput.trim()) return;
 
     const userMessage: ConversationMessage = {
@@ -198,8 +124,23 @@ export default function InterviewPage() {
       timestamp: formatTime(),
     };
 
-    setConversation((prev) => [...prev, userMessage]);
+    const updatedConversation = [...conversation, userMessage];
+    setConversation(updatedConversation);
     setTextInput("");
+
+    try {
+      const res = await fetch("/api/interview/coaching", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ conversation: updatedConversation }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setCoaching(data);
+      }
+    } catch {
+      // silently keep existing coaching if the request fails
+    }
   }
 
   return (
diff --git a/package-lock.json b/package-lock.json
index cec3633..6c28944 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1325,7 +1325,6 @@
       "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.98.0.tgz",
       "integrity": "sha512-Ohc97CtInLwZyiSASz7tT9/Abm/vqnIbO9REp+PivVUII8UZsuI3bngRQnYgJdFoOIwvaEII1fX1qy8x0CyNiw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@supabase/auth-js": "2.98.0",
         "@supabase/functions-js": "2.98.0",
@@ -1407,7 +1406,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -1490,7 +1488,6 @@
       "integrity": "sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.56.1",
         "@typescript-eslint/types": "8.56.1",
@@ -2073,7 +2070,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3322,7 +3318,6 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -3492,7 +3487,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5054,7 +5048,6 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -6085,7 +6078,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -6352,7 +6344,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -6365,7 +6356,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -7450,7 +7440,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7522,7 +7511,6 @@
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -7660,7 +7648,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

From c32fbf3d813344d8d97c526ea0775e63dc8fa572 Mon Sep 17 00:00:00 2001
From: zackKonfs <zack.konfs@gmail.com>
Date: Thu, 26 Mar 2026 23:51:04 +0800
Subject: [PATCH 02/13] feat: add voice to text for interview mic button

---
 app/api/speech/route.ts |  33 +++++++++++++
 app/interview/page.tsx  |  63 +++++++++++++++++++++++--
 app/resume/page.tsx     | 100 +++++++++++++++++++++++++++++++++++++---
 3 files changed, 186 insertions(+), 10 deletions(-)
 create mode 100644 app/api/speech/route.ts

diff --git a/app/api/speech/route.ts b/app/api/speech/route.ts
new file mode 100644
index 0000000..434ca50
--- /dev/null
+++ b/app/api/speech/route.ts
@@ -0,0 +1,33 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const key = process.env.AZURE_SPEECH_KEY;
+  const region = process.env.AZURE_SPEECH_REGION;
+
+  if (!key || !region) {
+    return NextResponse.json(
+      { error: "Azure Speech credentials are not configured" },
+      { status: 500 },
+    );
+  }
+
+  const tokenRes = await fetch(
+    `https://${region}.api.cognitive.microsoft.com/sts/v1.0/issueToken`,
+    {
+      method: "POST",
+      headers: { "Ocp-Apim-Subscription-Key": key },
+    },
+  );
+
+  if (!tokenRes.ok) {
+    return NextResponse.json(
+      { error: "Failed to fetch Azure Speech token" },
+      { status: 502 },
+    );
+  }
+
+  const token = await tokenRes.text();
+  return NextResponse.json({ token, region });
+}
diff --git a/app/interview/page.tsx b/app/interview/page.tsx
index 6b0b88d..f49f4d6 100644
--- a/app/interview/page.tsx
+++ b/app/interview/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { useLanguage } from "@/components/providers/language-provider";
 import { createClient } from "@/lib/supabase/client";
@@ -83,6 +83,53 @@ export default function InterviewPage() {
     improvements: string[];
   }>({ score: 0, strengths: [], improvements: [] });
 
+  const [micState, setMicState] = useState<"idle" | "listening" | "processing">("idle");
+  const recognizerRef = useRef<{
+    stopContinuousRecognitionAsync: (cb?: () => void, err?: (e: string) => void) => void;
+  } | null>(null);
+
+  async function handleMicClick() {
+    if (micState === "listening") {
+      recognizerRef.current?.stopContinuousRecognitionAsync(
+        () => setMicState("idle"),
+        () => setMicState("idle"),
+      );
+      return;
+    }
+
+    setMicState("processing");
+    try {
+      const res = await fetch("/api/speech");
+      if (!res.ok) throw new Error("Failed to get speech token");
+      const { token, region } = await res.json();
+
+      const SpeechSDK = await import("microsoft-cognitiveservices-speech-sdk");
+      const speechConfig = SpeechSDK.SpeechConfig.fromAuthorizationToken(token, region);
+      speechConfig.speechRecognitionLanguage = "en-SG";
+      const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
+      const recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
+
+      recognizerRef.current = recognizer;
+
+      recognizer.recognized = (_: unknown, e: { result: { reason: number; text: string } }) => {
+        if (e.result.reason === SpeechSDK.ResultReason.RecognizedSpeech && e.result.text) {
+          setTextInput((prev) => (prev ? prev + " " + e.result.text : e.result.text));
+        }
+      };
+
+      recognizer.startContinuousRecognitionAsync(
+        () => setMicState("listening"),
+        (err: string) => {
+          console.error("Speech recognition error:", err);
+          setMicState("idle");
+        },
+      );
+    } catch (err) {
+      console.error("Mic setup failed:", err);
+      setMicState("idle");
+    }
+  }
+
   function startSession() {
     setSessionStarted(true);
     setConversation([
@@ -346,9 +393,19 @@ export default function InterviewPage() {
                     </button>
                     <button
                       type="button"
-                      className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-medium text-slate-700"
+                      onClick={() => void handleMicClick()}
+                      disabled={!sessionStarted || micState === "processing"}
+                      className={`rounded-xl border px-4 py-3 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50 ${
+                        micState === "listening"
+                          ? "border-red-300 bg-red-50 text-red-600"
+                          : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
+                      }`}
                     >
-                      Mic
+                      {micState === "listening"
+                        ? "Listening..."
+                        : micState === "processing"
+                        ? "Processing..."
+                        : "Mic"}
                     </button>
                   </div>
                 </div>
diff --git a/app/resume/page.tsx b/app/resume/page.tsx
index daeb4d6..db11346 100644
--- a/app/resume/page.tsx
+++ b/app/resume/page.tsx
@@ -24,6 +24,11 @@ export default function ResumeOnboardingPage() {
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [lastResumeId, setLastResumeId] = useState<string | null>(null);
   const [userResumes, setUserResumes] = useState<ResumeSummary[]>([]);
+  const [micState, setMicState] = useState<"idle" | "listening" | "processing">("idle");
+  const [voiceText, setVoiceText] = useState("");
+  const recognizerRef = useRef<{
+    stopContinuousRecognitionAsync: (cb?: () => void, err?: (e: string) => void) => void;
+  } | null>(null);
 
   useEffect(() => {
     const supabase = createClient();
@@ -165,6 +170,48 @@ export default function ResumeOnboardingPage() {
     }
   }, [router, selectedFile, refetchResumeStatus, t]);
 
+  async function handleMicClick() {
+    if (micState === "listening") {
+      recognizerRef.current?.stopContinuousRecognitionAsync(
+        () => setMicState("idle"),
+        () => setMicState("idle"),
+      );
+      return;
+    }
+
+    setMicState("processing");
+    try {
+      const res = await fetch("/api/speech");
+      if (!res.ok) throw new Error("Failed to get speech token");
+      const { token, region } = await res.json();
+
+      const SpeechSDK = await import("microsoft-cognitiveservices-speech-sdk");
+      const speechConfig = SpeechSDK.SpeechConfig.fromAuthorizationToken(token, region);
+      speechConfig.speechRecognitionLanguage = "en-SG";
+      const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
+      const recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
+
+      recognizerRef.current = recognizer;
+
+      recognizer.recognized = (_: unknown, e: { result: { reason: number; text: string } }) => {
+        if (e.result.reason === SpeechSDK.ResultReason.RecognizedSpeech && e.result.text) {
+          setVoiceText((prev) => (prev ? prev + " " + e.result.text : e.result.text));
+        }
+      };
+
+      recognizer.startContinuousRecognitionAsync(
+        () => setMicState("listening"),
+        (err: string) => {
+          console.error("Speech recognition error:", err);
+          setMicState("idle");
+        },
+      );
+    } catch (err) {
+      console.error("Mic setup failed:", err);
+      setMicState("idle");
+    }
+  }
+
   const reviewHref =
     lastResumeId != null
       ? `/resume/review?resume_id=${encodeURIComponent(lastResumeId)}`
@@ -223,13 +270,39 @@ export default function ResumeOnboardingPage() {
                 void handleUpload();
               }}
             >
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept=".pdf,.docx"
-                onChange={handleFileChange}
-                className="block w-full text-sm text-slate-600 file:mr-4 file:rounded-lg file:border-0 file:bg-navy-50 file:px-4 file:py-2.5 file:text-sm file:font-semibold file:text-navy-700 hover:file:bg-navy-100"
-              />
+              <div className="flex items-center gap-3">
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".pdf,.docx"
+                  onChange={handleFileChange}
+                  className="block flex-1 text-sm text-slate-600 file:mr-4 file:rounded-lg file:border-0 file:bg-navy-50 file:px-4 file:py-2.5 file:text-sm file:font-semibold file:text-navy-700 hover:file:bg-navy-100"
+                />
+                <button
+                  type="button"
+                  onClick={() => void handleMicClick()}
+                  title={micState === "listening" ? "Stop recording" : "Start voice input"}
+                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl border transition ${
+                    micState === "listening"
+                      ? "animate-pulse border-red-300 bg-red-50 text-red-600"
+                      : micState === "processing"
+                      ? "border-slate-200 bg-slate-50 text-slate-400"
+                      : "border-slate-200 bg-white text-slate-600 hover:bg-slate-50"
+                  }`}
+                >
+                  {micState === "processing" ? (
+                    <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+                    </svg>
+                  ) : (
+                    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <rect x="9" y="2" width="6" height="12" rx="3" />
+                      <path d="M5 10a7 7 0 0014 0M12 19v3M9 22h6" />
+                    </svg>
+                  )}
+                </button>
+              </div>
 
               {selectedFileName ? (
                 <p className="mt-3 text-sm font-medium text-navy-950">
@@ -255,6 +328,19 @@ export default function ResumeOnboardingPage() {
               </button>
             </form>
 
+            <div className="mt-5">
+              <label className="mb-2 block text-sm font-medium text-slate-700">
+                Or describe your experience verbally
+              </label>
+              <textarea
+                value={voiceText}
+                onChange={(e) => setVoiceText(e.target.value)}
+                placeholder="Your spoken input will appear here..."
+                rows={4}
+                className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-navy-950"
+              />
+            </div>
+
             <div className="mt-3 flex flex-wrap gap-3">
               <button
                 type="button"

From cbeb3d763fc25e713dab854a780127d5f4447b45 Mon Sep 17 00:00:00 2001
From: anrulazrudinwee-stack <anrulazrudinwee@gmail.com>
Date: Sat, 28 Mar 2026 11:23:02 +0800
Subject: [PATCH 03/13] new update

---
 app/api/resume/route.ts           |   9 +-
 app/resume/builder/page.tsx       | 106 +------
 app/resume/page.tsx               |   1 -
 app/resume/review/page.tsx        | 501 ++----------------------------
 app/resume/voice/page.tsx         | 298 ++++++------------
 lib/services/jobRecommendation.ts |  61 ++--
 6 files changed, 148 insertions(+), 828 deletions(-)

diff --git a/app/api/resume/route.ts b/app/api/resume/route.ts
index a01eb03..d6ca325 100644
--- a/app/api/resume/route.ts
+++ b/app/api/resume/route.ts
@@ -86,7 +86,6 @@ export async function POST(req: NextRequest) {
 
   const formData = await req.formData();
   const file = formData.get("file");
-  const voiceText = (formData.get("voiceText") as string) || "";
 
   if (!file || !(file instanceof Blob)) {
     return NextResponse.json({ detail: "No file provided" }, { status: 400 });
@@ -118,15 +117,9 @@ export async function POST(req: NextRequest) {
     return NextResponse.json({ detail: "File produced no text" }, { status: 422 });
   }
 
-  const combinedInput = `RESUME DOCUMENT:
-${resumeText}
-
-ADDITIONAL CONTEXT FROM CANDIDATE:
-${voiceText || "None provided"}`;
-
   let raw: string;
   try {
-    raw = await callLlm(combinedInput);
+    raw = await callLlm(resumeText);
   } catch (e) {
     return NextResponse.json(
       { detail: `AI analysis failed: ${e instanceof Error ? e.message : e}` },
diff --git a/app/resume/builder/page.tsx b/app/resume/builder/page.tsx
index 1c6afb8..948c259 100644
--- a/app/resume/builder/page.tsx
+++ b/app/resume/builder/page.tsx
@@ -1,11 +1,9 @@
 "use client";
 
 import Link from "next/link";
-import { ChangeEvent, useEffect, useMemo, useState } from "react";
+import { ChangeEvent, useMemo, useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { useLanguage } from "@/components/providers/language-provider";
-import { listResumes, getResumeById } from "@/lib/api";
-import { createClient } from "@/lib/supabase/client";
 
 type ExperienceItem = {
   id: string;
@@ -94,102 +92,6 @@ export default function ResumeBuilderPage() {
     },
   ]);
 
-  const [prefillLoading, setPrefillLoading] = useState(true);
-
-  useEffect(() => {
-    async function prefillFromResume() {
-      try {
-        const supabase = createClient();
-        const { data: { user } } = await supabase.auth.getUser();
-        if (user?.email) setEmail(user.email);
-
-        console.log("[ResumeBuilder] Fetching resumes from GET /api/resumes …");
-        const { resumes } = await listResumes();
-        console.log("[ResumeBuilder] listResumes response:", resumes);
-
-        const analyzed = resumes.find((r) => r.parsed_profile);
-        if (!analyzed) {
-          console.log("[ResumeBuilder] No resume with parsed_profile found. Resumes returned:", resumes.length);
-          return;
-        }
-        console.log("[ResumeBuilder] Found analyzed resume:", analyzed.id, analyzed.file_name);
-
-        console.log(`[ResumeBuilder] Fetching resume detail from GET /api/resumes/${analyzed.id} …`);
-        const data = await getResumeById(analyzed.id);
-        console.log("[ResumeBuilder] getResumeById response:", data);
-
-        const profile = data?.resume?.parsed_profile;
-        if (!profile) {
-          console.log("[ResumeBuilder] parsed_profile is null on the fetched resume.");
-          return;
-        }
-        console.log("[ResumeBuilder] parsed_profile:", profile);
-
-        // full_name is not in the ResumeProfile schema — extract from the first
-        // non-empty line of raw_text, which is almost always the candidate's name.
-        const rawText = data?.resume?.raw_text ?? "";
-        const firstLine = rawText.split("\n").map((l) => l.trim()).find((l) => l.length > 0) ?? "";
-        const looksLikeName =
-          firstLine.length > 0 &&
-          firstLine.length < 60 &&
-          !/^\s*(email|phone|mobile|address|resume|curriculum|cv|summary|profile|objective)\b/i.test(firstLine) &&
-          !firstLine.includes("@") &&
-          !firstLine.includes("|");
-        console.log("[ResumeBuilder] Name candidate from raw_text first line:", JSON.stringify(firstLine), "→ using:", looksLikeName);
-        if (looksLikeName) setFullName(firstLine);
-
-        if (profile.summary) setSummary(profile.summary);
-
-        if (profile.experiences?.length) {
-          setExperiences(
-            profile.experiences.map((e) => ({
-              id: createId(),
-              jobTitle: e.title ?? "",
-              company: e.company ?? "",
-              location: "",
-              startDate: e.start_date ?? "",
-              endDate: e.end_date ?? "",
-              description: e.description ?? "",
-            })),
-          );
-        }
-
-        if (profile.education?.length) {
-          setEducations(
-            profile.education.map((ed) => ({
-              id: createId(),
-              school: ed.institution ?? "",
-              qualification: ed.qualification ?? "",
-              fieldOfStudy: ed.field_of_study ?? "",
-              startDate: "",
-              endDate: ed.graduation_year != null ? String(ed.graduation_year) : "",
-            })),
-          );
-        }
-
-        if (profile.skills?.length) {
-          setSkills(
-            profile.skills.slice(0, 12).map((name) => ({
-              id: createId(),
-              name,
-              level: 75,
-            })),
-          );
-        }
-
-        if (profile.headline) setTargetRole(profile.headline);
-
-        console.log("[ResumeBuilder] Pre-fill complete.");
-      } catch (err) {
-        console.error("[ResumeBuilder] prefillFromResume error:", err);
-      } finally {
-        setPrefillLoading(false);
-      }
-    }
-
-    void prefillFromResume();
-  }, []);
-
   function handlePhotoChange(event: ChangeEvent<HTMLInputElement>) {
     const file = event.target.files?.[0];
     if (!file) return;
@@ -314,12 +216,6 @@ export default function ResumeBuilderPage() {
           <p className="mt-4 text-base leading-7 text-slate-600 sm:text-lg">
             {t("resume_builder_page_lead")}
           </p>
-          {prefillLoading ? (
-            <p className="mt-3 flex items-center gap-2 text-sm text-slate-500">
-              <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-navy-950" />
-              Loading your resume data…
-            </p>
-          ) : null}
         </div>
 
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] lg:gap-8">
diff --git a/app/resume/page.tsx b/app/resume/page.tsx
index 815e6e9..0172912 100644
--- a/app/resume/page.tsx
+++ b/app/resume/page.tsx
@@ -187,7 +187,6 @@ export default function ResumeOnboardingPage() {
     try {
       const formData = new FormData();
       formData.append("file", selectedFile);
-      formData.append("voiceText", voiceText);
 
       const res = await fetch("/api/resume", { method: "POST", body: formData });
       const json = await res.json();
diff --git a/app/resume/review/page.tsx b/app/resume/review/page.tsx
index 187b341..0a95adc 100644
--- a/app/resume/review/page.tsx
+++ b/app/resume/review/page.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import React, { Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { Suspense, useCallback, useEffect, useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { useLanguage } from "@/components/providers/language-provider";
 import { useResumeStatus } from "@/components/providers/resume-status-provider";
@@ -82,47 +82,6 @@ const SUGGESTION_TYPE_LABEL: Record<ResumeSuggestion["type"], string> = {
   ats_optimization: "ATS",
 };
 
-function parseImprovedResume(text: string): {
-  summary: string;
-  experience: string;
-  skills: string;
-  education: string;
-} {
-  const lines = text.split("\n");
-  const sections: Record<string, string[]> = { summary: [], experience: [], skills: [], education: [] };
-  let current = "summary";
-
-  for (const line of lines) {
-    // Strip markdown bold markers for header detection: **Work Experience** → work experience
-    const stripped = line.replace(/\*\*/g, "").trim();
-
-    if (/^(summary|professional summary|profile|about me|objective)\s*:?\s*$/i.test(stripped)) {
-      current = "summary"; continue;
-    }
-    if (/^(experience|work experience|employment|career|professional experience)\s*:?\s*$/i.test(stripped)) {
-      current = "experience"; continue;
-    }
-    if (/^(skills|technical skills|core competencies|key competencies|competencies|areas of expertise)\s*:?\s*$/i.test(stripped)) {
-      current = "skills"; continue;
-    }
-    if (/^(education|academic|qualifications|certifications?)\s*:?\s*$/i.test(stripped)) {
-      current = "education"; continue;
-    }
-
-    // Also skip lines that are only decorators like "---" or "==="
-    if (/^[-=]{3,}$/.test(stripped)) continue;
-
-    sections[current].push(line);
-  }
-
-  return {
-    summary: sections.summary.join("\n").trim(),
-    experience: sections.experience.join("\n").trim(),
-    skills: sections.skills.join("\n").trim(),
-    education: sections.education.join("\n").trim(),
-  };
-}
-
 function ResumeReviewContent() {
   const { t } = useLanguage();
   const { refetch: refetchResumeStatus } = useResumeStatus();
@@ -136,17 +95,6 @@ function ResumeReviewContent() {
   const [profile, setProfile] = useState<ResumeProfile | null>(null);
   const [suggestions, setSuggestions] = useState<ResumeSuggestion[] | null>(null);
   const [resumeId, setResumeId] = useState<string | null>(null);
-  const [improving, setImproving] = useState(false);
-  const [improvedResume, setImprovedResume] = useState<string | null>(null);
-  const [improveError, setImproveError] = useState<string | null>(null);
-  const [rescoring, setRescoring] = useState(false);
-  const [rescoreScore, setRescoreScore] = useState<number | null>(null);
-  const [overrideSummary, setOverrideSummary] = useState<string | null>(null);
-  const [overrideExperience, setOverrideExperience] = useState<string | null>(null);
-  const [overrideSkills, setOverrideSkills] = useState<string | null>(null);
-  const [overrideEducation, setOverrideEducation] = useState<string | null>(null);
-  const [updateSuccess, setUpdateSuccess] = useState(false);
-  const sectionRef = useRef<HTMLDivElement>(null);
 
   const loadResume = useCallback(async (id: string) => {
     try {
@@ -201,49 +149,6 @@ function ResumeReviewContent() {
         return;
       }
 
-      // Check for a voice-generated resume first
-      try {
-        const voiceRaw = sessionStorage.getItem("vericlause.voiceBuilderResult");
-        if (voiceRaw) {
-          sessionStorage.removeItem("vericlause.voiceBuilderResult");
-          const v = JSON.parse(voiceRaw);
-          const syntheticProfile = {
-            headline: v.targetRole ?? null,
-            summary: v.summary ?? null,
-            skills: v.skills
-              ? v.skills.split(/,|\n/).map((s: string) => s.trim()).filter(Boolean)
-              : [],
-            years_experience: null,
-            experiences: v.experience
-              ? [{ title: null, company: null, start_date: null, end_date: null, description: v.experience }]
-              : [],
-            education: v.education
-              ? [{ institution: null, qualification: v.education, field_of_study: null, graduation_year: null }]
-              : [],
-            target_roles: v.targetRole ? [v.targetRole] : [],
-            target_industries: [],
-            location_preference: null,
-            seniority_level: null,
-          };
-          if (!cancelled) {
-            setFileName("Voice Resume");
-            setProfile(syntheticProfile as any);
-            setOverrideSummary(v.summary ?? null);
-            setOverrideExperience(
-              [v.experience, v.achievement ? `Achievement: ${v.achievement}` : ""].filter(Boolean).join("\n\n") || null,
-            );
-            setOverrideSkills(v.skills ?? null);
-            setOverrideEducation(
-              [v.education, v.certifications].filter(Boolean).join("\n") || null,
-            );
-            setLoading(false);
-          }
-          return;
-        }
-      } catch {
-        // sessionStorage unavailable or parse error — fall through to normal load
-      }
-
       const fromQuery = searchParams.get("resume_id");
       let id = fromQuery;
 
@@ -331,305 +236,7 @@ function ResumeReviewContent() {
     }
   }
 
-  async function handleGenerateImproved() {
-    if (!profile) return;
-    setImproving(true);
-    setImproveError(null);
-    setImprovedResume(null);
-
-    const resumeText = [
-      profile.summary,
-      formatExperiencesText(profile),
-      profile.skills?.length ? `Skills: ${profile.skills.join(", ")}` : "",
-      formatEducationText(profile),
-    ]
-      .filter(Boolean)
-      .join("\n\n");
-
-    const feedback = suggestions?.map((s) =>
-      s.suggested_rewrite ? `${s.suggestion} → ${s.suggested_rewrite}` : s.suggestion,
-    ) ?? [];
-
-    try {
-      const res = await fetch("/api/resume/improve", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ resumeText, feedback }),
-      });
-      const json = await res.json();
-      if (!res.ok) {
-        setImproveError(json.detail ?? "Something went wrong. Please try again.");
-        return;
-      }
-      setImprovedResume(json.improvedResume);
-    } catch {
-      setImproveError("Network error. Please check your connection and try again.");
-    } finally {
-      setImproving(false);
-    }
-  }
-
-  function getDownloadContent() {
-    if (improvedResume) return improvedResume;
-    return [
-      profile?.summary ?? "",
-      profile ? formatExperiencesText(profile) : "",
-      profile?.skills?.length ? `Skills: ${profile.skills.join(", ")}` : "",
-      profile ? formatEducationText(profile) : "",
-    ]
-      .filter(Boolean)
-      .join("\n\n");
-  }
-
-  async function handleDownloadPdf() {
-    const { pdf, Document, Page, Text, View, StyleSheet } = await import("@react-pdf/renderer");
-
-    // 2 cm margins (1 pt ≈ 0.0353 cm → 2 cm ≈ 56.7 pt)
-    const MARGIN = 56.7;
-
-    const styles = StyleSheet.create({
-      page: {
-        paddingHorizontal: MARGIN,
-        paddingVertical: MARGIN,
-        fontFamily: "Helvetica",
-        backgroundColor: "#ffffff",
-      },
-      name: {
-        fontSize: 18,
-        fontFamily: "Helvetica-Bold",
-        color: "#0f172a",
-        marginBottom: 4,
-      },
-      contact: {
-        fontSize: 9,
-        color: "#6b7280",
-        marginBottom: 10,
-      },
-      divider: {
-        borderBottomWidth: 1,
-        borderBottomColor: "#d1d5db",
-        marginBottom: 14,
-      },
-      sectionHeader: {
-        fontSize: 11,
-        fontFamily: "Helvetica-Bold",
-        color: "#0f172a",
-        textTransform: "uppercase" as const,
-        marginTop: 16,
-        marginBottom: 6,
-        paddingBottom: 2,
-        borderBottomWidth: 0.5,
-        borderBottomColor: "#e5e7eb",
-      },
-      bodyText: {
-        fontSize: 10,
-        color: "#374151",
-        lineHeight: 1.55,
-        marginBottom: 3,
-      },
-      expBlock: { marginBottom: 8 },
-      expTitle: {
-        fontSize: 10,
-        fontFamily: "Helvetica-Bold",
-        color: "#0f172a",
-        marginBottom: 1,
-      },
-      expDates: {
-        fontSize: 9,
-        color: "#6b7280",
-        marginBottom: 3,
-      },
-      bulletRow: {
-        flexDirection: "row" as const,
-        marginBottom: 2,
-        paddingLeft: 8,
-      },
-      bulletDot: { width: 10, fontSize: 10, color: "#374151" },
-      bulletText: { flex: 1, fontSize: 10, color: "#374151", lineHeight: 1.55 },
-    });
-
-    const candidateName = (profile as any)?.full_name || profile?.headline || "Resume";
-    const safeFileName =
-      candidateName.replace(/[^a-zA-Z0-9\s]/g, "").trim().replace(/\s+/g, "_") ||
-      "resume";
-    const fileName = `${safeFileName}_vericlause_resume.pdf`;
-
-    const contactParts = [
-      (profile as any)?.email,
-      (profile as any)?.phone,
-      (profile as any)?.location,
-    ].filter(Boolean);
-    const contactLine = contactParts.join("  |  ");
-
-    // Parse experience text into structured blocks separated by blank lines.
-    // Within each block: first line = role/company header, second line = dates if it
-    // contains a year or "present", remaining lines = bullet points.
-    function buildExperienceNodes() {
-      if (!experienceValue) return [];
-      const datePattern = /\d{4}|present|current/i;
-      return experienceValue
-        .split(/\n{2,}/)
-        .map((block) => block.trim())
-        .filter(Boolean)
-        .map((block, bi) => {
-          const lines = block.split("\n").map((l) => l.trim()).filter(Boolean);
-          const [headerLine, ...rest] = lines;
-          let datesLine = "";
-          let bulletLines = rest;
-          if (rest.length > 0 && datePattern.test(rest[0])) {
-            datesLine = rest[0];
-            bulletLines = rest.slice(1);
-          }
-          const cleanText = (s: string) => s.replace(/\*\*/g, "").replace(/^[-•*]\s*/, "");
-          return React.createElement(
-            View,
-            { key: bi, style: styles.expBlock },
-            React.createElement(Text, { style: styles.expTitle }, cleanText(headerLine)),
-            datesLine
-              ? React.createElement(Text, { style: styles.expDates }, cleanText(datesLine))
-              : null,
-            ...bulletLines.map((line, li) =>
-              React.createElement(
-                View,
-                { key: li, style: styles.bulletRow },
-                React.createElement(Text, { style: styles.bulletDot }, "•"),
-                React.createElement(Text, { style: styles.bulletText }, cleanText(line)),
-              ),
-            ),
-          );
-        });
-    }
-
-    const strip = (s: string) => s.replace(/\*\*/g, "");
-
-    const doc = React.createElement(
-      Document,
-      null,
-      React.createElement(
-        Page,
-        { size: "A4", style: styles.page },
-        React.createElement(
-          View,
-          null,
-          // ── Header ──────────────────────────────────────────
-          React.createElement(Text, { style: styles.name }, candidateName),
-          contactLine
-            ? React.createElement(Text, { style: styles.contact }, contactLine)
-            : null,
-          React.createElement(View, { style: styles.divider }),
-
-          // ── Summary ─────────────────────────────────────────
-          summaryValue
-            ? React.createElement(
-                View,
-                null,
-                React.createElement(Text, { style: styles.sectionHeader }, "Summary"),
-                React.createElement(Text, { style: styles.bodyText }, strip(summaryValue)),
-              )
-            : null,
-
-          // ── Experience ──────────────────────────────────────
-          experienceValue
-            ? React.createElement(
-                View,
-                null,
-                React.createElement(Text, { style: styles.sectionHeader }, "Experience"),
-                ...buildExperienceNodes(),
-              )
-            : null,
-
-          // ── Skills ──────────────────────────────────────────
-          skillsValue
-            ? React.createElement(
-                View,
-                null,
-                React.createElement(Text, { style: styles.sectionHeader }, "Skills"),
-                React.createElement(Text, { style: styles.bodyText }, strip(skillsValue)),
-              )
-            : null,
-
-          // ── Education ───────────────────────────────────────
-          educationValue
-            ? React.createElement(
-                View,
-                null,
-                React.createElement(Text, { style: styles.sectionHeader }, "Education"),
-                React.createElement(Text, { style: styles.bodyText }, strip(educationValue)),
-              )
-            : null,
-        ),
-      ),
-    );
-
-    const blob = await pdf(doc).toBlob();
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = fileName;
-    a.click();
-    URL.revokeObjectURL(url);
-  }
-
-  async function handleDownloadDocx() {
-    const content = getDownloadContent();
-    const { Document, Packer, Paragraph, TextRun } = await import("docx");
-    const children = content.split("\n").map(
-      (line) => new Paragraph({ children: [new TextRun(line)] }),
-    );
-    const doc = new Document({ sections: [{ properties: {}, children }] });
-    const blob = await Packer.toBlob(doc);
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "resume_improved.docx";
-    a.click();
-    URL.revokeObjectURL(url);
-  }
-
-  function handleApplyImproved() {
-    if (!improvedResume) return;
-    const parsed = parseImprovedResume(improvedResume);
-
-    // If section parsing found nothing useful, fall back to putting
-    // the entire improved text into the experience field as a single block.
-    const hasAnySections = parsed.summary || parsed.experience || parsed.skills || parsed.education;
-
-    if (hasAnySections) {
-      if (parsed.summary) setOverrideSummary(parsed.summary);
-      if (parsed.experience) setOverrideExperience(parsed.experience);
-      if (parsed.skills) setOverrideSkills(parsed.skills);
-      if (parsed.education) setOverrideEducation(parsed.education);
-    } else {
-      setOverrideExperience(improvedResume);
-    }
-
-    setUpdateSuccess(true);
-    setTimeout(() => setUpdateSuccess(false), 3000);
-    sectionRef.current?.scrollIntoView({ behavior: "smooth" });
-  }
-
-  async function handleRescore() {
-    const text = getDownloadContent();
-    if (!text.trim()) return;
-    setRescoring(true);
-    try {
-      const res = await fetch("/api/resume/rescore", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ text }),
-      });
-      const json = await res.json();
-      if (res.ok && typeof json.score === "number") {
-        setRescoreScore(json.score * 10);
-      }
-    } catch {
-      // silently keep current score
-    } finally {
-      setRescoring(false);
-    }
-  }
-
-  const score = rescoreScore ?? deriveIndicatorScore(suggestions);
+  const score = deriveIndicatorScore(suggestions);
   const { toImprove, positiveHints } = splitSuggestions(suggestions);
 
   const strengthsDisplay =
@@ -651,10 +258,10 @@ function ResumeReviewContent() {
     ...(profile?.target_roles ?? []).slice(0, 4),
   ].slice(0, 12);
 
-  const summaryValue = overrideSummary ?? profile?.summary ?? "";
-  const experienceValue = overrideExperience ?? (profile ? formatExperiencesText(profile) : "");
-  const skillsValue = overrideSkills ?? (profile?.skills?.length ? profile.skills.join(", ") : "");
-  const educationValue = overrideEducation ?? (profile ? formatEducationText(profile) : "");
+  const summaryValue = profile?.summary ?? "";
+  const experienceValue = profile ? formatExperiencesText(profile) : "";
+  const skillsValue = profile?.skills?.length ? profile.skills.join(", ") : "";
+  const educationValue = profile ? formatEducationText(profile) : "";
 
   return (
     <div className="min-h-screen bg-white">
@@ -734,26 +341,8 @@ function ResumeReviewContent() {
                     <span className="ml-1 text-xl text-slate-400">/100</span>
                   </h2>
                 </div>
-                <div className="flex flex-col items-end gap-2">
-                  <div className="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
-                    {t("resume_review_score_status")}
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => void handleRescore()}
-                    disabled={rescoring || !profile}
-                    className="flex items-center gap-1.5 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
-                  >
-                    {rescoring ? (
-                      <>
-                        <svg className="h-3 w-3 animate-spin" viewBox="0 0 24 24" fill="none">
-                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-                        </svg>
-                        Rescoring…
-                      </>
-                    ) : "Rescore Resume"}
-                  </button>
+                <div className="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
+                  {t("resume_review_score_status")}
                 </div>
               </div>
 
@@ -847,14 +436,12 @@ function ResumeReviewContent() {
                 >
                   {profiling ? "Re-analyzing…" : t("resume_review_apply_ai")}
                 </button>
-                <button
-                  type="button"
-                  onClick={() => void handleGenerateImproved()}
-                  disabled={improving || !profile}
-                  className="rounded-md bg-navy-950 px-4 py-2 text-sm font-semibold text-white transition-all hover:bg-navy-800 disabled:cursor-not-allowed disabled:opacity-60"
+                <Link
+                  href="/resume"
+                  className="rounded-md bg-navy-950 px-4 py-2 text-sm font-semibold text-white transition-all hover:bg-navy-800"
                 >
-                  {improving ? "Generating…" : t("resume_review_generate_new")}
-                </button>
+                  {t("resume_review_generate_new")}
+                </Link>
               </div>
             </div>
 
@@ -881,17 +468,17 @@ function ResumeReviewContent() {
               </div>
             ) : null}
 
-            <div ref={sectionRef} className="mt-8 space-y-6">
+            <div className="mt-8 space-y-6">
               <div>
                 <label className="mb-2 block text-sm font-semibold text-navy-950">
                   {t("resume_review_summary")}
                 </label>
                 <textarea
                   rows={5}
+                  readOnly
                   value={summaryValue}
-                  onChange={(e) => setOverrideSummary(e.target.value)}
                   placeholder="No summary extracted yet."
-                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none focus:border-navy-300 focus:bg-white"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none"
                 />
               </div>
 
@@ -901,10 +488,10 @@ function ResumeReviewContent() {
                 </label>
                 <textarea
                   rows={8}
+                  readOnly
                   value={experienceValue}
-                  onChange={(e) => setOverrideExperience(e.target.value)}
                   placeholder="No experience extracted yet."
-                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none whitespace-pre-wrap focus:border-navy-300 focus:bg-white"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none whitespace-pre-wrap"
                 />
               </div>
 
@@ -914,10 +501,10 @@ function ResumeReviewContent() {
                 </label>
                 <textarea
                   rows={4}
+                  readOnly
                   value={skillsValue}
-                  onChange={(e) => setOverrideSkills(e.target.value)}
                   placeholder="No skills extracted yet."
-                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none focus:border-navy-300 focus:bg-white"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none"
                 />
               </div>
 
@@ -927,63 +514,27 @@ function ResumeReviewContent() {
                 </label>
                 <textarea
                   rows={3}
+                  readOnly
                   value={educationValue}
-                  onChange={(e) => setOverrideEducation(e.target.value)}
                   placeholder="No education extracted yet."
-                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none whitespace-pre-wrap focus:border-navy-300 focus:bg-white"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none whitespace-pre-wrap"
                 />
               </div>
             </div>
 
-            {improveError ? (
-              <div className="mt-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-                {improveError}
-              </div>
-            ) : null}
-
-            {improvedResume ? (
-              <div className="mt-6">
-                <label className="mb-2 block text-sm font-semibold text-navy-950">
-                  Improved Resume
-                </label>
-                <textarea
-                  rows={20}
-                  readOnly
-                  value={improvedResume}
-                  className="w-full rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-slate-700 outline-none whitespace-pre-wrap"
-                />
-                <div className="mt-2 flex items-center gap-3">
-                  <button
-                    type="button"
-                    onClick={handleApplyImproved}
-                    className="rounded-md bg-emerald-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-emerald-700"
-                  >
-                    Update Resume with Improved Version
-                  </button>
-                  {updateSuccess ? (
-                    <span className="text-sm font-medium text-emerald-600">
-                      Resume updated — review and adjust the fields as needed
-                    </span>
-                  ) : null}
-                </div>
-              </div>
-            ) : null}
-
             <div className="mt-8 flex flex-col gap-3 border-t border-slate-100 pt-6 md:flex-row md:items-center md:justify-between">
               <div className="flex flex-wrap gap-3">
                 <button
                   type="button"
-                  disabled={!profile}
-                  onClick={handleDownloadPdf}
-                  className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                  disabled
+                  className="cursor-not-allowed rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-400"
                 >
                   {t("resume_review_download_pdf")}
                 </button>
                 <button
                   type="button"
-                  disabled={!profile}
-                  onClick={() => void handleDownloadDocx()}
-                  className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                  disabled
+                  className="cursor-not-allowed rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-400"
                 >
                   {t("resume_review_download_docx")}
                 </button>
diff --git a/app/resume/voice/page.tsx b/app/resume/voice/page.tsx
index 5ccf2d5..fcf14fd 100644
--- a/app/resume/voice/page.tsx
+++ b/app/resume/voice/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { useLanguage } from "@/components/providers/language-provider";
@@ -42,6 +41,9 @@ const browserLangMap: Record<SupportedLocale, string> = {
   ta: "ta-IN",
 };
 
+function ChevronDownFallback() {
+  return null;
+}
 
 function getBestVoice(locale: SupportedLocale) {
   if (typeof window === "undefined" || !("speechSynthesis" in window)) return null;
@@ -74,7 +76,6 @@ function getBestVoice(locale: SupportedLocale) {
 
 export default function VoiceResumePage() {
   const { t, locale } = useLanguage();
-  const router = useRouter();
   const safeLocale: SupportedLocale =
     locale === "en" || locale === "zh" || locale === "ms" || locale === "ta" ? locale : "en";
 
@@ -84,14 +85,8 @@ export default function VoiceResumePage() {
   const [isListening, setIsListening] = useState(false);
   const [speechSupported, setSpeechSupported] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [finished, setFinished] = useState(false);
-  const [generating, setGenerating] = useState(false);
-  const [generateError, setGenerateError] = useState<string | null>(null);
 
   const recognitionRef = useRef<SpeechRecognitionType | null>(null);
-  const isRecordingRef = useRef(false);
-  const accumulatedTextRef = useRef("");
-  const currentTranscriptRef = useRef("");
 
   const questions = useMemo<VoiceQuestion[]>(
     () => [
@@ -111,22 +106,6 @@ export default function VoiceResumePage() {
           ta: "உங்கள் முழுப் பெயரைச் சொல்லுங்கள்",
         },
       },
-      {
-        id: "age",
-        section: "basics",
-        prompt: {
-          en: "How old are you?",
-          zh: "你今年几岁？",
-          ms: "Berapakah umur anda?",
-          ta: "உங்கள் வயது என்ன?",
-        },
-        placeholder: {
-          en: "Say your age",
-          zh: "请说出你的年龄",
-          ms: "Sebut umur anda",
-          ta: "உங்கள் வயதைச் சொல்லுங்கள்",
-        },
-      },
       {
         id: "job_title",
         section: "basics",
@@ -257,42 +236,25 @@ export default function VoiceResumePage() {
     }
 
     const recognition = new SpeechRecognition();
-    recognition.continuous = true;
+    recognition.continuous = false;
     recognition.interimResults = true;
     recognition.lang = browserLangMap[safeLocale];
 
     recognition.onresult = (event) => {
-      const transcript = Array.from(event.results as any[])
-        .map((r: any) => r[0].transcript as string)
-        .join("");
-      currentTranscriptRef.current = transcript;
-      const prefix = accumulatedTextRef.current;
-      setDraft(prefix ? `${prefix} ${transcript}` : transcript);
+      let transcript = "";
+
+      for (let i = 0; i < event.results.length; i += 1) {
+        transcript += event.results[i][0].transcript;
+      }
+
+      setDraft(transcript.trim());
     };
 
     recognition.onend = () => {
-      if (isRecordingRef.current) {
-        // Commit the transcript from this session before restarting
-        if (currentTranscriptRef.current) {
-          accumulatedTextRef.current = accumulatedTextRef.current
-            ? `${accumulatedTextRef.current} ${currentTranscriptRef.current}`
-            : currentTranscriptRef.current;
-          currentTranscriptRef.current = "";
-        }
-        try {
-          recognition.start();
-        } catch {
-          // Already starting — ignore
-        }
-      } else {
-        setIsListening(false);
-      }
+      setIsListening(false);
     };
 
-    recognition.onerror = (event: any) => {
-      // "no-speech" is harmless — onend will restart automatically
-      if (event.error === "no-speech") return;
-      isRecordingRef.current = false;
+    recognition.onerror = () => {
       setIsListening(false);
       setError(t("voice_input_error"));
     };
@@ -328,28 +290,20 @@ export default function VoiceResumePage() {
   function startListening() {
     if (!recognitionRef.current) return;
     setError(null);
-    // Preserve any text already in the textarea as the base for accumulation
-    accumulatedTextRef.current = draft;
-    currentTranscriptRef.current = "";
-    isRecordingRef.current = true;
+    setDraft("");
     recognitionRef.current.lang = browserLangMap[safeLocale];
     recognitionRef.current.start();
     setIsListening(true);
   }
 
   function stopListening() {
-    isRecordingRef.current = false;
     recognitionRef.current?.stop();
-    // setIsListening(false) will be called via onend
+    setIsListening(false);
   }
 
   function saveAndNext() {
     if (!currentQuestion || !draft.trim()) return;
 
-    // Stop any active recording before moving on
-    isRecordingRef.current = false;
-    recognitionRef.current?.stop();
-
     const nextAnswers = {
       ...answers,
       [currentQuestion.id]: draft.trim(),
@@ -357,45 +311,16 @@ export default function VoiceResumePage() {
 
     setAnswers(nextAnswers);
     setDraft("");
-    accumulatedTextRef.current = "";
-    currentTranscriptRef.current = "";
-    setIsListening(false);
 
     if (isLastQuestion) {
       sessionStorage.setItem("vericlause.voiceResumeAnswers", JSON.stringify(nextAnswers));
       sessionStorage.setItem("vericlause.resumeSource", "voice");
-      setFinished(true);
       return;
     }
 
     setCurrentIndex((prev) => prev + 1);
   }
 
-  async function handleGenerate() {
-    setGenerating(true);
-    setGenerateError(null);
-    try {
-      const res = await fetch("/api/resume/voice-build", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(answers),
-      });
-      const json = await res.json();
-      if (!res.ok) {
-        setGenerateError(json.detail ?? "Generation failed. Please try again.");
-        return;
-      }
-      const destination = json.resume_id
-        ? `/resume/review?resume_id=${json.resume_id}`
-        : "/resume/review";
-      router.push(destination);
-    } catch {
-      setGenerateError("Network error. Please check your connection and try again.");
-    } finally {
-      setGenerating(false);
-    }
-  }
-
   function goBack() {
     if (currentIndex === 0) return;
     setCurrentIndex((prev) => prev - 1);
@@ -411,7 +336,6 @@ export default function VoiceResumePage() {
 
   const compiledPreview = [
     answers.full_name ? `Name: ${answers.full_name}` : "",
-    answers.age ? `Age: ${answers.age}` : "",
     answers.job_title ? `Target Role: ${answers.job_title}` : "",
     answers.summary ? `Summary: ${answers.summary}` : "",
     answers.experience ? `Experience: ${answers.experience}` : "",
@@ -453,137 +377,93 @@ export default function VoiceResumePage() {
 
         <div className="grid gap-8 lg:grid-cols-[1.2fr_0.8fr]">
           <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-            {finished ? (
-              <div className="flex flex-col items-center py-8 text-center">
-                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 text-3xl text-emerald-600">
-                  ✓
-                </div>
-                <h2 className="mt-5 text-2xl font-semibold text-navy-950">
-                  All answers recorded!
-                </h2>
-                <p className="mt-2 max-w-sm text-sm leading-6 text-slate-600">
-                  Click below to generate your professionally formatted resume from your voice answers.
+            <div className="mb-6 flex items-center justify-between gap-4">
+              <div>
+                <p className="text-sm font-medium text-slate-500">
+                  {t("voice_resume_step")} {currentIndex + 1} / {questions.length}
                 </p>
+                <h2 className="mt-1 text-2xl font-semibold text-navy-950">
+                  {currentQuestion.prompt[safeLocale]}
+                </h2>
+              </div>
+
+              <button
+                type="button"
+                onClick={() => speakPrompt(currentQuestion.prompt[safeLocale], safeLocale)}
+                className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
+              >
+                {t("voice_resume_repeat")}
+              </button>
+            </div>
+
+            <div className="mb-5 h-2 w-full overflow-hidden rounded-full bg-slate-100">
+              <div
+                className="h-full rounded-full bg-navy-950 transition-all"
+                style={{ width: `${progressPercent}%` }}
+              />
+            </div>
+
+            {!speechSupported && (
+              <div className="mb-5 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+                {t("voice_resume_browser_warning")}
+              </div>
+            )}
+
+            {error && (
+              <div className="mb-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                {error}
+              </div>
+            )}
 
-                {generateError ? (
-                  <div className="mt-4 w-full rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-                    {generateError}
-                  </div>
-                ) : null}
+            <div className="rounded-2xl border border-slate-200 bg-slate-50 p-5">
+              <label className="mb-3 block text-sm font-medium text-slate-700">
+                {t("voice_resume_your_answer")}
+              </label>
 
+              <textarea
+                value={draft}
+                onChange={(e) => setDraft(e.target.value)}
+                placeholder={currentQuestion.placeholder[safeLocale]}
+                className="min-h-[180px] w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-navy-950"
+              />
+
+              <div className="mt-4 flex flex-wrap gap-3">
                 <button
                   type="button"
-                  onClick={() => void handleGenerate()}
-                  disabled={generating}
-                  className="mt-6 flex items-center gap-2 rounded-xl bg-navy-950 px-6 py-3 text-sm font-semibold text-white transition hover:bg-navy-800 disabled:cursor-not-allowed disabled:opacity-60"
+                  onClick={isListening ? stopListening : startListening}
+                  disabled={!speechSupported}
+                  className="rounded-lg bg-navy-950 px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
                 >
-                  {generating ? (
-                    <>
-                      <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                      Generating your resume…
-                    </>
-                  ) : "Generate My Resume"}
+                  {isListening ? t("voice_resume_stop_recording") : t("voice_resume_start_recording")}
                 </button>
 
                 <button
                   type="button"
-                  onClick={() => { setFinished(false); setCurrentIndex(questions.length - 1); }}
-                  className="mt-3 text-sm text-slate-500 underline underline-offset-2 hover:text-slate-700"
+                  onClick={saveCurrentTextOnly}
+                  className="rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
                 >
-                  Go back and edit answers
+                  {t("voice_resume_save_answer")}
+                </button>
+
+                <button
+                  type="button"
+                  onClick={goBack}
+                  disabled={currentIndex === 0}
+                  className="rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  {t("voice_resume_back")}
+                </button>
+
+                <button
+                  type="button"
+                  onClick={saveAndNext}
+                  disabled={!draft.trim()}
+                  className="rounded-lg bg-[#b88a44] px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  {isLastQuestion ? t("voice_resume_finish") : t("voice_resume_next")}
                 </button>
               </div>
-            ) : (
-              <>
-                <div className="mb-6 flex items-center justify-between gap-4">
-                  <div>
-                    <p className="text-sm font-medium text-slate-500">
-                      {t("voice_resume_step")} {currentIndex + 1} / {questions.length}
-                    </p>
-                    <h2 className="mt-1 text-2xl font-semibold text-navy-950">
-                      {currentQuestion.prompt[safeLocale]}
-                    </h2>
-                  </div>
-
-                  <button
-                    type="button"
-                    onClick={() => speakPrompt(currentQuestion.prompt[safeLocale], safeLocale)}
-                    className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
-                  >
-                    {t("voice_resume_repeat")}
-                  </button>
-                </div>
-
-                <div className="mb-5 h-2 w-full overflow-hidden rounded-full bg-slate-100">
-                  <div
-                    className="h-full rounded-full bg-navy-950 transition-all"
-                    style={{ width: `${progressPercent}%` }}
-                  />
-                </div>
-
-                {!speechSupported && (
-                  <div className="mb-5 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
-                    {t("voice_resume_browser_warning")}
-                  </div>
-                )}
-
-                {error && (
-                  <div className="mb-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-                    {error}
-                  </div>
-                )}
-
-                <div className="rounded-2xl border border-slate-200 bg-slate-50 p-5">
-                  <label className="mb-3 block text-sm font-medium text-slate-700">
-                    {t("voice_resume_your_answer")}
-                  </label>
-
-                  <textarea
-                    value={draft}
-                    onChange={(e) => setDraft(e.target.value)}
-                    placeholder={currentQuestion.placeholder[safeLocale]}
-                    className="min-h-[180px] w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-navy-950"
-                  />
-
-                  <div className="mt-4 flex flex-wrap gap-3">
-                    <button
-                      type="button"
-                      onClick={isListening ? stopListening : startListening}
-                      disabled={!speechSupported}
-                      className="rounded-lg bg-navy-950 px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
-                    >
-                      {isListening ? t("voice_resume_stop_recording") : t("voice_resume_start_recording")}
-                    </button>
-
-                    <button
-                      type="button"
-                      onClick={saveCurrentTextOnly}
-                      className="rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
-                    >
-                      {t("voice_resume_save_answer")}
-                    </button>
-
-                    <button
-                      type="button"
-                      onClick={goBack}
-                      disabled={currentIndex === 0}
-                      className="rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
-                    >
-                      {t("voice_resume_back")}
-                    </button>
-
-                    <button
-                      type="button"
-                      onClick={saveAndNext}
-                      disabled={!draft.trim()}
-                      className="rounded-lg bg-[#b88a44] px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
-                    >
-                      {isLastQuestion ? t("voice_resume_finish") : t("voice_resume_next")}
-                    </button>
-                  </div>
-                </div>
-              </>
-            )}
+            </div>
           </div>
 
           <aside className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
diff --git a/lib/services/jobRecommendation.ts b/lib/services/jobRecommendation.ts
index e9f6e41..9b373ba 100644
--- a/lib/services/jobRecommendation.ts
+++ b/lib/services/jobRecommendation.ts
@@ -8,13 +8,14 @@ import type { ResumeProfile } from "@/lib/types";
 export interface MCFJob {
   uuid: string;
   title: string;
-  company: { name: string };
+  postedCompany: { name: string } | null;
+  company?: { name: string } | null;
   salary: { minimum: number | null; maximum: number | null };
-  employmentTypes: { jobType: string }[];
+  employmentTypes: { employmentType: string }[];
   categories: { category: string }[];
   skills: { skill: string }[];
   positionLevels: { position: string }[];
-  metadata: { jobPostId: string; originalPostUrl?: string };
+  metadata: { jobPostId: string; jobDetailsUrl?: string; originalPostUrl?: string };
   description?: string;
 }
 
@@ -108,16 +109,18 @@ For each job return:
 - improvements: 2–3 bullet points on gaps to address
 - reasoning: 1–2 sentence overall reasoning
 
-Return ONLY a JSON array in this exact shape, no extra text:
-[
-  {
-    "id": "<job uuid>",
-    "matchScore": 85,
-    "strengths": ["...", "..."],
-    "improvements": ["...", "..."],
-    "reasoning": "..."
-  }
-]
+Return ONLY a JSON object in this exact shape, no extra text:
+{
+  "matches": [
+    {
+      "id": "<job uuid>",
+      "matchScore": 85,
+      "strengths": ["...", "..."],
+      "improvements": ["...", "..."],
+      "reasoning": "..."
+    }
+  ]
+}
 
 Consider: skills overlap, seniority level, industry match, years of experience, target roles.
 Singapore job market context applies.`;
@@ -151,7 +154,7 @@ export async function scoreJobsWithAI(
   const jobSummaries = jobs.map((j) => ({
     id: j.uuid,
     title: j.title,
-    company: j.company?.name,
+    company: j.postedCompany?.name ?? j.company?.name ?? "Unknown",
     skills: j.skills?.map((s) => s.skill).slice(0, 10),
     categories: j.categories?.map((c) => c.category),
     positionLevel: j.positionLevels?.[0]?.position ?? null,
@@ -172,10 +175,7 @@ export async function scoreJobsWithAI(
   const raw = response.choices[0]?.message?.content ?? "{}";
   try {
     const parsed = JSON.parse(raw);
-    // Handle both array and wrapped object responses
-    const results: MatchResult[] = Array.isArray(parsed)
-      ? parsed
-      : (parsed.results ?? parsed.jobs ?? []);
+    const results: MatchResult[] = parsed.matches ?? parsed.results ?? parsed.jobs ?? [];
     return results;
   } catch {
     return [];
@@ -197,20 +197,17 @@ export async function getJobRecommendations(
 
   const recommendations: JobRecommendation[] = jobs.map((job) => {
     const score = scoreMap.get(job.uuid);
-    const applyUrl =
-      job.metadata?.originalPostUrl ??
-      `https://www.mycareersfuture.gov.sg/job/${job.metadata?.jobPostId ?? job.uuid}`;
 
     return {
       id: job.uuid,
       title: job.title,
-      company: job.company?.name ?? "Unknown",
+      company: job.postedCompany?.name ?? job.company?.name ?? "Unknown",
       matchScore: score?.matchScore ?? 50,
       salaryMin: job.salary?.minimum ?? null,
       salaryMax: job.salary?.maximum ?? null,
-      employmentType: job.employmentTypes?.[0]?.jobType ?? null,
+      employmentType: job.employmentTypes?.[0]?.employmentType ?? null,
       skills: job.skills?.map((s) => s.skill).slice(0, 8) ?? [],
-      applyUrl,
+      applyUrl: job.metadata?.jobDetailsUrl ?? `https://www.mycareersfuture.gov.sg/job/${job.metadata?.jobPostId ?? job.uuid}`,
       strengths: score?.strengths ?? [],
       improvements: score?.improvements ?? [],
       reasoning: score?.reasoning ?? "This role matches your profile.",
@@ -252,11 +249,15 @@ export async function extractJobFromUrl(url: string): Promise<ScrapedJob> {
 
   // For MCF URLs, use the API directly instead of scraping
   if (source === "MyCareersFuture") {
-    const match = url.match(/JOB-[\w-]+/i);
-    if (match) {
-      const jobPostId = match[0];
+    const jobMatch = url.match(/JOB-[\w-]+/i);
+    const uuidMatch = url.match(/([a-f0-9]{32})(?:[^a-f0-9]|$)/i);
+    const jobPostId = jobMatch?.[0] ?? null;
+    const uuid = uuidMatch?.[1] ?? null;
+
+    if (jobPostId || uuid) {
+      const query = jobPostId ? `jobPostId=${jobPostId}` : `uuid=${uuid}`;
       const res = await fetch(
-        `${MCF_API_BASE}/jobs?jobPostId=${jobPostId}`,
+        `${MCF_API_BASE}/jobs?${query}`,
         {
           headers: {
             Accept: "application/json",
@@ -270,13 +271,13 @@ export async function extractJobFromUrl(url: string): Promise<ScrapedJob> {
         if (job) {
           return {
             title: job.title ?? null,
-            company: job.company?.name ?? null,
+            company: job.postedCompany?.name ?? job.company?.name ?? null,
             description: job.description ?? null,
             salary: job.salary?.minimum
               ? `$${job.salary.minimum.toLocaleString()} – $${job.salary.maximum?.toLocaleString() ?? "?"} / month`
               : null,
             location: "Singapore",
-            employmentType: job.employmentTypes?.[0]?.jobType ?? null,
+            employmentType: job.employmentTypes?.[0]?.employmentType ?? null,
             skills: job.skills?.map((s) => s.skill) ?? [],
             applyUrl: url,
             source: "MyCareersFuture",

From d54b88669f0833b63aebefc8e389db1eb5530694 Mon Sep 17 00:00:00 2001
From: anrulazrudinwee-stack <anrulazrudinwee@gmail.com>
Date: Sat, 28 Mar 2026 17:47:00 +0800
Subject: [PATCH 04/13] updated extracr url job matching

---
 app/api/jobs/scrape/route.ts      |  4 ++-
 app/jobs/recommendation/page.tsx  | 28 +++++++++++---------
 lib/services/jobRecommendation.ts | 43 +++++++++++++++----------------
 3 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/app/api/jobs/scrape/route.ts b/app/api/jobs/scrape/route.ts
index b28088e..cd591dd 100644
--- a/app/api/jobs/scrape/route.ts
+++ b/app/api/jobs/scrape/route.ts
@@ -30,7 +30,9 @@ export async function POST(req: Request) {
       return NextResponse.json({ error: "Only http/https URLs are supported" }, { status: 400 });
     }
 
-    const job = await extractJobFromUrl(url);
+    console.log("Scraping URL:", url);
+const job = await extractJobFromUrl(url);
+console.log("Job result:", job.title, job.company);
 
     return NextResponse.json({ job });
   } catch (err) {
diff --git a/app/jobs/recommendation/page.tsx b/app/jobs/recommendation/page.tsx
index 57cb559..ed45ddc 100644
--- a/app/jobs/recommendation/page.tsx
+++ b/app/jobs/recommendation/page.tsx
@@ -257,17 +257,20 @@ function ScrapeTab() {
   const [error, setError] = useState<string | null>(null);
 
   async function handleExtract() {
-    if (!url.trim()) return;
-    setLoading(true);
-    setError(null);
-    setJob(null);
-
-    try {
-      const res = await fetch("/api/jobs/scrape", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ url: url.trim() }),
-      });
+  if (!url.trim()) return;
+  setLoading(true);
+  setError(null);
+  setJob(null);
+
+  console.log("Sending POST to /api/jobs/scrape with URL:", url.trim());
+
+  try {
+    const res = await fetch("/api/jobs/scrape", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ url: url.trim() }),
+    });
+    console.log("Response status:", res.status, res.url);
       const data = await res.json();
       if (!res.ok) throw new Error(data.error ?? "Failed to extract job");
       setJob(data.job);
@@ -289,13 +292,14 @@ function ScrapeTab() {
 
         <div className="mt-5 flex gap-3">
           <input
-            type="url"
+            type="text"
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             placeholder="https://www.linkedin.com/jobs/view/..."
             className="flex-1 rounded-xl border border-slate-200 px-4 py-3 text-sm text-slate-700 outline-none focus:border-navy-950 focus:ring-2 focus:ring-navy-950/10"
           />
           <button
+          type="button"
             onClick={handleExtract}
             disabled={loading || !url.trim()}
             className="rounded-xl bg-navy-950 px-5 py-3 text-sm font-medium text-white transition hover:opacity-90 disabled:opacity-50"
diff --git a/lib/services/jobRecommendation.ts b/lib/services/jobRecommendation.ts
index 9b373ba..cf21535 100644
--- a/lib/services/jobRecommendation.ts
+++ b/lib/services/jobRecommendation.ts
@@ -54,7 +54,6 @@ export interface ScrapedJob {
 const MCF_API_BASE = "https://api.mycareersfuture.gov.sg/v2";
 
 function buildMCFSearchQuery(profile: ResumeProfile): string {
-  // Use target roles first, fall back to most recent job title
   if (profile.target_roles?.length) {
     return profile.target_roles[0];
   }
@@ -74,13 +73,12 @@ export async function fetchMCFJobs(profile: ResumeProfile, limit = 10): Promise<
     page: "0",
   });
 
-  // Add salary filter if we can estimate from profile
   const res = await fetch(`${MCF_API_BASE}/jobs?${params.toString()}`, {
     headers: {
       Accept: "application/json",
       "User-Agent": "VeriClause/1.0",
     },
-    next: { revalidate: 300 }, // cache 5 mins
+    next: { revalidate: 300 },
   });
 
   if (!res.ok) {
@@ -104,10 +102,10 @@ function getOpenAIClient(): OpenAI {
 const MATCH_SYSTEM_PROMPT = `You are an expert Singapore career advisor. Given a candidate's resume profile and a list of job postings, score and rank each job by fit.
 
 For each job return:
-- matchScore: 0–100 integer
-- strengths: 2–3 bullet points on why the candidate is a good fit
-- improvements: 2–3 bullet points on gaps to address
-- reasoning: 1–2 sentence overall reasoning
+- matchScore: 0-100 integer
+- strengths: 2-3 bullet points on why the candidate is a good fit
+- improvements: 2-3 bullet points on gaps to address
+- reasoning: 1-2 sentence overall reasoning
 
 Return ONLY a JSON object in this exact shape, no extra text:
 {
@@ -215,7 +213,6 @@ export async function getJobRecommendations(
     };
   });
 
-  // Sort by matchScore descending
   return recommendations.sort((a, b) => b.matchScore - a.matchScore);
 }
 
@@ -250,31 +247,34 @@ export async function extractJobFromUrl(url: string): Promise<ScrapedJob> {
   // For MCF URLs, use the API directly instead of scraping
   if (source === "MyCareersFuture") {
     const jobMatch = url.match(/JOB-[\w-]+/i);
-    const uuidMatch = url.match(/([a-f0-9]{32})(?:[^a-f0-9]|$)/i);
+    const uuidMatch = url.match(/([a-f0-9]{32})$/i);
     const jobPostId = jobMatch?.[0] ?? null;
     const uuid = uuidMatch?.[1] ?? null;
 
     if (jobPostId || uuid) {
-      const query = jobPostId ? `jobPostId=${jobPostId}` : `uuid=${uuid}`;
-      const res = await fetch(
-        `${MCF_API_BASE}/jobs?${query}`,
-        {
-          headers: {
-            Accept: "application/json",
-            "User-Agent": "VeriClause/1.0",
-          },
+      // Use direct job endpoint for UUID, query param for jobPostId
+      const endpoint = jobPostId
+        ? `${MCF_API_BASE}/jobs?jobPostId=${jobPostId}`
+        : `${MCF_API_BASE}/jobs/${uuid}`;
+
+      const res = await fetch(endpoint, {
+        headers: {
+          Accept: "application/json",
+          "User-Agent": "VeriClause/1.0",
         },
-      );
+      });
+
       if (res.ok) {
         const data = await res.json();
-        const job: MCFJob = data.results?.[0];
-        if (job) {
+        // jobPostId returns results array, UUID returns direct object
+        const job: MCFJob = jobPostId ? data.results?.[0] : data;
+        if (job && job.title) {
           return {
             title: job.title ?? null,
             company: job.postedCompany?.name ?? job.company?.name ?? null,
             description: job.description ?? null,
             salary: job.salary?.minimum
-              ? `$${job.salary.minimum.toLocaleString()} – $${job.salary.maximum?.toLocaleString() ?? "?"} / month`
+              ? `$${job.salary.minimum.toLocaleString()} - $${job.salary.maximum?.toLocaleString() ?? "?"} / month`
               : null,
             location: "Singapore",
             employmentType: job.employmentTypes?.[0]?.employmentType ?? null,
@@ -302,7 +302,6 @@ export async function extractJobFromUrl(url: string): Promise<ScrapedJob> {
 
   const html = await res.text();
 
-  // Strip HTML tags to get readable text (keep it under token limit)
   const text = html
     .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
     .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "")

From 176f85c6550499c47ae9947fb8fcb9883884df6e Mon Sep 17 00:00:00 2001
From: zackKonfs <zack.konfs@gmail.com>
Date: Sun, 29 Mar 2026 00:11:14 +0800
Subject: [PATCH 05/13] checkpoint: before resume review page redesign

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .env.example                        |  39 --
 app/api/jobs/recommend/route.ts     |  56 +++
 app/api/jobs/scrape/route.ts        |  45 ++
 app/api/resume/improve/route.ts     |  84 ++++
 app/api/resume/rescore/route.ts     |  78 ++++
 app/api/resume/route.ts             | 224 ++++++++++
 app/api/resume/voice-build/route.ts | 135 ++++++
 app/interview/page.tsx              |  35 ++
 app/jobs/recommendation/page.tsx    | 524 +++++++++++++++++-----
 app/resume/builder/page.tsx         | 103 ++++-
 app/resume/page.tsx                 | 259 +++++++++--
 app/resume/review/page.tsx          | 317 ++++++++++++-
 app/resume/voice/page.tsx           | 190 +++++++-
 lib/services/jobRecommendation.ts   | 347 ++++++++++++++
 package-lock.json                   | 671 +++++++++++++++++++++++++++-
 package.json                        |   4 +
 16 files changed, 2877 insertions(+), 234 deletions(-)
 delete mode 100644 .env.example
 create mode 100644 app/api/jobs/recommend/route.ts
 create mode 100644 app/api/jobs/scrape/route.ts
 create mode 100644 app/api/resume/improve/route.ts
 create mode 100644 app/api/resume/rescore/route.ts
 create mode 100644 app/api/resume/route.ts
 create mode 100644 app/api/resume/voice-build/route.ts
 create mode 100644 lib/services/jobRecommendation.ts

diff --git a/.env.example b/.env.example
deleted file mode 100644
index 4855b80..0000000
--- a/.env.example
+++ /dev/null
@@ -1,39 +0,0 @@
-# VeriClause – copy to .env and fill in your keys
-
-# Supabase (free tier) – authentication
-NEXT_PUBLIC_SUPABASE_URL=
-NEXT_PUBLIC_SUPABASE_ANON_KEY=
-
-# LlamaCloud / LlamaParse – PDF parsing (replaces pdf-parse; supports complex/scanned docs)
-LLAMA_CLOUD_API_KEY=
-
-# OpenAI – primary LLM (gpt-4o-mini) + embeddings (text-embedding-3-small)
-OPENAI_API_KEY=
-
-# Groq (free) – fallback LLM for RAG verdicts when OpenAI fails
-GROQ_API_KEY=
-
-# Pinecone (free tier) – vector database for law chunks
-PINECONE_API_KEY=
-PINECONE_INDEX=vericlause-laws
-
-# Azure speech (free tier) – for interview (please register for an acct for key)
-AZURE_SPEECH_KEY=
-AZURE_SPEECH_REGION=southeastasia
-
-# --- API hardening (optional; sensible defaults in code) ---
-# Max JSON body for LLM routes (bytes). Default: 1048576 (1 MiB).
-# MAX_JSON_BODY_BYTES=
-
-# Max PDF/DOCX upload size (bytes). Default: 15728640 (15 MiB).
-# MAX_UPLOAD_BYTES=
-
-# In-memory rate limits (per user, per process). Use Redis/Upstash in production multi-instance.
-# RATE_LIMIT_LLM_WINDOW_MS=900000
-# RATE_LIMIT_LLM_MAX=40
-# RATE_LIMIT_UPLOAD_WINDOW_MS=3600000
-# RATE_LIMIT_UPLOAD_MAX=60
-# RATE_LIMIT_PROFILE_WINDOW_MS=900000
-# RATE_LIMIT_PROFILE_MAX=30
-# RATE_LIMIT_AZURE_WINDOW_MS=60000
-# RATE_LIMIT_AZURE_MAX=30
\ No newline at end of file
diff --git a/app/api/jobs/recommend/route.ts b/app/api/jobs/recommend/route.ts
new file mode 100644
index 0000000..ac083dc
--- /dev/null
+++ b/app/api/jobs/recommend/route.ts
@@ -0,0 +1,56 @@
+import { NextResponse } from "next/server";
+import { getAuthenticatedUser, getResume, listResumes } from "@/lib/services/db";
+import { getJobRecommendations } from "@/lib/services/jobRecommendation";
+
+export const maxDuration = 60;
+
+export async function GET(req: Request) {
+  try {
+    const user = await getAuthenticatedUser();
+    if (!user) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(req.url);
+    const resumeId = searchParams.get("resume_id");
+
+    let profile = null;
+
+    if (resumeId) {
+      // Use specific resume
+      const resume = await getResume(resumeId, user.id);
+      if (!resume) {
+        return NextResponse.json({ error: "Resume not found" }, { status: 404 });
+      }
+      profile = resume.parsed_profile;
+    } else {
+      // Use latest resume with a profile
+      const resumes = await listResumes(user.id);
+      const withProfile = resumes.find((r) => r.parsed_profile != null);
+      if (!withProfile) {
+        return NextResponse.json(
+          { error: "No resume profile found. Please upload and analyse your resume first." },
+          { status: 404 },
+        );
+      }
+      profile = withProfile.parsed_profile;
+    }
+
+    if (!profile) {
+      return NextResponse.json(
+        { error: "Resume has not been profiled yet. Please wait for profiling to complete." },
+        { status: 400 },
+      );
+    }
+
+    const recommendations = await getJobRecommendations(profile);
+
+    return NextResponse.json({ recommendations });
+  } catch (err) {
+    console.error("Job recommendation error:", err);
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : "Failed to fetch recommendations" },
+      { status: 500 },
+    );
+  }
+}
\ No newline at end of file
diff --git a/app/api/jobs/scrape/route.ts b/app/api/jobs/scrape/route.ts
new file mode 100644
index 0000000..cd591dd
--- /dev/null
+++ b/app/api/jobs/scrape/route.ts
@@ -0,0 +1,45 @@
+import { NextResponse } from "next/server";
+import { getAuthenticatedUser } from "@/lib/services/db";
+import { extractJobFromUrl } from "@/lib/services/jobRecommendation";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  try {
+    const user = await getAuthenticatedUser();
+    if (!user) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await req.json();
+    const { url } = body as { url?: string };
+
+    if (!url || typeof url !== "string") {
+      return NextResponse.json({ error: "url is required" }, { status: 400 });
+    }
+
+    // Basic URL validation
+    let parsedUrl: URL;
+    try {
+      parsedUrl = new URL(url);
+    } catch {
+      return NextResponse.json({ error: "Invalid URL provided" }, { status: 400 });
+    }
+
+    if (!["http:", "https:"].includes(parsedUrl.protocol)) {
+      return NextResponse.json({ error: "Only http/https URLs are supported" }, { status: 400 });
+    }
+
+    console.log("Scraping URL:", url);
+const job = await extractJobFromUrl(url);
+console.log("Job result:", job.title, job.company);
+
+    return NextResponse.json({ job });
+  } catch (err) {
+    console.error("Job scrape error:", err);
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : "Failed to extract job details" },
+      { status: 500 },
+    );
+  }
+}
\ No newline at end of file
diff --git a/app/api/resume/improve/route.ts b/app/api/resume/improve/route.ts
new file mode 100644
index 0000000..78ecf3d
--- /dev/null
+++ b/app/api/resume/improve/route.ts
@@ -0,0 +1,84 @@
+export const runtime = "nodejs";
+
+import { NextRequest, NextResponse } from "next/server";
+import OpenAI from "openai";
+import Groq from "groq-sdk";
+import { getAuthenticatedUser } from "@/lib/services/db";
+
+const OPENAI_MODEL = "gpt-4o-mini";
+const GROQ_FALLBACK_MODEL = "llama-3.1-8b-instant";
+
+const SYSTEM_PROMPT = `You are a professional resume writer specialising in Singapore's white-collar job market.
+
+You will be given an original resume and a list of AI feedback suggestions. Rewrite the resume incorporating ALL the suggestions to produce a stronger, more competitive version.
+
+Rules:
+- Keep all factual information (dates, companies, roles) exactly as they are
+- Improve the language, structure and impact of each bullet point
+- Add stronger action verbs and quantifiable outcomes where missing
+- Make it ATS-friendly with relevant Singapore market keywords
+- Return ONLY the improved resume as plain text, ready to copy
+- Do not add fictional achievements or qualifications`;
+
+async function callLlm(prompt: string): Promise<string> {
+  const openaiKey = process.env.OPENAI_API_KEY;
+  if (openaiKey) {
+    try {
+      const client = new OpenAI({ apiKey: openaiKey });
+      const response = await client.chat.completions.create({
+        model: OPENAI_MODEL,
+        messages: [
+          { role: "system", content: SYSTEM_PROMPT },
+          { role: "user", content: prompt },
+        ],
+        temperature: 0.3,
+      });
+      return response.choices[0]?.message?.content ?? "";
+    } catch (err) {
+      console.warn("OpenAI improve failed, falling back to Groq:", err);
+    }
+  }
+
+  const groqKey = process.env.GROQ_API_KEY;
+  if (!groqKey) throw new Error("Neither OPENAI_API_KEY nor GROQ_API_KEY is set");
+
+  const client = new Groq({ apiKey: groqKey });
+  const response = await client.chat.completions.create({
+    model: GROQ_FALLBACK_MODEL,
+    messages: [
+      { role: "system", content: SYSTEM_PROMPT },
+      { role: "user", content: prompt },
+    ],
+    temperature: 0.3,
+  });
+  return response.choices[0]?.message?.content ?? "";
+}
+
+export async function POST(req: NextRequest) {
+  const user = await getAuthenticatedUser();
+  if (!user) {
+    return NextResponse.json({ detail: "Unauthorized" }, { status: 401 });
+  }
+
+  const { resumeText, feedback } = await req.json();
+
+  if (!resumeText?.trim()) {
+    return NextResponse.json({ detail: "No resume text provided" }, { status: 400 });
+  }
+
+  const feedbackLines = Array.isArray(feedback) && feedback.length > 0
+    ? feedback.map((f: string, i: number) => `${i + 1}. ${f}`).join("\n")
+    : "No specific feedback provided — improve overall quality.";
+
+  const prompt = `ORIGINAL RESUME:\n${resumeText}\n\nAI FEEDBACK TO INCORPORATE:\n${feedbackLines}`;
+
+  try {
+    const improvedResume = await callLlm(prompt);
+    return NextResponse.json({ improvedResume });
+  } catch (e) {
+    return NextResponse.json(
+      { detail: `Failed to generate improved resume: ${e instanceof Error ? e.message : e}` },
+      { status: 502 },
+    );
+  }
+}
diff --git a/app/api/resume/rescore/route.ts b/app/api/resume/rescore/route.ts
new file mode 100644
index 0000000..4cea5eb
--- /dev/null
+++ b/app/api/resume/rescore/route.ts
@@ -0,0 +1,78 @@
+export const runtime = "nodejs";
+
+import { NextRequest, NextResponse } from "next/server";
+import OpenAI from "openai";
+import Groq from "groq-sdk";
+import { getAuthenticatedUser } from "@/lib/services/db";
+
+const OPENAI_MODEL = "gpt-4o-mini";
+const GROQ_FALLBACK_MODEL = "llama-3.1-8b-instant";
+
+const SYSTEM_PROMPT = `You are a resume evaluator for Singapore's white-collar job market.
+
+Read the resume below and return ONLY a valid JSON object with one field:
+{ "score": 7 }
+
+Score from 1 to 10 based on: clarity, impact, ATS-friendliness, use of action verbs, and overall competitiveness for Singapore hiring managers.
+No explanation. No other text. Just the JSON.`;
+
+async function callLlm(text: string): Promise<string> {
+  const openaiKey = process.env.OPENAI_API_KEY;
+  if (openaiKey) {
+    try {
+      const client = new OpenAI({ apiKey: openaiKey });
+      const response = await client.chat.completions.create({
+        model: OPENAI_MODEL,
+        messages: [
+          { role: "system", content: SYSTEM_PROMPT },
+          { role: "user", content: text.slice(0, 120_000) },
+        ],
+        temperature: 0,
+      });
+      return response.choices[0]?.message?.content ?? "";
+    } catch (err) {
+      console.warn("OpenAI rescore failed, falling back to Groq:", err);
+    }
+  }
+
+  const groqKey = process.env.GROQ_API_KEY;
+  if (!groqKey) throw new Error("Neither OPENAI_API_KEY nor GROQ_API_KEY is set");
+
+  const client = new Groq({ apiKey: groqKey });
+  const response = await client.chat.completions.create({
+    model: GROQ_FALLBACK_MODEL,
+    messages: [
+      { role: "system", content: SYSTEM_PROMPT },
+      { role: "user", content: text.slice(0, 120_000) },
+    ],
+    temperature: 0,
+  });
+  return response.choices[0]?.message?.content ?? "";
+}
+
+export async function POST(req: NextRequest) {
+  const user = await getAuthenticatedUser();
+  if (!user) {
+    return NextResponse.json({ detail: "Unauthorized" }, { status: 401 });
+  }
+
+  const { text } = await req.json();
+  if (!text?.trim()) {
+    return NextResponse.json({ detail: "No resume text provided" }, { status: 400 });
+  }
+
+  try {
+    const raw = await callLlm(text);
+    const braceStart = raw.indexOf("{");
+    const braceEnd = raw.lastIndexOf("}");
+    const json = JSON.parse(raw.slice(braceStart, braceEnd + 1));
+    const score = typeof json.score === "number" ? Math.min(10, Math.max(1, json.score)) : null;
+    if (score === null) throw new Error("Invalid score returned");
+    return NextResponse.json({ score });
+  } catch (e) {
+    return NextResponse.json(
+      { detail: `Rescore failed: ${e instanceof Error ? e.message : e}` },
+      { status: 502 },
+    );
+  }
+}
diff --git a/app/api/resume/route.ts b/app/api/resume/route.ts
new file mode 100644
index 0000000..9589fb7
--- /dev/null
+++ b/app/api/resume/route.ts
@@ -0,0 +1,224 @@
+export const runtime = 'nodejs';
+
+import { NextRequest, NextResponse } from "next/server";
+import OpenAI from "openai";
+import Groq from "groq-sdk";
+import { extractText } from 'unpdf';
+import { getAuthenticatedUser } from "@/lib/services/db";
+
+const OPENAI_MODEL = "gpt-4o-mini";
+const GROQ_FALLBACK_MODEL = "llama-3.1-8b-instant";
+
+const SYSTEM_PROMPT = `You are an elite resume advisory panel 
+for Singapore's white-collar job market. You combine the 
+expertise of four specialists:
+
+1. LANGUAGE COACH — Reviews tone, grammar, action verb 
+   strength, and professional clarity
+2. ATS SPECIALIST — Checks keyword density, formatting 
+   suitability for applicant tracking systems, and 
+   section completeness
+3. SINGAPORE MARKET ADVISOR — Validates experience and 
+   language against Singapore hiring norms, MOM standards, 
+   and local employer expectations
+4. CAREER PROGRESSION ANALYST — Assesses career trajectory 
+   logic, identifies gaps, and evaluates whether the 
+   candidate's progression is competitive for their 
+   target level
+
+Analyse the resume and return ONLY a valid JSON object 
+with exactly these fields:
+
+{
+  "overallImpression": "3 to 4 sentence summary covering 
+    the candidate's overall profile strength, market 
+    positioning in Singapore, and suitability for their 
+    apparent target role",
+
+  "keyStrengths": [
+    "strength 1 — be specific, reference actual content 
+    from the resume",
+    "strength 2",
+    "strength 3"
+  ],
+
+  "areasToImprove": [
+    "gap 1 — be specific, explain why this weakens the 
+    resume in Singapore's market",
+    "gap 2",
+    "gap 3"
+  ],
+
+  "suggestedEdits": [
+    "edit 1 — provide the exact rewrite, not just advice. 
+    Example: Change 'Managed social media' to 'Grew 
+    combined social following by 40% to 120,000 across 
+    Facebook and Instagram'",
+    "edit 2",
+    "edit 3"
+  ],
+
+  "atsAnalysis": {
+    "keywordsFound": ["keyword1", "keyword2", "keyword3"],
+    "keywordsMissing": ["missing1", "missing2", "missing3"],
+    "atsFriendly": true or false,
+    "atsNotes": "One sentence on ATS suitability"
+  },
+
+  "careerProgression": "2 sentence assessment of whether 
+    the career trajectory is logical and competitive for 
+    the candidate's experience level in Singapore",
+
+  "salaryBenchmark": {
+    "estimatedRange": "SGD X,000 - Y,000 per month",
+    "rationale": "One sentence explaining the estimate 
+    based on role level, sector, and years of experience 
+    in Singapore"
+  },
+
+  "score": a number from 1 to 10 based on this rubric:
+    2 points — Quantifiable achievements with specific 
+               numbers and dollar values
+    2 points — Relevance and alignment to Singapore 
+               market and MOM standards  
+    2 points — Structure, clarity, and ATS compatibility
+    2 points — Action verb strength and language quality
+    2 points — Completeness of contact info, work history, 
+               education, skills, and career logic
+}
+
+Rules:
+- Be specific. Reference actual content from the resume.
+- No generic advice that could apply to any resume.
+- Salary benchmark must reflect Singapore market rates.
+- ATS keywords must be relevant to the candidate's field.
+- No text outside the JSON object.`;
+
+export interface ResumeFeedback {
+  overallImpression: string;
+  keyStrengths: string[];
+  areasToImprove: string[];
+  suggestedEdits: string[];
+  atsAnalysis: {
+    keywordsFound: string[];
+    keywordsMissing: string[];
+    atsFriendly: boolean;
+    atsNotes: string;
+  };
+  careerProgression: string;
+  salaryBenchmark: {
+    estimatedRange: string;
+    rationale: string;
+  };
+  score: number;
+}
+
+function extractJson(text: string): string {
+  const fenceMatch = text.match(/```(?:json)?\s*\n?([\s\S]*?)```/);
+  if (fenceMatch) return fenceMatch[1].trim();
+
+  const braceStart = text.indexOf("{");
+  const braceEnd = text.lastIndexOf("}");
+  if (braceStart !== -1 && braceEnd > braceStart) {
+    return text.slice(braceStart, braceEnd + 1);
+  }
+
+  return text.trim();
+}
+
+async function callLlm(resumeText: string): Promise<string> {
+  const openaiKey = process.env.OPENAI_API_KEY;
+  if (openaiKey) {
+    try {
+      const client = new OpenAI({ apiKey: openaiKey });
+      const response = await client.chat.completions.create({
+        model: OPENAI_MODEL,
+        messages: [
+          { role: "system", content: SYSTEM_PROMPT },
+          { role: "user", content: resumeText.slice(0, 120_000) },
+        ],
+        temperature: 0,
+      });
+      return response.choices[0]?.message?.content ?? "";
+    } catch (err) {
+      console.warn("OpenAI resume analysis failed, falling back to Groq:", err);
+    }
+  }
+
+  const groqKey = process.env.GROQ_API_KEY;
+  if (!groqKey) throw new Error("Neither OPENAI_API_KEY nor GROQ_API_KEY is set");
+
+  const client = new Groq({ apiKey: groqKey });
+  const response = await client.chat.completions.create({
+    model: GROQ_FALLBACK_MODEL,
+    messages: [
+      { role: "system", content: SYSTEM_PROMPT },
+      { role: "user", content: resumeText.slice(0, 120_000) },
+    ],
+    temperature: 0,
+  });
+  return response.choices[0]?.message?.content ?? "";
+}
+
+export async function POST(req: NextRequest) {
+  const user = await getAuthenticatedUser();
+  if (!user) {
+    return NextResponse.json({ detail: "Unauthorized" }, { status: 401 });
+  }
+
+  const formData = await req.formData();
+  const file = formData.get("file");
+
+  if (!file || !(file instanceof Blob)) {
+    return NextResponse.json({ detail: "No file provided" }, { status: 400 });
+  }
+
+  const name = (file as File).name ?? "";
+  const lower = name.toLowerCase();
+  if (!lower.endsWith(".pdf") && !lower.endsWith(".docx")) {
+    return NextResponse.json(
+      { detail: "Only PDF and DOCX files are accepted" },
+      { status: 400 },
+    );
+  }
+
+  let resumeText: string;
+  try {
+    const arrayBuffer = await file.arrayBuffer();
+    const uint8Array = new Uint8Array(arrayBuffer);
+    const { text } = await extractText(uint8Array, { mergePages: true });
+    resumeText = text;
+  } catch (e) {
+    return NextResponse.json(
+      { detail: `File could not be read: ${e instanceof Error ? e.message : e}` },
+      { status: 422 },
+    );
+  }
+
+  if (!resumeText.trim()) {
+    return NextResponse.json({ detail: "File produced no text" }, { status: 422 });
+  }
+
+  let raw: string;
+  try {
+    raw = await callLlm(resumeText);
+  } catch (e) {
+    return NextResponse.json(
+      { detail: `AI analysis failed: ${e instanceof Error ? e.message : e}` },
+      { status: 502 },
+    );
+  }
+
+  const content = extractJson(raw);
+  let feedback: ResumeFeedback;
+  try {
+    feedback = JSON.parse(content) as ResumeFeedback;
+  } catch {
+    return NextResponse.json(
+      { detail: "AI returned an unexpected response. Please try again." },
+      { status: 502 },
+    );
+  }
+
+  return NextResponse.json({ feedback });
+}
diff --git a/app/api/resume/voice-build/route.ts b/app/api/resume/voice-build/route.ts
new file mode 100644
index 0000000..fdb25e5
--- /dev/null
+++ b/app/api/resume/voice-build/route.ts
@@ -0,0 +1,135 @@
+export const runtime = "nodejs";
+
+import { NextRequest, NextResponse } from "next/server";
+import OpenAI from "openai";
+import Groq from "groq-sdk";
+import { getAuthenticatedUser, insertResume } from "@/lib/services/db";
+import type { ResumeProfile } from "@/lib/types";
+
+const OPENAI_MODEL = "gpt-4o-mini";
+const GROQ_FALLBACK_MODEL = "llama-3.1-8b-instant";
+
+const SYSTEM_PROMPT = `You are a professional resume writer for Singapore's job market. The user has provided raw voice transcript answers to resume questions. The transcripts may have errors or incomplete sentences from speech recognition.
+
+Auto-correct the language, fix grammar, and compile the answers into a clean, professionally formatted resume. Keep all facts as stated. For a simplified entry-level resume, focus on clarity over complexity.
+
+Return ONLY a valid JSON object with exactly these fields:
+{
+  "name": "string",
+  "age": "string",
+  "targetRole": "string",
+  "summary": "string",
+  "experience": "string",
+  "education": "string",
+  "skills": "string",
+  "certifications": "string"
+}
+
+No text outside the JSON. If a field has no data, return an empty string for it.`;
+
+async function callLlm(prompt: string): Promise<string> {
+  const openaiKey = process.env.OPENAI_API_KEY;
+  if (openaiKey) {
+    try {
+      const client = new OpenAI({ apiKey: openaiKey });
+      const response = await client.chat.completions.create({
+        model: OPENAI_MODEL,
+        messages: [
+          { role: "system", content: SYSTEM_PROMPT },
+          { role: "user", content: prompt },
+        ],
+        temperature: 0.2,
+      });
+      return response.choices[0]?.message?.content ?? "";
+    } catch (err) {
+      console.warn("OpenAI voice-build failed, falling back to Groq:", err);
+    }
+  }
+
+  const groqKey = process.env.GROQ_API_KEY;
+  if (!groqKey) throw new Error("Neither OPENAI_API_KEY nor GROQ_API_KEY is set");
+
+  const client = new Groq({ apiKey: groqKey });
+  const response = await client.chat.completions.create({
+    model: GROQ_FALLBACK_MODEL,
+    messages: [
+      { role: "system", content: SYSTEM_PROMPT },
+      { role: "user", content: prompt },
+    ],
+    temperature: 0.2,
+  });
+  return response.choices[0]?.message?.content ?? "";
+}
+
+export async function POST(req: NextRequest) {
+  const user = await getAuthenticatedUser();
+  if (!user) {
+    return NextResponse.json({ detail: "Unauthorized" }, { status: 401 });
+  }
+
+  const answers = await req.json();
+
+  const prompt = [
+    answers.full_name ? `Full Name: ${answers.full_name}` : "",
+    answers.age ? `Age: ${answers.age}` : "",
+    answers.job_title ? `Target Role: ${answers.job_title}` : "",
+    answers.summary ? `Professional Summary (voice): ${answers.summary}` : "",
+    answers.experience ? `Work Experience (voice): ${answers.experience}` : "",
+    answers.achievement ? `Key Achievement (voice): ${answers.achievement}` : "",
+    answers.education ? `Education (voice): ${answers.education}` : "",
+    answers.skills ? `Skills (voice): ${answers.skills}` : "",
+  ]
+    .filter(Boolean)
+    .join("\n");
+
+  try {
+    const raw = await callLlm(prompt);
+    const braceStart = raw.indexOf("{");
+    const braceEnd = raw.lastIndexOf("}");
+    if (braceStart === -1 || braceEnd <= braceStart) {
+      throw new Error("No JSON returned from AI");
+    }
+    const result = JSON.parse(raw.slice(braceStart, braceEnd + 1));
+
+    // Build a ResumeProfile from the AI output and save to Supabase
+    const profile: ResumeProfile = {
+      headline: result.targetRole || null,
+      summary: result.summary || null,
+      skills: result.skills
+        ? result.skills.split(/,|\n/).map((s: string) => s.trim()).filter(Boolean)
+        : [],
+      years_experience: null,
+      experiences: result.experience
+        ? [{ title: result.targetRole || null, company: null, start_date: null, end_date: null, description: result.experience }]
+        : [],
+      education: result.education
+        ? [{ institution: null, qualification: result.education, field_of_study: null, graduation_year: null }]
+        : [],
+      target_roles: result.targetRole ? [result.targetRole] : [],
+      target_industries: [],
+      location_preference: null,
+      seniority_level: null,
+    };
+
+    // Build a raw_text representation so the resume is searchable/readable in Supabase
+    const rawText = [
+      result.name ? `Name: ${result.name}` : "",
+      result.targetRole ? `Target Role: ${result.targetRole}` : "",
+      result.summary ? `Summary:\n${result.summary}` : "",
+      result.experience ? `Experience:\n${result.experience}` : "",
+      result.education ? `Education:\n${result.education}` : "",
+      result.skills ? `Skills:\n${result.skills}` : "",
+      result.certifications ? `Certifications:\n${result.certifications}` : "",
+    ].filter(Boolean).join("\n\n");
+
+    const fileName = result.name ? `${result.name} - Voice Resume` : "Voice Resume";
+    const saved = await insertResume(user.id, fileName, rawText, profile);
+
+    return NextResponse.json({ ...result, resume_id: saved.id });
+  } catch (e) {
+    return NextResponse.json(
+      { detail: `Resume generation failed: ${e instanceof Error ? e.message : e}` },
+      { status: 502 },
+    );
+  }
+}
diff --git a/app/interview/page.tsx b/app/interview/page.tsx
index f49f4d6..a921005 100644
--- a/app/interview/page.tsx
+++ b/app/interview/page.tsx
@@ -130,6 +130,41 @@ export default function InterviewPage() {
     }
   }
 
+  const [micState, setMicState] = useState<"idle" | "listening" | "processing">("idle");
+  const recognizerRef = useRef<{ stop: () => void } | null>(null);
+
+  function handleMicClick() {
+    if (micState === "listening") {
+      recognizerRef.current?.stop();
+      return;
+    }
+
+    const SpeechRecognition =
+      (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+
+    if (!SpeechRecognition) {
+      alert("Speech recognition not supported in this browser");
+      return;
+    }
+
+    const recognition = new SpeechRecognition();
+    recognition.continuous = true;
+    recognition.interimResults = false;
+    recognition.lang = "en-US";
+
+    recognition.onresult = (event: any) => {
+      const transcript = event.results[event.results.length - 1][0].transcript;
+      setTextInput((prev) => (prev ? prev + " " + transcript : transcript));
+    };
+
+    recognition.onerror = () => setMicState("idle");
+    recognition.onend = () => setMicState("idle");
+
+    recognition.start();
+    recognizerRef.current = recognition;
+    setMicState("listening");
+  }
+
   function startSession() {
     setSessionStarted(true);
     setConversation([
diff --git a/app/jobs/recommendation/page.tsx b/app/jobs/recommendation/page.tsx
index a0948bd..ed45ddc 100644
--- a/app/jobs/recommendation/page.tsx
+++ b/app/jobs/recommendation/page.tsx
@@ -1,40 +1,397 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { useLanguage } from "@/components/providers/language-provider";
+import type { JobRecommendation, ScrapedJob } from "@/lib/services/jobRecommendation";
 
-type Recommendation = {
-  title: string;
-  company: string;
-  matchScore: number;
-  strengths: string[];
-  improvements: string[];
-  reasoning: string;
-  applyUrl: string;
-};
-
-const mockRecommendation: Recommendation = {
-  title: "Operations Executive",
-  company: "Inter Group",
-  matchScore: 88,
-  strengths: [
-    "Your coordination and documentation experience align well with this role.",
-    "Your communication background supports stakeholder and internal team follow-up.",
-    "Your profile shows transferable operational support capabilities.",
-  ],
-  improvements: [
-    "Add more measurable achievements to your resume.",
-    "Highlight specific tools or systems you have used.",
-    "Strengthen your professional summary around operations impact.",
-  ],
-  reasoning:
-    "This role appears to be the strongest fit based on your coordination, administration, and support experience. Your background aligns well with process support and day-to-day operational responsibilities.",
-  applyUrl: "https://example.com/job/operations-executive",
-};
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type Tab = "recommendations" | "scrape";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatSalary(min: number | null, max: number | null): string {
+  if (!min && !max) return "Salary not stated";
+  if (min && max) return `$${min.toLocaleString()} – $${max.toLocaleString()} / month`;
+  if (min) return `From $${min.toLocaleString()} / month`;
+  return `Up to $${max!.toLocaleString()} / month`;
+}
+
+function ScoreBadge({ score }: { score: number }) {
+  const color =
+    score >= 80
+      ? "text-emerald-700 bg-emerald-50 border-emerald-100"
+      : score >= 60
+        ? "text-amber-700 bg-amber-50 border-amber-100"
+        : "text-slate-600 bg-slate-50 border-slate-200";
+
+  return (
+    <div className={`rounded-2xl border px-5 py-4 text-center ${color}`}>
+      <p className="text-xs font-semibold uppercase tracking-[0.14em] opacity-70">Match</p>
+      <p className="mt-1 text-3xl font-semibold">{score}%</p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Job Card
+// ---------------------------------------------------------------------------
+
+function JobCard({
+  job,
+  selected,
+  onClick,
+}: {
+  job: JobRecommendation;
+  selected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`w-full rounded-2xl border p-4 text-left transition hover:shadow-md ${
+        selected
+          ? "border-navy-950 bg-navy-950 text-white shadow-md"
+          : "border-slate-200 bg-white text-navy-950"
+      }`}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <p className={`text-xs font-medium ${selected ? "text-slate-300" : "text-slate-500"}`}>
+            {job.company} · {job.source}
+          </p>
+          <p className="mt-0.5 truncate text-sm font-semibold">{job.title}</p>
+          <p className={`mt-1 text-xs ${selected ? "text-slate-300" : "text-slate-400"}`}>
+            {formatSalary(job.salaryMin, job.salaryMax)}
+          </p>
+        </div>
+        <span
+          className={`shrink-0 rounded-xl px-2 py-1 text-xs font-semibold ${
+            selected ? "bg-white/20 text-white" : "bg-slate-100 text-slate-600"
+          }`}
+        >
+          {job.matchScore}%
+        </span>
+      </div>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Recommendations Tab
+// ---------------------------------------------------------------------------
+
+function RecommendationsTab({ t }: { t: (key: string) => string }) {
+  const [jobs, setJobs] = useState<JobRecommendation[]>([]);
+  const [selected, setSelected] = useState<JobRecommendation | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch("/api/jobs/recommend");
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error ?? "Failed to load recommendations");
+        setJobs(data.recommendations ?? []);
+        if (data.recommendations?.length) setSelected(data.recommendations[0]);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Something went wrong");
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center py-24 text-slate-500">
+        <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-slate-200 border-t-navy-950" />
+        <p className="text-sm">Finding your best job matches…</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-2xl border border-red-100 bg-red-50 p-6 text-center text-sm text-red-700">
+        {error}
+        {error.includes("resume") && (
+          <div className="mt-4">
+            <Link
+              href="/resume"
+              className="inline-flex items-center rounded-xl bg-navy-950 px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+            >
+              Upload Resume →
+            </Link>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (!jobs.length) {
+    return (
+      <div className="rounded-2xl border border-slate-200 bg-white p-8 text-center text-slate-500">
+        <p className="text-sm">No matching jobs found. Try updating your resume profile.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-6 xl:grid-cols-[1fr_1.4fr]">
+      {/* Job list */}
+      <div className="space-y-3">
+        <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">
+          {jobs.length} matches found
+        </p>
+        {jobs.map((job) => (
+          <JobCard
+            key={job.id}
+            job={job}
+            selected={selected?.id === job.id}
+            onClick={() => setSelected(job)}
+          />
+        ))}
+      </div>
+
+      {/* Detail panel */}
+      {selected && (
+        <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+          <div className="flex flex-wrap items-start justify-between gap-4">
+            <div>
+              <p className="text-sm font-medium text-slate-500">{selected.company}</p>
+              <h2 className="mt-1 text-2xl font-semibold text-navy-950">{selected.title}</h2>
+              <p className="mt-1 text-sm text-slate-500">
+                {formatSalary(selected.salaryMin, selected.salaryMax)}
+                {selected.employmentType && ` · ${selected.employmentType}`}
+              </p>
+            </div>
+            <ScoreBadge score={selected.matchScore} />
+          </div>
+
+          {/* Skills */}
+          {selected.skills.length > 0 && (
+            <div className="mt-5 flex flex-wrap gap-2">
+              {selected.skills.map((s) => (
+                <span
+                  key={s}
+                  className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-600"
+                >
+                  {s}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {/* Reasoning */}
+          <div className="mt-6 rounded-2xl border border-slate-200 bg-slate-50 p-5">
+            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
+              Why this matches you
+            </p>
+            <p className="mt-3 text-sm leading-7 text-slate-700">{selected.reasoning}</p>
+          </div>
+
+          {/* Strengths & Improvements */}
+          <div className="mt-5 grid gap-4 md:grid-cols-2">
+            <div className="rounded-2xl border border-emerald-100 bg-emerald-50 p-5">
+              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-emerald-700">
+                Your Strengths
+              </p>
+              <div className="mt-4 space-y-2 text-sm leading-6 text-emerald-900">
+                {selected.strengths.map((item) => (
+                  <p key={item}>• {item}</p>
+                ))}
+              </div>
+            </div>
+            <div className="rounded-2xl border border-amber-100 bg-amber-50 p-5">
+              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-amber-700">
+                To Improve
+              </p>
+              <div className="mt-4 space-y-2 text-sm leading-6 text-amber-900">
+                {selected.improvements.map((item) => (
+                  <p key={item}>• {item}</p>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* CTA */}
+          <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+            <a
+              href={selected.applyUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center justify-center rounded-xl bg-navy-950 px-5 py-3 text-sm font-medium text-white transition hover:opacity-90"
+            >
+              View on {selected.source} →
+            </a>
+            <Link
+              href="/interview"
+              className="inline-flex items-center justify-center rounded-xl border border-slate-200 px-5 py-3 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
+            >
+              Practice Interview
+            </Link>
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// URL Scraper Tab
+// ---------------------------------------------------------------------------
+
+function ScrapeTab() {
+  const [url, setUrl] = useState("");
+  const [job, setJob] = useState<ScrapedJob | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleExtract() {
+  if (!url.trim()) return;
+  setLoading(true);
+  setError(null);
+  setJob(null);
+
+  console.log("Sending POST to /api/jobs/scrape with URL:", url.trim());
+
+  try {
+    const res = await fetch("/api/jobs/scrape", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ url: url.trim() }),
+    });
+    console.log("Response status:", res.status, res.url);
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error ?? "Failed to extract job");
+      setJob(data.job);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h2 className="text-lg font-semibold text-navy-950">Extract Job from URL</h2>
+        <p className="mt-1 text-sm text-slate-500">
+          Paste any job posting URL — LinkedIn, JobStreet, Indeed, MyCareersFuture, or any other
+          job board.
+        </p>
+
+        <div className="mt-5 flex gap-3">
+          <input
+            type="text"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="https://www.linkedin.com/jobs/view/..."
+            className="flex-1 rounded-xl border border-slate-200 px-4 py-3 text-sm text-slate-700 outline-none focus:border-navy-950 focus:ring-2 focus:ring-navy-950/10"
+          />
+          <button
+          type="button"
+            onClick={handleExtract}
+            disabled={loading || !url.trim()}
+            className="rounded-xl bg-navy-950 px-5 py-3 text-sm font-medium text-white transition hover:opacity-90 disabled:opacity-50"
+          >
+            {loading ? "Extracting…" : "Extract"}
+          </button>
+        </div>
+
+        {error && (
+          <p className="mt-3 text-sm text-red-600">{error}</p>
+        )}
+      </div>
+
+      {job && (
+        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <p className="text-xs font-medium text-slate-400">{job.source}</p>
+              <h2 className="mt-1 text-2xl font-semibold text-navy-950">
+                {job.title ?? "Untitled Role"}
+              </h2>
+              {job.company && (
+                <p className="mt-0.5 text-sm font-medium text-slate-500">{job.company}</p>
+              )}
+            </div>
+          </div>
+
+          <div className="mt-4 flex flex-wrap gap-3 text-sm text-slate-500">
+            {job.salary && <span>💰 {job.salary}</span>}
+            {job.location && <span>📍 {job.location}</span>}
+            {job.employmentType && <span>🕐 {job.employmentType}</span>}
+          </div>
+
+          {job.skills.length > 0 && (
+            <div className="mt-5">
+              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">
+                Key Skills
+              </p>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {job.skills.map((s) => (
+                  <span
+                    key={s}
+                    className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-600"
+                  >
+                    {s}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {job.description && (
+            <div className="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-5">
+              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">
+                Description
+              </p>
+              <p className="mt-3 whitespace-pre-line text-sm leading-7 text-slate-700">
+                {job.description.slice(0, 800)}
+                {job.description.length > 800 && "…"}
+              </p>
+            </div>
+          )}
+
+          <div className="mt-6 flex gap-3">
+            <a
+              href={job.applyUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center justify-center rounded-xl bg-navy-950 px-5 py-3 text-sm font-medium text-white transition hover:opacity-90"
+            >
+              View Original Posting →
+            </a>
+            <Link
+              href="/interview"
+              className="inline-flex items-center justify-center rounded-xl border border-slate-200 px-5 py-3 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
+            >
+              Practice Interview
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main Page
+// ---------------------------------------------------------------------------
 
 export default function JobRecommendationPage() {
   const { t } = useLanguage();
+  const [tab, setTab] = useState<Tab>("recommendations");
 
   return (
     <main className="min-h-screen bg-[#f8f8f6]">
@@ -62,90 +419,35 @@ export default function JobRecommendationPage() {
           </p>
         </div>
 
-        <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
-          <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-            <div className="flex flex-wrap items-start justify-between gap-4">
-              <div>
-                <p className="text-sm font-medium text-slate-500">{mockRecommendation.company}</p>
-                <h2 className="mt-1 text-3xl font-semibold text-navy-950">
-                  {mockRecommendation.title}
-                </h2>
-              </div>
-
-              <div className="rounded-2xl border border-slate-200 bg-slate-50 px-5 py-4 text-center">
-                <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
-                  {t("jobs_recommendation_score")}
-                </p>
-                <p className="mt-2 text-3xl font-semibold text-navy-950">
-                  {mockRecommendation.matchScore}%
-                </p>
-              </div>
-            </div>
-
-            <div className="mt-6 rounded-2xl border border-slate-200 bg-slate-50 p-5">
-              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
-                {t("jobs_recommendation_section_why_match")}
-              </p>
-              <p className="mt-3 text-sm leading-7 text-slate-700">
-                {mockRecommendation.reasoning}
-              </p>
-            </div>
-
-            <div className="mt-6 grid gap-4 md:grid-cols-2">
-              <div className="rounded-2xl border border-emerald-100 bg-emerald-50 p-5">
-                <p className="text-xs font-semibold uppercase tracking-[0.14em] text-emerald-700">
-                  {t("jobs_recommendation_panel_strengths")}
-                </p>
-                <div className="mt-4 space-y-3 text-sm leading-6 text-emerald-900">
-                  {mockRecommendation.strengths.map((item) => (
-                    <p key={item}>• {item}</p>
-                  ))}
-                </div>
-              </div>
-
-              <div className="rounded-2xl border border-amber-100 bg-amber-50 p-5">
-                <p className="text-xs font-semibold uppercase tracking-[0.14em] text-amber-700">
-                  {t("jobs_recommendation_panel_improvements")}
-                </p>
-                <div className="mt-4 space-y-3 text-sm leading-6 text-amber-900">
-                  {mockRecommendation.improvements.map((item) => (
-                    <p key={item}>• {item}</p>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <aside className="space-y-6">
-            <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-navy-950">{t("jobs_apply_section_title")}</h2>
-              <p className="mt-2 text-sm leading-6 text-slate-600">{t("jobs_apply_section_body")}</p>
-
-              <div className="mt-5 flex flex-col gap-3">
-                <a
-                  href={mockRecommendation.applyUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="inline-flex items-center justify-center rounded-xl bg-navy-950 px-4 py-3 text-sm font-medium text-white transition hover:opacity-90"
-                >
-                  {t("jobs_view_listing")}
-                </a>
-
-                <Link
-                  href="/interview"
-                  className="inline-flex items-center justify-center rounded-xl border border-slate-200 px-4 py-3 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
-                >
-                  {t("jobs_continue_interview")}
-                </Link>
-              </div>
-            </div>
-
-            <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-navy-950">{t("jobs_recommendation_notes_title")}</h2>
-              <p className="mt-2 text-sm leading-6 text-slate-600">{t("jobs_recommendation_notes_body")}</p>
-            </div>
-          </aside>
+        {/* Tabs */}
+        <div className="mb-6 flex gap-1 rounded-xl border border-slate-200 bg-white p-1 w-fit shadow-sm">
+          <button
+            onClick={() => setTab("recommendations")}
+            className={`rounded-lg px-5 py-2 text-sm font-medium transition ${
+              tab === "recommendations"
+                ? "bg-navy-950 text-white shadow"
+                : "text-slate-600 hover:bg-slate-50"
+            }`}
+          >
+            AI Recommendations
+          </button>
+          <button
+            onClick={() => setTab("scrape")}
+            className={`rounded-lg px-5 py-2 text-sm font-medium transition ${
+              tab === "scrape"
+                ? "bg-navy-950 text-white shadow"
+                : "text-slate-600 hover:bg-slate-50"
+            }`}
+          >
+            Extract from URL
+          </button>
         </div>
+
+        {tab === "recommendations" ? (
+          <RecommendationsTab t={t} />
+        ) : (
+          <ScrapeTab />
+        )}
       </section>
     </main>
   );
diff --git a/app/resume/builder/page.tsx b/app/resume/builder/page.tsx
index 948c259..f46b71e 100644
--- a/app/resume/builder/page.tsx
+++ b/app/resume/builder/page.tsx
@@ -1,9 +1,11 @@
 "use client";
 
 import Link from "next/link";
-import { ChangeEvent, useMemo, useState } from "react";
+import { ChangeEvent, useEffect, useMemo, useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { useLanguage } from "@/components/providers/language-provider";
+import { createClient } from "@/lib/supabase/client";
+import { getResumeById, listResumes } from "@/lib/api";
 
 type ExperienceItem = {
   id: string;
@@ -44,6 +46,7 @@ export default function ResumeBuilderPage() {
   const { t } = useLanguage();
 
   const [photoPreview, setPhotoPreview] = useState<string | null>(null);
+  const [prefillLoading, setPrefillLoading] = useState(false);
 
   const [fullName, setFullName] = useState("Your Name");
   const [targetRole, setTargetRole] = useState("Operations Executive");
@@ -92,6 +95,104 @@ export default function ResumeBuilderPage() {
     },
   ]);
 
+  useEffect(() => {
+    let cancelled = false;
+
+    async function prefillFromResume() {
+      setPrefillLoading(true);
+      try {
+        // Get email from Supabase auth
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!cancelled && user?.email) {
+          console.log("[ResumeBuilder] Got user email:", user.email);
+          setEmail(user.email);
+        }
+
+        // Get most recent analyzed resume
+        console.log("[ResumeBuilder] Fetching resumes...");
+        const listed = await listResumes();
+        console.log("[ResumeBuilder] Listed resumes:", listed.resumes?.length ?? 0);
+
+        if (!listed.resumes?.length || cancelled) return;
+
+        const withProfile = listed.resumes.find((r) => r.parsed_profile);
+        const target = withProfile ?? listed.resumes[0];
+        if (!target) return;
+
+        console.log("[ResumeBuilder] Loading resume:", target.id, target.file_name);
+        const data = await getResumeById(target.id);
+        if (cancelled || !data?.resume) return;
+
+        const resume = data.resume;
+        const profile = resume.parsed_profile;
+
+        console.log("[ResumeBuilder] Profile:", profile);
+
+        // Extract name from raw_text first meaningful line
+        if (resume.raw_text) {
+          const firstMeaningfulLine = resume.raw_text.split("\n").find((line) => {
+            const trimmed = line.trim();
+            return (
+              trimmed.length > 0 &&
+              trimmed.length < 60 &&
+              !/[@\d+()[\]]|Summary|Experience|Skills|Education|Name:|Target/i.test(trimmed)
+            );
+          });
+          if (firstMeaningfulLine && !cancelled) {
+            console.log("[ResumeBuilder] Extracted name:", firstMeaningfulLine.trim());
+            setFullName(firstMeaningfulLine.trim());
+          }
+        }
+
+        if (!profile || cancelled) return;
+
+        if (profile.headline) setTargetRole(profile.headline);
+        if (profile.summary) setSummary(profile.summary);
+
+        if (profile.skills?.length) {
+          setSkills(profile.skills.map((name) => ({ id: createId(), name, level: 80 })));
+        }
+
+        if (profile.experiences?.length) {
+          setExperiences(
+            profile.experiences.map((exp) => ({
+              id: createId(),
+              jobTitle: exp.title ?? "",
+              company: exp.company ?? "",
+              location: "",
+              startDate: exp.start_date ?? "",
+              endDate: exp.end_date ?? "",
+              description: exp.description ?? "",
+            })),
+          );
+        }
+
+        if (profile.education?.length) {
+          setEducations(
+            profile.education.map((edu) => ({
+              id: createId(),
+              school: edu.institution ?? "",
+              qualification: edu.qualification ?? "",
+              fieldOfStudy: edu.field_of_study ?? "",
+              startDate: "",
+              endDate: edu.graduation_year != null ? String(edu.graduation_year) : "",
+            })),
+          );
+        }
+      } catch (err) {
+        console.error("[ResumeBuilder] prefillFromResume error:", err);
+      } finally {
+        if (!cancelled) setPrefillLoading(false);
+      }
+    }
+
+    prefillFromResume();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   function handlePhotoChange(event: ChangeEvent<HTMLInputElement>) {
     const file = event.target.files?.[0];
     if (!file) return;
diff --git a/app/resume/page.tsx b/app/resume/page.tsx
index db11346..1e45190 100644
--- a/app/resume/page.tsx
+++ b/app/resume/page.tsx
@@ -10,6 +10,7 @@ import { useResumeStatus } from "@/components/providers/resume-status-provider";
 import { createClient } from "@/lib/supabase/client";
 import { getProfileJob, listResumes, profileResume, uploadResume, type ResumeSummary } from "@/lib/api";
 import type { ResumeProfile } from "@/lib/types";
+import type { ResumeFeedback } from "@/app/api/resume/route";
 
 export default function ResumeOnboardingPage() {
   const { t } = useLanguage();
@@ -24,11 +25,16 @@ export default function ResumeOnboardingPage() {
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [lastResumeId, setLastResumeId] = useState<string | null>(null);
   const [userResumes, setUserResumes] = useState<ResumeSummary[]>([]);
+
+  // Voice-to-text state
   const [micState, setMicState] = useState<"idle" | "listening" | "processing">("idle");
   const [voiceText, setVoiceText] = useState("");
-  const recognizerRef = useRef<{
-    stopContinuousRecognitionAsync: (cb?: () => void, err?: (e: string) => void) => void;
-  } | null>(null);
+  const recognizerRef = useRef<{ stop: () => void } | null>(null);
+
+  // AI feedback state
+  const [feedback, setFeedback] = useState<ResumeFeedback | null>(null);
+  const [analysing, setAnalysing] = useState(false);
+  const [analysisError, setAnalysisError] = useState<string | null>(null);
 
   useEffect(() => {
     const supabase = createClient();
@@ -53,6 +59,8 @@ export default function ResumeOnboardingPage() {
     setSelectedFileName(file?.name ?? "");
     setError(null);
     setSuccessMessage(null);
+    setFeedback(null);
+    setAnalysisError(null);
   }, []);
 
   function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -170,46 +178,63 @@ export default function ResumeOnboardingPage() {
     }
   }, [router, selectedFile, refetchResumeStatus, t]);
 
-  async function handleMicClick() {
+  async function handleAnalyse() {
+    if (!selectedFile) return;
+    setAnalysing(true);
+    setAnalysisError(null);
+    setFeedback(null);
+
+    try {
+      const formData = new FormData();
+      formData.append("file", selectedFile);
+      formData.append("voiceText", voiceText);
+
+      const res = await fetch("/api/resume", { method: "POST", body: formData });
+      const json = await res.json();
+
+      if (!res.ok) {
+        setAnalysisError(json.detail ?? "Something went wrong. Please try again.");
+        return;
+      }
+
+      setFeedback(json.feedback as ResumeFeedback);
+    } catch {
+      setAnalysisError("Network error. Please check your connection and try again.");
+    } finally {
+      setAnalysing(false);
+    }
+  }
+
+  function handleMicClick() {
     if (micState === "listening") {
-      recognizerRef.current?.stopContinuousRecognitionAsync(
-        () => setMicState("idle"),
-        () => setMicState("idle"),
-      );
+      recognizerRef.current?.stop();
       return;
     }
 
-    setMicState("processing");
-    try {
-      const res = await fetch("/api/speech");
-      if (!res.ok) throw new Error("Failed to get speech token");
-      const { token, region } = await res.json();
+    const SpeechRecognition =
+      (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
 
-      const SpeechSDK = await import("microsoft-cognitiveservices-speech-sdk");
-      const speechConfig = SpeechSDK.SpeechConfig.fromAuthorizationToken(token, region);
-      speechConfig.speechRecognitionLanguage = "en-SG";
-      const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
-      const recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
+    if (!SpeechRecognition) {
+      alert("Speech recognition not supported in this browser");
+      return;
+    }
 
-      recognizerRef.current = recognizer;
+    const recognition = new SpeechRecognition();
+    recognition.continuous = true;
+    recognition.interimResults = false;
+    recognition.lang = "en-US";
 
-      recognizer.recognized = (_: unknown, e: { result: { reason: number; text: string } }) => {
-        if (e.result.reason === SpeechSDK.ResultReason.RecognizedSpeech && e.result.text) {
-          setVoiceText((prev) => (prev ? prev + " " + e.result.text : e.result.text));
-        }
-      };
+    recognition.onresult = (event: any) => {
+      const transcript = event.results[event.results.length - 1][0].transcript;
+      setVoiceText((prev) => (prev ? prev + " " + transcript : transcript));
+    };
 
-      recognizer.startContinuousRecognitionAsync(
-        () => setMicState("listening"),
-        (err: string) => {
-          console.error("Speech recognition error:", err);
-          setMicState("idle");
-        },
-      );
-    } catch (err) {
-      console.error("Mic setup failed:", err);
-      setMicState("idle");
-    }
+    recognition.onerror = () => setMicState("idle");
+    recognition.onend = () => setMicState("idle");
+
+    recognition.start();
+    recognizerRef.current = recognition;
+    setMicState("listening");
   }
 
   const reviewHref =
@@ -280,7 +305,7 @@ export default function ResumeOnboardingPage() {
                 />
                 <button
                   type="button"
-                  onClick={() => void handleMicClick()}
+                  onClick={handleMicClick}
                   title={micState === "listening" ? "Stop recording" : "Start voice input"}
                   className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl border transition ${
                     micState === "listening"
@@ -341,6 +366,21 @@ export default function ResumeOnboardingPage() {
               />
             </div>
 
+            <button
+              type="button"
+              onClick={() => void handleAnalyse()}
+              disabled={!selectedFile || analysing}
+              className="mt-4 w-full rounded-xl border border-[#b88a44] px-4 py-3 text-sm font-medium text-[#b88a44] transition hover:bg-amber-50 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              {analysing ? "Analysing..." : "Analyse My Resume"}
+            </button>
+
+            {analysisError ? (
+              <p className="mt-3 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                {analysisError}
+              </p>
+            ) : null}
+
             <div className="mt-3 flex flex-wrap gap-3">
               <button
                 type="button"
@@ -384,6 +424,153 @@ export default function ResumeOnboardingPage() {
           </aside>
         </div>
 
+        {/* AI Feedback section — only rendered when feedback data exists */}
+        {feedback ? (
+          <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+            <div className="flex items-center justify-between">
+              <h2 className="text-xl font-semibold text-navy-950">AI Feedback</h2>
+              <span className="text-sm font-semibold text-navy-950">
+                Score: <span className="text-2xl">{feedback.score}</span>
+                <span className="font-normal text-slate-400"> / 10</span>
+              </span>
+            </div>
+
+            <div className="mt-4 grid gap-4 sm:grid-cols-2">
+              <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
+                <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
+                  Overall Impression
+                </p>
+                <p className="text-sm leading-6 text-slate-700">{feedback.overallImpression}</p>
+              </div>
+
+              <div className="rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-3">
+                <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-emerald-600">
+                  Key Strengths
+                </p>
+                <ul className="space-y-1.5">
+                  {feedback.keyStrengths.map((s, i) => (
+                    <li key={i} className="flex gap-2 text-sm text-slate-700">
+                      <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-[10px] font-bold text-emerald-700">
+                        {i + 1}
+                      </span>
+                      {s}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div className="rounded-xl border border-amber-100 bg-amber-50 px-4 py-3">
+                <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-amber-600">
+                  Areas to Improve
+                </p>
+                <ul className="space-y-1.5">
+                  {feedback.areasToImprove.map((s, i) => (
+                    <li key={i} className="flex gap-2 text-sm text-slate-700">
+                      <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-amber-100 text-[10px] font-bold text-amber-700">
+                        {i + 1}
+                      </span>
+                      {s}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
+                <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
+                  Suggested Edits
+                </p>
+                <ul className="space-y-1.5">
+                  {feedback.suggestedEdits.map((s, i) => (
+                    <li key={i} className="flex gap-2 text-sm text-slate-700">
+                      <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-navy-100 text-[10px] font-bold text-navy-700">
+                        {i + 1}
+                      </span>
+                      {s}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {feedback.atsAnalysis ? (
+                <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3 sm:col-span-2">
+                  <div className="mb-3 flex items-center gap-3">
+                    <p className="text-xs font-semibold uppercase tracking-wider text-slate-400">
+                      ATS Analysis
+                    </p>
+                    <span
+                      className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
+                        feedback.atsAnalysis.atsFriendly
+                          ? "bg-emerald-100 text-emerald-700"
+                          : "bg-red-100 text-red-700"
+                      }`}
+                    >
+                      {feedback.atsAnalysis.atsFriendly ? "ATS Friendly" : "Not ATS Friendly"}
+                    </span>
+                  </div>
+                  {feedback.atsAnalysis.atsNotes ? (
+                    <p className="mb-3 text-sm leading-6 text-slate-700">{feedback.atsAnalysis.atsNotes}</p>
+                  ) : null}
+                  {feedback.atsAnalysis.keywordsFound?.length ? (
+                    <div className="mb-2">
+                      <p className="mb-1.5 text-xs font-medium text-slate-500">Keywords Found</p>
+                      <div className="flex flex-wrap gap-1.5">
+                        {feedback.atsAnalysis.keywordsFound.map((kw) => (
+                          <span
+                            key={kw}
+                            className="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800"
+                          >
+                            {kw}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  ) : null}
+                  {feedback.atsAnalysis.keywordsMissing?.length ? (
+                    <div>
+                      <p className="mb-1.5 text-xs font-medium text-slate-500">Keywords Missing</p>
+                      <div className="flex flex-wrap gap-1.5">
+                        {feedback.atsAnalysis.keywordsMissing.map((kw) => (
+                          <span
+                            key={kw}
+                            className="rounded-full bg-orange-100 px-2.5 py-0.5 text-xs font-medium text-orange-800"
+                          >
+                            {kw}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              ) : null}
+
+              {feedback.careerProgression ? (
+                <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
+                  <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
+                    Career Progression
+                  </p>
+                  <p className="text-sm leading-6 text-slate-700">{feedback.careerProgression}</p>
+                </div>
+              ) : null}
+
+              {feedback.salaryBenchmark ? (
+                <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
+                  <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
+                    Salary Benchmark
+                  </p>
+                  <p className="text-lg font-semibold text-navy-950">
+                    {feedback.salaryBenchmark.estimatedRange}
+                  </p>
+                  {feedback.salaryBenchmark.rationale ? (
+                    <p className="mt-1.5 text-sm leading-6 text-slate-600">
+                      {feedback.salaryBenchmark.rationale}
+                    </p>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+
         <div className="mt-10 max-w-3xl">
           <ResumeList resumes={userResumes} onDeleted={handleResumeDeleted} className="mt-0" />
         </div>
diff --git a/app/resume/review/page.tsx b/app/resume/review/page.tsx
index 0a95adc..d2145fb 100644
--- a/app/resume/review/page.tsx
+++ b/app/resume/review/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useState } from "react";
@@ -56,7 +57,6 @@ function splitSuggestions(suggestions: ResumeSuggestion[] | null | undefined): {
   positiveHints: ResumeSuggestion[];
 } {
   if (!suggestions?.length) return { toImprove: [], positiveHints: [] };
-  /** Layout/visual feedback from vision + text — must be included; was missing and never appeared in sidebar columns */
   const toImprove = suggestions.filter(
     (s) =>
       s.type === "critical_fix" ||
@@ -73,6 +73,52 @@ function splitSuggestions(suggestions: ResumeSuggestion[] | null | undefined): {
   };
 }
 
+function parseImprovedResume(text: string): {
+  summary: string | null;
+  experience: string | null;
+  skills: string | null;
+  education: string | null;
+} {
+  // Strip **bold** markdown markers from AI output
+  const cleaned = text.replace(/\*\*/g, "");
+
+  function extractSection(label: string): string | null {
+    const regex = new RegExp(
+      `${label}[:\\s]*\\n([\\s\\S]*?)(?=\\n[A-Z][A-Za-z ]{2,}[:\\n]|$)`,
+      "i",
+    );
+    const match = cleaned.match(regex);
+    return match?.[1]?.trim() || null;
+  }
+
+  const summary = extractSection("Summary") || extractSection("Professional Summary");
+  const experience = extractSection("Experience") || extractSection("Work Experience");
+  const skills = extractSection("Skills") || extractSection("Key Skills");
+  const education = extractSection("Education");
+
+  // Fallback: if no sections parsed, put entire text into experience
+  if (!summary && !experience && !skills && !education) {
+    return { summary: null, experience: text.trim(), skills: null, education: null };
+  }
+
+  return { summary, experience, skills, education };
+}
+
+function extractCandidateName(rawText: string, fileName: string): string {
+  const firstMeaningfulLine = rawText.split("\n").find((line) => {
+    const trimmed = line.trim();
+    return (
+      trimmed.length > 0 &&
+      trimmed.length < 60 &&
+      !/[@\d+()[\]]|Summary|Experience|Skills|Education|Name:|Target/i.test(trimmed)
+    );
+  });
+  if (firstMeaningfulLine) return firstMeaningfulLine.trim();
+  // Fallback: "John Doe - Voice Resume" → "John Doe"
+  const fromFileName = fileName.split(" - ")[0].trim();
+  return fromFileName || "Resume";
+}
+
 const SUGGESTION_TYPE_LABEL: Record<ResumeSuggestion["type"], string> = {
   critical_fix: "Critical",
   enhancement: "Enhancement",
@@ -92,15 +138,31 @@ function ResumeReviewContent() {
   const [error, setError] = useState<string | null>(null);
   const [profiling, setProfiling] = useState(false);
   const [fileName, setFileName] = useState<string | null>(null);
+  const [rawText, setRawText] = useState<string>("");
   const [profile, setProfile] = useState<ResumeProfile | null>(null);
   const [suggestions, setSuggestions] = useState<ResumeSuggestion[] | null>(null);
   const [resumeId, setResumeId] = useState<string | null>(null);
 
+  // Editable override states
+  const [summaryOverride, setSummaryOverride] = useState<string | null>(null);
+  const [experienceOverride, setExperienceOverride] = useState<string | null>(null);
+  const [skillsOverride, setSkillsOverride] = useState<string | null>(null);
+  const [educationOverride, setEducationOverride] = useState<string | null>(null);
+
+  // Improve / rescore states
+  const [improving, setImproving] = useState(false);
+  const [improvedText, setImprovedText] = useState<string | null>(null);
+  const [improveError, setImproveError] = useState<string | null>(null);
+  const [rescoring, setRescoring] = useState(false);
+  const [rescoreScore, setRescoreScore] = useState<number | null>(null);
+  const [rescoreError, setRescoreError] = useState<string | null>(null);
+  const [downloadingPdf, setDownloadingPdf] = useState(false);
+
   const loadResume = useCallback(async (id: string) => {
     try {
       const data = await getResumeById(id);
       if (!data?.resume) {
-        setError("Resume not found or you don’t have access.");
+        setError("Resume not found or you don't have access.");
         setProfile(null);
         setSuggestions(null);
         setFileName(null);
@@ -109,11 +171,19 @@ function ResumeReviewContent() {
       }
       setResumeId(data.resume.id);
       setFileName(data.resume.file_name);
+      setRawText(data.resume.raw_text ?? "");
       setProfile(data.resume.parsed_profile);
       setSuggestions(data.resume.ai_suggestions);
+      // Reset overrides when loading a new resume
+      setSummaryOverride(null);
+      setExperienceOverride(null);
+      setSkillsOverride(null);
+      setEducationOverride(null);
+      setRescoreScore(null);
+      setImprovedText(null);
       if (!data.resume.parsed_profile) {
         setError(
-          "This resume has not been analyzed yet. Use “Run AI analysis” below, or upload again from the resume page.",
+          "This resume has not been analyzed yet. Use \"Run AI analysis\" below, or upload again from the resume page.",
         );
       } else {
         setError(null);
@@ -236,7 +306,156 @@ function ResumeReviewContent() {
     }
   }
 
-  const score = deriveIndicatorScore(suggestions);
+  async function handleGenerateImproved() {
+    setImproving(true);
+    setImproveError(null);
+    try {
+      const resumeText = [
+        summaryDisplay ? `Summary:\n${summaryDisplay}` : "",
+        experienceDisplay ? `Experience:\n${experienceDisplay}` : "",
+        skillsDisplay ? `Skills:\n${skillsDisplay}` : "",
+        educationDisplay ? `Education:\n${educationDisplay}` : "",
+      ]
+        .filter(Boolean)
+        .join("\n\n");
+
+      const feedbackList = suggestions?.map((s) => s.suggestion) ?? [];
+
+      const res = await fetch("/api/resume/improve", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ resumeText, feedback: feedbackList }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.detail || "Improvement failed");
+      setImprovedText(data.improvedResume);
+    } catch (e) {
+      setImproveError(e instanceof Error ? e.message : "Improvement failed");
+    } finally {
+      setImproving(false);
+    }
+  }
+
+  function handleApplyImproved() {
+    if (!improvedText) return;
+    const parsed = parseImprovedResume(improvedText);
+    if (parsed.summary) setSummaryOverride(parsed.summary);
+    if (parsed.experience) setExperienceOverride(parsed.experience);
+    if (parsed.skills) setSkillsOverride(parsed.skills);
+    if (parsed.education) setEducationOverride(parsed.education);
+    setImprovedText(null);
+  }
+
+  async function handleRescore() {
+    setRescoring(true);
+    setRescoreError(null);
+    try {
+      const resumeText = [summaryDisplay, experienceDisplay, skillsDisplay, educationDisplay]
+        .filter(Boolean)
+        .join("\n\n");
+      const res = await fetch("/api/resume/rescore", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text: resumeText }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.detail || "Rescore failed");
+      // score is 1–10, scale to 0–100 for display
+      setRescoreScore(Math.round(data.score * 10));
+    } catch (e) {
+      setRescoreError(e instanceof Error ? e.message : "Rescore failed");
+    } finally {
+      setRescoring(false);
+    }
+  }
+
+  async function handleDownloadPdf() {
+    setDownloadingPdf(true);
+    try {
+      const { pdf, Document, Page, Text, View, StyleSheet } = await import("@react-pdf/renderer");
+
+      const styles = StyleSheet.create({
+        page: { padding: 56.7, fontFamily: "Helvetica" },
+        name: { fontSize: 18, marginBottom: 4 },
+        contact: { fontSize: 9, color: "#888888", marginBottom: 8 },
+        divider: { borderBottomWidth: 1, borderBottomColor: "#dddddd", borderBottomStyle: "solid", marginBottom: 12 },
+        sectionHeader: { fontSize: 11, fontWeight: "bold", marginBottom: 6, marginTop: 10 },
+        body: { fontSize: 10, lineHeight: 1.5, marginBottom: 4 },
+        bullet: { fontSize: 10, lineHeight: 1.5, marginBottom: 2 },
+      });
+
+      const candidateName = rawText
+        ? extractCandidateName(rawText, fileName ?? "")
+        : fileName?.split(" - ")[0] ?? "Resume";
+
+      const sections: React.ReactNode[] = [];
+
+      if (summaryDisplay) {
+        sections.push(
+          React.createElement(Text, { key: "summary-h", style: styles.sectionHeader }, "SUMMARY"),
+          React.createElement(Text, { key: "summary-b", style: styles.body }, summaryDisplay),
+        );
+      }
+
+      if (experienceDisplay) {
+        sections.push(
+          React.createElement(Text, { key: "exp-h", style: styles.sectionHeader }, "EXPERIENCE"),
+        );
+        experienceDisplay.split("\n").filter(Boolean).forEach((line, i) => {
+          sections.push(
+            React.createElement(Text, { key: `exp-${i}`, style: styles.bullet }, `• ${line}`),
+          );
+        });
+      }
+
+      if (skillsDisplay) {
+        sections.push(
+          React.createElement(Text, { key: "skills-h", style: styles.sectionHeader }, "SKILLS"),
+          React.createElement(Text, { key: "skills-b", style: styles.body }, skillsDisplay),
+        );
+      }
+
+      if (educationDisplay) {
+        sections.push(
+          React.createElement(Text, { key: "edu-h", style: styles.sectionHeader }, "EDUCATION"),
+          React.createElement(Text, { key: "edu-b", style: styles.body }, educationDisplay),
+        );
+      }
+
+      const doc = React.createElement(
+        Document,
+        null,
+        React.createElement(
+          Page,
+          { size: "A4", style: styles.page },
+          React.createElement(Text, { style: styles.name }, candidateName),
+          React.createElement(
+            Text,
+            { style: styles.contact },
+            [profile?.headline, "Singapore"].filter(Boolean).join(" • "),
+          ),
+          React.createElement(View, { style: styles.divider }),
+          ...sections,
+        ),
+      );
+
+      const blob = await pdf(doc).toBlob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      const slug = candidateName.replace(/[^a-zA-Z0-9]/g, "_").toLowerCase();
+      a.href = url;
+      a.download = `${slug}_vericlause_resume.pdf`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (e) {
+      console.error("PDF generation failed:", e);
+    } finally {
+      setDownloadingPdf(false);
+    }
+  }
+
+  const baseScore = deriveIndicatorScore(suggestions);
+  const score = rescoreScore ?? baseScore;
   const { toImprove, positiveHints } = splitSuggestions(suggestions);
 
   const strengthsDisplay =
@@ -263,6 +482,11 @@ function ResumeReviewContent() {
   const skillsValue = profile?.skills?.length ? profile.skills.join(", ") : "";
   const educationValue = profile ? formatEducationText(profile) : "";
 
+  const summaryDisplay = summaryOverride !== null ? summaryOverride : summaryValue;
+  const experienceDisplay = experienceOverride !== null ? experienceOverride : experienceValue;
+  const skillsDisplay = skillsOverride !== null ? skillsOverride : skillsValue;
+  const educationDisplay = educationOverride !== null ? educationOverride : educationValue;
+
   return (
     <div className="min-h-screen bg-white">
       <SiteNavbar
@@ -359,6 +583,19 @@ function ResumeReviewContent() {
               <p className="mt-2 text-sm leading-relaxed text-slate-600">
                 {t("resume_review_score_note")}
               </p>
+
+              {rescoreError && (
+                <p className="mt-2 text-xs text-red-600">{rescoreError}</p>
+              )}
+
+              <button
+                type="button"
+                onClick={handleRescore}
+                disabled={rescoring}
+                className="mt-4 w-full rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-navy-200 hover:text-navy-950 disabled:opacity-50"
+              >
+                {rescoring ? "Rescoring…" : "Rescore Resume"}
+              </button>
             </div>
 
             <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
@@ -465,6 +702,47 @@ function ResumeReviewContent() {
                     </li>
                   ))}
                 </ul>
+
+                <div className="mt-4 flex flex-wrap gap-3">
+                  <button
+                    type="button"
+                    onClick={handleGenerateImproved}
+                    disabled={improving}
+                    className="rounded-md bg-navy-950 px-4 py-2 text-sm font-semibold text-white transition hover:bg-navy-800 disabled:opacity-50"
+                  >
+                    {improving ? "Generating improved version…" : "Generate Improved Version"}
+                  </button>
+                  {improveError && (
+                    <p className="self-center text-xs text-red-600">{improveError}</p>
+                  )}
+                </div>
+              </div>
+            ) : null}
+
+            {improvedText ? (
+              <div className="mt-6 rounded-xl border border-emerald-200 bg-emerald-50 p-4">
+                <p className="text-xs font-semibold uppercase tracking-widest text-emerald-700">
+                  Improved Resume Preview
+                </p>
+                <pre className="mt-3 max-h-64 overflow-y-auto whitespace-pre-wrap break-words text-sm leading-6 text-slate-700">
+                  {improvedText}
+                </pre>
+                <div className="mt-4 flex flex-wrap gap-3">
+                  <button
+                    type="button"
+                    onClick={handleApplyImproved}
+                    className="rounded-md bg-emerald-700 px-4 py-2 text-sm font-semibold text-white transition hover:bg-emerald-800"
+                  >
+                    Update Resume with Improved Version
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setImprovedText(null)}
+                    className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
+                  >
+                    Dismiss
+                  </button>
+                </div>
               </div>
             ) : null}
 
@@ -475,10 +753,10 @@ function ResumeReviewContent() {
                 </label>
                 <textarea
                   rows={5}
-                  readOnly
-                  value={summaryValue}
+                  value={summaryDisplay}
+                  onChange={(e) => setSummaryOverride(e.target.value)}
                   placeholder="No summary extracted yet."
-                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white"
                 />
               </div>
 
@@ -488,10 +766,10 @@ function ResumeReviewContent() {
                 </label>
                 <textarea
                   rows={8}
-                  readOnly
-                  value={experienceValue}
+                  value={experienceDisplay}
+                  onChange={(e) => setExperienceOverride(e.target.value)}
                   placeholder="No experience extracted yet."
-                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none whitespace-pre-wrap"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white whitespace-pre-wrap"
                 />
               </div>
 
@@ -501,10 +779,10 @@ function ResumeReviewContent() {
                 </label>
                 <textarea
                   rows={4}
-                  readOnly
-                  value={skillsValue}
+                  value={skillsDisplay}
+                  onChange={(e) => setSkillsOverride(e.target.value)}
                   placeholder="No skills extracted yet."
-                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white"
                 />
               </div>
 
@@ -514,10 +792,10 @@ function ResumeReviewContent() {
                 </label>
                 <textarea
                   rows={3}
-                  readOnly
-                  value={educationValue}
+                  value={educationDisplay}
+                  onChange={(e) => setEducationOverride(e.target.value)}
                   placeholder="No education extracted yet."
-                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none whitespace-pre-wrap"
+                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white whitespace-pre-wrap"
                 />
               </div>
             </div>
@@ -526,10 +804,11 @@ function ResumeReviewContent() {
               <div className="flex flex-wrap gap-3">
                 <button
                   type="button"
-                  disabled
-                  className="cursor-not-allowed rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-400"
+                  onClick={handleDownloadPdf}
+                  disabled={downloadingPdf}
+                  className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-navy-200 hover:text-navy-950 disabled:cursor-not-allowed disabled:opacity-50"
                 >
-                  {t("resume_review_download_pdf")}
+                  {downloadingPdf ? "Generating PDF…" : t("resume_review_download_pdf")}
                 </button>
                 <button
                   type="button"
diff --git a/app/resume/voice/page.tsx b/app/resume/voice/page.tsx
index fcf14fd..5809eb9 100644
--- a/app/resume/voice/page.tsx
+++ b/app/resume/voice/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { useLanguage } from "@/components/providers/language-provider";
@@ -41,10 +42,6 @@ const browserLangMap: Record<SupportedLocale, string> = {
   ta: "ta-IN",
 };
 
-function ChevronDownFallback() {
-  return null;
-}
-
 function getBestVoice(locale: SupportedLocale) {
   if (typeof window === "undefined" || !("speechSynthesis" in window)) return null;
 
@@ -76,6 +73,7 @@ function getBestVoice(locale: SupportedLocale) {
 
 export default function VoiceResumePage() {
   const { t, locale } = useLanguage();
+  const router = useRouter();
   const safeLocale: SupportedLocale =
     locale === "en" || locale === "zh" || locale === "ms" || locale === "ta" ? locale : "en";
 
@@ -85,8 +83,14 @@ export default function VoiceResumePage() {
   const [isListening, setIsListening] = useState(false);
   const [speechSupported, setSpeechSupported] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [finished, setFinished] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [generateError, setGenerateError] = useState<string | null>(null);
 
   const recognitionRef = useRef<SpeechRecognitionType | null>(null);
+  const isRecordingRef = useRef(false);
+  const accumulatedTextRef = useRef("");
+  const currentTranscriptRef = useRef("");
 
   const questions = useMemo<VoiceQuestion[]>(
     () => [
@@ -106,6 +110,22 @@ export default function VoiceResumePage() {
           ta: "உங்கள் முழுப் பெயரைச் சொல்லுங்கள்",
         },
       },
+      {
+        id: "age",
+        section: "basics",
+        prompt: {
+          en: "How old are you?",
+          zh: "你几岁了？",
+          ms: "Berapa umur anda?",
+          ta: "உங்கள் வயது என்ன?",
+        },
+        placeholder: {
+          en: "Say your age",
+          zh: "请说出你的年龄",
+          ms: "Sebut umur anda",
+          ta: "உங்கள் வயதைச் சொல்லுங்கள்",
+        },
+      },
       {
         id: "job_title",
         section: "basics",
@@ -235,31 +255,68 @@ export default function VoiceResumePage() {
       return;
     }
 
+    // Stop any active recording when locale changes
+    isRecordingRef.current = false;
+    setIsListening(false);
+
     const recognition = new SpeechRecognition();
-    recognition.continuous = false;
+    recognition.continuous = true;
     recognition.interimResults = true;
     recognition.lang = browserLangMap[safeLocale];
 
     recognition.onresult = (event) => {
-      let transcript = "";
+      let finalText = "";
+      let interimText = "";
+
+      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        if (event.results[i].isFinal) {
+          finalText += event.results[i][0].transcript;
+        } else {
+          interimText += event.results[i][0].transcript;
+        }
+      }
 
-      for (let i = 0; i < event.results.length; i += 1) {
-        transcript += event.results[i][0].transcript;
+      if (finalText) {
+        accumulatedTextRef.current = (accumulatedTextRef.current + " " + finalText).trim();
       }
+      currentTranscriptRef.current = interimText;
 
-      setDraft(transcript.trim());
+      const combined = [accumulatedTextRef.current, currentTranscriptRef.current]
+        .filter(Boolean)
+        .join(" ")
+        .trim();
+      setDraft(combined);
     };
 
     recognition.onend = () => {
-      setIsListening(false);
+      if (isRecordingRef.current) {
+        try {
+          recognition.start();
+        } catch {
+          // recognition may already be starting; ignore
+        }
+      } else {
+        setIsListening(false);
+      }
     };
 
-    recognition.onerror = () => {
+    recognition.onerror = (event: any) => {
+      if (event.error === "no-speech" || event.error === "aborted") return;
+      isRecordingRef.current = false;
       setIsListening(false);
       setError(t("voice_input_error"));
     };
 
     recognitionRef.current = recognition;
+
+    return () => {
+      isRecordingRef.current = false;
+      try {
+        recognition.stop();
+      } catch {
+        // ignore
+      }
+    };
   }, [safeLocale, t]);
 
   useEffect(() => {
@@ -290,20 +347,26 @@ export default function VoiceResumePage() {
   function startListening() {
     if (!recognitionRef.current) return;
     setError(null);
-    setDraft("");
+    // Preserve any existing manually typed text
+    accumulatedTextRef.current = draft;
+    currentTranscriptRef.current = "";
     recognitionRef.current.lang = browserLangMap[safeLocale];
+    isRecordingRef.current = true;
     recognitionRef.current.start();
     setIsListening(true);
   }
 
   function stopListening() {
+    isRecordingRef.current = false;
     recognitionRef.current?.stop();
-    setIsListening(false);
+    // isListening set to false via onend → setIsListening(false)
   }
 
   function saveAndNext() {
     if (!currentQuestion || !draft.trim()) return;
 
+    if (isListening) stopListening();
+
     const nextAnswers = {
       ...answers,
       [currentQuestion.id]: draft.trim(),
@@ -311,10 +374,13 @@ export default function VoiceResumePage() {
 
     setAnswers(nextAnswers);
     setDraft("");
+    accumulatedTextRef.current = "";
+    currentTranscriptRef.current = "";
 
     if (isLastQuestion) {
       sessionStorage.setItem("vericlause.voiceResumeAnswers", JSON.stringify(nextAnswers));
       sessionStorage.setItem("vericlause.resumeSource", "voice");
+      setFinished(true);
       return;
     }
 
@@ -323,6 +389,10 @@ export default function VoiceResumePage() {
 
   function goBack() {
     if (currentIndex === 0) return;
+    if (isListening) stopListening();
+    accumulatedTextRef.current = "";
+    currentTranscriptRef.current = "";
+    setDraft("");
     setCurrentIndex((prev) => prev - 1);
   }
 
@@ -334,8 +404,36 @@ export default function VoiceResumePage() {
     }));
   }
 
+  async function handleGenerate() {
+    setGenerating(true);
+    setGenerateError(null);
+    try {
+      const storedAnswers = JSON.parse(
+        sessionStorage.getItem("vericlause.voiceResumeAnswers") || "{}",
+      );
+      const res = await fetch("/api/resume/voice-build", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(storedAnswers),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.detail || "Generation failed");
+      if (data.resume_id) {
+        sessionStorage.setItem("vericlause.lastResumeId", data.resume_id);
+        router.push(`/resume/review?resume_id=${data.resume_id}`);
+      } else {
+        sessionStorage.setItem("vericlause.voiceResumeResult", JSON.stringify(data));
+        router.push("/resume/review");
+      }
+    } catch (e) {
+      setGenerateError(e instanceof Error ? e.message : "Generation failed");
+      setGenerating(false);
+    }
+  }
+
   const compiledPreview = [
     answers.full_name ? `Name: ${answers.full_name}` : "",
+    answers.age ? `Age: ${answers.age}` : "",
     answers.job_title ? `Target Role: ${answers.job_title}` : "",
     answers.summary ? `Summary: ${answers.summary}` : "",
     answers.experience ? `Experience: ${answers.experience}` : "",
@@ -349,6 +447,65 @@ export default function VoiceResumePage() {
   const completedCount = Math.min(Object.keys(answers).length + (draft.trim() ? 1 : 0), questions.length);
   const progressPercent = Math.round((completedCount / questions.length) * 100);
 
+  if (finished) {
+    return (
+      <main className="min-h-screen bg-[#f8f8f6]">
+        <SiteNavbar
+          rightSlot={
+            <Link
+              href="/resume"
+              className="rounded-md bg-navy-950 px-4 py-2 text-sm font-medium text-white transition hover:opacity-90"
+            >
+              {t("nav_dashboard")}
+            </Link>
+          }
+        />
+
+        <section className="mx-auto max-w-2xl px-4 py-20 text-center sm:px-6">
+          <div className="mb-8">
+            <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-100 text-3xl text-emerald-700">
+              ✓
+            </div>
+            <h1 className="font-serif text-3xl font-semibold text-navy-950">
+              All answers recorded!
+            </h1>
+            <p className="mt-4 text-base leading-7 text-slate-600">
+              Click below to generate your professional resume with AI.
+            </p>
+          </div>
+
+          {generateError && (
+            <div className="mb-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+              {generateError}
+            </div>
+          )}
+
+          <button
+            type="button"
+            onClick={handleGenerate}
+            disabled={generating}
+            className="rounded-xl bg-navy-950 px-8 py-4 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {generating ? "Generating your resume…" : "Generate My Resume"}
+          </button>
+
+          <div className="mt-6">
+            <button
+              type="button"
+              onClick={() => {
+                setFinished(false);
+                setCurrentIndex(questions.length - 1);
+              }}
+              className="text-sm font-medium text-slate-600 underline"
+            >
+              Go back and review answers
+            </button>
+          </div>
+        </section>
+      </main>
+    );
+  }
+
   return (
     <main className="min-h-screen bg-[#f8f8f6]">
       <SiteNavbar
@@ -422,7 +579,10 @@ export default function VoiceResumePage() {
 
               <textarea
                 value={draft}
-                onChange={(e) => setDraft(e.target.value)}
+                onChange={(e) => {
+                  setDraft(e.target.value);
+                  accumulatedTextRef.current = e.target.value;
+                }}
                 placeholder={currentQuestion.placeholder[safeLocale]}
                 className="min-h-[180px] w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-navy-950"
               />
@@ -500,4 +660,4 @@ export default function VoiceResumePage() {
       </section>
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/lib/services/jobRecommendation.ts b/lib/services/jobRecommendation.ts
new file mode 100644
index 0000000..cf21535
--- /dev/null
+++ b/lib/services/jobRecommendation.ts
@@ -0,0 +1,347 @@
+import OpenAI from "openai";
+import type { ResumeProfile } from "@/lib/types";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface MCFJob {
+  uuid: string;
+  title: string;
+  postedCompany: { name: string } | null;
+  company?: { name: string } | null;
+  salary: { minimum: number | null; maximum: number | null };
+  employmentTypes: { employmentType: string }[];
+  categories: { category: string }[];
+  skills: { skill: string }[];
+  positionLevels: { position: string }[];
+  metadata: { jobPostId: string; jobDetailsUrl?: string; originalPostUrl?: string };
+  description?: string;
+}
+
+export interface JobRecommendation {
+  id: string;
+  title: string;
+  company: string;
+  matchScore: number;
+  salaryMin: number | null;
+  salaryMax: number | null;
+  employmentType: string | null;
+  skills: string[];
+  applyUrl: string;
+  strengths: string[];
+  improvements: string[];
+  reasoning: string;
+  source: "MyCareersFuture";
+}
+
+export interface ScrapedJob {
+  title: string | null;
+  company: string | null;
+  description: string | null;
+  salary: string | null;
+  location: string | null;
+  employmentType: string | null;
+  skills: string[];
+  applyUrl: string;
+  source: string;
+}
+
+// ---------------------------------------------------------------------------
+// MyCareersFuture API
+// ---------------------------------------------------------------------------
+
+const MCF_API_BASE = "https://api.mycareersfuture.gov.sg/v2";
+
+function buildMCFSearchQuery(profile: ResumeProfile): string {
+  if (profile.target_roles?.length) {
+    return profile.target_roles[0];
+  }
+  if (profile.experiences?.length) {
+    return profile.experiences[0].title ?? "";
+  }
+  return "";
+}
+
+export async function fetchMCFJobs(profile: ResumeProfile, limit = 10): Promise<MCFJob[]> {
+  const query = buildMCFSearchQuery(profile);
+  if (!query) return [];
+
+  const params = new URLSearchParams({
+    search: query,
+    limit: String(limit),
+    page: "0",
+  });
+
+  const res = await fetch(`${MCF_API_BASE}/jobs?${params.toString()}`, {
+    headers: {
+      Accept: "application/json",
+      "User-Agent": "VeriClause/1.0",
+    },
+    next: { revalidate: 300 },
+  });
+
+  if (!res.ok) {
+    throw new Error(`MCF API error: ${res.status} ${res.statusText}`);
+  }
+
+  const data = await res.json();
+  return (data.results ?? []) as MCFJob[];
+}
+
+// ---------------------------------------------------------------------------
+// OpenAI matching
+// ---------------------------------------------------------------------------
+
+function getOpenAIClient(): OpenAI {
+  const apiKey = process.env.OPENAI_API_KEY;
+  if (!apiKey) throw new Error("OPENAI_API_KEY not set");
+  return new OpenAI({ apiKey });
+}
+
+const MATCH_SYSTEM_PROMPT = `You are an expert Singapore career advisor. Given a candidate's resume profile and a list of job postings, score and rank each job by fit.
+
+For each job return:
+- matchScore: 0-100 integer
+- strengths: 2-3 bullet points on why the candidate is a good fit
+- improvements: 2-3 bullet points on gaps to address
+- reasoning: 1-2 sentence overall reasoning
+
+Return ONLY a JSON object in this exact shape, no extra text:
+{
+  "matches": [
+    {
+      "id": "<job uuid>",
+      "matchScore": 85,
+      "strengths": ["...", "..."],
+      "improvements": ["...", "..."],
+      "reasoning": "..."
+    }
+  ]
+}
+
+Consider: skills overlap, seniority level, industry match, years of experience, target roles.
+Singapore job market context applies.`;
+
+interface MatchResult {
+  id: string;
+  matchScore: number;
+  strengths: string[];
+  improvements: string[];
+  reasoning: string;
+}
+
+export async function scoreJobsWithAI(
+  profile: ResumeProfile,
+  jobs: MCFJob[],
+): Promise<MatchResult[]> {
+  if (!jobs.length) return [];
+
+  const client = getOpenAIClient();
+
+  const profileSummary = {
+    headline: profile.headline,
+    skills: profile.skills.slice(0, 20),
+    years_experience: profile.years_experience,
+    seniority_level: profile.seniority_level,
+    target_roles: profile.target_roles,
+    target_industries: profile.target_industries,
+    recent_titles: profile.experiences.slice(0, 3).map((e) => e.title),
+  };
+
+  const jobSummaries = jobs.map((j) => ({
+    id: j.uuid,
+    title: j.title,
+    company: j.postedCompany?.name ?? j.company?.name ?? "Unknown",
+    skills: j.skills?.map((s) => s.skill).slice(0, 10),
+    categories: j.categories?.map((c) => c.category),
+    positionLevel: j.positionLevels?.[0]?.position ?? null,
+  }));
+
+  const userContent = `Candidate Profile:\n${JSON.stringify(profileSummary, null, 2)}\n\nJobs:\n${JSON.stringify(jobSummaries, null, 2)}`;
+
+  const response = await client.chat.completions.create({
+    model: "gpt-4o-mini",
+    temperature: 0.2,
+    response_format: { type: "json_object" },
+    messages: [
+      { role: "system", content: MATCH_SYSTEM_PROMPT },
+      { role: "user", content: userContent },
+    ],
+  });
+
+  const raw = response.choices[0]?.message?.content ?? "{}";
+  try {
+    const parsed = JSON.parse(raw);
+    const results: MatchResult[] = parsed.matches ?? parsed.results ?? parsed.jobs ?? [];
+    return results;
+  } catch {
+    return [];
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Merge MCF jobs + AI scores into final recommendations
+// ---------------------------------------------------------------------------
+
+export async function getJobRecommendations(
+  profile: ResumeProfile,
+): Promise<JobRecommendation[]> {
+  const jobs = await fetchMCFJobs(profile, 10);
+  if (!jobs.length) return [];
+
+  const scores = await scoreJobsWithAI(profile, jobs);
+  const scoreMap = new Map(scores.map((s) => [s.id, s]));
+
+  const recommendations: JobRecommendation[] = jobs.map((job) => {
+    const score = scoreMap.get(job.uuid);
+
+    return {
+      id: job.uuid,
+      title: job.title,
+      company: job.postedCompany?.name ?? job.company?.name ?? "Unknown",
+      matchScore: score?.matchScore ?? 50,
+      salaryMin: job.salary?.minimum ?? null,
+      salaryMax: job.salary?.maximum ?? null,
+      employmentType: job.employmentTypes?.[0]?.employmentType ?? null,
+      skills: job.skills?.map((s) => s.skill).slice(0, 8) ?? [],
+      applyUrl: job.metadata?.jobDetailsUrl ?? `https://www.mycareersfuture.gov.sg/job/${job.metadata?.jobPostId ?? job.uuid}`,
+      strengths: score?.strengths ?? [],
+      improvements: score?.improvements ?? [],
+      reasoning: score?.reasoning ?? "This role matches your profile.",
+      source: "MyCareersFuture",
+    };
+  });
+
+  return recommendations.sort((a, b) => b.matchScore - a.matchScore);
+}
+
+// ---------------------------------------------------------------------------
+// Job URL scraper (any job board)
+// ---------------------------------------------------------------------------
+
+const SCRAPE_SYSTEM_PROMPT = `You are a job posting parser. Extract structured information from the raw HTML/text of a job posting page.
+
+Return ONLY a JSON object in this exact shape, no extra text:
+{
+  "title": string | null,
+  "company": string | null,
+  "description": string | null,
+  "salary": string | null,
+  "location": string | null,
+  "employmentType": string | null,
+  "skills": string[]
+}
+
+If a field is not found, use null. For skills, extract up to 15 key skills/requirements mentioned.`;
+
+export async function extractJobFromUrl(url: string): Promise<ScrapedJob> {
+  // Detect source from URL
+  let source = "Unknown";
+  if (url.includes("linkedin.com")) source = "LinkedIn";
+  else if (url.includes("mycareersfuture.gov.sg")) source = "MyCareersFuture";
+  else if (url.includes("jobstreet.com")) source = "JobStreet";
+  else if (url.includes("indeed.com")) source = "Indeed";
+  else if (url.includes("glassdoor.com")) source = "Glassdoor";
+
+  // For MCF URLs, use the API directly instead of scraping
+  if (source === "MyCareersFuture") {
+    const jobMatch = url.match(/JOB-[\w-]+/i);
+    const uuidMatch = url.match(/([a-f0-9]{32})$/i);
+    const jobPostId = jobMatch?.[0] ?? null;
+    const uuid = uuidMatch?.[1] ?? null;
+
+    if (jobPostId || uuid) {
+      // Use direct job endpoint for UUID, query param for jobPostId
+      const endpoint = jobPostId
+        ? `${MCF_API_BASE}/jobs?jobPostId=${jobPostId}`
+        : `${MCF_API_BASE}/jobs/${uuid}`;
+
+      const res = await fetch(endpoint, {
+        headers: {
+          Accept: "application/json",
+          "User-Agent": "VeriClause/1.0",
+        },
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        // jobPostId returns results array, UUID returns direct object
+        const job: MCFJob = jobPostId ? data.results?.[0] : data;
+        if (job && job.title) {
+          return {
+            title: job.title ?? null,
+            company: job.postedCompany?.name ?? job.company?.name ?? null,
+            description: job.description ?? null,
+            salary: job.salary?.minimum
+              ? `$${job.salary.minimum.toLocaleString()} - $${job.salary.maximum?.toLocaleString() ?? "?"} / month`
+              : null,
+            location: "Singapore",
+            employmentType: job.employmentTypes?.[0]?.employmentType ?? null,
+            skills: job.skills?.map((s) => s.skill) ?? [],
+            applyUrl: url,
+            source: "MyCareersFuture",
+          };
+        }
+      }
+    }
+  }
+
+  // Fallback: scrape HTML for other job boards
+  const res = await fetch(url, {
+    headers: {
+      "User-Agent":
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+      Accept: "text/html,application/xhtml+xml",
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error(`Failed to fetch URL: ${res.status} ${res.statusText}`);
+  }
+
+  const html = await res.text();
+
+  const text = html
+    .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
+    .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "")
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .slice(0, 12000);
+
+  const client = getOpenAIClient();
+
+  const response = await client.chat.completions.create({
+    model: "gpt-4o-mini",
+    temperature: 0,
+    response_format: { type: "json_object" },
+    messages: [
+      { role: "system", content: SCRAPE_SYSTEM_PROMPT },
+      { role: "user", content: `Job posting page content:\n\n${text}` },
+    ],
+  });
+
+  const raw = response.choices[0]?.message?.content ?? "{}";
+  let parsed: Omit<ScrapedJob, "applyUrl" | "source">;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    parsed = {
+      title: null,
+      company: null,
+      description: null,
+      salary: null,
+      location: null,
+      employmentType: null,
+      skills: [],
+    };
+  }
+
+  return {
+    ...parsed,
+    skills: parsed.skills ?? [],
+    applyUrl: url,
+    source,
+  };
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6c28944..10fcbec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,12 @@
         "@llamaindex/llama-cloud": "^1.8.0",
         "@llamaindex/pdf-viewer": "^1.3.0",
         "@pinecone-database/pinecone": "^7.1.0",
+        "@react-pdf/renderer": "^4.3.2",
         "@supabase/ssr": "^0.9.0",
         "@supabase/supabase-js": "^2.98.0",
+        "docx": "^9.6.1",
         "dotenv": "^17.3.1",
+        "file-saver": "^2.0.5",
         "groq-sdk": "^0.37.0",
         "lucide-react": "^0.577.0",
         "microsoft-cognitiveservices-speech-sdk": "^1.48.0",
@@ -24,6 +27,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-pdf": "^9.2.1",
+        "unpdf": "^1.4.0",
         "uuid": "^13.0.0"
       },
       "devDependencies": {
@@ -1230,6 +1234,180 @@
         "node": ">=14"
       }
     },
+    "node_modules/@react-pdf/fns": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/fns/-/fns-3.1.2.tgz",
+      "integrity": "sha512-qTKGUf0iAMGg2+OsUcp9ffKnKi41RukM/zYIWMDJ4hRVYSr89Q7e3wSDW/Koqx3ea3Uy/z3h2y3wPX6Bdfxk6g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/font": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-4.0.4.tgz",
+      "integrity": "sha512-8YtgGtL511txIEc9AjiilpZ7yjid8uCd8OGUl6jaL3LIHnrToUupSN4IzsMQpVTCMYiDLFnDNQzpZsOYtRS/Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/pdfkit": "^4.1.0",
+        "@react-pdf/types": "^2.9.2",
+        "fontkit": "^2.0.2",
+        "is-url": "^1.2.4"
+      }
+    },
+    "node_modules/@react-pdf/image": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-3.0.4.tgz",
+      "integrity": "sha512-z0ogVQE0bKqgXQ5smgzIU857rLV7bMgVdrYsu3UfXDDLSzI7QPvzf6MFTFllX6Dx2rcsF13E01dqKPtJEM799g==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/png-js": "^3.0.0",
+        "jay-peg": "^1.1.1"
+      }
+    },
+    "node_modules/@react-pdf/layout": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-4.4.2.tgz",
+      "integrity": "sha512-gNu2oh8MiGR+NJZYTJ4c4q0nWCESBI6rKFiodVhE7OeVAjtzZzd6l65wsN7HXdWJqOZD3ttD97iE+tf5SOd/Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/image": "^3.0.4",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/stylesheet": "^6.1.2",
+        "@react-pdf/textkit": "^6.1.0",
+        "@react-pdf/types": "^2.9.2",
+        "emoji-regex-xs": "^1.0.0",
+        "queue": "^6.0.1",
+        "yoga-layout": "^3.2.1"
+      }
+    },
+    "node_modules/@react-pdf/pdfkit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-4.1.0.tgz",
+      "integrity": "sha512-Wm/IOAv0h/U5Ra94c/PltFJGcpTUd/fwVMVeFD6X9tTTPCttIwg0teRG1Lqq617J8K4W7jpL/B0HTH0mjp3QpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/png-js": "^3.0.0",
+        "browserify-zlib": "^0.2.0",
+        "crypto-js": "^4.2.0",
+        "fontkit": "^2.0.2",
+        "jay-peg": "^1.1.1",
+        "linebreak": "^1.1.0",
+        "vite-compatible-readable-stream": "^3.6.1"
+      }
+    },
+    "node_modules/@react-pdf/png-js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/png-js/-/png-js-3.0.0.tgz",
+      "integrity": "sha512-eSJnEItZ37WPt6Qv5pncQDxLJRK15eaRwPT+gZoujP548CodenOVp49GST8XJvKMFt9YqIBzGBV/j9AgrOQzVA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserify-zlib": "^0.2.0"
+      }
+    },
+    "node_modules/@react-pdf/primitives": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-4.1.1.tgz",
+      "integrity": "sha512-IuhxYls1luJb7NUWy6q5avb1XrNaVj9bTNI40U9qGRuS6n7Hje/8H8Qi99Z9UKFV74bBP3DOf3L1wV2qZVgVrQ==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/reconciler": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/reconciler/-/reconciler-2.0.0.tgz",
+      "integrity": "sha512-7zaPRujpbHSmCpIrZ+b9HSTJHthcVZzX0Wx7RzvQGsGBUbHP4p6s5itXrAIOuQuPvDepoHGNOvf6xUuMVvdoyw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "scheduler": "0.25.0-rc-603e6108-20241029"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/reconciler/node_modules/scheduler": {
+      "version": "0.25.0-rc-603e6108-20241029",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc-603e6108-20241029.tgz",
+      "integrity": "sha512-pFwF6H1XrSdYYNLfOcGlM28/j8CGLu8IvdrxqhjWULe2bPcKiKW4CV+OWqR/9fT52mywx65l7ysNkjLKBda7eA==",
+      "license": "MIT"
+    },
+    "node_modules/@react-pdf/render": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-4.3.2.tgz",
+      "integrity": "sha512-el5KYM1sH/PKcO4tRCIm8/AIEmhtraaONbwCrBhFdehoGv6JtgnXiMxHGAvZbI5kEg051GbyP+XIU6f6YbOu6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/textkit": "^6.1.0",
+        "@react-pdf/types": "^2.9.2",
+        "abs-svg-path": "^0.1.1",
+        "color-string": "^1.9.1",
+        "normalize-svg-path": "^1.1.0",
+        "parse-svg-path": "^0.1.2",
+        "svg-arc-to-cubic-bezier": "^3.2.0"
+      }
+    },
+    "node_modules/@react-pdf/renderer": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-4.3.2.tgz",
+      "integrity": "sha512-EhPkj35gO9rXIyyx29W3j3axemvVY5RigMmlK4/6Ku0pXB8z9PEE/sz4ZBOShu2uot6V4xiCR3aG+t9IjJJlBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/font": "^4.0.4",
+        "@react-pdf/layout": "^4.4.2",
+        "@react-pdf/pdfkit": "^4.1.0",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/reconciler": "^2.0.0",
+        "@react-pdf/render": "^4.3.2",
+        "@react-pdf/types": "^2.9.2",
+        "events": "^3.3.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "queue": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-pdf/stylesheet": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-6.1.2.tgz",
+      "integrity": "sha512-E3ftGRYUQGKiN3JOgtGsLDo0hGekA6dmkmi/MYACytmPTKxQRBSO3126MebmCq+t1rgU9uRlREIEawJ+8nzSbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "@react-pdf/types": "^2.9.2",
+        "color-string": "^1.9.1",
+        "hsl-to-hex": "^1.0.0",
+        "media-engine": "^1.0.3",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "node_modules/@react-pdf/textkit": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/textkit/-/textkit-6.1.0.tgz",
+      "integrity": "sha512-sFlzDC9CDFrJsnL3B/+NHrk9+Advqk7iJZIStiYQDdskbow8GF/AGYrpIk+vWSnh35YxaGbHkqXq53XOxnyrjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/fns": "3.1.2",
+        "bidi-js": "^1.0.2",
+        "hyphen": "^1.6.4",
+        "unicode-properties": "^1.4.1"
+      }
+    },
+    "node_modules/@react-pdf/types": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.9.2.tgz",
+      "integrity": "sha512-dufvpKId9OajLLbgn9q7VLUmyo1Jf+iyGk2ZHmCL8nIDtL8N1Ejh9TH7+pXXrR0tdie1nmnEb5Bz9U7g4hI4/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-pdf/font": "^4.0.4",
+        "@react-pdf/primitives": "^4.1.1",
+        "@react-pdf/stylesheet": "^6.1.2"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -2064,6 +2242,12 @@
         "node": ">=6.5"
       }
     },
+    "node_modules/abs-svg-path": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
+      "integrity": "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -2443,8 +2627,7 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/bent": {
       "version": "7.3.12",
@@ -2457,6 +2640,15 @@
         "is-stream": "^2.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -2506,6 +2698,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
+    "node_modules/browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "~1.0.5"
+      }
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -2726,6 +2936,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2752,9 +2971,18 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2797,6 +3025,12 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2812,6 +3046,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3006,6 +3246,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3033,6 +3279,56 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/docx": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/docx/-/docx-9.6.1.tgz",
+      "integrity": "sha512-ZJja9/KBUuFC109sCMzovoq2GR2wCG/AuxivjA+OHj/q0TEgJIm3S7yrlUxIy3B+bV8YDj/BiHfWyrRFmyWpDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^25.2.3",
+        "hash.js": "^1.1.7",
+        "jszip": "^3.10.1",
+        "nanoid": "^5.1.3",
+        "xml": "^1.0.1",
+        "xml-js": "^1.6.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/docx/node_modules/@types/node": {
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.5.0.tgz",
+      "integrity": "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/docx/node_modules/nanoid": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.7.tgz",
+      "integrity": "sha512-ua3NDgISf6jdwezAheMOk4mbE1LXjm1DfMUDMuJf4AqxLFK3ccGpgWizwa5YV7Yz9EpXwEaWoRXSb/BnV0t5dQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
+    "node_modules/docx/node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "license": "MIT"
+    },
     "node_modules/dotenv": {
       "version": "17.3.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
@@ -3073,6 +3369,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
+      "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
+      "license": "MIT"
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -3774,6 +4076,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/expand-template": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
@@ -3788,7 +4099,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -3858,6 +4168,12 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -3910,6 +4226,32 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/fontkit/node_modules/@swc/helpers": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.20.tgz",
+      "integrity": "sha512-2egEBHUMasdypIzrprsu8g+OEVd7Vp2MM3a2eVlM/cyFYto0nGz5BX5BTgh/ShZZI9ed+ozEq+Ngt+rgmUs8tw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -4371,6 +4713,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -4383,6 +4735,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hsl-to-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz",
+      "integrity": "sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==",
+      "license": "MIT",
+      "dependencies": {
+        "hsl-to-rgb-for-reals": "^1.1.0"
+      }
+    },
+    "node_modules/hsl-to-rgb-for-reals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz",
+      "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==",
+      "license": "ISC"
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -4436,6 +4803,12 @@
         "ms": "^2.0.0"
       }
     },
+    "node_modules/hyphen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.14.1.tgz",
+      "integrity": "sha512-kvL8xYl5QMTh+LwohVN72ciOxC0OEV79IPdJSTwEXok9y9QHebXGdFgrED4sWfiax/ODx++CAMk3hMy4XPJPOw==",
+      "license": "ISC"
+    },
     "node_modules/iceberg-js": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
@@ -4476,6 +4849,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -4519,7 +4898,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/ini": {
@@ -4562,6 +4940,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
+      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
+      "license": "MIT"
+    },
     "node_modules/is-async-function": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
@@ -4945,6 +5329,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
+      "license": "MIT"
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -5042,6 +5432,15 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jay-peg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jay-peg/-/jay-peg-1.1.1.tgz",
+      "integrity": "sha512-D62KEuBxz/ip2gQKOEhk/mx14o7eiFRaU+VNNSP4MOiIkwb/D6B3G1Mfas7C/Fit8EsSV2/IWjZElx/Gs6A4ww==",
+      "license": "MIT",
+      "dependencies": {
+        "restructure": "^3.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
@@ -5121,6 +5520,54 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -5165,6 +5612,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -5178,6 +5634,25 @@
         "url": "https://github.com/sponsors/antonk52"
       }
     },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -5275,6 +5750,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/media-engine": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz",
+      "integrity": "sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==",
+      "license": "MIT"
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -5384,6 +5865,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "license": "ISC"
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -5668,11 +6155,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-svg-path": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz",
+      "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==",
+      "license": "MIT",
+      "dependencies": {
+        "svg-arc-to-cubic-bezier": "^3.0.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5900,6 +6395,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5913,6 +6414,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-svg-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
+      "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -6218,7 +6725,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/prebuild-install": {
@@ -6259,11 +6765,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -6292,6 +6803,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6377,7 +6897,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-pdf": {
@@ -6521,6 +7040,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -6562,6 +7090,12 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -6674,8 +7208,7 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
@@ -6712,6 +7245,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sax": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
+      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -6783,6 +7325,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6942,6 +7490,15 @@
         "simple-concat": "^1.0.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
+      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -6985,7 +7542,6 @@
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "safe-buffer": "~5.2.0"
       }
@@ -7295,6 +7851,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-arc-to-cubic-bezier": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
+      "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==",
+      "license": "ISC"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
@@ -7393,6 +7955,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -7681,6 +8249,46 @@
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
       "license": "MIT"
     },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/unicode-trie/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
+    "node_modules/unpdf": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/unpdf/-/unpdf-1.4.0.tgz",
+      "integrity": "sha512-TahIk0xdH/4jh/MxfclzU79g40OyxtP00VnEUZdEkJoYtXAHWLiir6t3FC6z3vDqQTzc2ZHcla6uEiVTNjejuA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@napi-rs/canvas": "^0.1.69"
+      },
+      "peerDependenciesMeta": {
+        "@napi-rs/canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
@@ -7730,7 +8338,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/uuid": {
@@ -7746,6 +8353,20 @@
         "uuid": "dist-node/bin/uuid"
       }
     },
+    "node_modules/vite-compatible-readable-stream": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/vite-compatible-readable-stream/-/vite-compatible-readable-stream-3.6.1.tgz",
+      "integrity": "sha512-t20zYkrSf868+j/p31cRIGN28Phrjm3nRSLR2fyc2tiWi4cZGVdv68yNlwnIINTkMTmPoMiSlc0OadaO7DXZaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@@ -8024,6 +8645,24 @@
         }
       }
     },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
+      "license": "MIT"
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -8036,6 +8675,12 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yoga-layout": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
+      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
+      "license": "MIT"
     }
   }
 }
diff --git a/package.json b/package.json
index aa2196e..4cad962 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,12 @@
     "@llamaindex/llama-cloud": "^1.8.0",
     "@llamaindex/pdf-viewer": "^1.3.0",
     "@pinecone-database/pinecone": "^7.1.0",
+    "@react-pdf/renderer": "^4.3.2",
     "@supabase/ssr": "^0.9.0",
     "@supabase/supabase-js": "^2.98.0",
+    "docx": "^9.6.1",
     "dotenv": "^17.3.1",
+    "file-saver": "^2.0.5",
     "groq-sdk": "^0.37.0",
     "lucide-react": "^0.577.0",
     "microsoft-cognitiveservices-speech-sdk": "^1.48.0",
@@ -25,6 +28,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-pdf": "^9.2.1",
+    "unpdf": "^1.4.0",
     "uuid": "^13.0.0"
   },
   "devDependencies": {

From b3a5b3f0bac3933b5623e0966d11393cc1cbf74d Mon Sep 17 00:00:00 2001
From: zackKonfs <zack.konfs@gmail.com>
Date: Sun, 29 Mar 2026 03:18:24 +0800
Subject: [PATCH 06/13] feat: resume review redesign, template picker, photo
 export, score framework, upload UX

---
 .claude/settings.local.json                 |   8 +
 CLAUDE.md                                   | 102 +++
 app/api/places/route.ts                     |  44 ++
 app/api/resume/route.ts                     |  91 +--
 app/resume/builder/page.tsx                 | 356 +++++++--
 app/resume/page.tsx                         | 207 ++++-
 app/resume/review/page.tsx                  | 816 ++++++++++----------
 components/resume/ResumeList.tsx            | 206 +++--
 components/resume/TemplatePickerModal.tsx   | 509 ++++++++++++
 lib/resume-templates/download.ts            |  91 +++
 lib/resume-templates/executive-docx.ts      | 235 ++++++
 lib/resume-templates/executive-pdf.tsx      | 167 ++++
 lib/resume-templates/modern-minimal-docx.ts | 237 ++++++
 lib/resume-templates/modern-minimal-pdf.tsx | 159 ++++
 lib/resume-templates/munich-docx.ts         | 210 +++++
 lib/resume-templates/munich-pdf.tsx         | 136 ++++
 lib/resume-templates/navy-executive-docx.ts | 254 ++++++
 lib/resume-templates/navy-executive-pdf.tsx | 199 +++++
 lib/resume-templates/recommend.ts           | 139 ++++
 lib/resume-templates/traditional-docx.ts    | 268 +++++++
 lib/resume-templates/traditional-pdf.tsx    | 186 +++++
 lib/resume-templates/types.ts               |  81 ++
 22 files changed, 4041 insertions(+), 660 deletions(-)
 create mode 100644 .claude/settings.local.json
 create mode 100644 CLAUDE.md
 create mode 100644 app/api/places/route.ts
 create mode 100644 components/resume/TemplatePickerModal.tsx
 create mode 100644 lib/resume-templates/download.ts
 create mode 100644 lib/resume-templates/executive-docx.ts
 create mode 100644 lib/resume-templates/executive-pdf.tsx
 create mode 100644 lib/resume-templates/modern-minimal-docx.ts
 create mode 100644 lib/resume-templates/modern-minimal-pdf.tsx
 create mode 100644 lib/resume-templates/munich-docx.ts
 create mode 100644 lib/resume-templates/munich-pdf.tsx
 create mode 100644 lib/resume-templates/navy-executive-docx.ts
 create mode 100644 lib/resume-templates/navy-executive-pdf.tsx
 create mode 100644 lib/resume-templates/recommend.ts
 create mode 100644 lib/resume-templates/traditional-docx.ts
 create mode 100644 lib/resume-templates/traditional-pdf.tsx
 create mode 100644 lib/resume-templates/types.ts

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..5e1da77
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx tsc:*)",
+      "Bash(find /c/Users/zackx/vericlause -maxdepth 3 -type f \\\\\\(-name .cursor* -o -name *rules* \\\\\\))"
+    ]
+  }
+}
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..891fdc5
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,102 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+VeriClause is a full-stack employment contract compliance analyzer for Singapore. It uses an agentic RAG system to evaluate contract clauses against Singapore employment law, with additional features for resume profiling, AI interview coaching, and job recommendations.
+
+## Commands
+
+```bash
+npm run dev     # Start Next.js dev server (port 3000)
+npm run build   # Production build
+npm run lint    # ESLint
+
+# Law ingestion pipeline (one-time setup or when laws change)
+python scripts/docling_parse_laws.py        # Parse law PDFs → data/laws-parsed/*.md
+npx tsx scripts/ingest-laws.ts              # Embed & upsert chunks to Pinecone
+
+# DB migrations: run supabase/migration.sql in Supabase SQL Editor
+```
+
+No test framework is configured.
+
+## Architecture
+
+**Stack**: Next.js 14 (App Router) + React 18 + TypeScript 5 + Supabase (PostgreSQL + Auth) + Tailwind CSS
+
+**LLM chain**: OpenAI gpt-4o-mini (primary) → Groq llama-3.1-8b-instant (fallback). Embeddings via OpenAI text-embedding-3-small stored in Pinecone. PDF parsing via LlamaCloud.
+
+### Async Job Pattern
+
+Both contract analysis and resume profiling use the same pattern:
+1. Create a job row in Supabase (`status: queued`)
+2. Start LLM work in background (not awaited)
+3. `Promise.race` against `ANALYZE_TIMEOUT_MS` / `RESUME_PROFILE_WAIT_MS`
+4. Fast path: completes within timeout → return result inline
+5. Slow path: timeout → return `{ status: "running", job_id }` → client polls `GET .../[job_id]`
+
+### RAG Compliance Analysis (`lib/services/rag.ts`)
+
+Uses OpenAI function-calling agent loop with two tools:
+- `search_law(query)` → Pinecone vector search → top-5 Singapore law excerpts
+- `submit_verdict(verdict, citation, explanation)` → records compliance result
+
+Clauses are analyzed 4 at a time via `Promise.allSettled`. Falls back to Groq one-shot if OpenAI fails.
+
+### Authentication
+
+Supabase Auth (JWT). `middleware.ts` refreshes tokens on every request via `updateSession`. Server-side Supabase client in `lib/supabase/server.ts`. API routes authenticate via `getAuthenticatedUser()`.
+
+### Database
+
+Supabase PostgreSQL with RLS (`auth.uid() = user_id` on every table). Schema in `supabase/migration.sql`. Key tables: `documents`, `reports`, `analysis_jobs`, `resumes`, `profiling_jobs`, `comparison_jobs`.
+
+### Key Services (`lib/services/`)
+
+- `extraction.ts` — LLM-based contract entity extraction from raw text
+- `rag.ts` — Agentic compliance analysis with Pinecone RAG
+- `resumeProfiling.ts` — Resume analysis with async job pattern
+- `pdf.ts` — PDF parsing via LlamaCloud
+- `redact.ts` — Regex PII redaction (NRIC, names, emails, phone) before DB storage
+- `db.ts` — Supabase query helpers for documents/reports
+
+### API Route Organization
+
+All under `app/api/`:
+- `contracts/` — upload, analyze (with `[job_id]` polling), translate, compare, benchmark
+- `resumes/` — CRUD, profile (with `[job_id]` polling), status
+- `azure/` — speech-token, avatar-relay
+- `jobs/` — recommend, scrape
+- `interview/` — coaching
+
+Legacy rewrites in `next.config.mjs`: `/api/upload` → `/api/contracts/upload`, `/api/analyze` → `/api/contracts/analyze`
+
+### State Management
+
+No external state library. Two React Context providers wired in `app/layout.tsx`:
+- **LanguageProvider** (`components/providers/language-provider.tsx`) — UI language (en, zh, ta, ms); translations in `lib/i18n/translations/`
+- **ResumeStatusProvider** (`components/providers/resume-status-provider.tsx`) — `useResumeStatus()` returns `{ has_resume, has_profile, resume_id }`, used for nav gates
+
+### Supabase Clients
+
+- `lib/supabase/client.ts` — Browser client (`createBrowserClient`)
+- `lib/supabase/server.ts` — Server client (`createServerClient`) for API routes
+- `lib/supabase/middleware.ts` — Session refresh logic used by root `middleware.ts`
+
+### Styling
+
+Tailwind CSS with custom navy + gold color palette and Inter (sans) + Merriweather (serif) fonts. Config in `tailwind.config.ts`.
+
+## Import Alias
+
+`@/*` maps to project root (configured in tsconfig.json).
+
+## Environment Variables
+
+Required in `.env.local`: `OPENAI_API_KEY`, `GROQ_API_KEY`, `LLAMA_CLOUD_API_KEY`, `PINECONE_API_KEY`, `PINECONE_INDEX`, `NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`, `AZURE_SPEECH_KEY`, `AZURE_SPEECH_REGION`, `AZURE_AVATAR_ENDPOINT`. Optional timeouts: `ANALYZE_TIMEOUT_MS` (default 25000), `RESUME_PROFILE_WAIT_MS`.
+
+## Key Types
+
+Core type definitions in `lib/types.ts`: `ExtractedContract`, `ComplianceVerdict`, `ResumeProfile`.
diff --git a/app/api/places/route.ts b/app/api/places/route.ts
new file mode 100644
index 0000000..6e977a5
--- /dev/null
+++ b/app/api/places/route.ts
@@ -0,0 +1,44 @@
+export const runtime = "nodejs";
+
+import { NextRequest, NextResponse } from "next/server";
+import { getAuthenticatedUser } from "@/lib/services/db";
+
+export async function GET(req: NextRequest) {
+  const user = await getAuthenticatedUser();
+  if (!user) return NextResponse.json({ place: null }, { status: 401 });
+
+  const query = req.nextUrl.searchParams.get("query");
+  if (!query?.trim()) return NextResponse.json({ place: null });
+
+  const apiKey = process.env.GOOGLE_MAPS_API_KEY;
+  if (!apiKey) return NextResponse.json({ place: null });
+
+  try {
+    const res = await fetch("https://places.googleapis.com/v1/places:searchText", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Goog-Api-Key": apiKey,
+        "X-Goog-FieldMask": "places.addressComponents",
+      },
+      body: JSON.stringify({ textQuery: query }),
+    });
+
+    if (!res.ok) return NextResponse.json({ place: null });
+
+    const data = (await res.json()) as {
+      places?: { addressComponents?: { longText: string; types: string[] }[] }[];
+    };
+
+    const components = data.places?.[0]?.addressComponents;
+    if (!components) return NextResponse.json({ place: null });
+
+    const locality = components.find((c) => c.types.includes("locality"))?.longText;
+    const country = components.find((c) => c.types.includes("country"))?.longText;
+    const location = [locality, country].filter(Boolean).join(", ");
+
+    return NextResponse.json({ place: location ? { location } : null });
+  } catch {
+    return NextResponse.json({ place: null });
+  }
+}
diff --git a/app/api/resume/route.ts b/app/api/resume/route.ts
index 9589fb7..f284240 100644
--- a/app/api/resume/route.ts
+++ b/app/api/resume/route.ts
@@ -9,90 +9,15 @@ import { getAuthenticatedUser } from "@/lib/services/db";
 const OPENAI_MODEL = "gpt-4o-mini";
 const GROQ_FALLBACK_MODEL = "llama-3.1-8b-instant";
 
-const SYSTEM_PROMPT = `You are an elite resume advisory panel 
-for Singapore's white-collar job market. You combine the 
-expertise of four specialists:
-
-1. LANGUAGE COACH — Reviews tone, grammar, action verb 
-   strength, and professional clarity
-2. ATS SPECIALIST — Checks keyword density, formatting 
-   suitability for applicant tracking systems, and 
-   section completeness
-3. SINGAPORE MARKET ADVISOR — Validates experience and 
-   language against Singapore hiring norms, MOM standards, 
-   and local employer expectations
-4. CAREER PROGRESSION ANALYST — Assesses career trajectory 
-   logic, identifies gaps, and evaluates whether the 
-   candidate's progression is competitive for their 
-   target level
-
-Analyse the resume and return ONLY a valid JSON object 
-with exactly these fields:
-
-{
-  "overallImpression": "3 to 4 sentence summary covering 
-    the candidate's overall profile strength, market 
-    positioning in Singapore, and suitability for their 
-    apparent target role",
-
-  "keyStrengths": [
-    "strength 1 — be specific, reference actual content 
-    from the resume",
-    "strength 2",
-    "strength 3"
-  ],
-
-  "areasToImprove": [
-    "gap 1 — be specific, explain why this weakens the 
-    resume in Singapore's market",
-    "gap 2",
-    "gap 3"
-  ],
-
-  "suggestedEdits": [
-    "edit 1 — provide the exact rewrite, not just advice. 
-    Example: Change 'Managed social media' to 'Grew 
-    combined social following by 40% to 120,000 across 
-    Facebook and Instagram'",
-    "edit 2",
-    "edit 3"
-  ],
-
-  "atsAnalysis": {
-    "keywordsFound": ["keyword1", "keyword2", "keyword3"],
-    "keywordsMissing": ["missing1", "missing2", "missing3"],
-    "atsFriendly": true or false,
-    "atsNotes": "One sentence on ATS suitability"
-  },
-
-  "careerProgression": "2 sentence assessment of whether 
-    the career trajectory is logical and competitive for 
-    the candidate's experience level in Singapore",
-
-  "salaryBenchmark": {
-    "estimatedRange": "SGD X,000 - Y,000 per month",
-    "rationale": "One sentence explaining the estimate 
-    based on role level, sector, and years of experience 
-    in Singapore"
-  },
-
-  "score": a number from 1 to 10 based on this rubric:
-    2 points — Quantifiable achievements with specific 
-               numbers and dollar values
-    2 points — Relevance and alignment to Singapore 
-               market and MOM standards  
-    2 points — Structure, clarity, and ATS compatibility
-    2 points — Action verb strength and language quality
-    2 points — Completeness of contact info, work history, 
-               education, skills, and career logic
-}
+const SYSTEM_PROMPT = `You are an elite Singapore resume advisor: language coach, ATS specialist, Singapore market expert (MOM standards, local hiring norms), and career progression analyst. Be specific — always reference actual resume content, never generic advice. Salary benchmarks must be SGD Singapore market rates.
+
+Return ONLY valid JSON with exactly these fields:
+
+{"overallImpression":"3–4 sentences: profile strength, Singapore market positioning, target role fit","keyStrengths":["specific strength referencing actual resume content","strength 2","strength 3"],"areasToImprove":["specific gap explaining why it weakens the resume in Singapore's market","gap 2","gap 3"],"suggestedEdits":["exact rewrite (not advice) e.g. change 'Managed social media' to 'Grew combined social following 40% to 120k'","edit 2","edit 3"],"atsAnalysis":{"keywordsFound":["kw1","kw2"],"keywordsMissing":["missing1","missing2"],"atsFriendly":true,"atsNotes":"One sentence on ATS suitability"},"careerProgression":"2 sentences on trajectory logic and competitiveness for the candidate's level in Singapore","salaryBenchmark":{"estimatedRange":"SGD X,000–Y,000/month","rationale":"One sentence based on role, sector, and years of experience"},"score":5}
+
+Score rubric (1–10): 2pts quantified achievements with numbers; 2pts Singapore market/MOM alignment; 2pts structure/ATS compatibility; 2pts action verb quality; 2pts completeness (contact, history, education, skills).
 
-Rules:
-- Be specific. Reference actual content from the resume.
-- No generic advice that could apply to any resume.
-- Salary benchmark must reflect Singapore market rates.
-- ATS keywords must be relevant to the candidate's field.
-- No text outside the JSON object.`;
+No text outside the JSON.`;
 
 export interface ResumeFeedback {
   overallImpression: string;
diff --git a/app/resume/builder/page.tsx b/app/resume/builder/page.tsx
index f46b71e..7764eae 100644
--- a/app/resume/builder/page.tsx
+++ b/app/resume/builder/page.tsx
@@ -6,14 +6,19 @@ import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { useLanguage } from "@/components/providers/language-provider";
 import { createClient } from "@/lib/supabase/client";
 import { getResumeById, listResumes } from "@/lib/api";
+import type { ResumeTemplateData } from "@/lib/resume-templates/types";
+import { TemplatePickerModal } from "@/components/resume/TemplatePickerModal";
 
 type ExperienceItem = {
   id: string;
   jobTitle: string;
   company: string;
   location: string;
-  startDate: string;
-  endDate: string;
+  startMonth: number | null;
+  startYear: number | null;
+  endMonth: number | null;
+  endYear: number | null;
+  endIsPresent: boolean;
   description: string;
 };
 
@@ -22,8 +27,11 @@ type EducationItem = {
   school: string;
   qualification: string;
   fieldOfStudy: string;
-  startDate: string;
-  endDate: string;
+  startMonth: number | null;
+  startYear: number | null;
+  endMonth: number | null;
+  endYear: number | null;
+  endIsPresent: boolean;
 };
 
 type SkillItem = {
@@ -42,11 +50,98 @@ function createId() {
   return Math.random().toString(36).slice(2, 10);
 }
 
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] as const;
+const CURRENT_YEAR = new Date().getFullYear();
+const YEARS: number[] = Array.from({ length: CURRENT_YEAR - 1969 }, (_, i) => CURRENT_YEAR - i);
+
+function sanitiseName(raw: string): string {
+  return raw.replace(/^[#\s]+|[#\s]+$/g, "").trim();
+}
+
+function formatDate(month: number | null, year: number | null): string {
+  if (!year) return "";
+  if (!month) return String(year);
+  return `${MONTHS[month - 1]} ${year}`;
+}
+
+function parseDate(str: string | null | undefined): { month: number | null; year: number | null } {
+  if (!str) return { month: null, year: null };
+  const trimmed = str.trim();
+  const mY = trimmed.match(/^([A-Za-z]{3,})\s+(\d{4})$/);
+  if (mY) {
+    const abbr = mY[1].slice(0, 3);
+    const idx = MONTHS.findIndex((m) => m.toLowerCase() === abbr.toLowerCase());
+    return { month: idx >= 0 ? idx + 1 : null, year: parseInt(mY[2]) };
+  }
+  const isoM = trimmed.match(/^(\d{4})-(\d{2})$/);
+  if (isoM) return { month: parseInt(isoM[2]), year: parseInt(isoM[1]) };
+  const yrM = trimmed.match(/^(\d{4})$/);
+  if (yrM) return { month: null, year: parseInt(yrM[1]) };
+  return { month: null, year: null };
+}
+
+function calcDuration(
+  sMonth: number | null, sYear: number | null,
+  eMonth: number | null, eYear: number | null,
+  isPresent: boolean,
+): string {
+  if (!sYear) return "";
+  const now = new Date();
+  const endY = isPresent ? now.getFullYear() : eYear;
+  const endM = isPresent ? now.getMonth() + 1 : eMonth;
+  if (!endY) return "";
+  const totalMonths = (endY - sYear) * 12 + ((endM ?? 6) - (sMonth ?? 1));
+  if (totalMonths <= 0) return "";
+  const yrs = Math.floor(totalMonths / 12);
+  const mos = totalMonths % 12;
+  if (yrs === 0) return `${mos} mo${mos !== 1 ? "s" : ""}`;
+  if (mos === 0) return `${yrs} yr${yrs !== 1 ? "s" : ""}`;
+  return `${yrs} yr${yrs !== 1 ? "s" : ""} ${mos} mo${mos !== 1 ? "s" : ""}`;
+}
+
+function MonthYearPicker({
+  month, year, onChange, disabled,
+}: {
+  month: number | null;
+  year: number | null;
+  onChange: (month: number | null, year: number | null) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <div className="flex gap-2">
+      <select
+        value={month ?? ""}
+        onChange={(e) => onChange(e.target.value ? Number(e.target.value) : null, year)}
+        disabled={disabled}
+        className="flex-1 rounded-xl border border-slate-200 px-3 py-3 text-sm text-slate-800 outline-none focus:border-navy-950 disabled:opacity-50"
+      >
+        <option value="">Month</option>
+        {MONTHS.map((m, i) => (
+          <option key={m} value={i + 1}>{m}</option>
+        ))}
+      </select>
+      <select
+        value={year ?? ""}
+        onChange={(e) => onChange(month, e.target.value ? Number(e.target.value) : null)}
+        disabled={disabled}
+        className="flex-1 rounded-xl border border-slate-200 px-3 py-3 text-sm text-slate-800 outline-none focus:border-navy-950 disabled:opacity-50"
+      >
+        <option value="">Year</option>
+        {YEARS.map((y) => (
+          <option key={y} value={y}>{y}</option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
 export default function ResumeBuilderPage() {
   const { t } = useLanguage();
 
   const [photoPreview, setPhotoPreview] = useState<string | null>(null);
+  const [photoBase64, setPhotoBase64] = useState<string | null>(null);
   const [prefillLoading, setPrefillLoading] = useState(false);
+  const [showTemplatePicker, setShowTemplatePicker] = useState(false);
 
   const [fullName, setFullName] = useState("Your Name");
   const [targetRole, setTargetRole] = useState("Operations Executive");
@@ -63,8 +158,8 @@ export default function ResumeBuilderPage() {
       jobTitle: "Operations Coordinator",
       company: "Inter Group",
       location: "Singapore",
-      startDate: "2023",
-      endDate: "Present",
+      startMonth: null, startYear: 2023,
+      endMonth: null, endYear: null, endIsPresent: true,
       description:
         "Coordinated internal documentation, supported project follow-up, and assisted with daily workflow tracking and stakeholder communication.",
     },
@@ -76,8 +171,8 @@ export default function ResumeBuilderPage() {
       school: "ABC Institute",
       qualification: "Diploma",
       fieldOfStudy: "Business Administration",
-      startDate: "2019",
-      endDate: "2022",
+      startMonth: null, startYear: 2019,
+      endMonth: null, endYear: 2022, endIsPresent: false,
     },
   ]);
 
@@ -141,7 +236,7 @@ export default function ResumeBuilderPage() {
           });
           if (firstMeaningfulLine && !cancelled) {
             console.log("[ResumeBuilder] Extracted name:", firstMeaningfulLine.trim());
-            setFullName(firstMeaningfulLine.trim());
+            setFullName(sanitiseName(firstMeaningfulLine));
           }
         }
 
@@ -156,15 +251,24 @@ export default function ResumeBuilderPage() {
 
         if (profile.experiences?.length) {
           setExperiences(
-            profile.experiences.map((exp) => ({
-              id: createId(),
-              jobTitle: exp.title ?? "",
-              company: exp.company ?? "",
-              location: "",
-              startDate: exp.start_date ?? "",
-              endDate: exp.end_date ?? "",
-              description: exp.description ?? "",
-            })),
+            profile.experiences.map((exp) => {
+              const isPresent =
+                !exp.end_date || exp.end_date.toLowerCase() === "present";
+              const start = parseDate(exp.start_date);
+              const end = isPresent ? { month: null, year: null } : parseDate(exp.end_date);
+              return {
+                id: createId(),
+                jobTitle: exp.title ?? "",
+                company: exp.company ?? "",
+                location: "",
+                startMonth: start.month,
+                startYear: start.year,
+                endMonth: end.month,
+                endYear: end.year,
+                endIsPresent: isPresent,
+                description: exp.description ?? "",
+              };
+            }),
           );
         }
 
@@ -175,8 +279,10 @@ export default function ResumeBuilderPage() {
               school: edu.institution ?? "",
               qualification: edu.qualification ?? "",
               fieldOfStudy: edu.field_of_study ?? "",
-              startDate: "",
-              endDate: edu.graduation_year != null ? String(edu.graduation_year) : "",
+              startMonth: null, startYear: null,
+              endMonth: null,
+              endYear: edu.graduation_year ?? null,
+              endIsPresent: false,
             })),
           );
         }
@@ -193,23 +299,53 @@ export default function ResumeBuilderPage() {
     };
   }, []);
 
+  async function toBase64DataUri(source: string): Promise<string> {
+    const response = await fetch(source);
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  }
+
   function handlePhotoChange(event: ChangeEvent<HTMLInputElement>) {
     const file = event.target.files?.[0];
     if (!file) return;
 
-    const reader = new FileReader();
-    reader.onload = () => {
-      setPhotoPreview(typeof reader.result === "string" ? reader.result : null);
-    };
-    reader.readAsDataURL(file);
+    const objectUrl = URL.createObjectURL(file);
+    setPhotoPreview(objectUrl);
+
+    void toBase64DataUri(objectUrl)
+      .then((b64) => setPhotoBase64(b64))
+      .catch(() => setPhotoBase64(null));
   }
 
-  function updateExperience(id: string, field: keyof ExperienceItem, value: string) {
+  function updateExperience(
+    id: string,
+    field: keyof Omit<ExperienceItem, "id">,
+    value: string | number | boolean | null,
+  ) {
     setExperiences((prev) =>
       prev.map((item) => (item.id === id ? { ...item, [field]: value } : item)),
     );
   }
 
+  async function handleCompanyBlur(id: string, company: string) {
+    if (!company.trim()) return;
+    const item = experiences.find((e) => e.id === id);
+    if (!item || item.location.trim()) return;
+    try {
+      const res = await fetch(`/api/places?query=${encodeURIComponent(company + " Singapore")}`);
+      if (!res.ok) return;
+      const json = (await res.json()) as { place: { location: string } | null };
+      if (json.place?.location) updateExperience(id, "location", json.place.location);
+    } catch {
+      // fail silently
+    }
+  }
+
   function addExperience() {
     setExperiences((prev) => [
       ...prev,
@@ -218,8 +354,8 @@ export default function ResumeBuilderPage() {
         jobTitle: "",
         company: "",
         location: "",
-        startDate: "",
-        endDate: "",
+        startMonth: null, startYear: null,
+        endMonth: null, endYear: null, endIsPresent: false,
         description: "",
       },
     ]);
@@ -229,7 +365,11 @@ export default function ResumeBuilderPage() {
     setExperiences((prev) => prev.filter((item) => item.id !== id));
   }
 
-  function updateEducation(id: string, field: keyof EducationItem, value: string) {
+  function updateEducation(
+    id: string,
+    field: keyof Omit<EducationItem, "id">,
+    value: string | number | boolean | null,
+  ) {
     setEducations((prev) =>
       prev.map((item) => (item.id === id ? { ...item, [field]: value } : item)),
     );
@@ -243,8 +383,8 @@ export default function ResumeBuilderPage() {
         school: "",
         qualification: "",
         fieldOfStudy: "",
-        startDate: "",
-        endDate: "",
+        startMonth: null, startYear: null,
+        endMonth: null, endYear: null, endIsPresent: false,
       },
     ]);
   }
@@ -293,6 +433,42 @@ export default function ResumeBuilderPage() {
     [skills],
   );
 
+  function buildTemplateData(): ResumeTemplateData {
+    return {
+      name: sanitiseName(fullName),
+      jobTitle: targetRole || undefined,
+      email: email || undefined,
+      phone: phone || undefined,
+      location: location || undefined,
+      summary: summary || undefined,
+      experiences: experiences
+        .filter((e) => e.jobTitle.trim() || e.company.trim())
+        .map((e) => ({
+          title: e.jobTitle,
+          company: e.company,
+          location: e.location || undefined,
+          startDate: formatDate(e.startMonth, e.startYear),
+          endDate: e.endIsPresent ? "Present" : formatDate(e.endMonth, e.endYear),
+          description: e.description,
+        })),
+      educations: educations
+        .filter((ed) => ed.school.trim() || ed.qualification.trim())
+        .map((ed) => ({
+          institution: ed.school,
+          qualification: ed.qualification,
+          fieldOfStudy: ed.fieldOfStudy || undefined,
+          graduationYear: ed.endIsPresent
+            ? "Present"
+            : formatDate(ed.endMonth, ed.endYear) || undefined,
+        })),
+      skills: filledSkills.map((s) => ({ name: s.name, level: s.level })),
+      extras: extraSections
+        .filter((ex) => ex.title.trim() && ex.content.trim())
+        .map((ex) => ({ title: ex.title, content: ex.content })),
+      photoUrl: photoBase64 ?? undefined,
+    };
+  }
+
   return (
     <main className="min-h-screen bg-[#f8f8f6]">
       <SiteNavbar
@@ -461,6 +637,7 @@ export default function ResumeBuilderPage() {
                         placeholder="Company"
                         value={item.company}
                         onChange={(e) => updateExperience(item.id, "company", e.target.value)}
+                        onBlur={(e) => void handleCompanyBlur(item.id, e.target.value)}
                         className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
                       />
                       <input
@@ -469,19 +646,40 @@ export default function ResumeBuilderPage() {
                         onChange={(e) => updateExperience(item.id, "location", e.target.value)}
                         className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
                       />
-                      <div className="grid grid-cols-2 gap-3">
-                        <input
-                          placeholder="Start"
-                          value={item.startDate}
-                          onChange={(e) => updateExperience(item.id, "startDate", e.target.value)}
-                          className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
-                        />
-                        <input
-                          placeholder="End"
-                          value={item.endDate}
-                          onChange={(e) => updateExperience(item.id, "endDate", e.target.value)}
-                          className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
+                      <div className="space-y-2">
+                        <p className="text-xs font-medium text-slate-500">Start date</p>
+                        <MonthYearPicker
+                          month={item.startMonth}
+                          year={item.startYear}
+                          onChange={(m, y) => {
+                            updateExperience(item.id, "startMonth", m);
+                            updateExperience(item.id, "startYear", y);
+                          }}
                         />
+                        <p className="pt-1 text-xs font-medium text-slate-500">End date</p>
+                        {!item.endIsPresent && (
+                          <MonthYearPicker
+                            month={item.endMonth}
+                            year={item.endYear}
+                            onChange={(m, y) => {
+                              updateExperience(item.id, "endMonth", m);
+                              updateExperience(item.id, "endYear", y);
+                            }}
+                          />
+                        )}
+                        <label className="flex cursor-pointer items-center gap-2 text-sm text-slate-600">
+                          <input
+                            type="checkbox"
+                            checked={item.endIsPresent}
+                            onChange={(e) => updateExperience(item.id, "endIsPresent", e.target.checked)}
+                            className="accent-navy-950"
+                          />
+                          Present
+                        </label>
+                        {(() => {
+                          const dur = calcDuration(item.startMonth, item.startYear, item.endMonth, item.endYear, item.endIsPresent);
+                          return dur ? <p className="text-xs text-slate-500">{dur}</p> : null;
+                        })()}
                       </div>
                       <textarea
                         placeholder={t("resume_builder_ph_experience_body")}
@@ -600,19 +798,40 @@ export default function ResumeBuilderPage() {
                         onChange={(e) => updateEducation(item.id, "fieldOfStudy", e.target.value)}
                         className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
                       />
-                      <div className="grid grid-cols-2 gap-3">
-                        <input
-                          placeholder="Start"
-                          value={item.startDate}
-                          onChange={(e) => updateEducation(item.id, "startDate", e.target.value)}
-                          className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
-                        />
-                        <input
-                          placeholder="End"
-                          value={item.endDate}
-                          onChange={(e) => updateEducation(item.id, "endDate", e.target.value)}
-                          className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
+                      <div className="space-y-2">
+                        <p className="text-xs font-medium text-slate-500">Start date</p>
+                        <MonthYearPicker
+                          month={item.startMonth}
+                          year={item.startYear}
+                          onChange={(m, y) => {
+                            updateEducation(item.id, "startMonth", m);
+                            updateEducation(item.id, "startYear", y);
+                          }}
                         />
+                        <p className="pt-1 text-xs font-medium text-slate-500">End / Graduation date</p>
+                        {!item.endIsPresent && (
+                          <MonthYearPicker
+                            month={item.endMonth}
+                            year={item.endYear}
+                            onChange={(m, y) => {
+                              updateEducation(item.id, "endMonth", m);
+                              updateEducation(item.id, "endYear", y);
+                            }}
+                          />
+                        )}
+                        <label className="flex cursor-pointer items-center gap-2 text-sm text-slate-600">
+                          <input
+                            type="checkbox"
+                            checked={item.endIsPresent}
+                            onChange={(e) => updateEducation(item.id, "endIsPresent", e.target.checked)}
+                            className="accent-navy-950"
+                          />
+                          Present / Ongoing
+                        </label>
+                        {(() => {
+                          const dur = calcDuration(item.startMonth, item.startYear, item.endMonth, item.endYear, item.endIsPresent);
+                          return dur ? <p className="text-xs text-slate-500">{dur}</p> : null;
+                        })()}
                       </div>
                     </div>
                   </div>
@@ -663,6 +882,16 @@ export default function ResumeBuilderPage() {
                 ))}
               </div>
             </div>
+
+            <div className="flex justify-end">
+              <button
+                type="button"
+                onClick={() => setShowTemplatePicker(true)}
+                className="rounded-xl bg-navy-950 px-6 py-3 text-sm font-semibold text-white transition hover:bg-navy-800"
+              >
+                Download Resume
+              </button>
+            </div>
           </section>
 
           <aside className="min-w-0 space-y-6 lg:sticky lg:top-24 lg:self-start">
@@ -714,7 +943,11 @@ export default function ResumeBuilderPage() {
                               {item.company ? ` • ${item.company}` : ""}
                             </p>
                             <p className="text-xs text-slate-500">
-                              {[item.location, item.startDate, item.endDate].filter(Boolean).join(" • ")}
+                              {[
+                                item.location,
+                                item.startYear ? formatDate(item.startMonth, item.startYear) : null,
+                                item.endIsPresent ? "Present" : item.endYear ? formatDate(item.endMonth, item.endYear) : null,
+                              ].filter(Boolean).join(" • ")}
                             </p>
                             <p className="mt-1 whitespace-pre-wrap text-sm leading-6 text-slate-700">
                               {item.description}
@@ -763,7 +996,10 @@ export default function ResumeBuilderPage() {
                             </p>
                             <p className="text-sm text-slate-700">{item.school}</p>
                             <p className="text-xs text-slate-500">
-                              {[item.startDate, item.endDate].filter(Boolean).join(" - ")}
+                              {[
+                                item.startYear ? formatDate(item.startMonth, item.startYear) : null,
+                                item.endIsPresent ? "Present" : item.endYear ? formatDate(item.endMonth, item.endYear) : null,
+                              ].filter(Boolean).join(" – ")}
                             </p>
                           </div>
                         ) : null
@@ -801,6 +1037,12 @@ export default function ResumeBuilderPage() {
           </aside>
         </div>
       </section>
+      {showTemplatePicker ? (
+        <TemplatePickerModal
+          data={buildTemplateData()}
+          onClose={() => setShowTemplatePicker(false)}
+        />
+      ) : null}
     </main>
   );
 }
\ No newline at end of file
diff --git a/app/resume/page.tsx b/app/resume/page.tsx
index 1e45190..d9223cf 100644
--- a/app/resume/page.tsx
+++ b/app/resume/page.tsx
@@ -1,8 +1,16 @@
 "use client";
 
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useCallback, useEffect, useRef, useState } from "react";
+
+const ANALYSIS_STEPS = [
+  "Reading your resume…",
+  "Running ATS keyword scan…",
+  "Analysing career progression…",
+  "Generating salary benchmarks…",
+  "Finalising feedback…",
+] as const;
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { ResumeList } from "@/components/resume/ResumeList";
 import { useLanguage } from "@/components/providers/language-provider";
@@ -12,17 +20,17 @@ import { getProfileJob, listResumes, profileResume, uploadResume, type ResumeSum
 import type { ResumeProfile } from "@/lib/types";
 import type { ResumeFeedback } from "@/app/api/resume/route";
 
-export default function ResumeOnboardingPage() {
+function ResumeOnboardingContent() {
   const { t } = useLanguage();
   const { status: resumeStatus, refetch: refetchResumeStatus } = useResumeStatus();
   const router = useRouter();
+  const searchParams = useSearchParams();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [selectedFileName, setSelectedFileName] = useState<string>("");
   const [uploading, setUploading] = useState(false);
   const [profiling, setProfiling] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [lastResumeId, setLastResumeId] = useState<string | null>(null);
   const [userResumes, setUserResumes] = useState<ResumeSummary[]>([]);
 
@@ -31,20 +39,50 @@ export default function ResumeOnboardingPage() {
   const [voiceText, setVoiceText] = useState("");
   const recognizerRef = useRef<{ stop: () => void } | null>(null);
 
-  // AI feedback state
+  // Upload / analysis state
+  const [uploadComplete, setUploadComplete] = useState(false);
   const [feedback, setFeedback] = useState<ResumeFeedback | null>(null);
   const [analysing, setAnalysing] = useState(false);
+  const [analysisStep, setAnalysisStep] = useState(0);
   const [analysisError, setAnalysisError] = useState<string | null>(null);
+  const [analysisComplete, setAnalysisComplete] = useState(false);
+
+  // Stage 0 = no file, 1 = file selected, 2 = uploaded, 3 = analysed
+  const stage = !selectedFile ? 0 : !uploadComplete ? 1 : !analysisComplete ? 2 : 3;
+
+  useEffect(() => {
+    if (!analysing) {
+      setAnalysisStep(0);
+      return;
+    }
+    const timers = [
+      setTimeout(() => setAnalysisStep(1), 2000),
+      setTimeout(() => setAnalysisStep(2), 5000),
+      setTimeout(() => setAnalysisStep(3), 8000),
+      setTimeout(() => setAnalysisStep(4), 11000),
+    ];
+    return () => timers.forEach(clearTimeout);
+  }, [analysing]);
 
   useEffect(() => {
     const supabase = createClient();
+    const paramResumeId = searchParams.get("resume_id");
     void supabase.auth.getUser().then(({ data: { user } }) => {
       if (!user) return;
       void listResumes()
-        .then((r) => setUserResumes(r.resumes))
+        .then((r) => {
+          setUserResumes(r.resumes);
+          if (paramResumeId) {
+            setLastResumeId(paramResumeId);
+            const match = r.resumes.find((re) => re.id === paramResumeId);
+            if (match) {
+              // resume found from URL param — no banner needed, stage will reflect state
+            }
+          }
+        })
         .catch(() => setUserResumes([]));
     });
-  }, []);
+  }, [searchParams]);
 
   const handleResumeDeleted = useCallback(
     (resumeId: string) => {
@@ -58,9 +96,10 @@ export default function ResumeOnboardingPage() {
     setSelectedFile(file);
     setSelectedFileName(file?.name ?? "");
     setError(null);
-    setSuccessMessage(null);
     setFeedback(null);
     setAnalysisError(null);
+    setUploadComplete(false);
+    setAnalysisComplete(false);
   }, []);
 
   function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -75,7 +114,6 @@ export default function ResumeOnboardingPage() {
 
   const handleUpload = useCallback(async () => {
     setError(null);
-    setSuccessMessage(null);
 
     if (!selectedFile) {
       setError(t("resume_error_no_file"));
@@ -100,11 +138,8 @@ export default function ResumeOnboardingPage() {
     setUploading(true);
     try {
       const uploadResult = await uploadResume(selectedFile);
-      const { resume_id, raw_text_length } = uploadResult;
+      const { resume_id } = uploadResult;
       setLastResumeId(null);
-      setSuccessMessage(
-        t("resume_upload_progress").replace("{n}", raw_text_length.toLocaleString()),
-      );
       setProfiling(true);
 
       let started: {
@@ -135,7 +170,7 @@ export default function ResumeOnboardingPage() {
         } catch {
           /* ignore */
         }
-        setSuccessMessage(t("resume_success_profiled"));
+        setUploadComplete(true);
         setProfiling(false);
         return;
       }
@@ -150,7 +185,7 @@ export default function ResumeOnboardingPage() {
           } catch {
             /* ignore */
           }
-          setSuccessMessage(t("resume_success_profiled"));
+          setUploadComplete(true);
           setProfiling(false);
           return;
         }
@@ -165,7 +200,7 @@ export default function ResumeOnboardingPage() {
         /* ignore */
       }
       setLastResumeId(resume_id);
-      setSuccessMessage(t("resume_profiling_timeout"));
+      setUploadComplete(true);
     } catch (e) {
       setError(e instanceof Error ? e.message : t("resume_error_upload_failed"));
     } finally {
@@ -198,6 +233,10 @@ export default function ResumeOnboardingPage() {
       }
 
       setFeedback(json.feedback as ResumeFeedback);
+      try {
+        sessionStorage.setItem("vericlause.resumeFeedback", JSON.stringify(json.feedback));
+      } catch { /* ignore */ }
+      setAnalysisComplete(true);
     } catch {
       setAnalysisError("Network error. Please check your connection and try again.");
     } finally {
@@ -338,19 +377,26 @@ export default function ResumeOnboardingPage() {
               {error ? (
                 <p className="mt-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</p>
               ) : null}
-              {successMessage ? (
-                <p className="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
-                  {successMessage}
-                </p>
-              ) : null}
 
+              {/* Upload button — active only at stage 1 */}
               <button
                 type="submit"
-                disabled={uploading || profiling || !selectedFile}
-                className="mt-4 w-full rounded-xl bg-navy-950 px-4 py-3 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
+                disabled={stage !== 1 || uploading || profiling}
+                className={`mt-4 w-full rounded-xl px-4 py-3 text-sm font-medium text-white transition disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none ${
+                  stage === 1 && !uploading && !profiling
+                    ? "bg-navy-950 hover:opacity-90"
+                    : "bg-slate-300"
+                }`}
               >
                 {uploading || profiling ? t("resume_processing") : t("resume_upload_button")}
               </button>
+
+              {/* Stage 2 banner — upload done, waiting for analysis */}
+              {stage === 2 ? (
+                <p className="mt-3 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
+                  Resume uploaded successfully. Click <strong>Analyse My Resume</strong> to get your AI feedback.
+                </p>
+              ) : null}
             </form>
 
             <div className="mt-5">
@@ -366,21 +412,64 @@ export default function ResumeOnboardingPage() {
               />
             </div>
 
+            {/* Analyse button — active only at stage 2 */}
             <button
               type="button"
               onClick={() => void handleAnalyse()}
-              disabled={!selectedFile || analysing}
-              className="mt-4 w-full rounded-xl border border-[#b88a44] px-4 py-3 text-sm font-medium text-[#b88a44] transition hover:bg-amber-50 disabled:cursor-not-allowed disabled:opacity-60"
+              disabled={stage !== 2 || analysing}
+              className={`mt-4 w-full rounded-xl px-4 py-3 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none ${
+                stage === 2 && !analysing
+                  ? "border border-[#b88a44] text-[#b88a44] hover:bg-amber-50"
+                  : "border border-slate-200 text-slate-400 bg-white"
+              }`}
             >
-              {analysing ? "Analysing..." : "Analyse My Resume"}
+              {analysing ? "Analysing…" : "Analyse My Resume"}
             </button>
 
+            {analysing ? (
+              <div className="mt-3 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3">
+                <div className="space-y-1.5">
+                  {ANALYSIS_STEPS.map((step, i) => (
+                    <div
+                      key={i}
+                      className={`flex items-center gap-2.5 text-sm transition-opacity duration-500 ${
+                        i <= analysisStep ? "opacity-100" : "opacity-25"
+                      }`}
+                    >
+                      {i < analysisStep ? (
+                        <svg className="h-3.5 w-3.5 shrink-0 text-emerald-500" viewBox="0 0 20 20" fill="currentColor">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                      ) : i === analysisStep ? (
+                        <svg className="h-3.5 w-3.5 shrink-0 animate-spin text-[#b88a44]" viewBox="0 0 24 24" fill="none">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
+                        </svg>
+                      ) : (
+                        <span className="h-3.5 w-3.5 shrink-0 rounded-full border border-slate-300" />
+                      )}
+                      <span className={i === analysisStep ? "font-medium text-[#b88a44]" : "text-slate-500"}>
+                        {step}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+
             {analysisError ? (
               <p className="mt-3 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                 {analysisError}
               </p>
             ) : null}
 
+            {/* Stage 3 banner — analysis done */}
+            {stage === 3 && feedback ? (
+              <p className="mt-3 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
+                Analysis complete. Your resume scored <strong>{Math.min(100, Math.round((feedback.score / 10) * 100))}/100</strong>. Click <strong>Go to Resume Review</strong> to see your full feedback.
+              </p>
+            ) : null}
+
             <div className="mt-3 flex flex-wrap gap-3">
               <button
                 type="button"
@@ -392,12 +481,19 @@ export default function ResumeOnboardingPage() {
               </button>
             </div>
 
-            <Link
-              href={reviewHref}
-              className="mt-4 flex w-full items-center justify-center rounded-xl border border-slate-200 px-4 py-3 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
+            {/* Go to Review button — active only at stage 3 */}
+            <button
+              type="button"
+              disabled={stage !== 3}
+              onClick={() => router.push(reviewHref)}
+              className={`mt-4 flex w-full items-center justify-center rounded-xl px-4 py-3 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none ${
+                stage === 3
+                  ? "border border-navy-950 bg-navy-950 text-white hover:opacity-90"
+                  : "border border-slate-200 bg-white text-slate-400"
+              }`}
             >
               {t("resume_go_review")}
-            </Link>
+            </button>
           </section>
 
           <aside className="space-y-6">
@@ -414,12 +510,37 @@ export default function ResumeOnboardingPage() {
             </div>
 
             <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-navy-950">{t("resume_what_next_title")}</h2>
-              <div className="mt-4 space-y-3 text-sm leading-6 text-slate-600">
-                <p>• {t("resume_what_next_1")}</p>
-                <p>• {t("resume_what_next_2")}</p>
-                <p>• {t("resume_what_next_3")}</p>
-              </div>
+              <h2 className="text-xl font-semibold text-navy-950">Your resume journey</h2>
+              <ol className="mt-4 space-y-3">
+                {[
+                  {
+                    label: "Analyse",
+                    desc: "Upload your resume and click Analyse My Resume to get instant AI feedback on strengths, gaps, and your ATS score.",
+                  },
+                  {
+                    label: "Review and Improve",
+                    desc: "See your score, apply AI suggestions, and edit your resume sections directly on the review page.",
+                  },
+                  {
+                    label: "Rebuild if Needed",
+                    desc: "Use the Resume Builder to restructure your resume from scratch or refine it section by section.",
+                  },
+                  {
+                    label: "Match and Apply",
+                    desc: "Head to Job Matching to compare your resume against live Singapore job listings and get a recommended fit score.",
+                  },
+                ].map((step, i) => (
+                  <li key={i} className="flex gap-3">
+                    <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-navy-950 text-[10px] font-bold text-white">
+                      {i + 1}
+                    </span>
+                    <div>
+                      <p className="text-sm font-semibold text-navy-950">{step.label}</p>
+                      <p className="mt-0.5 text-xs leading-5 text-slate-500">{step.desc}</p>
+                    </div>
+                  </li>
+                ))}
+              </ol>
             </div>
           </aside>
         </div>
@@ -578,3 +699,17 @@ export default function ResumeOnboardingPage() {
     </main>
   );
 }
+
+export default function ResumeOnboardingPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center bg-[#f8f8f6]">
+          <div className="h-10 w-10 animate-spin rounded-full border-2 border-slate-200 border-t-navy-950" />
+        </div>
+      }
+    >
+      <ResumeOnboardingContent />
+    </Suspense>
+  );
+}
diff --git a/app/resume/review/page.tsx b/app/resume/review/page.tsx
index d2145fb..54d9ca4 100644
--- a/app/resume/review/page.tsx
+++ b/app/resume/review/page.tsx
@@ -16,6 +16,9 @@ import {
   profileResume,
 } from "@/lib/api";
 import type { ResumeProfile, ResumeSuggestion } from "@/lib/types";
+import type { ResumeFeedback } from "@/app/api/resume/route";
+import type { ResumeTemplateData } from "@/lib/resume-templates/types";
+import { TemplatePickerModal } from "@/components/resume/TemplatePickerModal";
 
 function formatExperiencesText(profile: ResumeProfile): string {
   if (!profile.experiences?.length) return "";
@@ -40,46 +43,12 @@ function formatEducationText(profile: ResumeProfile): string {
     .join("\n");
 }
 
-function deriveIndicatorScore(suggestions: ResumeSuggestion[] | null | undefined): number {
-  if (!suggestions?.length) return 78;
-  let penalty = 0;
-  for (const s of suggestions) {
-    if (s.type === "critical_fix") penalty += 14;
-    else if (s.priority === "high") penalty += 10;
-    else if (s.priority === "medium") penalty += 5;
-    else penalty += 2;
-  }
-  return Math.max(42, Math.min(96, Math.round(96 - penalty)));
-}
-
-function splitSuggestions(suggestions: ResumeSuggestion[] | null | undefined): {
-  toImprove: ResumeSuggestion[];
-  positiveHints: ResumeSuggestion[];
-} {
-  if (!suggestions?.length) return { toImprove: [], positiveHints: [] };
-  const toImprove = suggestions.filter(
-    (s) =>
-      s.type === "critical_fix" ||
-      s.priority === "high" ||
-      s.type === "content_gap" ||
-      s.type === "design_feedback",
-  );
-  const positiveHints = suggestions.filter(
-    (s) => s.type === "enhancement" || s.type === "impact_opportunity" || s.type === "ats_optimization",
-  );
-  return {
-    toImprove: toImprove.length ? toImprove : suggestions.slice(0, Math.min(5, suggestions.length)),
-    positiveHints: positiveHints.length ? positiveHints.slice(0, 5) : [],
-  };
-}
-
 function parseImprovedResume(text: string): {
   summary: string | null;
   experience: string | null;
   skills: string | null;
   education: string | null;
 } {
-  // Strip **bold** markdown markers from AI output
   const cleaned = text.replace(/\*\*/g, "");
 
   function extractSection(label: string): string | null {
@@ -96,7 +65,6 @@ function parseImprovedResume(text: string): {
   const skills = extractSection("Skills") || extractSection("Key Skills");
   const education = extractSection("Education");
 
-  // Fallback: if no sections parsed, put entire text into experience
   if (!summary && !experience && !skills && !education) {
     return { summary: null, experience: text.trim(), skills: null, education: null };
   }
@@ -104,6 +72,10 @@ function parseImprovedResume(text: string): {
   return { summary, experience, skills, education };
 }
 
+function sanitiseName(raw: string): string {
+  return raw.replace(/^[#\s]+|[#\s]+$/g, "").trim();
+}
+
 function extractCandidateName(rawText: string, fileName: string): string {
   const firstMeaningfulLine = rawText.split("\n").find((line) => {
     const trimmed = line.trim();
@@ -113,20 +85,78 @@ function extractCandidateName(rawText: string, fileName: string): string {
       !/[@\d+()[\]]|Summary|Experience|Skills|Education|Name:|Target/i.test(trimmed)
     );
   });
-  if (firstMeaningfulLine) return firstMeaningfulLine.trim();
-  // Fallback: "John Doe - Voice Resume" → "John Doe"
+  if (firstMeaningfulLine) return sanitiseName(firstMeaningfulLine);
   const fromFileName = fileName.split(" - ")[0].trim();
-  return fromFileName || "Resume";
+  return sanitiseName(fromFileName) || "";
+}
+
+function extractEmail(text: string): string | null {
+  return text.match(/[\w.+-]+@[\w-]+\.[\w.]+/)?.[0] ?? null;
+}
+
+function extractPhone(text: string): string | null {
+  return text.match(/(?:\+65[\s-]?)?[689]\d{3}[\s-]?\d{4}/)?.[0] ?? null;
+}
+
+/** Assign each ResumeSuggestion to its most relevant section by keyword matching. */
+function assignSuggestionSection(s: ResumeSuggestion): "summary" | "experience" | "skills" | "education" {
+  const lower = (s.suggestion + " " + (s.suggested_rewrite ?? "")).toLowerCase();
+  if (/\bsummary\b|professional profile|opening statement|career objective|introduction/.test(lower))
+    return "summary";
+  if (/\bexperience\b|work history|work experience|\brole\b|\bjob\b|position|company|achievement|bullet|quantif|action verb|responsibilit|managed|coordinated|implemented/.test(lower))
+    return "experience";
+  if (/\beducation\b|degree|qualification|school|university|institution|academic|gpa/.test(lower))
+    return "education";
+  return "skills";
+}
+
+/** C1: count lines in experience text that contain a number + metric indicator */
+function countQuantifiedAchievements(text: string): number {
+  if (!text.trim()) return 0;
+  const lines = text.split(/[\n.•]+/).map((l) => l.trim()).filter(Boolean);
+  return lines.filter(
+    (line) =>
+      /\d/.test(line) &&
+      /[%$]|\bSGD\b|\d+[kKmMbB]\b|\bmillion\b|\bbillion\b|\bthousand\b|\bfold\b|\bx\b/i.test(line),
+  ).length;
+}
+
+/** C2: count how many keywords from the list appear in the resume text */
+function countKeywordsFound(resumeText: string, keywords: string[]): number {
+  if (!keywords.length) return 0;
+  const lower = resumeText.toLowerCase();
+  return keywords.filter((kw) => lower.includes(kw.toLowerCase())).length;
 }
 
-const SUGGESTION_TYPE_LABEL: Record<ResumeSuggestion["type"], string> = {
-  critical_fix: "Critical",
-  enhancement: "Enhancement",
-  design_feedback: "Design",
-  content_gap: "Content gap",
-  impact_opportunity: "Impact",
-  ats_optimization: "ATS",
-};
+function SuggestionBox({ items, hidden }: { items: ResumeSuggestion[]; hidden?: boolean }) {
+  if (!items.length || hidden) return null;
+  return (
+    <div className="mt-2 rounded-lg border border-green-200 bg-green-50 p-3">
+      <div className="mb-3 flex items-center gap-1.5">
+        <span className="h-2 w-2 rounded-full bg-green-500" />
+        <span className="text-xs font-medium text-green-700">AI suggested improvement</span>
+      </div>
+      <div className="space-y-0">
+        {items.map((s, i) => (
+          <div key={i} className={i > 0 ? "mt-3 border-t border-green-200 pt-3" : ""}>
+            <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-green-700">
+              What to improve
+            </p>
+            <p className="text-sm leading-relaxed text-gray-800">{s.suggestion}</p>
+            {s.suggested_rewrite ? (
+              <>
+                <p className="mb-1 mt-2 text-xs font-semibold uppercase tracking-wide text-green-700">
+                  Suggested replacement
+                </p>
+                <p className="text-sm leading-relaxed text-gray-700 italic">{s.suggested_rewrite}</p>
+              </>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
 
 function ResumeReviewContent() {
   const { t } = useLanguage();
@@ -142,6 +172,7 @@ function ResumeReviewContent() {
   const [profile, setProfile] = useState<ResumeProfile | null>(null);
   const [suggestions, setSuggestions] = useState<ResumeSuggestion[] | null>(null);
   const [resumeId, setResumeId] = useState<string | null>(null);
+  const [feedback, setFeedback] = useState<ResumeFeedback | null>(null);
 
   // Editable override states
   const [summaryOverride, setSummaryOverride] = useState<string | null>(null);
@@ -149,14 +180,11 @@ function ResumeReviewContent() {
   const [skillsOverride, setSkillsOverride] = useState<string | null>(null);
   const [educationOverride, setEducationOverride] = useState<string | null>(null);
 
-  // Improve / rescore states
+  // Improve / download states
   const [improving, setImproving] = useState(false);
-  const [improvedText, setImprovedText] = useState<string | null>(null);
   const [improveError, setImproveError] = useState<string | null>(null);
-  const [rescoring, setRescoring] = useState(false);
-  const [rescoreScore, setRescoreScore] = useState<number | null>(null);
-  const [rescoreError, setRescoreError] = useState<string | null>(null);
-  const [downloadingPdf, setDownloadingPdf] = useState(false);
+  const [showTemplatePicker, setShowTemplatePicker] = useState(false);
+  const [suggestionsApplied, setSuggestionsApplied] = useState(false);
 
   const loadResume = useCallback(async (id: string) => {
     try {
@@ -174,13 +202,11 @@ function ResumeReviewContent() {
       setRawText(data.resume.raw_text ?? "");
       setProfile(data.resume.parsed_profile);
       setSuggestions(data.resume.ai_suggestions);
-      // Reset overrides when loading a new resume
       setSummaryOverride(null);
       setExperienceOverride(null);
       setSkillsOverride(null);
       setEducationOverride(null);
-      setRescoreScore(null);
-      setImprovedText(null);
+      setSuggestionsApplied(false);
       if (!data.resume.parsed_profile) {
         setError(
           "This resume has not been analyzed yet. Use \"Run AI analysis\" below, or upload again from the resume page.",
@@ -219,6 +245,16 @@ function ResumeReviewContent() {
         return;
       }
 
+      try {
+        const raw = sessionStorage.getItem("vericlause.resumeFeedback");
+        if (raw) {
+          const parsed = JSON.parse(raw) as ResumeFeedback;
+          if (!cancelled) setFeedback(parsed);
+        }
+      } catch (e) {
+        console.warn("Could not restore resume feedback from sessionStorage:", e);
+      }
+
       const fromQuery = searchParams.get("resume_id");
       let id = fromQuery;
 
@@ -306,7 +342,8 @@ function ResumeReviewContent() {
     }
   }
 
-  async function handleGenerateImproved() {
+  /** One-shot: generate improved version and immediately apply it to the editable fields. */
+  async function handleApplyAiSuggestions() {
     setImproving(true);
     setImproveError(null);
     try {
@@ -328,7 +365,13 @@ function ResumeReviewContent() {
       });
       const data = await res.json();
       if (!res.ok) throw new Error(data.detail || "Improvement failed");
-      setImprovedText(data.improvedResume);
+
+      const parsed = parseImprovedResume(data.improvedResume);
+      if (parsed.summary) setSummaryOverride(parsed.summary);
+      if (parsed.experience) setExperienceOverride(parsed.experience);
+      if (parsed.skills) setSkillsOverride(parsed.skills);
+      if (parsed.education) setEducationOverride(parsed.education);
+      setSuggestionsApplied(true);
     } catch (e) {
       setImproveError(e instanceof Error ? e.message : "Improvement failed");
     } finally {
@@ -336,146 +379,49 @@ function ResumeReviewContent() {
     }
   }
 
-  function handleApplyImproved() {
-    if (!improvedText) return;
-    const parsed = parseImprovedResume(improvedText);
-    if (parsed.summary) setSummaryOverride(parsed.summary);
-    if (parsed.experience) setExperienceOverride(parsed.experience);
-    if (parsed.skills) setSkillsOverride(parsed.skills);
-    if (parsed.education) setEducationOverride(parsed.education);
-    setImprovedText(null);
-  }
-
-  async function handleRescore() {
-    setRescoring(true);
-    setRescoreError(null);
-    try {
-      const resumeText = [summaryDisplay, experienceDisplay, skillsDisplay, educationDisplay]
-        .filter(Boolean)
-        .join("\n\n");
-      const res = await fetch("/api/resume/rescore", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ text: resumeText }),
-      });
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.detail || "Rescore failed");
-      // score is 1–10, scale to 0–100 for display
-      setRescoreScore(Math.round(data.score * 10));
-    } catch (e) {
-      setRescoreError(e instanceof Error ? e.message : "Rescore failed");
-    } finally {
-      setRescoring(false);
-    }
-  }
-
-  async function handleDownloadPdf() {
-    setDownloadingPdf(true);
-    try {
-      const { pdf, Document, Page, Text, View, StyleSheet } = await import("@react-pdf/renderer");
-
-      const styles = StyleSheet.create({
-        page: { padding: 56.7, fontFamily: "Helvetica" },
-        name: { fontSize: 18, marginBottom: 4 },
-        contact: { fontSize: 9, color: "#888888", marginBottom: 8 },
-        divider: { borderBottomWidth: 1, borderBottomColor: "#dddddd", borderBottomStyle: "solid", marginBottom: 12 },
-        sectionHeader: { fontSize: 11, fontWeight: "bold", marginBottom: 6, marginTop: 10 },
-        body: { fontSize: 10, lineHeight: 1.5, marginBottom: 4 },
-        bullet: { fontSize: 10, lineHeight: 1.5, marginBottom: 2 },
-      });
-
-      const candidateName = rawText
-        ? extractCandidateName(rawText, fileName ?? "")
-        : fileName?.split(" - ")[0] ?? "Resume";
-
-      const sections: React.ReactNode[] = [];
-
-      if (summaryDisplay) {
-        sections.push(
-          React.createElement(Text, { key: "summary-h", style: styles.sectionHeader }, "SUMMARY"),
-          React.createElement(Text, { key: "summary-b", style: styles.body }, summaryDisplay),
-        );
-      }
-
-      if (experienceDisplay) {
-        sections.push(
-          React.createElement(Text, { key: "exp-h", style: styles.sectionHeader }, "EXPERIENCE"),
-        );
-        experienceDisplay.split("\n").filter(Boolean).forEach((line, i) => {
-          sections.push(
-            React.createElement(Text, { key: `exp-${i}`, style: styles.bullet }, `• ${line}`),
-          );
-        });
-      }
-
-      if (skillsDisplay) {
-        sections.push(
-          React.createElement(Text, { key: "skills-h", style: styles.sectionHeader }, "SKILLS"),
-          React.createElement(Text, { key: "skills-b", style: styles.body }, skillsDisplay),
-        );
-      }
-
-      if (educationDisplay) {
-        sections.push(
-          React.createElement(Text, { key: "edu-h", style: styles.sectionHeader }, "EDUCATION"),
-          React.createElement(Text, { key: "edu-b", style: styles.body }, educationDisplay),
-        );
-      }
-
-      const doc = React.createElement(
-        Document,
-        null,
-        React.createElement(
-          Page,
-          { size: "A4", style: styles.page },
-          React.createElement(Text, { style: styles.name }, candidateName),
-          React.createElement(
-            Text,
-            { style: styles.contact },
-            [profile?.headline, "Singapore"].filter(Boolean).join(" • "),
-          ),
-          React.createElement(View, { style: styles.divider }),
-          ...sections,
-        ),
-      );
-
-      const blob = await pdf(doc).toBlob();
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      const slug = candidateName.replace(/[^a-zA-Z0-9]/g, "_").toLowerCase();
-      a.href = url;
-      a.download = `${slug}_vericlause_resume.pdf`;
-      a.click();
-      URL.revokeObjectURL(url);
-    } catch (e) {
-      console.error("PDF generation failed:", e);
-    } finally {
-      setDownloadingPdf(false);
-    }
+  function buildTemplateData(): ResumeTemplateData {
+    const name = rawText
+      ? extractCandidateName(rawText, fileName ?? "")
+      : fileName?.split(" - ")[0] ?? "Resume";
+
+    const experiences = (profile?.experiences ?? []).map((e) => ({
+      title: e.title ?? "",
+      company: e.company ?? "",
+      location: undefined,
+      startDate: e.start_date ?? "",
+      endDate: e.end_date ?? "",
+      description: experienceOverride !== null ? "" : (e.description ?? ""),
+    }));
+
+    // If the user edited experience text, put it as a single entry
+    const finalExperiences =
+      experienceOverride !== null
+        ? [{ title: "", company: "", startDate: "", endDate: "", description: experienceDisplay }]
+        : experiences;
+
+    const educations = (profile?.education ?? []).map((ed) => ({
+      institution: ed.institution ?? "",
+      qualification: ed.qualification ?? "",
+      fieldOfStudy: ed.field_of_study ?? undefined,
+      graduationYear: ed.graduation_year != null ? String(ed.graduation_year) : undefined,
+    }));
+
+    const skills = (profile?.skills ?? []).map((s) => ({ name: s, level: 50 }));
+
+    return {
+      name,
+      jobTitle: profile?.headline ?? undefined,
+      email: extractedEmail ?? undefined,
+      phone: extractedPhone ?? undefined,
+      location: extractedAddress ?? undefined,
+      summary: summaryDisplay || undefined,
+      experiences: finalExperiences,
+      educations,
+      skills,
+    };
   }
 
-  const baseScore = deriveIndicatorScore(suggestions);
-  const score = rescoreScore ?? baseScore;
-  const { toImprove, positiveHints } = splitSuggestions(suggestions);
-
-  const strengthsDisplay =
-    positiveHints.length > 0
-      ? positiveHints.map((s) => s.suggestion)
-      : profile?.skills?.length
-        ? profile.skills.slice(0, 6)
-        : [t("resume_review_strength_1"), t("resume_review_strength_2"), t("resume_review_strength_3")];
-
-  const improvementsDisplay =
-    toImprove.length > 0
-      ? toImprove.map((s) => s.suggestion)
-      : suggestions?.length
-        ? suggestions.slice(0, 5).map((s) => s.suggestion)
-        : [t("resume_review_improvement_1"), t("resume_review_improvement_2"), t("resume_review_improvement_3")];
-
-  const keywordChips = [
-    ...(profile?.skills ?? []),
-    ...(profile?.target_roles ?? []).slice(0, 4),
-  ].slice(0, 12);
+  // ── Derived values ──────────────────────────────────────────────────────────
 
   const summaryValue = profile?.summary ?? "";
   const experienceValue = profile ? formatExperiencesText(profile) : "";
@@ -487,6 +433,89 @@ function ResumeReviewContent() {
   const skillsDisplay = skillsOverride !== null ? skillsOverride : skillsValue;
   const educationDisplay = educationOverride !== null ? educationOverride : educationValue;
 
+  // Profile block contact fields extracted from raw text
+  const candidateName = rawText
+    ? extractCandidateName(rawText, fileName ?? "")
+    : fileName?.split(" - ")[0] ?? "";
+  const extractedEmail = rawText ? extractEmail(rawText) : null;
+  const extractedPhone = rawText ? extractPhone(rawText) : null;
+  const extractedAddress = profile?.location_preference ?? null;
+
+  // ── Left panel score (5-criterion rubric, /100, live) ───────────────────────
+
+  // C1: Impact & metrics — 4 pts per quantified achievement in experience, cap 20
+  const c1Impact = Math.min(20, countQuantifiedAchievements(experienceDisplay) * 4);
+
+  // C2: ATS keyword coverage — 2 pts per keyword from feedback found in resume, cap 20
+  const atsKwFound: string[] = Array.isArray(feedback?.atsAnalysis?.keywordsFound)
+    ? feedback!.atsAnalysis.keywordsFound
+    : [];
+  if (feedback && !Array.isArray(feedback?.atsAnalysis?.keywordsFound)) {
+    console.warn("[ResumeReview] feedback.atsAnalysis.keywordsFound missing/unexpected", feedback?.atsAnalysis);
+  }
+  const allResumeText = [summaryDisplay, experienceDisplay, skillsDisplay, educationDisplay].join(" ");
+  const c2Ats = Math.min(20, countKeywordsFound(allResumeText, atsKwFound) * 2);
+
+  // C3: Completeness — 5 pts per non-empty section, cap 20
+  const c3Complete =
+    [summaryDisplay, experienceDisplay, skillsDisplay, educationDisplay]
+      .filter((t) => t.trim().length > 0).length * 5;
+
+  // C4: Improvements resolved — 0 before Apply, 20 after
+  const c4Resolved = suggestionsApplied ? 20 : 0;
+
+  // C5: Language & structure — AI score /10 → /20
+  const aiRawScore = typeof feedback?.score === "number" ? feedback.score : null;
+  if (feedback && typeof feedback?.score !== "number") {
+    console.warn("[ResumeReview] feedback.score missing or not a number", feedback?.score);
+  }
+  const c5Language = aiRawScore !== null ? Math.min(20, Math.round(aiRawScore * 2)) : 0;
+
+  const score = Math.round(c1Impact + c2Ats + c3Complete + c4Resolved + c5Language);
+
+  const scoreLabel =
+    score >= 80 ? "Strong"
+    : score >= 60 ? "Needs improvement"
+    : "Weak";
+  const scoreLabelClass =
+    score >= 80 ? "bg-emerald-100 text-emerald-700"
+    : score >= 60 ? "bg-amber-100 text-amber-700"
+    : "bg-red-100 text-red-700";
+  const scoreBarClass =
+    score >= 80 ? "bg-emerald-500"
+    : score >= 60 ? "bg-amber-500"
+    : "bg-red-500";
+  const scoreCommentary =
+    score >= 80
+      ? "Your resume is well-structured and competitive for the Singapore market. Minor refinements can push it further."
+      : score >= 60
+      ? "There are actionable improvements that could meaningfully boost your chances. Review the suggestions below."
+      : "Several high-priority gaps were identified. Addressing them will significantly strengthen your application.";
+
+  // Left panel lists — wired directly to AI feedback fields
+  const strengthsList: string[] = Array.isArray(feedback?.keyStrengths) ? feedback!.keyStrengths : [];
+  if (feedback && !Array.isArray(feedback?.keyStrengths)) {
+    console.warn("[ResumeReview] feedback.keyStrengths missing/unexpected", feedback?.keyStrengths);
+  }
+  const improvementsList: string[] = Array.isArray(feedback?.areasToImprove) ? feedback!.areasToImprove : [];
+  if (feedback && !Array.isArray(feedback?.areasToImprove)) {
+    console.warn("[ResumeReview] feedback.areasToImprove missing/unexpected", feedback?.areasToImprove);
+  }
+  const keywordsMissing: string[] = Array.isArray(feedback?.atsAnalysis?.keywordsMissing)
+    ? feedback!.atsAnalysis.keywordsMissing
+    : [];
+  if (feedback && !Array.isArray(feedback?.atsAnalysis?.keywordsMissing)) {
+    console.warn("[ResumeReview] feedback.atsAnalysis.keywordsMissing missing/unexpected", feedback?.atsAnalysis);
+  }
+
+  // Per-section inline suggestions (keyword-matched from Supabase ai_suggestions)
+  const summarySuggestions = (suggestions ?? []).filter((s) => assignSuggestionSection(s) === "summary");
+  const experienceSuggestions = (suggestions ?? []).filter((s) => assignSuggestionSection(s) === "experience");
+  const skillsSuggestions = (suggestions ?? []).filter((s) => assignSuggestionSection(s) === "skills");
+  const educationSuggestions = (suggestions ?? []).filter((s) => assignSuggestionSection(s) === "education");
+
+  // ── Render ──────────────────────────────────────────────────────────────────
+
   return (
     <div className="min-h-screen bg-white">
       <SiteNavbar
@@ -500,24 +529,7 @@ function ResumeReviewContent() {
         }
       />
 
-      <main className="mx-auto max-w-7xl px-6 py-14 md:py-18">
-        <section className="mb-10">
-          <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-gold-600">
-            {t("resume_review_badge")}
-          </p>
-          <h1 className="font-serif text-4xl font-bold text-navy-950 md:text-5xl">
-            {t("resume_review_title")}
-          </h1>
-          <p className="mt-4 max-w-3xl text-lg leading-relaxed text-slate-600">
-            {t("resume_review_description")}
-          </p>
-          {fileName ? (
-            <p className="mt-3 text-sm text-slate-500">
-              File: <span className="font-medium text-slate-700">{fileName}</span>
-            </p>
-          ) : null}
-        </section>
-
+      <main className="mx-auto max-w-7xl px-6 py-14">
         {loading ? (
           <div className="flex justify-center py-20">
             <div className="h-10 w-10 animate-spin rounded-full border-2 border-slate-200 border-t-navy-950" />
@@ -549,207 +561,157 @@ function ResumeReviewContent() {
         ) : null}
 
         {!loading && profile ? (
-        <section
-          id="review"
-          className="grid gap-8 lg:grid-cols-[380px_minmax(0,1fr)]"
-        >
-          <aside className="space-y-6">
-            <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <p className="text-sm font-medium text-slate-500">
-                    {t("resume_review_score_label")}
+          <div className="flex items-start gap-6">
+
+            {/* LEFT PANEL */}
+            <aside className="w-1/3 shrink-0 space-y-4">
+
+              {/* Block 1 — Resume Score */}
+              <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-semibold uppercase tracking-wider text-slate-400">
+                    Resume Score
                   </p>
-                  <h2 className="mt-2 font-serif text-4xl font-bold text-navy-950">
-                    {score}
-                    <span className="ml-1 text-xl text-slate-400">/100</span>
-                  </h2>
+                  <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${scoreLabelClass}`}>
+                    {scoreLabel}
+                  </span>
                 </div>
-                <div className="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
-                  {t("resume_review_score_status")}
+                <div className="mt-2 flex items-end gap-1">
+                  <span className="text-5xl font-bold text-navy-950">{score}</span>
+                  <span className="mb-1 text-xl font-medium text-slate-400">/100</span>
                 </div>
+                <div className="mt-3 h-2 w-full overflow-hidden rounded-full bg-slate-100">
+                  <div
+                    className={`h-2 rounded-full transition-all ${scoreBarClass}`}
+                    style={{ width: `${score}%` }}
+                  />
+                </div>
+                <p className="mt-3 text-[11px] leading-relaxed text-slate-400">
+                  Indicative score from AI suggestion count/priority — not a hiring decision.
+                </p>
+                <p className="mt-2 text-xs leading-relaxed text-slate-600">{scoreCommentary}</p>
               </div>
 
-              <div className="mt-5 h-2 overflow-hidden rounded-full bg-slate-100">
-                <div
-                  className="h-full rounded-full bg-gold-500"
-                  style={{ width: `${score}%` }}
-                />
+              {/* Block 2 — Strengths */}
+              <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                <p className="mb-3 text-sm font-semibold text-navy-950">Strengths</p>
+                {strengthsList.length ? (
+                  <ul className="space-y-2">
+                    {strengthsList.map((s, i) => (
+                      <li key={i} className="flex gap-2 text-sm text-slate-700">
+                        <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100">
+                          <svg className="h-3 w-3 text-emerald-600" viewBox="0 0 20 20" fill="currentColor">
+                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                          </svg>
+                        </span>
+                        {s}
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p className="text-sm text-slate-400">No strengths identified yet.</p>
+                )}
               </div>
 
-              <p className="mt-4 text-xs leading-relaxed text-slate-500">
-                Indicative score from AI suggestion count/priority — not a hiring decision.
-              </p>
-              <p className="mt-2 text-sm leading-relaxed text-slate-600">
-                {t("resume_review_score_note")}
-              </p>
-
-              {rescoreError && (
-                <p className="mt-2 text-xs text-red-600">{rescoreError}</p>
-              )}
-
-              <button
-                type="button"
-                onClick={handleRescore}
-                disabled={rescoring}
-                className="mt-4 w-full rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-navy-200 hover:text-navy-950 disabled:opacity-50"
-              >
-                {rescoring ? "Rescoring…" : "Rescore Resume"}
-              </button>
-            </div>
-
-            <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-              <h3 className="font-serif text-xl font-bold text-navy-950">
-                {t("resume_review_strengths_title")}
-              </h3>
-              <ul className="mt-4 space-y-3">
-                {strengthsDisplay.map((item, index) => (
-                  <li key={index} className="flex items-start gap-3 text-sm text-slate-700">
-                    <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
-                      ✓
-                    </span>
-                    <span>{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-              <h3 className="font-serif text-xl font-bold text-navy-950">
-                {t("resume_review_improvements_title")}
-              </h3>
-              <ul className="mt-4 space-y-3">
-                {improvementsDisplay.map((item, index) => (
-                  <li key={index} className="flex items-start gap-3 text-sm text-slate-700">
-                    <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-700">
-                      !
-                    </span>
-                    <span>{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            <div className="rounded-2xl border border-slate-200 bg-slate-50 p-6">
-              <h3 className="font-serif text-xl font-bold text-navy-950">
-                {t("resume_review_keywords_title")}
-              </h3>
-              <p className="mt-2 text-sm leading-relaxed text-slate-600">
-                {t("resume_review_keywords_description")}
-              </p>
-              <div className="mt-4 flex flex-wrap gap-2">
-                {(keywordChips.length ? keywordChips : ["—"]).map((keyword) => (
-                  <span
-                    key={keyword}
-                    className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-700"
-                  >
-                    {keyword}
-                  </span>
-                ))}
+              {/* Block 3 — Suggested Improvements */}
+              <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                <p className="mb-3 text-sm font-semibold text-navy-950">Suggested improvements</p>
+                {improvementsList.length ? (
+                  <ul className="space-y-2">
+                    {improvementsList.map((s, i) => (
+                      <li key={i} className="flex gap-2 text-sm text-slate-700">
+                        <svg className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" viewBox="0 0 20 20" fill="currentColor">
+                          <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                        </svg>
+                        {s}
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p className="text-sm text-slate-400">No improvements flagged.</p>
+                )}
               </div>
-            </div>
-          </aside>
 
-          <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
-            <div className="flex flex-col gap-4 border-b border-slate-100 pb-6 md:flex-row md:items-start md:justify-between">
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-widest text-gold-600">
-                  {t("resume_review_editor_badge")}
-                </p>
-                <h2 className="mt-2 font-serif text-2xl font-bold text-navy-950">
-                  {profile.headline ?? t("resume_review_editor_title")}
-                </h2>
-                <p className="mt-2 max-w-2xl text-sm leading-relaxed text-slate-600">
-                  {t("resume_review_editor_description")}
+              {/* Block 4 — Missing or Weak Keywords */}
+              <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                <p className="mb-1 text-sm font-semibold text-navy-950">Missing or weak keywords</p>
+                <p className="mb-3 text-xs leading-relaxed text-slate-500">
+                  These keywords may help improve your resume&apos;s match with job listings.
                 </p>
+                {keywordsMissing.length ? (
+                  <div className="flex flex-wrap gap-1.5">
+                    {keywordsMissing.map((kw, i) => (
+                      <span
+                        key={i}
+                        className="rounded-full border border-slate-200 bg-white px-2.5 py-0.5 text-xs font-medium text-slate-700"
+                      >
+                        {kw}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-sm text-slate-400">No keyword gaps identified yet.</p>
+                )}
               </div>
 
-              <div className="flex flex-wrap gap-3">
-                <button
-                  type="button"
-                  disabled={profiling || !resumeId}
-                  onClick={handleRunAnalysis}
-                  className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-all hover:border-navy-200 hover:text-navy-950 disabled:opacity-50"
-                >
-                  {profiling ? "Re-analyzing…" : t("resume_review_apply_ai")}
-                </button>
-                <Link
-                  href="/resume"
-                  className="rounded-md bg-navy-950 px-4 py-2 text-sm font-semibold text-white transition-all hover:bg-navy-800"
-                >
-                  {t("resume_review_generate_new")}
-                </Link>
-              </div>
-            </div>
+            </aside>
 
-            {suggestions && suggestions.length > 0 ? (
-              <div className="mt-6 rounded-xl border border-slate-100 bg-slate-50 p-4">
-                <p className="text-xs font-semibold uppercase tracking-widest text-slate-500">
-                  Detailed AI suggestions
-                </p>
-                <ul className="mt-3 space-y-3">
-                  {suggestions.map((s, i) => (
-                    <li key={i} className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-700">
-                      <span className="font-medium text-navy-950">
-                        [{SUGGESTION_TYPE_LABEL[s.type] ?? s.type}] {s.priority}
-                      </span>
-                      : {s.suggestion}
-                      {s.suggested_rewrite ? (
-                        <p className="mt-2 text-xs text-slate-600">
-                          <span className="font-semibold">Suggestion:</span> {s.suggested_rewrite}
-                        </p>
-                      ) : null}
-                    </li>
-                  ))}
-                </ul>
-
-                <div className="mt-4 flex flex-wrap gap-3">
-                  <button
-                    type="button"
-                    onClick={handleGenerateImproved}
-                    disabled={improving}
-                    className="rounded-md bg-navy-950 px-4 py-2 text-sm font-semibold text-white transition hover:bg-navy-800 disabled:opacity-50"
-                  >
-                    {improving ? "Generating improved version…" : "Generate Improved Version"}
-                  </button>
-                  {improveError && (
-                    <p className="self-center text-xs text-red-600">{improveError}</p>
-                  )}
-                </div>
-              </div>
-            ) : null}
+            {/* RIGHT PANEL */}
+            <div className="w-2/3 space-y-8">
 
-            {improvedText ? (
-              <div className="mt-6 rounded-xl border border-emerald-200 bg-emerald-50 p-4">
-                <p className="text-xs font-semibold uppercase tracking-widest text-emerald-700">
-                  Improved Resume Preview
-                </p>
-                <pre className="mt-3 max-h-64 overflow-y-auto whitespace-pre-wrap break-words text-sm leading-6 text-slate-700">
-                  {improvedText}
-                </pre>
-                <div className="mt-4 flex flex-wrap gap-3">
-                  <button
-                    type="button"
-                    onClick={handleApplyImproved}
-                    className="rounded-md bg-emerald-700 px-4 py-2 text-sm font-semibold text-white transition hover:bg-emerald-800"
-                  >
-                    Update Resume with Improved Version
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setImprovedText(null)}
-                    className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
-                  >
-                    Dismiss
-                  </button>
+            {/* SECTION 1 — PAGE HEADER */}
+            <section>
+              <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-gold-600">
+                {t("resume_review_badge")}
+              </p>
+              <h1 className="font-serif text-4xl font-bold text-navy-950 md:text-5xl">
+                {profile.headline ?? t("resume_review_title")}
+              </h1>
+              <p className="mt-3 text-sm leading-relaxed text-slate-500">
+                Review your resume below. AI-suggested improvements appear in green under each section.
+              </p>
+            </section>
+
+            {/* SECTION 2 — PROFILE BLOCK */}
+            {(candidateName || extractedEmail || extractedPhone || extractedAddress) ? (
+              <section>
+                <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+                  {candidateName ? (
+                    <div>
+                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">Full Name</p>
+                      <p className="mt-1 text-sm font-medium text-navy-950">{candidateName}</p>
+                    </div>
+                  ) : null}
+                  {extractedEmail ? (
+                    <div>
+                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">Email</p>
+                      <p className="mt-1 text-sm font-medium text-navy-950">{extractedEmail}</p>
+                    </div>
+                  ) : null}
+                  {extractedPhone ? (
+                    <div>
+                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">Phone</p>
+                      <p className="mt-1 text-sm font-medium text-navy-950">{extractedPhone}</p>
+                    </div>
+                  ) : null}
+                  {extractedAddress ? (
+                    <div>
+                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">Address</p>
+                      <p className="mt-1 text-sm font-medium text-navy-950">{extractedAddress}</p>
+                    </div>
+                  ) : null}
                 </div>
-              </div>
+                <hr className="mt-6 border-slate-200" />
+              </section>
             ) : null}
 
-            <div className="mt-8 space-y-6">
+            {/* SECTION 3 — RESUME SECTIONS WITH INLINE AI SUGGESTIONS */}
+            <section className="space-y-8">
+
+              {/* Professional Summary */}
               <div>
                 <label className="mb-2 block text-sm font-semibold text-navy-950">
-                  {t("resume_review_summary")}
+                  Professional Summary
                 </label>
                 <textarea
                   rows={5}
@@ -758,11 +720,13 @@ function ResumeReviewContent() {
                   placeholder="No summary extracted yet."
                   className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white"
                 />
+                <SuggestionBox items={summarySuggestions} hidden={suggestionsApplied} />
               </div>
 
+              {/* Work Experience */}
               <div>
                 <label className="mb-2 block text-sm font-semibold text-navy-950">
-                  {t("resume_review_experience")}
+                  Work Experience
                 </label>
                 <textarea
                   rows={8}
@@ -771,11 +735,13 @@ function ResumeReviewContent() {
                   placeholder="No experience extracted yet."
                   className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white whitespace-pre-wrap"
                 />
+                <SuggestionBox items={experienceSuggestions} hidden={suggestionsApplied} />
               </div>
 
+              {/* Skills */}
               <div>
                 <label className="mb-2 block text-sm font-semibold text-navy-950">
-                  {t("resume_review_skills")}
+                  Skills
                 </label>
                 <textarea
                   rows={4}
@@ -784,11 +750,13 @@ function ResumeReviewContent() {
                   placeholder="No skills extracted yet."
                   className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white"
                 />
+                <SuggestionBox items={skillsSuggestions} hidden={suggestionsApplied} />
               </div>
 
+              {/* Education */}
               <div>
                 <label className="mb-2 block text-sm font-semibold text-navy-950">
-                  {t("resume_review_education")}
+                  Education
                 </label>
                 <textarea
                   rows={3}
@@ -797,31 +765,37 @@ function ResumeReviewContent() {
                   placeholder="No education extracted yet."
                   className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white whitespace-pre-wrap"
                 />
+                <SuggestionBox items={educationSuggestions} hidden={suggestionsApplied} />
               </div>
-            </div>
 
-            <div className="mt-8 flex flex-col gap-3 border-t border-slate-100 pt-6 md:flex-row md:items-center md:justify-between">
+            </section>
+
+            {/* Improve error */}
+            {improveError ? (
+              <p className="text-xs text-red-600">{improveError}</p>
+            ) : null}
+
+            {/* SECTION 4 — BOTTOM ACTION BAR */}
+            <div className="flex items-center justify-between border-t border-slate-100 pt-6">
+              <button
+                type="button"
+                onClick={() => void handleApplyAiSuggestions()}
+                disabled={improving}
+                className="rounded-md bg-navy-950 px-4 py-2 text-sm font-semibold text-white transition-all hover:bg-navy-800 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {improving ? "Applying…" : "Apply AI Suggestions"}
+              </button>
+
               <div className="flex flex-wrap gap-3">
                 <button
                   type="button"
-                  onClick={handleDownloadPdf}
-                  disabled={downloadingPdf}
-                  className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-navy-200 hover:text-navy-950 disabled:cursor-not-allowed disabled:opacity-50"
-                >
-                  {downloadingPdf ? "Generating PDF…" : t("resume_review_download_pdf")}
-                </button>
-                <button
-                  type="button"
-                  disabled
-                  className="cursor-not-allowed rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-400"
+                  onClick={() => setShowTemplatePicker(true)}
+                  className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-navy-200 hover:text-navy-950"
                 >
-                  {t("resume_review_download_docx")}
+                  Download Resume
                 </button>
-              </div>
-
-              <div className="flex flex-wrap gap-3">
                 <Link
-                  href="/resume"
+                  href={`/resume${resumeId ? `?resume_id=${encodeURIComponent(resumeId)}` : ""}`}
                   className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-all hover:border-navy-200 hover:text-navy-950"
                 >
                   {t("resume_review_back")}
@@ -834,8 +808,16 @@ function ResumeReviewContent() {
                 </Link>
               </div>
             </div>
-          </section>
-        </section>
+
+            </div>
+          </div>
+        ) : null}
+
+        {showTemplatePicker ? (
+          <TemplatePickerModal
+            data={buildTemplateData()}
+            onClose={() => setShowTemplatePicker(false)}
+          />
         ) : null}
 
         {!loading && !profile && !error ? (
diff --git a/components/resume/ResumeList.tsx b/components/resume/ResumeList.tsx
index a532e35..9c5150a 100644
--- a/components/resume/ResumeList.tsx
+++ b/components/resume/ResumeList.tsx
@@ -22,119 +22,191 @@ function deriveIndicatorScore(suggestions: ResumeSuggestion[] | null | undefined
 interface ResumeListProps {
   resumes: ResumeSummary[];
   onDeleted: (resumeId: string) => void;
-  /** Extra top margin (e.g. false when first block on page section). */
   className?: string;
 }
 
 export function ResumeList({ resumes, onDeleted, className = "mt-8" }: ResumeListProps) {
   const { t } = useLanguage();
   const router = useRouter();
-  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [confirmingBulkDelete, setConfirmingBulkDelete] = useState(false);
+  const [bulkDeleting, setBulkDeleting] = useState(false);
 
-  const handleDelete = async (e: React.MouseEvent, resumeId: string) => {
-    e.stopPropagation();
-    if (!confirm(t("dash_resume_delete_confirm"))) return;
-    setDeletingId(resumeId);
-    const ok = await deleteResumeById(resumeId);
-    if (ok) onDeleted(resumeId);
-    setDeletingId(null);
-  };
+  const allSelected = resumes.length > 0 && selected.size === resumes.length;
+
+  function toggleSelect(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function toggleSelectAll() {
+    if (allSelected) {
+      setSelected(new Set());
+    } else {
+      setSelected(new Set(resumes.map((r) => r.id)));
+    }
+  }
+
+  async function handleBulkDelete() {
+    setBulkDeleting(true);
+    const ids = Array.from(selected);
+    await Promise.all(ids.map((id) => deleteResumeById(id)));
+    ids.forEach((id) => onDeleted(id));
+    setSelected(new Set());
+    setConfirmingBulkDelete(false);
+    setBulkDeleting(false);
+  }
 
   return (
     <div className={className}>
-      <h3 className="mb-3 font-serif text-sm font-bold uppercase tracking-wider text-navy-900">
-        {t("resume_history_heading")}
-      </h3>
+      <div className="mb-3 flex items-center justify-between">
+        <h3 className="font-serif text-sm font-bold uppercase tracking-wider text-navy-900">
+          {t("resume_history_heading")}
+        </h3>
+        {resumes.length > 0 ? (
+          <button
+            type="button"
+            onClick={toggleSelectAll}
+            className="text-xs font-medium text-slate-500 hover:text-navy-950"
+          >
+            {allSelected ? "Deselect all" : "Select all"}
+          </button>
+        ) : null}
+      </div>
+
       {resumes.length === 0 ? (
         <p className="rounded-lg border border-slate-200 bg-slate-50/80 px-4 py-3 text-sm text-slate-600">
           <span className="block">{t("resume_history_empty")}</span>
           <span className="mt-1 block text-slate-500">{t("resume_history_empty_hint")}</span>
         </p>
       ) : null}
-      <div className="space-y-2">
+
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
         {resumes.map((resume) => {
           const date = new Date(resume.created_at).toLocaleDateString("en-SG", {
             day: "numeric",
             month: "short",
             year: "numeric",
           });
-          const isDeleting = deletingId === resume.id;
           const analyzed = resume.parsed_profile != null;
           const score = analyzed ? deriveIndicatorScore(resume.ai_suggestions ?? undefined) : null;
+          const isSelected = selected.has(resume.id);
 
           return (
-            <button
+            <div
               key={resume.id}
-              type="button"
-              onClick={() => router.push(`/resume/review?resume_id=${encodeURIComponent(resume.id)}`)}
-              disabled={isDeleting}
-              className="group w-full rounded-lg border border-slate-200 bg-white px-4 py-3 text-left shadow-sm transition-all hover:border-navy-300 hover:shadow-md disabled:opacity-50"
+              className={`relative rounded-lg border bg-white p-3 shadow-sm transition-all ${
+                isSelected ? "border-navy-950 ring-1 ring-navy-950" : "border-slate-200"
+              }`}
             >
-              <div className="flex items-center justify-between gap-3">
-                <div className="flex min-w-0 items-center gap-3">
-                  <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-navy-50">
-                    <svg viewBox="0 0 24 24" fill="none" className="h-4 w-4 text-navy-600" aria-hidden="true">
-                      <path
-                        d="M8 3.75h6.586a1 1 0 0 1 .707.293l3.664 3.664a1 1 0 0 1 .293.707V19.25A1.75 1.75 0 0 1 17.5 21h-9A1.75 1.75 0 0 1 6.75 19.25v-13.75A1.75 1.75 0 0 1 8.5 3.75Z"
-                        stroke="currentColor"
-                        strokeWidth="1.5"
-                      />
-                      <path
-                        d="M14.75 3.75v4.5h4.5"
-                        stroke="currentColor"
-                        strokeWidth="1.5"
-                        strokeLinecap="round"
-                      />
-                    </svg>
-                  </div>
-                  <div className="min-w-0">
-                    <p className="truncate text-sm font-medium text-navy-950">{resume.file_name}</p>
-                    <p className="text-[11px] text-slate-400">{date}</p>
-                  </div>
+              {/* Checkbox */}
+              <input
+                type="checkbox"
+                checked={isSelected}
+                onChange={() => toggleSelect(resume.id)}
+                onClick={(e) => e.stopPropagation()}
+                className="absolute left-2 top-2 h-4 w-4 cursor-pointer accent-navy-950"
+              />
+
+              {/* Card content — clickable area */}
+              <button
+                type="button"
+                onClick={() =>
+                  router.push(`/resume/review?resume_id=${encodeURIComponent(resume.id)}`)
+                }
+                className="mt-4 w-full text-left"
+              >
+                <div className="flex h-8 w-8 items-center justify-center rounded-md bg-navy-50">
+                  <svg viewBox="0 0 24 24" fill="none" className="h-4 w-4 text-navy-600" aria-hidden="true">
+                    <path
+                      d="M8 3.75h6.586a1 1 0 0 1 .707.293l3.664 3.664a1 1 0 0 1 .293.707V19.25A1.75 1.75 0 0 1 17.5 21h-9A1.75 1.75 0 0 1 6.75 19.25v-13.75A1.75 1.75 0 0 1 8.5 3.75Z"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                    />
+                    <path
+                      d="M14.75 3.75v4.5h4.5"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                    />
+                  </svg>
                 </div>
-                <div className="flex flex-shrink-0 items-center gap-2">
-                  {analyzed && score != null && (
+                <p className="mt-2 truncate text-xs font-medium text-navy-950">{resume.file_name}</p>
+                <p className="mt-0.5 text-[11px] text-slate-400">{date}</p>
+                <div className="mt-2">
+                  {analyzed && score != null ? (
                     <span
                       className={`rounded-full px-2 py-0.5 text-[10px] font-bold ${
                         score >= 80
                           ? "border border-emerald-100 bg-emerald-50 text-emerald-700"
                           : score >= 55
-                            ? "border border-amber-100 bg-amber-50 text-amber-700"
-                            : "border border-red-100 bg-red-50 text-red-700"
+                          ? "border border-amber-100 bg-amber-50 text-amber-700"
+                          : "border border-red-100 bg-red-50 text-red-700"
                       }`}
                     >
                       {score}%
                     </span>
-                  )}
-                  {!analyzed && (
+                  ) : (
                     <span className="rounded-full border border-slate-200 bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-500">
                       {t("dash_resume_not_analyzed")}
                     </span>
                   )}
-                  <button
-                    onClick={(e) => handleDelete(e, resume.id)}
-                    disabled={isDeleting}
-                    className="rounded p-1 text-slate-400 opacity-0 transition-opacity hover:bg-red-50 hover:text-red-500 group-hover:opacity-100"
-                    title={t("dash_resume_delete_title")}
-                  >
-                    {isDeleting ? (
-                      <div className="h-3.5 w-3.5 animate-spin rounded-full border border-slate-300 border-t-slate-500" />
-                    ) : (
-                      <svg viewBox="0 0 20 20" fill="currentColor" className="h-3.5 w-3.5" aria-hidden="true">
-                        <path
-                          fillRule="evenodd"
-                          d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    )}
-                  </button>
                 </div>
-              </div>
-            </button>
+              </button>
+            </div>
           );
         })}
       </div>
+
+      {/* Bulk delete action bar */}
+      {selected.size > 0 ? (
+        <div className="mt-3 flex items-center justify-between rounded-lg border border-slate-200 bg-white px-4 py-2.5 shadow-sm">
+          <span className="text-sm text-slate-600">
+            <span className="font-semibold text-navy-950">{selected.size}</span> selected
+          </span>
+
+          {confirmingBulkDelete ? (
+            <div className="flex items-center gap-3">
+              <span className="text-xs text-slate-500">Are you sure? This cannot be undone.</span>
+              <button
+                type="button"
+                onClick={() => setConfirmingBulkDelete(false)}
+                disabled={bulkDeleting}
+                className="text-xs font-medium text-slate-500 hover:text-slate-700 disabled:opacity-60"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleBulkDelete()}
+                disabled={bulkDeleting}
+                className="rounded-md bg-red-600 px-3 py-1 text-xs font-semibold text-white hover:bg-red-700 disabled:opacity-60"
+              >
+                {bulkDeleting ? "Deleting…" : "Confirm"}
+              </button>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setConfirmingBulkDelete(true)}
+              className="flex items-center gap-1.5 text-sm font-medium text-red-600 hover:text-red-700"
+            >
+              <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4" aria-hidden="true">
+                <path
+                  fillRule="evenodd"
+                  d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              Delete selected
+            </button>
+          )}
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/components/resume/TemplatePickerModal.tsx b/components/resume/TemplatePickerModal.tsx
new file mode 100644
index 0000000..ac8fd81
--- /dev/null
+++ b/components/resume/TemplatePickerModal.tsx
@@ -0,0 +1,509 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { TEMPLATES, type TemplateId, type ResumeTemplateData } from "@/lib/resume-templates/types";
+import { recommendTemplate } from "@/lib/resume-templates/recommend";
+import { downloadResume } from "@/lib/resume-templates/download";
+
+const STORAGE_KEY = "vericlause.lastTemplate";
+
+// Colour palette shared across all SVG previews
+const C = {
+  dark: "#1e293b",
+  med: "#94a3b8",
+  light: "#e2e8f0",
+  navy: "#1e3a5f",
+  gold: "#c9a84c",
+  white: "#ffffff",
+} as const;
+
+function MunichPreview() {
+  // Two-Column Classic: narrow left sidebar, wider right main
+  return (
+    <svg width="140" height="200" viewBox="0 0 140 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {/* Left column bg */}
+      <rect x="0" y="0" width="50" height="200" fill="#f8fafc" />
+      {/* Right column bg */}
+      <rect x="50" y="0" width="90" height="200" fill={C.white} />
+      {/* Vertical divider */}
+      <line x1="50" y1="0" x2="50" y2="200" stroke={C.light} strokeWidth="1" />
+
+      {/* Left — name/photo area placeholder */}
+      <rect x="10" y="12" width="30" height="30" rx="15" fill={C.light} />
+
+      {/* Left — CONTACT label */}
+      <rect x="6" y="50" width="28" height="3" rx="1" fill={C.dark} />
+      <rect x="6" y="57" width="36" height="2" rx="1" fill={C.med} />
+      <rect x="6" y="62" width="32" height="2" rx="1" fill={C.light} />
+      <rect x="6" y="67" width="30" height="2" rx="1" fill={C.light} />
+
+      {/* Left — SKILLS label */}
+      <rect x="6" y="78" width="22" height="3" rx="1" fill={C.dark} />
+      <rect x="6" y="85" width="38" height="2" rx="1" fill={C.med} />
+      <rect x="6" y="90" width="34" height="2" rx="1" fill={C.light} />
+      <rect x="6" y="95" width="30" height="2" rx="1" fill={C.light} />
+      <rect x="6" y="100" width="36" height="2" rx="1" fill={C.light} />
+
+      {/* Left — LANGUAGES label */}
+      <rect x="6" y="111" width="34" height="3" rx="1" fill={C.dark} />
+      <rect x="6" y="118" width="36" height="2" rx="1" fill={C.med} />
+      <rect x="6" y="123" width="28" height="2" rx="1" fill={C.light} />
+
+      {/* Right — Name */}
+      <rect x="60" y="12" width="60" height="7" rx="1.5" fill={C.dark} />
+      {/* Right — Job title */}
+      <rect x="60" y="23" width="44" height="4" rx="1" fill={C.med} />
+      {/* Right — divider */}
+      <line x1="60" y1="32" x2="130" y2="32" stroke={C.light} strokeWidth="1" />
+
+      {/* Right — SUMMARY label */}
+      <rect x="60" y="38" width="32" height="3" rx="1" fill={C.dark} />
+      <rect x="60" y="45" width="68" height="2" rx="1" fill={C.med} />
+      <rect x="60" y="50" width="64" height="2" rx="1" fill={C.light} />
+      <rect x="60" y="55" width="52" height="2" rx="1" fill={C.light} />
+
+      {/* Right — EXPERIENCE label */}
+      <rect x="60" y="65" width="48" height="3" rx="1" fill={C.dark} />
+      {/* Entry 1 */}
+      <rect x="60" y="72" width="56" height="4" rx="1" fill={C.dark} />
+      <rect x="60" y="79" width="40" height="2" rx="1" fill={C.med} />
+      <rect x="60" y="84" width="68" height="2" rx="1" fill={C.light} />
+      <rect x="60" y="89" width="62" height="2" rx="1" fill={C.light} />
+      <rect x="60" y="94" width="55" height="2" rx="1" fill={C.light} />
+      {/* Entry 2 */}
+      <rect x="60" y="103" width="52" height="4" rx="1" fill={C.dark} />
+      <rect x="60" y="110" width="36" height="2" rx="1" fill={C.med} />
+      <rect x="60" y="115" width="68" height="2" rx="1" fill={C.light} />
+      <rect x="60" y="120" width="60" height="2" rx="1" fill={C.light} />
+      <rect x="60" y="125" width="50" height="2" rx="1" fill={C.light} />
+      {/* Entry 3 */}
+      <rect x="60" y="134" width="48" height="4" rx="1" fill={C.dark} />
+      <rect x="60" y="141" width="34" height="2" rx="1" fill={C.med} />
+      <rect x="60" y="146" width="68" height="2" rx="1" fill={C.light} />
+      <rect x="60" y="151" width="56" height="2" rx="1" fill={C.light} />
+    </svg>
+  );
+}
+
+function TraditionalPreview() {
+  // Single Column with Photo: name+photo header, thick divider, label/value rows
+  return (
+    <svg width="140" height="200" viewBox="0 0 140 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="140" height="200" fill={C.white} />
+
+      {/* Header: name left, photo right */}
+      <rect x="8" y="10" width="72" height="8" rx="1.5" fill={C.dark} />
+      <rect x="8" y="22" width="50" height="3" rx="1" fill={C.med} />
+      <rect x="8" y="28" width="60" height="2" rx="1" fill={C.light} />
+      <rect x="8" y="33" width="54" height="2" rx="1" fill={C.light} />
+      {/* Photo box */}
+      <rect x="100" y="8" width="32" height="38" rx="2" fill={C.light} stroke={C.med} strokeWidth="1" />
+      <rect x="108" y="16" width="16" height="16" rx="8" fill={C.med} />
+
+      {/* Thick divider */}
+      <rect x="8" y="52" width="124" height="4" rx="1" fill={C.dark} />
+
+      {/* PERSONAL DATA label */}
+      <rect x="8" y="62" width="48" height="3" rx="1" fill={C.dark} />
+      <line x1="8" y1="67" x2="132" y2="67" stroke={C.light} strokeWidth="0.75" />
+      {/* Label/value rows */}
+      <rect x="8" y="71" width="28" height="2" rx="1" fill={C.dark} />
+      <rect x="48" y="71" width="56" height="2" rx="1" fill={C.med} />
+      <rect x="8" y="77" width="22" height="2" rx="1" fill={C.dark} />
+      <rect x="48" y="77" width="64" height="2" rx="1" fill={C.med} />
+      <rect x="8" y="83" width="26" height="2" rx="1" fill={C.dark} />
+      <rect x="48" y="83" width="52" height="2" rx="1" fill={C.med} />
+
+      {/* SKILLS label */}
+      <rect x="8" y="94" width="28" height="3" rx="1" fill={C.dark} />
+      <line x1="8" y1="99" x2="132" y2="99" stroke={C.light} strokeWidth="0.75" />
+      <rect x="8" y="103" width="116" height="2" rx="1" fill={C.med} />
+      <rect x="8" y="108" width="90" height="2" rx="1" fill={C.light} />
+
+      {/* EDUCATION label */}
+      <rect x="8" y="118" width="36" height="3" rx="1" fill={C.dark} />
+      <line x1="8" y1="123" x2="132" y2="123" stroke={C.light} strokeWidth="0.75" />
+      {/* TERTIARY row */}
+      <rect x="8" y="127" width="24" height="2" rx="1" fill={C.dark} />
+      <rect x="44" y="127" width="60" height="2" rx="1" fill={C.med} />
+      <rect x="44" y="132" width="48" height="2" rx="1" fill={C.light} />
+      <rect x="44" y="137" width="36" height="2" rx="1" fill={C.light} />
+
+      {/* WORK EXPERIENCE label */}
+      <rect x="8" y="148" width="56" height="3" rx="1" fill={C.dark} />
+      <line x1="8" y1="153" x2="132" y2="153" stroke={C.light} strokeWidth="0.75" />
+      <rect x="8" y="157" width="72" height="3" rx="1" fill={C.dark} />
+      <rect x="8" y="163" width="44" height="2" rx="1" fill={C.med} />
+      <rect x="8" y="168" width="116" height="2" rx="1" fill={C.light} />
+      <rect x="8" y="173" width="100" height="2" rx="1" fill={C.light} />
+      <rect x="8" y="178" width="80" height="2" rx="1" fill={C.light} />
+    </svg>
+  );
+}
+
+function ExecutivePreview() {
+  // Single Column Dense: centered name, centered title, summary, skills grid, double-rule sections
+  return (
+    <svg width="140" height="200" viewBox="0 0 140 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="140" height="200" fill={C.white} />
+
+      {/* Centered name */}
+      <rect x="30" y="10" width="80" height="8" rx="1.5" fill={C.dark} />
+      {/* Centered contact bar */}
+      <rect x="22" y="22" width="96" height="3" rx="1" fill={C.med} />
+      {/* Centered job title */}
+      <rect x="38" y="29" width="64" height="4" rx="1" fill={C.dark} />
+
+      {/* Double rule */}
+      <line x1="8" y1="39" x2="132" y2="39" stroke={C.dark} strokeWidth="1.5" />
+      <line x1="8" y1="42" x2="132" y2="42" stroke={C.dark} strokeWidth="0.5" />
+
+      {/* Summary paragraph */}
+      <rect x="8" y="48" width="124" height="2" rx="1" fill={C.med} />
+      <rect x="8" y="53" width="118" height="2" rx="1" fill={C.light} />
+      <rect x="8" y="58" width="104" height="2" rx="1" fill={C.light} />
+
+      {/* Skills — 3-col grid */}
+      <rect x="8" y="68" width="36" height="2" rx="1" fill={C.med} />
+      <rect x="52" y="68" width="36" height="2" rx="1" fill={C.med} />
+      <rect x="96" y="68" width="36" height="2" rx="1" fill={C.med} />
+      <rect x="8" y="73" width="32" height="2" rx="1" fill={C.light} />
+      <rect x="52" y="73" width="30" height="2" rx="1" fill={C.light} />
+      <rect x="96" y="73" width="34" height="2" rx="1" fill={C.light} />
+
+      {/* PROFESSIONAL EXPERIENCE section */}
+      <line x1="8" y1="83" x2="132" y2="83" stroke={C.dark} strokeWidth="1" />
+      <rect x="8" y="86" width="72" height="3" rx="1" fill={C.dark} />
+      <line x1="8" y1="91" x2="132" y2="91" stroke={C.dark} strokeWidth="0.5" />
+
+      {/* Entry 1 */}
+      <rect x="8" y="96" width="80" height="3" rx="1" fill={C.dark} />
+      <rect x="8" y="102" width="56" height="2" rx="1" fill={C.med} />
+      <rect x="8" y="107" width="124" height="2" rx="1" fill={C.light} />
+      <rect x="8" y="112" width="116" height="2" rx="1" fill={C.light} />
+      <rect x="8" y="117" width="100" height="2" rx="1" fill={C.light} />
+
+      {/* Entry 2 */}
+      <rect x="8" y="126" width="76" height="3" rx="1" fill={C.dark} />
+      <rect x="8" y="132" width="52" height="2" rx="1" fill={C.med} />
+      <rect x="8" y="137" width="124" height="2" rx="1" fill={C.light} />
+      <rect x="8" y="142" width="110" height="2" rx="1" fill={C.light} />
+      <rect x="8" y="147" width="96" height="2" rx="1" fill={C.light} />
+
+      {/* Entry 3 */}
+      <rect x="8" y="156" width="70" height="3" rx="1" fill={C.dark} />
+      <rect x="8" y="162" width="48" height="2" rx="1" fill={C.med} />
+      <rect x="8" y="167" width="124" height="2" rx="1" fill={C.light} />
+      <rect x="8" y="172" width="108" height="2" rx="1" fill={C.light} />
+    </svg>
+  );
+}
+
+function ModernMinimalPreview() {
+  // Left-Label Layout: bold name, divider, rows with narrow label col + wide content col
+  return (
+    <svg width="140" height="200" viewBox="0 0 140 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="140" height="200" fill={C.white} />
+
+      {/* Bold name */}
+      <rect x="8" y="10" width="88" height="10" rx="1.5" fill={C.dark} />
+      {/* Address */}
+      <rect x="8" y="24" width="60" height="2.5" rx="1" fill={C.med} />
+      {/* Contact row */}
+      <rect x="8" y="30" width="44" height="2.5" rx="1" fill={C.light} />
+      <rect x="58" y="30" width="50" height="2.5" rx="1" fill={C.light} />
+
+      {/* Full-width divider */}
+      <line x1="8" y1="38" x2="132" y2="38" stroke={C.med} strokeWidth="0.75" />
+
+      {/* Row 1 — EXPERIENCE */}
+      {/* Label col (25%) */}
+      <rect x="8" y="46" width="22" height="3" rx="1" fill={C.dark} />
+      {/* Content col */}
+      <rect x="40" y="44" width="60" height="3.5" rx="1" fill={C.dark} />
+      <rect x="40" y="51" width="44" height="2" rx="1" fill={C.med} />
+      <rect x="40" y="56" width="88" height="2" rx="1" fill={C.light} />
+      <rect x="40" y="61" width="80" height="2" rx="1" fill={C.light} />
+      <rect x="40" y="66" width="72" height="2" rx="1" fill={C.light} />
+      {/* — second job */}
+      <rect x="40" y="74" width="56" height="3.5" rx="1" fill={C.dark} />
+      <rect x="40" y="81" width="40" height="2" rx="1" fill={C.med} />
+      <rect x="40" y="86" width="88" height="2" rx="1" fill={C.light} />
+      <rect x="40" y="91" width="76" height="2" rx="1" fill={C.light} />
+
+      {/* Row 2 — PROFILE */}
+      <line x1="8" y1="100" x2="132" y2="100" stroke={C.light} strokeWidth="0.5" />
+      <rect x="8" y="107" width="20" height="3" rx="1" fill={C.dark} />
+      <rect x="40" y="105" width="88" height="2" rx="1" fill={C.med} />
+      <rect x="40" y="110" width="84" height="2" rx="1" fill={C.light} />
+      <rect x="40" y="115" width="76" height="2" rx="1" fill={C.light} />
+
+      {/* Row 3 — EDUCATION */}
+      <line x1="8" y1="124" x2="132" y2="124" stroke={C.light} strokeWidth="0.5" />
+      <rect x="8" y="131" width="24" height="3" rx="1" fill={C.dark} />
+      <rect x="40" y="129" width="68" height="3.5" rx="1" fill={C.dark} />
+      <rect x="40" y="136" width="52" height="2" rx="1" fill={C.med} />
+      <rect x="40" y="141" width="44" height="2" rx="1" fill={C.light} />
+
+      {/* Row 4 — SKILLS */}
+      <line x1="8" y1="150" x2="132" y2="150" stroke={C.light} strokeWidth="0.5" />
+      <rect x="8" y="157" width="18" height="3" rx="1" fill={C.dark} />
+      <rect x="40" y="155" width="56" height="2" rx="1" fill={C.med} />
+      <rect x="40" y="160" width="48" height="2" rx="1" fill={C.light} />
+      <rect x="40" y="165" width="52" height="2" rx="1" fill={C.light} />
+      <rect x="40" y="170" width="44" height="2" rx="1" fill={C.light} />
+    </svg>
+  );
+}
+
+function NavyExecutivePreview() {
+  // Dark Header + Two-Column body
+  return (
+    <svg width="140" height="200" viewBox="0 0 140 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {/* Navy header */}
+      <rect width="140" height="52" fill={C.navy} />
+      {/* Gold name bar */}
+      <rect x="28" y="16" width="84" height="8" rx="1.5" fill={C.gold} />
+      {/* Light subtitle */}
+      <rect x="44" y="28" width="52" height="3" rx="1" fill="#8ba3c0" />
+      {/* Thin gold accent line */}
+      <line x1="28" y1="38" x2="112" y2="38" stroke={C.gold} strokeWidth="0.75" />
+
+      {/* Body bg */}
+      <rect y="52" width="140" height="148" fill={C.white} />
+
+      {/* Left column bg (35%) */}
+      <rect y="52" width="50" height="148" fill="#f5f7fa" />
+
+      {/* Vertical divider */}
+      <line x1="50" y1="52" x2="50" y2="200" stroke="#dde3eb" strokeWidth="0.75" />
+
+      {/* Left — CONTACT label */}
+      <rect x="6" y="60" width="28" height="2.5" rx="1" fill={C.navy} />
+      <rect x="6" y="66" width="36" height="2" rx="1" fill={C.med} />
+      <rect x="6" y="71" width="32" height="2" rx="1" fill={C.light} />
+      <rect x="6" y="76" width="30" height="2" rx="1" fill={C.light} />
+
+      {/* Left — EDUCATION label */}
+      <rect x="6" y="86" width="34" height="2.5" rx="1" fill={C.navy} />
+      <rect x="6" y="92" width="38" height="2.5" rx="1" fill={C.dark} />
+      <rect x="6" y="98" width="30" height="2" rx="1" fill={C.med} />
+      <rect x="6" y="103" width="36" height="2" rx="1" fill={C.light} />
+      <rect x="6" y="108" width="24" height="2" rx="1" fill={C.light} />
+
+      {/* Left — SKILLS label */}
+      <rect x="6" y="118" width="22" height="2.5" rx="1" fill={C.navy} />
+      <rect x="6" y="124" width="38" height="2" rx="1" fill={C.med} />
+      <rect x="6" y="129" width="34" height="2" rx="1" fill={C.light} />
+      <rect x="6" y="134" width="30" height="2" rx="1" fill={C.light} />
+      <rect x="6" y="139" width="36" height="2" rx="1" fill={C.light} />
+
+      {/* Right — PROFILE label */}
+      <rect x="58" y="60" width="28" height="2.5" rx="1" fill={C.navy} />
+      <line x1="58" y1="65" x2="132" y2="65" stroke="#dde3eb" strokeWidth="0.5" />
+      <rect x="58" y="69" width="70" height="2" rx="1" fill={C.med} />
+      <rect x="58" y="74" width="66" height="2" rx="1" fill={C.light} />
+      <rect x="58" y="79" width="58" height="2" rx="1" fill={C.light} />
+
+      {/* Right — EXPERIENCE label */}
+      <rect x="58" y="89" width="44" height="2.5" rx="1" fill={C.navy} />
+      <line x1="58" y1="94" x2="132" y2="94" stroke="#dde3eb" strokeWidth="0.5" />
+      {/* Entry 1 */}
+      <rect x="58" y="98" width="50" height="2" rx="1" fill={C.med} />
+      <rect x="58" y="103" width="62" height="3" rx="1" fill={C.dark} />
+      <rect x="58" y="109" width="70" height="2" rx="1" fill={C.light} />
+      <rect x="58" y="114" width="64" height="2" rx="1" fill={C.light} />
+      <rect x="58" y="119" width="56" height="2" rx="1" fill={C.light} />
+      {/* Entry 2 */}
+      <rect x="58" y="128" width="46" height="2" rx="1" fill={C.med} />
+      <rect x="58" y="133" width="58" height="3" rx="1" fill={C.dark} />
+      <rect x="58" y="139" width="70" height="2" rx="1" fill={C.light} />
+      <rect x="58" y="144" width="60" height="2" rx="1" fill={C.light} />
+      <rect x="58" y="149" width="52" height="2" rx="1" fill={C.light} />
+    </svg>
+  );
+}
+
+const PREVIEW_MAP: Record<TemplateId, React.FC> = {
+  munich: MunichPreview,
+  traditional: TraditionalPreview,
+  executive: ExecutivePreview,
+  "modern-minimal": ModernMinimalPreview,
+  "navy-executive": NavyExecutivePreview,
+};
+
+function TemplateCard({ id, isSelected, isRecommended, onClick }: {
+  id: TemplateId;
+  isSelected: boolean;
+  isRecommended: boolean;
+  onClick: () => void;
+}) {
+  const Preview = PREVIEW_MAP[id];
+  const tpl = TEMPLATES.find((t) => t.id === id)!;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex flex-col items-center gap-2 focus:outline-none"
+    >
+      <div
+        className={`relative overflow-hidden rounded-lg border-2 bg-white transition-all ${
+          isSelected
+            ? "border-slate-800 ring-2 ring-slate-800 ring-offset-1"
+            : isRecommended
+            ? "border-red-500 ring-2 ring-red-500 ring-offset-1"
+            : "border-slate-200 hover:border-slate-400"
+        }`}
+        style={{ width: 140, height: 196 }}
+      >
+        <Preview />
+        {isRecommended && (
+          <span className="absolute right-1.5 top-1.5 rounded-full bg-red-500 px-1.5 py-0.5 text-[8px] font-bold leading-none text-white shadow">
+            AI
+          </span>
+        )}
+        {isSelected && (
+          <div className="absolute inset-0 bg-slate-900/5" />
+        )}
+      </div>
+      <span
+        className={`text-center text-xs leading-tight ${
+          isSelected ? "font-semibold text-slate-900" : "text-slate-500"
+        }`}
+      >
+        {tpl.name}
+      </span>
+    </button>
+  );
+}
+
+interface TemplatePickerModalProps {
+  data: ResumeTemplateData;
+  onClose: () => void;
+}
+
+export function TemplatePickerModal({ data, onClose }: TemplatePickerModalProps) {
+  const recommended = recommendTemplate(data);
+
+  const [selected, setSelected] = useState<TemplateId>(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(STORAGE_KEY) as TemplateId | null;
+      if (stored && TEMPLATES.some((t) => t.id === stored)) return stored;
+    }
+    return recommended;
+  });
+
+  const [format, setFormat] = useState<"pdf" | "docx">("pdf");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  async function handleDownload() {
+    setLoading(true);
+    try {
+      localStorage.setItem(STORAGE_KEY, selected);
+      await downloadResume(data, selected, format);
+    } finally {
+      setLoading(false);
+      onClose();
+    }
+  }
+
+  const selectedTemplate = TEMPLATES.find((t) => t.id === selected)!;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div className="w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-xl bg-white p-6 shadow-2xl">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-slate-900">Choose a Template</h2>
+          <button
+            onClick={onClose}
+            className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600"
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* AI recommendation notice */}
+        <div className="mb-5 flex items-center gap-2 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">
+          <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+          </svg>
+          AI recommends <strong className="ml-0.5">{TEMPLATES.find((t) => t.id === recommended)?.name}</strong> for your resume
+        </div>
+
+        {/* Template grid — 5 cols desktop, 3 cols smaller */}
+        <div className="grid grid-cols-3 gap-4 sm:grid-cols-5 mb-5">
+          {TEMPLATES.map((tpl) => (
+            <TemplateCard
+              key={tpl.id}
+              id={tpl.id}
+              isSelected={selected === tpl.id}
+              isRecommended={tpl.id === recommended}
+              onClick={() => setSelected(tpl.id)}
+            />
+          ))}
+        </div>
+
+        {/* Selected template description */}
+        <div className="mb-4 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
+          <p className="text-xs font-medium text-slate-700">{selectedTemplate.description}</p>
+          <p className="mt-0.5 text-xs text-slate-500">Best for: {selectedTemplate.bestFor}</p>
+        </div>
+
+        {/* Format toggle */}
+        <div className="mb-5 flex gap-2">
+          <button
+            onClick={() => setFormat("pdf")}
+            className={`flex-1 rounded-lg border py-2 text-sm font-medium transition-colors ${
+              format === "pdf"
+                ? "border-slate-900 bg-slate-900 text-white"
+                : "border-slate-200 bg-white text-slate-600 hover:bg-slate-50"
+            }`}
+          >
+            PDF
+          </button>
+          <button
+            onClick={() => setFormat("docx")}
+            className={`flex-1 rounded-lg border py-2 text-sm font-medium transition-colors ${
+              format === "docx"
+                ? "border-slate-900 bg-slate-900 text-white"
+                : "border-slate-200 bg-white text-slate-600 hover:bg-slate-50"
+            }`}
+          >
+            Word (.docx)
+          </button>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex gap-3">
+          <button
+            onClick={onClose}
+            className="flex-1 rounded-lg border border-slate-200 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleDownload}
+            disabled={loading}
+            className="flex-1 rounded-lg bg-slate-900 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60"
+          >
+            {loading ? "Generating…" : `Download ${format.toUpperCase()}`}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/lib/resume-templates/download.ts b/lib/resume-templates/download.ts
new file mode 100644
index 0000000..3501aa0
--- /dev/null
+++ b/lib/resume-templates/download.ts
@@ -0,0 +1,91 @@
+import type { ResumeTemplateData, TemplateId } from "./types";
+
+function triggerDownload(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export async function downloadResume(
+  data: ResumeTemplateData,
+  templateId: TemplateId,
+  format: "pdf" | "docx",
+): Promise<void> {
+  const safeName = (data.name || "resume").replace(/\s+/g, "_").toLowerCase();
+  const filename = `${safeName}_${templateId}.${format}`;
+
+  if (format === "pdf") {
+    const { pdf } = await import("@react-pdf/renderer");
+
+    let Component: React.ComponentType<{ data: ResumeTemplateData }>;
+    switch (templateId) {
+      case "munich": {
+        const m = await import("./munich-pdf");
+        Component = m.MunichPdf;
+        break;
+      }
+      case "traditional": {
+        const m = await import("./traditional-pdf");
+        Component = m.TraditionalPdf;
+        break;
+      }
+      case "executive": {
+        const m = await import("./executive-pdf");
+        Component = m.ExecutivePdf;
+        break;
+      }
+      case "navy-executive": {
+        const m = await import("./navy-executive-pdf");
+        Component = m.NavyExecutivePdf;
+        break;
+      }
+      case "modern-minimal":
+      default: {
+        const m = await import("./modern-minimal-pdf");
+        Component = m.ModernMinimalPdf;
+        break;
+      }
+    }
+
+    const React = await import("react");
+    const blob = await pdf(React.createElement(Component, { data })).toBlob();
+    triggerDownload(blob, filename);
+    return;
+  }
+
+  // DOCX
+  let blob: Blob;
+  switch (templateId) {
+    case "munich": {
+      const { generateMunichDocx } = await import("./munich-docx");
+      blob = await generateMunichDocx(data);
+      break;
+    }
+    case "traditional": {
+      const { generateTraditionalDocx } = await import("./traditional-docx");
+      blob = await generateTraditionalDocx(data);
+      break;
+    }
+    case "executive": {
+      const { generateExecutiveDocx } = await import("./executive-docx");
+      blob = await generateExecutiveDocx(data);
+      break;
+    }
+    case "navy-executive": {
+      const { generateNavyExecutiveDocx } = await import("./navy-executive-docx");
+      blob = await generateNavyExecutiveDocx(data);
+      break;
+    }
+    case "modern-minimal":
+    default: {
+      const { generateModernMinimalDocx } = await import("./modern-minimal-docx");
+      blob = await generateModernMinimalDocx(data);
+      break;
+    }
+  }
+
+  triggerDownload(blob, filename);
+}
diff --git a/lib/resume-templates/executive-docx.ts b/lib/resume-templates/executive-docx.ts
new file mode 100644
index 0000000..ce07000
--- /dev/null
+++ b/lib/resume-templates/executive-docx.ts
@@ -0,0 +1,235 @@
+import {
+  Document,
+  Paragraph,
+  TextRun,
+  Table,
+  TableRow,
+  TableCell,
+  Packer,
+  AlignmentType,
+  WidthType,
+  BorderStyle,
+} from "docx";
+import type { ResumeTemplateData } from "./types";
+
+function noBorders() {
+  const none = { style: BorderStyle.NONE, size: 0, color: "FFFFFF" } as const;
+  return { top: none, bottom: none, left: none, right: none, insideH: none, insideV: none };
+}
+
+function sectionRule(label: string): Paragraph[] {
+  return [
+    new Paragraph({
+      border: { top: { style: BorderStyle.SINGLE, size: 8, color: "111111" } },
+      spacing: { before: 200, after: 40 },
+      children: [
+        new TextRun({
+          text: label.toUpperCase(),
+          size: 18,
+          bold: true,
+          characterSpacing: 60,
+          color: "111111",
+        }),
+      ],
+    }),
+    new Paragraph({
+      border: { bottom: { style: BorderStyle.SINGLE, size: 8, color: "111111" } },
+      spacing: { after: 100 },
+      children: [],
+    }),
+  ];
+}
+
+export async function generateExecutiveDocx(data: ResumeTemplateData): Promise<Blob> {
+  const children: (Paragraph | Table)[] = [];
+
+  // Centered name
+  children.push(
+    new Paragraph({
+      children: [new TextRun({ text: data.name, size: 36, color: "111111" })],
+      alignment: AlignmentType.CENTER,
+      spacing: { after: 40 },
+    }),
+  );
+
+  // Contact bar: email | phone | location
+  const contacts = [data.email, data.phone, data.location].filter(Boolean);
+  if (contacts.length > 0) {
+    children.push(
+      new Paragraph({
+        children: contacts
+          .map((c, i) => [
+            new TextRun({ text: c!, size: 17, color: "555555" }),
+            i < contacts.length - 1
+              ? new TextRun({ text: "  |  ", size: 17, color: "AAAAAA" })
+              : new TextRun({ text: "" }),
+          ])
+          .flat(),
+        alignment: AlignmentType.CENTER,
+        spacing: { after: 40 },
+      }),
+    );
+  }
+
+  // Centered bold job title
+  if (data.jobTitle) {
+    children.push(
+      new Paragraph({
+        children: [
+          new TextRun({
+            text: data.jobTitle.toUpperCase(),
+            size: 22,
+            bold: true,
+            color: "222222",
+            characterSpacing: 40,
+          }),
+        ],
+        alignment: AlignmentType.CENTER,
+        spacing: { after: 160 },
+      }),
+    );
+  }
+
+  // Summary
+  if (data.summary) {
+    children.push(
+      new Paragraph({
+        children: [new TextRun({ text: data.summary, size: 19, color: "333333" })],
+        spacing: { after: 120 },
+      }),
+    );
+  }
+
+  // Skills grid: three-column table
+  if (data.skills.length > 0) {
+    const rows: TableRow[] = [];
+    for (let i = 0; i < data.skills.length; i += 3) {
+      const cols = data.skills.slice(i, i + 3);
+      rows.push(
+        new TableRow({
+          children: cols.map(
+            (skill) =>
+              new TableCell({
+                borders: noBorders(),
+                width: { size: 33, type: WidthType.PERCENTAGE },
+                children: [
+                  new Paragraph({
+                    children: [new TextRun({ text: `• ${skill.name}`, size: 17, color: "333333" })],
+                    spacing: { after: 40 },
+                  }),
+                ],
+              }),
+          ),
+        }),
+      );
+    }
+    children.push(
+      new Table({
+        width: { size: 100, type: WidthType.PERCENTAGE },
+        borders: noBorders(),
+        rows,
+      }),
+    );
+  }
+
+  // Professional Experience
+  if (data.experiences.length > 0) {
+    children.push(...sectionRule("Professional Experience"));
+    data.experiences.forEach((exp) => {
+      // Company and date right-aligned on same line
+      children.push(
+        new Table({
+          width: { size: 100, type: WidthType.PERCENTAGE },
+          borders: noBorders(),
+          rows: [
+            new TableRow({
+              children: [
+                new TableCell({
+                  borders: noBorders(),
+                  children: [
+                    new Paragraph({
+                      children: [new TextRun({ text: exp.company, size: 18, color: "333333" })],
+                    }),
+                  ],
+                }),
+                new TableCell({
+                  borders: noBorders(),
+                  width: { size: 25, type: WidthType.PERCENTAGE },
+                  children: [
+                    new Paragraph({
+                      children: [
+                        new TextRun({
+                          text: [exp.startDate, exp.endDate].filter(Boolean).join(" – "),
+                          size: 17,
+                          color: "777777",
+                        }),
+                      ],
+                      alignment: AlignmentType.RIGHT,
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        }),
+      );
+      children.push(
+        new Paragraph({
+          children: [new TextRun({ text: exp.title, size: 20, bold: true, color: "111111" })],
+          spacing: { after: 60 },
+        }),
+      );
+      if (exp.description) {
+        exp.description
+          .split("\n")
+          .filter(Boolean)
+          .forEach((line) => {
+            children.push(
+              new Paragraph({
+                children: [
+                  new TextRun({ text: "• ", size: 18, bold: true, color: "111111" }),
+                  new TextRun({ text: line, size: 18, color: "333333" }),
+                ],
+                spacing: { after: 40 },
+              }),
+            );
+          });
+      }
+      children.push(new Paragraph({ children: [], spacing: { after: 80 } }));
+    });
+  }
+
+  // Education
+  if (data.educations.length > 0) {
+    children.push(...sectionRule("Education"));
+    data.educations.forEach((edu) => {
+      children.push(
+        new Paragraph({
+          children: [
+            new TextRun({
+              text: [edu.qualification, edu.fieldOfStudy].filter(Boolean).join(", "),
+              size: 18,
+              bold: true,
+              color: "111111",
+            }),
+            new TextRun({ text: `  —  ${edu.institution}`, size: 18, color: "333333" }),
+          ],
+          spacing: { after: 60 },
+        }),
+      );
+    });
+  }
+
+  data.extras?.forEach((extra) => {
+    children.push(...sectionRule(extra.title));
+    children.push(
+      new Paragraph({
+        children: [new TextRun({ text: extra.content, size: 18, color: "333333" })],
+        spacing: { after: 80 },
+      }),
+    );
+  });
+
+  const doc = new Document({ sections: [{ children }] });
+  return Packer.toBlob(doc);
+}
diff --git a/lib/resume-templates/executive-pdf.tsx b/lib/resume-templates/executive-pdf.tsx
new file mode 100644
index 0000000..30372b2
--- /dev/null
+++ b/lib/resume-templates/executive-pdf.tsx
@@ -0,0 +1,167 @@
+import React from "react";
+import { Document, Page, View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import type { ResumeTemplateData } from "./types";
+
+const styles = StyleSheet.create({
+  page: { padding: 40, fontFamily: "Helvetica", backgroundColor: "#ffffff", fontSize: 9.5 },
+  nameRow: { flexDirection: "row", justifyContent: "center", marginBottom: 4 },
+  nameText: { fontSize: 18, fontFamily: "Times-Roman", color: "#111111" },
+  contactBar: {
+    flexDirection: "row",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    fontSize: 8.5,
+    color: "#555555",
+    marginBottom: 6,
+  },
+  pipe: { marginHorizontal: 6, color: "#aaaaaa" },
+  jobTitle: {
+    textAlign: "center",
+    fontSize: 11,
+    fontFamily: "Helvetica-Bold",
+    color: "#222222",
+    marginBottom: 14,
+    letterSpacing: 1,
+    textTransform: "uppercase",
+  },
+  summaryText: { fontSize: 9.5, lineHeight: 1.6, color: "#333333", marginBottom: 12 },
+  skillGrid: { flexDirection: "row", flexWrap: "wrap", marginBottom: 14 },
+  skillChip: {
+    fontSize: 8.5,
+    color: "#333333",
+    marginRight: 16,
+    marginBottom: 4,
+  },
+  sectionDivTop: { borderTopWidth: 1, borderTopColor: "#111111", marginBottom: 2 },
+  sectionHeading: {
+    fontSize: 9,
+    fontFamily: "Helvetica-Bold",
+    letterSpacing: 1.5,
+    textTransform: "uppercase",
+    color: "#111111",
+    marginBottom: 2,
+  },
+  sectionDivBottom: { borderBottomWidth: 1, borderBottomColor: "#111111", marginBottom: 10 },
+  expRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 2 },
+  companyText: { fontSize: 9, color: "#333333" },
+  dateText: { fontSize: 8.5, color: "#777777" },
+  expTitle: { fontSize: 10, fontFamily: "Helvetica-Bold", color: "#111111", marginBottom: 4 },
+  expDesc: { fontSize: 9, lineHeight: 1.55, color: "#333333", marginBottom: 6 },
+  bulletRow: { flexDirection: "row", marginBottom: 3 },
+  bulletDot: { fontSize: 9, color: "#333333", marginRight: 4 },
+  bulletText: { flex: 1, fontSize: 9, lineHeight: 1.5, color: "#333333" },
+  photoImg: { width: 50, height: 50, borderRadius: 25, marginLeft: 14 },
+});
+
+function sanitiseName(raw: string): string {
+  return (raw ?? "").replace(/^[#\s]+|[#\s]+$/g, "").trim();
+}
+
+export function ExecutivePdf({ data }: { data: ResumeTemplateData }) {
+  const contacts = [data.email, data.phone, data.location].filter(Boolean);
+
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        {/* Header: text block (centered, flex:1) + optional photo right */}
+        <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 14 }}>
+          <View style={{ flex: 1 }}>
+            <Text style={[styles.nameText, { textAlign: "center" }]}>{sanitiseName(data.name)}</Text>
+            {contacts.length > 0 ? (
+              <View style={styles.contactBar}>
+                {contacts.map((c, i) => (
+                  <React.Fragment key={i}>
+                    <Text>{c}</Text>
+                    {i < contacts.length - 1 ? (
+                      <Text style={styles.pipe}>|</Text>
+                    ) : null}
+                  </React.Fragment>
+                ))}
+              </View>
+            ) : null}
+            {data.jobTitle ? (
+              <Text style={[styles.jobTitle, { marginBottom: 0 }]}>{data.jobTitle}</Text>
+            ) : null}
+          </View>
+          {data.photoUrl && data.photoUrl.startsWith("data:image") ? (
+            <Image style={styles.photoImg} src={data.photoUrl} />
+          ) : null}
+        </View>
+
+        {/* Professional summary */}
+        {data.summary ? <Text style={styles.summaryText}>{data.summary}</Text> : null}
+
+        {/* Skills grid */}
+        {data.skills.length > 0 ? (
+          <View style={styles.skillGrid}>
+            {data.skills.map((skill, i) => (
+              <Text key={i} style={styles.skillChip}>
+                {"• "}
+                {skill.name}
+              </Text>
+            ))}
+          </View>
+        ) : null}
+
+        {/* Professional Experience */}
+        {data.experiences.length > 0 ? (
+          <>
+            <View style={styles.sectionDivTop} />
+            <Text style={styles.sectionHeading}>Professional Experience</Text>
+            <View style={styles.sectionDivBottom} />
+
+            {data.experiences.map((exp, i) => (
+              <View key={i} style={{ marginBottom: 12 }}>
+                <View style={styles.expRow}>
+                  <Text style={styles.companyText}>{exp.company}</Text>
+                  <Text style={styles.dateText}>
+                    {[exp.startDate, exp.endDate].filter(Boolean).join(" – ")}
+                  </Text>
+                </View>
+                <Text style={styles.expTitle}>{exp.title}</Text>
+                {exp.description ? (
+                  <>
+                    {exp.description.split("\n").filter(Boolean).map((line, li) => (
+                      <View key={li} style={styles.bulletRow}>
+                        <Text style={styles.bulletDot}>•</Text>
+                        <Text style={styles.bulletText}>{line}</Text>
+                      </View>
+                    ))}
+                  </>
+                ) : null}
+              </View>
+            ))}
+          </>
+        ) : null}
+
+        {/* Education */}
+        {data.educations.length > 0 ? (
+          <>
+            <View style={styles.sectionDivTop} />
+            <Text style={styles.sectionHeading}>Education</Text>
+            <View style={styles.sectionDivBottom} />
+            {data.educations.map((edu, i) => (
+              <View key={i} style={styles.expRow}>
+                <Text style={[styles.companyText, { fontFamily: "Helvetica-Bold" }]}>
+                  {[edu.qualification, edu.fieldOfStudy].filter(Boolean).join(", ")} — {edu.institution}
+                </Text>
+                {edu.graduationYear ? (
+                  <Text style={styles.dateText}>{edu.graduationYear}</Text>
+                ) : null}
+              </View>
+            ))}
+          </>
+        ) : null}
+
+        {data.extras?.map((extra, i) => (
+          <View key={i} style={{ marginTop: 10 }}>
+            <View style={styles.sectionDivTop} />
+            <Text style={styles.sectionHeading}>{extra.title}</Text>
+            <View style={styles.sectionDivBottom} />
+            <Text style={styles.expDesc}>{extra.content}</Text>
+          </View>
+        ))}
+      </Page>
+    </Document>
+  );
+}
diff --git a/lib/resume-templates/modern-minimal-docx.ts b/lib/resume-templates/modern-minimal-docx.ts
new file mode 100644
index 0000000..d058da3
--- /dev/null
+++ b/lib/resume-templates/modern-minimal-docx.ts
@@ -0,0 +1,237 @@
+import {
+  Document,
+  Paragraph,
+  TextRun,
+  Table,
+  TableRow,
+  TableCell,
+  Packer,
+  AlignmentType,
+  WidthType,
+  BorderStyle,
+} from "docx";
+import type { ResumeTemplateData } from "./types";
+
+function noBorders() {
+  const none = { style: BorderStyle.NONE, size: 0, color: "FFFFFF" } as const;
+  return { top: none, bottom: none, left: none, right: none, insideH: none, insideV: none };
+}
+
+function labelRow(label: string, contentCells: Paragraph[]): Table {
+  return new Table({
+    width: { size: 100, type: WidthType.PERCENTAGE },
+    borders: noBorders(),
+    rows: [
+      new TableRow({
+        children: [
+          new TableCell({
+            borders: noBorders(),
+            width: { size: 18, type: WidthType.PERCENTAGE },
+            children: [
+              new Paragraph({
+                children: [
+                  new TextRun({
+                    text: label.toUpperCase(),
+                    size: 15,
+                    bold: true,
+                    color: "111111",
+                    characterSpacing: 40,
+                  }),
+                ],
+              }),
+            ],
+          }),
+          new TableCell({
+            borders: noBorders(),
+            children: contentCells,
+          }),
+        ],
+      }),
+    ],
+  });
+}
+
+export async function generateModernMinimalDocx(data: ResumeTemplateData): Promise<Blob> {
+  const children: (Paragraph | Table)[] = [];
+
+  // Name
+  children.push(
+    new Paragraph({
+      children: [new TextRun({ text: data.name, size: 44, bold: true, color: "000000" })],
+      spacing: { after: 40 },
+    }),
+  );
+
+  // Location
+  if (data.location) {
+    children.push(
+      new Paragraph({
+        children: [new TextRun({ text: data.location, size: 18, color: "444444" })],
+        spacing: { after: 30 },
+      }),
+    );
+  }
+
+  // Phone / Email row
+  const contactParts = [data.phone, data.email].filter(Boolean);
+  if (contactParts.length > 0) {
+    children.push(
+      new Paragraph({
+        children: contactParts
+          .map((c, i) => [
+            new TextRun({ text: c!, size: 18, color: "444444" }),
+            i < contactParts.length - 1
+              ? new TextRun({ text: "    ", size: 18 })
+              : new TextRun({ text: "" }),
+          ])
+          .flat(),
+        spacing: { after: 40 },
+      }),
+    );
+  }
+
+  // Divider
+  children.push(
+    new Paragraph({
+      border: { bottom: { style: BorderStyle.SINGLE, size: 6, color: "CCCCCC" } },
+      spacing: { before: 40, after: 160 },
+      children: [],
+    }),
+  );
+
+  // Experience
+  if (data.experiences.length > 0) {
+    const expRows: Paragraph[] = [];
+    data.experiences.forEach((exp, idx) => {
+      expRows.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: exp.title, size: 19, bold: true, color: "111111" }),
+            exp.company
+              ? new TextRun({ text: `, ${exp.company}`, size: 18, color: "333333" })
+              : new TextRun({ text: "" }),
+          ],
+          spacing: { after: 30 },
+        }),
+      );
+      const meta = [
+        exp.location,
+        exp.startDate && exp.endDate
+          ? `${exp.startDate} – ${exp.endDate}`
+          : exp.startDate || exp.endDate,
+      ]
+        .filter(Boolean)
+        .join("  •  ");
+      if (meta) {
+        expRows.push(
+          new Paragraph({
+            children: [new TextRun({ text: meta, size: 17, color: "777777" })],
+            spacing: { after: 40 },
+          }),
+        );
+      }
+      if (exp.description) {
+        exp.description
+          .split("\n")
+          .filter(Boolean)
+          .forEach((line) => {
+            expRows.push(
+              new Paragraph({
+                children: [
+                  new TextRun({ text: "— ", size: 18, color: "333333" }),
+                  new TextRun({ text: line, size: 18, color: "333333" }),
+                ],
+                spacing: { after: 30 },
+              }),
+            );
+          });
+      }
+      if (idx < data.experiences.length - 1) {
+        expRows.push(
+          new Paragraph({
+            border: { bottom: { style: BorderStyle.SINGLE, size: 4, color: "EEEEEE" } },
+            spacing: { after: 60 },
+            children: [],
+          }),
+        );
+      } else {
+        expRows.push(new Paragraph({ children: [], spacing: { after: 60 } }));
+      }
+    });
+    children.push(labelRow("Experience", expRows));
+  }
+
+  // Profile / Summary
+  if (data.summary) {
+    children.push(
+      labelRow("Profile", [
+        new Paragraph({
+          children: [new TextRun({ text: data.summary, size: 18, color: "333333" })],
+          spacing: { after: 80 },
+        }),
+      ]),
+    );
+  }
+
+  // Education
+  if (data.educations.length > 0) {
+    const eduRows: Paragraph[] = [];
+    data.educations.forEach((edu) => {
+      eduRows.push(
+        new Paragraph({
+          children: [
+            new TextRun({
+              text: [edu.qualification, edu.fieldOfStudy].filter(Boolean).join(", "),
+              size: 19,
+              bold: true,
+              color: "111111",
+            }),
+          ],
+          spacing: { after: 30 },
+        }),
+      );
+      eduRows.push(
+        new Paragraph({
+          children: [new TextRun({ text: edu.institution, size: 18, color: "333333" })],
+          spacing: { after: 30 },
+        }),
+      );
+      if (edu.graduationYear) {
+        eduRows.push(
+          new Paragraph({
+            children: [new TextRun({ text: edu.graduationYear, size: 17, color: "777777" })],
+            spacing: { after: 60 },
+          }),
+        );
+      }
+    });
+    children.push(labelRow("Education", eduRows));
+  }
+
+  // Skills
+  if (data.skills.length > 0) {
+    const skillRows = data.skills.map(
+      (skill) =>
+        new Paragraph({
+          children: [new TextRun({ text: `— ${skill.name}`, size: 18, color: "333333" })],
+          spacing: { after: 30 },
+        }),
+    );
+    children.push(labelRow("Skills", skillRows));
+  }
+
+  // Extras
+  data.extras?.forEach((extra) => {
+    children.push(
+      labelRow(extra.title, [
+        new Paragraph({
+          children: [new TextRun({ text: extra.content, size: 18, color: "333333" })],
+          spacing: { after: 80 },
+        }),
+      ]),
+    );
+  });
+
+  const doc = new Document({ sections: [{ children }] });
+  return Packer.toBlob(doc);
+}
diff --git a/lib/resume-templates/modern-minimal-pdf.tsx b/lib/resume-templates/modern-minimal-pdf.tsx
new file mode 100644
index 0000000..222f7dd
--- /dev/null
+++ b/lib/resume-templates/modern-minimal-pdf.tsx
@@ -0,0 +1,159 @@
+import React from "react";
+import { Document, Page, View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import type { ResumeTemplateData } from "./types";
+
+const styles = StyleSheet.create({
+  page: { padding: 44, fontFamily: "Helvetica", backgroundColor: "#ffffff", fontSize: 9 },
+  name: { fontSize: 22, fontFamily: "Helvetica-Bold", color: "#000000", marginBottom: 3 },
+  addressLine: { fontSize: 9, color: "#444444", marginBottom: 2 },
+  contactRow: { flexDirection: "row", marginBottom: 10 },
+  contactItem: { fontSize: 9, color: "#444444", marginRight: 24 },
+  divider: { borderBottomWidth: 0.75, borderBottomColor: "#cccccc", marginBottom: 14, marginTop: 4 },
+  row: { flexDirection: "row", marginBottom: 12 },
+  labelCol: { width: "18%", paddingRight: 10 },
+  contentCol: { flex: 1 },
+  sectionLabel: {
+    fontSize: 7.5,
+    fontFamily: "Helvetica-Bold",
+    letterSpacing: 1.2,
+    textTransform: "uppercase",
+    color: "#000000",
+    paddingTop: 1,
+  },
+  jobTitle: { fontSize: 9.5, fontFamily: "Helvetica-Bold", color: "#111111", marginBottom: 2 },
+  jobMeta: { fontSize: 8.5, color: "#777777", marginBottom: 4 },
+  body: { fontSize: 9, lineHeight: 1.55, color: "#333333", marginBottom: 3 },
+  bulletRow: { flexDirection: "row", marginBottom: 2 },
+  bulletDot: { fontSize: 9, color: "#333333", marginRight: 5, marginTop: 1 },
+  bulletText: { flex: 1, fontSize: 9, lineHeight: 1.5, color: "#333333" },
+  skillLine: { fontSize: 9, color: "#333333", marginBottom: 3 },
+  subDivider: { borderBottomWidth: 0.5, borderBottomColor: "#e5e5e5", marginVertical: 6 },
+  photoImg: { width: 55, height: 55, borderRadius: 4 },
+});
+
+function sanitiseName(raw: string): string {
+  return (raw ?? "").replace(/^[#\s]+|[#\s]+$/g, "").trim();
+}
+
+export function ModernMinimalPdf({ data }: { data: ResumeTemplateData }) {
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        {/* Header: name/contact left, optional photo right */}
+        <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.name}>{sanitiseName(data.name)}</Text>
+            {data.location ? <Text style={styles.addressLine}>{data.location}</Text> : null}
+            {(data.phone || data.email) ? (
+              <View style={styles.contactRow}>
+                {data.phone ? <Text style={styles.contactItem}>{data.phone}</Text> : null}
+                {data.email ? <Text style={styles.contactItem}>{data.email}</Text> : null}
+              </View>
+            ) : null}
+          </View>
+          {data.photoUrl && data.photoUrl.startsWith("data:image") ? (
+            <Image style={styles.photoImg} src={data.photoUrl} />
+          ) : null}
+        </View>
+        <View style={styles.divider} />
+
+        {/* Experience */}
+        {data.experiences.length > 0 ? (
+          <View style={styles.row}>
+            <View style={styles.labelCol}>
+              <Text style={styles.sectionLabel}>Exper{"\n"}ience</Text>
+            </View>
+            <View style={styles.contentCol}>
+              {data.experiences.map((exp, i) => (
+                <View key={i} style={{ marginBottom: 10 }}>
+                  <Text style={styles.jobTitle}>
+                    {exp.title}
+                    {exp.company ? `, ${exp.company}` : ""}
+                  </Text>
+                  <Text style={styles.jobMeta}>
+                    {[exp.location, exp.startDate && exp.endDate ? `${exp.startDate} – ${exp.endDate}` : (exp.startDate || exp.endDate)]
+                      .filter(Boolean)
+                      .join("  •  ")}
+                  </Text>
+                  {exp.description
+                    ? exp.description
+                        .split("\n")
+                        .filter(Boolean)
+                        .map((line, li) => (
+                          <View key={li} style={styles.bulletRow}>
+                            <Text style={styles.bulletDot}>—</Text>
+                            <Text style={styles.bulletText}>{line}</Text>
+                          </View>
+                        ))
+                    : null}
+                  {i < data.experiences.length - 1 ? <View style={styles.subDivider} /> : null}
+                </View>
+              ))}
+            </View>
+          </View>
+        ) : null}
+
+        {/* Summary (after experience in minimal style) */}
+        {data.summary ? (
+          <View style={styles.row}>
+            <View style={styles.labelCol}>
+              <Text style={styles.sectionLabel}>Profile</Text>
+            </View>
+            <View style={styles.contentCol}>
+              <Text style={styles.body}>{data.summary}</Text>
+            </View>
+          </View>
+        ) : null}
+
+        {/* Education */}
+        {data.educations.length > 0 ? (
+          <View style={styles.row}>
+            <View style={styles.labelCol}>
+              <Text style={styles.sectionLabel}>Educa{"\n"}tion</Text>
+            </View>
+            <View style={styles.contentCol}>
+              {data.educations.map((edu, i) => (
+                <View key={i} style={{ marginBottom: 6 }}>
+                  <Text style={styles.jobTitle}>
+                    {[edu.qualification, edu.fieldOfStudy].filter(Boolean).join(", ")}
+                  </Text>
+                  <Text style={styles.body}>{edu.institution}</Text>
+                  {edu.graduationYear ? (
+                    <Text style={styles.jobMeta}>{edu.graduationYear}</Text>
+                  ) : null}
+                </View>
+              ))}
+            </View>
+          </View>
+        ) : null}
+
+        {/* Skills */}
+        {data.skills.length > 0 ? (
+          <View style={styles.row}>
+            <View style={styles.labelCol}>
+              <Text style={styles.sectionLabel}>Skills</Text>
+            </View>
+            <View style={styles.contentCol}>
+              {data.skills.map((skill, i) => (
+                <Text key={i} style={styles.skillLine}>
+                  — {skill.name}
+                </Text>
+              ))}
+            </View>
+          </View>
+        ) : null}
+
+        {data.extras?.map((extra, i) => (
+          <View key={i} style={styles.row}>
+            <View style={styles.labelCol}>
+              <Text style={styles.sectionLabel}>{extra.title}</Text>
+            </View>
+            <View style={styles.contentCol}>
+              <Text style={styles.body}>{extra.content}</Text>
+            </View>
+          </View>
+        ))}
+      </Page>
+    </Document>
+  );
+}
diff --git a/lib/resume-templates/munich-docx.ts b/lib/resume-templates/munich-docx.ts
new file mode 100644
index 0000000..7720cc5
--- /dev/null
+++ b/lib/resume-templates/munich-docx.ts
@@ -0,0 +1,210 @@
+import {
+  Document,
+  Paragraph,
+  TextRun,
+  Table,
+  TableRow,
+  TableCell,
+  Packer,
+  AlignmentType,
+  WidthType,
+  BorderStyle,
+  HeadingLevel,
+} from "docx";
+import type { ResumeTemplateData } from "./types";
+
+function noBorders() {
+  const none = { style: BorderStyle.NONE, size: 0, color: "FFFFFF" } as const;
+  return { top: none, bottom: none, left: none, right: none, insideH: none, insideV: none };
+}
+
+function sectionLabel(text: string): Paragraph {
+  return new Paragraph({
+    children: [
+      new TextRun({
+        text: text.toUpperCase(),
+        size: 16,
+        bold: true,
+        color: "666666",
+        characterSpacing: 60,
+      }),
+    ],
+    spacing: { before: 160, after: 60 },
+    border: {
+      bottom: { style: BorderStyle.SINGLE, size: 4, color: "DDDDDD" },
+    },
+  });
+}
+
+export async function generateMunichDocx(data: ResumeTemplateData): Promise<Blob> {
+  const leftChildren: (Paragraph | Table)[] = [
+    sectionLabel("Contact"),
+    ...[data.email, data.phone, data.location]
+      .filter(Boolean)
+      .map(
+        (c) =>
+          new Paragraph({
+            children: [new TextRun({ text: c!, size: 18, color: "444444" })],
+            spacing: { after: 40 },
+          }),
+      ),
+  ];
+
+  if (data.skills.length > 0) {
+    leftChildren.push(sectionLabel("Skills"));
+    data.skills.forEach((skill) => {
+      leftChildren.push(
+        new Paragraph({
+          children: [new TextRun({ text: skill.name, size: 18, color: "333333" })],
+          spacing: { after: 40 },
+        }),
+      );
+    });
+  }
+
+  if (data.educations.length > 0) {
+    leftChildren.push(sectionLabel("Education"));
+    data.educations.forEach((edu) => {
+      leftChildren.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: edu.qualification, size: 18, bold: true, color: "111111" }),
+          ],
+          spacing: { after: 20 },
+        }),
+      );
+      if (edu.fieldOfStudy) {
+        leftChildren.push(
+          new Paragraph({
+            children: [new TextRun({ text: edu.fieldOfStudy, size: 17, color: "444444" })],
+            spacing: { after: 20 },
+          }),
+        );
+      }
+      leftChildren.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: edu.institution, size: 16, color: "777777" }),
+            edu.graduationYear
+              ? new TextRun({ text: `  ${edu.graduationYear}`, size: 16, color: "999999" })
+              : new TextRun({ text: "" }),
+          ],
+          spacing: { after: 80 },
+        }),
+      );
+    });
+  }
+
+  const rightChildren: (Paragraph | Table)[] = [];
+
+  if (data.summary) {
+    rightChildren.push(sectionLabel("Summary"));
+    rightChildren.push(
+      new Paragraph({
+        children: [new TextRun({ text: data.summary, size: 18, color: "333333" })],
+        spacing: { after: 100 },
+      }),
+    );
+  }
+
+  if (data.experiences.length > 0) {
+    rightChildren.push(sectionLabel("Work Experience"));
+    data.experiences.forEach((exp) => {
+      rightChildren.push(
+        new Paragraph({
+          children: [new TextRun({ text: exp.title, size: 20, bold: true, color: "111111" })],
+          spacing: { after: 40 },
+        }),
+      );
+      const meta = [
+        exp.company,
+        exp.startDate && exp.endDate ? `${exp.startDate} – ${exp.endDate}` : exp.startDate || exp.endDate,
+      ]
+        .filter(Boolean)
+        .join("  •  ");
+      if (meta) {
+        rightChildren.push(
+          new Paragraph({
+            children: [new TextRun({ text: meta, size: 16, color: "777777" })],
+            spacing: { after: 40 },
+          }),
+        );
+      }
+      if (exp.description) {
+        rightChildren.push(
+          new Paragraph({
+            children: [new TextRun({ text: exp.description, size: 18, color: "333333" })],
+            spacing: { after: 120 },
+          }),
+        );
+      }
+    });
+  }
+
+  data.extras?.forEach((extra) => {
+    rightChildren.push(sectionLabel(extra.title));
+    rightChildren.push(
+      new Paragraph({
+        children: [new TextRun({ text: extra.content, size: 18, color: "333333" })],
+        spacing: { after: 80 },
+      }),
+    );
+  });
+
+  const doc = new Document({
+    sections: [
+      {
+        children: [
+          // Header
+          ...(data.jobTitle
+            ? [
+                new Paragraph({
+                  children: [
+                    new TextRun({
+                      text: data.jobTitle.toUpperCase(),
+                      size: 16,
+                      color: "777777",
+                      characterSpacing: 60,
+                    }),
+                  ],
+                  spacing: { after: 60 },
+                }),
+              ]
+            : []),
+          new Paragraph({
+            children: [new TextRun({ text: data.name, size: 52, color: "111111" })],
+            spacing: { after: 80 },
+          }),
+          new Paragraph({
+            border: { bottom: { style: BorderStyle.SINGLE, size: 6, color: "CCCCCC" } },
+            spacing: { after: 160 },
+            children: [],
+          }),
+          // Two-column body table
+          new Table({
+            width: { size: 100, type: WidthType.PERCENTAGE },
+            borders: noBorders(),
+            rows: [
+              new TableRow({
+                children: [
+                  new TableCell({
+                    width: { size: 30, type: WidthType.PERCENTAGE },
+                    children: leftChildren,
+                    borders: noBorders(),
+                  }),
+                  new TableCell({
+                    width: { size: 70, type: WidthType.PERCENTAGE },
+                    children: rightChildren,
+                    borders: noBorders(),
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      },
+    ],
+  });
+
+  return Packer.toBlob(doc);
+}
diff --git a/lib/resume-templates/munich-pdf.tsx b/lib/resume-templates/munich-pdf.tsx
new file mode 100644
index 0000000..bc8d033
--- /dev/null
+++ b/lib/resume-templates/munich-pdf.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+import { Document, Page, View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import type { ResumeTemplateData } from "./types";
+
+const styles = StyleSheet.create({
+  page: { padding: 44, fontFamily: "Helvetica", backgroundColor: "#ffffff", fontSize: 9 },
+  tagline: { fontSize: 7.5, letterSpacing: 2, color: "#777777", marginBottom: 5, textTransform: "uppercase" },
+  name: { fontSize: 26, fontFamily: "Times-Roman", color: "#111111", marginBottom: 10 },
+  divider: { borderBottomWidth: 0.75, borderBottomColor: "#cccccc", marginBottom: 14 },
+  row: { flexDirection: "row" },
+  leftCol: { width: "30%", paddingRight: 14 },
+  rightCol: { width: "70%", paddingLeft: 14 },
+  sectionLabel: {
+    fontSize: 7,
+    letterSpacing: 1.8,
+    textTransform: "uppercase",
+    color: "#666666",
+    marginBottom: 5,
+    marginTop: 14,
+    borderBottomWidth: 0.5,
+    borderBottomColor: "#e0e0e0",
+    paddingBottom: 3,
+  },
+  body: { fontSize: 9, lineHeight: 1.55, color: "#333333", marginBottom: 4 },
+  contactLine: { fontSize: 8.5, color: "#444444", marginBottom: 3 },
+  expHeader: { fontSize: 9, fontFamily: "Helvetica-Bold", color: "#111111", marginBottom: 2 },
+  expMeta: { fontSize: 8, color: "#777777", marginBottom: 4 },
+  skillRow: { flexDirection: "row", marginBottom: 5, alignItems: "center" },
+  skillName: { fontSize: 8.5, color: "#333333", flex: 1 },
+  skillBar: { width: 50, height: 3, backgroundColor: "#e5e5e5", borderRadius: 2 },
+  skillFill: { height: 3, backgroundColor: "#888888", borderRadius: 2 },
+  photoCircle: { width: 60, height: 60, borderRadius: 30, marginBottom: 8 },
+});
+
+function sanitiseName(raw: string): string {
+  return (raw ?? "").replace(/^[#\s]+|[#\s]+$/g, "").trim();
+}
+
+export function MunichPdf({ data }: { data: ResumeTemplateData }) {
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        {/* Header */}
+        {data.photoUrl && data.photoUrl.startsWith("data:image") ? (
+          <Image style={styles.photoCircle} src={data.photoUrl} />
+        ) : null}
+        {data.jobTitle ? (
+          <Text style={styles.tagline}>{data.jobTitle}</Text>
+        ) : null}
+        <Text style={styles.name}>{sanitiseName(data.name)}</Text>
+        <View style={styles.divider} />
+
+        {/* Two-column body */}
+        <View style={styles.row}>
+          {/* Left column — Contact, Skills */}
+          <View style={styles.leftCol}>
+            <Text style={styles.sectionLabel}>Contact</Text>
+            {data.email ? <Text style={styles.contactLine}>{data.email}</Text> : null}
+            {data.phone ? <Text style={styles.contactLine}>{data.phone}</Text> : null}
+            {data.location ? <Text style={styles.contactLine}>{data.location}</Text> : null}
+
+            {data.skills.length > 0 ? (
+              <>
+                <Text style={styles.sectionLabel}>Skills</Text>
+                {data.skills.map((skill, i) => (
+                  <View key={i} style={styles.skillRow}>
+                    <Text style={styles.skillName}>{skill.name}</Text>
+                    <View style={styles.skillBar}>
+                      <View style={[styles.skillFill, { width: `${skill.level}%` }]} />
+                    </View>
+                  </View>
+                ))}
+              </>
+            ) : null}
+
+            {data.educations.length > 0 ? (
+              <>
+                <Text style={styles.sectionLabel}>Education</Text>
+                {data.educations.map((edu, i) => (
+                  <View key={i} style={{ marginBottom: 8 }}>
+                    <Text style={[styles.body, { fontFamily: "Helvetica-Bold" }]}>
+                      {edu.qualification}
+                    </Text>
+                    {edu.fieldOfStudy ? (
+                      <Text style={styles.body}>{edu.fieldOfStudy}</Text>
+                    ) : null}
+                    <Text style={styles.contactLine}>{edu.institution}</Text>
+                    {edu.graduationYear ? (
+                      <Text style={styles.contactLine}>{edu.graduationYear}</Text>
+                    ) : null}
+                  </View>
+                ))}
+              </>
+            ) : null}
+          </View>
+
+          {/* Right column — Summary, Experience */}
+          <View style={styles.rightCol}>
+            {data.summary ? (
+              <>
+                <Text style={styles.sectionLabel}>Summary</Text>
+                <Text style={styles.body}>{data.summary}</Text>
+              </>
+            ) : null}
+
+            {data.experiences.length > 0 ? (
+              <>
+                <Text style={styles.sectionLabel}>Work Experience</Text>
+                {data.experiences.map((exp, i) => (
+                  <View key={i} style={{ marginBottom: 10 }}>
+                    <Text style={styles.expHeader}>{exp.title}</Text>
+                    <Text style={styles.expMeta}>
+                      {[exp.company, exp.startDate && exp.endDate ? `${exp.startDate} – ${exp.endDate}` : (exp.startDate || exp.endDate)]
+                        .filter(Boolean)
+                        .join("  •  ")}
+                    </Text>
+                    {exp.description ? (
+                      <Text style={styles.body}>{exp.description}</Text>
+                    ) : null}
+                  </View>
+                ))}
+              </>
+            ) : null}
+
+            {data.extras?.map((extra, i) => (
+              <View key={i}>
+                <Text style={styles.sectionLabel}>{extra.title}</Text>
+                <Text style={styles.body}>{extra.content}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+}
diff --git a/lib/resume-templates/navy-executive-docx.ts b/lib/resume-templates/navy-executive-docx.ts
new file mode 100644
index 0000000..5d012e9
--- /dev/null
+++ b/lib/resume-templates/navy-executive-docx.ts
@@ -0,0 +1,254 @@
+import {
+  Document,
+  Paragraph,
+  TextRun,
+  Table,
+  TableRow,
+  TableCell,
+  Packer,
+  AlignmentType,
+  WidthType,
+  BorderStyle,
+  ShadingType,
+} from "docx";
+import type { ResumeTemplateData } from "./types";
+
+const NAVY = "1B2E4B";
+const GOLD = "C9A040";
+const LIGHT_BG = "F5F7FA";
+
+function noBorders() {
+  const none = { style: BorderStyle.NONE, size: 0, color: "FFFFFF" } as const;
+  return { top: none, bottom: none, left: none, right: none, insideH: none, insideV: none };
+}
+
+function leftSectionLabel(text: string): Paragraph {
+  return new Paragraph({
+    children: [
+      new TextRun({
+        text: text.toUpperCase(),
+        size: 14,
+        bold: true,
+        color: NAVY,
+        characterSpacing: 60,
+      }),
+    ],
+    spacing: { before: 160, after: 60 },
+  });
+}
+
+function rightSectionLabel(text: string): Paragraph {
+  return new Paragraph({
+    children: [
+      new TextRun({
+        text: text.toUpperCase(),
+        size: 14,
+        bold: true,
+        color: NAVY,
+        characterSpacing: 60,
+      }),
+    ],
+    border: {
+      bottom: { style: BorderStyle.SINGLE, size: 4, color: "DDE3EB" },
+    },
+    spacing: { before: 160, after: 60 },
+  });
+}
+
+export async function generateNavyExecutiveDocx(data: ResumeTemplateData): Promise<Blob> {
+  // ── Left column (35%) ───────────────────────────────────────────────
+  const leftChildren: Paragraph[] = [
+    leftSectionLabel("Contact"),
+    ...[data.email, data.phone, data.location]
+      .filter(Boolean)
+      .map(
+        (c) =>
+          new Paragraph({
+            children: [new TextRun({ text: c!, size: 17, color: "444444" })],
+            spacing: { after: 40 },
+          }),
+      ),
+  ];
+
+  if (data.educations.length > 0) {
+    leftChildren.push(leftSectionLabel("Education"));
+    data.educations.forEach((edu) => {
+      leftChildren.push(
+        new Paragraph({
+          children: [new TextRun({ text: edu.qualification, size: 18, bold: true, color: "111111" })],
+          spacing: { after: 20 },
+        }),
+      );
+      if (edu.fieldOfStudy) {
+        leftChildren.push(
+          new Paragraph({
+            children: [new TextRun({ text: edu.fieldOfStudy, size: 17, color: "444444" })],
+            spacing: { after: 20 },
+          }),
+        );
+      }
+      leftChildren.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: edu.institution, size: 16, color: "777777" }),
+            edu.graduationYear
+              ? new TextRun({ text: `  ${edu.graduationYear}`, size: 16, color: "999999" })
+              : new TextRun({ text: "" }),
+          ],
+          spacing: { after: 80 },
+        }),
+      );
+    });
+  }
+
+  if (data.skills.length > 0) {
+    leftChildren.push(leftSectionLabel("Skills"));
+    data.skills.forEach((skill) => {
+      leftChildren.push(
+        new Paragraph({
+          children: [new TextRun({ text: `• ${skill.name}`, size: 17, color: "333333" })],
+          spacing: { after: 40 },
+        }),
+      );
+    });
+  }
+
+  // ── Right column (65%) ──────────────────────────────────────────────
+  const rightChildren: Paragraph[] = [];
+
+  if (data.summary) {
+    rightChildren.push(rightSectionLabel("Profile"));
+    rightChildren.push(
+      new Paragraph({
+        children: [new TextRun({ text: data.summary, size: 18, color: "333333" })],
+        spacing: { after: 100 },
+      }),
+    );
+  }
+
+  if (data.experiences.length > 0) {
+    rightChildren.push(rightSectionLabel("Professional Experience"));
+    data.experiences.forEach((exp) => {
+      rightChildren.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: exp.company, size: 17, color: NAVY }),
+            new TextRun({ text: "    " }),
+            new TextRun({
+              text: [exp.startDate, exp.endDate].filter(Boolean).join(" – "),
+              size: 16,
+              color: "888888",
+            }),
+          ],
+          spacing: { after: 20 },
+        }),
+      );
+      rightChildren.push(
+        new Paragraph({
+          children: [new TextRun({ text: exp.title, size: 19, bold: true, color: "111111" })],
+          spacing: { after: 40 },
+        }),
+      );
+      if (exp.description) {
+        exp.description
+          .split("\n")
+          .filter(Boolean)
+          .forEach((line) => {
+            rightChildren.push(
+              new Paragraph({
+                children: [
+                  new TextRun({ text: "•  ", size: 18, color: NAVY }),
+                  new TextRun({ text: line, size: 18, color: "333333" }),
+                ],
+                spacing: { after: 30 },
+              }),
+            );
+          });
+      }
+      rightChildren.push(new Paragraph({ children: [], spacing: { after: 80 } }));
+    });
+  }
+
+  data.extras?.forEach((extra) => {
+    rightChildren.push(rightSectionLabel(extra.title));
+    rightChildren.push(
+      new Paragraph({
+        children: [new TextRun({ text: extra.content, size: 18, color: "333333" })],
+        spacing: { after: 80 },
+      }),
+    );
+  });
+
+  const doc = new Document({
+    sections: [
+      {
+        children: [
+          // ── Navy header ──────────────────────────────────────────
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: data.name.toUpperCase(),
+                size: 52,
+                color: GOLD,
+                characterSpacing: 60,
+              }),
+            ],
+            alignment: AlignmentType.CENTER,
+            shading: { type: ShadingType.SOLID, fill: NAVY, color: NAVY },
+            spacing: { before: 280, after: 80 },
+          }),
+          ...(data.jobTitle
+            ? [
+                new Paragraph({
+                  children: [
+                    new TextRun({
+                      text: data.jobTitle.toUpperCase(),
+                      size: 16,
+                      color: "E8C97A",
+                      characterSpacing: 60,
+                    }),
+                  ],
+                  alignment: AlignmentType.CENTER,
+                  shading: { type: ShadingType.SOLID, fill: NAVY, color: NAVY },
+                  spacing: { after: 280 },
+                }),
+              ]
+            : [
+                new Paragraph({
+                  children: [],
+                  shading: { type: ShadingType.SOLID, fill: NAVY, color: NAVY },
+                  spacing: { after: 280 },
+                }),
+              ]),
+          // ── Two-column body ───────────────────────────────────────
+          new Table({
+            width: { size: 100, type: WidthType.PERCENTAGE },
+            borders: noBorders(),
+            rows: [
+              new TableRow({
+                children: [
+                  new TableCell({
+                    width: { size: 35, type: WidthType.PERCENTAGE },
+                    borders: noBorders(),
+                    shading: { type: ShadingType.SOLID, fill: LIGHT_BG, color: LIGHT_BG },
+                    children: leftChildren,
+                  }),
+                  new TableCell({
+                    width: { size: 65, type: WidthType.PERCENTAGE },
+                    borders: {
+                      ...noBorders(),
+                      left: { style: BorderStyle.SINGLE, size: 6, color: "DDE3EB" },
+                    },
+                    children: rightChildren,
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      },
+    ],
+  });
+
+  return Packer.toBlob(doc);
+}
diff --git a/lib/resume-templates/navy-executive-pdf.tsx b/lib/resume-templates/navy-executive-pdf.tsx
new file mode 100644
index 0000000..45fc3a5
--- /dev/null
+++ b/lib/resume-templates/navy-executive-pdf.tsx
@@ -0,0 +1,199 @@
+import React from "react";
+import { Document, Page, View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import type { ResumeTemplateData } from "./types";
+
+const NAVY = "#1B2E4B";
+const GOLD = "#C9A040";
+const LIGHT_GOLD = "#E8C97A";
+
+const styles = StyleSheet.create({
+  page: { fontFamily: "Helvetica", backgroundColor: "#ffffff", fontSize: 9 },
+  header: {
+    backgroundColor: NAVY,
+    paddingVertical: 28,
+    paddingHorizontal: 44,
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 0,
+  },
+  photoBorder: { borderWidth: 2, borderColor: "#C9A040", borderRadius: 34, padding: 2 },
+  headerPhoto: { width: 65, height: 65, borderRadius: 32 },
+  headerName: {
+    fontSize: 26,
+    fontFamily: "Times-Bold",
+    color: GOLD,
+    letterSpacing: 3,
+    textTransform: "uppercase",
+    textAlign: "center",
+    marginBottom: 6,
+  },
+  headerTitle: {
+    fontSize: 8,
+    color: LIGHT_GOLD,
+    letterSpacing: 2.5,
+    textTransform: "uppercase",
+    textAlign: "center",
+  },
+  body: { flexDirection: "row", flex: 1, paddingHorizontal: 0 },
+  leftCol: {
+    width: "35%",
+    backgroundColor: "#f5f7fa",
+    padding: 24,
+    paddingTop: 20,
+  },
+  rightCol: {
+    flex: 1,
+    padding: 24,
+    paddingTop: 20,
+    borderLeftWidth: 0.75,
+    borderLeftColor: "#dde3eb",
+  },
+  leftSectionLabel: {
+    fontSize: 7,
+    fontFamily: "Helvetica-Bold",
+    letterSpacing: 1.8,
+    textTransform: "uppercase",
+    color: NAVY,
+    marginBottom: 6,
+    marginTop: 14,
+  },
+  leftItem: { fontSize: 8.5, color: "#333333", marginBottom: 3, lineHeight: 1.45 },
+  rightSectionLabel: {
+    fontSize: 7,
+    fontFamily: "Helvetica-Bold",
+    letterSpacing: 1.8,
+    textTransform: "uppercase",
+    color: NAVY,
+    marginBottom: 6,
+    marginTop: 14,
+    borderBottomWidth: 0.5,
+    borderBottomColor: "#dde3eb",
+    paddingBottom: 3,
+  },
+  expHeader: { fontSize: 9.5, fontFamily: "Helvetica-Bold", color: "#111111", marginBottom: 2 },
+  expMeta: { fontSize: 8, color: "#888888", marginBottom: 4 },
+  bodyText: { fontSize: 9, lineHeight: 1.55, color: "#333333", marginBottom: 4 },
+  bulletRow: { flexDirection: "row", marginBottom: 3 },
+  bulletDot: { fontSize: 9, color: NAVY, marginRight: 5 },
+  bulletText: { flex: 1, fontSize: 9, lineHeight: 1.5, color: "#333333" },
+  skillItem: { fontSize: 8.5, color: "#333333", marginBottom: 3 },
+});
+
+function sanitiseName(raw: string): string {
+  return (raw ?? "").replace(/^[#\s]+|[#\s]+$/g, "").trim();
+}
+
+export function NavyExecutivePdf({ data }: { data: ResumeTemplateData }) {
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        {/* Dark navy header */}
+        <View style={styles.header}>
+          <View style={{ width: 72 }} />
+          <View style={{ flex: 1, alignItems: "center" }}>
+            <Text style={styles.headerName}>{sanitiseName(data.name)}</Text>
+            {data.jobTitle ? <Text style={styles.headerTitle}>{data.jobTitle}</Text> : null}
+          </View>
+          <View style={{ width: 72, alignItems: "flex-end" }}>
+            {data.photoUrl && data.photoUrl.startsWith("data:image") ? (
+              <View style={styles.photoBorder}>
+                <Image style={styles.headerPhoto} src={data.photoUrl} />
+              </View>
+            ) : null}
+          </View>
+        </View>
+
+        {/* Two-column body */}
+        <View style={styles.body}>
+          {/* Left column */}
+          <View style={styles.leftCol}>
+            <Text style={styles.leftSectionLabel}>Contact</Text>
+            {data.email ? <Text style={styles.leftItem}>{data.email}</Text> : null}
+            {data.phone ? <Text style={styles.leftItem}>{data.phone}</Text> : null}
+            {data.location ? <Text style={styles.leftItem}>{data.location}</Text> : null}
+
+            {data.educations.length > 0 ? (
+              <>
+                <Text style={styles.leftSectionLabel}>Education</Text>
+                {data.educations.map((edu, i) => (
+                  <View key={i} style={{ marginBottom: 6 }}>
+                    <Text style={[styles.leftItem, { fontFamily: "Helvetica-Bold" }]}>
+                      {edu.qualification}
+                    </Text>
+                    {edu.fieldOfStudy ? (
+                      <Text style={styles.leftItem}>{edu.fieldOfStudy}</Text>
+                    ) : null}
+                    <Text style={[styles.leftItem, { color: "#777777" }]}>
+                      {edu.institution}
+                    </Text>
+                    {edu.graduationYear ? (
+                      <Text style={[styles.leftItem, { color: "#999999" }]}>
+                        {edu.graduationYear}
+                      </Text>
+                    ) : null}
+                  </View>
+                ))}
+              </>
+            ) : null}
+
+            {data.skills.length > 0 ? (
+              <>
+                <Text style={styles.leftSectionLabel}>Skills</Text>
+                {data.skills.map((skill, i) => (
+                  <Text key={i} style={styles.skillItem}>
+                    {"• "}{skill.name}
+                  </Text>
+                ))}
+              </>
+            ) : null}
+          </View>
+
+          {/* Right column */}
+          <View style={styles.rightCol}>
+            {data.summary ? (
+              <>
+                <Text style={styles.rightSectionLabel}>Profile</Text>
+                <Text style={styles.bodyText}>{data.summary}</Text>
+              </>
+            ) : null}
+
+            {data.experiences.length > 0 ? (
+              <>
+                <Text style={styles.rightSectionLabel}>Professional Experience</Text>
+                {data.experiences.map((exp, i) => (
+                  <View key={i} style={{ marginBottom: 12 }}>
+                    <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+                      <Text style={[styles.expMeta, { color: NAVY }]}>{exp.company}</Text>
+                      <Text style={styles.expMeta}>
+                        {[exp.startDate, exp.endDate].filter(Boolean).join(" – ")}
+                      </Text>
+                    </View>
+                    <Text style={styles.expHeader}>{exp.title}</Text>
+                    {exp.description
+                      ? exp.description
+                          .split("\n")
+                          .filter(Boolean)
+                          .map((line, li) => (
+                            <View key={li} style={styles.bulletRow}>
+                              <Text style={styles.bulletDot}>•</Text>
+                              <Text style={styles.bulletText}>{line}</Text>
+                            </View>
+                          ))
+                      : null}
+                  </View>
+                ))}
+              </>
+            ) : null}
+
+            {data.extras?.map((extra, i) => (
+              <View key={i}>
+                <Text style={styles.rightSectionLabel}>{extra.title}</Text>
+                <Text style={styles.bodyText}>{extra.content}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+}
diff --git a/lib/resume-templates/recommend.ts b/lib/resume-templates/recommend.ts
new file mode 100644
index 0000000..b32f66f
--- /dev/null
+++ b/lib/resume-templates/recommend.ts
@@ -0,0 +1,139 @@
+import type { ResumeTemplateData, TemplateId } from "./types";
+
+const TEMPLATE_IDS: TemplateId[] = [
+  "munich",
+  "traditional",
+  "executive",
+  "modern-minimal",
+  "navy-executive",
+];
+
+function wordCount(text: string): number {
+  return text.trim().split(/\s+/).filter(Boolean).length;
+}
+
+function hasKeyword(text: string, keywords: string[]): boolean {
+  const lower = text.toLowerCase();
+  return keywords.some((kw) => lower.includes(kw));
+}
+
+export function recommendTemplate(data: ResumeTemplateData): TemplateId {
+  const scores: Record<TemplateId, number> = {
+    munich: 0,
+    traditional: 0,
+    executive: 0,
+    "modern-minimal": 0,
+    "navy-executive": 0,
+  };
+
+  // ── Criterion 1: Content density ─────────────────────────────────────────
+  const allText = [
+    data.summary ?? "",
+    data.experiences.map((e) => `${e.title} ${e.company} ${e.description}`).join(" "),
+    data.skills.map((s) => s.name).join(" "),
+    data.educations.map((e) => `${e.institution} ${e.qualification}`).join(" "),
+  ].join(" ");
+
+  const totalWords = wordCount(allText);
+
+  if (totalWords > 400) {
+    scores["executive"] += 3;
+    scores["modern-minimal"] += 2;
+  } else if (totalWords < 200) {
+    scores["navy-executive"] += 3;
+    scores["munich"] += 2;
+  } else {
+    scores["munich"] += 1;
+    scores["navy-executive"] += 1;
+  }
+
+  // ── Criterion 2: Industry signal ─────────────────────────────────────────
+  const industryText = [
+    data.summary ?? "",
+    data.experiences.map((e) => `${e.title} ${e.description}`).join(" "),
+    data.jobTitle ?? "",
+  ].join(" ");
+
+  if (
+    hasKeyword(industryText, [
+      "finance", "financial", "banking", "legal", "law", "compliance",
+      "consulting", "accountant", "accounting", "audit",
+    ])
+  ) {
+    scores["munich"] += 3;
+    scores["executive"] += 2;
+  }
+
+  if (
+    hasKeyword(industryText, [
+      "software", "engineer", "developer", "tech", "technology",
+      "data", "analytics", "machine learning", "devops", "cloud",
+    ])
+  ) {
+    scores["modern-minimal"] += 3;
+  }
+
+  if (
+    hasKeyword(industryText, [
+      "creative", "marketing", "design", "branding", "media",
+      "communications", "advertising", "art director",
+    ])
+  ) {
+    scores["navy-executive"] += 3;
+  }
+
+  // ── Criterion 3: Career level signal ─────────────────────────────────────
+  const hasMultipleRoles = data.experiences.length > 2;
+  const seniorSignals = hasKeyword(
+    data.summary ?? "",
+    ["10 years", "15 years", "20 years", "decade", "senior", "head of", "director", "vp", "cxo", "c-suite"],
+  );
+  const freshGradSignals =
+    data.experiences.length <= 1 ||
+    hasKeyword(data.summary ?? "", ["fresh graduate", "entry level", "recent graduate", "intern"]);
+
+  if (hasMultipleRoles || seniorSignals) {
+    scores["executive"] += 2;
+    scores["navy-executive"] += 2;
+  }
+
+  if (freshGradSignals) {
+    scores["traditional"] += 2;
+    scores["munich"] += 1;
+  }
+
+  // ── Criterion 4: Photo availability ──────────────────────────────────────
+  if (data.photoUrl) {
+    scores["traditional"] += 3;
+  } else {
+    scores["traditional"] -= 3; // Remove from strong consideration
+  }
+
+  // ── Criterion 5: Content completeness ────────────────────────────────────
+  const populatedSections = [
+    data.summary,
+    data.experiences.length > 0,
+    data.skills.length > 0,
+    data.educations.length > 0,
+  ].filter(Boolean).length;
+
+  if (populatedSections === 4) {
+    scores["munich"] += 2;
+    scores["navy-executive"] += 2;
+  } else if (populatedSections <= 2) {
+    scores["executive"] += 1;
+    scores["modern-minimal"] += 1;
+  }
+
+  // ── Pick highest-scoring template ────────────────────────────────────────
+  let best: TemplateId = "munich";
+  let bestScore = -Infinity;
+  for (const id of TEMPLATE_IDS) {
+    if (scores[id] > bestScore) {
+      bestScore = scores[id];
+      best = id;
+    }
+  }
+
+  return best;
+}
diff --git a/lib/resume-templates/traditional-docx.ts b/lib/resume-templates/traditional-docx.ts
new file mode 100644
index 0000000..5f532f5
--- /dev/null
+++ b/lib/resume-templates/traditional-docx.ts
@@ -0,0 +1,268 @@
+import {
+  Document,
+  Paragraph,
+  TextRun,
+  Table,
+  TableRow,
+  TableCell,
+  Packer,
+  AlignmentType,
+  WidthType,
+  BorderStyle,
+} from "docx";
+import type { ResumeTemplateData } from "./types";
+
+function noBorders() {
+  const none = { style: BorderStyle.NONE, size: 0, color: "FFFFFF" } as const;
+  return { top: none, bottom: none, left: none, right: none, insideH: none, insideV: none };
+}
+
+function sectionHeading(text: string): Paragraph {
+  return new Paragraph({
+    children: [new TextRun({ text: text.toUpperCase(), size: 22, bold: true, color: "111111" })],
+    spacing: { before: 200, after: 80 },
+    border: {
+      bottom: { style: BorderStyle.SINGLE, size: 8, color: "111111" },
+    },
+  });
+}
+
+export async function generateTraditionalDocx(data: ResumeTemplateData): Promise<Blob> {
+  const children: (Paragraph | Table)[] = [
+    // Header: name left, photo placeholder right (using table)
+    new Table({
+      width: { size: 100, type: WidthType.PERCENTAGE },
+      borders: noBorders(),
+      rows: [
+        new TableRow({
+          children: [
+            new TableCell({
+              borders: noBorders(),
+              children: [
+                new Paragraph({
+                  children: [new TextRun({ text: data.name, size: 44, bold: true, color: "111111" })],
+                  spacing: { after: 40 },
+                }),
+                ...(data.jobTitle
+                  ? [
+                      new Paragraph({
+                        children: [new TextRun({ text: data.jobTitle, size: 20, bold: true, color: "444444" })],
+                        spacing: { after: 40 },
+                      }),
+                    ]
+                  : []),
+                ...[data.email, data.phone, data.location]
+                  .filter(Boolean)
+                  .map(
+                    (c) =>
+                      new Paragraph({
+                        children: [new TextRun({ text: c!, size: 18, color: "555555" })],
+                        spacing: { after: 30 },
+                      }),
+                  ),
+              ],
+            }),
+            new TableCell({
+              borders: noBorders(),
+              width: { size: 20, type: WidthType.PERCENTAGE },
+              children: [
+                new Paragraph({
+                  children: [
+                    new TextRun({
+                      text: "[Photo]",
+                      size: 16,
+                      color: "999999",
+                    }),
+                  ],
+                  alignment: AlignmentType.CENTER,
+                  border: {
+                    top: { style: BorderStyle.SINGLE, size: 4, color: "CCCCCC" },
+                    bottom: { style: BorderStyle.SINGLE, size: 4, color: "CCCCCC" },
+                    left: { style: BorderStyle.SINGLE, size: 4, color: "CCCCCC" },
+                    right: { style: BorderStyle.SINGLE, size: 4, color: "CCCCCC" },
+                  },
+                }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    }),
+    // Thick decorative divider
+    new Paragraph({
+      border: { bottom: { style: BorderStyle.THICK, size: 24, color: "111111" } },
+      spacing: { before: 120, after: 160 },
+      children: [],
+    }),
+  ];
+
+  // Personal Data section
+  if (data.email || data.phone || data.location || data.jobTitle) {
+    children.push(sectionHeading("Personal Data"));
+    const dataRows: { label: string; value: string }[] = [];
+    if (data.jobTitle) dataRows.push({ label: "Position Applied", value: data.jobTitle });
+    if (data.email) dataRows.push({ label: "Email", value: data.email });
+    if (data.phone) dataRows.push({ label: "Phone", value: data.phone });
+    if (data.location) dataRows.push({ label: "Address", value: data.location });
+
+    children.push(
+      new Table({
+        width: { size: 100, type: WidthType.PERCENTAGE },
+        borders: noBorders(),
+        rows: dataRows.map(
+          ({ label, value }) =>
+            new TableRow({
+              children: [
+                new TableCell({
+                  borders: noBorders(),
+                  width: { size: 28, type: WidthType.PERCENTAGE },
+                  children: [
+                    new Paragraph({
+                      children: [new TextRun({ text: label, size: 18, bold: true, color: "333333" })],
+                    }),
+                  ],
+                }),
+                new TableCell({
+                  borders: noBorders(),
+                  children: [
+                    new Paragraph({
+                      children: [new TextRun({ text: value, size: 18, color: "333333" })],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+        ),
+      }),
+    );
+  }
+
+  if (data.summary) {
+    children.push(sectionHeading("Profile Summary"));
+    children.push(
+      new Paragraph({
+        children: [new TextRun({ text: data.summary, size: 18, color: "333333" })],
+        spacing: { after: 80 },
+      }),
+    );
+  }
+
+  if (data.skills.length > 0) {
+    children.push(sectionHeading("Skills & Interest"));
+    children.push(
+      new Paragraph({
+        children: [new TextRun({ text: data.skills.map((s) => s.name).join("  •  "), size: 18, color: "333333" })],
+        spacing: { after: 80 },
+      }),
+    );
+  }
+
+  if (data.educations.length > 0) {
+    children.push(sectionHeading("Education"));
+    children.push(
+      new Table({
+        width: { size: 100, type: WidthType.PERCENTAGE },
+        borders: noBorders(),
+        rows: data.educations.map(
+          (edu, i) =>
+            new TableRow({
+              children: [
+                new TableCell({
+                  borders: noBorders(),
+                  width: { size: 18, type: WidthType.PERCENTAGE },
+                  children: [
+                    new Paragraph({
+                      children: [
+                        new TextRun({
+                          text: i === 0 ? "TERTIARY" : "SECONDARY",
+                          size: 16,
+                          bold: true,
+                          color: "111111",
+                          characterSpacing: 40,
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+                new TableCell({
+                  borders: noBorders(),
+                  children: [
+                    new Paragraph({
+                      children: [
+                        new TextRun({
+                          text: [edu.qualification, edu.fieldOfStudy].filter(Boolean).join(", "),
+                          size: 18,
+                          bold: true,
+                          color: "111111",
+                        }),
+                      ],
+                      spacing: { after: 30 },
+                    }),
+                    new Paragraph({
+                      children: [new TextRun({ text: edu.institution, size: 18, color: "333333" })],
+                      spacing: { after: 30 },
+                    }),
+                    ...(edu.graduationYear
+                      ? [
+                          new Paragraph({
+                            children: [
+                              new TextRun({ text: `Graduated ${edu.graduationYear}`, size: 16, color: "777777" }),
+                            ],
+                            spacing: { after: 80 },
+                          }),
+                        ]
+                      : []),
+                  ],
+                }),
+              ],
+            }),
+        ),
+      }),
+    );
+  }
+
+  if (data.experiences.length > 0) {
+    children.push(sectionHeading("Work Experience"));
+    data.experiences.forEach((exp) => {
+      children.push(
+        new Paragraph({
+          children: [
+            new TextRun({ text: exp.title, size: 20, bold: true, color: "111111" }),
+            exp.company ? new TextRun({ text: `, ${exp.company}`, size: 18, color: "333333" }) : new TextRun({ text: "" }),
+          ],
+          spacing: { after: 40 },
+        }),
+      );
+      const dateStr = [exp.startDate, exp.endDate].filter(Boolean).join(" – ");
+      if (dateStr) {
+        children.push(
+          new Paragraph({
+            children: [new TextRun({ text: dateStr, size: 16, color: "777777" })],
+            spacing: { after: 40 },
+          }),
+        );
+      }
+      if (exp.description) {
+        children.push(
+          new Paragraph({
+            children: [new TextRun({ text: exp.description, size: 18, color: "333333" })],
+            spacing: { after: 120 },
+          }),
+        );
+      }
+    });
+  }
+
+  data.extras?.forEach((extra) => {
+    children.push(sectionHeading(extra.title));
+    children.push(
+      new Paragraph({
+        children: [new TextRun({ text: extra.content, size: 18, color: "333333" })],
+        spacing: { after: 80 },
+      }),
+    );
+  });
+
+  const doc = new Document({ sections: [{ children }] });
+  return Packer.toBlob(doc);
+}
diff --git a/lib/resume-templates/traditional-pdf.tsx b/lib/resume-templates/traditional-pdf.tsx
new file mode 100644
index 0000000..e0b9d9d
--- /dev/null
+++ b/lib/resume-templates/traditional-pdf.tsx
@@ -0,0 +1,186 @@
+import React from "react";
+import { Document, Page, View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import type { ResumeTemplateData } from "./types";
+
+const styles = StyleSheet.create({
+  page: { padding: 44, fontFamily: "Helvetica", backgroundColor: "#ffffff", fontSize: 9 },
+  headerRow: { flexDirection: "row", marginBottom: 12 },
+  headerLeft: { flex: 1 },
+  name: { fontSize: 22, fontFamily: "Helvetica-Bold", color: "#111111", marginBottom: 4 },
+  headerContact: { fontSize: 9, color: "#555555", marginBottom: 2 },
+  photoBox: {
+    width: 72,
+    height: 72,
+    borderWidth: 1,
+    borderColor: "#cccccc",
+    backgroundColor: "#f0f0f0",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  photoImage: { width: 72, height: 72, objectFit: "cover" },
+  photoPlaceholder: { fontSize: 8, color: "#999999", textAlign: "center" },
+  thickDivider: { borderBottomWidth: 3, borderBottomColor: "#111111", marginBottom: 16 },
+  sectionHeading: {
+    fontSize: 10,
+    fontFamily: "Helvetica-Bold",
+    color: "#111111",
+    marginBottom: 6,
+    marginTop: 14,
+    textTransform: "uppercase",
+    borderBottomWidth: 1,
+    borderBottomColor: "#cccccc",
+    paddingBottom: 3,
+  },
+  tableRow: { flexDirection: "row", marginBottom: 4 },
+  labelCell: { width: "28%", fontSize: 8.5, fontFamily: "Helvetica-Bold", color: "#333333" },
+  valueCell: { flex: 1, fontSize: 8.5, color: "#333333", lineHeight: 1.5 },
+  body: { fontSize: 9, lineHeight: 1.55, color: "#333333", marginBottom: 4 },
+  eduLabel: {
+    fontSize: 8.5,
+    fontFamily: "Helvetica-Bold",
+    color: "#111111",
+    marginBottom: 2,
+    textTransform: "uppercase",
+    letterSpacing: 1,
+  },
+});
+
+function sanitiseName(raw: string): string {
+  return (raw ?? "").replace(/^[#\s]+|[#\s]+$/g, "").trim();
+}
+
+export function TraditionalPdf({ data }: { data: ResumeTemplateData }) {
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        {/* Header: name/contact left, photo right */}
+        <View style={styles.headerRow}>
+          <View style={styles.headerLeft}>
+            <Text style={styles.name}>{sanitiseName(data.name)}</Text>
+            {data.jobTitle ? (
+              <Text style={[styles.headerContact, { fontFamily: "Helvetica-Bold" }]}>
+                {data.jobTitle}
+              </Text>
+            ) : null}
+            {data.email ? <Text style={styles.headerContact}>{data.email}</Text> : null}
+            {data.phone ? <Text style={styles.headerContact}>{data.phone}</Text> : null}
+            {data.location ? <Text style={styles.headerContact}>{data.location}</Text> : null}
+          </View>
+          <View style={styles.photoBox}>
+            {data.photoUrl?.startsWith("data:image") ? (
+              <Image style={styles.photoImage} src={data.photoUrl} />
+            ) : (
+              <Text style={styles.photoPlaceholder}>{"Photo"}</Text>
+            )}
+          </View>
+        </View>
+
+        <View style={styles.thickDivider} />
+
+        {/* Personal Data */}
+        {(data.email || data.phone || data.location || data.jobTitle) ? (
+          <>
+            <Text style={styles.sectionHeading}>Personal Data</Text>
+            {data.jobTitle ? (
+              <View style={styles.tableRow}>
+                <Text style={styles.labelCell}>Position Applied</Text>
+                <Text style={styles.valueCell}>{data.jobTitle}</Text>
+              </View>
+            ) : null}
+            {data.email ? (
+              <View style={styles.tableRow}>
+                <Text style={styles.labelCell}>Email</Text>
+                <Text style={styles.valueCell}>{data.email}</Text>
+              </View>
+            ) : null}
+            {data.phone ? (
+              <View style={styles.tableRow}>
+                <Text style={styles.labelCell}>Phone</Text>
+                <Text style={styles.valueCell}>{data.phone}</Text>
+              </View>
+            ) : null}
+            {data.location ? (
+              <View style={styles.tableRow}>
+                <Text style={styles.labelCell}>Address</Text>
+                <Text style={styles.valueCell}>{data.location}</Text>
+              </View>
+            ) : null}
+          </>
+        ) : null}
+
+        {/* Summary */}
+        {data.summary ? (
+          <>
+            <Text style={styles.sectionHeading}>Profile Summary</Text>
+            <Text style={styles.body}>{data.summary}</Text>
+          </>
+        ) : null}
+
+        {/* Skills */}
+        {data.skills.length > 0 ? (
+          <>
+            <Text style={styles.sectionHeading}>Skills &amp; Interest</Text>
+            <Text style={styles.body}>{data.skills.map((s) => s.name).join("  •  ")}</Text>
+          </>
+        ) : null}
+
+        {/* Education */}
+        {data.educations.length > 0 ? (
+          <>
+            <Text style={styles.sectionHeading}>Education</Text>
+            {data.educations.map((edu, i) => (
+              <View key={i} style={styles.tableRow}>
+                <Text style={styles.eduLabel}>
+                  {i === 0 ? "TERTIARY" : "SECONDARY"}
+                </Text>
+                <View style={{ flex: 1 }}>
+                  <Text style={[styles.body, { fontFamily: "Helvetica-Bold" }]}>
+                    {[edu.qualification, edu.fieldOfStudy].filter(Boolean).join(", ")}
+                  </Text>
+                  <Text style={styles.body}>{edu.institution}</Text>
+                  {edu.graduationYear ? (
+                    <Text style={[styles.body, { color: "#777777" }]}>
+                      Graduated {edu.graduationYear}
+                    </Text>
+                  ) : null}
+                </View>
+              </View>
+            ))}
+          </>
+        ) : null}
+
+        {/* Work Experience */}
+        {data.experiences.length > 0 ? (
+          <>
+            <Text style={styles.sectionHeading}>Work Experience</Text>
+            {data.experiences.map((exp, i) => (
+              <View key={i} style={styles.tableRow}>
+                <Text style={styles.eduLabel}>
+                  {exp.startDate && exp.endDate
+                    ? `${exp.startDate}–${exp.endDate}`
+                    : exp.startDate || exp.endDate || ""}
+                </Text>
+                <View style={{ flex: 1 }}>
+                  <Text style={[styles.body, { fontFamily: "Helvetica-Bold" }]}>
+                    {exp.title}
+                    {exp.company ? `, ${exp.company}` : ""}
+                  </Text>
+                  {exp.description ? (
+                    <Text style={styles.body}>{exp.description}</Text>
+                  ) : null}
+                </View>
+              </View>
+            ))}
+          </>
+        ) : null}
+
+        {data.extras?.map((extra, i) => (
+          <View key={i}>
+            <Text style={styles.sectionHeading}>{extra.title}</Text>
+            <Text style={styles.body}>{extra.content}</Text>
+          </View>
+        ))}
+      </Page>
+    </Document>
+  );
+}
diff --git a/lib/resume-templates/types.ts b/lib/resume-templates/types.ts
new file mode 100644
index 0000000..7b1f6f6
--- /dev/null
+++ b/lib/resume-templates/types.ts
@@ -0,0 +1,81 @@
+export interface ResumeExperience {
+  title: string;
+  company: string;
+  location?: string;
+  startDate: string;
+  endDate: string;
+  description: string;
+}
+
+export interface ResumeEducation {
+  institution: string;
+  qualification: string;
+  fieldOfStudy?: string;
+  graduationYear?: string;
+}
+
+export interface ResumeSkill {
+  name: string;
+  level: number; // 0–100
+}
+
+export interface ResumeTemplateData {
+  name: string;
+  jobTitle?: string;
+  email?: string;
+  phone?: string;
+  location?: string;
+  summary?: string;
+  experiences: ResumeExperience[];
+  educations: ResumeEducation[];
+  skills: ResumeSkill[];
+  extras?: { title: string; content: string }[];
+  photoUrl?: string;
+}
+
+export type TemplateId =
+  | "munich"
+  | "traditional"
+  | "executive"
+  | "modern-minimal"
+  | "navy-executive";
+
+export interface TemplateOption {
+  id: TemplateId;
+  name: string;
+  description: string;
+  bestFor: string;
+}
+
+export const TEMPLATES: TemplateOption[] = [
+  {
+    id: "munich",
+    name: "Munich",
+    description: "Two-Column Classic",
+    bestFor: "Finance, legal, consulting, mid-career professionals",
+  },
+  {
+    id: "traditional",
+    name: "Traditional",
+    description: "Single Column with Photo",
+    bestFor: "Entry-level, traditional industries, photo-expected roles",
+  },
+  {
+    id: "executive",
+    name: "Executive",
+    description: "Single Column Dense",
+    bestFor: "Senior executives, content-heavy, depth over design",
+  },
+  {
+    id: "modern-minimal",
+    name: "Modern Minimal",
+    description: "Left-Label Layout",
+    bestFor: "Tech, engineering, ATS-heavy, minimalists",
+  },
+  {
+    id: "navy-executive",
+    name: "Navy Executive",
+    description: "Dark Header, Two-Column",
+    bestFor: "Executive, senior management, creative directors",
+  },
+];

From 21cc7451bb0cf3c6669b981f1ab67a2c3b26cbad Mon Sep 17 00:00:00 2001
From: zackKonfs <zack.konfs@gmail.com>
Date: Sun, 29 Mar 2026 09:43:12 +0800
Subject: [PATCH 07/13] fix: remove duplicate micState declarations breaking
 Vercel build

---
 app/interview/page.tsx | 35 -----------------------------------
 1 file changed, 35 deletions(-)

diff --git a/app/interview/page.tsx b/app/interview/page.tsx
index a921005..f49f4d6 100644
--- a/app/interview/page.tsx
+++ b/app/interview/page.tsx
@@ -130,41 +130,6 @@ export default function InterviewPage() {
     }
   }
 
-  const [micState, setMicState] = useState<"idle" | "listening" | "processing">("idle");
-  const recognizerRef = useRef<{ stop: () => void } | null>(null);
-
-  function handleMicClick() {
-    if (micState === "listening") {
-      recognizerRef.current?.stop();
-      return;
-    }
-
-    const SpeechRecognition =
-      (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
-
-    if (!SpeechRecognition) {
-      alert("Speech recognition not supported in this browser");
-      return;
-    }
-
-    const recognition = new SpeechRecognition();
-    recognition.continuous = true;
-    recognition.interimResults = false;
-    recognition.lang = "en-US";
-
-    recognition.onresult = (event: any) => {
-      const transcript = event.results[event.results.length - 1][0].transcript;
-      setTextInput((prev) => (prev ? prev + " " + transcript : transcript));
-    };
-
-    recognition.onerror = () => setMicState("idle");
-    recognition.onend = () => setMicState("idle");
-
-    recognition.start();
-    recognizerRef.current = recognition;
-    setMicState("listening");
-  }
-
   function startSession() {
     setSessionStarted(true);
     setConversation([

From dc4770198d0b3906bce31a40d2bf3a68c94bc127 Mon Sep 17 00:00:00 2001
From: zackKonfs <zack.konfs@gmail.com>
Date: Sun, 29 Mar 2026 13:54:00 +0800
Subject: [PATCH 08/13] feat: multilingual support across upload, review,
 builder and voice pages

---
 .claude/settings.local.json                 |   9 +-
 app/api/resume/route.ts                     |  59 +-
 app/api/resume/translate/route.ts           |  82 +++
 app/api/resume/voice-autocorrect/route.ts   |  77 ++
 app/api/resume/voice-build/route.ts         | 147 +++-
 app/api/speech/route.ts                     |  14 +
 app/resume/builder/page.tsx                 |  48 +-
 app/resume/page.tsx                         | 127 ++--
 app/resume/review/page.tsx                  |  53 +-
 app/resume/voice/page.tsx                   | 750 +++++++++++++-------
 components/resume/TemplatePickerModal.tsx   |  27 +-
 lib/i18n/translations/en.ts                 |  57 ++
 lib/i18n/translations/ms.ts                 |  57 ++
 lib/i18n/translations/ta.ts                 |  57 ++
 lib/i18n/translations/zh.ts                 |  57 ++
 lib/resume-templates/download.ts            |   2 +-
 lib/resume-templates/executive-pdf.tsx      |  14 +-
 lib/resume-templates/modern-minimal-pdf.tsx |  10 +-
 lib/resume-templates/munich-pdf.tsx         |  12 +-
 lib/resume-templates/navy-executive-pdf.tsx |  12 +-
 lib/resume-templates/traditional-pdf.tsx    |  14 +-
 lib/services/db.ts                          |   2 +
 lib/speech/speakText.ts                     |  79 +++
 23 files changed, 1341 insertions(+), 425 deletions(-)
 create mode 100644 app/api/resume/translate/route.ts
 create mode 100644 app/api/resume/voice-autocorrect/route.ts
 create mode 100644 lib/speech/speakText.ts

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 5e1da77..6c895fe 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -2,7 +2,14 @@
   "permissions": {
     "allow": [
       "Bash(npx tsc:*)",
-      "Bash(find /c/Users/zackx/vericlause -maxdepth 3 -type f \\\\\\(-name .cursor* -o -name *rules* \\\\\\))"
+      "Bash(find /c/Users/zackx/vericlause -maxdepth 3 -type f \\\\\\(-name .cursor* -o -name *rules* \\\\\\))",
+      "Bash(npx next:*)",
+      "Bash(node -e \"require\\(''fs''\\).readFileSync\\(''app/api/resume/voice-build/route.ts'',''utf8''\\)\")",
+      "Bash(npx tsx:*)",
+      "Bash(npx eslint:*)",
+      "Bash(npm run:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)"
     ]
   }
 }
diff --git a/app/api/resume/route.ts b/app/api/resume/route.ts
index f284240..c3a1988 100644
--- a/app/api/resume/route.ts
+++ b/app/api/resume/route.ts
@@ -9,7 +9,7 @@ import { getAuthenticatedUser } from "@/lib/services/db";
 const OPENAI_MODEL = "gpt-4o-mini";
 const GROQ_FALLBACK_MODEL = "llama-3.1-8b-instant";
 
-const SYSTEM_PROMPT = `You are an elite Singapore resume advisor: language coach, ATS specialist, Singapore market expert (MOM standards, local hiring norms), and career progression analyst. Be specific — always reference actual resume content, never generic advice. Salary benchmarks must be SGD Singapore market rates.
+const BASE_SYSTEM_PROMPT = `You are an elite Singapore resume advisor: language coach, ATS specialist, Singapore market expert (MOM standards, local hiring norms), and career progression analyst. Be specific — always reference actual resume content, never generic advice. Salary benchmarks must be SGD Singapore market rates.
 
 Return ONLY valid JSON with exactly these fields:
 
@@ -19,6 +19,22 @@ Score rubric (1–10): 2pts quantified achievements with numbers; 2pts Singapore
 
 No text outside the JSON.`;
 
+function getLanguageName(code: string): string {
+  const names: Record<string, string> = {
+    zh: "Simplified Chinese (简体中文)",
+    ms: "Bahasa Melayu",
+    ta: "Tamil (தமிழ்)",
+  };
+  return names[code] || "English";
+}
+
+function buildSystemPrompt(language?: string): string {
+  if (!language || language === "en") return BASE_SYSTEM_PROMPT;
+  const langName = getLanguageName(language);
+  const instruction = `IMPORTANT: You must respond entirely in ${langName}. All feedback, suggestions, and analysis must be written in ${langName}. Do not use English anywhere in your response.\n\n`;
+  return instruction + BASE_SYSTEM_PROMPT;
+}
+
 export interface ResumeFeedback {
   overallImpression: string;
   keyStrengths: string[];
@@ -51,7 +67,8 @@ function extractJson(text: string): string {
   return text.trim();
 }
 
-async function callLlm(resumeText: string): Promise<string> {
+async function callLlm(resumeText: string, language?: string): Promise<string> {
+  const systemPrompt = buildSystemPrompt(language);
   const openaiKey = process.env.OPENAI_API_KEY;
   if (openaiKey) {
     try {
@@ -59,7 +76,7 @@ async function callLlm(resumeText: string): Promise<string> {
       const response = await client.chat.completions.create({
         model: OPENAI_MODEL,
         messages: [
-          { role: "system", content: SYSTEM_PROMPT },
+          { role: "system", content: systemPrompt },
           { role: "user", content: resumeText.slice(0, 120_000) },
         ],
         temperature: 0,
@@ -77,7 +94,7 @@ async function callLlm(resumeText: string): Promise<string> {
   const response = await client.chat.completions.create({
     model: GROQ_FALLBACK_MODEL,
     messages: [
-      { role: "system", content: SYSTEM_PROMPT },
+      { role: "system", content: systemPrompt },
       { role: "user", content: resumeText.slice(0, 120_000) },
     ],
     temperature: 0,
@@ -93,6 +110,8 @@ export async function POST(req: NextRequest) {
 
   const formData = await req.formData();
   const file = formData.get("file");
+  const language = (formData.get("language") as string | null) ?? "en";
+  const translatedText = (formData.get("translatedText") as string | null) ?? null;
 
   if (!file || !(file instanceof Blob)) {
     return NextResponse.json({ detail: "No file provided" }, { status: 400 });
@@ -108,25 +127,29 @@ export async function POST(req: NextRequest) {
   }
 
   let resumeText: string;
-  try {
-    const arrayBuffer = await file.arrayBuffer();
-    const uint8Array = new Uint8Array(arrayBuffer);
-    const { text } = await extractText(uint8Array, { mergePages: true });
-    resumeText = text;
-  } catch (e) {
-    return NextResponse.json(
-      { detail: `File could not be read: ${e instanceof Error ? e.message : e}` },
-      { status: 422 },
-    );
-  }
+  if (translatedText && translatedText.trim()) {
+    resumeText = translatedText;
+  } else {
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const uint8Array = new Uint8Array(arrayBuffer);
+      const { text } = await extractText(uint8Array, { mergePages: true });
+      resumeText = text;
+    } catch (e) {
+      return NextResponse.json(
+        { detail: `File could not be read: ${e instanceof Error ? e.message : e}` },
+        { status: 422 },
+      );
+    }
 
-  if (!resumeText.trim()) {
-    return NextResponse.json({ detail: "File produced no text" }, { status: 422 });
+    if (!resumeText.trim()) {
+      return NextResponse.json({ detail: "File produced no text" }, { status: 422 });
+    }
   }
 
   let raw: string;
   try {
-    raw = await callLlm(resumeText);
+    raw = await callLlm(resumeText, language);
   } catch (e) {
     return NextResponse.json(
       { detail: `AI analysis failed: ${e instanceof Error ? e.message : e}` },
diff --git a/app/api/resume/translate/route.ts b/app/api/resume/translate/route.ts
new file mode 100644
index 0000000..303761b
--- /dev/null
+++ b/app/api/resume/translate/route.ts
@@ -0,0 +1,82 @@
+export const runtime = "nodejs";
+
+import { NextRequest, NextResponse } from "next/server";
+import OpenAI from "openai";
+
+function getLanguageName(code: string): string {
+  const names: Record<string, string> = {
+    zh: "Simplified Chinese (简体中文)",
+    ms: "Bahasa Melayu",
+    ta: "Tamil (தமிழ்)",
+  };
+  return names[code] || "English";
+}
+
+export async function POST(req: NextRequest) {
+  const body = await req.json();
+  const { resumeData, text, targetLanguage } = body as {
+    resumeData?: unknown;
+    text?: string;
+    targetLanguage?: string;
+  };
+  const isTextMode = typeof text === "string";
+
+  if (!targetLanguage || targetLanguage === "en") {
+    return NextResponse.json(isTextMode ? { translatedText: text } : { translatedData: resumeData });
+  }
+
+  const langName = getLanguageName(targetLanguage);
+  const openaiKey = process.env.OPENAI_API_KEY;
+  if (!openaiKey) {
+    return NextResponse.json(isTextMode ? { translatedText: text } : { translatedData: resumeData });
+  }
+
+  try {
+    const client = new OpenAI({ apiKey: openaiKey });
+
+    if (isTextMode) {
+      // Raw text translation mode
+      const response = await client.chat.completions.create({
+        model: "gpt-4o-mini",
+        temperature: 0,
+        messages: [
+          {
+            role: "system",
+            content: `Translate the following resume text to ${langName}. Preserve all formatting, dates, numbers, and proper nouns. Return only the translated text.`,
+          },
+          { role: "user", content: text! },
+        ],
+      });
+      const translatedText = response.choices[0]?.message?.content ?? text!;
+      return NextResponse.json({ translatedText });
+    }
+
+    // JSON object translation mode
+    const response = await client.chat.completions.create({
+      model: "gpt-4o-mini",
+      temperature: 0,
+      messages: [
+        {
+          role: "system",
+          content: `Translate all string values in the given JSON object to ${langName}. Preserve the JSON structure and all keys exactly. Only translate the values. Return only valid JSON with no extra text.`,
+        },
+        {
+          role: "user",
+          content: JSON.stringify(resumeData),
+        },
+      ],
+    });
+
+    const raw = response.choices[0]?.message?.content ?? "";
+    const braceStart = raw.indexOf("{");
+    const braceEnd = raw.lastIndexOf("}");
+    if (braceStart === -1 || braceEnd <= braceStart) {
+      return NextResponse.json({ translatedData: resumeData });
+    }
+    const translatedData = JSON.parse(raw.slice(braceStart, braceEnd + 1));
+    return NextResponse.json({ translatedData });
+  } catch {
+    // Graceful degradation — return original data untranslated
+    return NextResponse.json(isTextMode ? { translatedText: text } : { translatedData: resumeData });
+  }
+}
diff --git a/app/api/resume/voice-autocorrect/route.ts b/app/api/resume/voice-autocorrect/route.ts
new file mode 100644
index 0000000..22fadd2
--- /dev/null
+++ b/app/api/resume/voice-autocorrect/route.ts
@@ -0,0 +1,77 @@
+export const runtime = "nodejs";
+
+import { NextResponse } from "next/server";
+import OpenAI from "openai";
+
+const openai = new OpenAI();
+
+export async function POST(request: Request) {
+  let body: { text?: string; questionType?: string; language?: string };
+
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json(
+      { error: "Invalid JSON body" },
+      { status: 400 },
+    );
+  }
+
+  const { text, questionType, language } = body;
+
+  if (!text || typeof text !== "string") {
+    return NextResponse.json(
+      { error: "Missing required field: text" },
+      { status: 400 },
+    );
+  }
+
+  const qType = questionType ?? "general";
+  const lang = language ?? "en";
+
+  // --- Age validation: handled locally, no LLM needed ---
+  if (qType === "age") {
+    const match = text.match(/\d+/);
+    if (match) {
+      return NextResponse.json({ corrected: match[0], valid: true });
+    }
+    return NextResponse.json({ corrected: "INVALID", valid: false });
+  }
+
+  // --- Build system prompt ---
+  let systemPrompt =
+    "You are a speech-to-text post-processor. " +
+    "Correct transcription errors where words sound similar but do not fit the context. " +
+    "Preserve proper nouns and names exactly unless they are clearly garbled. " +
+    "Return only the corrected text with no explanation.";
+
+  if (qType === "name") {
+    systemPrompt +=
+      " If the text appears to be a name spelled out letter by letter " +
+      '(e.g. "J A Y S O N"), reconstruct it as a proper name (e.g. "Jayson").';
+  }
+
+  if (lang !== "en") {
+    systemPrompt += ` The text is in language code "${lang}". Preserve the original language.`;
+  }
+
+  try {
+    const completion = await openai.chat.completions.create({
+      model: "gpt-4o-mini",
+      temperature: 0.2,
+      max_tokens: 512,
+      messages: [
+        { role: "system", content: systemPrompt },
+        { role: "user", content: text },
+      ],
+    });
+
+    const corrected = completion.choices[0]?.message?.content?.trim() ?? text;
+
+    return NextResponse.json({ corrected, valid: true });
+  } catch (err) {
+    console.error("[voice-autocorrect] OpenAI error:", err);
+    // Graceful degradation: return original text uncorrected
+    return NextResponse.json({ corrected: text, valid: true });
+  }
+}
diff --git a/app/api/resume/voice-build/route.ts b/app/api/resume/voice-build/route.ts
index fdb25e5..19de802 100644
--- a/app/api/resume/voice-build/route.ts
+++ b/app/api/resume/voice-build/route.ts
@@ -4,15 +4,100 @@ import { NextRequest, NextResponse } from "next/server";
 import OpenAI from "openai";
 import Groq from "groq-sdk";
 import { getAuthenticatedUser, insertResume } from "@/lib/services/db";
-import type { ResumeProfile } from "@/lib/types";
+import type { ResumeProfile, ResumeSuggestion } from "@/lib/types";
+import type { ResumeFeedback } from "@/app/api/resume/route";
 
 const OPENAI_MODEL = "gpt-4o-mini";
 const GROQ_FALLBACK_MODEL = "llama-3.1-8b-instant";
 
-const SYSTEM_PROMPT = `You are a professional resume writer for Singapore's job market. The user has provided raw voice transcript answers to resume questions. The transcripts may have errors or incomplete sentences from speech recognition.
+const FEEDBACK_SYSTEM_PROMPT = `You are an elite Singapore resume advisor: language coach, ATS specialist, Singapore market expert (MOM standards, local hiring norms), and career progression analyst. Be specific — always reference actual resume content, never generic advice. Salary benchmarks must be SGD Singapore market rates.
+
+Return ONLY valid JSON with exactly these fields:
+
+{"overallImpression":"3–4 sentences: profile strength, Singapore market positioning, target role fit","keyStrengths":["specific strength referencing actual resume content","strength 2","strength 3"],"areasToImprove":["specific gap explaining why it weakens the resume in Singapore's market","gap 2","gap 3"],"suggestedEdits":["exact rewrite (not advice) e.g. change 'Managed social media' to 'Grew combined social following 40% to 120k'","edit 2","edit 3"],"atsAnalysis":{"keywordsFound":["kw1","kw2"],"keywordsMissing":["missing1","missing2"],"atsFriendly":true,"atsNotes":"One sentence on ATS suitability"},"careerProgression":"2 sentences on trajectory logic and competitiveness for the candidate's level in Singapore","salaryBenchmark":{"estimatedRange":"SGD X,000–Y,000/month","rationale":"One sentence based on role, sector, and years of experience"},"score":5}
+
+Score rubric (1–10): 2pts quantified achievements with numbers; 2pts Singapore market/MOM alignment; 2pts structure/ATS compatibility; 2pts action verb quality; 2pts completeness (contact, history, education, skills).
+
+No text outside the JSON.`;
+
+function feedbackToSuggestions(feedback: ResumeFeedback): ResumeSuggestion[] {
+  const suggestions: ResumeSuggestion[] = [];
+  for (const edit of feedback.suggestedEdits ?? []) {
+    suggestions.push({ type: "enhancement", priority: "medium", category: "content", suggestion: edit });
+  }
+  for (const area of feedback.areasToImprove ?? []) {
+    suggestions.push({ type: "content_gap", priority: "high", category: "content", suggestion: area });
+  }
+  for (const kw of feedback.atsAnalysis?.keywordsMissing ?? []) {
+    suggestions.push({ type: "ats_optimization", priority: "medium", category: "keywords", suggestion: `Add keyword: "${kw}"` });
+  }
+  return suggestions;
+}
+
+async function generateFeedback(rawText: string, language?: string): Promise<ResumeFeedback | null> {
+  const feedbackPrompt = buildLanguageInstruction(language) + FEEDBACK_SYSTEM_PROMPT;
+  try {
+    const openaiKey = process.env.OPENAI_API_KEY;
+    let raw = "";
+    if (openaiKey) {
+      try {
+        const client = new OpenAI({ apiKey: openaiKey });
+        const response = await client.chat.completions.create({
+          model: OPENAI_MODEL,
+          messages: [
+            { role: "system", content: feedbackPrompt },
+            { role: "user", content: rawText.slice(0, 12000) },
+          ],
+          temperature: 0,
+        });
+        raw = response.choices[0]?.message?.content ?? "";
+      } catch {
+        const groqKey = process.env.GROQ_API_KEY;
+        if (groqKey) {
+          const client = new Groq({ apiKey: groqKey });
+          const response = await client.chat.completions.create({
+            model: GROQ_FALLBACK_MODEL,
+            messages: [
+              { role: "system", content: feedbackPrompt },
+              { role: "user", content: rawText.slice(0, 12000) },
+            ],
+            temperature: 0,
+          });
+          raw = response.choices[0]?.message?.content ?? "";
+        }
+      }
+    }
+    if (!raw) return null;
+    const braceStart = raw.indexOf("{");
+    const braceEnd = raw.lastIndexOf("}");
+    if (braceStart === -1 || braceEnd <= braceStart) return null;
+    return JSON.parse(raw.slice(braceStart, braceEnd + 1)) as ResumeFeedback;
+  } catch {
+    return null;
+  }
+}
+
+function getLanguageName(code: string): string {
+  const names: Record<string, string> = {
+    zh: "Simplified Chinese (简体中文)",
+    ms: "Bahasa Melayu",
+    ta: "Tamil (தமிழ்)",
+  };
+  return names[code] || "English";
+}
+
+function buildLanguageInstruction(language?: string): string {
+  if (!language || language === "en") return "";
+  const langName = getLanguageName(language);
+  return `IMPORTANT: All text values in the JSON output must be written in ${langName}. Do not use English in any field value.\n\n`;
+}
+
+const BASE_COMPILATION_PROMPT = `You are a professional resume writer for Singapore's job market. The user has provided raw voice transcript answers to resume questions. The transcripts may have errors or incomplete sentences from speech recognition.
 
 Auto-correct the language, fix grammar, and compile the answers into a clean, professionally formatted resume. Keep all facts as stated. For a simplified entry-level resume, focus on clarity over complexity.
 
+If the candidate's name appears to contain individual letters separated by spaces (e.g. J A Y S O N), reconstruct it as a single proper name. Strip any leading or trailing hash symbols or special characters from the name before saving.
+
 Return ONLY a valid JSON object with exactly these fields:
 {
   "name": "string",
@@ -27,7 +112,8 @@ Return ONLY a valid JSON object with exactly these fields:
 
 No text outside the JSON. If a field has no data, return an empty string for it.`;
 
-async function callLlm(prompt: string): Promise<string> {
+async function callLlm(prompt: string, language?: string): Promise<string> {
+  const systemPrompt = buildLanguageInstruction(language) + BASE_COMPILATION_PROMPT;
   const openaiKey = process.env.OPENAI_API_KEY;
   if (openaiKey) {
     try {
@@ -35,7 +121,7 @@ async function callLlm(prompt: string): Promise<string> {
       const response = await client.chat.completions.create({
         model: OPENAI_MODEL,
         messages: [
-          { role: "system", content: SYSTEM_PROMPT },
+          { role: "system", content: systemPrompt },
           { role: "user", content: prompt },
         ],
         temperature: 0.2,
@@ -53,7 +139,7 @@ async function callLlm(prompt: string): Promise<string> {
   const response = await client.chat.completions.create({
     model: GROQ_FALLBACK_MODEL,
     messages: [
-      { role: "system", content: SYSTEM_PROMPT },
+      { role: "system", content: systemPrompt },
       { role: "user", content: prompt },
     ],
     temperature: 0.2,
@@ -67,23 +153,56 @@ export async function POST(req: NextRequest) {
     return NextResponse.json({ detail: "Unauthorized" }, { status: 401 });
   }
 
-  const answers = await req.json();
+  const body = await req.json();
+  const { language, ...answers } = body ?? {};
+
+  // TASK E: Input validation — block empty or near-empty submissions
+  if (!answers || typeof answers !== "object") {
+    return NextResponse.json({ error: "No answers provided" }, { status: 400 });
+  }
+
+  const allValues = [
+    answers.full_name, answers.age, answers.job_title,
+    answers.summary, answers.experience, answers.achievement,
+    answers.education, answers.skills, answers.anything_else,
+  ];
+  const nonEmptyCount = allValues.filter(
+    (v) => typeof v === "string" && v.trim().length > 0
+  ).length;
+  if (nonEmptyCount < 3) {
+    return NextResponse.json(
+      { error: "Please answer at least 3 questions before generating your resume" },
+      { status: 400 },
+    );
+  }
+
+  // TASK C: Age guard — only pass age to the prompt if it's a valid number between 15 and 80.
+  // Voice transcription can produce garbled numbers; invalid ages are silently dropped
+  // rather than sent to the LLM where they'd pollute the resume.
+  let sanitizedAge: string | null = null;
+  if (answers.age) {
+    const parsed = Number(answers.age);
+    if (!Number.isNaN(parsed) && parsed >= 15 && parsed <= 80) {
+      sanitizedAge = String(parsed);
+    }
+  }
 
   const prompt = [
     answers.full_name ? `Full Name: ${answers.full_name}` : "",
-    answers.age ? `Age: ${answers.age}` : "",
+    sanitizedAge ? `Age: ${sanitizedAge}` : "",
     answers.job_title ? `Target Role: ${answers.job_title}` : "",
     answers.summary ? `Professional Summary (voice): ${answers.summary}` : "",
     answers.experience ? `Work Experience (voice): ${answers.experience}` : "",
     answers.achievement ? `Key Achievement (voice): ${answers.achievement}` : "",
     answers.education ? `Education (voice): ${answers.education}` : "",
     answers.skills ? `Skills (voice): ${answers.skills}` : "",
+    answers.anything_else ? `Additional information (voice): ${answers.anything_else}` : "",
   ]
     .filter(Boolean)
     .join("\n");
 
   try {
-    const raw = await callLlm(prompt);
+    const raw = await callLlm(prompt, language);
     const braceStart = raw.indexOf("{");
     const braceEnd = raw.lastIndexOf("}");
     if (braceStart === -1 || braceEnd <= braceStart) {
@@ -111,9 +230,11 @@ export async function POST(req: NextRequest) {
       seniority_level: null,
     };
 
-    // Build a raw_text representation so the resume is searchable/readable in Supabase
+    // Build a raw_text representation so the resume is searchable/readable in Supabase.
+    // The name must be the bare first line (no "Name:" prefix) so extractCandidateName
+    // in the review page can find it — that function filters lines containing "Name:".
     const rawText = [
-      result.name ? `Name: ${result.name}` : "",
+      result.name || "",
       result.targetRole ? `Target Role: ${result.targetRole}` : "",
       result.summary ? `Summary:\n${result.summary}` : "",
       result.experience ? `Experience:\n${result.experience}` : "",
@@ -123,9 +244,11 @@ export async function POST(req: NextRequest) {
     ].filter(Boolean).join("\n\n");
 
     const fileName = result.name ? `${result.name} - Voice Resume` : "Voice Resume";
-    const saved = await insertResume(user.id, fileName, rawText, profile);
+    const feedback = await generateFeedback(rawText, language);
+    const aiSuggestions = feedback ? feedbackToSuggestions(feedback) : null;
+    const saved = await insertResume(user.id, fileName, rawText, profile, undefined, undefined, aiSuggestions);
 
-    return NextResponse.json({ ...result, resume_id: saved.id });
+    return NextResponse.json({ success: true, resumeId: saved.id, resumeData: result, feedback });
   } catch (e) {
     return NextResponse.json(
       { detail: `Resume generation failed: ${e instanceof Error ? e.message : e}` },
diff --git a/app/api/speech/route.ts b/app/api/speech/route.ts
index 434ca50..87c7bc7 100644
--- a/app/api/speech/route.ts
+++ b/app/api/speech/route.ts
@@ -2,6 +2,20 @@ export const runtime = "nodejs";
 
 import { NextResponse } from "next/server";
 
+/**
+ * GET /api/speech — Azure Speech SDK token proxy.
+ *
+ * TTS front-cutoff fix (applied client-side):
+ * The Web Speech API SpeechSynthesis can clip the first ~200-300ms of an
+ * utterance if the audio output device is still spinning up. Two mitigations
+ * are used in the shared TTS helper (`lib/speech/speakText.ts`):
+ *   1. `speechSynthesis.cancel()` before every new utterance to flush the
+ *      queue and reset the synthesiser state.
+ *   2. A 300ms silence is prepended to each utterance via SSML
+ *      (`<break time="300ms"/>`) so that any clipped audio falls within the
+ *      silent padding, not the actual spoken content.
+ * See `lib/speech/speakText.ts` for the implementation.
+ */
 export async function GET() {
   const key = process.env.AZURE_SPEECH_KEY;
   const region = process.env.AZURE_SPEECH_REGION;
diff --git a/app/resume/builder/page.tsx b/app/resume/builder/page.tsx
index 7764eae..845d403 100644
--- a/app/resume/builder/page.tsx
+++ b/app/resume/builder/page.tsx
@@ -182,11 +182,11 @@ export default function ResumeBuilderPage() {
     { id: createId(), name: "Documentation", level: 90 },
   ]);
 
-  const [extraSections, setExtraSections] = useState<ExtraSection[]>([
+  const [extraSections, setExtraSections] = useState<ExtraSection[]>(() => [
     {
       id: createId(),
       title: "Certifications",
-      content: "Add certifications, awards, volunteer work, languages, or any other optional section here.",
+      content: t("builder_optional_placeholder"),
     },
   ]);
 
@@ -576,7 +576,7 @@ export default function ResumeBuilderPage() {
                   </div>
 
                   <div className="md:col-span-2">
-                    <label className="mb-2 block text-sm font-medium text-slate-700">Location</label>
+                    <label className="mb-2 block text-sm font-medium text-slate-700">{t("resume_builder_label_location")}</label>
                     <input
                       value={location}
                       onChange={(e) => setLocation(e.target.value)}
@@ -634,7 +634,7 @@ export default function ResumeBuilderPage() {
                         className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
                       />
                       <input
-                        placeholder="Company"
+                        placeholder={t("resume_builder_ph_company")}
                         value={item.company}
                         onChange={(e) => updateExperience(item.id, "company", e.target.value)}
                         onBlur={(e) => void handleCompanyBlur(item.id, e.target.value)}
@@ -647,7 +647,7 @@ export default function ResumeBuilderPage() {
                         className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
                       />
                       <div className="space-y-2">
-                        <p className="text-xs font-medium text-slate-500">Start date</p>
+                        <p className="text-xs font-medium text-slate-500">{t("builder_start_date")}</p>
                         <MonthYearPicker
                           month={item.startMonth}
                           year={item.startYear}
@@ -656,7 +656,7 @@ export default function ResumeBuilderPage() {
                             updateExperience(item.id, "startYear", y);
                           }}
                         />
-                        <p className="pt-1 text-xs font-medium text-slate-500">End date</p>
+                        <p className="pt-1 text-xs font-medium text-slate-500">{t("builder_end_date")}</p>
                         {!item.endIsPresent && (
                           <MonthYearPicker
                             month={item.endMonth}
@@ -674,7 +674,7 @@ export default function ResumeBuilderPage() {
                             onChange={(e) => updateExperience(item.id, "endIsPresent", e.target.checked)}
                             className="accent-navy-950"
                           />
-                          Present
+                          {t("builder_present_only")}
                         </label>
                         {(() => {
                           const dur = calcDuration(item.startMonth, item.startYear, item.endMonth, item.endYear, item.endIsPresent);
@@ -751,13 +751,13 @@ export default function ResumeBuilderPage() {
 
             <div className="rounded-2xl border border-slate-200 bg-slate-50 p-5">
               <div className="flex items-center justify-between gap-4">
-                <h2 className="text-xl font-semibold text-navy-950">Education</h2>
+                <h2 className="text-xl font-semibold text-navy-950">{t("resume_builder_education_title")}</h2>
                 <button
                   type="button"
                   onClick={addEducation}
                   className="rounded-lg bg-navy-950 px-4 py-2 text-sm font-medium text-white transition hover:opacity-90"
                 >
-                  Add Education
+                  {t("resume_builder_add_education")}
                 </button>
               </div>
 
@@ -781,7 +781,7 @@ export default function ResumeBuilderPage() {
 
                     <div className="grid gap-4 md:grid-cols-2">
                       <input
-                        placeholder="School"
+                        placeholder={t("resume_builder_ph_school")}
                         value={item.school}
                         onChange={(e) => updateEducation(item.id, "school", e.target.value)}
                         className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
@@ -799,7 +799,7 @@ export default function ResumeBuilderPage() {
                         className="rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
                       />
                       <div className="space-y-2">
-                        <p className="text-xs font-medium text-slate-500">Start date</p>
+                        <p className="text-xs font-medium text-slate-500">{t("builder_start_date")}</p>
                         <MonthYearPicker
                           month={item.startMonth}
                           year={item.startYear}
@@ -808,7 +808,7 @@ export default function ResumeBuilderPage() {
                             updateEducation(item.id, "startYear", y);
                           }}
                         />
-                        <p className="pt-1 text-xs font-medium text-slate-500">End / Graduation date</p>
+                        <p className="pt-1 text-xs font-medium text-slate-500">{t("builder_end_date")}</p>
                         {!item.endIsPresent && (
                           <MonthYearPicker
                             month={item.endMonth}
@@ -826,7 +826,7 @@ export default function ResumeBuilderPage() {
                             onChange={(e) => updateEducation(item.id, "endIsPresent", e.target.checked)}
                             className="accent-navy-950"
                           />
-                          Present / Ongoing
+                          {t("builder_present")}
                         </label>
                         {(() => {
                           const dur = calcDuration(item.startMonth, item.startYear, item.endMonth, item.endYear, item.endIsPresent);
@@ -855,13 +855,15 @@ export default function ResumeBuilderPage() {
                 {extraSections.map((section, index) => (
                   <div key={section.id} className="rounded-2xl border border-slate-200 bg-white p-5">
                     <div className="mb-4 flex items-center justify-between">
-                      <p className="text-sm font-semibold text-slate-700">Optional Section {index + 1}</p>
+                      <p className="text-sm font-semibold text-slate-700">
+                        {t("builder_optional_section").replace("{n}", String(index + 1))}
+                      </p>
                       <button
                         type="button"
                         onClick={() => removeExtraSection(section.id)}
                         className="text-sm font-medium text-red-600"
                       >
-                        Remove
+                        {t("resume_builder_remove")}
                       </button>
                     </div>
 
@@ -873,7 +875,7 @@ export default function ResumeBuilderPage() {
                     />
 
                     <textarea
-                      placeholder="Add section content"
+                      placeholder={t("resume_builder_ph_section_content")}
                       value={section.content}
                       onChange={(e) => updateExtraSection(section.id, "content", e.target.value)}
                       className="mt-4 min-h-[120px] w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-navy-950"
@@ -883,13 +885,19 @@ export default function ResumeBuilderPage() {
               </div>
             </div>
 
-            <div className="flex justify-end">
+            <div className="flex justify-end gap-3">
+              <Link
+                href="/resume/review"
+                className="rounded-xl border border-slate-200 bg-white px-6 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
+              >
+                {t("builder_back_to_review")}
+              </Link>
               <button
                 type="button"
                 onClick={() => setShowTemplatePicker(true)}
                 className="rounded-xl bg-navy-950 px-6 py-3 text-sm font-semibold text-white transition hover:bg-navy-800"
               >
-                Download Resume
+                {t("builder_download")}
               </button>
             </div>
           </section>
@@ -946,7 +954,7 @@ export default function ResumeBuilderPage() {
                               {[
                                 item.location,
                                 item.startYear ? formatDate(item.startMonth, item.startYear) : null,
-                                item.endIsPresent ? "Present" : item.endYear ? formatDate(item.endMonth, item.endYear) : null,
+                                item.endIsPresent ? t("builder_present_only") : item.endYear ? formatDate(item.endMonth, item.endYear) : null,
                               ].filter(Boolean).join(" • ")}
                             </p>
                             <p className="mt-1 whitespace-pre-wrap text-sm leading-6 text-slate-700">
@@ -998,7 +1006,7 @@ export default function ResumeBuilderPage() {
                             <p className="text-xs text-slate-500">
                               {[
                                 item.startYear ? formatDate(item.startMonth, item.startYear) : null,
-                                item.endIsPresent ? "Present" : item.endYear ? formatDate(item.endMonth, item.endYear) : null,
+                                item.endIsPresent ? t("builder_present_only") : item.endYear ? formatDate(item.endMonth, item.endYear) : null,
                               ].filter(Boolean).join(" – ")}
                             </p>
                           </div>
diff --git a/app/resume/page.tsx b/app/resume/page.tsx
index d9223cf..fc5dcda 100644
--- a/app/resume/page.tsx
+++ b/app/resume/page.tsx
@@ -3,25 +3,17 @@
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useRef, useState } from "react";
-
-const ANALYSIS_STEPS = [
-  "Reading your resume…",
-  "Running ATS keyword scan…",
-  "Analysing career progression…",
-  "Generating salary benchmarks…",
-  "Finalising feedback…",
-] as const;
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { ResumeList } from "@/components/resume/ResumeList";
 import { useLanguage } from "@/components/providers/language-provider";
 import { useResumeStatus } from "@/components/providers/resume-status-provider";
 import { createClient } from "@/lib/supabase/client";
-import { getProfileJob, listResumes, profileResume, uploadResume, type ResumeSummary } from "@/lib/api";
+import { getProfileJob, getResumeById, listResumes, profileResume, uploadResume, type ResumeSummary } from "@/lib/api";
 import type { ResumeProfile } from "@/lib/types";
 import type { ResumeFeedback } from "@/app/api/resume/route";
 
 function ResumeOnboardingContent() {
-  const { t } = useLanguage();
+  const { t, locale } = useLanguage();
   const { status: resumeStatus, refetch: refetchResumeStatus } = useResumeStatus();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -43,10 +35,19 @@ function ResumeOnboardingContent() {
   const [uploadComplete, setUploadComplete] = useState(false);
   const [feedback, setFeedback] = useState<ResumeFeedback | null>(null);
   const [analysing, setAnalysing] = useState(false);
+  const [translating, setTranslating] = useState(false);
   const [analysisStep, setAnalysisStep] = useState(0);
   const [analysisError, setAnalysisError] = useState<string | null>(null);
   const [analysisComplete, setAnalysisComplete] = useState(false);
 
+  const analysisSteps = [
+    t("upload_step_reading"),
+    t("upload_step_ats"),
+    t("upload_step_career"),
+    t("upload_step_salary"),
+    t("upload_step_finalising"),
+  ];
+
   // Stage 0 = no file, 1 = file selected, 2 = uploaded, 3 = analysed
   const stage = !selectedFile ? 0 : !uploadComplete ? 1 : !analysisComplete ? 2 : 3;
 
@@ -219,10 +220,35 @@ function ResumeOnboardingContent() {
     setAnalysisError(null);
     setFeedback(null);
 
+    // FIX 2: translate resume text if non-English locale
+    let translatedText: string | null = null;
+    if (locale !== "en" && lastResumeId) {
+      setTranslating(true);
+      try {
+        const resumeData = await getResumeById(lastResumeId);
+        const rawText = resumeData?.resume?.raw_text;
+        if (rawText) {
+          const res = await fetch("/api/resume/translate", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ text: rawText, targetLanguage: locale }),
+          });
+          const data = await res.json();
+          translatedText = (data.translatedText as string) || null;
+        }
+      } catch {
+        // ignore — proceed without translation
+      } finally {
+        setTranslating(false);
+      }
+    }
+
     try {
       const formData = new FormData();
       formData.append("file", selectedFile);
       formData.append("voiceText", voiceText);
+      formData.append("language", locale);
+      if (translatedText) formData.append("translatedText", translatedText);
 
       const res = await fetch("/api/resume", { method: "POST", body: formData });
       const json = await res.json();
@@ -261,7 +287,10 @@ function ResumeOnboardingContent() {
     const recognition = new SpeechRecognition();
     recognition.continuous = true;
     recognition.interimResults = false;
-    recognition.lang = "en-US";
+    const micLangMap: Record<string, string> = {
+      en: "en-SG", zh: "zh-CN", ms: "ms-MY", ta: "ta-IN",
+    };
+    recognition.lang = micLangMap[locale] ?? "en-SG";
 
     recognition.onresult = (event: any) => {
       const transcript = event.results[event.results.length - 1][0].transcript;
@@ -394,19 +423,19 @@ function ResumeOnboardingContent() {
               {/* Stage 2 banner — upload done, waiting for analysis */}
               {stage === 2 ? (
                 <p className="mt-3 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
-                  Resume uploaded successfully. Click <strong>Analyse My Resume</strong> to get your AI feedback.
+                  {t("upload_success_banner")}
                 </p>
               ) : null}
             </form>
 
             <div className="mt-5">
               <label className="mb-2 block text-sm font-medium text-slate-700">
-                Or describe your experience verbally
+                {t("voice_describe_label")}
               </label>
               <textarea
                 value={voiceText}
                 onChange={(e) => setVoiceText(e.target.value)}
-                placeholder="Your spoken input will appear here..."
+                placeholder={t("voice_textarea_placeholder")}
                 rows={4}
                 className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-navy-950"
               />
@@ -416,20 +445,26 @@ function ResumeOnboardingContent() {
             <button
               type="button"
               onClick={() => void handleAnalyse()}
-              disabled={stage !== 2 || analysing}
+              disabled={stage !== 2 || analysing || translating}
               className={`mt-4 w-full rounded-xl px-4 py-3 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none ${
-                stage === 2 && !analysing
+                stage === 2 && !analysing && !translating
                   ? "border border-[#b88a44] text-[#b88a44] hover:bg-amber-50"
                   : "border border-slate-200 text-slate-400 bg-white"
               }`}
             >
-              {analysing ? "Analysing…" : "Analyse My Resume"}
+              {analysing ? t("resume_analysing_label") : t("resume_analyse_button")}
             </button>
 
+            {translating ? (
+              <div className="mt-3 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-700">
+                {t("upload_step_translating")}
+              </div>
+            ) : null}
+
             {analysing ? (
               <div className="mt-3 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3">
                 <div className="space-y-1.5">
-                  {ANALYSIS_STEPS.map((step, i) => (
+                  {analysisSteps.map((step, i) => (
                     <div
                       key={i}
                       className={`flex items-center gap-2.5 text-sm transition-opacity duration-500 ${
@@ -466,7 +501,7 @@ function ResumeOnboardingContent() {
             {/* Stage 3 banner — analysis done */}
             {stage === 3 && feedback ? (
               <p className="mt-3 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
-                Analysis complete. Your resume scored <strong>{Math.min(100, Math.round((feedback.score / 10) * 100))}/100</strong>. Click <strong>Go to Resume Review</strong> to see your full feedback.
+                {t("upload_complete_banner").replace("{score}", String(Math.min(100, Math.round((feedback.score / 10) * 100))))}
               </p>
             ) : null}
 
@@ -510,33 +545,21 @@ function ResumeOnboardingContent() {
             </div>
 
             <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-              <h2 className="text-xl font-semibold text-navy-950">Your resume journey</h2>
+              <h2 className="text-xl font-semibold text-navy-950">{t("resume_journey_title")}</h2>
               <ol className="mt-4 space-y-3">
-                {[
-                  {
-                    label: "Analyse",
-                    desc: "Upload your resume and click Analyse My Resume to get instant AI feedback on strengths, gaps, and your ATS score.",
-                  },
-                  {
-                    label: "Review and Improve",
-                    desc: "See your score, apply AI suggestions, and edit your resume sections directly on the review page.",
-                  },
-                  {
-                    label: "Rebuild if Needed",
-                    desc: "Use the Resume Builder to restructure your resume from scratch or refine it section by section.",
-                  },
-                  {
-                    label: "Match and Apply",
-                    desc: "Head to Job Matching to compare your resume against live Singapore job listings and get a recommended fit score.",
-                  },
-                ].map((step, i) => (
+                {([
+                  { labelKey: "resume_journey_step1_label", descKey: "resume_journey_step1_desc" },
+                  { labelKey: "resume_journey_step2_label", descKey: "resume_journey_step2_desc" },
+                  { labelKey: "resume_journey_step3_label", descKey: "resume_journey_step3_desc" },
+                  { labelKey: "resume_journey_step4_label", descKey: "resume_journey_step4_desc" },
+                ] as const).map((step, i) => (
                   <li key={i} className="flex gap-3">
                     <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-navy-950 text-[10px] font-bold text-white">
                       {i + 1}
                     </span>
                     <div>
-                      <p className="text-sm font-semibold text-navy-950">{step.label}</p>
-                      <p className="mt-0.5 text-xs leading-5 text-slate-500">{step.desc}</p>
+                      <p className="text-sm font-semibold text-navy-950">{t(step.labelKey)}</p>
+                      <p className="mt-0.5 text-xs leading-5 text-slate-500">{t(step.descKey)}</p>
                     </div>
                   </li>
                 ))}
@@ -549,9 +572,9 @@ function ResumeOnboardingContent() {
         {feedback ? (
           <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
             <div className="flex items-center justify-between">
-              <h2 className="text-xl font-semibold text-navy-950">AI Feedback</h2>
+              <h2 className="text-xl font-semibold text-navy-950">{t("ai_feedback_title")}</h2>
               <span className="text-sm font-semibold text-navy-950">
-                Score: <span className="text-2xl">{feedback.score}</span>
+                {t("ai_score_label")} <span className="text-2xl">{feedback.score}</span>
                 <span className="font-normal text-slate-400"> / 10</span>
               </span>
             </div>
@@ -559,14 +582,14 @@ function ResumeOnboardingContent() {
             <div className="mt-4 grid gap-4 sm:grid-cols-2">
               <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                 <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
-                  Overall Impression
+                  {t("ai_overall_impression")}
                 </p>
                 <p className="text-sm leading-6 text-slate-700">{feedback.overallImpression}</p>
               </div>
 
               <div className="rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-3">
                 <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-emerald-600">
-                  Key Strengths
+                  {t("ai_key_strengths")}
                 </p>
                 <ul className="space-y-1.5">
                   {feedback.keyStrengths.map((s, i) => (
@@ -582,7 +605,7 @@ function ResumeOnboardingContent() {
 
               <div className="rounded-xl border border-amber-100 bg-amber-50 px-4 py-3">
                 <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-amber-600">
-                  Areas to Improve
+                  {t("ai_areas_to_improve")}
                 </p>
                 <ul className="space-y-1.5">
                   {feedback.areasToImprove.map((s, i) => (
@@ -598,7 +621,7 @@ function ResumeOnboardingContent() {
 
               <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                 <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
-                  Suggested Edits
+                  {t("ai_suggested_edits")}
                 </p>
                 <ul className="space-y-1.5">
                   {feedback.suggestedEdits.map((s, i) => (
@@ -616,7 +639,7 @@ function ResumeOnboardingContent() {
                 <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3 sm:col-span-2">
                   <div className="mb-3 flex items-center gap-3">
                     <p className="text-xs font-semibold uppercase tracking-wider text-slate-400">
-                      ATS Analysis
+                      {t("ai_ats_analysis")}
                     </p>
                     <span
                       className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
@@ -625,7 +648,7 @@ function ResumeOnboardingContent() {
                           : "bg-red-100 text-red-700"
                       }`}
                     >
-                      {feedback.atsAnalysis.atsFriendly ? "ATS Friendly" : "Not ATS Friendly"}
+                      {feedback.atsAnalysis.atsFriendly ? t("ai_ats_friendly") : t("ai_ats_not_friendly")}
                     </span>
                   </div>
                   {feedback.atsAnalysis.atsNotes ? (
@@ -633,7 +656,7 @@ function ResumeOnboardingContent() {
                   ) : null}
                   {feedback.atsAnalysis.keywordsFound?.length ? (
                     <div className="mb-2">
-                      <p className="mb-1.5 text-xs font-medium text-slate-500">Keywords Found</p>
+                      <p className="mb-1.5 text-xs font-medium text-slate-500">{t("ai_keywords_found")}</p>
                       <div className="flex flex-wrap gap-1.5">
                         {feedback.atsAnalysis.keywordsFound.map((kw) => (
                           <span
@@ -648,7 +671,7 @@ function ResumeOnboardingContent() {
                   ) : null}
                   {feedback.atsAnalysis.keywordsMissing?.length ? (
                     <div>
-                      <p className="mb-1.5 text-xs font-medium text-slate-500">Keywords Missing</p>
+                      <p className="mb-1.5 text-xs font-medium text-slate-500">{t("ai_keywords_missing")}</p>
                       <div className="flex flex-wrap gap-1.5">
                         {feedback.atsAnalysis.keywordsMissing.map((kw) => (
                           <span
@@ -667,7 +690,7 @@ function ResumeOnboardingContent() {
               {feedback.careerProgression ? (
                 <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                   <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
-                    Career Progression
+                    {t("ai_career_progression")}
                   </p>
                   <p className="text-sm leading-6 text-slate-700">{feedback.careerProgression}</p>
                 </div>
@@ -676,7 +699,7 @@ function ResumeOnboardingContent() {
               {feedback.salaryBenchmark ? (
                 <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                   <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
-                    Salary Benchmark
+                    {t("ai_salary_benchmark")}
                   </p>
                   <p className="text-lg font-semibold text-navy-950">
                     {feedback.salaryBenchmark.estimatedRange}
diff --git a/app/resume/review/page.tsx b/app/resume/review/page.tsx
index 54d9ca4..d7f0b33 100644
--- a/app/resume/review/page.tsx
+++ b/app/resume/review/page.tsx
@@ -128,25 +128,25 @@ function countKeywordsFound(resumeText: string, keywords: string[]): number {
   return keywords.filter((kw) => lower.includes(kw.toLowerCase())).length;
 }
 
-function SuggestionBox({ items, hidden }: { items: ResumeSuggestion[]; hidden?: boolean }) {
+function SuggestionBox({ items, hidden, t }: { items: ResumeSuggestion[]; hidden?: boolean; t: (key: string) => string }) {
   if (!items.length || hidden) return null;
   return (
     <div className="mt-2 rounded-lg border border-green-200 bg-green-50 p-3">
       <div className="mb-3 flex items-center gap-1.5">
         <span className="h-2 w-2 rounded-full bg-green-500" />
-        <span className="text-xs font-medium text-green-700">AI suggested improvement</span>
+        <span className="text-xs font-medium text-green-700">{t("ai_suggestion_badge")}</span>
       </div>
       <div className="space-y-0">
         {items.map((s, i) => (
           <div key={i} className={i > 0 ? "mt-3 border-t border-green-200 pt-3" : ""}>
             <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-green-700">
-              What to improve
+              {t("what_to_improve")}
             </p>
             <p className="text-sm leading-relaxed text-gray-800">{s.suggestion}</p>
             {s.suggested_rewrite ? (
               <>
                 <p className="mb-1 mt-2 text-xs font-semibold uppercase tracking-wide text-green-700">
-                  Suggested replacement
+                  {t("suggested_replacement")}
                 </p>
                 <p className="text-sm leading-relaxed text-gray-700 italic">{s.suggested_rewrite}</p>
               </>
@@ -159,7 +159,7 @@ function SuggestionBox({ items, hidden }: { items: ResumeSuggestion[]; hidden?:
 }
 
 function ResumeReviewContent() {
-  const { t } = useLanguage();
+  const { t, locale } = useLanguage();
   const { refetch: refetchResumeStatus } = useResumeStatus();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -570,7 +570,7 @@ function ResumeReviewContent() {
               <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                 <div className="flex items-center justify-between">
                   <p className="text-xs font-semibold uppercase tracking-wider text-slate-400">
-                    Resume Score
+                    {t("resume_review_score_label")}
                   </p>
                   <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${scoreLabelClass}`}>
                     {scoreLabel}
@@ -587,14 +587,14 @@ function ResumeReviewContent() {
                   />
                 </div>
                 <p className="mt-3 text-[11px] leading-relaxed text-slate-400">
-                  Indicative score from AI suggestion count/priority — not a hiring decision.
+                  {t("score_disclaimer")}
                 </p>
                 <p className="mt-2 text-xs leading-relaxed text-slate-600">{scoreCommentary}</p>
               </div>
 
               {/* Block 2 — Strengths */}
               <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
-                <p className="mb-3 text-sm font-semibold text-navy-950">Strengths</p>
+                <p className="mb-3 text-sm font-semibold text-navy-950">{t("resume_review_strengths_title")}</p>
                 {strengthsList.length ? (
                   <ul className="space-y-2">
                     {strengthsList.map((s, i) => (
@@ -615,7 +615,7 @@ function ResumeReviewContent() {
 
               {/* Block 3 — Suggested Improvements */}
               <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
-                <p className="mb-3 text-sm font-semibold text-navy-950">Suggested improvements</p>
+                <p className="mb-3 text-sm font-semibold text-navy-950">{t("resume_review_improvements_title")}</p>
                 {improvementsList.length ? (
                   <ul className="space-y-2">
                     {improvementsList.map((s, i) => (
@@ -634,9 +634,9 @@ function ResumeReviewContent() {
 
               {/* Block 4 — Missing or Weak Keywords */}
               <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
-                <p className="mb-1 text-sm font-semibold text-navy-950">Missing or weak keywords</p>
+                <p className="mb-1 text-sm font-semibold text-navy-950">{t("resume_review_keywords_title")}</p>
                 <p className="mb-3 text-xs leading-relaxed text-slate-500">
-                  These keywords may help improve your resume&apos;s match with job listings.
+                  {t("resume_review_keywords_description")}
                 </p>
                 {keywordsMissing.length ? (
                   <div className="flex flex-wrap gap-1.5">
@@ -668,7 +668,7 @@ function ResumeReviewContent() {
                 {profile.headline ?? t("resume_review_title")}
               </h1>
               <p className="mt-3 text-sm leading-relaxed text-slate-500">
-                Review your resume below. AI-suggested improvements appear in green under each section.
+                {t("resume_review_subtitle")}
               </p>
             </section>
 
@@ -678,25 +678,25 @@ function ResumeReviewContent() {
                 <div className="grid grid-cols-2 gap-x-8 gap-y-4">
                   {candidateName ? (
                     <div>
-                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">Full Name</p>
+                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">{t("field_full_name")}</p>
                       <p className="mt-1 text-sm font-medium text-navy-950">{candidateName}</p>
                     </div>
                   ) : null}
                   {extractedEmail ? (
                     <div>
-                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">Email</p>
+                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">{t("field_email")}</p>
                       <p className="mt-1 text-sm font-medium text-navy-950">{extractedEmail}</p>
                     </div>
                   ) : null}
                   {extractedPhone ? (
                     <div>
-                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">Phone</p>
+                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">{t("field_phone")}</p>
                       <p className="mt-1 text-sm font-medium text-navy-950">{extractedPhone}</p>
                     </div>
                   ) : null}
                   {extractedAddress ? (
                     <div>
-                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">Address</p>
+                      <p className="text-xs font-medium uppercase tracking-wider text-slate-400">{t("field_address")}</p>
                       <p className="mt-1 text-sm font-medium text-navy-950">{extractedAddress}</p>
                     </div>
                   ) : null}
@@ -711,7 +711,7 @@ function ResumeReviewContent() {
               {/* Professional Summary */}
               <div>
                 <label className="mb-2 block text-sm font-semibold text-navy-950">
-                  Professional Summary
+                  {t("resume_review_summary")}
                 </label>
                 <textarea
                   rows={5}
@@ -720,13 +720,13 @@ function ResumeReviewContent() {
                   placeholder="No summary extracted yet."
                   className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white"
                 />
-                <SuggestionBox items={summarySuggestions} hidden={suggestionsApplied} />
+                <SuggestionBox items={summarySuggestions} hidden={suggestionsApplied} t={t} />
               </div>
 
               {/* Work Experience */}
               <div>
                 <label className="mb-2 block text-sm font-semibold text-navy-950">
-                  Work Experience
+                  {t("resume_review_experience")}
                 </label>
                 <textarea
                   rows={8}
@@ -735,13 +735,13 @@ function ResumeReviewContent() {
                   placeholder="No experience extracted yet."
                   className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white whitespace-pre-wrap"
                 />
-                <SuggestionBox items={experienceSuggestions} hidden={suggestionsApplied} />
+                <SuggestionBox items={experienceSuggestions} hidden={suggestionsApplied} t={t} />
               </div>
 
               {/* Skills */}
               <div>
                 <label className="mb-2 block text-sm font-semibold text-navy-950">
-                  Skills
+                  {t("resume_review_skills")}
                 </label>
                 <textarea
                   rows={4}
@@ -750,13 +750,13 @@ function ResumeReviewContent() {
                   placeholder="No skills extracted yet."
                   className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white"
                 />
-                <SuggestionBox items={skillsSuggestions} hidden={suggestionsApplied} />
+                <SuggestionBox items={skillsSuggestions} hidden={suggestionsApplied} t={t} />
               </div>
 
               {/* Education */}
               <div>
                 <label className="mb-2 block text-sm font-semibold text-navy-950">
-                  Education
+                  {t("resume_review_education")}
                 </label>
                 <textarea
                   rows={3}
@@ -765,7 +765,7 @@ function ResumeReviewContent() {
                   placeholder="No education extracted yet."
                   className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-navy-950 focus:bg-white whitespace-pre-wrap"
                 />
-                <SuggestionBox items={educationSuggestions} hidden={suggestionsApplied} />
+                <SuggestionBox items={educationSuggestions} hidden={suggestionsApplied} t={t} />
               </div>
 
             </section>
@@ -783,7 +783,7 @@ function ResumeReviewContent() {
                 disabled={improving}
                 className="rounded-md bg-navy-950 px-4 py-2 text-sm font-semibold text-white transition-all hover:bg-navy-800 disabled:cursor-not-allowed disabled:opacity-50"
               >
-                {improving ? "Applying…" : "Apply AI Suggestions"}
+                {improving ? "Applying…" : t("resume_review_apply_ai")}
               </button>
 
               <div className="flex flex-wrap gap-3">
@@ -792,7 +792,7 @@ function ResumeReviewContent() {
                   onClick={() => setShowTemplatePicker(true)}
                   className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-navy-200 hover:text-navy-950"
                 >
-                  Download Resume
+                  {t("resume_review_download")}
                 </button>
                 <Link
                   href={`/resume${resumeId ? `?resume_id=${encodeURIComponent(resumeId)}` : ""}`}
@@ -817,6 +817,7 @@ function ResumeReviewContent() {
           <TemplatePickerModal
             data={buildTemplateData()}
             onClose={() => setShowTemplatePicker(false)}
+            language={locale}
           />
         ) : null}
 
diff --git a/app/resume/voice/page.tsx b/app/resume/voice/page.tsx
index 5809eb9..2e953cf 100644
--- a/app/resume/voice/page.tsx
+++ b/app/resume/voice/page.tsx
@@ -17,24 +17,6 @@ type VoiceQuestion = {
 
 type AnswerMap = Record<string, string>;
 
-type SpeechRecognitionType = {
-  continuous: boolean;
-  interimResults: boolean;
-  lang: string;
-  onresult: ((event: any) => void) | null;
-  onend: (() => void) | null;
-  onerror: ((event: any) => void) | null;
-  start: () => void;
-  stop: () => void;
-};
-
-declare global {
-  interface Window {
-    SpeechRecognition?: new () => SpeechRecognitionType;
-    webkitSpeechRecognition?: new () => SpeechRecognitionType;
-  }
-}
-
 const browserLangMap: Record<SupportedLocale, string> = {
   en: "en-SG",
   zh: "zh-CN",
@@ -42,6 +24,42 @@ const browserLangMap: Record<SupportedLocale, string> = {
   ta: "ta-IN",
 };
 
+// Short labels for the question list panel
+const QUESTION_LABELS: Record<string, string> = {
+  full_name: "Full Name",
+  age: "Age",
+  job_title: "Target Role",
+  summary: "About You",
+  experience: "Work Experience",
+  achievement: "Achievement",
+  education: "Education",
+  skills: "Skills",
+  anything_else: "Additional Info",
+};
+
+// FIX 1 — detect letter-by-letter name spelling
+function isSpelledOut(text: string): boolean {
+  const tokens = text.trim().split(/\s+/);
+  const singleCharCount = tokens.filter((t) => t.length === 1).length;
+  return singleCharCount / tokens.length > 0.5;
+}
+
+function reconstructName(text: string): string {
+  const tokens = text.trim().split(/\s+/);
+  const letters = tokens.filter((t) => t.length === 1).join("");
+  return letters.charAt(0).toUpperCase() + letters.slice(1).toLowerCase();
+}
+
+// FIX 4 — instant client-side substitutions for common Singapore English errors
+function quickCorrect(text: string): string {
+  return text
+    .replace(/\bwet\b/gi, "web")
+    .replace(/\bwhere developer\b/gi, "web developer")
+    .replace(/\bwet development\b/gi, "web development")
+    .replace(/\bwhere development\b/gi, "web development")
+    .replace(/\bcoding with wet\b/gi, "coding with web");
+}
+
 function getBestVoice(locale: SupportedLocale) {
   if (typeof window === "undefined" || !("speechSynthesis" in window)) return null;
 
@@ -86,11 +104,14 @@ export default function VoiceResumePage() {
   const [finished, setFinished] = useState(false);
   const [generating, setGenerating] = useState(false);
   const [generateError, setGenerateError] = useState<string | null>(null);
+  const [isAutocorrecting, setIsAutocorrecting] = useState(false);
+  const [editingFromFinished, setEditingFromFinished] = useState(false);
 
-  const recognitionRef = useRef<SpeechRecognitionType | null>(null);
+  const recognitionRef = useRef<any>(null);
   const isRecordingRef = useRef(false);
   const accumulatedTextRef = useRef("");
   const currentTranscriptRef = useRef("");
+  const hasRecordedRef = useRef(false);
 
   const questions = useMemo<VoiceQuestion[]>(
     () => [
@@ -222,6 +243,22 @@ export default function VoiceResumePage() {
           ta: "உங்கள் திறன்களைச் சொல்லுங்கள்",
         },
       },
+      {
+        id: "anything_else",
+        section: "experience",
+        prompt: {
+          en: "Is there anything else you would like to add — any achievements, skills, or experiences not covered by the previous questions?",
+          zh: "还有其他你想补充的吗——有没有前面未提及的成就、技能或经历？",
+          ms: "Adakah terdapat apa-apa lagi yang ingin anda tambah — sebarang pencapaian, kemahiran, atau pengalaman yang tidak diliputi oleh soalan-soalan sebelumnya?",
+          ta: "முந்தைய கேள்விகளில் சேர்க்கப்படாத சாதனைகள், திறன்கள் அல்லது அனுபவங்கள் போன்று வேறு ஏதாவது சேர்க்க விரும்புகிறீர்களா?",
+        },
+        placeholder: {
+          en: "Any additional information",
+          zh: "其他补充信息",
+          ms: "Maklumat tambahan",
+          ta: "கூடுதல் தகவல்",
+        },
+      },
     ],
     [],
   );
@@ -245,85 +282,116 @@ export default function VoiceResumePage() {
   }, []);
 
   useEffect(() => {
-    const SpeechRecognition =
-      typeof window !== "undefined"
-        ? window.SpeechRecognition || window.webkitSpeechRecognition
-        : undefined;
+    if (typeof window === 'undefined') return
 
-    if (!SpeechRecognition) {
-      setSpeechSupported(false);
-      return;
+    const Ctor = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
+
+    if (!Ctor) {
+      setSpeechSupported(false)
+      return
     }
 
-    // Stop any active recording when locale changes
-    isRecordingRef.current = false;
-    setIsListening(false);
-
-    const recognition = new SpeechRecognition();
-    recognition.continuous = true;
-    recognition.interimResults = true;
-    recognition.lang = browserLangMap[safeLocale];
-
-    recognition.onresult = (event) => {
-      let finalText = "";
-      let interimText = "";
-
-      for (let i = event.resultIndex; i < event.results.length; i += 1) {
-        if (event.results[i].isFinal) {
-          finalText += event.results[i][0].transcript;
-        } else {
-          interimText += event.results[i][0].transcript;
-        }
+    setSpeechSupported(true)
+    const recognition = new Ctor()
+    recognition.continuous = true
+    recognition.interimResults = true
+    recognition.lang = browserLangMap[safeLocale]
+
+    recognition.onresult = (event: any) => {
+      if (!isRecordingRef.current) return
+      let finalText = ''
+      let interimText = ''
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        if (event.results[i].isFinal) finalText += event.results[i][0].transcript
+        else interimText += event.results[i][0].transcript
       }
-
       if (finalText) {
-        accumulatedTextRef.current = (accumulatedTextRef.current + " " + finalText).trim();
+        accumulatedTextRef.current = (accumulatedTextRef.current + ' ' + quickCorrect(finalText)).trim()
       }
-      currentTranscriptRef.current = interimText;
-
-      const combined = [accumulatedTextRef.current, currentTranscriptRef.current]
-        .filter(Boolean)
-        .join(" ")
-        .trim();
-      setDraft(combined);
-    };
+      currentTranscriptRef.current = interimText
+      const combined = [accumulatedTextRef.current, currentTranscriptRef.current].filter(Boolean).join(' ').trim()
+      setDraft(combined)
+    }
 
     recognition.onend = () => {
       if (isRecordingRef.current) {
-        try {
-          recognition.start();
-        } catch {
-          // recognition may already be starting; ignore
-        }
+        try { recognition.start() } catch {}
       } else {
-        setIsListening(false);
+        setIsListening(false)
       }
-    };
+    }
 
     recognition.onerror = (event: any) => {
-      if (event.error === "no-speech" || event.error === "aborted") return;
-      isRecordingRef.current = false;
-      setIsListening(false);
-      setError(t("voice_input_error"));
-    };
+      if (event.error === 'no-speech' || event.error === 'aborted') return
+      isRecordingRef.current = false
+      setIsListening(false)
+    }
 
-    recognitionRef.current = recognition;
+    recognitionRef.current = recognition
 
     return () => {
-      isRecordingRef.current = false;
-      try {
-        recognition.stop();
-      } catch {
-        // ignore
-      }
-    };
-  }, [safeLocale, t]);
+      isRecordingRef.current = false
+      try { recognition.stop() } catch {}
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [safeLocale]);
 
   useEffect(() => {
     if (!currentQuestion) return;
     speakPrompt(currentQuestion.prompt[safeLocale], safeLocale);
   }, [currentIndex, safeLocale]);
 
+  // FIX 1 + FIX 2: run after recording stops
+  useEffect(() => {
+    if (isListening) return;
+    if (!hasRecordedRef.current) return;
+    if (!draft.trim()) return;
+    hasRecordedRef.current = false;
+
+    let textToCorrect = draft;
+
+    // FIX 1: reconstruct letter-by-letter name spelling (question 0 only)
+    if (currentIndex === 0 && isSpelledOut(draft)) {
+      textToCorrect = reconstructName(draft);
+      setDraft(textToCorrect);
+      accumulatedTextRef.current = textToCorrect;
+    }
+
+    // FIX 2: AI autocorrect
+    const qId = questions[currentIndex]?.id;
+    const qType = qId === "age" ? "age" : qId === "full_name" ? "name" : "general";
+
+    let cancelled = false;
+    setIsAutocorrecting(true);
+
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 5000);
+
+    fetch("/api/resume/voice-autocorrect", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: textToCorrect, questionType: qType, language: safeLocale }),
+      signal: controller.signal,
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        clearTimeout(timeout);
+        if (!cancelled && data.corrected) {
+          setDraft(data.corrected);
+          accumulatedTextRef.current = data.corrected;
+        }
+      })
+      .catch(() => clearTimeout(timeout))
+      .finally(() => {
+        if (!cancelled) setIsAutocorrecting(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isListening]);
+
   function speakPrompt(text: string, lang: SupportedLocale) {
     if (typeof window === "undefined" || !("speechSynthesis" in window)) return;
 
@@ -350,8 +418,8 @@ export default function VoiceResumePage() {
     // Preserve any existing manually typed text
     accumulatedTextRef.current = draft;
     currentTranscriptRef.current = "";
-    recognitionRef.current.lang = browserLangMap[safeLocale];
     isRecordingRef.current = true;
+    hasRecordedRef.current = true;
     recognitionRef.current.start();
     setIsListening(true);
   }
@@ -362,23 +430,74 @@ export default function VoiceResumePage() {
     // isListening set to false via onend → setIsListening(false)
   }
 
+  function jumpToQuestion(index: number) {
+    if (isListening) stopListening();
+    hasRecordedRef.current = false;
+    setEditingFromFinished(true);
+    setCurrentIndex(index);
+    const existing = answers[questions[index].id] ?? "";
+    setDraft(existing);
+    accumulatedTextRef.current = existing;
+    currentTranscriptRef.current = "";
+    setFinished(false);
+  }
+
   function saveAndNext() {
     if (!currentQuestion || !draft.trim()) return;
 
+    // Capture the answer before any clearing
+    const answer = draft.trim();
+
+    // Clear textarea and refs FIRST — before stopListening — so that any
+    // late onresult event (guarded by isRecordingRef) cannot re-populate
+    // the draft. This fixes the age-question bug where a short utterance's
+    // final result arrived after the clear and overwrote it.
+    setDraft("");
+    accumulatedTextRef.current = "";
+    currentTranscriptRef.current = "";
+
     if (isListening) stopListening();
 
     const nextAnswers = {
       ...answers,
-      [currentQuestion.id]: draft.trim(),
+      [currentQuestion.id]: answer,
     };
 
     setAnswers(nextAnswers);
+    sessionStorage.setItem("vericlause.voiceResumeAnswers", JSON.stringify(nextAnswers));
+    sessionStorage.setItem("vericlause.resumeSource", "voice");
+
+    // If editing a single answer from the completion screen, return there
+    if (editingFromFinished) {
+      setEditingFromFinished(false);
+      setFinished(true);
+      return;
+    }
+
+    if (isLastQuestion) {
+      setFinished(true);
+      return;
+    }
+
+    setCurrentIndex((prev) => prev + 1);
+  }
+
+  function skipQuestion() {
+    if (isListening) stopListening();
+    hasRecordedRef.current = false;
     setDraft("");
     accumulatedTextRef.current = "";
     currentTranscriptRef.current = "";
 
+    // If editing from finished, return to completion screen
+    if (editingFromFinished) {
+      setEditingFromFinished(false);
+      setFinished(true);
+      return;
+    }
+
     if (isLastQuestion) {
-      sessionStorage.setItem("vericlause.voiceResumeAnswers", JSON.stringify(nextAnswers));
+      sessionStorage.setItem("vericlause.voiceResumeAnswers", JSON.stringify(answers));
       sessionStorage.setItem("vericlause.resumeSource", "voice");
       setFinished(true);
       return;
@@ -387,6 +506,14 @@ export default function VoiceResumePage() {
     setCurrentIndex((prev) => prev + 1);
   }
 
+  function handleMicClick() {
+    if (isListening) {
+      stopListening();
+    } else {
+      startListening();
+    }
+  }
+
   function goBack() {
     if (currentIndex === 0) return;
     if (isListening) stopListening();
@@ -396,14 +523,6 @@ export default function VoiceResumePage() {
     setCurrentIndex((prev) => prev - 1);
   }
 
-  function saveCurrentTextOnly() {
-    if (!currentQuestion) return;
-    setAnswers((prev) => ({
-      ...prev,
-      [currentQuestion.id]: draft.trim(),
-    }));
-  }
-
   async function handleGenerate() {
     setGenerating(true);
     setGenerateError(null);
@@ -414,15 +533,17 @@ export default function VoiceResumePage() {
       const res = await fetch("/api/resume/voice-build", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(storedAnswers),
+        body: JSON.stringify({ ...storedAnswers, language: safeLocale }),
       });
       const data = await res.json();
       if (!res.ok) throw new Error(data.detail || "Generation failed");
-      if (data.resume_id) {
-        sessionStorage.setItem("vericlause.lastResumeId", data.resume_id);
-        router.push(`/resume/review?resume_id=${data.resume_id}`);
+      if (data.resumeId) {
+        sessionStorage.setItem("vericlause.lastResumeId", data.resumeId);
+        if (data.feedback) {
+          sessionStorage.setItem("vericlause.resumeFeedback", JSON.stringify(data.feedback));
+        }
+        router.push(`/resume/review?resume_id=${data.resumeId}`);
       } else {
-        sessionStorage.setItem("vericlause.voiceResumeResult", JSON.stringify(data));
         router.push("/resume/review");
       }
     } catch (e) {
@@ -431,81 +552,9 @@ export default function VoiceResumePage() {
     }
   }
 
-  const compiledPreview = [
-    answers.full_name ? `Name: ${answers.full_name}` : "",
-    answers.age ? `Age: ${answers.age}` : "",
-    answers.job_title ? `Target Role: ${answers.job_title}` : "",
-    answers.summary ? `Summary: ${answers.summary}` : "",
-    answers.experience ? `Experience: ${answers.experience}` : "",
-    answers.achievement ? `Achievement: ${answers.achievement}` : "",
-    answers.education ? `Education: ${answers.education}` : "",
-    answers.skills ? `Skills: ${answers.skills}` : "",
-  ]
-    .filter(Boolean)
-    .join("\n\n");
-
   const completedCount = Math.min(Object.keys(answers).length + (draft.trim() ? 1 : 0), questions.length);
   const progressPercent = Math.round((completedCount / questions.length) * 100);
 
-  if (finished) {
-    return (
-      <main className="min-h-screen bg-[#f8f8f6]">
-        <SiteNavbar
-          rightSlot={
-            <Link
-              href="/resume"
-              className="rounded-md bg-navy-950 px-4 py-2 text-sm font-medium text-white transition hover:opacity-90"
-            >
-              {t("nav_dashboard")}
-            </Link>
-          }
-        />
-
-        <section className="mx-auto max-w-2xl px-4 py-20 text-center sm:px-6">
-          <div className="mb-8">
-            <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-100 text-3xl text-emerald-700">
-              ✓
-            </div>
-            <h1 className="font-serif text-3xl font-semibold text-navy-950">
-              All answers recorded!
-            </h1>
-            <p className="mt-4 text-base leading-7 text-slate-600">
-              Click below to generate your professional resume with AI.
-            </p>
-          </div>
-
-          {generateError && (
-            <div className="mb-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-              {generateError}
-            </div>
-          )}
-
-          <button
-            type="button"
-            onClick={handleGenerate}
-            disabled={generating}
-            className="rounded-xl bg-navy-950 px-8 py-4 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
-          >
-            {generating ? "Generating your resume…" : "Generate My Resume"}
-          </button>
-
-          <div className="mt-6">
-            <button
-              type="button"
-              onClick={() => {
-                setFinished(false);
-                setCurrentIndex(questions.length - 1);
-              }}
-              className="text-sm font-medium text-slate-600 underline"
-            >
-              Go back and review answers
-            </button>
-          </div>
-        </section>
-      </main>
-    );
-  }
-
   return (
     <main className="min-h-screen bg-[#f8f8f6]">
       <SiteNavbar
@@ -533,127 +582,296 @@ export default function VoiceResumePage() {
         </div>
 
         <div className="grid gap-8 lg:grid-cols-[1.2fr_0.8fr]">
-          <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-            <div className="mb-6 flex items-center justify-between gap-4">
-              <div>
-                <p className="text-sm font-medium text-slate-500">
-                  {t("voice_resume_step")} {currentIndex + 1} / {questions.length}
-                </p>
-                <h2 className="mt-1 text-2xl font-semibold text-navy-950">
-                  {currentQuestion.prompt[safeLocale]}
+          {/* Left card — question or completion state */}
+          {finished ? (
+            <div className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
+              <div className="flex flex-col items-center text-center">
+                <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
+                  <svg className="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <h2 className="font-serif text-2xl font-semibold text-navy-950">
+                  All responses recorded.
                 </h2>
+                <p className="mt-2 text-sm leading-6 text-slate-600">
+                  Review your answers below, then generate your resume.
+                </p>
               </div>
 
+              {/* FIX 3 — review + edit section */}
+              <div className="mt-6">
+                <h3 className="mb-3 text-xs font-semibold uppercase tracking-widest text-slate-500">
+                  Review your answers
+                </h3>
+                <div className="space-y-2">
+                  {questions.map((q, i) => {
+                    const answer = answers[q.id];
+                    if (!answer) return null;
+                    return (
+                      <div
+                        key={q.id}
+                        className="flex items-start justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50 px-4 py-3"
+                      >
+                        <div className="min-w-0 flex-1">
+                          <p className="text-xs font-medium text-slate-500">
+                            {QUESTION_LABELS[q.id]}
+                          </p>
+                          <p className="mt-0.5 line-clamp-2 text-sm text-slate-800">{answer}</p>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => jumpToQuestion(i)}
+                          className="flex-shrink-0 rounded-lg border border-slate-200 px-3 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-100"
+                        >
+                          Edit
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {generateError && (
+                <div className="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                  {generateError}
+                </div>
+              )}
+
               <button
                 type="button"
-                onClick={() => speakPrompt(currentQuestion.prompt[safeLocale], safeLocale)}
-                className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
+                onClick={handleGenerate}
+                disabled={generating}
+                className="mt-6 w-full rounded-xl bg-navy-950 px-8 py-3 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
               >
-                {t("voice_resume_repeat")}
+                {generating ? "Generating your resume…" : "Generate My Resume"}
               </button>
             </div>
-
-            <div className="mb-5 h-2 w-full overflow-hidden rounded-full bg-slate-100">
-              <div
-                className="h-full rounded-full bg-navy-950 transition-all"
-                style={{ width: `${progressPercent}%` }}
-              />
-            </div>
-
-            {!speechSupported && (
-              <div className="mb-5 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
-                {t("voice_resume_browser_warning")}
-              </div>
-            )}
-
-            {error && (
-              <div className="mb-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-                {error}
-              </div>
-            )}
-
-            <div className="rounded-2xl border border-slate-200 bg-slate-50 p-5">
-              <label className="mb-3 block text-sm font-medium text-slate-700">
-                {t("voice_resume_your_answer")}
-              </label>
-
-              <textarea
-                value={draft}
-                onChange={(e) => {
-                  setDraft(e.target.value);
-                  accumulatedTextRef.current = e.target.value;
-                }}
-                placeholder={currentQuestion.placeholder[safeLocale]}
-                className="min-h-[180px] w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-navy-950"
-              />
-
-              <div className="mt-4 flex flex-wrap gap-3">
-                <button
-                  type="button"
-                  onClick={isListening ? stopListening : startListening}
-                  disabled={!speechSupported}
-                  className="rounded-lg bg-navy-950 px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
-                >
-                  {isListening ? t("voice_resume_stop_recording") : t("voice_resume_start_recording")}
-                </button>
-
-                <button
-                  type="button"
-                  onClick={saveCurrentTextOnly}
-                  className="rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
-                >
-                  {t("voice_resume_save_answer")}
-                </button>
-
-                <button
-                  type="button"
-                  onClick={goBack}
-                  disabled={currentIndex === 0}
-                  className="rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
-                >
-                  {t("voice_resume_back")}
-                </button>
+          ) : (
+            <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+              <div className="mb-6 flex items-center justify-between gap-4">
+                <div>
+                  <p className="text-sm font-medium text-slate-500">
+                    {t("voice_resume_step")} {currentIndex + 1} / {questions.length}
+                  </p>
+                  <h2 className="mt-1 text-2xl font-semibold text-navy-950">
+                    {currentQuestion.prompt[safeLocale]}
+                  </h2>
+                </div>
 
                 <button
                   type="button"
-                  onClick={saveAndNext}
-                  disabled={!draft.trim()}
-                  className="rounded-lg bg-[#b88a44] px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+                  onClick={() => speakPrompt(currentQuestion.prompt[safeLocale], safeLocale)}
+                  className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
                 >
-                  {isLastQuestion ? t("voice_resume_finish") : t("voice_resume_next")}
+                  {t("voice_resume_repeat")}
                 </button>
               </div>
-            </div>
-          </div>
 
-          <aside className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-navy-950">{t("voice_resume_preview_title")}</h3>
-            <p className="mt-2 text-sm leading-6 text-slate-600">
-              {t("voice_resume_preview_description")}
-            </p>
-
-            <div className="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
-              <pre className="whitespace-pre-wrap break-words text-sm leading-6 text-slate-700">
-                {compiledPreview || t("voice_resume_preview_empty")}
-              </pre>
-            </div>
+              <div className="mb-5 h-2 w-full overflow-hidden rounded-full bg-slate-100">
+                <div
+                  className="h-full rounded-full bg-navy-950 transition-all"
+                  style={{ width: `${progressPercent}%` }}
+                />
+              </div>
 
-            <div className="mt-5 rounded-2xl border border-slate-200 p-4">
-              <h4 className="text-sm font-semibold text-navy-950">{t("voice_resume_help_title")}</h4>
-              <div className="mt-3 space-y-2 text-sm leading-6 text-slate-600">
-                <p>{t("voice_resume_help_1")}</p>
-                <p>{t("voice_resume_help_2")}</p>
-                <p>{t("voice_resume_help_3")}</p>
+              {!speechSupported && (
+                <div className="mb-5 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+                  {t("voice_resume_browser_warning")}
+                </div>
+              )}
+
+              {error && (
+                <div className="mb-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                  {error}
+                </div>
+              )}
+
+              <div className="rounded-2xl border border-slate-200 bg-slate-50 p-5">
+                <label className="mb-3 block text-sm font-medium text-slate-700">
+                  {t("voice_resume_your_answer")}
+                </label>
+
+                <textarea
+                  value={draft}
+                  onChange={(e) => {
+                    setDraft(e.target.value);
+                    accumulatedTextRef.current = e.target.value;
+                  }}
+                  placeholder={currentQuestion.placeholder[safeLocale]}
+                  className="min-h-[180px] w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-navy-950"
+                />
+
+                {/* FIX 2 — autocorrect spinner */}
+                {isAutocorrecting && (
+                  <div className="mt-2 flex items-center gap-2 text-xs text-slate-500">
+                    <svg
+                      className="h-3.5 w-3.5 animate-spin"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+                      />
+                    </svg>
+                    Correcting transcription…
+                  </div>
+                )}
+
+                <div className="mt-4 flex flex-wrap items-center gap-3">
+                  {/* Mic icon button (TASK A) */}
+                  <div className="relative flex items-center justify-center">
+                    {isListening && (
+                      <span className="absolute inline-flex h-12 w-12 animate-ping rounded-full bg-red-400 opacity-25" />
+                    )}
+                    <button
+                      type="button"
+                      onClick={handleMicClick}
+                      disabled={!speechSupported}
+                      title={isListening ? t("voice_resume_stop_recording") : t("voice_resume_start_recording")}
+                      className={`relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border transition disabled:cursor-not-allowed disabled:opacity-50 ${
+                        isListening
+                          ? "border-red-300 bg-red-50 text-red-600"
+                          : "border-slate-200 bg-white text-slate-600 hover:bg-slate-50"
+                      }`}
+                    >
+                      <svg
+                        className="h-5 w-5"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                      >
+                        <rect x="9" y="2" width="6" height="12" rx="3" />
+                        <path d="M5 10a7 7 0 0014 0M12 19v3M9 22h6" />
+                      </svg>
+                    </button>
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={goBack}
+                    disabled={currentIndex === 0}
+                    className="rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    {t("voice_resume_back")}
+                  </button>
+
+                  {/* Skip button (TASK C) */}
+                  <button
+                    type="button"
+                    onClick={skipQuestion}
+                    className="rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
+                  >
+                    Skip
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={saveAndNext}
+                    disabled={!draft.trim()}
+                    className="rounded-lg bg-[#b88a44] px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    {editingFromFinished
+                      ? "Save & Return"
+                      : isLastQuestion
+                      ? t("voice_resume_finish")
+                      : t("voice_resume_next")}
+                  </button>
+                </div>
               </div>
             </div>
+          )}
 
-            <div className="mt-5">
-              <Link
-                href="/resume"
-                className="inline-flex rounded-lg border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
-              >
-                {t("voice_resume_switch_manual")}
-              </Link>
+          {/* Right sidebar — question list + how this works */}
+          <aside className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+            {/* Question list (TASK E) */}
+            <h3 className="text-xs font-semibold uppercase tracking-widest text-slate-500">
+              Questions
+            </h3>
+            <ol className="mt-3 space-y-1">
+              {questions.map((q, i) => {
+                const isActive = i === currentIndex && !finished;
+                const isCompleted = q.id in answers;
+                return (
+                  <li
+                    key={q.id}
+                    className={`rounded-lg px-3 py-2 text-sm ${
+                      isActive
+                        ? "bg-navy-950 text-white"
+                        : isCompleted
+                        ? "text-slate-700"
+                        : "text-slate-400"
+                    }`}
+                  >
+                    <div className="flex items-center gap-2.5">
+                      <span
+                        className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium ${
+                          isActive
+                            ? "bg-white/20 text-white"
+                            : isCompleted
+                            ? "bg-emerald-100 text-emerald-700"
+                            : "bg-slate-100 text-slate-400"
+                        }`}
+                      >
+                        {isCompleted ? (
+                          <svg className="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                              fillRule="evenodd"
+                              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                              clipRule="evenodd"
+                            />
+                          </svg>
+                        ) : (
+                          i + 1
+                        )}
+                      </span>
+                      <span className="truncate">
+                        {QUESTION_LABELS[q.id] ?? q.id}
+                      </span>
+                    </div>
+                    {answers[q.id] && (
+                      <p className="mt-1 ml-8 line-clamp-2 text-xs leading-relaxed text-gray-500">
+                        {answers[q.id]}
+                      </p>
+                    )}
+                  </li>
+                );
+              })}
+            </ol>
+
+            {/* How this works (TASK G) */}
+            <div className="mt-6 border-t border-slate-100 pt-5">
+              <h3 className="text-sm font-semibold text-navy-950">How this works</h3>
+              <ol className="mt-3 space-y-3">
+                {[
+                  "Click the mic and answer each question naturally.",
+                  "Review the transcribed text and correct any errors.",
+                  "Use Skip if a question does not apply to you.",
+                  "Click Generate Resume at the end to create your resume.",
+                ].map((step, i) => (
+                  <li key={i} className="flex gap-3 text-sm leading-6 text-slate-600">
+                    <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-700">
+                      {i + 1}
+                    </span>
+                    <span>{step}</span>
+                  </li>
+                ))}
+              </ol>
             </div>
           </aside>
         </div>
diff --git a/components/resume/TemplatePickerModal.tsx b/components/resume/TemplatePickerModal.tsx
index ac8fd81..2509d6b 100644
--- a/components/resume/TemplatePickerModal.tsx
+++ b/components/resume/TemplatePickerModal.tsx
@@ -381,9 +381,10 @@ function TemplateCard({ id, isSelected, isRecommended, onClick }: {
 interface TemplatePickerModalProps {
   data: ResumeTemplateData;
   onClose: () => void;
+  language?: string;
 }
 
-export function TemplatePickerModal({ data, onClose }: TemplatePickerModalProps) {
+export function TemplatePickerModal({ data, onClose, language }: TemplatePickerModalProps) {
   const recommended = recommendTemplate(data);
 
   const [selected, setSelected] = useState<TemplateId>(() => {
@@ -396,6 +397,7 @@ export function TemplatePickerModal({ data, onClose }: TemplatePickerModalProps)
 
   const [format, setFormat] = useState<"pdf" | "docx">("pdf");
   const [loading, setLoading] = useState(false);
+  const [translating, setTranslating] = useState(false);
 
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
@@ -409,7 +411,26 @@ export function TemplatePickerModal({ data, onClose }: TemplatePickerModalProps)
     setLoading(true);
     try {
       localStorage.setItem(STORAGE_KEY, selected);
-      await downloadResume(data, selected, format);
+
+      let resumeData = data;
+      if (language && language !== "en") {
+        setTranslating(true);
+        try {
+          const res = await fetch("/api/resume/translate", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ resumeData: data, targetLanguage: language }),
+          });
+          if (res.ok) {
+            const json = await res.json();
+            resumeData = json.translatedData ?? data;
+          }
+        } finally {
+          setTranslating(false);
+        }
+      }
+
+      await downloadResume(resumeData, selected, format);
     } finally {
       setLoading(false);
       onClose();
@@ -500,7 +521,7 @@ export function TemplatePickerModal({ data, onClose }: TemplatePickerModalProps)
             disabled={loading}
             className="flex-1 rounded-lg bg-slate-900 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60"
           >
-            {loading ? "Generating…" : `Download ${format.toUpperCase()}`}
+            {translating ? "Translating resume…" : loading ? "Generating…" : `Download ${format.toUpperCase()}`}
           </button>
         </div>
       </div>
diff --git a/lib/i18n/translations/en.ts b/lib/i18n/translations/en.ts
index f294051..2c9acf4 100644
--- a/lib/i18n/translations/en.ts
+++ b/lib/i18n/translations/en.ts
@@ -690,6 +690,63 @@ jobs_continue_interview: "Continue to Interview Prep",
   compare_clause_equal: "Equal",
   compare_clause_different: "Different",
   compare_not_found: "Not found",
+
+  resume_review_subtitle: "Review your resume below. AI-suggested improvements appear in green under each section.",
+  field_full_name: "Full Name",
+  field_email: "Email",
+  field_phone: "Phone",
+  field_address: "Address",
+  score_disclaimer: "Indicative score from AI suggestion count/priority — not a hiring decision.",
+  ai_suggestion_badge: "AI suggested improvement",
+  what_to_improve: "What to improve",
+  suggested_replacement: "Suggested replacement",
+  resume_review_download: "Download Resume",
+
+  upload_step_reading: "Reading your resume…",
+  upload_step_ats: "Running ATS keyword scan…",
+  upload_step_career: "Analysing career progression…",
+  upload_step_salary: "Generating salary benchmarks…",
+  upload_step_finalising: "Finalising feedback…",
+  upload_step_translating: "Translating your resume…",
+  upload_success_banner: "Resume uploaded successfully. Click Analyse My Resume to get your AI feedback.",
+  upload_complete_banner: "Analysis complete. Your resume scored {score}/100. Click Go to Resume Review to see your full feedback.",
+  voice_textarea_placeholder: "Your spoken input will appear here…",
+  voice_describe_label: "Or describe your experience verbally",
+
+  builder_optional_section: "Optional Section {n}",
+  builder_optional_placeholder: "Add certifications, awards, volunteer work, languages, or any other optional section here.",
+  builder_start_date: "Start date",
+  builder_end_date: "End date",
+  builder_present: "Present / Ongoing",
+  builder_present_only: "Present",
+  builder_download: "Download Resume",
+  builder_back_to_review: "Back to Review",
+
+  resume_journey_title: "Your resume journey",
+  resume_journey_step1_label: "Analyse",
+  resume_journey_step1_desc: "Upload your resume and click Analyse My Resume to get instant AI feedback on strengths, gaps, and your ATS score.",
+  resume_journey_step2_label: "Review and Improve",
+  resume_journey_step2_desc: "See your score, apply AI suggestions, and edit your resume sections directly on the review page.",
+  resume_journey_step3_label: "Rebuild if Needed",
+  resume_journey_step3_desc: "Use the Resume Builder to restructure your resume from scratch or refine it section by section.",
+  resume_journey_step4_label: "Match and Apply",
+  resume_journey_step4_desc: "Head to Job Matching to compare your resume against live Singapore job listings and get a recommended fit score.",
+
+  resume_analyse_button: "Analyse My Resume",
+  resume_analysing_label: "Analysing…",
+  ai_feedback_title: "AI Feedback",
+  ai_score_label: "Score:",
+  ai_overall_impression: "Overall Impression",
+  ai_key_strengths: "Key Strengths",
+  ai_areas_to_improve: "Areas to Improve",
+  ai_suggested_edits: "Suggested Edits",
+  ai_ats_analysis: "ATS Analysis",
+  ai_ats_friendly: "ATS Friendly",
+  ai_ats_not_friendly: "Not ATS Friendly",
+  ai_keywords_found: "Keywords Found",
+  ai_keywords_missing: "Keywords Missing",
+  ai_career_progression: "Career Progression",
+  ai_salary_benchmark: "Salary Benchmark",
 };
 
 export default en;
\ No newline at end of file
diff --git a/lib/i18n/translations/ms.ts b/lib/i18n/translations/ms.ts
index 6b44b84..e47d25f 100644
--- a/lib/i18n/translations/ms.ts
+++ b/lib/i18n/translations/ms.ts
@@ -690,6 +690,63 @@ jobs_continue_interview: "Teruskan ke Persediaan Temu Duga",
   compare_clause_equal: "Sama",
   compare_clause_different: "Berbeza",
   compare_not_found: "Tidak dijumpai",
+
+  upload_step_reading: "Membaca resume anda...",
+  upload_step_ats: "Menjalankan imbasan kata kunci ATS...",
+  upload_step_career: "Menganalisis perkembangan kerjaya...",
+  upload_step_salary: "Menjana penanda aras gaji...",
+  upload_step_finalising: "Memuktamadkan maklum balas...",
+  upload_step_translating: "Menterjemahkan resume anda...",
+  upload_success_banner: "Resume berjaya dimuat naik. Klik \"Analisis Resume Saya\" untuk mendapatkan maklum balas AI.",
+  upload_complete_banner: "Analisis selesai. Resume anda mendapat skor {score}/100. Klik \"Pergi ke Semakan Resume\" untuk melihat maklum balas penuh.",
+  voice_textarea_placeholder: "Input suara anda akan muncul di sini...",
+  voice_describe_label: "Atau huraikan pengalaman anda secara lisan",
+
+  builder_optional_section: "Bahagian Pilihan {n}",
+  builder_optional_placeholder: "Tambah sijil, anugerah, kerja sukarela, bahasa, atau sebarang bahagian pilihan lain di sini.",
+  builder_start_date: "Tarikh mula",
+  builder_end_date: "Tarikh tamat",
+  builder_present: "Kini / Sedang berjalan",
+  builder_present_only: "Kini",
+  builder_download: "Muat Turun Resume",
+  builder_back_to_review: "Kembali ke Semakan Resume",
+
+  resume_review_subtitle: "Semak resume anda di bawah. Cadangan penambahbaikan AI dipaparkan dalam warna hijau di bawah setiap bahagian.",
+  field_full_name: "Nama Penuh",
+  field_email: "E-mel",
+  field_phone: "Telefon",
+  field_address: "Alamat",
+  score_disclaimer: "Skor anggaran berdasarkan bilangan dan keutamaan cadangan AI — bukan keputusan pengambilan pekerja.",
+  ai_suggestion_badge: "Cadangan penambahbaikan AI",
+  what_to_improve: "Perkara yang perlu diperbaiki",
+  suggested_replacement: "Cadangan penggantian",
+  resume_review_download: "Muat Turun Resume",
+
+  resume_journey_title: "Perjalanan resume anda",
+  resume_journey_step1_label: "Analisis",
+  resume_journey_step1_desc: "Muat naik resume anda dan klik Analisis Resume Saya untuk mendapat maklum balas AI segera tentang kekuatan, jurang, dan skor ATS anda.",
+  resume_journey_step2_label: "Semak & Perbaiki",
+  resume_journey_step2_desc: "Lihat skor anda, gunakan cadangan AI, dan edit bahagian resume anda terus di halaman semakan.",
+  resume_journey_step3_label: "Bina Semula Jika Perlu",
+  resume_journey_step3_desc: "Gunakan Pembina Resume untuk menstruktur semula resume anda dari awal atau menghaluskannya bahagian demi bahagian.",
+  resume_journey_step4_label: "Padankan & Mohon",
+  resume_journey_step4_desc: "Pergi ke Pemadanan Pekerjaan untuk membandingkan resume anda dengan senarai pekerjaan Singapura dan dapatkan skor padanan yang disyorkan.",
+
+  resume_analyse_button: "Analisis Resume Saya",
+  resume_analysing_label: "Sedang menganalisis…",
+  ai_feedback_title: "Maklum Balas AI",
+  ai_score_label: "Skor:",
+  ai_overall_impression: "Gambaran Keseluruhan",
+  ai_key_strengths: "Kekuatan Utama",
+  ai_areas_to_improve: "Bidang Penambahbaikan",
+  ai_suggested_edits: "Cadangan Penyuntingan",
+  ai_ats_analysis: "Analisis ATS",
+  ai_ats_friendly: "Mesra ATS",
+  ai_ats_not_friendly: "Tidak Mesra ATS",
+  ai_keywords_found: "Kata Kunci Dijumpai",
+  ai_keywords_missing: "Kata Kunci Tidak Ada",
+  ai_career_progression: "Perkembangan Kerjaya",
+  ai_salary_benchmark: "Penanda Aras Gaji",
 };
 
 export default ms;
\ No newline at end of file
diff --git a/lib/i18n/translations/ta.ts b/lib/i18n/translations/ta.ts
index 9a50514..5d7c4a3 100644
--- a/lib/i18n/translations/ta.ts
+++ b/lib/i18n/translations/ta.ts
@@ -690,6 +690,63 @@ jobs_continue_interview: "நேர்காணல் தயாரிப்ப
   compare_clause_equal: "சமம்",
   compare_clause_different: "வேறுபாடு",
   compare_not_found: "கிடைக்கவில்லை",
+
+  upload_step_reading: "உங்கள் ரெஸ்யூமேயை படிக்கிறது...",
+  upload_step_ats: "ATS முக்கிய வார்த்தை ஸ்கேன் இயக்குகிறது...",
+  upload_step_career: "தொழில் முன்னேற்றத்தை பகுப்பாய்வு செய்கிறது...",
+  upload_step_salary: "சம்பள அளவுகோல்களை உருவாக்குகிறது...",
+  upload_step_finalising: "கருத்துக்களை இறுதி செய்கிறது...",
+  upload_step_translating: "உங்கள் ரெஸ்யூமேயை மொழிபெயர்க்கிறது...",
+  upload_success_banner: "ரெஸ்யூமே வெற்றிகரமாக பதிவேற்றப்பட்டது. AI கருத்துக்களை பெற \"என் ரெஸ்யூமேயை பகுப்பாய்வு செய்\" என்பதை கிளிக் செய்யவும்.",
+  upload_complete_banner: "பகுப்பாய்வு முடிந்தது. உங்கள் ரெஸ்யூமே {score}/100 மதிப்பெண் பெற்றது. முழு கருத்துக்களை காண \"ரெஸ்யூமே மதிப்பாய்வுக்கு செல்\" என்பதை கிளிக் செய்யவும்.",
+  voice_textarea_placeholder: "உங்கள் குரல் உள்ளீடு இங்கே தோன்றும்...",
+  voice_describe_label: "அல்லது உங்கள் அனுபவத்தை வாய்மொழியாக விவரிக்கவும்",
+
+  builder_optional_section: "விருப்பப்பட்ட பகுதி {n}",
+  builder_optional_placeholder: "சான்றிதழ்கள், விருதுகள், தொண்டர் பணி, மொழிகள் அல்லது வேறு எந்த விருப்பப்பட்ட பகுதியையும் இங்கே சேர்க்கவும்.",
+  builder_start_date: "தொடக்க தேதி",
+  builder_end_date: "முடிவு தேதி",
+  builder_present: "தற்போது / நடந்துகொண்டிருக்கிறது",
+  builder_present_only: "தற்போது",
+  builder_download: "ரெஸ்யூமேயை பதிவிறக்கு",
+  builder_back_to_review: "ரெஸ்யூமே மதிப்பாய்வுக்கு திரும்பு",
+
+  resume_review_subtitle: "கீழே உங்கள் ரெஸ்யூமேயை மதிப்பாய்வு செய்யவும். AI பரிந்துரைக்கப்பட்ட மேம்பாடுகள் ஒவ்வொரு பகுதியின் கீழ் பச்சை நிறத்தில் காட்டப்படும்.",
+  field_full_name: "முழு பெயர்",
+  field_email: "மின்னஞ்சல்",
+  field_phone: "தொலைபேசி",
+  field_address: "முகவரி",
+  score_disclaimer: "AI பரிந்துரை எண்ணிக்கை மற்றும் முன்னுரிமையின் அடிப்படையில் தோராயமான மதிப்பெண் — இது வேலைவாய்ப்பு முடிவல்ல.",
+  ai_suggestion_badge: "AI பரிந்துரைக்கப்பட்ட மேம்பாடு",
+  what_to_improve: "மேம்படுத்த வேண்டியவை",
+  suggested_replacement: "பரிந்துரைக்கப்பட்ட மாற்று",
+  resume_review_download: "ரெஸ்யூமேயை பதிவிறக்கு",
+
+  resume_journey_title: "உங்கள் ரெஸ்யூமே பயணம்",
+  resume_journey_step1_label: "பகுப்பாய்வு",
+  resume_journey_step1_desc: "உங்கள் ரெஸ்யூமேயை பதிவேற்றி 'என் ரெஸ்யூமேயை பகுப்பாய்வு செய்' என்பதை கிளிக் செய்து, வலிமைகள், இடைவெளிகள் மற்றும் ATS மதிப்பெண் பற்றிய உடனடி AI கருத்துக்களை பெறுங்கள்.",
+  resume_journey_step2_label: "மதிப்பாய்வு & மேம்படுத்தல்",
+  resume_journey_step2_desc: "உங்கள் மதிப்பெண்ணை பாருங்கள், AI பரிந்துரைகளை பயன்படுத்துங்கள், மற்றும் மதிப்பாய்வு பக்கத்தில் நேரடியாக ரெஸ்யூமே பகுதிகளை திருத்துங்கள்.",
+  resume_journey_step3_label: "தேவைப்பட்டால் மறுகட்டமைப்பு",
+  resume_journey_step3_desc: "ரெஸ்யூமே பில்டரை பயன்படுத்தி உங்கள் ரெஸ்யூமேயை புதிதாக கட்டமைக்கவும் அல்லது பகுதி பகுதியாக செம்மைப்படுத்தவும்.",
+  resume_journey_step4_label: "பொருத்தம் & விண்ணப்பிக்கவும்",
+  resume_journey_step4_desc: "வேலை பொருத்தம் பக்கத்திற்கு சென்று உங்கள் ரெஸ்யூமேயை சிங்கப்பூர் வேலை வாய்ப்புகளுடன் ஒப்பிட்டு பரிந்துரைக்கப்பட்ட பொருத்த மதிப்பெண்ணை பெறுங்கள்.",
+
+  resume_analyse_button: "என் ரெஸ்யூமேயை பகுப்பாய்வு செய்",
+  resume_analysing_label: "பகுப்பாய்வு செய்கிறது…",
+  ai_feedback_title: "AI கருத்து",
+  ai_score_label: "மதிப்பெண்:",
+  ai_overall_impression: "ஒட்டுமொத்த தோற்றம்",
+  ai_key_strengths: "முக்கிய வலிமைகள்",
+  ai_areas_to_improve: "மேம்படுத்தல் பகுதிகள்",
+  ai_suggested_edits: "பரிந்துரைக்கப்பட்ட திருத்தங்கள்",
+  ai_ats_analysis: "ATS பகுப்பாய்வு",
+  ai_ats_friendly: "ATS நட்பு",
+  ai_ats_not_friendly: "ATS நட்பு இல்லை",
+  ai_keywords_found: "காணப்பட்ட முக்கிய வார்த்தைகள்",
+  ai_keywords_missing: "இல்லாத முக்கிய வார்த்தைகள்",
+  ai_career_progression: "தொழில் முன்னேற்றம்",
+  ai_salary_benchmark: "சம்பள அளவுகோல்",
 };
 
 export default ta;
\ No newline at end of file
diff --git a/lib/i18n/translations/zh.ts b/lib/i18n/translations/zh.ts
index 26e0ff9..81736cd 100644
--- a/lib/i18n/translations/zh.ts
+++ b/lib/i18n/translations/zh.ts
@@ -645,6 +645,63 @@ jobs_continue_interview: "继续面试准备",
   compare_clause_equal: "相同",
   compare_clause_different: "不同",
   compare_not_found: "未找到",
+
+  resume_review_subtitle: "在下方查看你的简历内容。每个章节下方的绿色框为 AI 建议改进。",
+  field_full_name: "全名",
+  field_email: "电子邮件",
+  field_phone: "电话",
+  field_address: "地址",
+  score_disclaimer: "评分基于 AI 建议数量与优先级，仅供参考，不代表招聘决定。",
+  ai_suggestion_badge: "AI 建议改进",
+  what_to_improve: "待改进内容",
+  suggested_replacement: "建议替换",
+  resume_review_download: "下载简历",
+
+  upload_step_reading: "正在读取您的简历...",
+  upload_step_ats: "正在进行 ATS 关键词扫描...",
+  upload_step_career: "正在分析职业发展轨迹...",
+  upload_step_salary: "正在生成薪资基准...",
+  upload_step_finalising: "正在整理反馈...",
+  upload_step_translating: "正在翻译您的简历...",
+  upload_success_banner: "简历上传成功。请点击「分析我的简历」获取 AI 反馈。",
+  upload_complete_banner: "分析完成。您的简历评分为 {score}/100。点击「前往简历审阅」查看完整反馈。",
+  voice_textarea_placeholder: "您的语音输入将显示在此处...",
+  voice_describe_label: "或用语音描述您的经历",
+
+  builder_optional_section: "可选模块 {n}",
+  builder_optional_placeholder: "在此添加证书、奖项、志愿工作、语言或其他可选内容。",
+  builder_start_date: "开始日期",
+  builder_end_date: "结束日期",
+  builder_present: "至今 / 进行中",
+  builder_present_only: "至今",
+  builder_download: "下载简历",
+  builder_back_to_review: "返回简历审阅",
+
+  resume_journey_title: "你的简历之旅",
+  resume_journey_step1_label: "分析",
+  resume_journey_step1_desc: "上传简历并点击「分析我的简历」以获取即时 AI 反馈，包括优势、差距和 ATS 评分。",
+  resume_journey_step2_label: "审阅与改进",
+  resume_journey_step2_desc: "查看评分，应用 AI 建议，并直接在审阅页面编辑简历内容。",
+  resume_journey_step3_label: "按需重建",
+  resume_journey_step3_desc: "使用简历生成器从头重建或逐节优化简历。",
+  resume_journey_step4_label: "匹配与申请",
+  resume_journey_step4_desc: "前往职位匹配页面，将简历与新加坡职位列表对比并获取推荐匹配分数。",
+
+  resume_analyse_button: "分析我的简历",
+  resume_analysing_label: "分析中…",
+  ai_feedback_title: "AI 反馈",
+  ai_score_label: "评分：",
+  ai_overall_impression: "整体印象",
+  ai_key_strengths: "主要优势",
+  ai_areas_to_improve: "待改进项",
+  ai_suggested_edits: "建议修改",
+  ai_ats_analysis: "ATS 分析",
+  ai_ats_friendly: "符合 ATS",
+  ai_ats_not_friendly: "不符合 ATS",
+  ai_keywords_found: "已找到关键词",
+  ai_keywords_missing: "缺少关键词",
+  ai_career_progression: "职业发展",
+  ai_salary_benchmark: "薪资基准",
 };
 
 export default zh;
\ No newline at end of file
diff --git a/lib/resume-templates/download.ts b/lib/resume-templates/download.ts
index 3501aa0..d1f7f30 100644
--- a/lib/resume-templates/download.ts
+++ b/lib/resume-templates/download.ts
@@ -51,7 +51,7 @@ export async function downloadResume(
     }
 
     const React = await import("react");
-    const blob = await pdf(React.createElement(Component, { data })).toBlob();
+    const blob = await pdf(React.createElement(Component, { data }) as any).toBlob();
     triggerDownload(blob, filename);
     return;
   }
diff --git a/lib/resume-templates/executive-pdf.tsx b/lib/resume-templates/executive-pdf.tsx
index 30372b2..9b6f16a 100644
--- a/lib/resume-templates/executive-pdf.tsx
+++ b/lib/resume-templates/executive-pdf.tsx
@@ -1,11 +1,13 @@
 import React from "react";
-import { Document, Page, View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import { Document, Page, View, Text, Image, StyleSheet, Font } from "@react-pdf/renderer";
 import type { ResumeTemplateData } from "./types";
 
+Font.register({ family: "NotoSansSC", src: "https://fonts.gstatic.com/s/notosanssc/v36/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYxNbPzS5HE.woff2" });
+
 const styles = StyleSheet.create({
-  page: { padding: 40, fontFamily: "Helvetica", backgroundColor: "#ffffff", fontSize: 9.5 },
+  page: { padding: 40, fontFamily: "NotoSansSC", backgroundColor: "#ffffff", fontSize: 9.5 },
   nameRow: { flexDirection: "row", justifyContent: "center", marginBottom: 4 },
-  nameText: { fontSize: 18, fontFamily: "Times-Roman", color: "#111111" },
+  nameText: { fontSize: 18, fontFamily: "NotoSansSC", color: "#111111" },
   contactBar: {
     flexDirection: "row",
     justifyContent: "center",
@@ -18,7 +20,7 @@ const styles = StyleSheet.create({
   jobTitle: {
     textAlign: "center",
     fontSize: 11,
-    fontFamily: "Helvetica-Bold",
+    fontFamily: "NotoSansSC",
     color: "#222222",
     marginBottom: 14,
     letterSpacing: 1,
@@ -45,7 +47,7 @@ const styles = StyleSheet.create({
   expRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 2 },
   companyText: { fontSize: 9, color: "#333333" },
   dateText: { fontSize: 8.5, color: "#777777" },
-  expTitle: { fontSize: 10, fontFamily: "Helvetica-Bold", color: "#111111", marginBottom: 4 },
+  expTitle: { fontSize: 10, fontFamily: "NotoSansSC", color: "#111111", marginBottom: 4 },
   expDesc: { fontSize: 9, lineHeight: 1.55, color: "#333333", marginBottom: 6 },
   bulletRow: { flexDirection: "row", marginBottom: 3 },
   bulletDot: { fontSize: 9, color: "#333333", marginRight: 4 },
@@ -142,7 +144,7 @@ export function ExecutivePdf({ data }: { data: ResumeTemplateData }) {
             <View style={styles.sectionDivBottom} />
             {data.educations.map((edu, i) => (
               <View key={i} style={styles.expRow}>
-                <Text style={[styles.companyText, { fontFamily: "Helvetica-Bold" }]}>
+                <Text style={[styles.companyText, { fontFamily: "NotoSansSC" }]}>
                   {[edu.qualification, edu.fieldOfStudy].filter(Boolean).join(", ")} — {edu.institution}
                 </Text>
                 {edu.graduationYear ? (
diff --git a/lib/resume-templates/modern-minimal-pdf.tsx b/lib/resume-templates/modern-minimal-pdf.tsx
index 222f7dd..288ef26 100644
--- a/lib/resume-templates/modern-minimal-pdf.tsx
+++ b/lib/resume-templates/modern-minimal-pdf.tsx
@@ -1,10 +1,12 @@
 import React from "react";
-import { Document, Page, View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import { Document, Page, View, Text, Image, StyleSheet, Font } from "@react-pdf/renderer";
 import type { ResumeTemplateData } from "./types";
 
+Font.register({ family: "NotoSansSC", src: "https://fonts.gstatic.com/s/notosanssc/v36/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYxNbPzS5HE.woff2" });
+
 const styles = StyleSheet.create({
-  page: { padding: 44, fontFamily: "Helvetica", backgroundColor: "#ffffff", fontSize: 9 },
-  name: { fontSize: 22, fontFamily: "Helvetica-Bold", color: "#000000", marginBottom: 3 },
+  page: { padding: 44, fontFamily: "NotoSansSC", backgroundColor: "#ffffff", fontSize: 9 },
+  name: { fontSize: 22, fontFamily: "NotoSansSC", color: "#000000", marginBottom: 3 },
   addressLine: { fontSize: 9, color: "#444444", marginBottom: 2 },
   contactRow: { flexDirection: "row", marginBottom: 10 },
   contactItem: { fontSize: 9, color: "#444444", marginRight: 24 },
@@ -20,7 +22,7 @@ const styles = StyleSheet.create({
     color: "#000000",
     paddingTop: 1,
   },
-  jobTitle: { fontSize: 9.5, fontFamily: "Helvetica-Bold", color: "#111111", marginBottom: 2 },
+  jobTitle: { fontSize: 9.5, fontFamily: "NotoSansSC", color: "#111111", marginBottom: 2 },
   jobMeta: { fontSize: 8.5, color: "#777777", marginBottom: 4 },
   body: { fontSize: 9, lineHeight: 1.55, color: "#333333", marginBottom: 3 },
   bulletRow: { flexDirection: "row", marginBottom: 2 },
diff --git a/lib/resume-templates/munich-pdf.tsx b/lib/resume-templates/munich-pdf.tsx
index bc8d033..ab8c57a 100644
--- a/lib/resume-templates/munich-pdf.tsx
+++ b/lib/resume-templates/munich-pdf.tsx
@@ -1,11 +1,13 @@
 import React from "react";
-import { Document, Page, View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import { Document, Page, View, Text, Image, StyleSheet, Font } from "@react-pdf/renderer";
 import type { ResumeTemplateData } from "./types";
 
+Font.register({ family: "NotoSansSC", src: "https://fonts.gstatic.com/s/notosanssc/v36/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYxNbPzS5HE.woff2" });
+
 const styles = StyleSheet.create({
-  page: { padding: 44, fontFamily: "Helvetica", backgroundColor: "#ffffff", fontSize: 9 },
+  page: { padding: 44, fontFamily: "NotoSansSC", backgroundColor: "#ffffff", fontSize: 9 },
   tagline: { fontSize: 7.5, letterSpacing: 2, color: "#777777", marginBottom: 5, textTransform: "uppercase" },
-  name: { fontSize: 26, fontFamily: "Times-Roman", color: "#111111", marginBottom: 10 },
+  name: { fontSize: 26, fontFamily: "NotoSansSC", color: "#111111", marginBottom: 10 },
   divider: { borderBottomWidth: 0.75, borderBottomColor: "#cccccc", marginBottom: 14 },
   row: { flexDirection: "row" },
   leftCol: { width: "30%", paddingRight: 14 },
@@ -23,7 +25,7 @@ const styles = StyleSheet.create({
   },
   body: { fontSize: 9, lineHeight: 1.55, color: "#333333", marginBottom: 4 },
   contactLine: { fontSize: 8.5, color: "#444444", marginBottom: 3 },
-  expHeader: { fontSize: 9, fontFamily: "Helvetica-Bold", color: "#111111", marginBottom: 2 },
+  expHeader: { fontSize: 9, fontFamily: "NotoSansSC", color: "#111111", marginBottom: 2 },
   expMeta: { fontSize: 8, color: "#777777", marginBottom: 4 },
   skillRow: { flexDirection: "row", marginBottom: 5, alignItems: "center" },
   skillName: { fontSize: 8.5, color: "#333333", flex: 1 },
@@ -78,7 +80,7 @@ export function MunichPdf({ data }: { data: ResumeTemplateData }) {
                 <Text style={styles.sectionLabel}>Education</Text>
                 {data.educations.map((edu, i) => (
                   <View key={i} style={{ marginBottom: 8 }}>
-                    <Text style={[styles.body, { fontFamily: "Helvetica-Bold" }]}>
+                    <Text style={[styles.body, { fontFamily: "NotoSansSC" }]}>
                       {edu.qualification}
                     </Text>
                     {edu.fieldOfStudy ? (
diff --git a/lib/resume-templates/navy-executive-pdf.tsx b/lib/resume-templates/navy-executive-pdf.tsx
index 45fc3a5..d030656 100644
--- a/lib/resume-templates/navy-executive-pdf.tsx
+++ b/lib/resume-templates/navy-executive-pdf.tsx
@@ -1,13 +1,15 @@
 import React from "react";
-import { Document, Page, View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import { Document, Page, View, Text, Image, StyleSheet, Font } from "@react-pdf/renderer";
 import type { ResumeTemplateData } from "./types";
 
+Font.register({ family: "NotoSansSC", src: "https://fonts.gstatic.com/s/notosanssc/v36/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYxNbPzS5HE.woff2" });
+
 const NAVY = "#1B2E4B";
 const GOLD = "#C9A040";
 const LIGHT_GOLD = "#E8C97A";
 
 const styles = StyleSheet.create({
-  page: { fontFamily: "Helvetica", backgroundColor: "#ffffff", fontSize: 9 },
+  page: { fontFamily: "NotoSansSC", backgroundColor: "#ffffff", fontSize: 9 },
   header: {
     backgroundColor: NAVY,
     paddingVertical: 28,
@@ -20,7 +22,7 @@ const styles = StyleSheet.create({
   headerPhoto: { width: 65, height: 65, borderRadius: 32 },
   headerName: {
     fontSize: 26,
-    fontFamily: "Times-Bold",
+    fontFamily: "NotoSansSC",
     color: GOLD,
     letterSpacing: 3,
     textTransform: "uppercase",
@@ -70,7 +72,7 @@ const styles = StyleSheet.create({
     borderBottomColor: "#dde3eb",
     paddingBottom: 3,
   },
-  expHeader: { fontSize: 9.5, fontFamily: "Helvetica-Bold", color: "#111111", marginBottom: 2 },
+  expHeader: { fontSize: 9.5, fontFamily: "NotoSansSC", color: "#111111", marginBottom: 2 },
   expMeta: { fontSize: 8, color: "#888888", marginBottom: 4 },
   bodyText: { fontSize: 9, lineHeight: 1.55, color: "#333333", marginBottom: 4 },
   bulletRow: { flexDirection: "row", marginBottom: 3 },
@@ -117,7 +119,7 @@ export function NavyExecutivePdf({ data }: { data: ResumeTemplateData }) {
                 <Text style={styles.leftSectionLabel}>Education</Text>
                 {data.educations.map((edu, i) => (
                   <View key={i} style={{ marginBottom: 6 }}>
-                    <Text style={[styles.leftItem, { fontFamily: "Helvetica-Bold" }]}>
+                    <Text style={[styles.leftItem, { fontFamily: "NotoSansSC" }]}>
                       {edu.qualification}
                     </Text>
                     {edu.fieldOfStudy ? (
diff --git a/lib/resume-templates/traditional-pdf.tsx b/lib/resume-templates/traditional-pdf.tsx
index e0b9d9d..cb1ad8c 100644
--- a/lib/resume-templates/traditional-pdf.tsx
+++ b/lib/resume-templates/traditional-pdf.tsx
@@ -1,12 +1,14 @@
 import React from "react";
-import { Document, Page, View, Text, Image, StyleSheet } from "@react-pdf/renderer";
+import { Document, Page, View, Text, Image, StyleSheet, Font } from "@react-pdf/renderer";
 import type { ResumeTemplateData } from "./types";
 
+Font.register({ family: "NotoSansSC", src: "https://fonts.gstatic.com/s/notosanssc/v36/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYxNbPzS5HE.woff2" });
+
 const styles = StyleSheet.create({
-  page: { padding: 44, fontFamily: "Helvetica", backgroundColor: "#ffffff", fontSize: 9 },
+  page: { padding: 44, fontFamily: "NotoSansSC", backgroundColor: "#ffffff", fontSize: 9 },
   headerRow: { flexDirection: "row", marginBottom: 12 },
   headerLeft: { flex: 1 },
-  name: { fontSize: 22, fontFamily: "Helvetica-Bold", color: "#111111", marginBottom: 4 },
+  name: { fontSize: 22, fontFamily: "NotoSansSC", color: "#111111", marginBottom: 4 },
   headerContact: { fontSize: 9, color: "#555555", marginBottom: 2 },
   photoBox: {
     width: 72,
@@ -58,7 +60,7 @@ export function TraditionalPdf({ data }: { data: ResumeTemplateData }) {
           <View style={styles.headerLeft}>
             <Text style={styles.name}>{sanitiseName(data.name)}</Text>
             {data.jobTitle ? (
-              <Text style={[styles.headerContact, { fontFamily: "Helvetica-Bold" }]}>
+              <Text style={[styles.headerContact, { fontFamily: "NotoSansSC" }]}>
                 {data.jobTitle}
               </Text>
             ) : null}
@@ -134,7 +136,7 @@ export function TraditionalPdf({ data }: { data: ResumeTemplateData }) {
                   {i === 0 ? "TERTIARY" : "SECONDARY"}
                 </Text>
                 <View style={{ flex: 1 }}>
-                  <Text style={[styles.body, { fontFamily: "Helvetica-Bold" }]}>
+                  <Text style={[styles.body, { fontFamily: "NotoSansSC" }]}>
                     {[edu.qualification, edu.fieldOfStudy].filter(Boolean).join(", ")}
                   </Text>
                   <Text style={styles.body}>{edu.institution}</Text>
@@ -161,7 +163,7 @@ export function TraditionalPdf({ data }: { data: ResumeTemplateData }) {
                     : exp.startDate || exp.endDate || ""}
                 </Text>
                 <View style={{ flex: 1 }}>
-                  <Text style={[styles.body, { fontFamily: "Helvetica-Bold" }]}>
+                  <Text style={[styles.body, { fontFamily: "NotoSansSC" }]}>
                     {exp.title}
                     {exp.company ? `, ${exp.company}` : ""}
                   </Text>
diff --git a/lib/services/db.ts b/lib/services/db.ts
index 0aab1d1..02e7cce 100644
--- a/lib/services/db.ts
+++ b/lib/services/db.ts
@@ -315,6 +315,7 @@ export async function insertResume(
   profile: ResumeProfile | null,
   filePath?: string,
   imageUrls?: string[],
+  aiSuggestions?: ResumeSuggestion[] | null,
 ): Promise<ResumeRow> {
   const supabase = createClient();
   const { data, error } = await supabase
@@ -326,6 +327,7 @@ export async function insertResume(
       raw_text: rawText,
       parsed_profile: profile,
       image_urls: imageUrls?.length ? imageUrls : null,
+      ai_suggestions: aiSuggestions?.length ? aiSuggestions : null,
     })
     .select()
     .single();
diff --git a/lib/speech/speakText.ts b/lib/speech/speakText.ts
new file mode 100644
index 0000000..ba018d0
--- /dev/null
+++ b/lib/speech/speakText.ts
@@ -0,0 +1,79 @@
+/**
+ * TTS helper with front-cutoff fix.
+ *
+ * Problem: The Web Speech API (SpeechSynthesis) often clips the first
+ * ~200-300ms of audio when the output device is initialising (Bluetooth
+ * headphones, USB DACs, etc.). This causes the first word to be cut off.
+ *
+ * Solution (two-pronged):
+ *   1. Call `speechSynthesis.cancel()` before each utterance to flush the
+ *      queue and reset internal state.
+ *   2. Insert a 300ms programmatic delay between cancel() and speak() to
+ *      give the audio subsystem time to re-initialise. This is more
+ *      reliable than SSML `<break>` since Web Speech API support for SSML
+ *      varies across browsers.
+ *
+ * Usage from a page component:
+ *
+ *   import { speakText } from "@/lib/speech/speakText";
+ *
+ *   speakText("Hello world", "en-SG");
+ *   speakText("你好", "zh-CN", { rate: 0.9 });
+ */
+
+const TTS_STARTUP_DELAY_MS = 300;
+
+export interface SpeakOptions {
+  rate?: number;
+  pitch?: number;
+  voice?: SpeechSynthesisVoice | null;
+}
+
+/**
+ * Speak text using the Web Speech API with front-cutoff mitigation.
+ *
+ * @param text  - The text to speak.
+ * @param lang  - BCP-47 language tag (e.g. "en-SG", "zh-CN").
+ * @param opts  - Optional rate, pitch, and voice overrides.
+ * @returns A promise that resolves when the utterance ends (or rejects on error).
+ */
+export function speakText(
+  text: string,
+  lang: string,
+  opts: SpeakOptions = {},
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (typeof window === "undefined" || !("speechSynthesis" in window)) {
+      resolve();
+      return;
+    }
+
+    // Step 1: Cancel any pending/active speech to reset the synthesiser.
+    window.speechSynthesis.cancel();
+
+    // Step 2: Wait for the audio subsystem to settle before starting.
+    setTimeout(() => {
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = lang;
+      utterance.rate = opts.rate ?? 1;
+      utterance.pitch = opts.pitch ?? 1;
+
+      if (opts.voice) {
+        utterance.voice = opts.voice;
+        utterance.lang = opts.voice.lang;
+      }
+
+      utterance.onend = () => resolve();
+      utterance.onerror = (e) => {
+        // "interrupted" and "canceled" are expected when cancel() is called
+        if (e.error === "interrupted" || e.error === "canceled") {
+          resolve();
+        } else {
+          reject(e);
+        }
+      };
+
+      window.speechSynthesis.speak(utterance);
+    }, TTS_STARTUP_DELAY_MS);
+  });
+}

From c8ae2ca677da3333125c2943d9f148f936ffeb3b Mon Sep 17 00:00:00 2001
From: zackKonfs <zack.konfs@gmail.com>
Date: Sun, 29 Mar 2026 14:00:57 +0800
Subject: [PATCH 09/13] chore: remove .claude folder, add to gitignore

---
 .claude/settings.local.json |  15 ---------------
 .gitignore                  | Bin 65 -> 89 bytes
 2 files changed, 15 deletions(-)
 delete mode 100644 .claude/settings.local.json

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
deleted file mode 100644
index 6c895fe..0000000
--- a/.claude/settings.local.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npx tsc:*)",
-      "Bash(find /c/Users/zackx/vericlause -maxdepth 3 -type f \\\\\\(-name .cursor* -o -name *rules* \\\\\\))",
-      "Bash(npx next:*)",
-      "Bash(node -e \"require\\(''fs''\\).readFileSync\\(''app/api/resume/voice-build/route.ts'',''utf8''\\)\")",
-      "Bash(npx tsx:*)",
-      "Bash(npx eslint:*)",
-      "Bash(npm run:*)",
-      "Bash(git add:*)",
-      "Bash(git commit:*)"
-    ]
-  }
-}
diff --git a/.gitignore b/.gitignore
index f6466ff7b7b54267ff9995fc0568705231847c67..80afca81d0e7964fcf3c5b558444c935c834ce96 100644
GIT binary patch
literal 89
zcmXBKK?;B{3`Egc2XYa?dL*e$1R*Aiw&L+^aW$Xed5G?JNH?t;Q*wRVT=geelx%-9
cEveO`UnZBI!8F}Ek&J&B6c{o(1PTV>0|12?g#Z8m

literal 65
zcmd1HPf3l>%}*)KNiEjr(#uP&C;?Kbd1ZPz`N@enU?!KAUP*CMX=YAJW?ou87f6jR
KNJR=zm<s^$E*69U


From 6b2abbe29cbc260997b465f927eec0b8675af448 Mon Sep 17 00:00:00 2001
From: van <nvleandco@gmail.com>
Date: Mon, 30 Mar 2026 10:48:20 +0800
Subject: [PATCH 10/13] resolve merge corruption in resume, voice-build,
 interview, jobs recommend

---
 app/api/jobs/recommend/route.ts     |  3 ++
 app/api/resume/route.ts             | 31 --------------
 app/api/resume/voice-build/route.ts | 20 ---------
 app/interview/page.tsx              | 36 ----------------
 app/resume/page.tsx                 | 66 -----------------------------
 5 files changed, 3 insertions(+), 153 deletions(-)

diff --git a/app/api/jobs/recommend/route.ts b/app/api/jobs/recommend/route.ts
index ac083dc..cb93a9c 100644
--- a/app/api/jobs/recommend/route.ts
+++ b/app/api/jobs/recommend/route.ts
@@ -2,6 +2,9 @@ import { NextResponse } from "next/server";
 import { getAuthenticatedUser, getResume, listResumes } from "@/lib/services/db";
 import { getJobRecommendations } from "@/lib/services/jobRecommendation";
 
+/** Uses Supabase auth (cookies); avoid static analysis during `next build`. */
+export const dynamic = "force-dynamic";
+
 export const maxDuration = 60;
 
 export async function GET(req: Request) {
diff --git a/app/api/resume/route.ts b/app/api/resume/route.ts
index 11b4240..c3a1988 100644
--- a/app/api/resume/route.ts
+++ b/app/api/resume/route.ts
@@ -34,19 +34,6 @@ function buildSystemPrompt(language?: string): string {
   const instruction = `IMPORTANT: You must respond entirely in ${langName}. All feedback, suggestions, and analysis must be written in ${langName}. Do not use English anywhere in your response.\n\n`;
   return instruction + BASE_SYSTEM_PROMPT;
 }
-const SYSTEM_PROMPT = `You are a professional resume coach specialising in Singapore's white-collar job market.
-
-Analyse the resume below and return ONLY a valid JSON object with exactly these fields:
-
-{
-  "overallImpression": "2 to 3 sentence summary",
-  "keyStrengths": ["strength 1", "strength 2", "strength 3"],
-  "areasToImprove": ["gap 1", "gap 2", "gap 3"],
-  "suggestedEdits": ["edit 1", "edit 2", "edit 3"],
-  "score": 7
-}
-
-Be specific to Singapore hiring standards. No generic advice. No text outside the JSON object.`;
 
 export interface ResumeFeedback {
   overallImpression: string;
@@ -82,7 +69,6 @@ function extractJson(text: string): string {
 
 async function callLlm(resumeText: string, language?: string): Promise<string> {
   const systemPrompt = buildSystemPrompt(language);
-async function callLlm(resumeText: string): Promise<string> {
   const openaiKey = process.env.OPENAI_API_KEY;
   if (openaiKey) {
     try {
@@ -91,7 +77,6 @@ async function callLlm(resumeText: string): Promise<string> {
         model: OPENAI_MODEL,
         messages: [
           { role: "system", content: systemPrompt },
-          { role: "system", content: SYSTEM_PROMPT },
           { role: "user", content: resumeText.slice(0, 120_000) },
         ],
         temperature: 0,
@@ -110,7 +95,6 @@ async function callLlm(resumeText: string): Promise<string> {
     model: GROQ_FALLBACK_MODEL,
     messages: [
       { role: "system", content: systemPrompt },
-      { role: "system", content: SYSTEM_PROMPT },
       { role: "user", content: resumeText.slice(0, 120_000) },
     ],
     temperature: 0,
@@ -161,26 +145,11 @@ export async function POST(req: NextRequest) {
     if (!resumeText.trim()) {
       return NextResponse.json({ detail: "File produced no text" }, { status: 422 });
     }
-  try {
-    const arrayBuffer = await file.arrayBuffer();
-    const uint8Array = new Uint8Array(arrayBuffer);
-    const { text } = await extractText(uint8Array, { mergePages: true });
-    resumeText = text;
-  } catch (e) {
-    return NextResponse.json(
-      { detail: `File could not be read: ${e instanceof Error ? e.message : e}` },
-      { status: 422 },
-    );
-  }
-
-  if (!resumeText.trim()) {
-    return NextResponse.json({ detail: "File produced no text" }, { status: 422 });
   }
 
   let raw: string;
   try {
     raw = await callLlm(resumeText, language);
-    raw = await callLlm(resumeText);
   } catch (e) {
     return NextResponse.json(
       { detail: `AI analysis failed: ${e instanceof Error ? e.message : e}` },
diff --git a/app/api/resume/voice-build/route.ts b/app/api/resume/voice-build/route.ts
index ddfa653..19de802 100644
--- a/app/api/resume/voice-build/route.ts
+++ b/app/api/resume/voice-build/route.ts
@@ -6,7 +6,6 @@ import Groq from "groq-sdk";
 import { getAuthenticatedUser, insertResume } from "@/lib/services/db";
 import type { ResumeProfile, ResumeSuggestion } from "@/lib/types";
 import type { ResumeFeedback } from "@/app/api/resume/route";
-import type { ResumeProfile } from "@/lib/types";
 
 const OPENAI_MODEL = "gpt-4o-mini";
 const GROQ_FALLBACK_MODEL = "llama-3.1-8b-instant";
@@ -99,10 +98,6 @@ Auto-correct the language, fix grammar, and compile the answers into a clean, pr
 
 If the candidate's name appears to contain individual letters separated by spaces (e.g. J A Y S O N), reconstruct it as a single proper name. Strip any leading or trailing hash symbols or special characters from the name before saving.
 
-const SYSTEM_PROMPT = `You are a professional resume writer for Singapore's job market. The user has provided raw voice transcript answers to resume questions. The transcripts may have errors or incomplete sentences from speech recognition.
-
-Auto-correct the language, fix grammar, and compile the answers into a clean, professionally formatted resume. Keep all facts as stated. For a simplified entry-level resume, focus on clarity over complexity.
-
 Return ONLY a valid JSON object with exactly these fields:
 {
   "name": "string",
@@ -119,7 +114,6 @@ No text outside the JSON. If a field has no data, return an empty string for it.
 
 async function callLlm(prompt: string, language?: string): Promise<string> {
   const systemPrompt = buildLanguageInstruction(language) + BASE_COMPILATION_PROMPT;
-async function callLlm(prompt: string): Promise<string> {
   const openaiKey = process.env.OPENAI_API_KEY;
   if (openaiKey) {
     try {
@@ -128,7 +122,6 @@ async function callLlm(prompt: string): Promise<string> {
         model: OPENAI_MODEL,
         messages: [
           { role: "system", content: systemPrompt },
-          { role: "system", content: SYSTEM_PROMPT },
           { role: "user", content: prompt },
         ],
         temperature: 0.2,
@@ -147,7 +140,6 @@ async function callLlm(prompt: string): Promise<string> {
     model: GROQ_FALLBACK_MODEL,
     messages: [
       { role: "system", content: systemPrompt },
-      { role: "system", content: SYSTEM_PROMPT },
       { role: "user", content: prompt },
     ],
     temperature: 0.2,
@@ -198,11 +190,6 @@ export async function POST(req: NextRequest) {
   const prompt = [
     answers.full_name ? `Full Name: ${answers.full_name}` : "",
     sanitizedAge ? `Age: ${sanitizedAge}` : "",
-  const answers = await req.json();
-
-  const prompt = [
-    answers.full_name ? `Full Name: ${answers.full_name}` : "",
-    answers.age ? `Age: ${answers.age}` : "",
     answers.job_title ? `Target Role: ${answers.job_title}` : "",
     answers.summary ? `Professional Summary (voice): ${answers.summary}` : "",
     answers.experience ? `Work Experience (voice): ${answers.experience}` : "",
@@ -216,7 +203,6 @@ export async function POST(req: NextRequest) {
 
   try {
     const raw = await callLlm(prompt, language);
-    const raw = await callLlm(prompt);
     const braceStart = raw.indexOf("{");
     const braceEnd = raw.lastIndexOf("}");
     if (braceStart === -1 || braceEnd <= braceStart) {
@@ -249,9 +235,6 @@ export async function POST(req: NextRequest) {
     // in the review page can find it — that function filters lines containing "Name:".
     const rawText = [
       result.name || "",
-    // Build a raw_text representation so the resume is searchable/readable in Supabase
-    const rawText = [
-      result.name ? `Name: ${result.name}` : "",
       result.targetRole ? `Target Role: ${result.targetRole}` : "",
       result.summary ? `Summary:\n${result.summary}` : "",
       result.experience ? `Experience:\n${result.experience}` : "",
@@ -266,9 +249,6 @@ export async function POST(req: NextRequest) {
     const saved = await insertResume(user.id, fileName, rawText, profile, undefined, undefined, aiSuggestions);
 
     return NextResponse.json({ success: true, resumeId: saved.id, resumeData: result, feedback });
-    const saved = await insertResume(user.id, fileName, rawText, profile);
-
-    return NextResponse.json({ ...result, resume_id: saved.id });
   } catch (e) {
     return NextResponse.json(
       { detail: `Resume generation failed: ${e instanceof Error ? e.message : e}` },
diff --git a/app/interview/page.tsx b/app/interview/page.tsx
index 06e65a8..f49f4d6 100644
--- a/app/interview/page.tsx
+++ b/app/interview/page.tsx
@@ -2,7 +2,6 @@
 
 import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
-import { useMemo, useRef, useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
 import { useLanguage } from "@/components/providers/language-provider";
 import { createClient } from "@/lib/supabase/client";
@@ -131,41 +130,6 @@ export default function InterviewPage() {
     }
   }
 
-  const [micState, setMicState] = useState<"idle" | "listening" | "processing">("idle");
-  const recognizerRef = useRef<{ stop: () => void } | null>(null);
-
-  function handleMicClick() {
-    if (micState === "listening") {
-      recognizerRef.current?.stop();
-      return;
-    }
-
-    const SpeechRecognition =
-      (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
-
-    if (!SpeechRecognition) {
-      alert("Speech recognition not supported in this browser");
-      return;
-    }
-
-    const recognition = new SpeechRecognition();
-    recognition.continuous = true;
-    recognition.interimResults = false;
-    recognition.lang = "en-US";
-
-    recognition.onresult = (event: any) => {
-      const transcript = event.results[event.results.length - 1][0].transcript;
-      setTextInput((prev) => (prev ? prev + " " + transcript : transcript));
-    };
-
-    recognition.onerror = () => setMicState("idle");
-    recognition.onend = () => setMicState("idle");
-
-    recognition.start();
-    recognizerRef.current = recognition;
-    setMicState("listening");
-  }
-
   function startSession() {
     setSessionStarted(true);
     setConversation([
diff --git a/app/resume/page.tsx b/app/resume/page.tsx
index 7d48d53..fc5dcda 100644
--- a/app/resume/page.tsx
+++ b/app/resume/page.tsx
@@ -64,15 +64,6 @@ function ResumeOnboardingContent() {
     ];
     return () => timers.forEach(clearTimeout);
   }, [analysing]);
-  // AI feedback state
-  const [feedback, setFeedback] = useState<ResumeFeedback | null>(null);
-  const [analysing, setAnalysing] = useState(false);
-  const [analysisError, setAnalysisError] = useState<string | null>(null);
-
-  // Voice-to-text state
-  const [micState, setMicState] = useState<"idle" | "listening" | "processing">("idle");
-  const [voiceText, setVoiceText] = useState("");
-  const recognizerRef = useRef<{ stop: () => void } | null>(null);
 
   useEffect(() => {
     const supabase = createClient();
@@ -110,9 +101,6 @@ function ResumeOnboardingContent() {
     setAnalysisError(null);
     setUploadComplete(false);
     setAnalysisComplete(false);
-    setSuccessMessage(null);
-    setFeedback(null);
-    setAnalysisError(null);
   }, []);
 
   function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -261,9 +249,6 @@ function ResumeOnboardingContent() {
       formData.append("voiceText", voiceText);
       formData.append("language", locale);
       if (translatedText) formData.append("translatedText", translatedText);
-    try {
-      const formData = new FormData();
-      formData.append("file", selectedFile);
 
       const res = await fetch("/api/resume", { method: "POST", body: formData });
       const json = await res.json();
@@ -306,7 +291,6 @@ function ResumeOnboardingContent() {
       en: "en-SG", zh: "zh-CN", ms: "ms-MY", ta: "ta-IN",
     };
     recognition.lang = micLangMap[locale] ?? "en-SG";
-    recognition.lang = "en-US";
 
     recognition.onresult = (event: any) => {
       const transcript = event.results[event.results.length - 1][0].transcript;
@@ -390,7 +374,6 @@ function ResumeOnboardingContent() {
                 <button
                   type="button"
                   onClick={handleMicClick}
-                  onClick={() => void handleMicClick()}
                   title={micState === "listening" ? "Stop recording" : "Start voice input"}
                   className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl border transition ${
                     micState === "listening"
@@ -448,13 +431,11 @@ function ResumeOnboardingContent() {
             <div className="mt-5">
               <label className="mb-2 block text-sm font-medium text-slate-700">
                 {t("voice_describe_label")}
-                Or describe your experience verbally
               </label>
               <textarea
                 value={voiceText}
                 onChange={(e) => setVoiceText(e.target.value)}
                 placeholder={t("voice_textarea_placeholder")}
-                placeholder="Your spoken input will appear here..."
                 rows={4}
                 className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-navy-950"
               />
@@ -511,15 +492,6 @@ function ResumeOnboardingContent() {
               </div>
             ) : null}
 
-            <button
-              type="button"
-              onClick={() => void handleAnalyse()}
-              disabled={!selectedFile || analysing}
-              className="mt-4 w-full rounded-xl border border-[#b88a44] px-4 py-3 text-sm font-medium text-[#b88a44] transition hover:bg-amber-50 disabled:cursor-not-allowed disabled:opacity-60"
-            >
-              {analysing ? "Analysing..." : "Analyse My Resume"}
-            </button>
-
             {analysisError ? (
               <p className="mt-3 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                 {analysisError}
@@ -611,38 +583,6 @@ function ResumeOnboardingContent() {
               <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                 <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
                   {t("ai_overall_impression")}
-        {/* AI Feedback section */}
-        <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-          <div className="flex items-center justify-between">
-            <h2 className="text-xl font-semibold text-navy-950">AI Feedback</h2>
-            {feedback && (
-              <span className="text-sm font-semibold text-navy-950">
-                Score: <span className="text-2xl">{feedback.score}</span>
-                <span className="font-normal text-slate-400"> / 10</span>
-              </span>
-            )}
-          </div>
-
-          {!feedback ? (
-            <div className="mt-4 space-y-3">
-              <p className="text-sm text-slate-500">
-                Upload a file and click &ldquo;Analyse My Resume&rdquo; to see AI-powered feedback here.
-              </p>
-              <div className="grid gap-3 sm:grid-cols-2">
-                {["Overall Impression", "Key Strengths", "Areas to Improve", "Suggested Edits"].map((section) => (
-                  <div key={section} className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
-                    <p className="text-xs font-semibold uppercase tracking-wider text-slate-400">{section}</p>
-                    <div className="mt-2 h-3 w-3/4 rounded bg-slate-200" />
-                    <div className="mt-1.5 h-3 w-1/2 rounded bg-slate-200" />
-                  </div>
-                ))}
-              </div>
-            </div>
-          ) : (
-            <div className="mt-4 grid gap-4 sm:grid-cols-2">
-              <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
-                <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
-                  Overall Impression
                 </p>
                 <p className="text-sm leading-6 text-slate-700">{feedback.overallImpression}</p>
               </div>
@@ -650,7 +590,6 @@ function ResumeOnboardingContent() {
               <div className="rounded-xl border border-emerald-100 bg-emerald-50 px-4 py-3">
                 <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-emerald-600">
                   {t("ai_key_strengths")}
-                  Key Strengths
                 </p>
                 <ul className="space-y-1.5">
                   {feedback.keyStrengths.map((s, i) => (
@@ -667,7 +606,6 @@ function ResumeOnboardingContent() {
               <div className="rounded-xl border border-amber-100 bg-amber-50 px-4 py-3">
                 <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-amber-600">
                   {t("ai_areas_to_improve")}
-                  Areas to Improve
                 </p>
                 <ul className="space-y-1.5">
                   {feedback.areasToImprove.map((s, i) => (
@@ -684,7 +622,6 @@ function ResumeOnboardingContent() {
               <div className="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
                 <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
                   {t("ai_suggested_edits")}
-                  Suggested Edits
                 </p>
                 <ul className="space-y-1.5">
                   {feedback.suggestedEdits.map((s, i) => (
@@ -777,9 +714,6 @@ function ResumeOnboardingContent() {
             </div>
           </div>
         ) : null}
-            </div>
-          )}
-        </div>
 
         <div className="mt-10 max-w-3xl">
           <ResumeList resumes={userResumes} onDeleted={handleResumeDeleted} className="mt-0" />

From b6bc2cad6c474bda1467d2791b7aa71a6787ec5e Mon Sep 17 00:00:00 2001
From: van <nvleandco@gmail.com>
Date: Mon, 30 Mar 2026 10:48:37 +0800
Subject: [PATCH 11/13] Delete CLAUDE.md

---
 CLAUDE.md | 102 ------------------------------------------------------
 1 file changed, 102 deletions(-)
 delete mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
deleted file mode 100644
index 891fdc5..0000000
--- a/CLAUDE.md
+++ /dev/null
@@ -1,102 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-VeriClause is a full-stack employment contract compliance analyzer for Singapore. It uses an agentic RAG system to evaluate contract clauses against Singapore employment law, with additional features for resume profiling, AI interview coaching, and job recommendations.
-
-## Commands
-
-```bash
-npm run dev     # Start Next.js dev server (port 3000)
-npm run build   # Production build
-npm run lint    # ESLint
-
-# Law ingestion pipeline (one-time setup or when laws change)
-python scripts/docling_parse_laws.py        # Parse law PDFs → data/laws-parsed/*.md
-npx tsx scripts/ingest-laws.ts              # Embed & upsert chunks to Pinecone
-
-# DB migrations: run supabase/migration.sql in Supabase SQL Editor
-```
-
-No test framework is configured.
-
-## Architecture
-
-**Stack**: Next.js 14 (App Router) + React 18 + TypeScript 5 + Supabase (PostgreSQL + Auth) + Tailwind CSS
-
-**LLM chain**: OpenAI gpt-4o-mini (primary) → Groq llama-3.1-8b-instant (fallback). Embeddings via OpenAI text-embedding-3-small stored in Pinecone. PDF parsing via LlamaCloud.
-
-### Async Job Pattern
-
-Both contract analysis and resume profiling use the same pattern:
-1. Create a job row in Supabase (`status: queued`)
-2. Start LLM work in background (not awaited)
-3. `Promise.race` against `ANALYZE_TIMEOUT_MS` / `RESUME_PROFILE_WAIT_MS`
-4. Fast path: completes within timeout → return result inline
-5. Slow path: timeout → return `{ status: "running", job_id }` → client polls `GET .../[job_id]`
-
-### RAG Compliance Analysis (`lib/services/rag.ts`)
-
-Uses OpenAI function-calling agent loop with two tools:
-- `search_law(query)` → Pinecone vector search → top-5 Singapore law excerpts
-- `submit_verdict(verdict, citation, explanation)` → records compliance result
-
-Clauses are analyzed 4 at a time via `Promise.allSettled`. Falls back to Groq one-shot if OpenAI fails.
-
-### Authentication
-
-Supabase Auth (JWT). `middleware.ts` refreshes tokens on every request via `updateSession`. Server-side Supabase client in `lib/supabase/server.ts`. API routes authenticate via `getAuthenticatedUser()`.
-
-### Database
-
-Supabase PostgreSQL with RLS (`auth.uid() = user_id` on every table). Schema in `supabase/migration.sql`. Key tables: `documents`, `reports`, `analysis_jobs`, `resumes`, `profiling_jobs`, `comparison_jobs`.
-
-### Key Services (`lib/services/`)
-
-- `extraction.ts` — LLM-based contract entity extraction from raw text
-- `rag.ts` — Agentic compliance analysis with Pinecone RAG
-- `resumeProfiling.ts` — Resume analysis with async job pattern
-- `pdf.ts` — PDF parsing via LlamaCloud
-- `redact.ts` — Regex PII redaction (NRIC, names, emails, phone) before DB storage
-- `db.ts` — Supabase query helpers for documents/reports
-
-### API Route Organization
-
-All under `app/api/`:
-- `contracts/` — upload, analyze (with `[job_id]` polling), translate, compare, benchmark
-- `resumes/` — CRUD, profile (with `[job_id]` polling), status
-- `azure/` — speech-token, avatar-relay
-- `jobs/` — recommend, scrape
-- `interview/` — coaching
-
-Legacy rewrites in `next.config.mjs`: `/api/upload` → `/api/contracts/upload`, `/api/analyze` → `/api/contracts/analyze`
-
-### State Management
-
-No external state library. Two React Context providers wired in `app/layout.tsx`:
-- **LanguageProvider** (`components/providers/language-provider.tsx`) — UI language (en, zh, ta, ms); translations in `lib/i18n/translations/`
-- **ResumeStatusProvider** (`components/providers/resume-status-provider.tsx`) — `useResumeStatus()` returns `{ has_resume, has_profile, resume_id }`, used for nav gates
-
-### Supabase Clients
-
-- `lib/supabase/client.ts` — Browser client (`createBrowserClient`)
-- `lib/supabase/server.ts` — Server client (`createServerClient`) for API routes
-- `lib/supabase/middleware.ts` — Session refresh logic used by root `middleware.ts`
-
-### Styling
-
-Tailwind CSS with custom navy + gold color palette and Inter (sans) + Merriweather (serif) fonts. Config in `tailwind.config.ts`.
-
-## Import Alias
-
-`@/*` maps to project root (configured in tsconfig.json).
-
-## Environment Variables
-
-Required in `.env.local`: `OPENAI_API_KEY`, `GROQ_API_KEY`, `LLAMA_CLOUD_API_KEY`, `PINECONE_API_KEY`, `PINECONE_INDEX`, `NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`, `AZURE_SPEECH_KEY`, `AZURE_SPEECH_REGION`, `AZURE_AVATAR_ENDPOINT`. Optional timeouts: `ANALYZE_TIMEOUT_MS` (default 25000), `RESUME_PROFILE_WAIT_MS`.
-
-## Key Types
-
-Core type definitions in `lib/types.ts`: `ExtractedContract`, `ComplianceVerdict`, `ResumeProfile`.

From 3f0d0e35ce9e8a60a351a2f0010ab6a5a869efc1 Mon Sep 17 00:00:00 2001
From: van <nvleandco@gmail.com>
Date: Mon, 30 Mar 2026 12:15:32 +0800
Subject: [PATCH 12/13] Implement Google sign in

---
 app/auth/callback/route.ts             |  51 ++++++++
 app/auth/sign-in/page.tsx              |  21 +++-
 app/auth/sign-up/page.tsx              |  42 ++++++-
 components/auth/GoogleSignInButton.tsx |  77 ++++++++++++
 lib/supabase/middleware.ts             |   1 +
 package-lock.json                      | 157 +++++++++++++++++++++++++
 package.json                           |   2 +
 7 files changed, 345 insertions(+), 6 deletions(-)
 create mode 100644 app/auth/callback/route.ts
 create mode 100644 components/auth/GoogleSignInButton.tsx

diff --git a/app/auth/callback/route.ts b/app/auth/callback/route.ts
new file mode 100644
index 0000000..0f5636c
--- /dev/null
+++ b/app/auth/callback/route.ts
@@ -0,0 +1,51 @@
+import { createServerClient } from "@supabase/ssr";
+import { type NextRequest, NextResponse } from "next/server";
+import { safeNextPath } from "@/lib/auth/safe-next-path";
+
+/**
+ * OAuth redirect target (e.g. Google). Supabase redirects here with ?code=...
+ * Session cookies are written onto the redirect response.
+ */
+export async function GET(request: NextRequest) {
+  const url = request.nextUrl;
+  const code = url.searchParams.get("code");
+  const next = safeNextPath(url.searchParams.get("next"));
+
+  if (!code) {
+    const dest = url.clone();
+    dest.pathname = "/auth/sign-in";
+    dest.search = "";
+    dest.searchParams.set("error", "oauth");
+    return NextResponse.redirect(dest);
+  }
+
+  const response = NextResponse.redirect(new URL(next, url.origin));
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll();
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) => {
+            response.cookies.set(name, value, options);
+          });
+        },
+      },
+    },
+  );
+
+  const { error } = await supabase.auth.exchangeCodeForSession(code);
+  if (error) {
+    const dest = url.clone();
+    dest.pathname = "/auth/sign-in";
+    dest.search = "";
+    dest.searchParams.set("error", "oauth");
+    return NextResponse.redirect(dest);
+  }
+
+  return response;
+}
diff --git a/app/auth/sign-in/page.tsx b/app/auth/sign-in/page.tsx
index f4e7c50..c894746 100644
--- a/app/auth/sign-in/page.tsx
+++ b/app/auth/sign-in/page.tsx
@@ -6,12 +6,18 @@ import { AuthShell } from "@/components/auth/AuthShell";
 import { AuthForm, type AuthFormValues } from "@/components/auth/AuthForm";
 import { safeNextPath } from "@/lib/auth/safe-next-path";
 import { createClient } from "@/lib/supabase/client";
+import { GoogleSignInButton } from "@/components/auth/GoogleSignInButton";
 import Link from "next/link";
 
 function SignInContent() {
-  const [error, setError] = useState<string | null>(null);
   const router = useRouter();
   const searchParams = useSearchParams();
+  const urlError =
+    searchParams.get("error") === "oauth"
+      ? "Google sign-in could not be completed. Try again."
+      : null;
+  const [error, setError] = useState<string | null>(null);
+  const displayError = error ?? urlError;
 
   const handleSubmit = async (values: AuthFormValues) => {
     setError(null);
@@ -44,7 +50,18 @@ function SignInContent() {
         </>
       }
     >
-      <AuthForm mode="sign-in" onSubmit={handleSubmit} error={error} />
+      <div className="space-y-4">
+        <GoogleSignInButton next={searchParams.get("next")} onError={setError} />
+        <div className="relative py-2">
+          <div className="absolute inset-0 flex items-center" aria-hidden>
+            <div className="w-full border-t border-slate-200" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-white px-2 text-slate-400">or email</span>
+          </div>
+        </div>
+        <AuthForm mode="sign-in" onSubmit={handleSubmit} error={displayError} />
+      </div>
     </AuthShell>
   );
 }
diff --git a/app/auth/sign-up/page.tsx b/app/auth/sign-up/page.tsx
index 71d22db..f1ff7aa 100644
--- a/app/auth/sign-up/page.tsx
+++ b/app/auth/sign-up/page.tsx
@@ -1,14 +1,21 @@
 "use client";
 
-import { useState } from "react";
-import { useRouter } from "next/navigation";
+import { Suspense, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { AuthShell } from "@/components/auth/AuthShell";
 import { AuthForm, type AuthFormValues } from "@/components/auth/AuthForm";
+import { GoogleSignInButton } from "@/components/auth/GoogleSignInButton";
 import { createClient } from "@/lib/supabase/client";
 import Link from "next/link";
 
-export default function SignUpPage() {
+function SignUpContent() {
+  const searchParams = useSearchParams();
+  const urlError =
+    searchParams.get("error") === "oauth"
+      ? "Google sign-in could not be completed. Try again."
+      : null;
   const [error, setError] = useState<string | null>(null);
+  const displayError = error ?? urlError;
   const [success, setSuccess] = useState(false);
   const router = useRouter();
 
@@ -59,7 +66,34 @@ export default function SignUpPage() {
         </>
       }
     >
-      <AuthForm mode="sign-up" onSubmit={handleSubmit} error={error} />
+      <div className="space-y-4">
+        <GoogleSignInButton next={searchParams.get("next")} onError={setError} />
+        <div className="relative py-2">
+          <div className="absolute inset-0 flex items-center" aria-hidden>
+            <div className="w-full border-t border-slate-200" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-white px-2 text-slate-400">or email</span>
+          </div>
+        </div>
+        <AuthForm mode="sign-up" onSubmit={handleSubmit} error={displayError} />
+      </div>
     </AuthShell>
   );
 }
+
+export default function SignUpPage() {
+  return (
+    <Suspense
+      fallback={
+        <AuthShell title="Create your VeriClause account" subtitle="Set up an account to save analyses">
+          <div className="flex justify-center py-8">
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-slate-200 border-t-navy-950" />
+          </div>
+        </AuthShell>
+      }
+    >
+      <SignUpContent />
+    </Suspense>
+  );
+}
diff --git a/components/auth/GoogleSignInButton.tsx b/components/auth/GoogleSignInButton.tsx
new file mode 100644
index 0000000..e3fabf6
--- /dev/null
+++ b/components/auth/GoogleSignInButton.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import { createClient } from "@/lib/supabase/client";
+import { safeNextPath } from "@/lib/auth/safe-next-path";
+
+type GoogleSignInButtonProps = {
+  /** `next` query from the page — safe path applied before redirect. */
+  next: string | null;
+  onError?: (message: string) => void;
+};
+
+export function GoogleSignInButton({ next, onError }: GoogleSignInButtonProps) {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    setLoading(true);
+    const supabase = createClient();
+    const dest = safeNextPath(next);
+    const redirectTo = `${window.location.origin}/auth/callback?next=${encodeURIComponent(dest)}`;
+
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: "google",
+      options: { redirectTo },
+    });
+
+    if (error) {
+      setLoading(false);
+      onError?.(error.message);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={() => void handleClick()}
+      disabled={loading}
+      className="flex w-full items-center justify-center gap-3 rounded-md border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-navy-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-70"
+    >
+      {loading ? (
+        <span className="flex items-center gap-2 text-slate-600">
+          <svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24" aria-hidden>
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+          Redirecting…
+        </span>
+      ) : (
+        <>
+          <svg className="h-5 w-5 shrink-0" viewBox="0 0 24 24" aria-hidden>
+            <path
+              fill="#4285F4"
+              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            />
+            <path
+              fill="#34A853"
+              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            />
+            <path
+              fill="#EA4335"
+              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            />
+          </svg>
+          Continue with Google
+        </>
+      )}
+    </button>
+  );
+}
diff --git a/lib/supabase/middleware.ts b/lib/supabase/middleware.ts
index ab85e56..9905104 100644
--- a/lib/supabase/middleware.ts
+++ b/lib/supabase/middleware.ts
@@ -6,6 +6,7 @@ function isPublicPath(pathname: string): boolean {
   if (pathname === "/") return true;
   if (pathname.startsWith("/auth/sign-in")) return true;
   if (pathname.startsWith("/auth/sign-up")) return true;
+  if (pathname.startsWith("/auth/callback")) return true;
   return false;
 }
 
diff --git a/package-lock.json b/package-lock.json
index 10fcbec..f173d31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "vericlause",
       "version": "0.1.0",
       "dependencies": {
+        "@11labs/react": "^0.2.0",
+        "@elevenlabs/client": "^1.0.0",
         "@google/generative-ai": "^0.24.1",
         "@llamaindex/llama-cloud": "^1.8.0",
         "@llamaindex/pdf-viewer": "^1.3.0",
@@ -43,6 +45,29 @@
         "typescript": "^5"
       }
     },
+    "node_modules/@11labs/client": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@11labs/client/-/client-0.2.0.tgz",
+      "integrity": "sha512-GBplAV4WDbcoThsIzdSDPN3xbcitK0ZZ4iJfJZKfltqvgvS6Uw8GZxHwVgiPwnQoA3uosYyY3L9TuPwmel18xQ==",
+      "deprecated": "This package is no longer maintained. Please use @elevenlabs/client for the latest version",
+      "license": "MIT",
+      "dependencies": {
+        "livekit-client": "^2.11.4"
+      }
+    },
+    "node_modules/@11labs/react": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@11labs/react/-/react-0.2.0.tgz",
+      "integrity": "sha512-YxUwMvW4Gjd+WixS3VrKFUv0pkqI6dk/BCvRgkpR8uBr3BwnMMpZv+7Qrp1EeHixv8gEv5TeAuWEfh2lf2Pf1w==",
+      "deprecated": "This package is no longer maintained. Please use @elevenlabs/react for the latest version",
+      "license": "MIT",
+      "dependencies": {
+        "@11labs/client": "^0.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -105,6 +130,27 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.10.1.tgz",
+      "integrity": "sha512-wJ8ReQbHxsAfXhrf9ixl0aYbZorRuOWpBNzm8pL8ftmSxQx/wnJD5Eg861NwJU/czy2VXFIebCeZnZrI9rktIQ==",
+      "license": "(Apache-2.0 AND BSD-3-Clause)"
+    },
+    "node_modules/@elevenlabs/client": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@elevenlabs/client/-/client-1.0.0.tgz",
+      "integrity": "sha512-+xzFm58LJS4dlPNXkeI8pOD3zSGranleGGm3ldflou1KF77o9XU/wjfiI/7xB1fATA8CzP8Co0KK7BhPUmeo8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@elevenlabs/types": "0.8.0",
+        "livekit-client": "^2.11.4"
+      }
+    },
+    "node_modules/@elevenlabs/types": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@elevenlabs/types/-/types-0.8.0.tgz",
+      "integrity": "sha512-j6P8SQ5GSjYoBQFmiAwnnBe+jX6zVMbAho8k3Ix8YveSck4J1J0BriDwOg2x6zXTofNe0ZKgijx+As9VTjtBVQ=="
+    },
     "node_modules/@emnapi/core": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
@@ -777,6 +823,21 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@livekit/mutex": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@livekit/mutex/-/mutex-1.1.1.tgz",
+      "integrity": "sha512-EsshAucklmpuUAfkABPxJNhzj9v2sG7JuzFDL4ML1oJQSV14sqrpTYnsaOudMAw9yOaW53NU3QQTlUQoRs4czw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@livekit/protocol": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.44.0.tgz",
+      "integrity": "sha512-/vfhDUGcUKO8Q43r6i+5FrDhl5oZjm/X3U4x2Iciqvgn5C8qbj+57YPcWSJ1kyIZm5Cm6AV2nAPjMm3ETD/iyg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@bufbuild/protobuf": "^1.10.0"
+      }
+    },
     "node_modules/@llamaindex/llama-cloud": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@llamaindex/llama-cloud/-/llama-cloud-1.8.0.tgz",
@@ -1541,6 +1602,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/dom-mediacapture-record": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/@types/dom-mediacapture-record/-/dom-mediacapture-record-1.0.22.tgz",
+      "integrity": "sha512-mUMZLK3NvwRLcAAT9qmcK+9p7tpU2FHdDsntR3YI4+GY88XrgG4XiE7u1Q2LAN2/FZOz/tdMDC3GQCR4T8nFuw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -5451,6 +5519,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jose": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.2.tgz",
+      "integrity": "sha512-d7kPDd34KO/YnzaDOlikGpOurfF0ByC2sEV4cANCtdqLlTfBlw2p14O/5d/zv40gJPbIQxfES3nSx1/oYNyuZQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5660,6 +5737,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/livekit-client": {
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.18.0.tgz",
+      "integrity": "sha512-wjH4y0rw5fnkPmmaxutPhD4XcAq6goQszS8lw9PEpGXVwiRE6sI/ZH+mOT/s8AHJnEC3tjmfiMZ4MQt8BlaWew==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@livekit/mutex": "1.1.1",
+        "@livekit/protocol": "1.44.0",
+        "events": "^3.3.0",
+        "jose": "^6.1.0",
+        "loglevel": "^1.9.2",
+        "sdp-transform": "^2.15.0",
+        "tslib": "2.8.1",
+        "typed-emitter": "^2.1.0",
+        "webrtc-adapter": "^9.0.1"
+      },
+      "peerDependencies": {
+        "@types/dom-mediacapture-record": "^1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -5695,6 +5792,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loglevel": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
+      "integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/loglevel"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -7170,6 +7280,16 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@@ -7263,6 +7383,21 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/sdp": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.1.tgz",
+      "integrity": "sha512-lwsAIzOPlH8/7IIjjz3K0zYBk7aBVVcvjMwt3M4fLxpjMYyy7i3I97SLHebgn4YBjirkzfp3RvRDWSKsh/+WFw==",
+      "license": "MIT"
+    },
+    "node_modules/sdp-transform": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.15.0.tgz",
+      "integrity": "sha512-KrOH82c/W+GYQ0LHqtr3caRpM3ITglq3ljGUIb8LTki7ByacJZ9z+piSGiwZDsRyhQbYBOBJgr2k6X4BZXi3Kw==",
+      "license": "MIT",
+      "bin": {
+        "sdp-verify": "checker.js"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
@@ -8210,6 +8345,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typed-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/typed-emitter/-/typed-emitter-2.1.0.tgz",
+      "integrity": "sha512-g/KzbYKbH5C2vPkaXGu8DJlHrGKHLsM25Zg9WuC9pMGfuvT+X25tZQWo5fK1BjBm8+UrVE9LDCvaY0CQk+fXDA==",
+      "license": "MIT",
+      "optionalDependencies": {
+        "rxjs": "*"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -8391,6 +8535,19 @@
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/webrtc-adapter": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.4.tgz",
+      "integrity": "sha512-5ZZY1+lGq8LEKuDlg9M2RPJHlH3R7OVwyHqMcUsLKCgd9Wvf+QrFTCItkXXYPmrJn8H6gRLXbSgxLLdexiqHxw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
diff --git a/package.json b/package.json
index 4cad962..319dea3 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@11labs/react": "^0.2.0",
+    "@elevenlabs/client": "^1.0.0",
     "@google/generative-ai": "^0.24.1",
     "@llamaindex/llama-cloud": "^1.8.0",
     "@llamaindex/pdf-viewer": "^1.3.0",

From 0f4b863d8da4edd4468545a6f2378568e5917791 Mon Sep 17 00:00:00 2001
From: van <nvleandco@gmail.com>
Date: Mon, 30 Mar 2026 12:16:00 +0800
Subject: [PATCH 13/13] Implement interview and fix a fix ui issues on contract
 page

---
 app/api/interview/coaching/route.ts |  90 ---
 app/api/interviews/session/route.ts | 151 +++++
 app/contract/page.tsx               |  24 +-
 app/interview/page.tsx              | 877 ++++++++++++++--------------
 app/jobs/page.tsx                   |  16 +-
 app/page.tsx                        |  43 +-
 app/resume/page.tsx                 |  16 +-
 app/resume/review/page.tsx          |  10 +-
 components/layout/UserMenu.tsx      |  60 ++
 9 files changed, 672 insertions(+), 615 deletions(-)
 delete mode 100644 app/api/interview/coaching/route.ts
 create mode 100644 app/api/interviews/session/route.ts
 create mode 100644 components/layout/UserMenu.tsx

diff --git a/app/api/interview/coaching/route.ts b/app/api/interview/coaching/route.ts
deleted file mode 100644
index b87e24b..0000000
--- a/app/api/interview/coaching/route.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-export const runtime = "nodejs";
-
-import { NextRequest, NextResponse } from "next/server";
-import OpenAI from "openai";
-import Groq from "groq-sdk";
-
-const OPENAI_MODEL = "gpt-4o-mini";
-const GROQ_FALLBACK_MODEL = "llama-3.1-8b-instant";
-
-const SYSTEM_PROMPT = `You are an expert interview coach reviewing a mock interview conversation for a Singapore job seeker.
-
-Analyse the candidate's answers so far and return ONLY a valid JSON object with exactly these fields:
-{
-  "score": a number from 0 to 100 reflecting overall interview performance so far,
-  "strengths": an array of 2 specific things the candidate did well in their answers,
-  "improvements": an array of 2 specific coaching suggestions to improve their answers
-}
-
-Be specific and practical. Reference actual things the candidate said. No generic advice.`;
-
-function extractJson(text: string): string {
-  const fenceMatch = text.match(/```(?:json)?\s*\n?([\s\S]*?)```/);
-  if (fenceMatch) return fenceMatch[1].trim();
-  const braceStart = text.indexOf("{");
-  const braceEnd = text.lastIndexOf("}");
-  if (braceStart !== -1 && braceEnd > braceStart) {
-    return text.slice(braceStart, braceEnd + 1);
-  }
-  return text.trim();
-}
-
-export async function POST(req: NextRequest) {
-  try {
-    const { conversation } = await req.json();
-
-    if (!Array.isArray(conversation) || conversation.length === 0) {
-      return NextResponse.json({ error: "No conversation provided" }, { status: 400 });
-    }
-
-    const transcript = conversation
-      .filter((m: { speaker: string; text: string }) => m.speaker !== "system")
-      .map((m: { speaker: string; text: string }) =>
-        `${m.speaker === "agent" ? "Interviewer" : "Candidate"}: ${m.text}`
-      )
-      .join("\n");
-
-    let raw = "";
-
-    const openaiKey = process.env.OPENAI_API_KEY;
-    if (openaiKey) {
-      try {
-        const client = new OpenAI({ apiKey: openaiKey });
-        const response = await client.chat.completions.create({
-          model: OPENAI_MODEL,
-          messages: [
-            { role: "system", content: SYSTEM_PROMPT },
-            { role: "user", content: transcript },
-          ],
-          temperature: 0,
-        });
-        raw = response.choices[0]?.message?.content ?? "";
-      } catch (err) {
-        console.warn("OpenAI coaching failed, falling back to Groq:", err);
-      }
-    }
-
-    if (!raw) {
-      const groqKey = process.env.GROQ_API_KEY;
-      if (!groqKey) {
-        return NextResponse.json({ error: "No AI API key configured" }, { status: 500 });
-      }
-      const client = new Groq({ apiKey: groqKey });
-      const response = await client.chat.completions.create({
-        model: GROQ_FALLBACK_MODEL,
-        messages: [
-          { role: "system", content: SYSTEM_PROMPT },
-          { role: "user", content: transcript },
-        ],
-        temperature: 0,
-      });
-      raw = response.choices[0]?.message?.content ?? "";
-    }
-
-    const parsed = JSON.parse(extractJson(raw));
-    return NextResponse.json(parsed);
-  } catch (err) {
-    console.error("Coaching route error:", err);
-    return NextResponse.json({ error: "Failed to generate coaching" }, { status: 500 });
-  }
-}
diff --git a/app/api/interviews/session/route.ts b/app/api/interviews/session/route.ts
new file mode 100644
index 0000000..4d626c9
--- /dev/null
+++ b/app/api/interviews/session/route.ts
@@ -0,0 +1,151 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getAuthenticatedUser, listResumes, getResume } from "@/lib/services/db";
+
+export async function GET(req: NextRequest) {
+    const user = await getAuthenticatedUser();
+    if (!user) {
+        return NextResponse.json({ detail: "Unauthorized" }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(req.url);
+    const resumeId = searchParams.get("resume_id");
+    const interviewer = searchParams.get("interviewer") || "alex";
+
+    let resume;
+    if (resumeId) {
+        resume = await getResume(resumeId, user.id);
+    } else {
+        const resumes = await listResumes(user.id);
+        resume = resumes[0]; // Latest
+    }
+
+    if (!resume) {
+        return NextResponse.json({ detail: "No resume found. Please upload a resume first." }, { status: 404 });
+    }
+
+    const profile = resume.parsed_profile;
+    if (!profile) {
+        return NextResponse.json({ detail: "Resume is not yet profiled. Please wait for profiling to complete." }, { status: 400 });
+    }
+
+    // Construct the context string
+    const context = [
+        `Name: ${resume.file_name?.replace(/\.[^/.]+$/, "") || "Candidate"}`,
+        `Headline: ${profile.headline || "N/A"}`,
+        `Summary: ${profile.summary || "N/A"}`,
+        `Skills: ${profile.skills?.join(", ") || "N/A"}`,
+        `Experience:`,
+        ...(profile.experiences || []).map(exp => `- ${exp.title} at ${exp.company} (${exp.start_date} - ${exp.end_date || 'Present'}): ${exp.description}`),
+    ].join("\n");
+
+    const isSophia = interviewer.toLowerCase() === "sophia";
+    const sophiaAgentId = process.env.ELEVENLABS_SOPHIA_AGENT_ID?.trim();
+
+    if (isSophia && !sophiaAgentId) {
+        console.error("Missing ELEVENLABS_SOPHIA_AGENT_ID for Sophia interviewer.");
+        return NextResponse.json(
+            {
+                detail:
+                    "Sophia interviewer is not configured. Set ELEVENLABS_SOPHIA_AGENT_ID in your environment (same as in .env.local for local dev).",
+            },
+            { status: 500 },
+        );
+    }
+
+    /** Optional TTS override; Sophia's agent usually uses the voice configured in ElevenLabs for that agent. */
+    const defaultSophiaVoiceId = "SDNKIYEpTz0h56jQX8rA";
+    const sophiaVoiceId = process.env.ELEVENLABS_SOPHIA_VOICE_ID ?? defaultSophiaVoiceId;
+    const useVoiceOverride = isSophia && !!process.env.ELEVENLABS_SOPHIA_VOICE_ID;
+
+    const persona = isSophia ? {
+        name: "Sophia",
+        role: "Senior Executive Recruiter & Career Strategist",
+        personality: [
+            "Warm, poised, and highly professional — you sound like a trusted advisor, not an interrogator.",
+            "You care deeply about how candidates lead, collaborate, and grow: leadership presence, influence without authority, stakeholder communication, and resilience.",
+            "You probe cultural fit and motivation: why this role, why now, and how they would show up for a team in Singapore's fast-moving hiring landscape.",
+            "You listen for specifics: stories with context, trade-offs they made, and what they learned — not buzzwords.",
+            "You speak with a refined, encouraging tone; you give brief, genuine acknowledgement before moving to the next question.",
+        ].join(" "),
+        voiceId: sophiaVoiceId,
+        agentId: sophiaAgentId!,
+    } : {
+        name: "Alex",
+        role: "Seasoned Hiring Manager",
+        personality: "Direct, practical, and fair. You focus on technical skills, problem-solving abilities, and concrete results. You value brisk, data-driven answers.",
+        voiceId: undefined,
+        agentId: process.env.ELEVENLABS_AGENT_ID
+    };
+
+    const interviewStyleExtra = isSophia
+        ? `
+## Interview style — Sophia (executive recruiter)
+- **Focus**: Leadership stories, collaboration, stakeholder influence, motivation, and cultural fit. Avoid deep stack trivia unless it clearly matches their target role.
+- **Opening energy**: Confident and welcoming; show you’ve read their profile (headline, key experiences).
+- **Question style**: Behavioural and situational (“Tell me about a time…”, “How did you navigate…”) grounded in their CV.
+- **Follow-ups**: At most one per question — ask for concrete context (trade-offs, who was involved, what changed) when answers stay generic.
+- **Avoid**: Sounding robotic or cold; inventing employers, titles, or skills.
+- **Tone**: Refined, encouraging, calm pacing; short sentences. Singapore: professional warmth with clarity.
+`
+        : `
+## Interview style — Alex (hiring manager)
+- **Focus**: Execution, problem-solving, and proof — scope, tools, outcomes, and thinking under constraint. Tie questions to skills and experience bullets.
+- **Opening energy**: Direct and respectful of time; signal you care about substance.
+- **Question style**: Lean technical or operational (“Walk me through…”, “What was the hardest part…”, “How did you measure success…”). Ask for metrics, timeline, ownership, validation.
+- **Follow-ups**: At most one per question — clarify what *they* did vs the team, and how they’d adapt next time.
+- **Avoid**: Hostile tone; purely motivational fluff without linking to delivery; inventing facts about the candidate.
+- **Tone**: Brisk, clear, minimal filler. Singapore: competence and clarity expected.
+`;
+
+    const instructions = `
+# Identity & Persona
+- **Name**: ${persona.name}
+- **Role**: ${persona.role}
+- **Personality**: ${persona.personality}
+${interviewStyleExtra}
+
+# Sound human (not scripted)
+- You are in a **live conversation**, not reading a checklist. Vary your wording; do not repeat the same filler every turn.
+- Use **short bridges** between topics: a genuine one-liner reaction (“That’s helpful context,” “Got it — thanks for clarifying”) before the next question.
+- **One question at a time.** Let them finish; then respond, then ask. If they go long, you may gently narrow (“To keep us on track — in one or two sentences, what was the outcome?”).
+- If they seem nervous, **one calming line** is fine; then move on. Avoid sounding rushed or like a form.
+- If they start talking over you, **stop immediately** and yield the floor.
+
+# Structure (hidden agenda — keep it light on the surface)
+- Cover **exactly three main question topics** across the session, each grounded in their profile and the **Interview style** above (Sophia vs Alex). Do **not** label them “Question 1/2/3” out loud.
+- You may use **one short follow-up** per topic when something is vague — same topic only, then move on.
+- Aim for a **short practice session** (roughly a few minutes of dialogue). Prefer **brief turns**: your spoken replies usually **well under ~30 seconds** so they get air time.
+- If time is running short, **skip depth** and offer a warm, quick close instead of squeezing another topic.
+- If they go quiet after you ask something, **one gentle nudge** (“Take your time — whenever you’re ready”) before rephrasing more simply.
+
+# Candidate Profile
+${context}
+
+# Flow (guide, don’t robot-read)
+1. **Opening**: Greet them by name if it appears naturally from the profile; mention you’ve looked at their background (${profile.headline || "their experience"}) in your own words — don’t quote blocks from the CV. Invite them to begin when ready (they can say “start”, “ready”, or equivalent — accept natural cues).
+2. **Middle**: Explore three topics as a **flowing interview**: acknowledge what they said, then **build** (“Building on that…”, “I’m curious about…”, “One more angle…”). Avoid robotic pivots like “Next question:”.
+3. **Close**: When you’ve fairly covered three topics (or time is tight), transition naturally (“Before we wrap…”, “Last thing from me…”). Share **one** strength and **one** concrete improvement idea in plain language, then thank them and wish them well. Don’t list bullets aloud.
+
+# Guardrails
+- **Do not invent** employers, titles, skills, or achievements not supported by the profile.
+- Stay within **Interview style** for this persona (Sophia vs Alex).
+    `.trim();
+
+    const headlineHint = profile.headline || "your experience";
+    const firstMessage = isSophia
+        ? `Hi — I'm ${persona.name}. I've had a chance to look at your background around ${headlineHint}, and I'm glad we could make this work. Whenever you're ready, we can get started — just let me know.`
+        : `Hi — I'm ${persona.name}. I've skimmed your profile around ${headlineHint}; we'll keep this efficient. Whenever you're ready to begin, just say the word.`;
+
+    if (!process.env.ELEVENLABS_API_KEY || !process.env.ELEVENLABS_AGENT_ID) {
+        console.error("Missing ElevenLabs Configuration in environment variables.");
+        return NextResponse.json({ detail: "ElevenLabs API Key or Agent ID is missing from environment variables." }, { status: 500 });
+    }
+
+    return NextResponse.json({
+        agent_id: persona.agentId,
+        dynamic_instructions: instructions,
+        first_message: firstMessage,
+        voice_id: isSophia ? persona.voiceId : undefined,
+        use_voice_override: useVoiceOverride,
+    });
+}
diff --git a/app/contract/page.tsx b/app/contract/page.tsx
index 9499f07..18fc2b2 100644
--- a/app/contract/page.tsx
+++ b/app/contract/page.tsx
@@ -3,6 +3,7 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
+import { UserMenu } from "@/components/layout/UserMenu";
 import { DisclaimerModal, useDisclaimerAccepted } from "@/components/contract/DisclaimerModal";
 import { OnboardingForm, type OnboardingData } from "@/components/contract/OnboardingForm";
 import { VerdictBadge } from "@/components/contract/VerdictBadge";
@@ -497,22 +498,15 @@ export default function ContractPage() {
     <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
       <SiteNavbar
         rightSlot={
-          <button
-            onClick={async () => {
+          <UserMenu
+            onSignOut={() => {
               try {
                 sessionStorage.removeItem("vericlause.contractFlowStep");
               } catch {
                 /* ignore */
               }
-              const supabase = createClient();
-              await supabase.auth.signOut();
-              router.push("/");
-              router.refresh();
             }}
-            className="text-sm font-medium text-slate-600 transition-colors hover:text-navy-950"
-          >
-            {t("dash_sign_out")}
-          </button>
+          />
         }
       />
 
@@ -545,16 +539,6 @@ export default function ContractPage() {
                 }}
               />
             </div>
-
-            <p className="mt-6 text-center">
-              <button
-                type="button"
-                onClick={() => setFlowStep("upload")}
-                className="text-sm font-medium text-slate-600 underline decoration-slate-300 underline-offset-2 hover:text-navy-950"
-              >
-                {t("dash_step1_skip")}
-              </button>
-            </p>
           </div>
         ) : null}
 
diff --git a/app/interview/page.tsx b/app/interview/page.tsx
index f49f4d6..b04fb1d 100644
--- a/app/interview/page.tsx
+++ b/app/interview/page.tsx
@@ -1,461 +1,466 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import { useRef, useState } from "react";
+import Link from "next/link";
+import { useEffect, useRef, useState, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
-import { useLanguage } from "@/components/providers/language-provider";
-import { createClient } from "@/lib/supabase/client";
-import AzureAvatarStage from "@/components/interview/AzureAvatarStage";
-
-type InterviewRole =
-  | "general"
-  | "operations_executive"
-  | "project_coordinator"
-  | "software_engineer";
-
-type InterviewType = "hr" | "behavioral" | "technical";
-type Difficulty = "easy" | "medium" | "hard";
-
-type AgentState = "idle" | "connecting" | "listening" | "thinking" | "speaking" | "error";
-
-type ConversationMessage = {
-  id: string;
-  speaker: "agent" | "user" | "system";
-  text: string;
-  timestamp: string;
-};
-
-function formatTime(date = new Date()) {
-  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-}
-
-function getOpeningLine(locale: string, role: InterviewRole, interviewType: InterviewType) {
-  const roleLabel =
-    role === "operations_executive"
-      ? "Operations Executive"
-      : role === "project_coordinator"
-      ? "Project Coordinator"
-      : role === "software_engineer"
-      ? "Software Engineer"
-      : "your target role";
-
-  if (locale === "zh") {
-    return `你好，我会担任你的 AI 面试官。我们将开始一场 ${roleLabel} 的${
-      interviewType === "technical" ? "技术" : interviewType === "behavioral" ? "行为" : "人事"
-    }面试练习。请先简单介绍自己。`;
-  }
-
-  if (locale === "ms") {
-    return `Hai, saya akan menjadi penemuduga AI anda. Kita akan mulakan sesi latihan temu duga ${
-      interviewType === "technical" ? "teknikal" : interviewType === "behavioral" ? "tingkah laku" : "HR"
-    } untuk jawatan ${roleLabel}. Sila mulakan dengan memperkenalkan diri anda.`;
-  }
-
-  if (locale === "ta") {
-    return `வணக்கம், நான் உங்கள் AI நேர்காணல் முகவராக இருப்பேன். ${roleLabel} பதவிக்கான ${
-      interviewType === "technical" ? "தொழில்நுட்ப" : interviewType === "behavioral" ? "நடத்தை சார்ந்த" : "மனிதவள"
-    } நேர்காணல் பயிற்சியை தொடங்கலாம். முதலில் உங்களை அறிமுகப்படுத்துங்கள்.`;
-  }
-
-  return `Hi, I’ll be your AI interviewer. We’re starting a ${interviewType} interview practice session for a ${roleLabel} role. Please begin by introducing yourself.`;
-}
-
-
-export default function InterviewPage() {
-  const router = useRouter();
-  const { t, locale } = useLanguage();
-  const safeLocale =
-    locale === "en" || locale === "zh" || locale === "ms" || locale === "ta"
-      ? locale
-      : "en";
-
-  const [role, setRole] = useState<InterviewRole>("general");
-  const [interviewType, setInterviewType] = useState<InterviewType>("hr");
-  const [difficulty, setDifficulty] = useState<Difficulty>("medium");
-  const [agentState, setAgentState] = useState<AgentState>("idle");
-  const [conversation, setConversation] = useState<ConversationMessage[]>([]);
-  const [textInput, setTextInput] = useState("");
-  const [sessionStarted, setSessionStarted] = useState(false);
-
-  const [coaching, setCoaching] = useState<{
-    score: number;
-    strengths: string[];
-    improvements: string[];
-  }>({ score: 0, strengths: [], improvements: [] });
-
-  const [micState, setMicState] = useState<"idle" | "listening" | "processing">("idle");
-  const recognizerRef = useRef<{
-    stopContinuousRecognitionAsync: (cb?: () => void, err?: (e: string) => void) => void;
-  } | null>(null);
-
-  async function handleMicClick() {
-    if (micState === "listening") {
-      recognizerRef.current?.stopContinuousRecognitionAsync(
-        () => setMicState("idle"),
-        () => setMicState("idle"),
-      );
-      return;
+import { UserMenu } from "@/components/layout/UserMenu";
+import { useConversation } from "@11labs/react";
+
+/** Fixed bar heights for speaking indicator (avoid Math.random on each render). */
+const SPEAKING_BAR_HEIGHTS_PX = [12, 20, 14, 18, 16];
+
+const INTERVIEWERS = [
+    {
+        id: "alex",
+        name: "Alex",
+        role: "Hiring Manager",
+        description: "Direct, practical, and focuses on your technical expertise.",
+        avatar: "https://i.ibb.co/bRRtgr0x/alex.jpg",
+        color: "bg-blue-500"
+    },
+    {
+        id: "sophia",
+        name: "Sophia",
+        role: "Senior Executive Recruiter",
+        description:
+            "Warm and strategic — she explores leadership, collaboration, and motivation with behavioural questions tailored to your profile.",
+        avatar: "https://i.ibb.co/zH2WSZSj/sarah.jpg",
+        color: "bg-gold-500"
     }
-
-    setMicState("processing");
-    try {
-      const res = await fetch("/api/speech");
-      if (!res.ok) throw new Error("Failed to get speech token");
-      const { token, region } = await res.json();
-
-      const SpeechSDK = await import("microsoft-cognitiveservices-speech-sdk");
-      const speechConfig = SpeechSDK.SpeechConfig.fromAuthorizationToken(token, region);
-      speechConfig.speechRecognitionLanguage = "en-SG";
-      const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
-      const recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
-
-      recognizerRef.current = recognizer;
-
-      recognizer.recognized = (_: unknown, e: { result: { reason: number; text: string } }) => {
-        if (e.result.reason === SpeechSDK.ResultReason.RecognizedSpeech && e.result.text) {
-          setTextInput((prev) => (prev ? prev + " " + e.result.text : e.result.text));
-        }
-      };
-
-      recognizer.startContinuousRecognitionAsync(
-        () => setMicState("listening"),
-        (err: string) => {
-          console.error("Speech recognition error:", err);
-          setMicState("idle");
+];
+
+function InterviewContent() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const resumeId = searchParams.get("resume_id");
+
+    const [selectedInterviewer, setSelectedInterviewer] = useState<typeof INTERVIEWERS[0] | null>(null);
+    const [isInterviewing, setIsInterviewing] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [timeLeft, setTimeLeft] = useState(120);
+    const [lastError, setLastError] = useState<string | null>(null);
+    const [isIntermediate, setIsIntermediate] = useState(false);
+    const [isMuted, setIsMuted] = useState(false);
+    const [transcript, setTranscript] = useState<{ id: string; role: "user" | "agent"; text: string }[]>([]);
+    const transcriptLineIdRef = useRef(0);
+    const transcriptEndRef = useRef<HTMLDivElement | null>(null);
+
+    const conversation = useConversation({
+        onConnect: () => {
+            transcriptLineIdRef.current = 0;
+            setTranscript([]);
+            setIsInterviewing(true);
+            setLoading(false);
+            setLastError(null);
+            setIsIntermediate(false);
         },
-      );
-    } catch (err) {
-      console.error("Mic setup failed:", err);
-      setMicState("idle");
-    }
-  }
-
-  function startSession() {
-    setSessionStarted(true);
-    setConversation([
-      {
-        id: crypto.randomUUID(),
-        speaker: "system",
-        text: "Interview session started.",
-        timestamp: formatTime(),
-      },
-      {
-        id: crypto.randomUUID(),
-        speaker: "agent",
-        text: getOpeningLine(safeLocale, role, interviewType),
-        timestamp: formatTime(),
-      },
-    ]);
-  }
-
-  function endSession() {
-    setSessionStarted(false);
-    setConversation((prev) => [
-      ...prev,
-      {
-        id: crypto.randomUUID(),
-        speaker: "system",
-        text: "Interview session ended.",
-        timestamp: formatTime(),
-      },
-    ]);
-  }
-
-  async function sendTextReply() {
-    if (!textInput.trim()) return;
-
-    const userMessage: ConversationMessage = {
-      id: crypto.randomUUID(),
-      speaker: "user",
-      text: textInput.trim(),
-      timestamp: formatTime(),
-    };
-
-    const updatedConversation = [...conversation, userMessage];
-    setConversation(updatedConversation);
-    setTextInput("");
-
-    try {
-      const res = await fetch("/api/interview/coaching", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ conversation: updatedConversation }),
-      });
-      if (res.ok) {
-        const data = await res.json();
-        setCoaching(data);
-      }
-    } catch {
-      // silently keep existing coaching if the request fails
-    }
-  }
-
-  return (
-    <main className="min-h-screen bg-[#f8f8f6]">
-      <SiteNavbar
-        rightSlot={
-          <button
-            type="button"
-            onClick={async () => {
-              const supabase = createClient();
-              await supabase.auth.signOut();
-              router.push("/");
-              router.refresh();
-            }}
-            className="text-sm font-medium text-slate-600 transition-colors hover:text-navy-950"
-          >
-            {t("dash_sign_out")}
-          </button>
+        onDisconnect: () => {
+            setIsInterviewing(false);
+            setTimeLeft(120);
+            setLoading(false);
+            setIsIntermediate(false);
+        },
+        onError: (err: any) => {
+            setLastError(err.message || String(err));
+            setIsIntermediate(false);
+            setIsInterviewing(false);
+            setLoading(false);
+        },
+        onMessage: ({ role, message }) => {
+            const id = `t-${++transcriptLineIdRef.current}`;
+            setTranscript((prev) => [...prev, { id, role, text: message }]);
+        },
+    });
+
+    useEffect(() => {
+        transcriptEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [transcript]);
+
+    useEffect(() => {
+        let timer: NodeJS.Timeout;
+        if (isInterviewing && timeLeft > 0) {
+            timer = setInterval(() => {
+                setTimeLeft((prev) => {
+                    if (prev <= 1) {
+                        conversation.endSession();
+                        return 0;
+                    }
+                    return prev - 1;
+                });
+            }, 1000);
         }
-      />
-
-      <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:py-14">
-        <div className="mb-8">
-          <p className="mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-[#b88a44]">
-            {t("nav_interview")}
-          </p>
-          <h1 className="font-serif text-4xl font-semibold tracking-tight text-navy-950 sm:text-5xl">
-            AI Interview Agent
-          </h1>
-          <p className="mt-4 max-w-3xl text-base leading-7 text-slate-600 sm:text-lg">
-            Practice with a live Azure avatar interviewer while keeping setup, transcript, and coaching on one page.
-          </p>
-        </div>
-
-        <div className="grid gap-6 xl:grid-cols-[240px_minmax(0,1.4fr)_240px]">
-          <aside className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-            <h2 className="text-xl font-semibold text-navy-950">Session Setup</h2>
-            <p className="mt-2 text-sm leading-6 text-slate-600">
-              Configure the mock interview before starting.
-            </p>
-
-            <div className="mt-5 space-y-4">
-              <div>
-                <label className="mb-2 block text-sm font-medium text-slate-700">Target Role</label>
-                <select
-                  value={role}
-                  onChange={(e) => setRole(e.target.value as InterviewRole)}
-                  className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800"
-                >
-                  <option value="general">General</option>
-                  <option value="operations_executive">Operations Executive</option>
-                  <option value="project_coordinator">Project Coordinator</option>
-                  <option value="software_engineer">Software Engineer</option>
-                </select>
-              </div>
-
-              <div>
-                <label className="mb-2 block text-sm font-medium text-slate-700">Interview Type</label>
-                <select
-                  value={interviewType}
-                  onChange={(e) => setInterviewType(e.target.value as InterviewType)}
-                  className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800"
-                >
-                  <option value="hr">HR</option>
-                  <option value="behavioral">Behavioral</option>
-                  <option value="technical">Technical</option>
-                </select>
-              </div>
+        return () => clearInterval(timer);
+    }, [isInterviewing, timeLeft, conversation]);
+
+    const startInterview = async () => {
+        if (!selectedInterviewer || loading || isInterviewing || isIntermediate) return;
+        setLoading(true);
+        setLastError(null);
+        try {
+            const url = new URL("/api/interviews/session", window.location.origin);
+            if (resumeId) url.searchParams.set("resume_id", resumeId);
+            url.searchParams.set("interviewer", selectedInterviewer.id);
+
+            const res = await fetch(url.toString());
+            const data = await res.json();
+
+            if (!res.ok) throw new Error(data.detail || "Failed to fetch session config");
+
+            setTimeLeft(120);
+            setIsIntermediate(true);
+
+            await conversation.startSession({
+                agentId: data.agent_id,
+                connectionType: "websocket",
+                overrides: {
+                    agent: {
+                        prompt: {
+                            prompt: data.dynamic_instructions
+                        },
+                        firstMessage: data.first_message
+                    },
+                    tts: {
+                        ...(data.use_voice_override ? { voiceId: data.voice_id } : {})
+                    }
+                }
+            });
+        } catch (e: any) {
+            console.error("Failed to start ElevenLabs session:", e);
+            // Check if it's a voice ID error
+            const errorMsg = e.message || String(e);
+            setLastError(errorMsg);
+            setIsIntermediate(false);
+            setLoading(false);
+        }
+    };
 
-              <div>
-                <label className="mb-2 block text-sm font-medium text-slate-700">Difficulty</label>
-                <select
-                  value={difficulty}
-                  onChange={(e) => setDifficulty(e.target.value as Difficulty)}
-                  className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800"
-                >
-                  <option value="easy">Easy</option>
-                  <option value="medium">Medium</option>
-                  <option value="hard">Hard</option>
-                </select>
-              </div>
-            </div>
+    const stopInterview = async () => {
+        await conversation.endSession();
+        setIsInterviewing(false);
+        setTimeLeft(120);
+        setSelectedInterviewer(null);
+        transcriptLineIdRef.current = 0;
+        setTranscript([]);
+    };
 
-            <div className="mt-6 space-y-3">
-              <button
-                type="button"
-                onClick={startSession}
-                className="w-full rounded-xl bg-navy-950 px-4 py-3 text-sm font-medium text-white transition hover:opacity-90"
-              >
-                {sessionStarted ? "Restart Session" : "Start Session"}
-              </button>
+    const toggleMute = () => {
+        // The SDK doesn't have a direct mute method in this version, but we can simulate UI state
+        // or actually stop the mic if we had access to the stream. 
+        // For now, let's just toggle the UI state.
+        setIsMuted(!isMuted);
+    };
 
-              <button
-                type="button"
-                onClick={endSession}
-                disabled={!sessionStarted}
-                className="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
-              >
-                End Session
-              </button>
+    if (!selectedInterviewer && !isInterviewing) {
+        return (
+            <div className="min-h-screen bg-[#f8f8f6] font-sans text-slate-900">
+                <SiteNavbar
+                    rightSlot={<UserMenu />}
+                />
+                <main className="mx-auto max-w-5xl px-6 py-14 sm:px-8 lg:py-20">
+                    <header className="mb-12 max-w-2xl">
+                        <p className="mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-[#b88a44]">
+                            Interview practice
+                        </p>
+                        <h1 className="font-serif text-4xl font-bold tracking-tight text-navy-950 sm:text-5xl">
+                            Choose your interviewer
+                        </h1>
+                        <p className="mt-4 text-lg leading-relaxed text-slate-600">
+                            Pick a style that matches how you want to rehearse. Each host uses a different focus and question style — both use your resume for context.
+                        </p>
+                    </header>
+
+                    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
+                        {INTERVIEWERS.map((person) => (
+                            <button
+                                key={person.id}
+                                type="button"
+                                onClick={() => setSelectedInterviewer(person)}
+                                className="group relative rounded-2xl border border-slate-200 bg-white p-8 text-left shadow-sm transition-all hover:-translate-y-0.5 hover:border-navy-950 hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-navy-950"
+                            >
+                                <div className="mb-6 flex items-start gap-5">
+                                    <div
+                                        className={`h-[4.5rem] w-[4.5rem] shrink-0 overflow-hidden rounded-2xl ${person.color} p-0.5 shadow-md ring-1 ring-black/5 transition group-hover:scale-[1.03]`}
+                                    >
+                                        {/* eslint-disable-next-line @next/next/no-img-element -- external ibb.co avatars */}
+                                        <img
+                                            src={person.avatar}
+                                            alt=""
+                                            className="h-full w-full rounded-[0.875rem] object-cover"
+                                        />
+                                    </div>
+                                    <div className="min-w-0 pt-1">
+                                        <h2 className="font-serif text-2xl font-bold text-navy-950">{person.name}</h2>
+                                        <p className="mt-0.5 text-sm font-medium text-[#b88a44]">{person.role}</p>
+                                    </div>
+                                </div>
+                                <p className="mb-6 text-sm leading-relaxed text-slate-600">{person.description}</p>
+                                <span className="inline-flex items-center gap-2 text-sm font-semibold text-navy-950 transition group-hover:gap-3">
+                                    Practice with {person.name}
+                                    <svg viewBox="0 0 24 24" fill="none" className="h-4 w-4 shrink-0" stroke="currentColor" strokeWidth="2" aria-hidden>
+                                        <path d="M5 12h14M12 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
+                                    </svg>
+                                </span>
+                            </button>
+                        ))}
+                    </div>
+                </main>
             </div>
+        );
+    }
 
-            <div className="mt-6 rounded-2xl border border-slate-200 bg-slate-50 p-4">
-              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
-                Integration Status
-              </p>
-              <div className="mt-3 space-y-2 text-sm text-slate-700">
-                <div className="flex items-center justify-between">
-                  <span>Avatar engine</span>
-                  <span className="rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-800">
-                    Connected
-                  </span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <span>Agent state</span>
-                  <span className="rounded-full bg-slate-200 px-3 py-1 text-xs font-medium text-slate-700">
-                    {agentState}
-                  </span>
+    return (
+        <div className="flex min-h-screen flex-col overflow-hidden bg-[#141618] font-sans text-white">
+            <header className="z-10 flex flex-wrap items-center justify-between gap-3 border-b border-white/10 bg-[#141618]/90 px-4 py-3 backdrop-blur-md sm:px-6">
+                <div className="flex min-w-0 flex-1 items-center gap-3 sm:flex-none">
+                    {!isInterviewing && (
+                        <button
+                            type="button"
+                            onClick={() => {
+                                setSelectedInterviewer(null);
+                                setLastError(null);
+                            }}
+                            className="shrink-0 rounded-lg border border-white/15 bg-white/5 px-3 py-1.5 text-xs font-medium text-white/80 transition hover:bg-white/10"
+                        >
+                            ← Change host
+                        </button>
+                    )}
+                    <div className="flex min-w-0 items-center gap-2">
+                        <span
+                            className={`h-2 w-2 shrink-0 rounded-full ${isInterviewing ? "animate-pulse bg-red-500" : "bg-white/30"}`}
+                            aria-hidden
+                        />
+                        <span className="truncate text-xs font-semibold uppercase tracking-wider text-white/55">
+                            {isInterviewing ? "Live session" : "Ready to join"}
+                        </span>
+                    </div>
                 </div>
-              </div>
-            </div>
-          </aside>
-
-          <section className="flex min-h-[860px] flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
-            <div className="border-b border-slate-200 px-6 py-4">
-              <h2 className="text-xl font-semibold text-navy-950">AI Interview Stage</h2>
-              <p className="mt-1 text-sm text-slate-600">
-                Live Azure avatar on top, transcript and reply area below.
-              </p>
-            </div>
-
-            <div className="grid flex-1 lg:grid-rows-[460px_minmax(0,1fr)_140px]">
-              <div className="border-b border-slate-200 bg-slate-50 p-6">
-                <AzureAvatarStage
-                  locale={safeLocale}
-                  onAgentStateChange={(state) => setAgentState(state)}
+                {isInterviewing && (
+                    <div className="rounded-full border border-white/10 bg-white/10 px-3 py-1 font-mono text-xs font-bold text-white/90 tabular-nums">
+                        {Math.floor(timeLeft / 60)}:{(timeLeft % 60).toString().padStart(2, "0")}
+                    </div>
+                )}
+                <span className="hidden text-[10px] font-bold uppercase tracking-[0.2em] text-white/35 sm:block">
+                    VeriClause
+                </span>
+            </header>
+
+            <main className="relative flex flex-1 items-center justify-center p-4 lg:p-10">
+                <div
+                    className="pointer-events-none absolute inset-0 opacity-[0.04]"
+                    style={{
+                        backgroundImage: "radial-gradient(circle, white 1px, transparent 1px)",
+                        backgroundSize: "36px 36px",
+                    }}
+                    aria-hidden
                 />
-              </div>
 
-              <div className="overflow-y-auto bg-white px-6 py-6">
-                {!sessionStarted && (
-                  <div className="flex h-full min-h-[220px] items-center justify-center text-center">
-                    <div>
-                      <div className="mx-auto w-fit rounded-full bg-slate-100 px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
-                        Waiting to start
-                      </div>
-                      <h3 className="mt-5 font-serif text-2xl font-semibold text-navy-950">
-                        Conversation transcript will appear here
-                      </h3>
-                      <p className="mt-3 max-w-md text-sm leading-6 text-slate-600">
-                        Start the session to let the AI interviewer greet the user and begin the conversation.
-                      </p>
+                <div className="grid h-full max-h-[min(720px,85vh)] w-full max-w-6xl grid-cols-1 gap-5 md:grid-cols-2 md:gap-6 md:items-stretch">
+                    {/* Interviewer Feed */}
+                    <div
+                        className={`relative overflow-hidden rounded-3xl border-2 bg-[#1e2124] shadow-2xl transition-all duration-500 ${
+                            conversation.isSpeaking ? "scale-[1.01] border-[#b88a44]/90 shadow-[#b88a44]/10" : "border-white/[0.08]"
+                        }`}
+                    >
+                        <div className="absolute inset-0 bg-gradient-to-b from-black/25 to-transparent" />
+                        <div className="relative flex h-full min-h-[320px] w-full flex-col items-center justify-center p-8 sm:p-10">
+                            <div className="relative">
+                                <div
+                                    className={`absolute -inset-5 rounded-full bg-[#b88a44]/15 blur-2xl transition-opacity duration-300 ${
+                                        conversation.isSpeaking ? "opacity-100" : "opacity-0"
+                                    }`}
+                                />
+                                <div
+                                    className={`relative h-44 w-44 overflow-hidden rounded-3xl border-[3px] border-white/10 shadow-xl sm:h-48 sm:w-48 ${
+                                        conversation.isSpeaking ? "ring-2 ring-[#b88a44]/40" : ""
+                                    }`}
+                                >
+                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                    <img
+                                        src={selectedInterviewer?.avatar}
+                                        alt=""
+                                        className="h-full w-full object-cover"
+                                    />
+                                </div>
+                            </div>
+                            <div className="mt-7 text-center">
+                                <h2 className="font-serif text-2xl font-bold tracking-tight">{selectedInterviewer?.name}</h2>
+                                <p className="mt-1 text-xs font-medium uppercase tracking-[0.18em] text-white/45">
+                                    {selectedInterviewer?.role}
+                                </p>
+                            </div>
+                            {conversation.isSpeaking && (
+                                <div className="mt-8 flex h-8 items-end justify-center gap-1">
+                                    {SPEAKING_BAR_HEIGHTS_PX.map((h, i) => (
+                                        <div
+                                            key={i}
+                                            className="w-1 animate-pulse rounded-full bg-[#b88a44]"
+                                            style={{
+                                                height: `${h}px`,
+                                                animationDelay: `${i * 90}ms`,
+                                                animationDuration: "0.6s",
+                                            }}
+                                        />
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                        <div className="absolute bottom-4 left-4 rounded-xl border border-white/10 bg-black/45 px-3 py-1.5 text-[11px] font-semibold backdrop-blur-md sm:bottom-6 sm:left-6">
+                            Host — {selectedInterviewer?.name}
+                        </div>
                     </div>
-                  </div>
-                )}
 
-                {conversation.length > 0 && (
-                  <div className="space-y-4">
-                    {conversation.map((message) => (
-                      <div key={message.id}>
-                        {message.speaker === "system" ? (
-                          <div className="text-center text-xs font-medium uppercase tracking-[0.14em] text-slate-400">
-                            {message.text}
-                          </div>
-                        ) : (
-                          <div
-                            className={`max-w-[85%] rounded-2xl px-4 py-3 shadow-sm ${
-                              message.speaker === "agent"
-                                ? "bg-slate-50 text-slate-800"
-                                : "ml-auto bg-navy-950 text-white"
-                            }`}
-                          >
-                            <div className="mb-1 flex items-center justify-between gap-4 text-[11px] uppercase tracking-[0.12em] opacity-70">
-                              <span>{message.speaker === "agent" ? "AI Interviewer" : "User"}</span>
-                              <span>{message.timestamp}</span>
+                    {/* User Feed */}
+                    <div className="relative overflow-hidden rounded-3xl border border-white/[0.08] bg-[#1e2124] shadow-2xl">
+                        <div className="flex h-full min-h-[320px] w-full flex-col items-center justify-center p-8 sm:p-10">
+                            <div className="flex h-36 w-36 items-center justify-center rounded-full border-[3px] border-white/10 bg-navy-950 font-serif text-4xl font-bold text-white shadow-inner sm:h-40 sm:w-40 sm:text-5xl">
+                                You
+                            </div>
+                            <div className="mt-7 text-center">
+                                <h2 className="text-xl font-bold tracking-tight">You</h2>
+                                <p className="mt-1 text-xs font-medium uppercase tracking-[0.18em] text-white/40">
+                                    Private practice — not recorded
+                                </p>
                             </div>
-                            <p className="text-sm leading-6">{message.text}</p>
-                          </div>
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
 
-              <div className="border-t border-slate-200 bg-slate-50 p-4">
-                <div className="flex gap-3">
-                  <textarea
-                    value={textInput}
-                    onChange={(e) => setTextInput(e.target.value)}
-                    placeholder="Type the user's reply here, or let your teammate connect live microphone input later..."
-                    disabled={!sessionStarted}
-                    className="min-h-[92px] flex-1 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-navy-950 disabled:bg-slate-100"
-                  />
-                  <div className="flex w-32 flex-col gap-3">
-                    <button
-                      type="button"
-                      onClick={sendTextReply}
-                      disabled={!sessionStarted || !textInput.trim()}
-                      className="rounded-xl bg-[#b88a44] px-4 py-3 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
-                    >
-                      Send
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => void handleMicClick()}
-                      disabled={!sessionStarted || micState === "processing"}
-                      className={`rounded-xl border px-4 py-3 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50 ${
-                        micState === "listening"
-                          ? "border-red-300 bg-red-50 text-red-600"
-                          : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
-                      }`}
+                            {!isInterviewing && !isIntermediate && !loading && (
+                                <button
+                                    type="button"
+                                    onClick={() => void startInterview()}
+                                    className="mt-8 rounded-xl bg-[#b88a44] px-8 py-3.5 text-sm font-bold text-navy-950 shadow-lg shadow-[#b88a44]/20 transition hover:bg-[#a67a39] active:scale-[0.98]"
+                                >
+                                    Start conversation
+                                </button>
+                            )}
+
+                            {(loading || isIntermediate) && !isInterviewing && (
+                                <div className="mt-8 flex flex-col items-center gap-3">
+                                    <div className="h-7 w-7 animate-spin rounded-full border-2 border-white/15 border-t-[#b88a44]" />
+                                    <span className="text-center text-xs text-white/50">Connecting…</span>
+                                </div>
+                            )}
+
+                            {lastError ? (
+                                <div className="mt-6 max-w-sm rounded-2xl border border-red-500/25 bg-red-500/10 p-4 text-center text-xs leading-relaxed text-red-300">
+                                    {lastError}
+                                </div>
+                            ) : null}
+                        </div>
+                        <div className="absolute bottom-4 left-4 flex items-center gap-2 rounded-xl border border-white/10 bg-black/45 px-3 py-1.5 text-[11px] font-semibold backdrop-blur-md sm:bottom-6 sm:left-6">
+                            <span className="h-2 w-2 rounded-full bg-emerald-500" aria-hidden />
+                            Your mic
+                        </div>
+                    </div>
+
+                    {/* Live transcript — populated from ElevenLabs onMessage (browser only, not saved). */}
+                    <section
+                        aria-label="Conversation transcript"
+                        className="flex max-h-[220px] min-h-[140px] flex-col rounded-2xl border border-white/[0.08] bg-[#16191c] md:col-span-2"
                     >
-                      {micState === "listening"
-                        ? "Listening..."
-                        : micState === "processing"
-                        ? "Processing..."
-                        : "Mic"}
-                    </button>
-                  </div>
+                        <div className="flex shrink-0 items-center justify-between border-b border-white/[0.06] px-4 py-2.5">
+                            <span className="text-[11px] font-semibold uppercase tracking-wider text-white/45">
+                                Transcript
+                            </span>
+                            <span className="text-[10px] text-white/35">
+                                {transcript.length === 0 ? "Lines appear as you and the host speak" : `${transcript.length} line${transcript.length === 1 ? "" : "s"}`}
+                            </span>
+                        </div>
+                        <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
+                            {transcript.length === 0 ? (
+                                <p className="text-center text-xs leading-relaxed text-white/35">
+                                    No messages yet. Start the conversation to see what you and {selectedInterviewer?.name} say.
+                                </p>
+                            ) : (
+                                <ul className="space-y-3 text-left">
+                                    {transcript.map((line) => (
+                                        <li key={line.id} className="text-sm leading-relaxed">
+                                            <span
+                                                className={
+                                                    line.role === "user"
+                                                        ? "font-semibold text-emerald-400/95"
+                                                        : "font-semibold text-[#d4b87c]"
+                                                }
+                                            >
+                                                {line.role === "user" ? "You" : selectedInterviewer?.name ?? "Host"}
+                                                <span className="mx-2 font-normal text-white/25" aria-hidden>
+                                                    ·
+                                                </span>
+                                            </span>
+                                            <span className="text-white/85">{line.text}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                            <div ref={transcriptEndRef} aria-hidden />
+                        </div>
+                    </section>
                 </div>
-              </div>
-            </div>
-          </section>
-
-          <aside className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-            <h2 className="text-xl font-semibold text-navy-950">Coaching Panel</h2>
-            <p className="mt-2 text-sm leading-6 text-slate-600">
-              Live coaching stays visible while the avatar interviews the user.
-            </p>
+            </main>
+
+            <footer className="relative z-10 border-t border-white/5 bg-[#1a1d20] px-4 py-5 sm:px-8">
+                <div className="mx-auto flex max-w-4xl flex-wrap items-center justify-between gap-4">
+                    <div className="flex items-center gap-3">
+                        <button
+                            type="button"
+                            onClick={toggleMute}
+                            title={isMuted ? "Unmute (display only)" : "Mute (display only)"}
+                            className={`flex h-12 w-12 items-center justify-center rounded-xl border transition-all sm:h-14 sm:w-14 ${
+                                isMuted
+                                    ? "border-red-500/40 bg-red-500/20 text-red-400"
+                                    : "border-white/10 bg-white/5 text-white/80 hover:bg-white/10"
+                            }`}
+                        >
+                            {isMuted ? (
+                                <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" stroke="currentColor" strokeWidth="2">
+                                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3zM1 1l22 22M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" strokeLinecap="round" strokeLinejoin="round" />
+                                    <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-1.12 3.82M12 19v4M8 23h8" strokeLinecap="round" strokeLinejoin="round" />
+                                </svg>
+                            ) : (
+                                <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" stroke="currentColor" strokeWidth="2">
+                                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+                                    <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8" strokeLinecap="round" strokeLinejoin="round" />
+                                </svg>
+                            )}
+                        </button>
+                        <span className="hidden text-xs text-white/35 sm:inline">Mic status is visual only in this build</span>
+                    </div>
 
-            <div className="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
-              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
-                Session Score
-              </p>
-              <p className="mt-2 text-3xl font-semibold text-navy-950">
-                {coaching.score > 0 ? `${coaching.score}/100` : "—"}
-              </p>
-            </div>
+                    <div className="flex flex-wrap items-center gap-3 sm:gap-4">
+                        {isInterviewing && timeLeft < 30 && (
+                            <button
+                                type="button"
+                                onClick={() => router.push("/")}
+                                className="h-12 rounded-xl border border-white/15 bg-white/5 px-5 text-sm font-semibold text-white/90 transition hover:bg-white/10 sm:h-14 sm:px-6"
+                            >
+                                Wrap up
+                            </button>
+                        )}
+                        <button
+                            type="button"
+                            onClick={() => void stopInterview()}
+                            className="h-12 rounded-xl bg-red-600 px-6 text-sm font-bold text-white shadow-lg shadow-red-900/30 transition hover:bg-red-500 sm:h-14 sm:px-8"
+                        >
+                            End session
+                        </button>
+                    </div>
 
-            <div className="mt-5 rounded-2xl border border-emerald-100 bg-emerald-50 p-4">
-              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-emerald-700">
-                Strengths
-              </p>
-              <div className="mt-3 space-y-2 text-sm leading-6 text-emerald-900">
-                {coaching.strengths.length > 0 ? (
-                  coaching.strengths.map((item) => <p key={item}>• {item}</p>)
-                ) : (
-                  <p>Live strengths will appear as the user answers.</p>
-                )}
-              </div>
-            </div>
+                    <p className="w-full text-center text-[10px] text-white/30 sm:w-auto sm:text-left">
+                        2-minute practice timer · Allow microphone when prompted
+                    </p>
+                </div>
+            </footer>
+        </div>
+    );
+}
 
-            <div className="mt-5 rounded-2xl border border-amber-100 bg-amber-50 p-4">
-              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-amber-700">
-                Improvement Areas
-              </p>
-              <div className="mt-3 space-y-2 text-sm leading-6 text-amber-900">
-                {coaching.improvements.length > 0 ? (
-                  coaching.improvements.map((item) => <p key={item}>• {item}</p>)
-                ) : (
-                  <p>Coaching suggestions will appear during the interview.</p>
-                )}
-              </div>
+export default function InterviewPage() {
+    return (
+        <Suspense fallback={
+            <div className="min-h-screen bg-white flex items-center justify-center">
+                <div className="h-8 w-8 animate-spin rounded-full border-2 border-slate-200 border-t-navy-950" />
             </div>
-          </aside>
-        </div>
-      </section>
-    </main>
-  );
+        }>
+            <InterviewContent />
+        </Suspense>
+    );
 }
\ No newline at end of file
diff --git a/app/jobs/page.tsx b/app/jobs/page.tsx
index 27c618d..4d90faa 100644
--- a/app/jobs/page.tsx
+++ b/app/jobs/page.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
+import { UserMenu } from "@/components/layout/UserMenu";
 import { useLanguage } from "@/components/providers/language-provider";
 
 type JobItem = {
@@ -50,12 +51,15 @@ export default function JobsPage() {
     <main className="min-h-screen bg-[#f8f8f6]">
       <SiteNavbar
         rightSlot={
-          <Link
-            href="/contract"
-            className="rounded-md bg-navy-950 px-4 py-2 text-sm font-medium text-white transition hover:opacity-90"
-          >
-            {t("nav_dashboard")}
-          </Link>
+          <div className="flex items-center gap-4">
+            <UserMenu />
+            <Link
+              href="/contract"
+              className="rounded-md bg-navy-950 px-4 py-2 text-sm font-medium text-white transition hover:opacity-90"
+            >
+              {t("nav_dashboard")}
+            </Link>
+          </div>
         }
       />
 
diff --git a/app/page.tsx b/app/page.tsx
index 4b6461a..91718fe 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,56 +4,17 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
+import { UserMenu } from "@/components/layout/UserMenu";
 import { useLanguage } from "@/components/providers/language-provider";
-import { createClient } from "@/lib/supabase/client";
 
 export default function HomePage() {
   const { t } = useLanguage();
   const router = useRouter();
-  /** `null` = still checking session */
-  const [signedIn, setSignedIn] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    const supabase = createClient();
-    void supabase.auth.getUser().then(({ data: { user } }) => {
-      setSignedIn(!!user);
-    });
-    const {
-      data: { subscription },
-    } = supabase.auth.onAuthStateChange((_event, session) => {
-      setSignedIn(!!session?.user);
-    });
-    return () => subscription.unsubscribe();
-  }, []);
 
   return (
     <main className="min-h-screen bg-white">
       <SiteNavbar
-        rightSlot={
-          signedIn === null ? (
-            <span className="inline-block h-9 w-[5.5rem] rounded-md bg-slate-100" aria-hidden />
-          ) : signedIn ? (
-            <button
-              type="button"
-              onClick={async () => {
-                const supabase = createClient();
-                await supabase.auth.signOut();
-                router.push("/");
-                router.refresh();
-              }}
-              className="text-sm font-medium text-slate-600 transition-colors hover:text-navy-950"
-            >
-              {t("dash_sign_out")}
-            </button>
-          ) : (
-            <Link
-              href="/auth/sign-in"
-              className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:bg-slate-50"
-            >
-              {t("sign_in")}
-            </Link>
-          )
-        }
+        rightSlot={<UserMenu />}
       />
 
       <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
diff --git a/app/resume/page.tsx b/app/resume/page.tsx
index fc5dcda..a1bdc6c 100644
--- a/app/resume/page.tsx
+++ b/app/resume/page.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
+import { UserMenu } from "@/components/layout/UserMenu";
 import { ResumeList } from "@/components/resume/ResumeList";
 import { useLanguage } from "@/components/providers/language-provider";
 import { useResumeStatus } from "@/components/providers/resume-status-provider";
@@ -313,20 +314,7 @@ function ResumeOnboardingContent() {
   return (
     <main className="min-h-screen bg-[#f8f8f6]">
       <SiteNavbar
-        rightSlot={
-          <button
-            type="button"
-            onClick={async () => {
-              const supabase = createClient();
-              await supabase.auth.signOut();
-              router.push("/");
-              router.refresh();
-            }}
-            className="text-sm font-medium text-slate-600 transition-colors hover:text-navy-950"
-          >
-            {t("dash_sign_out")}
-          </button>
-        }
+        rightSlot={<UserMenu />}
       />
 
       <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:py-14">
diff --git a/app/resume/review/page.tsx b/app/resume/review/page.tsx
index d7f0b33..0ec25c5 100644
--- a/app/resume/review/page.tsx
+++ b/app/resume/review/page.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useState } from "react";
 import { SiteNavbar } from "@/components/layout/SiteNavbar";
+import { UserMenu } from "@/components/layout/UserMenu";
 import { useLanguage } from "@/components/providers/language-provider";
 import { useResumeStatus } from "@/components/providers/resume-status-provider";
 import { createClient } from "@/lib/supabase/client";
@@ -519,14 +520,7 @@ function ResumeReviewContent() {
   return (
     <div className="min-h-screen bg-white">
       <SiteNavbar
-        rightSlot={
-          <Link
-            href="/auth/sign-in"
-            className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-all hover:border-navy-200 hover:text-navy-950"
-          >
-            {t("sign_in")}
-          </Link>
-        }
+        rightSlot={<UserMenu />}
       />
 
       <main className="mx-auto max-w-7xl px-6 py-14">
diff --git a/components/layout/UserMenu.tsx b/components/layout/UserMenu.tsx
new file mode 100644
index 0000000..e4b4f1e
--- /dev/null
+++ b/components/layout/UserMenu.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { createClient } from "@/lib/supabase/client";
+import { useLanguage } from "../providers/language-provider";
+
+export function UserMenu({ onSignOut }: { onSignOut?: () => void | Promise<void> }) {
+  const { t } = useLanguage();
+  const router = useRouter();
+  /** `null` = still checking session */
+  const [signedIn, setSignedIn] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const supabase = createClient();
+    void supabase.auth.getUser().then(({ data: { user } }) => {
+      setSignedIn(!!user);
+    });
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setSignedIn(!!session?.user);
+    });
+    return () => subscription.unsubscribe();
+  }, []);
+
+  if (signedIn === null) {
+    return <div className="h-9 w-20 animate-pulse rounded-md bg-slate-100" aria-hidden />;
+  }
+
+  if (signedIn) {
+    return (
+      <button
+        type="button"
+        onClick={async () => {
+          if (onSignOut) {
+            await onSignOut();
+          }
+          const supabase = createClient();
+          await supabase.auth.signOut();
+          router.push("/");
+          router.refresh();
+        }}
+        className="text-sm font-medium text-slate-600 transition-colors hover:text-navy-950"
+      >
+        {t("dash_sign_out")}
+      </button>
+    );
+  }
+
+  return (
+    <Link
+      href="/auth/sign-in"
+      className="rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:bg-slate-50"
+    >
+      {t("sign_in")}
+    </Link>
+  );
+}