diff --git a/frontend/src/pages/AIInterviewAnswerClaimVerificationCoach.jsx b/frontend/src/pages/AIInterviewAnswerClaimVerificationCoach.jsx
new file mode 100644
index 00000000..7adc1d73
--- /dev/null
+++ b/frontend/src/pages/AIInterviewAnswerClaimVerificationCoach.jsx
@@ -0,0 +1,216 @@
+import React, { useState } from "react";
+import {
+  Brain,
+  ShieldCheck,
+  AlertTriangle,
+  CheckCircle2,
+  Target,
+} from "lucide-react";
+
+const claims = [
+  {
+    claim: "Improved API performance significantly.",
+    status: "Needs Evidence",
+    detail: "Add before/after latency or throughput measurements.",
+  },
+  {
+    claim: "Reduced database load using caching.",
+    status: "Supported",
+    detail: "Technical reasoning is clearly explained.",
+  },
+  {
+    claim: "The system can handle millions of users.",
+    status: "Needs Context",
+    detail: "Mention traffic assumptions, capacity, or test results.",
+  },
+];
+
+export default function AIInterviewAnswerClaimVerificationCoach() {
+  const [answer, setAnswer] = useState("");
+  const [analyzed, setAnalyzed] = useState(false);
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+
+      {/* Header */}
+      <div className="flex items-center gap-4">
+
+        <div className="p-3 rounded-xl bg-indigo-100 text-indigo-600">
+          <Brain size={28} />
+        </div>
+
+        <div>
+          <h1 className="text-2xl font-bold">
+            AI Claim Verification Coach
+          </h1>
+
+          <p className="text-gray-500">
+            Strengthen technical and professional claims with supporting
+            evidence.
+          </p>
+        </div>
+
+      </div>
+
+      {/* Question */}
+      <div className="bg-white rounded-2xl shadow p-5">
+
+        <p className="text-sm text-gray-500">
+          Interview Question
+        </p>
+
+        <h2 className="text-xl font-bold mt-2">
+          Tell me about a project where you made a significant performance
+          improvement.
+        </h2>
+
+      </div>
+
+      {/* Answer */}
+      <div className="bg-white rounded-2xl shadow p-5">
+
+        <h2 className="font-bold text-lg">
+          Your Answer
+        </h2>
+
+        <textarea
+          value={answer}
+          onChange={(e) => setAnswer(e.target.value)}
+          rows={8}
+          placeholder="Paste your interview response..."
+          className="w-full border rounded-xl p-4 mt-4 outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+
+        <button
+          disabled={!answer.trim()}
+          onClick={() => setAnalyzed(true)}
+          className="mt-4 px-5 py-3 rounded-xl bg-indigo-600 text-white font-semibold disabled:opacity-50"
+        >
+          Verify Claims
+        </button>
+
+      </div>
+
+      {analyzed && (
+        <>
+          {/* Score */}
+          <div className="bg-indigo-50 rounded-2xl p-6 text-center">
+
+            <ShieldCheck
+              className="mx-auto text-indigo-600"
+              size={34}
+            />
+
+            <p className="text-gray-500 mt-3">
+              Claim Evidence Score
+            </p>
+
+            <p className="text-6xl font-black text-indigo-600">
+              71%
+            </p>
+
+            <p className="text-gray-600 mt-2">
+              Several claims are useful but need stronger supporting evidence.
+            </p>
+
+          </div>
+
+          {/* Claims */}
+          <div className="bg-white rounded-2xl shadow p-5">
+
+            <h2 className="font-bold text-lg">
+              Detected Claims
+            </h2>
+
+            <div className="space-y-4 mt-5">
+
+              {claims.map((item) => (
+                <div
+                  key={item.claim}
+                  className="border rounded-xl p-4"
+                >
+
+                  <div className="flex justify-between gap-4">
+
+                    <p className="font-semibold">
+                      "{item.claim}"
+                    </p>
+
+                    {item.status === "Supported" ? (
+                      <span className="whitespace-nowrap flex items-center gap-1 text-green-600 font-semibold">
+                        <CheckCircle2 size={17} />
+                        Supported
+                      </span>
+                    ) : (
+                      <span className="whitespace-nowrap flex items-center gap-1 text-orange-600 font-semibold">
+                        <AlertTriangle size={17} />
+                        {item.status}
+                      </span>
+                    )}
+
+                  </div>
+
+                  <p className="text-gray-600 text-sm mt-3">
+                    {item.detail}
+                  </p>
+
+                </div>
+              ))}
+
+            </div>
+
+          </div>
+
+          {/* Evidence Prompt */}
+          <div className="bg-orange-50 rounded-2xl p-5">
+
+            <div className="flex gap-3">
+
+              <Target className="text-orange-600" />
+
+              <div>
+                <h2 className="font-bold text-orange-700">
+                  AI Evidence Prompt
+                </h2>
+
+                <p className="text-gray-600 mt-2">
+                  You said the API became significantly faster. What was the
+                  response time before and after your change? If exact numbers
+                  are unavailable, explain how you measured the improvement.
+                </p>
+
+              </div>
+
+            </div>
+
+          </div>
+
+          {/* AI Recommendation */}
+          <div className="bg-green-50 rounded-2xl p-5">
+
+            <div className="flex gap-3">
+
+              <CheckCircle2 className="text-green-600" />
+
+              <div>
+                <h2 className="font-bold text-green-700">
+                  AI Recommendation
+                </h2>
+
+                <p className="text-gray-600 mt-2">
+                  Replace broad claims with measurable evidence whenever
+                  possible. Explain the baseline, your action, the measured
+                  result, and the context in which the result was achieved.
+                </p>
+              </div>
+
+            </div>
+
+          </div>
+
+        </>
+      )}
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/AIInterviewPreparationTopicDifficultyCalibration.jsx b/frontend/src/pages/AIInterviewPreparationTopicDifficultyCalibration.jsx
new file mode 100644
index 00000000..d2878dc5
--- /dev/null
+++ b/frontend/src/pages/AIInterviewPreparationTopicDifficultyCalibration.jsx
@@ -0,0 +1,231 @@
+import React from "react";
+import {
+  Brain,
+  Target,
+  Clock,
+  Lightbulb,
+  TrendingUp,
+} from "lucide-react";
+
+const topics = [
+  {
+    name: "Arrays",
+    difficulty: "Easy",
+    score: 28,
+    accuracy: 94,
+    time: "2.4 min",
+    hints: 0,
+    improvement: "+12%",
+  },
+  {
+    name: "Dynamic Programming",
+    difficulty: "Hard",
+    score: 82,
+    accuracy: 61,
+    time: "9.2 min",
+    hints: 4,
+    improvement: "+5%",
+  },
+  {
+    name: "Graph Algorithms",
+    difficulty: "Challenging",
+    score: 74,
+    accuracy: 68,
+    time: "7.6 min",
+    hints: 2,
+    improvement: "+14%",
+  },
+];
+
+export default function AIInterviewPreparationTopicDifficultyCalibration() {
+  return (
+    <div className="max-w-5xl mx-auto p-6 space-y-6">
+
+      {/* Header */}
+      <div className="flex items-center gap-4">
+
+        <div className="p-3 rounded-xl bg-indigo-100 text-indigo-600">
+          <Brain size={28} />
+        </div>
+
+        <div>
+          <h1 className="text-2xl font-bold">
+            AI Topic Difficulty Calibration
+          </h1>
+
+          <p className="text-gray-500">
+            Discover how difficult each topic is specifically for you.
+          </p>
+        </div>
+
+      </div>
+
+      {/* Overview */}
+      <div className="bg-indigo-50 rounded-2xl p-6 text-center">
+
+        <Target
+          className="mx-auto text-indigo-600"
+          size={32}
+        />
+
+        <p className="text-gray-500 mt-3">
+          Personalized Difficulty Model
+        </p>
+
+        <p className="text-gray-700 mt-2">
+          Difficulty is calculated from your actual performance rather than
+          relying only on predefined question labels.
+        </p>
+
+      </div>
+
+      {/* Topic Cards */}
+      <div className="space-y-4">
+
+        {topics.map((topic) => (
+          <div
+            key={topic.name}
+            className="bg-white rounded-2xl shadow p-5"
+          >
+
+            <div className="flex justify-between items-center">
+
+              <div>
+                <h2 className="text-lg font-bold">
+                  {topic.name}
+                </h2>
+
+                <p className="text-sm text-gray-500 mt-1">
+                  Personalized difficulty
+                </p>
+              </div>
+
+              <span className="px-4 py-2 rounded-full bg-orange-100 text-orange-700 font-semibold">
+                {topic.difficulty}
+              </span>
+
+            </div>
+
+            {/* Difficulty Bar */}
+            <div className="mt-5">
+
+              <div className="flex justify-between text-sm">
+                <span>Difficulty Score</span>
+
+                <span className="font-bold">
+                  {topic.score}/100
+                </span>
+              </div>
+
+              <div className="h-2 bg-gray-200 rounded-full mt-2">
+                <div
+                  className="h-full bg-indigo-600 rounded-full"
+                  style={{ width: `${topic.score}%` }}
+                />
+              </div>
+
+            </div>
+
+            {/* Metrics */}
+            <div className="grid sm:grid-cols-4 gap-3 mt-5">
+
+              <div className="bg-gray-50 rounded-xl p-3">
+
+                <p className="text-sm text-gray-500">
+                  Accuracy
+                </p>
+
+                <p className="font-bold">
+                  {topic.accuracy}%
+                </p>
+
+              </div>
+
+              <div className="bg-gray-50 rounded-xl p-3">
+
+                <Clock
+                  size={18}
+                  className="text-indigo-600"
+                />
+
+                <p className="text-sm text-gray-500 mt-1">
+                  Avg. Time
+                </p>
+
+                <p className="font-bold">
+                  {topic.time}
+                </p>
+
+              </div>
+
+              <div className="bg-gray-50 rounded-xl p-3">
+
+                <Lightbulb
+                  size={18}
+                  className="text-indigo-600"
+                />
+
+                <p className="text-sm text-gray-500 mt-1">
+                  Hints Used
+                </p>
+
+                <p className="font-bold">
+                  {topic.hints}
+                </p>
+
+              </div>
+
+              <div className="bg-gray-50 rounded-xl p-3">
+
+                <TrendingUp
+                  size={18}
+                  className="text-green-600"
+                />
+
+                <p className="text-sm text-gray-500 mt-1">
+                  Improvement
+                </p>
+
+                <p className="font-bold text-green-600">
+                  {topic.improvement}
+                </p>
+
+              </div>
+
+            </div>
+
+          </div>
+        ))}
+
+      </div>
+
+      {/* AI Insight */}
+      <div className="bg-green-50 rounded-2xl p-5">
+
+        <div className="flex gap-3">
+
+          <TrendingUp className="text-green-600" />
+
+          <div>
+
+            <h2 className="font-bold text-green-700">
+              AI Calibration Insight
+            </h2>
+
+            <p className="text-gray-600 mt-2">
+              Arrays are currently easy for you despite their general
+              difficulty classification. Dynamic Programming remains
+              challenging because of lower accuracy, longer solving time, and
+              higher hint usage. Future practice can use these personalized
+              difficulty levels to select better questions.
+            </p>
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/AIInterviewQuestionProgressiveDisclosureMode.jsx b/frontend/src/pages/AIInterviewQuestionProgressiveDisclosureMode.jsx
new file mode 100644
index 00000000..825330d0
--- /dev/null
+++ b/frontend/src/pages/AIInterviewQuestionProgressiveDisclosureMode.jsx
@@ -0,0 +1,241 @@
+import React, { useState } from "react";
+import {
+  Brain,
+  Lock,
+  ChevronRight,
+  CheckCircle2,
+} from "lucide-react";
+
+const levels = [
+  {
+    title: "Basic Clarification",
+    content:
+      "The input can contain repeated values. Consider what the expected output should be when duplicates exist.",
+  },
+  {
+    title: "Concept Hint",
+    content:
+      "Think about a data structure that allows you to quickly check whether a value has already been encountered.",
+  },
+  {
+    title: "Constraint Hint",
+    content:
+      "If the input size is very large, consider whether an O(n²) approach will scale well.",
+  },
+  {
+    title: "Approach Hint",
+    content:
+      "Traverse the input once while maintaining a collection of previously seen values.",
+  },
+  {
+    title: "Solution Guidance",
+    content:
+      "Use a hash-based set to track encountered values and detect duplicates efficiently.",
+  },
+];
+
+export default function AIInterviewQuestionProgressiveDisclosureMode() {
+  const [level, setLevel] = useState(0);
+  const [requested, setRequested] = useState(false);
+
+  const requestNextHint = () => {
+    setRequested(true);
+    setTimeout(() => setRequested(false), 300);
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-6">
+
+      {/* Header */}
+      <div className="flex items-center gap-4">
+
+        <div className="p-3 rounded-xl bg-indigo-100 text-indigo-600">
+          <Brain size={28} />
+        </div>
+
+        <div>
+          <h1 className="text-2xl font-bold">
+            Progressive Disclosure Mode
+          </h1>
+
+          <p className="text-gray-500">
+            Unlock interview hints gradually and preserve independent
+            problem-solving.
+          </p>
+        </div>
+
+      </div>
+
+      {/* Problem */}
+      <div className="bg-white rounded-2xl shadow p-5">
+
+        <p className="text-sm text-gray-500">
+          Interview Problem
+        </p>
+
+        <h2 className="text-xl font-bold mt-2">
+          Determine whether an array contains duplicate values.
+        </h2>
+
+        <p className="text-gray-600 mt-3">
+          Try to solve the problem independently. Request assistance only
+          when you need it.
+        </p>
+
+      </div>
+
+      {/* Progress */}
+      <div className="bg-indigo-50 rounded-2xl p-5">
+
+        <div className="flex justify-between items-center">
+
+          <div>
+            <p className="text-sm text-gray-500">
+              Assistance Progress
+            </p>
+
+            <p className="font-bold text-lg">
+              Level {level + 1} of {levels.length}
+            </p>
+          </div>
+
+          <span className="px-3 py-1 rounded-full bg-white text-indigo-700 font-semibold">
+            {level === 0
+              ? "Independent"
+              : `${level} hint${level > 1 ? "s" : ""} used`}
+          </span>
+
+        </div>
+
+        <div className="h-2 bg-white rounded-full mt-4">
+          <div
+            className="h-full bg-indigo-600 rounded-full transition-all"
+            style={{
+              width: `${((level + 1) / levels.length) * 100}%`,
+            }}
+          />
+        </div>
+
+      </div>
+
+      {/* Current Hint */}
+      <div className="bg-white rounded-2xl shadow p-5">
+
+        <div className="flex items-center gap-3">
+
+          <Lock className="text-indigo-600" />
+
+          <div>
+            <p className="text-sm text-gray-500">
+              Next Assistance Level
+            </p>
+
+            <h2 className="font-bold text-lg">
+              {levels[level].title}
+            </h2>
+          </div>
+
+        </div>
+
+        {!requested ? (
+          <button
+            onClick={requestNextHint}
+            className="mt-5 flex items-center gap-2 px-5 py-3 rounded-xl bg-indigo-600 text-white font-semibold"
+          >
+            Reveal This Level
+            <ChevronRight size={18} />
+          </button>
+        ) : (
+          <div className="mt-5 bg-indigo-50 rounded-xl p-4">
+
+            <p className="text-gray-700">
+              {levels[level].content}
+            </p>
+
+            {level < levels.length - 1 && (
+              <button
+                onClick={() => {
+                  setLevel(level + 1);
+                  setRequested(false);
+                }}
+                className="mt-4 px-4 py-2 rounded-lg bg-indigo-600 text-white font-semibold"
+              >
+                Unlock Next Level
+              </button>
+            )}
+
+          </div>
+        )}
+
+      </div>
+
+      {/* Hint History */}
+      <div className="bg-white rounded-2xl shadow p-5">
+
+        <h2 className="font-bold text-lg">
+          Assistance History
+        </h2>
+
+        <div className="space-y-3 mt-4">
+
+          {levels.map((item, index) => (
+            <div
+              key={item.title}
+              className={`flex items-center gap-3 p-3 rounded-xl ${
+                index < level
+                  ? "bg-green-50"
+                  : index === level && requested
+                  ? "bg-indigo-50"
+                  : "bg-gray-50"
+              }`}
+            >
+
+              {index < level ? (
+                <CheckCircle2
+                  className="text-green-600"
+                  size={20}
+                />
+              ) : (
+                <Lock
+                  className="text-gray-400"
+                  size={20}
+                />
+              )}
+
+              <span className="font-medium">
+                {item.title}
+              </span>
+
+            </div>
+          ))}
+
+        </div>
+
+      </div>
+
+      {/* AI Insight */}
+      <div className="bg-green-50 rounded-2xl p-5">
+
+        <div className="flex gap-3">
+
+          <CheckCircle2 className="text-green-600" />
+
+          <div>
+            <h2 className="font-bold text-green-700">
+              AI Learning Insight
+            </h2>
+
+            <p className="text-gray-600 mt-2">
+              The fewer assistance levels you require, the stronger your
+              independent problem-solving signal. Your hint usage can be
+              tracked across questions to measure improvement over time.
+            </p>
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file