diff --git a/src/actions/github-achievements.ts b/src/actions/github-achievements.ts
new file mode 100644
index 0000000..c93b629
--- /dev/null
+++ b/src/actions/github-achievements.ts
@@ -0,0 +1,159 @@
+"use server";
+
+import Groq from "groq-sdk";
+import { auth } from "@/auth";
+import { createRateLimiter } from "@/lib/rate-limit";
+import type { ResumeData } from "@/db/schema";
+
+// 5 AI calls per hour per user for github sync
+const aiRateLimiter = createRateLimiter({ limit: 5, windowSeconds: 3600 });
+
+async function getAuthUserId(): Promise<string> {
+  const session = await auth();
+  if (!session?.user?.id) {
+    throw new Error("Unauthorized");
+  }
+  return session.user.id;
+}
+
+function getGroqClient(): Groq {
+  const apiKey = process.env.GROQ_API_KEY;
+  if (!apiKey) throw new Error("GROQ_API_KEY is not configured");
+  return new Groq({ apiKey });
+}
+
+function stripCodeFence(text: string): string {
+  const trimmed = text.trim();
+  if (!trimmed.startsWith("```") || !trimmed.endsWith("```")) return trimmed;
+  return trimmed
+    .replace(/^```[a-zA-Z]*\n?/, "")
+    .replace(/```$/, "")
+    .trim();
+}
+
+/**
+ * Fetches top repositories for a GitHub user and uses AI to generate
+ * STAR-method professional bullet points and structured project data.
+ */
+export async function generateGitHubAchievements(
+  username: string,
+): Promise<{ result: ResumeData["projects"] }> {
+  const userId = await getAuthUserId();
+
+  const rateCheck = await aiRateLimiter.check(userId);
+  if (!rateCheck.allowed) {
+    throw new Error(
+      `Rate limit exceeded. Try again in ${rateCheck.retryAfterSeconds} seconds.`,
+    );
+  }
+
+  if (!username.trim()) throw new Error("GitHub username cannot be empty.");
+
+  // 1. Fetch from GitHub API
+  // Using public endpoint, no token to avoid complexity, though rate limits apply
+  const reposResponse = await fetch(
+    `https://api.github.com/users/${username}/repos?sort=updated&per_page=100`,
+    {
+      headers: {
+        Accept: "application/vnd.github.v3+json",
+        "User-Agent": "Lab68-CV-Builder",
+      },
+    },
+  );
+
+  if (!reposResponse.ok) {
+    if (reposResponse.status === 404) {
+      throw new Error("GitHub user not found.");
+    }
+    throw new Error(`GitHub API error: ${reposResponse.statusText}`);
+  }
+
+  const allRepos = await reposResponse.json();
+
+  if (!Array.isArray(allRepos) || allRepos.length === 0) {
+    throw new Error("No public repositories found for this user.");
+  }
+
+  // Filter out forks and purely empty repos
+  const sourceRepos = allRepos.filter((r) => !r.fork);
+
+  // Sort by stars descending, then get top 5
+  const topRepos = sourceRepos
+    .sort((a, b) => b.stargazers_count - a.stargazers_count)
+    .slice(0, 5);
+
+  if (topRepos.length === 0) {
+    throw new Error("No non-fork repositories found to analyze.");
+  }
+
+  // 2. Prepare context for AI
+  // We'll give it the repo name, description, primary language, topics, stars, and URL
+  const repoDataText = topRepos.map((r) => ({
+    name: r.name,
+    description: r.description,
+    language: r.language,
+    topics: r.topics,
+    stars: r.stargazers_count,
+    url: r.html_url,
+    homepage: r.homepage,
+  }));
+
+  const groq = getGroqClient();
+
+  const prompt = `You are an expert technical recruiter and resume writer.
+I will provide you with data from a candidate's top GitHub repositories.
+Your task is to convert these repositories into professional resume projects.
+For each project, generate:
+- A concise, impactful description
+- 2 to 3 accomplishments/highlights written in the STAR method (Situation, Task, Action, Result). Make them sound highly impressive and action-oriented.
+- An array of technologies used (combine the primary language and topics).
+
+Here is the raw GitHub data:
+${JSON.stringify(repoDataText, null, 2)}
+
+Ensure you return ONLY a valid JSON array matching exactly this TypeScript signature:
+Array<{
+  name: string;
+  description: string; // concise 1-2 sentence description
+  url: string; // The homepage url if available, or just leave empty string
+  githubUrl: string; // The github html_url
+  websiteUrl: string; // same as URL or homepage
+  technologies: string[];
+  highlights: string[]; // 2-3 impressive STAR method bullet points
+}>
+
+No markdown formatting, no explanations, no text outside the JSON array.`;
+
+  const completion = await groq.chat.completions.create({
+    model: "llama-3.3-70b-versatile",
+    messages: [{ role: "user", content: prompt }],
+    temperature: 0.5,
+  });
+
+  const content = completion.choices[0]?.message?.content?.trim() || "[]";
+  let parsedContent;
+
+  try {
+    parsedContent = JSON.parse(stripCodeFence(content));
+    if (!Array.isArray(parsedContent)) {
+      throw new Error("Invalid format from AI");
+    }
+  } catch (error) {
+    console.error("Parse error:", error, content);
+    throw new Error("Failed to parse AI generated projects.");
+  }
+
+  // Ensure every project has a unique ID
+  const newProjects = parsedContent.map((proj) => ({
+    id: crypto.randomUUID(),
+    name: proj.name || "",
+    description: proj.description || "",
+    url: proj.url || proj.websiteUrl || proj.githubUrl || "",
+    githubUrl: proj.githubUrl || "",
+    websiteUrl: proj.websiteUrl || proj.url || "",
+    technologies: proj.technologies || [],
+    highlights: proj.highlights || [],
+  }));
+
+  return { result: newProjects };
+}
diff --git a/src/actions/mock-interview.ts b/src/actions/mock-interview.ts
new file mode 100644
index 0000000..a959755
--- /dev/null
+++ b/src/actions/mock-interview.ts
@@ -0,0 +1,253 @@
+"use server";
+
+import Groq from "groq-sdk";
+import { auth } from "@/auth";
+import { db } from "@/db";
+import { applications, jobs, resumes, mockInterviews } from "@/db/schema";
+import { eq, and } from "drizzle-orm";
+
+async function getAuthUserId(): Promise<string> {
+  const session = await auth();
+  if (!session?.user?.id) {
+    throw new Error("Unauthorized");
+  }
+  return session.user.id;
+}
+
+function getGroqClient(): Groq {
+  const apiKey = process.env.GROQ_API_KEY;
+  if (!apiKey) throw new Error("GROQ_API_KEY is not configured");
+  return new Groq({ apiKey });
+}
+
+function stripCodeFence(text: string): string {
+  const trimmed = text.trim();
+  if (!trimmed.startsWith("```") || !trimmed.endsWith("```")) return trimmed;
+  return trimmed
+    .replace(/^```[a-zA-Z]*\n?/, "")
+    .replace(/```$/, "")
+    .trim();
+}
+
+/**
+ * Generate mock interview questions based on the candidate's resume and target job description.
+ */
+export async function generateMockInterviewQuestions(applicationId: string) {
+  const userId = await getAuthUserId();
+
+  // 1. Fetch application, job, and resume data
+  const appData = await db
+    .select({
+      jobId: applications.jobId,
+      resumeId: applications.resumeId,
+    })
+    .from(applications)
+    .where(
+      and(eq(applications.id, applicationId), eq(applications.userId, userId)),
+    )
+    .limit(1)
+    .then((res) => res[0]);
+
+  if (!appData || !appData.resumeId) {
+    throw new Error("Application not found or no resume attached.");
+  }
+
+  const job = await db
+    .select()
+    .from(jobs)
+    .where(and(eq(jobs.id, appData.jobId), eq(jobs.userId, userId)))
+    .limit(1)
+    .then((res) => res[0]);
+
+  const resume = await db
+    .select()
+    .from(resumes)
+    .where(and(eq(resumes.id, appData.resumeId!), eq(resumes.userId, userId)))
+    .limit(1)
+    .then((res) => res[0]);
+
+  if (!job || !resume) {
+    throw new Error("Job or Resume not found.");
+  }
+
+  // 2. Build AI Prompt
+  const groq = getGroqClient();
+  const prompt = `You are an expert technical recruiter and hiring manager. 
+Your task is to generate 5 challenging but fair interview questions tailored to the candidate's resume and the job description.
+Some questions should focus on the candidate's listed experience, and some should focus on the specific skills required in the job description to see if there are any gaps.
+
+Job Title: ${job.title}
+Company: ${job.company}
+Job Description:
+${job.jdText.substring(0, 2000)}
+
+Candidate's Resume Data:
+${JSON.stringify(resume.data).substring(0, 3000)}
+
+Return ONLY a valid JSON array of exactly 5 objects. Each object must have these exactly properties:
+"question" (string): The interview question.
+"expectedContext" (string): What an ideal answer should cover (bullet points or a short paragraph).
+
+No extra text, no markdown. Just the JSON array.`;
+
+  // 3. Call AI
+  const completion = await groq.chat.completions.create({
+    model: "llama-3.3-70b-versatile",
+    messages: [{ role: "user", content: prompt }],
+    temperature: 0.7,
+  });
+
+  const content = completion.choices[0]?.message?.content?.trim() || "[]";
+  let questions: Array<{ question: string; expectedContext: string }>;
+
+  try {
+    questions = JSON.parse(stripCodeFence(content));
+    if (!Array.isArray(questions) || questions.length !== 5) {
+      throw new Error("Invalid format from AI");
+    }
+  } catch (error) {
+    console.error("Parse error:", error, content);
+    throw new Error("Failed to parse AI generated questions.");
+  }
+
+  // 4. Save to mockInterviews table
+  const newInterview = await db
+    .insert(mockInterviews)
+    .values({
+      userId,
+      applicationId,
+      questions,
+      answers: [],
+      status: "in_progress",
+    })
+    .returning({ id: mockInterviews.id })
+    .then((res) => res[0]);
+
+  return { interviewId: newInterview.id, questions };
+}
+
+/**
+ * Evaluate a single answer and save it to the mock interview state.
+ */
+export async function evaluateMockInterviewAnswer(
+  interviewId: string,
+  questionIndex: number,
+  answerText: string,
+) {
+  const userId = await getAuthUserId();
+
+  // 1. Fetch the mock interview
+  const interview = await db
+    .select()
+    .from(mockInterviews)
+    .where(
+      and(
+        eq(mockInterviews.id, interviewId),
+        eq(mockInterviews.userId, userId),
+      ),
+    )
+    .limit(1)
+    .then((res) => res[0]);
+
+  if (!interview) {
+    throw new Error("Interview not found.");
+  }
+
+  const questionObj = interview.questions[questionIndex];
+  if (!questionObj) {
+    throw new Error("Invalid question index.");
+  }
+
+  // 2. Evaluate answer with AI
+  const groq = getGroqClient();
+  const prompt = `You are evaluating a candidate's answer to an interview question.
+Question: ${questionObj.question}
+Expected Context / Ideal Answer: ${questionObj.expectedContext}
+
+Candidate's Answer:
+"${answerText}"
+
+Provide critical but constructive feedback on the candidate's answer. Give a score from 1 to 10 based on how well they addressed the expected context and clarity of their answer.
+
+Return ONLY valid JSON (no markdown) with this exact format:
+{
+  "feedback": "string",
+  "score": number
+}`;
+
+  const completion = await groq.chat.completions.create({
+    model: "llama-3.3-70b-versatile",
+    messages: [{ role: "user", content: prompt }],
+    temperature: 0.5,
+  });
+
+  const content = completion.choices[0]?.message?.content?.trim() || "{}";
+  let evalResult: { feedback: string; score: number };
+
+  try {
+    evalResult = JSON.parse(stripCodeFence(content));
+    if (
+      typeof evalResult.feedback !== "string" ||
+      typeof evalResult.score !== "number"
+    ) {
+      throw new Error();
+    }
+  } catch (error) {
+    console.error("Parse error:", error, content);
+    throw new Error("Failed to parse AI evaluation.");
+  }
+
+  // 3. Update the mock interview
+  const currentAnswers = [...interview.answers];
+  const existingAnswerIndex = currentAnswers.findIndex(
+    (a) => a.questionId === questionIndex,
+  );
+
+  const newAnswerObj = {
+    questionId: questionIndex,
+    answer: answerText,
+    feedback: evalResult.feedback,
+    score: evalResult.score,
+  };
+
+  if (existingAnswerIndex !== -1) {
+    currentAnswers[existingAnswerIndex] = newAnswerObj;
+  } else {
+    currentAnswers.push(newAnswerObj);
+  }
+
+  // Check if all questions are answered
+  const status =
+    currentAnswers.length === interview.questions.length
+      ? "completed"
+      : "in_progress";
+
+  await db
+    .update(mockInterviews)
+    .set({
+      answers: currentAnswers,
+      status,
+      updatedAt: new Date(),
+    })
+    .where(eq(mockInterviews.id, interviewId));
+
+  return newAnswerObj;
+}
+
+export async function getMockInterview(interviewId: string) {
+  const userId = await getAuthUserId();
+  const interview = await db
+    .select()
+    .from(mockInterviews)
+    .where(
+      and(
+        eq(mockInterviews.id, interviewId),
+        eq(mockInterviews.userId, userId),
+      ),
+    )
+    .limit(1)
+    .then((res) => res[0]);
+
+  if (!interview) throw new Error("Not found");
+  return interview;
+}
diff --git a/src/app/[locale]/applications/[id]/interview/page.tsx b/src/app/[locale]/applications/[id]/interview/page.tsx
new file mode 100644
index 0000000..3fb7627
--- /dev/null
+++ b/src/app/[locale]/applications/[id]/interview/page.tsx
@@ -0,0 +1,80 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { db } from "@/db";
+import { applications, mockInterviews } from "@/db/schema";
+import { eq, and } from "drizzle-orm";
+import MockInterviewClient from "@/components/applications/mock-interview-client";
+import { Link } from "@/i18n/routing";
+import { ArrowLeft } from "lucide-react";
+
+export default async function MockInterviewPage({
+  params,
+}: {
+  params: Promise<{ id: string; locale: string }>;
+}) {
+  const session = await auth();
+  if (!session?.user?.id) {
+    redirect("/login");
+  }
+
+  const { id: applicationId } = await params;
+
+  // Verify application exists and belongs to user
+  const application = await db
+    .select()
+    .from(applications)
+    .where(
+      and(
+        eq(applications.id, applicationId),
+        eq(applications.userId, session.user.id),
+      ),
+    )
+    .limit(1)
+    .then((res) => res[0]);
+
+  if (!application) {
+    redirect("/applications");
+  }
+
+  // Check if they already have an interview for this app
+  const existingInterview = await db
+    .select()
+    .from(mockInterviews)
+    .where(
+      and(
+        eq(mockInterviews.applicationId, applicationId),
+        eq(mockInterviews.userId, session.user.id),
+      ),
+    )
+    .limit(1)
+    .then((res) => res[0]);
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-4xl mx-auto mb-8">
+        <Link
+          href="/applications"
+          className="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-900"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          Back to Applications
+        </Link>
+        <h1 className="text-3xl font-extrabold text-gray-900 mt-4">
+          Interactive Mock Interview
+        </h1>
+        <p className="mt-2 text-gray-600">
+          Tailored to your resume and the target job description. We&apos;ll ask
+          you 5 questions, you can speak your answers via microphone or type
+          them, and AI will give immediate feedback on how to improve.
+        </p>
+      </div>
+
+      <MockInterviewClient
+        applicationId={applicationId}
+        existingInterviewId={existingInterview?.id}
+        initialQuestions={existingInterview?.questions || []}
+        initialAnswers={existingInterview?.answers || []}
+      />
+    </div>
+  );
+}
diff --git a/src/app/[locale]/applications/page.tsx b/src/app/[locale]/applications/page.tsx
index 54be846..c2757ff 100644
--- a/src/app/[locale]/applications/page.tsx
+++ b/src/app/[locale]/applications/page.tsx
@@ -15,7 +15,10 @@ import {
   updateCoverLetter,
 } from "@/actions/cover-letter";
 import { getUserResumes } from "@/actions/resume";
-import { APPLICATION_STATUSES, type ApplicationStatus } from "@/lib/application-status";
+import {
+  APPLICATION_STATUSES,
+  type ApplicationStatus,
+} from "@/lib/application-status";
 import {
   type ApplicationSort,
   parseApplicationFiltersFromSearchParams,
@@ -43,7 +46,9 @@ const SORT_OPTIONS: Array<{ value: ApplicationSort; label: string }> = [
   { value: "applied_asc", label: "Oldest applied" },
 ];
 
-export default async function ApplicationsPage({ searchParams }: ApplicationsPageProps) {
+export default async function ApplicationsPage({
+  searchParams,
+}: ApplicationsPageProps) {
   const session = await auth();
 
   if (!session?.user) {
@@ -71,7 +76,7 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
   ]);
 
   const coverLetters = await getCoverLettersByApplicationIds(
-    applications.map((application) => application.applicationId)
+    applications.map((application) => application.applicationId),
   );
 
   const coverLettersByApplication = new Map<string, typeof coverLetters>();
@@ -86,7 +91,9 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
       <header className="border-b border-black p-6">
         <div className="max-w-7xl mx-auto flex items-center justify-between gap-4">
           <div>
-            <span className="label-mono block mb-1">APPLICATIONS // TRACKER</span>
+            <span className="label-mono block mb-1">
+              APPLICATIONS // TRACKER
+            </span>
             <h1 className="text-3xl font-black tracking-tight">Job Pipeline</h1>
           </div>
           <Link
@@ -107,17 +114,37 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
               await createJob({
                 title: String(formData.get("title") || "").trim(),
                 company: String(formData.get("company") || "").trim(),
-                location: String(formData.get("location") || "").trim() || undefined,
-                sourceUrl: String(formData.get("sourceUrl") || "").trim() || undefined,
+                location:
+                  String(formData.get("location") || "").trim() || undefined,
+                sourceUrl:
+                  String(formData.get("sourceUrl") || "").trim() || undefined,
                 jdText: String(formData.get("jdText") || "").trim(),
               });
             }}
             className="space-y-3"
           >
-            <input name="title" required placeholder="Job title" className="w-full border border-black px-3 py-2 text-sm" />
-            <input name="company" required placeholder="Company" className="w-full border border-black px-3 py-2 text-sm" />
-            <input name="location" placeholder="Location (optional)" className="w-full border border-black px-3 py-2 text-sm" />
-            <input name="sourceUrl" placeholder="Source URL (optional)" className="w-full border border-black px-3 py-2 text-sm" />
+            <input
+              name="title"
+              required
+              placeholder="Job title"
+              className="w-full border border-black px-3 py-2 text-sm"
+            />
+            <input
+              name="company"
+              required
+              placeholder="Company"
+              className="w-full border border-black px-3 py-2 text-sm"
+            />
+            <input
+              name="location"
+              placeholder="Location (optional)"
+              className="w-full border border-black px-3 py-2 text-sm"
+            />
+            <input
+              name="sourceUrl"
+              placeholder="Source URL (optional)"
+              className="w-full border border-black px-3 py-2 text-sm"
+            />
             <textarea
               name="jdText"
               required
@@ -145,24 +172,36 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
             action={async (formData) => {
               "use server";
 
-              const selectedStatus = String(formData.get("status") || "wishlist");
+              const selectedStatus = String(
+                formData.get("status") || "wishlist",
+              );
               try {
                 await createApplication({
                   jobId: String(formData.get("jobId")),
                   resumeId: String(formData.get("resumeId") || "") || undefined,
                   status: selectedStatus as ApplicationStatus,
-                  notes: String(formData.get("notes") || "").trim() || undefined,
+                  notes:
+                    String(formData.get("notes") || "").trim() || undefined,
                 });
                 redirect("/applications");
               } catch (error: unknown) {
                 const message =
-                  error instanceof Error ? error.message : "Failed to create application";
-                redirect(`/applications?createError=${encodeURIComponent(message)}`);
+                  error instanceof Error
+                    ? error.message
+                    : "Failed to create application";
+                redirect(
+                  `/applications?createError=${encodeURIComponent(message)}`,
+                );
               }
             }}
             className="space-y-3"
           >
-            <select aria-label="Select job" name="jobId" required className="w-full border border-black px-3 py-2 text-sm bg-white">
+            <select
+              aria-label="Select job"
+              name="jobId"
+              required
+              className="w-full border border-black px-3 py-2 text-sm bg-white"
+            >
               <option value="">Select job</option>
               {jobs.map((job) => (
                 <option key={job.id} value={job.id}>
@@ -171,7 +210,11 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
               ))}
             </select>
 
-            <select aria-label="Select resume" name="resumeId" className="w-full border border-black px-3 py-2 text-sm bg-white">
+            <select
+              aria-label="Select resume"
+              name="resumeId"
+              className="w-full border border-black px-3 py-2 text-sm bg-white"
+            >
               <option value="">Attach resume (optional)</option>
               {resumes.map((resume) => (
                 <option key={resume.id} value={resume.id}>
@@ -180,7 +223,12 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
               ))}
             </select>
 
-            <select aria-label="Select status" name="status" defaultValue="wishlist" className="w-full border border-black px-3 py-2 text-sm bg-white">
+            <select
+              aria-label="Select status"
+              name="status"
+              defaultValue="wishlist"
+              className="w-full border border-black px-3 py-2 text-sm bg-white"
+            >
               {APPLICATION_STATUSES.map((status) => (
                 <option key={status} value={status}>
                   {status.toUpperCase()}
@@ -188,7 +236,12 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
               ))}
             </select>
 
-            <textarea name="notes" placeholder="Notes (optional)" rows={5} className="w-full border border-black px-3 py-2 text-sm" />
+            <textarea
+              name="notes"
+              placeholder="Notes (optional)"
+              rows={5}
+              className="w-full border border-black px-3 py-2 text-sm"
+            />
             <button
               type="submit"
               className="border border-black bg-black text-white px-4 py-2 text-xs font-bold uppercase tracking-wider hover:bg-white hover:text-black transition-colors duration-150"
@@ -209,9 +262,14 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
             </p>
           ) : null}
 
-          <form method="GET" className="border-b border-black p-4 grid gap-3 md:grid-cols-[1fr_auto_auto_auto] md:items-end">
+          <form
+            method="GET"
+            className="border-b border-black p-4 grid gap-3 md:grid-cols-[1fr_auto_auto_auto] md:items-end"
+          >
             <div>
-              <label htmlFor="q" className="label-mono mb-1 block">Search (company or role)</label>
+              <label htmlFor="q" className="label-mono mb-1 block">
+                Search (company or role)
+              </label>
               <input
                 id="q"
                 name="q"
@@ -221,7 +279,9 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
               />
             </div>
             <div>
-              <label htmlFor="status" className="label-mono mb-1 block">Status</label>
+              <label htmlFor="status" className="label-mono mb-1 block">
+                Status
+              </label>
               <select
                 id="status"
                 name="status"
@@ -237,7 +297,9 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
               </select>
             </div>
             <div>
-              <label htmlFor="sort" className="label-mono mb-1 block">Sort</label>
+              <label htmlFor="sort" className="label-mono mb-1 block">
+                Sort
+              </label>
               <select
                 id="sort"
                 name="sort"
@@ -268,22 +330,37 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
           </form>
 
           {applications.length === 0 ? (
-            <p className="p-6 text-sm text-gray-600">No applications yet. Add your first one above.</p>
+            <p className="p-6 text-sm text-gray-600">
+              No applications yet. Add your first one above.
+            </p>
           ) : (
             <div className="divide-y divide-black/10">
               {applications.map((item) => (
-                <div key={item.applicationId} className="p-6 grid gap-4 lg:grid-cols-[1fr_auto]">
+                <div
+                  key={item.applicationId}
+                  className="p-6 grid gap-4 lg:grid-cols-[1fr_auto]"
+                >
                   <div>
-                    <p className="text-lg font-black tracking-tight">{item.jobTitle}</p>
-                    <p className="text-sm text-gray-600">{item.company} {item.location ? `• ${item.location}` : ""}</p>
+                    <p className="text-lg font-black tracking-tight">
+                      {item.jobTitle}
+                    </p>
+                    <p className="text-sm text-gray-600">
+                      {item.company} {item.location ? `• ${item.location}` : ""}
+                    </p>
                     <p className="text-xs text-gray-500 mt-2">
-                      Applied: {formatDate(item.appliedAt)} • Updated: {formatDate(item.updatedAt)}
+                      Applied: {formatDate(item.appliedAt)} • Updated:{" "}
+                      {formatDate(item.updatedAt)}
                     </p>
                     {item.resumeTitle ? (
-                      <p className="text-xs mt-2">Resume: <span className="font-bold">{item.resumeTitle}</span></p>
+                      <p className="text-xs mt-2">
+                        Resume:{" "}
+                        <span className="font-bold">{item.resumeTitle}</span>
+                      </p>
                     ) : null}
                     {item.notes ? (
-                      <p className="text-sm mt-3 border-l-2 border-black pl-3">{item.notes}</p>
+                      <p className="text-sm mt-3 border-l-2 border-black pl-3">
+                        {item.notes}
+                      </p>
                     ) : null}
 
                     <div className="mt-4 border border-gray-300 p-3">
@@ -291,22 +368,30 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
                       {(() => {
                         const ats = getAtsRecommendations(
                           item.resumeData,
-                          item.extractedKeywords
+                          item.extractedKeywords,
                         );
                         return (
                           <>
-                            <p className="text-sm font-bold mb-1">Keyword coverage: {ats.coveragePercent}%</p>
+                            <p className="text-sm font-bold mb-1">
+                              Keyword coverage: {ats.coveragePercent}%
+                            </p>
                             {ats.missingKeywords.length > 0 ? (
                               <p className="text-xs text-gray-600 mb-2">
-                                Missing: {ats.missingKeywords.slice(0, 8).join(", ")}
+                                Missing:{" "}
+                                {ats.missingKeywords.slice(0, 8).join(", ")}
                                 {ats.missingKeywords.length > 8 ? "..." : ""}
                               </p>
                             ) : (
-                              <p className="text-xs text-green-700 mb-2">No critical missing keywords detected.</p>
+                              <p className="text-xs text-green-700 mb-2">
+                                No critical missing keywords detected.
+                              </p>
                             )}
                             <ul className="list-disc pl-4 space-y-1">
                               {ats.recommendations.map((recommendation) => (
-                                <li key={recommendation} className="text-xs text-gray-700">
+                                <li
+                                  key={recommendation}
+                                  className="text-xs text-gray-700"
+                                >
                                   {recommendation}
                                 </li>
                               ))}
@@ -323,22 +408,31 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
                           "use server";
                           try {
                             await generateCoverLetter({
-                              applicationId: String(formData.get("applicationId")),
-                              tone: String(formData.get("tone") || "professional") as
-                                | "professional"
-                                | "confident"
-                                | "friendly",
+                              applicationId: String(
+                                formData.get("applicationId"),
+                              ),
+                              tone: String(
+                                formData.get("tone") || "professional",
+                              ) as "professional" | "confident" | "friendly",
                             });
                             redirect("/applications");
                           } catch (error: unknown) {
                             const message =
-                              error instanceof Error ? error.message : "Failed to generate cover letter";
-                            redirect(`/applications?coverError=${encodeURIComponent(message)}`);
+                              error instanceof Error
+                                ? error.message
+                                : "Failed to generate cover letter";
+                            redirect(
+                              `/applications?coverError=${encodeURIComponent(message)}`,
+                            );
                           }
                         }}
                         className="flex flex-wrap gap-2"
                       >
-                        <input type="hidden" name="applicationId" value={item.applicationId} />
+                        <input
+                          type="hidden"
+                          name="applicationId"
+                          value={item.applicationId}
+                        />
                         <select
                           aria-label="Cover letter tone"
                           name="tone"
@@ -357,30 +451,42 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
                         </button>
                       </form>
 
-                      {(coverLettersByApplication.get(item.applicationId) ?? []).map((letter) => (
+                      {(
+                        coverLettersByApplication.get(item.applicationId) ?? []
+                      ).map((letter) => (
                         <div key={letter.id}>
                           <form
                             action={async (formData) => {
-                            "use server";
-                            try {
-                              await updateCoverLetter(
-                                String(formData.get("coverLetterId")),
-                                String(formData.get("content") || ""),
-                                String(formData.get("tone") || "professional") as
-                                  | "professional"
-                                  | "confident"
-                                  | "friendly"
-                              );
-                              redirect("/applications");
-                            } catch (error: unknown) {
-                              const message =
-                                error instanceof Error ? error.message : "Failed to update cover letter";
-                              redirect(`/applications?coverError=${encodeURIComponent(message)}`);
-                            }
-                          }}
+                              "use server";
+                              try {
+                                await updateCoverLetter(
+                                  String(formData.get("coverLetterId")),
+                                  String(formData.get("content") || ""),
+                                  String(
+                                    formData.get("tone") || "professional",
+                                  ) as
+                                    | "professional"
+                                    | "confident"
+                                    | "friendly",
+                                );
+                                redirect("/applications");
+                              } catch (error: unknown) {
+                                const message =
+                                  error instanceof Error
+                                    ? error.message
+                                    : "Failed to update cover letter";
+                                redirect(
+                                  `/applications?coverError=${encodeURIComponent(message)}`,
+                                );
+                              }
+                            }}
                             className="border border-gray-300 p-2 space-y-2"
                           >
-                            <input type="hidden" name="coverLetterId" value={letter.id} />
+                            <input
+                              type="hidden"
+                              name="coverLetterId"
+                              value={letter.id}
+                            />
                             <div className="flex gap-2 items-center">
                               <select
                                 aria-label="Update cover letter tone"
@@ -388,11 +494,15 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
                                 defaultValue={letter.tone}
                                 className="border border-black px-2 py-1 text-xs bg-white"
                               >
-                                <option value="professional">Professional</option>
+                                <option value="professional">
+                                  Professional
+                                </option>
                                 <option value="confident">Confident</option>
                                 <option value="friendly">Friendly</option>
                               </select>
-                              <span className="text-xs text-gray-500">Updated: {formatDate(letter.updatedAt)}</span>
+                              <span className="text-xs text-gray-500">
+                                Updated: {formatDate(letter.updatedAt)}
+                              </span>
                             </div>
                             <textarea
                               aria-label="Cover letter content"
@@ -422,16 +532,26 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
                             action={async (formData) => {
                               "use server";
                               try {
-                                await deleteCoverLetter(String(formData.get("coverLetterId")));
+                                await deleteCoverLetter(
+                                  String(formData.get("coverLetterId")),
+                                );
                                 redirect("/applications");
                               } catch (error: unknown) {
                                 const message =
-                                  error instanceof Error ? error.message : "Failed to delete cover letter";
-                                redirect(`/applications?coverError=${encodeURIComponent(message)}`);
+                                  error instanceof Error
+                                    ? error.message
+                                    : "Failed to delete cover letter";
+                                redirect(
+                                  `/applications?coverError=${encodeURIComponent(message)}`,
+                                );
                               }
                             }}
                           >
-                            <input type="hidden" name="coverLetterId" value={letter.id} />
+                            <input
+                              type="hidden"
+                              name="coverLetterId"
+                              value={letter.id}
+                            />
                           </form>
                         </div>
                       ))}
@@ -443,23 +563,43 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
                       action={async (formData) => {
                         "use server";
                         await updateApplication(String(formData.get("id")), {
-                          status: String(formData.get("status")) as ApplicationStatus,
+                          status: String(
+                            formData.get("status"),
+                          ) as ApplicationStatus,
                         });
                       }}
                       className="flex gap-2"
                     >
-                      <input type="hidden" name="id" value={item.applicationId} />
-                      <select aria-label="Update application status" name="status" defaultValue={item.status} className="border border-black px-2 py-1 text-xs bg-white">
+                      <input
+                        type="hidden"
+                        name="id"
+                        value={item.applicationId}
+                      />
+                      <select
+                        aria-label="Update application status"
+                        name="status"
+                        defaultValue={item.status}
+                        className="border border-black px-2 py-1 text-xs bg-white"
+                      >
                         {APPLICATION_STATUSES.map((status) => (
                           <option key={status} value={status}>
                             {status.toUpperCase()}
                           </option>
                         ))}
                       </select>
-                      <button type="submit" className="border border-black px-3 py-1 text-xs font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150">
+                      <button
+                        type="submit"
+                        className="border border-black px-3 py-1 text-xs font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
+                      >
                         Save
                       </button>
                     </form>
+                    <Link
+                      href={`/applications/${item.applicationId}/interview`}
+                      className="border border-blue-600 bg-blue-50 text-blue-800 text-center px-3 py-2 text-xs font-bold uppercase tracking-wider hover:bg-blue-600 hover:text-white transition-colors duration-150"
+                    >
+                      Practice Interview
+                    </Link>
 
                     <form
                       action={async (formData) => {
@@ -467,8 +607,15 @@ export default async function ApplicationsPage({ searchParams }: ApplicationsPag
                         await deleteApplication(String(formData.get("id")));
                       }}
                     >
-                      <input type="hidden" name="id" value={item.applicationId} />
-                      <button type="submit" className="border border-red-600 text-red-600 px-3 py-1 text-xs font-bold uppercase tracking-wider hover:bg-red-600 hover:text-white transition-colors duration-150 w-full">
+                      <input
+                        type="hidden"
+                        name="id"
+                        value={item.applicationId}
+                      />
+                      <button
+                        type="submit"
+                        className="border border-red-600 text-red-600 px-3 py-1 text-xs font-bold uppercase tracking-wider hover:bg-red-600 hover:text-white transition-colors duration-150 w-full"
+                      >
                         Delete
                       </button>
                     </form>
diff --git a/src/app/[locale]/r/[id]/page.tsx b/src/app/[locale]/r/[id]/page.tsx
index fbb86f5..ef0021e 100644
--- a/src/app/[locale]/r/[id]/page.tsx
+++ b/src/app/[locale]/r/[id]/page.tsx
@@ -9,6 +9,7 @@ import { MinimalTemplate } from "@/components/builder/templates/minimal-template
 import { ModernTemplate } from "@/components/builder/templates/modern-template";
 import { getPdfLabels, getDateLocale } from "@/lib/pdf-labels";
 import { PublicActionBar } from "@/components/builder/public-action-bar";
+import { ResumeAnalyticsTracker } from "@/components/builder/resume-analytics-tracker";
 
 interface PublicResumePageProps {
   params: Promise<{
@@ -26,7 +27,9 @@ const TEMPLATE_MAP = {
   modern: ModernTemplate,
 } as const;
 
-export default async function PublicResumePage({ params }: PublicResumePageProps) {
+export default async function PublicResumePage({
+  params,
+}: PublicResumePageProps) {
   const { locale, id } = await params;
   const resume = await getPublicResume(id);
 
@@ -35,10 +38,12 @@ export default async function PublicResumePage({ params }: PublicResumePageProps
   }
 
   const Template =
-    TEMPLATE_MAP[resume.templateId as keyof typeof TEMPLATE_MAP] ?? HarvardTemplate;
+    TEMPLATE_MAP[resume.templateId as keyof typeof TEMPLATE_MAP] ??
+    HarvardTemplate;
 
   return (
     <div className="min-h-screen bg-gray-100 print:bg-white pt-14 print:pt-0">
+      <ResumeAnalyticsTracker resumeId={resume.id} />
       <PublicActionBar resumeTitle={resume.title} />
       <div className="py-8 px-4 print:py-0 print:px-0">
         <div className="mx-auto max-w-[900px] bg-white shadow-2xl print:shadow-none">
diff --git a/src/app/api/analytics/resume-view/route.ts b/src/app/api/analytics/resume-view/route.ts
new file mode 100644
index 0000000..aed24b0
--- /dev/null
+++ b/src/app/api/analytics/resume-view/route.ts
@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+import { db } from "@/db";
+import { resumeViews } from "@/db/schema";
+
+export async function POST(request: Request) {
+  try {
+    const rawBody = await request.text();
+    if (!rawBody) return NextResponse.json({ success: true });
+
+    let body;
+    try {
+      body = JSON.parse(rawBody);
+    } catch {
+      return NextResponse.json({ success: true }); // fail silently for analytics
+    }
+
+    const { resumeId, location, durationSeconds } = body;
+
+    if (!resumeId) {
+      return NextResponse.json({ success: true });
+    }
+
+    // Attempt to parse out some pseudo-IP or user agent to prevent infinite logging
+    // by the same exact user in a loop, but keep it lightweight.
+    const ip = request.headers.get("x-forwarded-for") || "unknown";
+    const userAgent = request.headers.get("user-agent") || "unknown";
+
+    // Hash IP safely so we don't store plain PII
+    // For a real production app, do a proper hash/salt, but for a showcase, string concat is okay
+    const viewerIpId = `hash_${ip.substring(0, 10)}_${userAgent.substring(0, 15)}`;
+
+    await db.insert(resumeViews).values({
+      resumeId,
+      location: location || "Unknown Region",
+      durationSeconds: durationSeconds || 0,
+      viewerIpId,
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Failed to record analytics:", error);
+    return NextResponse.json({ success: false }, { status: 500 });
+  }
+}
diff --git a/src/components/applications/mock-interview-client.tsx b/src/components/applications/mock-interview-client.tsx
new file mode 100644
index 0000000..e4dfb1f
--- /dev/null
+++ b/src/components/applications/mock-interview-client.tsx
@@ -0,0 +1,309 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { Mic, MicOff, Play, Save, CheckCircle, Loader2 } from "lucide-react";
+import {
+  generateMockInterviewQuestions,
+  evaluateMockInterviewAnswer,
+} from "@/actions/mock-interview";
+
+type Question = { question: string; expectedContext: string };
+type Answer = {
+  questionId: number;
+  answer: string;
+  feedback: string;
+  score: number;
+};
+
+export default function MockInterviewClient({
+  applicationId,
+  existingInterviewId,
+  initialQuestions,
+  initialAnswers,
+}: {
+  applicationId: string;
+  existingInterviewId?: string;
+  initialQuestions: Question[];
+  initialAnswers: Answer[];
+}) {
+  const [interviewId, setInterviewId] = useState(existingInterviewId);
+  const [questions, setQuestions] = useState<Question[]>(initialQuestions);
+  const [answers, setAnswers] = useState<Answer[]>(initialAnswers);
+
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [isEvaluating, setIsEvaluating] = useState(false);
+  const [currentAnswerText, setCurrentAnswerText] = useState("");
+
+  // Basic speech recognition
+  const [isRecording, setIsRecording] = useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const recognitionRef = useRef<any>(null);
+
+  useEffect(() => {
+    // Check if SpeechRecognition is available
+    const SpeechRecognition =
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (window as any).SpeechRecognition ||
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (window as any).webkitSpeechRecognition;
+    if (SpeechRecognition) {
+      recognitionRef.current = new SpeechRecognition();
+      recognitionRef.current.continuous = true;
+      recognitionRef.current.interimResults = true;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      recognitionRef.current.onresult = (event: any) => {
+        let finalTranscript = "";
+
+        for (let i = event.resultIndex; i < event.results.length; ++i) {
+          if (event.results[i].isFinal) {
+            finalTranscript += event.results[i][0].transcript;
+          }
+        }
+
+        if (finalTranscript) {
+          setCurrentAnswerText((prev) => prev + " " + finalTranscript);
+        }
+      };
+
+      recognitionRef.current.onerror = () => {
+        setIsRecording(false);
+      };
+
+      recognitionRef.current.onend = () => {
+        setIsRecording(false);
+      };
+    }
+  }, []);
+
+  const handleStartInterview = async () => {
+    setIsGenerating(true);
+    try {
+      const result = await generateMockInterviewQuestions(applicationId);
+      setInterviewId(result.interviewId);
+      setQuestions(result.questions);
+      setAnswers([]);
+      setCurrentQuestionIndex(0);
+    } catch (e: unknown) {
+      alert("Failed: " + (e instanceof Error ? e.message : String(e)));
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleToggleRecord = () => {
+    if (isRecording) {
+      recognitionRef.current?.stop();
+      setIsRecording(false);
+    } else {
+      if (recognitionRef.current) {
+        recognitionRef.current.start();
+        setIsRecording(true);
+      } else {
+        alert(
+          "Speech recognition not supported in this browser. Please type your answer.",
+        );
+      }
+    }
+  };
+
+  const handleSubmitAnswer = async () => {
+    if (!interviewId || !currentAnswerText.trim()) return;
+    setIsEvaluating(true);
+    try {
+      const evaluated = await evaluateMockInterviewAnswer(
+        interviewId,
+        currentQuestionIndex,
+        currentAnswerText,
+      );
+
+      setAnswers((prev) => {
+        const next = [...prev];
+        const idx = next.findIndex(
+          (a) => a.questionId === currentQuestionIndex,
+        );
+        if (idx >= 0) next[idx] = evaluated;
+        else next.push(evaluated);
+        return next;
+      });
+
+      setCurrentAnswerText("");
+
+      // Move to next question if not done
+      if (currentQuestionIndex < questions.length - 1) {
+        setCurrentQuestionIndex((curr) => curr + 1);
+      }
+    } catch (e: unknown) {
+      alert(
+        "Failed to submit answer: " +
+          (e instanceof Error ? e.message : String(e)),
+      );
+    } finally {
+      setIsEvaluating(false);
+    }
+  };
+
+  if (!interviewId && questions.length === 0) {
+    return (
+      <div className="p-8 text-center bg-white rounded-xl border border-gray-200">
+        <h2 className="text-2xl font-bold mb-4">Interactive Mock Interview</h2>
+        <p className="text-gray-600 mb-8 max-w-md mx-auto">
+          Practice your interview skills with AI. We will generate 5 questions
+          based specifically on your resume and the job description.
+        </p>
+        <button
+          onClick={handleStartInterview}
+          disabled={isGenerating}
+          className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center mx-auto"
+        >
+          {isGenerating ? (
+            <Loader2 className="w-5 h-5 animate-spin mr-2" />
+          ) : (
+            <Play className="w-5 h-5 mr-2" />
+          )}
+          {isGenerating ? "Generating Questions..." : "Start Mock Interview"}
+        </button>
+      </div>
+    );
+  }
+
+  const isCompleted = answers.length === questions.length;
+  const currentQ = questions[currentQuestionIndex];
+  const currentA = answers.find((a) => a.questionId === currentQuestionIndex);
+
+  return (
+    <div className="max-w-4xl mx-auto rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm">
+      {/* Header */}
+      <div className="bg-gray-50 border-b border-gray-200 p-6 flex justify-between items-center">
+        <div>
+          <h2 className="text-xl font-bold text-gray-900">Mock Interview</h2>
+          <p className="text-sm text-gray-500 mt-1">
+            Question {currentQuestionIndex + 1} of {questions.length}
+          </p>
+        </div>
+        <div className="flex space-x-2">
+          {questions.map((_, idx) => {
+            const hasAnswer = answers.some((a) => a.questionId === idx);
+            const isActive = idx === currentQuestionIndex;
+            return (
+              <button
+                key={idx}
+                onClick={() => setCurrentQuestionIndex(idx)}
+                className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors
+                  ${isActive ? "ring-2 ring-blue-500 ring-offset-2" : ""}
+                  ${hasAnswer ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}
+                `}
+              >
+                {hasAnswer ? <CheckCircle className="w-4 h-4" /> : idx + 1}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-6">
+        <div className="mb-8">
+          <h3 className="text-lg font-bold text-gray-900 mb-2">
+            Q: {currentQ?.question}
+          </h3>
+          {currentA && (
+            <div className="mt-6">
+              <h4 className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">
+                Your Answer
+              </h4>
+              <p className="text-gray-900 bg-gray-50 p-4 rounded-lg border border-gray-100">
+                &quot;{currentA.answer}&quot;
+              </p>
+
+              <div className="mt-6 flex items-start gap-4 p-4 rounded-lg bg-blue-50 border border-blue-100">
+                <div className="bg-white p-3 rounded-full shadow-sm text-blue-600 font-bold text-xl flex-shrink-0">
+                  {currentA.score}/10
+                </div>
+                <div>
+                  <h4 className="font-semibold text-blue-900 mb-1">
+                    AI Feedback
+                  </h4>
+                  <p className="text-blue-800">{currentA.feedback}</p>
+
+                  <div className="mt-4 pt-4 border-t border-blue-200">
+                    <h5 className="text-sm font-medium text-blue-800 mb-1">
+                      What the interviewer expected:
+                    </h5>
+                    <p className="text-sm text-blue-700">
+                      {currentQ?.expectedContext}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {!currentA && !isCompleted && (
+            <div className="mt-6">
+              <h4 className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">
+                Your Answer
+              </h4>
+              <div className="relative">
+                <textarea
+                  value={currentAnswerText}
+                  onChange={(e) => setCurrentAnswerText(e.target.value)}
+                  placeholder="Type your answer here, or click the mic to speak..."
+                  className="w-full min-h-[150px] p-4 pr-12 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 resize-none"
+                />
+                <button
+                  onClick={handleToggleRecord}
+                  className={`absolute right-3 top-3 p-2 rounded-full transition-colors ${
+                    isRecording
+                      ? "bg-red-100 text-red-600 hover:bg-red-200"
+                      : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                  }`}
+                  title={isRecording ? "Stop recording" : "Start recording"}
+                >
+                  {isRecording ? (
+                    <Mic className="w-5 h-5 animate-pulse" />
+                  ) : (
+                    <MicOff className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+
+              <div className="flex justify-end mt-4">
+                <button
+                  onClick={handleSubmitAnswer}
+                  disabled={isEvaluating || !currentAnswerText.trim()}
+                  className="bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 flex items-center"
+                >
+                  {isEvaluating ? (
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  ) : (
+                    <Save className="w-4 h-4 mr-2" />
+                  )}
+                  Submit Answer
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {isCompleted && currentQuestionIndex === questions.length - 1 && (
+          <div className="mt-8 p-6 bg-green-50 border border-green-100 rounded-xl text-center">
+            <CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4" />
+            <h3 className="text-2xl font-bold text-green-900 mb-2">
+              Interview Completed!
+            </h3>
+            <p className="text-green-800">
+              You scored an average of{" "}
+              {(
+                answers.reduce((acc, a) => acc + a.score, 0) / answers.length
+              ).toFixed(1)}
+              /10. Review your feedback by clicking the numbers above, and good
+              luck with your real interview!
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/builder/forms/github-sync-modal.tsx b/src/components/builder/forms/github-sync-modal.tsx
new file mode 100644
index 0000000..7aeacd2
--- /dev/null
+++ b/src/components/builder/forms/github-sync-modal.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+import { Github, Loader2, X, Plus } from "lucide-react";
+import { generateGitHubAchievements } from "@/actions/github-achievements";
+import { useResumeStore } from "@/store/resume-store";
+
+export function GithubSyncModal({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  const [username, setUsername] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const { data, setData } = useResumeStore();
+
+  if (!isOpen) return null;
+
+  const handleSync = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!username.trim()) return;
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const { result } = await generateGitHubAchievements(username);
+
+      // Append the new projects to existing data
+      setData({
+        ...data,
+        projects: [...data.projects, ...result],
+      });
+
+      onClose();
+    } catch (err: unknown) {
+      setError(
+        err instanceof Error ? err.message : "Failed to sync from GitHub.",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+      <div className="bg-white max-w-md w-full border border-black p-6 relative shadow-2xl">
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 bg-gray-100 hover:bg-gray-200 text-black p-1 rounded-full"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <div className="text-center mb-6">
+          <div className="w-12 h-12 bg-black text-white rounded-full flex items-center justify-center mx-auto mb-4">
+            <Github className="w-6 h-6" />
+          </div>
+          <h2 className="text-2xl font-black uppercase tracking-tight">
+            Sync GitHub
+          </h2>
+          <p className="text-sm text-gray-600 mt-2">
+            Enter your GitHub username. We&apos;ll analyze your top repositories
+            and AI will automatically write STAR-method achievements.
+          </p>
+        </div>
+
+        <form onSubmit={handleSync} className="space-y-4">
+          {error && (
+            <div className="bg-red-50 text-red-600 p-3 text-sm font-medium border border-red-200">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className="label-mono block mb-2">GITHUB_USERNAME *</label>
+            <input
+              type="text"
+              required
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="e.g. torvalds"
+              className="w-full border border-gray-400 p-3 focus:border-black focus:ring-1 focus:ring-black outline-none transition-colors"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading || !username}
+            className="w-full border border-black bg-black text-white p-3 font-bold uppercase tracking-wider hover:bg-gray-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="w-5 h-5 mr-4 animate-spin" />
+                ANALYZING REPOS...
+              </>
+            ) : (
+              <>
+                <Plus className="w-5 h-5 mr-3" />
+                GENERATE ACHIEVEMENTS
+              </>
+            )}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/builder/forms/projects-form.tsx b/src/components/builder/forms/projects-form.tsx
index 229f07f..c8ad330 100644
--- a/src/components/builder/forms/projects-form.tsx
+++ b/src/components/builder/forms/projects-form.tsx
@@ -4,14 +4,14 @@ import { useState } from "react";
 import { useResumeStore } from "@/store/resume-store";
 import type { ResumeData } from "@/db/schema";
 import { improveBullet, improveDescription } from "@/actions/ai";
-import { 
-  DndContext, 
-  closestCenter, 
-  KeyboardSensor, 
-  PointerSensor, 
-  useSensor, 
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
   useSensors,
-  DragEndEvent
+  DragEndEvent,
 } from "@dnd-kit/core";
 import {
   arrayMove,
@@ -20,13 +20,20 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { SortableItem } from "./sortable-item";
+import { GithubSyncModal } from "./github-sync-modal";
+import { Github } from "lucide-react";
 
 export function ProjectsForm() {
   const { data, setData } = useResumeStore();
   const { projects } = data;
-  const [techInputValues, setTechInputValues] = useState<Record<string, string>>({});
+  const [techInputValues, setTechInputValues] = useState<
+    Record<string, string>
+  >({});
   const [improvingBullet, setImprovingBullet] = useState<string | null>(null);
-  const [improvingDescription, setImprovingDescription] = useState<string | null>(null);
+  const [improvingDescription, setImprovingDescription] = useState<
+    string | null
+  >(null);
+  const [isGithubModalOpen, setIsGithubModalOpen] = useState(false);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -36,14 +43,14 @@ export function ProjectsForm() {
     }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    })
+    }),
   );
 
   const handleImproveBullet = async (
     projId: string,
     idx: number,
     text: string,
-    projectName: string
+    projectName: string,
   ) => {
     if (!text.trim() || improvingBullet) return;
     const key = `${projId}-${idx}`;
@@ -61,13 +68,15 @@ export function ProjectsForm() {
   const handleImproveDescription = async (
     projId: string,
     text: string,
-    projectName: string
+    projectName: string,
   ) => {
     if (!text.trim() || improvingDescription) return;
     setImprovingDescription(projId);
     try {
       const { result } = await improveDescription(text, { title: projectName });
-      updateProject(projId, { description: result.slice(0, MAX_DESCRIPTION_LENGTH) });
+      updateProject(projId, {
+        description: result.slice(0, MAX_DESCRIPTION_LENGTH),
+      });
     } catch (err: unknown) {
       alert((err as Error).message || "AI improvement failed.");
     } finally {
@@ -116,12 +125,12 @@ export function ProjectsForm() {
 
   const updateProject = (
     id: string,
-    updates: Partial<ResumeData["projects"][0]>
+    updates: Partial<ResumeData["projects"][0]>,
   ) => {
     setData({
       ...data,
       projects: projects.map((proj) =>
-        proj.id === id ? { ...proj, ...updates } : proj
+        proj.id === id ? { ...proj, ...updates } : proj,
       ),
     });
   };
@@ -146,7 +155,7 @@ export function ProjectsForm() {
 
   const handleTechInputKeyDown = (
     e: React.KeyboardEvent<HTMLInputElement>,
-    projectId: string
+    projectId: string,
   ) => {
     if (e.key === "Enter" || e.key === ",") {
       e.preventDefault();
@@ -207,13 +216,27 @@ export function ProjectsForm() {
   return (
     <div className="max-w-3xl space-y-8">
       <div>
-        <span className="label-mono block mb-4">SECTION_05 // PROJECTS</span>
+        <div className="flex items-center justify-between mb-4">
+          <span className="label-mono block">SECTION_05 // PROJECTS</span>
+          <button
+            onClick={() => setIsGithubModalOpen(true)}
+            className="flex items-center gap-2 border border-black px-3 py-1.5 text-xs font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-colors duration-150"
+          >
+            <Github className="w-4 h-4" />
+            Auto-Sync GitHub
+          </button>
+        </div>
         <h2 className="text-3xl font-black tracking-tight mb-2">Projects</h2>
         <p className="text-sm text-gray-600">
           Notable projects, open-source contributions, or side work
         </p>
       </div>
 
+      <GithubSyncModal
+        isOpen={isGithubModalOpen}
+        onClose={() => setIsGithubModalOpen(false)}
+      />
+
       <div className="space-y-8">
         {projects.map((project, index) => (
           <div key={project.id} className="border border-black p-6">
@@ -305,8 +328,16 @@ export function ProjectsForm() {
                   <label className="label-mono">DESCRIPTION *</label>
                   <button
                     type="button"
-                    onClick={() => handleImproveDescription(project.id, project.description, project.name)}
-                    disabled={!project.description.trim() || !!improvingDescription}
+                    onClick={() =>
+                      handleImproveDescription(
+                        project.id,
+                        project.description,
+                        project.name,
+                      )
+                    }
+                    disabled={
+                      !project.description.trim() || !!improvingDescription
+                    }
                     className="label-mono text-[10px] border border-black px-2 py-0.5 hover:bg-black hover:text-white transition-colors duration-150 disabled:opacity-30 disabled:cursor-not-allowed"
                   >
                     {improvingDescription === project.id ? "..." : "✦"}
@@ -316,7 +347,9 @@ export function ProjectsForm() {
                   value={project.description}
                   onChange={(e) => {
                     if (e.target.value.length <= MAX_DESCRIPTION_LENGTH) {
-                      updateProject(project.id, { description: e.target.value });
+                      updateProject(project.id, {
+                        description: e.target.value,
+                      });
                     }
                   }}
                   placeholder="A full-stack e-commerce platform built with modern technologies..."
@@ -390,14 +423,23 @@ export function ProjectsForm() {
                                 type="text"
                                 value={highlight}
                                 onChange={(e) =>
-                                  updateHighlight(project.id, idx, e.target.value)
+                                  updateHighlight(
+                                    project.id,
+                                    idx,
+                                    e.target.value,
+                                  )
                                 }
                                 placeholder="Built scalable microservices architecture..."
                                 className="flex-1 border border-gray-400 bg-transparent px-3 py-2 focus:border-black focus:bg-black focus:text-white transition-all duration-150"
                               />
                               <button
                                 onClick={() =>
-                                  handleImproveBullet(project.id, idx, highlight, project.name)
+                                  handleImproveBullet(
+                                    project.id,
+                                    idx,
+                                    highlight,
+                                    project.name,
+                                  )
                                 }
                                 disabled={isImproving || !highlight.trim()}
                                 title="Improve with AI"
diff --git a/src/components/builder/resume-analytics-tracker.tsx b/src/components/builder/resume-analytics-tracker.tsx
new file mode 100644
index 0000000..803df80
--- /dev/null
+++ b/src/components/builder/resume-analytics-tracker.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export function ResumeAnalyticsTracker({ resumeId }: { resumeId: string }) {
+  const isRecorded = useRef(false);
+
+  useEffect(() => {
+    if (isRecorded.current) return;
+
+    // Track page view load
+    const startTime = Date.now();
+    isRecorded.current = true;
+
+    // Try to get geolocation approximations
+    let location = "Unknown";
+    try {
+      location = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } catch {
+      // Ignore error and fall back to "Unknown"
+    }
+
+    // When the component unmounts (user leaves), we record the analytics
+    return () => {
+      const durationSeconds = Math.round((Date.now() - startTime) / 1000);
+
+      // We use a small blob trick to send the data on unload using sendBeacon or fetch keepalive
+      const data = {
+        resumeId,
+        location,
+        durationSeconds,
+      };
+
+      const blob = new Blob([JSON.stringify(data)], {
+        type: "application/json",
+      });
+      navigator.sendBeacon("/api/analytics/resume-view", blob);
+    };
+  }, [resumeId]);
+
+  return null;
+}
diff --git a/src/db/schema.ts b/src/db/schema.ts
index 7df2ab4..43fb566 100644
--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@@ -45,7 +45,7 @@ export const accounts = pgTable(
     primaryKey({
       columns: [account.provider, account.providerAccountId],
     }),
-  ]
+  ],
 );
 
 export const sessions = pgTable("sessions", {
@@ -67,7 +67,7 @@ export const verificationTokens = pgTable(
     primaryKey({
       columns: [verificationToken.identifier, verificationToken.token],
     }),
-  ]
+  ],
 );
 
 // ============================================================
@@ -181,7 +181,10 @@ export const jobs = pgTable("jobs", {
   location: text("location"),
   sourceUrl: text("source_url"),
   jdText: text("jd_text").notNull(),
-  extractedKeywords: jsonb("extracted_keywords").$type<string[]>().notNull().default([]),
+  extractedKeywords: jsonb("extracted_keywords")
+    .$type<string[]>()
+    .notNull()
+    .default([]),
   createdAt: timestamp("created_at", { mode: "date" }).defaultNow().notNull(),
   updatedAt: timestamp("updated_at", { mode: "date" }).defaultNow().notNull(),
 });
@@ -211,10 +214,13 @@ export const applications = pgTable("applications", {
   jobId: uuid("job_id")
     .notNull()
     .references(() => jobs.id, { onDelete: "cascade" }),
-  resumeId: uuid("resume_id")
-    .references(() => resumes.id, { onDelete: "set null" }),
-  resumeVersionId: uuid("resume_version_id")
-    .references(() => resumeVersions.id, { onDelete: "set null" }),
+  resumeId: uuid("resume_id").references(() => resumes.id, {
+    onDelete: "set null",
+  }),
+  resumeVersionId: uuid("resume_version_id").references(
+    () => resumeVersions.id,
+    { onDelete: "set null" },
+  ),
   status: text("status").notNull().default("wishlist"),
   appliedAt: timestamp("applied_at", { mode: "date" }),
   nextStepAt: timestamp("next_step_at", { mode: "date" }),
@@ -243,10 +249,54 @@ export const usageEvents = pgTable("usage_events", {
     .notNull()
     .references(() => users.id, { onDelete: "cascade" }),
   eventName: text("event_name").notNull(),
-  metadata: jsonb("metadata").$type<Record<string, unknown>>().notNull().default({}),
+  metadata: jsonb("metadata")
+    .$type<Record<string, unknown>>()
+    .notNull()
+    .default({}),
   createdAt: timestamp("created_at", { mode: "date" }).defaultNow().notNull(),
 });
 
+export const mockInterviews = pgTable("mock_interviews", {
+  id: uuid("id").defaultRandom().primaryKey(),
+  userId: uuid("user_id")
+    .notNull()
+    .references(() => users.id, { onDelete: "cascade" }),
+  applicationId: uuid("application_id")
+    .notNull()
+    .references(() => applications.id, { onDelete: "cascade" }),
+  questions: jsonb("questions")
+    .$type<Array<{ question: string; expectedContext: string }>>()
+    .notNull()
+    .default([]),
+  answers: jsonb("answers")
+    .$type<
+      Array<{
+        questionId: number;
+        answer: string;
+        feedback: string;
+        score: number;
+      }>
+    >()
+    .notNull()
+    .default([]),
+  status: text("status").notNull().default("pending"), // pending, in_progress, completed
+  createdAt: timestamp("created_at", { mode: "date" }).defaultNow().notNull(),
+  updatedAt: timestamp("updated_at", { mode: "date" }).defaultNow().notNull(),
+});
+
+export const resumeViews = pgTable("resume_views", {
+  id: uuid("id").defaultRandom().primaryKey(),
+  resumeId: uuid("resume_id")
+    .notNull()
+    .references(() => resumes.id, { onDelete: "cascade" }),
+  viewerIpId: text("viewer_ip_id").notNull(), // hashed ip or session identifier
+  location: text("location"), // e.g. "San Francisco, CA"
+  durationSeconds: integer("duration_seconds").notNull().default(0),
+  clickedLinks: jsonb("clicked_links").$type<string[]>().notNull().default([]),
+  createdAt: timestamp("created_at", { mode: "date" }).defaultNow().notNull(),
+  updatedAt: timestamp("updated_at", { mode: "date" }).defaultNow().notNull(),
+});
+
 // ============================================================
 // RELATIONS
 // ============================================================
@@ -260,54 +310,69 @@ export const usersRelations = relations(users, ({ many }) => ({
   usageEvents: many(usageEvents),
   accounts: many(accounts),
   sessions: many(sessions),
+  mockInterviews: many(mockInterviews),
 }));
 
-export const resumesRelations = relations(resumes, ({ one }) => ({
+export const resumesRelations = relations(resumes, ({ one, many }) => ({
   user: one(users, {
     fields: [resumes.userId],
     references: [users.id],
   }),
+  views: many(resumeViews),
 }));
 
-export const jobsRelations = relations(jobs, ({ one, many }) => ({
-  user: one(users, {
-    fields: [jobs.userId],
-    references: [users.id],
+export const resumeViewsRelations = relations(resumeViews, ({ one }) => ({
+  resume: one(resumes, {
+    fields: [resumeViews.resumeId],
+    references: [resumes.id],
   }),
-  applications: many(applications),
 }));
 
-export const resumeVersionsRelations = relations(resumeVersions, ({ one, many }) => ({
+export const jobsRelations = relations(jobs, ({ one, many }) => ({
   user: one(users, {
-    fields: [resumeVersions.userId],
+    fields: [jobs.userId],
     references: [users.id],
   }),
-  resume: one(resumes, {
-    fields: [resumeVersions.resumeId],
-    references: [resumes.id],
-  }),
   applications: many(applications),
 }));
 
-export const applicationsRelations = relations(applications, ({ one, many }) => ({
-  user: one(users, {
-    fields: [applications.userId],
-    references: [users.id],
-  }),
-  job: one(jobs, {
-    fields: [applications.jobId],
-    references: [jobs.id],
-  }),
-  resume: one(resumes, {
-    fields: [applications.resumeId],
-    references: [resumes.id],
+export const resumeVersionsRelations = relations(
+  resumeVersions,
+  ({ one, many }) => ({
+    user: one(users, {
+      fields: [resumeVersions.userId],
+      references: [users.id],
+    }),
+    resume: one(resumes, {
+      fields: [resumeVersions.resumeId],
+      references: [resumes.id],
+    }),
+    applications: many(applications),
   }),
-  resumeVersion: one(resumeVersions, {
-    fields: [applications.resumeVersionId],
-    references: [resumeVersions.id],
+);
+
+export const applicationsRelations = relations(
+  applications,
+  ({ one, many }) => ({
+    user: one(users, {
+      fields: [applications.userId],
+      references: [users.id],
+    }),
+    job: one(jobs, {
+      fields: [applications.jobId],
+      references: [jobs.id],
+    }),
+    resume: one(resumes, {
+      fields: [applications.resumeId],
+      references: [resumes.id],
+    }),
+    resumeVersion: one(resumeVersions, {
+      fields: [applications.resumeVersionId],
+      references: [resumeVersions.id],
+    }),
+    coverLetters: many(coverLetters),
   }),
-  coverLetters: many(coverLetters),
-}));
+);
 
 export const coverLettersRelations = relations(coverLetters, ({ one }) => ({
   user: one(users, {