diff --git a/.github/workflows/cd-dev.yml b/.github/workflows/cd-dev.yml
new file mode 100644
index 00000000..731ac0f3
--- /dev/null
+++ b/.github/workflows/cd-dev.yml
@@ -0,0 +1,64 @@
+name: Deploy Kaapi Dev to EC2
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment: AWS_ENV
+
+    permissions:
+      packages: write
+      contents: read
+      attestations: write
+      id-token: write
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v6
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v6
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_ARN }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      - name: Deploy via SSM
+        id: ssm
+        env:
+          BUILD_DIRECTORY: ${{ secrets.DEV_BUILD_DIRECTORY }}
+          APP_NAME: ${{ secrets.DEV_PM2_APP_NAME }}
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+          INSTANCE_ID: ${{ secrets.EC2_STAGING_INSTANCE_ID }}
+          ROOT_USER: ${{ secrets.USER }}
+        run: |
+          REMOTE_CMD="export HOME=/home/$ROOT_USER && export NVM_DIR="/home/$ROOT_USER/.nvm" && [ -s "\$NVM_DIR/nvm.sh" ] && \. "\$NVM_DIR/nvm.sh" && git config --global --add safe.directory ${BUILD_DIRECTORY} && set -e && cd ${BUILD_DIRECTORY} && git pull origin dev && npm ci && npm run build && sudo -iu ${ROOT_USER} pm2 restart ${APP_NAME}"
+          CMD_ID=$(aws ssm send-command \
+            --instance-ids "$INSTANCE_ID" \
+            --document-name "AWS-RunShellScript" \
+            --parameters commands="[\"$REMOTE_CMD\"]" \
+            --region "$AWS_REGION" \
+            --query 'Command.CommandId' \
+            --output text)
+          echo "cmd_id=$CMD_ID" >> "$GITHUB_OUTPUT"
+
+      - name: Wait for SSM command to finish
+        env:
+          INSTANCE_ID: ${{ secrets.EC2_STAGING_INSTANCE_ID }}
+          CMD_ID: ${{ steps.ssm.outputs.cmd_id }}
+        run: |
+          WAIT_EXIT=0
+          aws ssm wait command-executed \
+            --command-id "$CMD_ID" \
+            --instance-id "$INSTANCE_ID" || WAIT_EXIT=$?
+
+          aws ssm get-command-invocation \
+            --command-id "$CMD_ID" \
+            --instance-id "$INSTANCE_ID" \
+            --query '{Status:Status,Stdout:StandardOutputContent,Stderr:StandardErrorContent}' \
+            --output json
+
+          exit $WAIT_EXIT
diff --git a/README.md b/README.md
index 6911dbef..87e36f71 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,7 @@ This is a thin frontend UI for [Kaapi backend](https://github.com/ProjectTech4De
   - [Software Dependencies](#software-dependencies)
     - [npm (via asdf)](#npm-via-asdf)
   - [Kaapi Backend](#kaapi-backend)
+  - [Kaapi Guardrails Service](#kaapi-guardrails-service)
 - [Clone Frontend Repo](#clone-frontend-repo)
   - [Git commands to clone](#git-commands-to-clone)
 - [Installation](#installation)
@@ -52,11 +53,11 @@ You need to set up the [Kaapi backend](https://github.com/ProjectTech4DevAI/kaap
 
 > 💡 Note: Ensure the backend is running and accessible before starting the frontend.
 
-### Kaapi Guardrails Service _(coming soon)_
+### Kaapi Guardrails Service
 
-The Guardrails UI (currently in development) will require the Kaapi Guardrails service to be running alongside the backend. Setup instructions will be added here once the service is available.
+You need to set up the [Kaapi Guardrails](https://github.com/ProjectTech4DevAI/kaapi-guardrails) service and follow the instructions there.
 
-> 🚧 No action needed for now — this is a placeholder for when the Guardrails feature lands in `main`.
+> 💡 Note: The Guardrails service must be running and accessible whenever you use the Guardrails module in the frontend.
 
 ---
 
@@ -149,14 +150,14 @@ Deployments are automated via a GitHub Actions CD pipeline that SSHes into the E
 1. SSHes into the EC2 instance
 2. Runs `git pull` to fetch the latest code
 3. Runs `npm run build` to create an optimized production build
-4. Restarts the server to apply the new build
+4. Restarts the pm2 server to apply the new build
 
 **Production** — on every version tag (e.g. `v1.0.0`, `v2.1.0`), the pipeline automatically:
 
 1. SSHes into the EC2 instance
 2. Runs `git fetch --tags` and checks out the tag
 3. Runs `npm run build` to create an optimized production build
-4. Restarts the server to apply the new build
+4. Restarts the pm2 server to apply the new build
 
 ---
 
@@ -169,4 +170,4 @@ Deployments are automated via a GitHub Actions CD pipeline that SSHes into the E
 
 ### Chat With Us
 
-- 💬 [Discord](https://discord.gg/BRYzSYha)
+- 💬 [Discord](https://discord.gg/s7e2UBFku)
diff --git a/app/(main)/assessment/page.tsx b/app/(main)/assessment/page.tsx
new file mode 100644
index 00000000..c0993354
--- /dev/null
+++ b/app/(main)/assessment/page.tsx
@@ -0,0 +1,334 @@
+"use client";
+
+import { Suspense, useCallback, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import Loader from "@/app/components/Loader";
+import { useToast } from "@/app/components/Toast";
+import { apiFetch } from "@/app/lib/apiClient";
+import { handleForbiddenError } from "@/app/lib/utils/assessment";
+import { FeatureFlag } from "@/app/lib/constants";
+import { removeFeatureFromClient } from "@/app/lib/utils/features";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useAssessmentDatasetStore } from "@/app/lib/store/assessment";
+import type {
+  AssessmentFormState,
+  AssessmentTab,
+  AssessmentTabId,
+  ConfigSelection,
+  SchemaProperty,
+} from "@/app/lib/types/assessment";
+import PageLayout from "@/app/components/assessment/PageLayout";
+
+function schemaToJsonSchema(properties: SchemaProperty[]): object | null {
+  if (properties.length === 0) return null;
+
+  const props: Record<string, object> = {};
+  const required: string[] = [];
+
+  properties.forEach((property) => {
+    if (!property.name.trim()) return;
+
+    let definition: object;
+    if (property.type === "object") {
+      definition = schemaToJsonSchema(property.children) || { type: "object" };
+    } else if (property.type === "enum") {
+      definition = {
+        type: "string",
+        enum: property.enumValues.filter((value) => value.trim()),
+      };
+    } else {
+      definition = { type: property.type };
+    }
+
+    if (property.isArray) {
+      definition = { type: "array", items: definition };
+    }
+
+    props[property.name] = definition;
+    if (property.isRequired) {
+      required.push(property.name);
+    }
+  });
+
+  if (Object.keys(props).length === 0) return null;
+
+  return {
+    type: "object",
+    properties: props,
+    ...(required.length > 0 ? { required } : {}),
+  };
+}
+
+const PAGE_TABS: ReadonlyArray<AssessmentTab> = [
+  { id: "datasets", label: "Datasets" },
+  { id: "config", label: "Config" },
+  { id: "results", label: "Result" },
+];
+
+function PageContent() {
+  const router = useRouter();
+  const toast = useToast();
+  const { activeKey } = useAuth();
+  const [activeTab, setActiveTab] = useState<AssessmentTabId>("datasets");
+  const [configStep, setConfigStep] = useState(1);
+  const [completedConfigSteps, setCompletedConfigSteps] = useState<Set<number>>(
+    new Set(),
+  );
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [experimentName, setExperimentName] = useState("");
+  const featureRedirectingRef = useRef(false);
+  const {
+    datasetId,
+    datasetName,
+    columns,
+    sampleRow,
+    columnMapping,
+    setDatasetId,
+    setDatasetName,
+    setDataset,
+    setColumnMapping,
+    clearDataset,
+  } = useAssessmentDatasetStore();
+  const [promptTemplate, setPromptTemplate] = useState("");
+  const [systemInstruction, setSystemInstruction] = useState("");
+  const [outputSchema, setOutputSchema] = useState<SchemaProperty[]>([]);
+  const [configs, setConfigs] = useState<ConfigSelection[]>([]);
+
+  const handleForbidden = useCallback(
+    (options?: { notify?: boolean }) => {
+      if (featureRedirectingRef.current) return;
+      featureRedirectingRef.current = true;
+
+      if (options?.notify) {
+        toast.error(
+          "Assessment feature is disabled for this organization/project.",
+        );
+      }
+
+      removeFeatureFromClient(FeatureFlag.ASSESSMENT);
+      if (
+        typeof window !== "undefined" &&
+        window.location.pathname !== "/evaluations"
+      ) {
+        router.replace("/");
+      }
+    },
+    [router, toast],
+  );
+
+  const handleForbiddenWithNotify = useCallback(() => {
+    handleForbidden({ notify: true });
+  }, [handleForbidden]);
+
+  const markConfigCompleted = useCallback((step: number) => {
+    setCompletedConfigSteps((prev) => new Set([...prev, step]));
+  }, []);
+
+  const handleConfigNext = useCallback(
+    (fromStep: number) => {
+      markConfigCompleted(fromStep);
+      setConfigStep(fromStep + 1);
+    },
+    [markConfigCompleted],
+  );
+
+  const handleColumnsLoaded = useCallback(
+    (loadedColumns: string[], firstRow: Record<string, string> = {}) => {
+      const currentId = useAssessmentDatasetStore.getState().datasetId;
+      setDataset(currentId, loadedColumns, firstRow);
+      setPromptTemplate("");
+    },
+    [setDataset],
+  );
+
+  const outputSchemaJson = useMemo(
+    () => schemaToJsonSchema(outputSchema),
+    [outputSchema],
+  );
+
+  const handleSubmit = useCallback(async () => {
+    if (!datasetId) {
+      toast.error("Dataset is required");
+      return;
+    }
+    if (columnMapping.textColumns.length === 0) {
+      toast.error("Map at least one text column");
+      return;
+    }
+    if (!promptTemplate.trim()) {
+      toast.error("Prompt is required");
+      return;
+    }
+    if (!outputSchema.some((field) => field.name.trim())) {
+      toast.error("Response format is required");
+      return;
+    }
+    if (configs.length === 0) {
+      toast.error("Select at least one configuration");
+      return;
+    }
+    if (!experimentName.trim()) {
+      toast.error("Experiment name is required");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      await apiFetch("/api/assessment/runs", activeKey?.key ?? "", {
+        method: "POST",
+        body: JSON.stringify({
+          experiment_name: experimentName.trim(),
+          dataset_id: parseInt(datasetId, 10),
+          prompt_template: promptTemplate || null,
+          system_instruction: systemInstruction.trim() || null,
+          text_columns: columnMapping.textColumns,
+          attachments: columnMapping.attachments.map(
+            ({ column, type, format }) => ({ column, type, format }),
+          ),
+          output_schema: outputSchemaJson,
+          configs: configs.map(({ config_id, config_version }) => ({
+            config_id,
+            config_version,
+          })),
+        }),
+      });
+
+      toast.success("Assessment submitted!");
+      setConfigStep(1);
+      setCompletedConfigSteps(new Set());
+      setExperimentName("");
+      clearDataset();
+      setSystemInstruction("");
+      setPromptTemplate("");
+      setOutputSchema([]);
+      setConfigs([]);
+      setActiveTab("results");
+    } catch (error) {
+      if (handleForbiddenError(error, handleForbiddenWithNotify)) return;
+      toast.error(
+        `Failed to submit: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [
+    clearDataset,
+    columnMapping,
+    configs,
+    datasetId,
+    experimentName,
+    handleForbiddenWithNotify,
+    outputSchema,
+    outputSchemaJson,
+    promptTemplate,
+    activeKey,
+    systemInstruction,
+    toast,
+  ]);
+
+  const formState: AssessmentFormState = {
+    experimentName,
+    datasetId,
+    datasetName,
+    columns,
+    sampleRow,
+    columnMapping,
+    systemInstruction,
+    promptTemplate,
+    outputSchema,
+    configs,
+  };
+
+  const hasDataset = !!datasetId && columns.length > 0;
+  const hasMapperSelection = columnMapping.textColumns.length > 0;
+  const hasPromptTemplate = promptTemplate.trim().length > 0;
+  const hasConfiguredResponseFormat = outputSchema.some((field) =>
+    field.name.trim(),
+  );
+  const canReachReview =
+    hasPromptTemplate && configs.length > 0 && hasConfiguredResponseFormat;
+  const canSubmitAssessment =
+    !!datasetId &&
+    hasMapperSelection &&
+    hasPromptTemplate &&
+    hasConfiguredResponseFormat &&
+    configs.length > 0 &&
+    experimentName.trim().length > 0 &&
+    !isSubmitting;
+  const submitBlockerMessage = !datasetId
+    ? "Select a dataset to submit"
+    : !hasMapperSelection
+      ? "Map at least one text column to submit"
+      : !hasPromptTemplate
+        ? "Write a prompt to submit"
+        : !hasConfiguredResponseFormat
+          ? "Set response format to submit"
+          : configs.length === 0
+            ? "Select at least one configuration to submit"
+            : !experimentName.trim()
+              ? "Enter an experiment name to submit"
+              : "";
+  const effectiveCompletedConfigSteps = useMemo(() => {
+    const merged = new Set(completedConfigSteps);
+    if (hasMapperSelection) merged.add(1);
+    if (canReachReview) merged.add(2);
+    return merged;
+  }, [canReachReview, completedConfigSteps, hasMapperSelection]);
+
+  return (
+    <PageLayout
+      activeTab={activeTab}
+      tabs={[...PAGE_TABS]}
+      onTabSwitch={setActiveTab}
+      datasetsTabProps={{
+        onForbidden: handleForbiddenWithNotify,
+        datasetId,
+        setDatasetId,
+        setSelectedDatasetName: setDatasetName,
+        onColumnsLoaded: handleColumnsLoaded,
+        onNext: () => {
+          setActiveTab("config");
+          setConfigStep(1);
+        },
+      }}
+      configPanelProps={{
+        canSubmitAssessment,
+        columns,
+        columnMapping,
+        completedSteps: effectiveCompletedConfigSteps,
+        configStep,
+        configs,
+        experimentName,
+        formState,
+        hasDataset,
+        isSubmitting,
+        outputSchema,
+        systemInstruction,
+        promptTemplate,
+        sampleRow,
+        setActiveTabToDatasets: () => setActiveTab("datasets"),
+        setColumnMapping,
+        setConfigStep,
+        setConfigs,
+        setExperimentName,
+        setOutputSchema,
+        setSystemInstruction,
+        setPromptTemplate,
+        submitBlockerMessage,
+        onSubmit: handleSubmit,
+        onStepComplete: handleConfigNext,
+      }}
+      evaluationsTabProps={{
+        onForbidden: handleForbiddenWithNotify,
+      }}
+    />
+  );
+}
+
+export default function Page() {
+  return (
+    <Suspense fallback={<Loader size="lg" message="Loading..." fullScreen />}>
+      <PageContent />
+    </Suspense>
+  );
+}
diff --git a/app/(main)/configurations/page.tsx b/app/(main)/configurations/page.tsx
index a36ab484..5f143ed0 100644
--- a/app/(main)/configurations/page.tsx
+++ b/app/(main)/configurations/page.tsx
@@ -24,7 +24,7 @@ import {
   configState,
   pendingVersionLoads,
   pendingSingleVersionLoads,
-} from "@/app/lib/store/configStore";
+} from "@/app/lib/store/config";
 import { flattenConfigVersion } from "@/app/lib/utils";
 import {
   SearchIcon,
diff --git a/app/(main)/configurations/prompt-editor/page.tsx b/app/(main)/configurations/prompt-editor/page.tsx
index 19677150..c8aedcc7 100644
--- a/app/(main)/configurations/prompt-editor/page.tsx
+++ b/app/(main)/configurations/prompt-editor/page.tsx
@@ -27,7 +27,7 @@ import {
   ConfigVersionItems,
 } from "@/app/lib/types/configs";
 import { invalidateConfigCache } from "@/app/lib/utils";
-import { configState } from "@/app/lib/store/configStore";
+import { configState } from "@/app/lib/store/config";
 import { apiFetch } from "@/app/lib/apiClient";
 import { isGpt5Model } from "@/app/lib/models";
 import { DEFAULT_CONFIG } from "@/app/lib/constants";
diff --git a/app/(main)/datasets/page.tsx b/app/(main)/datasets/page.tsx
index 1234bc11..b86f5732 100644
--- a/app/(main)/datasets/page.tsx
+++ b/app/(main)/datasets/page.tsx
@@ -10,11 +10,11 @@ import { useState, useEffect } from "react";
 
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
+import { Dataset } from "@/app/lib/types/dataset";
 import { apiFetch } from "@/app/lib/apiClient";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import { useToast } from "@/app/components/Toast";
-import { Dataset } from "@/app/lib/types/dataset";
 
 export const DATASETS_STORAGE_KEY = "kaapi_datasets";
 
diff --git a/app/(main)/evaluations/[id]/page.tsx b/app/(main)/evaluations/[id]/page.tsx
index 517c9275..ddd05717 100644
--- a/app/(main)/evaluations/[id]/page.tsx
+++ b/app/(main)/evaluations/[id]/page.tsx
@@ -5,15 +5,15 @@
 
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { useRouter, useParams } from "next/navigation";
 import { apiFetch } from "@/app/lib/apiClient";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import type {
   EvalJob,
+  EvalJobApiResponse,
   AssistantConfig,
-  GroupedTraceItem,
 } from "@/app/lib/types/evaluation";
 import {
   hasSummaryScores,
@@ -22,21 +22,23 @@ import {
   normalizeToIndividualScores,
   isGroupedFormat,
 } from "@/app/lib/utils/evaluation";
+import {
+  exportGroupedCSV,
+  exportRowCSV,
+} from "@/app/lib/utils/evaluationExport";
 import ConfigModal from "@/app/components/ConfigModal";
 import Sidebar from "@/app/components/Sidebar";
 import DetailedResultsTable from "@/app/components/evaluations/DetailedResultsTable";
-import { colors } from "@/app/lib/colors";
+import MetricsOverview from "@/app/components/evaluations/MetricsOverview";
+import { Button, Modal, ResultsTableSkeleton } from "@/app/components";
 import { useToast } from "@/app/components/Toast";
 import Loader from "@/app/components/Loader";
 import {
-  WarningTriangleIcon,
   MenuIcon,
   ChevronLeftIcon,
   DatabaseIcon,
   GroupIcon,
-  RefreshIcon,
 } from "@/app/components/icons";
-import { sanitizeCSVCell } from "@/app/lib/utils";
 
 export default function EvaluationReport() {
   const router = useRouter();
@@ -49,7 +51,9 @@ export default function EvaluationReport() {
     AssistantConfig | undefined
   >(undefined);
   const [isLoading, setIsLoading] = useState(true);
+  const [isFormatSwitching, setIsFormatSwitching] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const hasLoadedRef = useRef(false);
   const { apiKeys, isAuthenticated } = useAuth();
   const apiKey = apiKeys[0]?.key ?? "";
   const { sidebarCollapsed, setSidebarCollapsed } = useApp();
@@ -61,12 +65,16 @@ export default function EvaluationReport() {
   const fetchJobDetails = useCallback(async () => {
     if (!isAuthenticated || !jobId) return;
 
-    setIsLoading(true);
-    setError(null);
+    const isFirstLoad = !hasLoadedRef.current;
+    if (isFirstLoad) {
+      setIsLoading(true);
+      setError(null);
+    } else {
+      setIsFormatSwitching(true);
+    }
 
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = await apiFetch<any>(
+      const data = await apiFetch<EvalJobApiResponse>(
         `/api/evaluations/${jobId}?export_format=${exportFormat}`,
         apiKey,
       );
@@ -77,10 +85,12 @@ export default function EvaluationReport() {
         return;
       }
 
-      const foundJob = data.data || data;
+      const foundJob: EvalJob | undefined =
+        data.data ?? (data as unknown as EvalJob);
       if (!foundJob) throw new Error("Evaluation job not found");
 
       setJob(foundJob);
+      hasLoadedRef.current = true;
 
       if (foundJob.assistant_id) {
         fetchAssistantConfig(foundJob.assistant_id);
@@ -89,11 +99,16 @@ export default function EvaluationReport() {
         fetchConfigInfo(foundJob.config_id, foundJob.config_version);
       }
     } catch (err: unknown) {
-      setError(
-        err instanceof Error ? err.message : "Failed to fetch evaluation job",
-      );
+      const message =
+        err instanceof Error ? err.message : "Failed to fetch evaluation job";
+      if (isFirstLoad) {
+        setError(message);
+      } else {
+        toast.error(message);
+      }
     } finally {
       setIsLoading(false);
+      setIsFormatSwitching(false);
     }
   }, [apiKey, isAuthenticated, jobId, exportFormat]);
 
@@ -128,118 +143,6 @@ export default function EvaluationReport() {
     if (isAuthenticated && jobId) fetchJobDetails();
   }, [isAuthenticated, jobId, fetchJobDetails]);
 
-  const exportGroupedCSV = (traces: GroupedTraceItem[]) => {
-    if (!job) return;
-    try {
-      const maxAnswers = Math.max(...traces.map((g) => g.llm_answers.length));
-      const scoreNames = traces[0]?.scores[0]?.map((s) => s.name) || [];
-      let csvContent = "Question ID,Question,Ground Truth";
-      for (let i = 1; i <= maxAnswers; i++) {
-        csvContent += `,LLM Answer ${i},Trace ID ${i}`;
-        scoreNames.forEach((name) => {
-          csvContent += `,${name} (${i}),${sanitizeCSVCell(`${name} (${i}) Comment`)}`;
-        });
-      }
-      csvContent += "\n";
-      traces.forEach((group) => {
-        const row: string[] = [
-          String(group.question_id),
-          sanitizeCSVCell(group.question || ""),
-          sanitizeCSVCell(group.ground_truth_answer || ""),
-        ];
-        for (let i = 0; i < maxAnswers; i++) {
-          row.push(
-            `"${(group.llm_answers[i] || "").replace(/"/g, '""').replace(/\n/g, " ")}"`,
-          );
-          row.push(group.trace_ids[i] || "");
-          scoreNames.forEach((name) => {
-            const score = group.scores[i]?.find((s) => s.name === name);
-            row.push(score ? String(score.value) : "");
-            row.push(
-              score?.comment ? sanitizeCSVCell(score.comment, true) : "",
-            );
-          });
-        }
-        csvContent += row.join(",") + "\n";
-      });
-      const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.setAttribute("href", url);
-      link.setAttribute(
-        "download",
-        `evaluation_${job.id}_${job.run_name.replace(/[^a-z0-9]/gi, "_")}_grouped.csv`,
-      );
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-      toast.success(`Grouped CSV exported with ${traces.length} questions`);
-    } catch (_error) {
-      toast.error("Failed to export grouped CSV");
-    }
-  };
-
-  // Export row format CSV
-  const exportRowCSV = () => {
-    if (!job || !scoreObject) return;
-    try {
-      const individual_scores = normalizeToIndividualScores(scoreObject);
-      if (!individual_scores || individual_scores.length === 0) {
-        toast.error("No valid data available to export");
-        return;
-      }
-      let csvContent = "";
-      const firstItem = individual_scores[0];
-      const scoreNames = firstItem?.trace_scores?.map((s) => s.name) || [];
-      csvContent +=
-        "Counter,Trace ID,Job ID,Run Name,Dataset,Model,Status,Total Items,";
-      csvContent += "Question,Answer,Ground Truth,";
-      csvContent +=
-        scoreNames.map((name) => `${name},${name} (comment)`).join(",") + "\n";
-      let rowCount = 0;
-      individual_scores.forEach((item, index) => {
-        const row = [
-          index + 1,
-          item.trace_id || "N/A",
-          job.id,
-          `"${job.run_name.replace(/"/g, '""')}"`,
-          `"${job.dataset_name.replace(/"/g, '""')}"`,
-          assistantConfig?.model || job.config?.model || "N/A",
-          job.status,
-          job.total_items,
-          `"${(item.input?.question || "").replace(/"/g, '""').replace(/\n/g, " ")}"`,
-          `"${(item.output?.answer || "").replace(/"/g, '""').replace(/\n/g, " ")}"`,
-          `"${(item.metadata?.ground_truth || "").replace(/"/g, '""').replace(/\n/g, " ")}"`,
-          ...scoreNames.flatMap((name) => {
-            const score = item.trace_scores?.find((s) => s.name === name);
-            return [
-              score ? score.value : "N/A",
-              score?.comment ? sanitizeCSVCell(score.comment, true) : "",
-            ];
-          }),
-        ].join(",");
-        csvContent += row + "\n";
-        rowCount++;
-      });
-      const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.setAttribute("href", url);
-      link.setAttribute(
-        "download",
-        `evaluation_${job.id}_${job.run_name.replace(/[^a-z0-9]/gi, "_")}.csv`,
-      );
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-      toast.success(`CSV exported successfully with ${rowCount} rows`);
-    } catch (_error) {
-      toast.error("Failed to export CSV");
-    }
-  };
-
   const handleExportCSV = () => {
     if (!job || !scoreObject) {
       toast.error("No valid data available to export");
@@ -256,14 +159,14 @@ export default function EvaluationReport() {
         return;
       }
       if (isGroupedFormat(traces)) {
-        exportGroupedCSV(traces);
+        const count = exportGroupedCSV(job, traces);
+        toast.success(`Grouped CSV exported with ${count} questions`);
       } else {
-        exportRowCSV();
+        const count = exportRowCSV(job, scoreObject, assistantConfig);
+        toast.success(`CSV exported successfully with ${count} rows`);
       }
-    } catch (_error) {
-      toast.error(
-        "Failed to export CSV. Please check the console for details.",
-      );
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : "Failed to export CSV");
     }
   };
 
@@ -272,12 +175,12 @@ export default function EvaluationReport() {
 
     setIsResyncing(true);
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = await apiFetch<any>(
+      const data = await apiFetch<EvalJobApiResponse>(
         `/api/evaluations/${jobId}?get_trace_info=true&resync_score=true&export_format=${exportFormat}`,
         apiKey,
       );
-      const foundJob = data.data || data;
+      const foundJob: EvalJob | undefined =
+        data.data ?? (data as unknown as EvalJob);
       if (!foundJob) throw new Error("Evaluation job not found");
 
       const newScoreObject = getScoreObject(foundJob);
@@ -301,12 +204,9 @@ export default function EvaluationReport() {
     }
   };
 
-  if (isLoading) {
+  if (isLoading && !job) {
     return (
-      <div
-        className="w-full h-screen flex flex-col"
-        style={{ backgroundColor: colors.bg.secondary }}
-      >
+      <div className="w-full h-screen flex flex-col bg-bg-secondary">
         <div className="flex flex-1 overflow-hidden">
           <Sidebar collapsed={sidebarCollapsed} activeRoute="/evaluations" />
           <div className="flex-1 flex items-center justify-center">
@@ -317,32 +217,23 @@ export default function EvaluationReport() {
     );
   }
 
-  if (error || !job) {
+  if ((error && !job) || !job) {
     return (
-      <div
-        className="w-full h-screen flex flex-col"
-        style={{ backgroundColor: colors.bg.secondary }}
-      >
+      <div className="w-full h-screen flex flex-col bg-bg-secondary">
         <div className="flex flex-1 overflow-hidden">
           <Sidebar collapsed={sidebarCollapsed} activeRoute="/evaluations" />
           <div className="flex-1 flex items-center justify-center">
             <div className="text-center">
-              <p
-                className="text-sm mb-4"
-                style={{ color: colors.status.error }}
-              >
+              <p className="text-sm mb-4 text-status-error">
                 {error || "Evaluation job not found"}
               </p>
-              <button
+              <Button
+                variant="primary"
+                size="md"
                 onClick={() => router.push("/evaluations?tab=evaluations")}
-                className="px-4 py-2 rounded-lg text-sm font-medium"
-                style={{
-                  backgroundColor: colors.accent.primary,
-                  color: "#ffffff",
-                }}
               >
                 Back to Evaluations
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -360,68 +251,52 @@ export default function EvaluationReport() {
     job.status.toLowerCase() !== "completed" &&
     job.status.toLowerCase() !== "failed";
 
+  const segmentedClass =
+    "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all cursor-pointer border border-transparent text-text-primary hover:bg-black/4 hover:shadow-[0_0_0_1px_rgba(0,0,0,0.06)] data-[selected=true]:bg-bg-primary data-[selected=true]:border-border data-[selected=true]:shadow-[0_1px_2px_rgba(0,0,0,0.08)] data-[selected=true]:hover:bg-bg-primary data-[selected=true]:hover:shadow-[0_1px_2px_rgba(0,0,0,0.08)]";
+
   return (
-    <div
-      className="w-full h-screen flex flex-col"
-      style={{ backgroundColor: colors.bg.secondary }}
-    >
+    <div className="w-full h-screen flex flex-col bg-bg-secondary">
       <div className="flex flex-1 overflow-hidden">
         <Sidebar collapsed={sidebarCollapsed} activeRoute="/evaluations" />
 
         <div className="flex-1 flex flex-col overflow-hidden">
-          {/* Header */}
-          <div
-            className="border-b px-4 py-3 flex items-center justify-between flex-shrink-0"
-            style={{
-              backgroundColor: colors.bg.primary,
-              borderColor: colors.border,
-            }}
-          >
+          <div className="border-b px-4 py-3.5 flex items-center justify-between shrink-0 bg-bg-primary border-border">
             <div className="flex items-center gap-3 flex-1 min-w-0">
-              <button
-                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-                className="p-1.5 rounded-md flex-shrink-0"
-                style={{ color: colors.text.secondary }}
-              >
-                <MenuIcon className="w-5 h-5" />
-              </button>
+              {sidebarCollapsed && (
+                <button
+                  onClick={() => setSidebarCollapsed(false)}
+                  className="p-1.5 rounded-md shrink-0 text-text-secondary hover:bg-neutral-100 transition-colors cursor-pointer"
+                  aria-label="Open sidebar"
+                >
+                  <MenuIcon className="w-5 h-5" />
+                </button>
+              )}
               <button
                 onClick={() => router.push("/evaluations?tab=evaluations")}
-                className="p-1.5 rounded-md flex-shrink-0"
-                style={{ color: colors.text.secondary }}
+                className="p-1.5 rounded-md shrink-0 text-text-secondary hover:bg-neutral-100 transition-colors cursor-pointer"
+                aria-label="Back to evaluations"
               >
                 <ChevronLeftIcon />
               </button>
               <div className="min-w-0 flex-1 flex items-center gap-3 overflow-hidden">
-                <h1
-                  className="text-base font-semibold truncate min-w-0"
-                  style={{
-                    color: colors.text.primary,
-                    letterSpacing: "-0.01em",
-                  }}
-                >
+                <h1 className="text-base font-semibold truncate min-w-0 text-text-primary tracking-[-0.01em]">
                   {job.run_name}
                 </h1>
-                <span
-                  className="flex items-center gap-1 text-xs flex-shrink-0"
-                  style={{ color: colors.text.secondary }}
-                >
-                  <DatabaseIcon className="flex-shrink-0" />
+                <span className="flex items-center gap-1 text-xs shrink-0 text-text-secondary">
+                  <DatabaseIcon className="shrink-0" />
                   {job.dataset_name}
                 </span>
               </div>
             </div>
 
-            <div className="flex items-center gap-3 flex-shrink-0 relative z-10">
-              <div
-                className="inline-flex rounded-lg p-0.5"
-                style={{ backgroundColor: colors.bg.secondary }}
-              >
+            <div className="flex items-center gap-3 shrink-0 relative z-10">
+              <div className="inline-flex rounded-lg p-0.5 bg-bg-secondary">
                 <button
                   type="button"
                   onClick={() => setExportFormat("row")}
+                  disabled={isFormatSwitching || isResyncing}
                   data-selected={exportFormat === "row"}
-                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all cursor-pointer border border-transparent text-text-primary hover:bg-black/4 hover:shadow-[0_0_0_1px_rgba(0,0,0,0.06)] data-[selected=true]:bg-bg-primary data-[selected=true]:border-border data-[selected=true]:shadow-[0_1px_2px_rgba(0,0,0,0.08)] data-[selected=true]:hover:bg-bg-primary data-[selected=true]:hover:shadow-[0_1px_2px_rgba(0,0,0,0.08)]"
+                  className={`${segmentedClass} disabled:cursor-not-allowed disabled:opacity-60`}
                 >
                   <MenuIcon className="w-3.5 h-3.5 pointer-events-none" />
                   Individual Rows
@@ -429,221 +304,70 @@ export default function EvaluationReport() {
                 <button
                   type="button"
                   onClick={() => setExportFormat("grouped")}
+                  disabled={isFormatSwitching || isResyncing}
                   data-selected={exportFormat === "grouped"}
-                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all cursor-pointer border border-transparent text-text-primary hover:bg-black/4 hover:shadow-[0_0_0_1px_rgba(0,0,0,0.06)] data-[selected=true]:bg-bg-primary data-[selected=true]:border-border data-[selected=true]:shadow-[0_1px_2px_rgba(0,0,0,0.08)] data-[selected=true]:hover:bg-bg-primary data-[selected=true]:hover:shadow-[0_1px_2px_rgba(0,0,0,0.08)]"
+                  className={`${segmentedClass} disabled:cursor-not-allowed disabled:opacity-60`}
                 >
                   <GroupIcon className="pointer-events-none" />
                   Group by Questions
                 </button>
               </div>
-              <button
+              <Button
+                variant="outline"
+                size="sm"
                 onClick={() => setIsConfigModalOpen(true)}
-                className="px-3 py-1.5 rounded-md text-xs font-medium border bg-transparent border-border text-text-primary"
               >
                 View Config
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="primary"
+                size="sm"
                 onClick={handleExportCSV}
-                disabled={!hasScore}
-                className="px-3 py-1.5 rounded-md text-xs font-medium"
-                style={{
-                  backgroundColor: hasScore
-                    ? colors.accent.primary
-                    : colors.bg.secondary,
-                  color: hasScore ? "#fff" : colors.text.secondary,
-                  cursor: hasScore ? "pointer" : "not-allowed",
-                }}
+                disabled={!hasScore || isFormatSwitching || isResyncing}
               >
                 Export CSV
-              </button>
+              </Button>
             </div>
           </div>
 
-          <div
-            className="flex-1 overflow-auto p-6"
-            style={{ backgroundColor: colors.bg.secondary }}
-          >
+          <div className="flex-1 overflow-auto p-6 bg-bg-secondary">
             <div className="max-w-7xl mx-auto space-y-6">
               {hasScore && isNewFormat ? (
-                <div>
-                  {summaryScores.some(
-                    (s) => job.total_items && s.total_pairs < job.total_items,
-                  ) &&
-                    isJobInProgress && (
-                      <div className="flex items-center gap-2 px-3 py-2 rounded-lg mb-3 text-xs bg-amber-500/10 border border-amber-500/30 text-status-warning">
-                        <WarningTriangleIcon className="shrink-0" />
-                        Some traces are still being scored. Scores shown are
-                        partial and may change - click{" "}
-                        <strong className="font-semibold">Resync</strong> to get
-                        the latest.
-                      </div>
-                    )}
-                  <div className="flex items-center justify-between mb-3">
-                    <h3
-                      className="text-sm font-semibold"
-                      style={{ color: colors.text.secondary }}
-                    >
-                      Metrics Overview
-                    </h3>
-                    <button
-                      onClick={handleResync}
-                      disabled={isResyncing}
-                      className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium bg-[#171717] text-white disabled:opacity-50"
-                    >
-                      <RefreshIcon
-                        className={isResyncing ? "animate-spin" : ""}
-                      />
-                      {isResyncing ? "Resyncing..." : "Resync"}
-                    </button>
-                  </div>
-                  {summaryScores.length > 0 ? (
-                    <div className="flex gap-4 flex-wrap">
-                      {summaryScores
-                        .filter((s) => s.data_type === "NUMERIC")
-                        .map((summary) => (
-                          <div
-                            key={summary.name}
-                            className="rounded-lg px-6 py-5 text-center flex-1 min-w-[180px] relative"
-                            style={{
-                              backgroundColor: colors.bg.primary,
-                              boxShadow: "0 1px 3px rgba(0, 0, 0, 0.06)",
-                            }}
-                          >
-                            <div
-                              className="text-xs font-medium mb-2"
-                              style={{ color: colors.text.secondary }}
-                            >
-                              {summary.name}
-                            </div>
-                            <div
-                              className="text-2xl font-bold"
-                              style={{ color: colors.text.primary }}
-                            >
-                              {summary.avg !== undefined
-                                ? summary.avg.toFixed(3)
-                                : "N/A"}
-                            </div>
-                            <div
-                              className="text-xs mt-1"
-                              style={{ color: colors.text.secondary }}
-                            >
-                              {summary.std !== undefined &&
-                                `±${summary.std.toFixed(3)} · `}
-                              <span>
-                                {summary.total_pairs}
-                                {job.total_items &&
-                                  summary.total_pairs < job.total_items &&
-                                  `/${job.total_items}`}{" "}
-                                pairs
-                              </span>
-                            </div>
-                          </div>
-                        ))}
-                      {summaryScores
-                        .filter((s) => s.data_type === "CATEGORICAL")
-                        .map((summary) => (
-                          <div
-                            key={summary.name}
-                            className="rounded-lg px-6 py-5 flex-1 min-w-[180px] relative bg-bg-primary"
-                            style={{
-                              boxShadow: "0 1px 3px rgba(0, 0, 0, 0.06)",
-                            }}
-                          >
-                            <div className="text-xs font-medium mb-3 text-center text-text-secondary">
-                              {summary.name}
-                            </div>
-                            <div className="space-y-1">
-                              {summary.distribution &&
-                                Object.entries(summary.distribution).map(
-                                  ([key, value]) => (
-                                    <div
-                                      key={key}
-                                      className="flex justify-between items-center px-3 py-1 rounded bg-bg-secondary"
-                                    >
-                                      <span className="text-xs font-medium text-text-primary">
-                                        {key}
-                                      </span>
-                                      <span
-                                        className="text-xs font-bold"
-                                        style={{ color: colors.text.primary }}
-                                      >
-                                        {value}
-                                      </span>
-                                    </div>
-                                  ),
-                                )}
-                            </div>
-                            <div className="text-xs mt-2 text-center text-text-secondary">
-                              <span>
-                                {summary.total_pairs}
-                                {job.total_items &&
-                                  summary.total_pairs < job.total_items &&
-                                  `/${job.total_items}`}{" "}
-                                pairs
-                              </span>
-                            </div>
-                          </div>
-                        ))}
-                    </div>
-                  ) : (
-                    <div
-                      className="rounded-lg p-8 text-center"
-                      style={{
-                        backgroundColor: colors.bg.primary,
-                        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.06)",
-                      }}
-                    >
-                      <p
-                        className="text-sm"
-                        style={{ color: colors.text.secondary }}
-                      >
-                        No summary scores available
-                      </p>
-                    </div>
-                  )}
-                </div>
+                <MetricsOverview
+                  job={job}
+                  summaryScores={summaryScores}
+                  isJobInProgress={isJobInProgress}
+                  isResyncing={isResyncing || isFormatSwitching}
+                  onResync={handleResync}
+                />
               ) : (
-                <div
-                  className="rounded-lg p-6 text-center"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.06)",
-                  }}
-                >
+                <div className="rounded-lg p-6 text-center bg-bg-primary shadow-sm">
                   <p
-                    className="text-sm"
-                    style={{
-                      color: job.error_message
-                        ? "hsl(8, 86%, 40%)"
-                        : colors.text.secondary,
-                    }}
+                    className={`text-sm ${job.error_message ? "text-status-error-text" : "text-text-secondary"}`}
                   >
                     {job.error_message || "No results available yet"}
                   </p>
                 </div>
               )}
 
-              {/* Detailed Results */}
               {hasScore && (
                 <div>
                   <div className="flex items-center gap-2 mb-3">
-                    <h3
-                      className="text-sm font-semibold"
-                      style={{ color: colors.text.secondary }}
-                    >
+                    <h3 className="text-sm font-semibold text-text-secondary">
                       Detailed Results
                     </h3>
-                    {isNewFormat && (
-                      <span
-                        className="text-xs"
-                        style={{ color: colors.text.secondary }}
-                      >
+                    {isNewFormat && !isFormatSwitching && (
+                      <span className="text-xs text-text-secondary">
                         ({normalizeToIndividualScores(scoreObject).length}{" "}
                         items)
                       </span>
                     )}
                   </div>
-                  <DetailedResultsTable job={job} />
+                  {isFormatSwitching ? (
+                    <ResultsTableSkeleton rows={6} cols={4} />
+                  ) : (
+                    <DetailedResultsTable job={job} />
+                  )}
                 </div>
               )}
             </div>
@@ -651,7 +375,6 @@ export default function EvaluationReport() {
         </div>
       </div>
 
-      {/* Config Modal */}
       <ConfigModal
         isOpen={isConfigModalOpen}
         onClose={() => setIsConfigModalOpen(false)}
@@ -659,44 +382,28 @@ export default function EvaluationReport() {
         assistantConfig={assistantConfig}
       />
 
-      {/* No Traces Modal */}
-      {showNoTracesModal && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center"
-          style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
-          onClick={() => setShowNoTracesModal(false)}
-        >
-          <div
-            className="rounded-lg shadow-lg p-6 max-w-md mx-4"
-            style={{ backgroundColor: colors.bg.primary }}
-            onClick={(e) => e.stopPropagation()}
+      <Modal
+        open={showNoTracesModal}
+        onClose={() => setShowNoTracesModal(false)}
+        title="No Langfuse Traces Available"
+        maxWidth="max-w-md"
+        maxHeight="max-h-fit"
+      >
+        <div className="px-6 py-5">
+          <p className="text-sm text-text-secondary">
+            This evaluation does not have Langfuse traces.
+          </p>
+        </div>
+        <div className="flex justify-end gap-3 px-6 py-4 border-t border-border">
+          <Button
+            variant="primary"
+            size="md"
+            onClick={() => setShowNoTracesModal(false)}
           >
-            <h3
-              className="text-sm font-semibold mb-2"
-              style={{ color: colors.text.primary }}
-            >
-              No Langfuse Traces Available
-            </h3>
-            <p
-              className="text-xs mb-4"
-              style={{ color: colors.text.secondary }}
-            >
-              This evaluation does not have Langfuse traces.
-            </p>
-            <div className="flex justify-end">
-              <button
-                onClick={() => setShowNoTracesModal(false)}
-                className="px-4 py-2 rounded-md text-sm font-medium text-white"
-                style={{
-                  backgroundColor: colors.accent.primary,
-                }}
-              >
-                OK
-              </button>
-            </div>
-          </div>
+            OK
+          </Button>
         </div>
-      )}
+      </Modal>
     </div>
   );
 }
diff --git a/app/(main)/evaluations/page.tsx b/app/(main)/evaluations/page.tsx
index 13ca97c2..450eeff1 100644
--- a/app/(main)/evaluations/page.tsx
+++ b/app/(main)/evaluations/page.tsx
@@ -22,8 +22,7 @@ import { FeatureGateModal, LoginModal } from "@/app/components/auth";
 import Loader from "@/app/components/Loader";
 import DatasetsTab from "@/app/components/evaluations/DatasetsTab";
 import EvaluationsTab from "@/app/components/evaluations/EvaluationsTab";
-
-type Tab = "datasets" | "evaluations";
+import { Tab } from "@/app/lib/types/evaluation";
 
 const leftPanelWidth = 450;
 
@@ -43,14 +42,13 @@ function SimplifiedEvalContent() {
   const apiKey = activeKey?.key ?? "";
   const [showLoginModal, setShowLoginModal] = useState(false);
   const [mounted, setMounted] = useState(false);
-  // Dataset creation state
   const [datasetName, setDatasetName] = useState("");
   const [datasetDescription, setDatasetDescription] = useState("");
   const [duplicationFactor, setDuplicationFactor] = useState("1");
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
   const [isUploading, setIsUploading] = useState(false);
   const [storedDatasets, setStoredDatasets] = useState<Dataset[]>([]);
-  const [isDatasetsLoading, setIsDatasetsLoading] = useState(false);
+  const [isDatasetsLoading, setIsDatasetsLoading] = useState(true);
   const [selectedDatasetId, setSelectedDatasetId] = useState<string>(() => {
     return searchParams.get("dataset") || "";
   });
@@ -90,6 +88,7 @@ function SimplifiedEvalContent() {
 
   useEffect(() => {
     if (isAuthenticated) loadStoredDatasets();
+    else setIsDatasetsLoading(false);
   }, [isAuthenticated, loadStoredDatasets]);
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -260,7 +259,6 @@ function SimplifiedEvalContent() {
             subtitle="Compare model response quality on your datasets across different configs"
           />
 
-          {/* Tab Navigation */}
           <TabNavigation
             tabs={[
               { id: "datasets", label: "Datasets" },
@@ -270,7 +268,6 @@ function SimplifiedEvalContent() {
             onTabChange={(tabId) => setActiveTab(tabId as Tab)}
           />
 
-          {/* Tab Content */}
           {!mounted || !isAuthenticated ? (
             <>
               <FeatureGateModal
diff --git a/app/(main)/keystore/page.tsx b/app/(main)/keystore/page.tsx
index fcd20e93..c66a8ba1 100644
--- a/app/(main)/keystore/page.tsx
+++ b/app/(main)/keystore/page.tsx
@@ -13,8 +13,6 @@ import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import { APIKey } from "@/app/lib/types/credentials";
 
-export const STORAGE_KEY = "kaapi_api_keys";
-
 export default function KaapiKeystore() {
   const { sidebarCollapsed } = useApp();
   const [isModalOpen, setIsModalOpen] = useState(false);
diff --git a/app/(main)/speech-to-text/page.tsx b/app/(main)/speech-to-text/page.tsx
index de695549..bb2a50d1 100644
--- a/app/(main)/speech-to-text/page.tsx
+++ b/app/(main)/speech-to-text/page.tsx
@@ -20,7 +20,6 @@ import ErrorModal from "@/app/components/ErrorModal";
 import DatasetsTab from "@/app/components/speech-to-text/DatasetsTab";
 import EvaluationsTab from "@/app/components/speech-to-text/EvaluationsTab";
 import {
-  Tab,
   AudioFile,
   Dataset,
   STTRun,
@@ -36,6 +35,7 @@ import {
   CreateDatasetResponse,
   CreateRunResponse,
 } from "@/app/lib/types/speechToText";
+import { Tab } from "@/app/lib/types/evaluation";
 
 export default function SpeechToTextPage() {
   const toast = useToast();
@@ -52,7 +52,7 @@ export default function SpeechToTextPage() {
   const [playingFileId, setPlayingFileId] = useState<string | null>(null);
   const [isCreating, setIsCreating] = useState(false);
   const [datasets, setDatasets] = useState<Dataset[]>([]);
-  const [isLoadingDatasets, setIsLoadingDatasets] = useState(false);
+  const [isLoadingDatasets, setIsLoadingDatasets] = useState(true);
   const [evaluationName, setEvaluationName] = useState("");
   const [selectedDatasetId, setSelectedDatasetId] = useState<number | null>(
     null,
@@ -60,7 +60,7 @@ export default function SpeechToTextPage() {
   const [selectedModel, setSelectedModel] = useState("gemini-2.5-pro");
   const [isRunning, setIsRunning] = useState(false);
   const [runs, setRuns] = useState<STTRun[]>([]);
-  const [isLoadingRuns, setIsLoadingRuns] = useState(false);
+  const [isLoadingRuns, setIsLoadingRuns] = useState(true);
   const [selectedRunId, setSelectedRunId] = useState<number | null>(null);
   const [results, setResults] = useState<STTResult[]>([]);
   const [isLoadingResults, setIsLoadingResults] = useState(false);
diff --git a/app/(main)/text-to-speech/page.tsx b/app/(main)/text-to-speech/page.tsx
index bfdb9f68..d3645b8b 100644
--- a/app/(main)/text-to-speech/page.tsx
+++ b/app/(main)/text-to-speech/page.tsx
@@ -53,7 +53,7 @@ export default function TextToSpeechPage() {
   const [textSamples, setTextSamples] = useState<TextSample[]>([]);
   const [isCreating, setIsCreating] = useState(false);
   const [datasets, setDatasets] = useState<TTSDataset[]>([]);
-  const [isLoadingDatasets, setIsLoadingDatasets] = useState(false);
+  const [isLoadingDatasets, setIsLoadingDatasets] = useState(true);
   const [evaluationName, setEvaluationName] = useState("");
   const [selectedDatasetId, setSelectedDatasetId] = useState<number | null>(
     null,
@@ -63,7 +63,7 @@ export default function TextToSpeechPage() {
   );
   const [isRunning, setIsRunning] = useState(false);
   const [runs, setRuns] = useState<TTSRun[]>([]);
-  const [isLoadingRuns, setIsLoadingRuns] = useState(false);
+  const [isLoadingRuns, setIsLoadingRuns] = useState(true);
   const [selectedRunId, setSelectedRunId] = useState<number | null>(null);
   const [results, setResults] = useState<TTSResult[]>([]);
   const [isLoadingResults, setIsLoadingResults] = useState(false);
diff --git a/app/api/_routeProxy.ts b/app/api/_routeProxy.ts
new file mode 100644
index 00000000..f9ca0d63
--- /dev/null
+++ b/app/api/_routeProxy.ts
@@ -0,0 +1,93 @@
+import "server-only";
+
+import { NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+const DOWNLOAD_CONTENT_TYPE_HINTS = [
+  "text/csv",
+  "spreadsheetml",
+  "octet-stream",
+  "application/zip",
+];
+
+function isDownloadContentType(contentType: string): boolean {
+  return DOWNLOAD_CONTENT_TYPE_HINTS.some((hint) => contentType.includes(hint));
+}
+
+async function safeParseJson(
+  response: Response,
+): Promise<Record<string, unknown> | unknown[] | null> {
+  const text = response.status === 204 ? "" : await response.text();
+  if (!text) return null;
+
+  try {
+    return JSON.parse(text) as Record<string, unknown> | unknown[];
+  } catch {
+    return null;
+  }
+}
+
+async function toDownloadResponse(
+  response: Response,
+): Promise<NextResponse | null> {
+  const contentType = response.headers.get("content-type") || "";
+  if (!isDownloadContentType(contentType)) {
+    return null;
+  }
+
+  const blob = await response.blob();
+  const headers = new Headers();
+  headers.set("Content-Type", contentType);
+
+  const disposition = response.headers.get("content-disposition");
+  if (disposition) {
+    headers.set("Content-Disposition", disposition);
+  }
+
+  return new NextResponse(blob, { status: response.status, headers });
+}
+
+export function withQueryParams(
+  endpoint: string,
+  queryParams: URLSearchParams,
+): string {
+  const query = queryParams.toString();
+  return query ? `${endpoint}?${query}` : endpoint;
+}
+
+export async function proxyJsonResponse(
+  request: Request,
+  endpoint: string,
+  init: RequestInit = {},
+): Promise<NextResponse> {
+  const { status, data } = await apiClient(request, endpoint, init);
+  return NextResponse.json(data, { status });
+}
+
+export async function proxyDownloadOrJsonResponse(
+  request: Request,
+  endpoint: string,
+  init: RequestInit = {},
+): Promise<NextResponse> {
+  const response = await apiClient(request, endpoint, {
+    ...init,
+    responseType: "raw",
+  });
+
+  const downloadResponse = await toDownloadResponse(response);
+  if (downloadResponse) {
+    return downloadResponse;
+  }
+
+  const data = await safeParseJson(response);
+  return NextResponse.json(data, { status: response.status });
+}
+
+export function proxyErrorResponse(
+  logLabel: string,
+  error: unknown,
+  message = "Failed to forward request to backend",
+): NextResponse {
+  console.error(logLabel, error);
+  return NextResponse.json({ error: message }, { status: 500 });
+}
diff --git a/app/api/assessment/assessments/[assessment_id]/results/route.ts b/app/api/assessment/assessments/[assessment_id]/results/route.ts
new file mode 100644
index 00000000..5e8c6b3d
--- /dev/null
+++ b/app/api/assessment/assessments/[assessment_id]/results/route.ts
@@ -0,0 +1,32 @@
+// BFF proxy — GET /api/v1/assessment/assessments/:id/results (JSON or file download)
+import { NextRequest } from "next/server";
+import {
+  proxyDownloadOrJsonResponse,
+  proxyErrorResponse,
+  withQueryParams,
+} from "@/app/api/_routeProxy";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ assessment_id: string }> },
+) {
+  try {
+    const { assessment_id } = await params;
+    const queryParams = new URLSearchParams(request.nextUrl.searchParams);
+    queryParams.set("get_trace_info", "true");
+    return await proxyDownloadOrJsonResponse(
+      request,
+      withQueryParams(
+        `/api/v1/assessment/assessments/${assessment_id}/results`,
+        queryParams,
+      ),
+      { method: "GET" },
+    );
+  } catch (error: unknown) {
+    return proxyErrorResponse(
+      "Assessment results proxy error:",
+      error,
+      "Failed to forward request",
+    );
+  }
+}
diff --git a/app/api/assessment/assessments/[assessment_id]/retry/route.ts b/app/api/assessment/assessments/[assessment_id]/retry/route.ts
new file mode 100644
index 00000000..522aa6ec
--- /dev/null
+++ b/app/api/assessment/assessments/[assessment_id]/retry/route.ts
@@ -0,0 +1,28 @@
+// BFF proxy — POST /api/v1/assessment/assessments/:id/retry
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+import type { RouteContext } from "@/app/lib/types/assessment";
+
+export async function POST(
+  request: NextRequest,
+  context: RouteContext<"assessment_id">,
+) {
+  try {
+    const { assessment_id } = await context.params;
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/assessment/assessments/${assessment_id}/retry`,
+      { method: "POST" },
+    );
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment retry proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward assessment retry request",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/assessments/route.ts b/app/api/assessment/assessments/route.ts
new file mode 100644
index 00000000..0cf133fd
--- /dev/null
+++ b/app/api/assessment/assessments/route.ts
@@ -0,0 +1,23 @@
+// BFF proxy — GET /api/v1/assessment/assessments
+import { NextRequest } from "next/server";
+import {
+  proxyErrorResponse,
+  proxyJsonResponse,
+  withQueryParams,
+} from "@/app/api/_routeProxy";
+
+export async function GET(request: NextRequest) {
+  try {
+    const queryParams = new URLSearchParams(request.nextUrl.searchParams);
+    queryParams.set("get_trace_info", "true");
+    return await proxyJsonResponse(
+      request,
+      withQueryParams("/api/v1/assessment/assessments", queryParams),
+      {
+        method: "GET",
+      },
+    );
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment list proxy error:", error);
+  }
+}
diff --git a/app/api/assessment/datasets/[dataset_id]/route.ts b/app/api/assessment/datasets/[dataset_id]/route.ts
new file mode 100644
index 00000000..7296408f
--- /dev/null
+++ b/app/api/assessment/datasets/[dataset_id]/route.ts
@@ -0,0 +1,142 @@
+// BFF proxy — GET (with optional S3 file fetch, max 10 MB) + DELETE /api/v1/assessment/datasets/:id
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+import { proxyErrorResponse, withQueryParams } from "@/app/api/_routeProxy";
+
+const MAX_DATASET_PROXY_BYTES = 10 * 1024 * 1024;
+
+async function readFileAsBase64WithLimit(response: Response): Promise<string> {
+  const contentLength = response.headers.get("content-length");
+  if (contentLength) {
+    const size = Number.parseInt(contentLength, 10);
+    if (Number.isFinite(size) && size > MAX_DATASET_PROXY_BYTES) {
+      throw new Error("FILE_TOO_LARGE");
+    }
+  }
+
+  const reader = response.body?.getReader();
+  if (!reader) {
+    throw new Error("FILE_STREAM_UNAVAILABLE");
+  }
+
+  const chunks: Uint8Array[] = [];
+  let totalBytes = 0;
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    if (!value) continue;
+
+    totalBytes += value.byteLength;
+    if (totalBytes > MAX_DATASET_PROXY_BYTES) {
+      throw new Error("FILE_TOO_LARGE");
+    }
+    chunks.push(value);
+  }
+
+  return Buffer.concat(chunks).toString("base64");
+}
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ dataset_id: string }> },
+) {
+  try {
+    const { dataset_id } = await params;
+    const fetchContent =
+      request.nextUrl.searchParams.get("fetch_content") === "true";
+
+    // Always request signed URL when fetch_content is needed
+    const backendParams = new URLSearchParams();
+    if (fetchContent) {
+      backendParams.set("fetch_content", "true");
+    }
+    if (fetchContent) {
+      backendParams.set("include_signed_url", "true");
+    }
+    const endpoint = withQueryParams(
+      `/api/v1/assessment/datasets/${dataset_id}`,
+      backendParams,
+    );
+
+    const { status, data } = await apiClient(request, endpoint, {
+      method: "GET",
+    });
+
+    if (status >= 400) {
+      return NextResponse.json(data, { status });
+    }
+
+    // Download file from S3 server-side and return as base64
+    if (fetchContent) {
+      const signedUrl =
+        (data as { data?: { signed_url?: string }; signed_url?: string })?.data
+          ?.signed_url ||
+        (data as { data?: { signed_url?: string }; signed_url?: string })
+          ?.signed_url;
+
+      if (!signedUrl) {
+        return NextResponse.json(
+          { error: "No signed URL available" },
+          { status: 404 },
+        );
+      }
+
+      const fileResponse = await fetch(signedUrl);
+      if (!fileResponse.ok) {
+        return NextResponse.json(
+          { error: "Failed to fetch file from storage" },
+          { status: 502 },
+        );
+      }
+
+      let base64: string;
+      try {
+        base64 = await readFileAsBase64WithLimit(fileResponse);
+      } catch (error) {
+        if (error instanceof Error && error.message === "FILE_TOO_LARGE") {
+          return NextResponse.json(
+            { error: "File too large" },
+            { status: 413 },
+          );
+        }
+
+        return NextResponse.json(
+          { error: "Failed to read file from storage" },
+          { status: 502 },
+        );
+      }
+
+      return NextResponse.json(
+        { ...(data as Record<string, unknown>), file_content: base64 },
+        { status: 200 },
+      );
+    }
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment dataset details proxy error:", error);
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ dataset_id: string }> },
+) {
+  try {
+    const { dataset_id } = await params;
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/assessment/datasets/${dataset_id}`,
+      { method: "DELETE" },
+    );
+
+    if (status === 204) {
+      return new NextResponse(null, { status });
+    }
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment dataset delete proxy error:", error);
+  }
+}
diff --git a/app/api/assessment/datasets/route.ts b/app/api/assessment/datasets/route.ts
new file mode 100644
index 00000000..a4fad6ca
--- /dev/null
+++ b/app/api/assessment/datasets/route.ts
@@ -0,0 +1,25 @@
+// BFF proxy — GET + POST /api/v1/assessment/datasets
+import { NextRequest } from "next/server";
+import { proxyErrorResponse, proxyJsonResponse } from "@/app/api/_routeProxy";
+
+export async function GET(request: NextRequest) {
+  try {
+    return await proxyJsonResponse(request, "/api/v1/assessment/datasets", {
+      method: "GET",
+    });
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment datasets list proxy error:", error);
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData();
+    return await proxyJsonResponse(request, "/api/v1/assessment/datasets", {
+      method: "POST",
+      body: formData,
+    });
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment datasets create proxy error:", error);
+  }
+}
diff --git a/app/api/assessment/runs/[run_id]/results/route.ts b/app/api/assessment/runs/[run_id]/results/route.ts
new file mode 100644
index 00000000..f197b780
--- /dev/null
+++ b/app/api/assessment/runs/[run_id]/results/route.ts
@@ -0,0 +1,31 @@
+// BFF proxy — GET /api/v1/assessment/runs/:id/results (JSON or file download)
+import { NextRequest } from "next/server";
+import {
+  proxyDownloadOrJsonResponse,
+  proxyErrorResponse,
+  withQueryParams,
+} from "@/app/api/_routeProxy";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ run_id: string }> },
+) {
+  try {
+    const { run_id } = await params;
+    const queryParams = new URLSearchParams(request.nextUrl.searchParams);
+    queryParams.set("get_trace_info", "true");
+    const endpoint = withQueryParams(
+      `/api/v1/assessment/runs/${run_id}/results`,
+      queryParams,
+    );
+    return await proxyDownloadOrJsonResponse(request, endpoint, {
+      method: "GET",
+    });
+  } catch (error: unknown) {
+    return proxyErrorResponse(
+      "Assessment run results proxy error:",
+      error,
+      "Failed to forward request",
+    );
+  }
+}
diff --git a/app/api/assessment/runs/[run_id]/retry/route.ts b/app/api/assessment/runs/[run_id]/retry/route.ts
new file mode 100644
index 00000000..c8cd55ba
--- /dev/null
+++ b/app/api/assessment/runs/[run_id]/retry/route.ts
@@ -0,0 +1,28 @@
+// BFF proxy — POST /api/v1/assessment/runs/:id/retry
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+import type { RouteContext } from "@/app/lib/types/assessment";
+
+export async function POST(
+  request: NextRequest,
+  context: RouteContext<"run_id">,
+) {
+  try {
+    const { run_id } = await context.params;
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/assessment/runs/${run_id}/retry`,
+      { method: "POST" },
+    );
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment run retry proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward assessment run retry request",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/runs/[run_id]/route.ts b/app/api/assessment/runs/[run_id]/route.ts
new file mode 100644
index 00000000..9ac0107f
--- /dev/null
+++ b/app/api/assessment/runs/[run_id]/route.ts
@@ -0,0 +1,21 @@
+// BFF proxy — GET /api/v1/assessment/runs/:id
+import { NextRequest } from "next/server";
+import { proxyErrorResponse, proxyJsonResponse } from "@/app/api/_routeProxy";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ run_id: string }> },
+) {
+  try {
+    const { run_id } = await params;
+    return await proxyJsonResponse(
+      request,
+      `/api/v1/assessment/runs/${run_id}`,
+      {
+        method: "GET",
+      },
+    );
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment run proxy error:", error);
+  }
+}
diff --git a/app/api/assessment/runs/route.ts b/app/api/assessment/runs/route.ts
new file mode 100644
index 00000000..d9abe689
--- /dev/null
+++ b/app/api/assessment/runs/route.ts
@@ -0,0 +1,34 @@
+// BFF proxy — GET + POST /api/v1/assessment/runs
+import { NextRequest } from "next/server";
+import {
+  proxyErrorResponse,
+  proxyJsonResponse,
+  withQueryParams,
+} from "@/app/api/_routeProxy";
+
+export async function GET(request: NextRequest) {
+  try {
+    const queryParams = new URLSearchParams(request.nextUrl.searchParams);
+    return await proxyJsonResponse(
+      request,
+      withQueryParams("/api/v1/assessment/runs", queryParams),
+      {
+        method: "GET",
+      },
+    );
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment runs list proxy error:", error);
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    return await proxyJsonResponse(request, "/api/v1/assessment/runs", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment runs create proxy error:", error);
+  }
+}
diff --git a/app/api/auth/logout/route.ts b/app/api/auth/logout/route.ts
index 5111c38a..8461a4fe 100644
--- a/app/api/auth/logout/route.ts
+++ b/app/api/auth/logout/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { apiClient } from "@/app/lib/apiClient";
-import { clearRoleCookie } from "@/app/lib/authCookie";
+import { clearFeaturesCookie, clearRoleCookie } from "@/app/lib/authCookie";
 
 export async function POST(request: NextRequest) {
   const { status, data, headers } = await apiClient(
@@ -17,6 +17,7 @@ export async function POST(request: NextRequest) {
   }
 
   clearRoleCookie(res);
+  clearFeaturesCookie(res);
 
   return res;
 }
diff --git a/app/api/configs/[config_id]/route.ts b/app/api/configs/[config_id]/route.ts
index 0a5c60cc..b90f9641 100644
--- a/app/api/configs/[config_id]/route.ts
+++ b/app/api/configs/[config_id]/route.ts
@@ -1,4 +1,5 @@
 import { NextResponse } from "next/server";
+import { withQueryParams } from "@/app/api/_routeProxy";
 import { apiClient } from "@/app/lib/apiClient";
 
 export async function GET(
@@ -8,9 +9,10 @@ export async function GET(
   const { config_id } = await params;
 
   try {
+    const { searchParams } = new URL(request.url);
     const { status, data } = await apiClient(
       request,
-      `/api/v1/configs/${config_id}`,
+      withQueryParams(`/api/v1/configs/${config_id}`, searchParams),
     );
     return NextResponse.json(data, { status });
   } catch (_error) {
diff --git a/app/api/configs/[config_id]/versions/[version_number]/route.ts b/app/api/configs/[config_id]/versions/[version_number]/route.ts
index 4d89bd0e..d879abde 100644
--- a/app/api/configs/[config_id]/versions/[version_number]/route.ts
+++ b/app/api/configs/[config_id]/versions/[version_number]/route.ts
@@ -1,4 +1,5 @@
 import { NextResponse } from "next/server";
+import { withQueryParams } from "@/app/api/_routeProxy";
 import { apiClient } from "@/app/lib/apiClient";
 
 export async function GET(
@@ -10,9 +11,13 @@ export async function GET(
   const { config_id, version_number } = await params;
 
   try {
+    const { searchParams } = new URL(request.url);
     const { status, data } = await apiClient(
       request,
-      `/api/v1/configs/${config_id}/versions/${version_number}`,
+      withQueryParams(
+        `/api/v1/configs/${config_id}/versions/${version_number}`,
+        searchParams,
+      ),
     );
     return NextResponse.json(data, { status });
   } catch (_error) {
diff --git a/app/api/configs/[config_id]/versions/route.ts b/app/api/configs/[config_id]/versions/route.ts
index 9ac697d7..a01a2249 100644
--- a/app/api/configs/[config_id]/versions/route.ts
+++ b/app/api/configs/[config_id]/versions/route.ts
@@ -1,4 +1,5 @@
 import { NextResponse } from "next/server";
+import { withQueryParams } from "@/app/api/_routeProxy";
 import { apiClient } from "@/app/lib/apiClient";
 
 export async function GET(
@@ -8,10 +9,13 @@ export async function GET(
   const { config_id } = await params;
 
   try {
-    const { status, data } = await apiClient(
-      request,
+    const { searchParams } = new URL(request.url);
+    const endpoint = withQueryParams(
       `/api/v1/configs/${config_id}/versions`,
+      searchParams,
     );
+    const { status, data } = await apiClient(request, endpoint);
+
     return NextResponse.json(data, { status });
   } catch (_error) {
     return NextResponse.json(
@@ -29,7 +33,6 @@ export async function POST(
 
   try {
     const body = await request.json();
-
     const { status, data } = await apiClient(
       request,
       `/api/v1/configs/${config_id}/versions`,
diff --git a/app/api/evaluations/datasets/[dataset_id]/route.ts b/app/api/evaluations/datasets/[dataset_id]/route.ts
index 00561cca..f12ed347 100644
--- a/app/api/evaluations/datasets/[dataset_id]/route.ts
+++ b/app/api/evaluations/datasets/[dataset_id]/route.ts
@@ -1,6 +1,11 @@
 import { NextRequest, NextResponse } from "next/server";
 import { apiClient } from "@/app/lib/apiClient";
 
+type DatasetDetailsPayload = Record<string, unknown> & {
+  data?: { signed_url?: string } | null;
+  signed_url?: string;
+};
+
 /**
  * GET /api/evaluations/datasets/:dataset_id
  *
@@ -15,7 +20,7 @@ export async function GET(
     const searchParams = request.nextUrl.searchParams.toString();
     const queryString = searchParams ? `?${searchParams}` : "";
 
-    const { status, data } = await apiClient(
+    const { status, data } = await apiClient<DatasetDetailsPayload>(
       request,
       `/api/v1/evaluations/datasets/${dataset_id}${queryString}`,
     );
@@ -43,7 +48,7 @@ export async function GET(
       }
       const csvText = await csvResponse.text();
       return NextResponse.json(
-        { ...data, csv_content: csvText },
+        { ...(data ?? {}), csv_content: csvText },
         { status: 200 },
       );
     }
diff --git a/app/api/evaluations/tts/datasets/[dataset_id]/route.ts b/app/api/evaluations/tts/datasets/[dataset_id]/route.ts
index 05e70d66..1744ed0f 100644
--- a/app/api/evaluations/tts/datasets/[dataset_id]/route.ts
+++ b/app/api/evaluations/tts/datasets/[dataset_id]/route.ts
@@ -1,6 +1,11 @@
 import { apiClient } from "@/app/lib/apiClient";
 import { NextResponse } from "next/server";
 
+type DatasetDetailsPayload = Record<string, unknown> & {
+  data?: { signed_url?: string } | null;
+  signed_url?: string;
+};
+
 export async function GET(
   request: Request,
   { params }: { params: Promise<{ dataset_id: string }> },
@@ -18,7 +23,7 @@ export async function GET(
       ? `?${backendParams.toString()}`
       : "";
 
-    const { data, status } = await apiClient(
+    const { data, status } = await apiClient<DatasetDetailsPayload>(
       request,
       `/api/v1/evaluations/tts/datasets/${dataset_id}${queryString}`,
     );
@@ -42,7 +47,7 @@ export async function GET(
       }
       const csvText = await csvResponse.text();
       return NextResponse.json(
-        { ...data, csv_content: csvText },
+        { ...(data ?? {}), csv_content: csvText },
         { status: 200 },
       );
     }
diff --git a/app/api/users/me/route.ts b/app/api/users/me/route.ts
index 6b9fe0f2..32686d75 100644
--- a/app/api/users/me/route.ts
+++ b/app/api/users/me/route.ts
@@ -1,6 +1,9 @@
 import { NextRequest, NextResponse } from "next/server";
 import { apiClient } from "@/app/lib/apiClient";
-import { setRoleCookieFromBody } from "@/app/lib/authCookie";
+import {
+  setFeaturesCookieFromBody,
+  setRoleCookieFromBody,
+} from "@/app/lib/authCookie";
 
 export async function GET(request: NextRequest) {
   try {
@@ -9,6 +12,7 @@ export async function GET(request: NextRequest) {
 
     if (status >= 200 && status < 300) {
       setRoleCookieFromBody(res, data);
+      setFeaturesCookieFromBody(res, data);
     }
 
     return res;
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index dc8238e4..0d978781 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -56,7 +56,7 @@ export default function Button({
   return (
     <button
       disabled={disabled}
-      className={`rounded-full text-sm font-medium transition-colors inline-flex items-center justify-center gap-2 cursor-pointer ${
+      className={`rounded-full text-sm font-medium transition-colors inline-flex items-center justify-center gap-2 cursor-pointer disabled:cursor-not-allowed ${
         sizeStyles[size]
       } ${disabled ? styles.disabled : styles.base} ${
         fullWidth ? "w-full" : ""
diff --git a/app/components/ConfigCard.tsx b/app/components/ConfigCard.tsx
index a3fb5ba2..0026e554 100644
--- a/app/components/ConfigCard.tsx
+++ b/app/components/ConfigCard.tsx
@@ -56,7 +56,7 @@ export default function ConfigCard({
 
       // 2. Read the cached version items to find the latest version number
       //    (onLoadVersions populates configState.versionItemsCache)
-      const { configState } = await import("@/app/lib/store/configStore");
+      const { configState } = await import("@/app/lib/store/config");
       const versionItems = configState.versionItemsCache[config.id];
       if (!versionItems || versionItems.length === 0) {
         setIsLoadingDetails(false);
diff --git a/app/components/ConfigModal.tsx b/app/components/ConfigModal.tsx
index 0f3f412d..1e74c7d4 100644
--- a/app/components/ConfigModal.tsx
+++ b/app/components/ConfigModal.tsx
@@ -6,11 +6,10 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { colors } from "@/app/lib/colors";
 import CopyableCodeBlock from "@/app/components/CopyableCodeBlock";
 import CodeBlock from "@/app/components/CodeBlock";
 import Tag from "@/app/components/Tag";
-import { CloseIcon } from "@/app/components/icons";
+import Modal from "@/app/components/Modal";
 import { EvalJob, AssistantConfig } from "@/app/lib/types/evaluation";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetch } from "@/app/lib/apiClient";
@@ -47,10 +46,7 @@ const ConfigField = ({
   children: React.ReactNode;
 }) => (
   <div>
-    <div
-      className="text-xs font-medium mb-1.5"
-      style={{ color: colors.text.secondary }}
-    >
+    <div className="text-xs font-medium mb-1.5 text-text-secondary">
       {label}
     </div>
     {children}
@@ -68,7 +64,6 @@ export default function ConfigModal({
     useState<ConfigVersionInfo | null>(null);
   const [isLoadingConfig, setIsLoadingConfig] = useState(false);
 
-  // Fetch full config version details when modal opens
   useEffect(() => {
     if (!isOpen || !job.config_id || !job.config_version) {
       setConfigVersionInfo(null);
@@ -81,7 +76,6 @@ export default function ConfigModal({
 
       setIsLoadingConfig(true);
       try {
-        // Fetch config name first
         const configData = await apiFetch<{
           success: boolean;
           data?: { name: string };
@@ -89,7 +83,6 @@ export default function ConfigModal({
         const configName =
           configData.success && configData.data ? configData.data.name : null;
 
-        // Fetch full version details including config_blob
         const versionData = await apiFetch<{
           success: boolean;
           data?: ConfigVersionPublic;
@@ -104,12 +97,10 @@ export default function ConfigModal({
 
           const knowledgeBaseIds: string[] = [];
 
-          // Check direct params.knowledge_base_ids
           if (Array.isArray(params.knowledge_base_ids)) {
             knowledgeBaseIds.push(...params.knowledge_base_ids);
           }
 
-          // Check tools array for knowledge_base_ids
           if (params.tools) {
             const toolKbIds = params.tools
               .filter(
@@ -144,267 +135,207 @@ export default function ConfigModal({
     };
 
     fetchConfigVersionInfo();
-  }, [isOpen, job.config_id, job.config_version, activeKey]);
+  }, [isOpen, job.config_id, job.config_version, activeKey, isAuthenticated]);
 
-  if (!isOpen) return null;
+  const title = configVersionInfo?.version
+    ? `${configVersionInfo.name} v${configVersionInfo.version}`
+    : configVersionInfo?.name || "Configuration";
 
   return (
-    <div
-      className="fixed inset-0 z-60 flex items-center justify-center bg-black/50"
-      onClick={onClose}
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={title}
+      maxWidth="max-w-xl"
+      maxHeight="max-h-[80vh]"
     >
-      <div
-        className="w-full max-w-xl rounded-lg shadow-xl flex flex-col"
-        style={{ backgroundColor: colors.bg.primary, maxHeight: "80vh" }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div
-          className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0"
-          style={{ borderColor: colors.border }}
-        >
-          <div>
-            <h3
-              className="text-sm font-semibold"
-              style={{ color: colors.text.primary }}
-            >
-              {configVersionInfo?.name || "Configuration"}
-              {configVersionInfo?.version && (
-                <span
-                  className="text-xs font-normal ml-1.5"
-                  style={{ color: colors.text.secondary }}
-                >
-                  v{configVersionInfo.version}
-                </span>
-              )}
-            </h3>
-            {configVersionInfo?.provider && (
-              <p
-                className="text-xs mt-0.5"
-                style={{ color: colors.text.secondary }}
-              >
-                {configVersionInfo.provider}
-              </p>
-            )}
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1.5 rounded"
-            style={{ color: colors.text.secondary }}
-          >
-            <CloseIcon className="w-5 h-5" />
-          </button>
+      {configVersionInfo?.provider && (
+        <div className="sticky top-0 bg-bg-primary border-b border-border px-6 py-2 z-10">
+          <p className="text-xs text-text-secondary">
+            {configVersionInfo.provider}
+          </p>
         </div>
+      )}
 
-        <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
-          {isLoadingConfig ? (
-            <div className="py-8 text-center">
-              <div
-                className="w-5 h-5 border-2 border-t-transparent rounded-full animate-spin mx-auto mb-2"
-                style={{
-                  borderColor: colors.text.secondary,
-                  borderTopColor: "transparent",
-                }}
-              />
-              <p className="text-xs" style={{ color: colors.text.secondary }}>
-                Loading configuration...
-              </p>
-            </div>
-          ) : (
-            <>
-              {assistantConfig?.name && (
-                <ConfigField label="Assistant">
-                  <div
-                    className="text-sm font-medium"
-                    style={{ color: colors.text.primary }}
-                  >
-                    {assistantConfig.name}
-                  </div>
-                </ConfigField>
-              )}
+      <div className="px-6 py-5 space-y-5">
+        {isLoadingConfig ? (
+          <div className="py-8 text-center">
+            <div className="w-5 h-5 border-2 border-text-secondary border-t-transparent rounded-full animate-spin mx-auto mb-2" />
+            <p className="text-xs text-text-secondary">
+              Loading configuration...
+            </p>
+          </div>
+        ) : (
+          <>
+            {assistantConfig?.name && (
+              <ConfigField label="Assistant">
+                <div className="text-sm font-medium text-text-primary">
+                  {assistantConfig.name}
+                </div>
+              </ConfigField>
+            )}
 
-              {job.assistant_id && (
-                <ConfigField label="Assistant ID">
-                  <div
-                    className="text-xs font-mono"
-                    style={{ color: colors.text.primary }}
-                  >
-                    {job.assistant_id}
-                  </div>
-                </ConfigField>
-              )}
+            {job.assistant_id && (
+              <ConfigField label="Assistant ID">
+                <div className="text-xs font-mono text-text-primary">
+                  {job.assistant_id}
+                </div>
+              </ConfigField>
+            )}
 
-              <ConfigField label="Model">
+            <ConfigField label="Model">
+              <Tag>
+                {configVersionInfo?.model ||
+                  assistantConfig?.model ||
+                  job.config?.model ||
+                  "N/A"}
+              </Tag>
+            </ConfigField>
+
+            {(configVersionInfo?.temperature !== undefined ||
+              assistantConfig?.temperature !== undefined ||
+              job.config?.temperature !== undefined) && (
+              <ConfigField label="Temperature">
                 <Tag>
-                  {configVersionInfo?.model ||
-                    assistantConfig?.model ||
-                    job.config?.model ||
-                    "N/A"}
+                  {configVersionInfo?.temperature !== undefined
+                    ? configVersionInfo.temperature
+                    : assistantConfig?.temperature !== undefined
+                      ? assistantConfig.temperature
+                      : job.config?.temperature}
                 </Tag>
               </ConfigField>
+            )}
 
-              {(configVersionInfo?.temperature !== undefined ||
-                assistantConfig?.temperature !== undefined ||
-                job.config?.temperature !== undefined) && (
-                <ConfigField label="Temperature">
-                  <Tag>
-                    {configVersionInfo?.temperature !== undefined
-                      ? configVersionInfo.temperature
-                      : assistantConfig?.temperature !== undefined
-                        ? assistantConfig.temperature
-                        : job.config?.temperature}
-                  </Tag>
-                </ConfigField>
-              )}
-
-              {configVersionInfo?.knowledge_base_ids &&
-                configVersionInfo.knowledge_base_ids.length > 0 && (
-                  <ConfigField label="Knowledge Base IDs">
-                    <CopyableCodeBlock
-                      copyText={configVersionInfo.knowledge_base_ids.join("\n")}
-                    >
-                      {configVersionInfo.knowledge_base_ids.join("\n")}
-                    </CopyableCodeBlock>
-                  </ConfigField>
-                )}
-
-              {(configVersionInfo?.instructions ||
-                assistantConfig?.instructions ||
-                job.config?.instructions) && (
-                <ConfigField label="Instructions">
+            {configVersionInfo?.knowledge_base_ids &&
+              configVersionInfo.knowledge_base_ids.length > 0 && (
+                <ConfigField label="Knowledge Base IDs">
                   <CopyableCodeBlock
-                    copyText={
-                      (configVersionInfo?.instructions ||
-                        assistantConfig?.instructions ||
-                        job.config?.instructions) as string
-                    }
+                    copyText={configVersionInfo.knowledge_base_ids.join("\n")}
                   >
-                    {configVersionInfo?.instructions ||
-                      assistantConfig?.instructions ||
-                      job.config?.instructions}
+                    {configVersionInfo.knowledge_base_ids.join("\n")}
                   </CopyableCodeBlock>
                 </ConfigField>
               )}
 
-              {Array.isArray(configVersionInfo?.tools) &&
-                configVersionInfo.tools.length > 0 && (
-                  <ConfigField label="Tools">
-                    <div className="space-y-3">
-                      <div className="flex flex-wrap gap-2">
-                        {configVersionInfo.tools.map((tool, idx) => (
-                          <Tag key={idx}>{tool.type}</Tag>
-                        ))}
-                      </div>
+            {(configVersionInfo?.instructions ||
+              assistantConfig?.instructions ||
+              job.config?.instructions) && (
+              <ConfigField label="Instructions">
+                <CopyableCodeBlock
+                  copyText={
+                    (configVersionInfo?.instructions ||
+                      assistantConfig?.instructions ||
+                      job.config?.instructions) as string
+                  }
+                >
+                  {configVersionInfo?.instructions ||
+                    assistantConfig?.instructions ||
+                    job.config?.instructions}
+                </CopyableCodeBlock>
+              </ConfigField>
+            )}
+
+            {Array.isArray(configVersionInfo?.tools) &&
+              configVersionInfo.tools.length > 0 && (
+                <ConfigField label="Tools">
+                  <div className="space-y-3">
+                    <div className="flex flex-wrap gap-2">
                       {configVersionInfo.tools.map((tool, idx) => (
-                        <React.Fragment key={`tool-details-${idx}`}>
-                          {Array.isArray(tool.knowledge_base_ids) &&
-                            tool.knowledge_base_ids.length > 0 && (
-                              <div>
-                                <div
-                                  className="text-xs font-medium mb-1"
-                                  style={{ color: colors.text.secondary }}
-                                >
-                                  Knowledge Base IDs ({tool.type})
-                                </div>
-                                <CodeBlock>
-                                  {tool.knowledge_base_ids.join("\n")}
-                                </CodeBlock>
-                              </div>
-                            )}
-                          {tool.max_num_results !== undefined && (
+                        <Tag key={idx}>{tool.type}</Tag>
+                      ))}
+                    </div>
+                    {configVersionInfo.tools.map((tool, idx) => (
+                      <React.Fragment key={`tool-details-${idx}`}>
+                        {Array.isArray(tool.knowledge_base_ids) &&
+                          tool.knowledge_base_ids.length > 0 && (
                             <div>
-                              <div
-                                className="text-xs font-medium mb-1"
-                                style={{ color: colors.text.secondary }}
-                              >
-                                Max Results ({tool.type})
-                              </div>
-                              <div
-                                className="text-sm"
-                                style={{ color: colors.text.primary }}
-                              >
-                                {String(tool.max_num_results)}
+                              <div className="text-xs font-medium mb-1 text-text-secondary">
+                                Knowledge Base IDs ({tool.type})
                               </div>
+                              <CodeBlock>
+                                {tool.knowledge_base_ids.join("\n")}
+                              </CodeBlock>
                             </div>
                           )}
-                        </React.Fragment>
-                      ))}
-                    </div>
-                  </ConfigField>
-                )}
+                        {tool.max_num_results !== undefined && (
+                          <div>
+                            <div className="text-xs font-medium mb-1 text-text-secondary">
+                              Max Results ({tool.type})
+                            </div>
+                            <div className="text-sm text-text-primary">
+                              {String(tool.max_num_results)}
+                            </div>
+                          </div>
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </div>
+                </ConfigField>
+              )}
 
-              {Array.isArray(job.config?.tools) &&
-                job.config.tools.length > 0 &&
-                !configVersionInfo?.tools?.length && (
-                  <ConfigField label="Tools">
-                    <div className="space-y-3">
-                      <div className="flex flex-wrap gap-2">
-                        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                        {job.config.tools.map((tool: any, idx) => (
-                          <Tag key={idx}>{tool.type}</Tag>
-                        ))}
-                      </div>
+            {Array.isArray(job.config?.tools) &&
+              job.config.tools.length > 0 &&
+              !configVersionInfo?.tools?.length && (
+                <ConfigField label="Tools">
+                  <div className="space-y-3">
+                    <div className="flex flex-wrap gap-2">
                       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                      {job.config.tools.map((tool: any, idx: number) => (
-                        <React.Fragment key={`tool-details-${idx}`}>
-                          {Array.isArray(tool.knowledge_base_ids) &&
-                            tool.knowledge_base_ids.length > 0 && (
-                              <div>
-                                <div
-                                  className="text-xs font-medium mb-1"
-                                  style={{ color: colors.text.secondary }}
-                                >
-                                  Knowledge Base IDs ({tool.type})
-                                </div>
-                                <CodeBlock>
-                                  {tool.knowledge_base_ids.join("\n")}
-                                </CodeBlock>
-                              </div>
-                            )}
-                          {tool.max_num_results !== undefined && (
+                      {job.config.tools.map((tool: any, idx) => (
+                        <Tag key={idx}>{tool.type}</Tag>
+                      ))}
+                    </div>
+                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                    {job.config.tools.map((tool: any, idx: number) => (
+                      <React.Fragment key={`tool-details-${idx}`}>
+                        {Array.isArray(tool.knowledge_base_ids) &&
+                          tool.knowledge_base_ids.length > 0 && (
                             <div>
-                              <div
-                                className="text-xs font-medium mb-1"
-                                style={{ color: colors.text.secondary }}
-                              >
-                                Max Results ({tool.type})
-                              </div>
-                              <div
-                                className="text-sm"
-                                style={{ color: colors.text.primary }}
-                              >
-                                {String(tool.max_num_results)}
+                              <div className="text-xs font-medium mb-1 text-text-secondary">
+                                Knowledge Base IDs ({tool.type})
                               </div>
+                              <CodeBlock>
+                                {tool.knowledge_base_ids.join("\n")}
+                              </CodeBlock>
                             </div>
                           )}
-                        </React.Fragment>
-                      ))}
-                    </div>
-                  </ConfigField>
-                )}
+                        {tool.max_num_results !== undefined && (
+                          <div>
+                            <div className="text-xs font-medium mb-1 text-text-secondary">
+                              Max Results ({tool.type})
+                            </div>
+                            <div className="text-sm text-text-primary">
+                              {String(tool.max_num_results)}
+                            </div>
+                          </div>
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </div>
+                </ConfigField>
+              )}
 
-              {Array.isArray(assistantConfig?.knowledge_base_ids) &&
-                assistantConfig.knowledge_base_ids.length > 0 && (
-                  <ConfigField label="Knowledge Base IDs">
-                    <CodeBlock>
-                      {assistantConfig.knowledge_base_ids.join("\n")}
-                    </CodeBlock>
-                  </ConfigField>
-                )}
+            {Array.isArray(assistantConfig?.knowledge_base_ids) &&
+              assistantConfig.knowledge_base_ids.length > 0 && (
+                <ConfigField label="Knowledge Base IDs">
+                  <CodeBlock>
+                    {assistantConfig.knowledge_base_ids.join("\n")}
+                  </CodeBlock>
+                </ConfigField>
+              )}
 
-              {Array.isArray(job.config?.include) &&
-                job.config.include.length > 0 && (
-                  <ConfigField label="Include">
-                    <div className="flex flex-wrap gap-2">
-                      {job.config.include.map((item, idx) => (
-                        <Tag key={idx}>{item}</Tag>
-                      ))}
-                    </div>
-                  </ConfigField>
-                )}
-            </>
-          )}
-        </div>
+            {Array.isArray(job.config?.include) &&
+              job.config.include.length > 0 && (
+                <ConfigField label="Include">
+                  <div className="flex flex-wrap gap-2">
+                    {job.config.include.map((item, idx) => (
+                      <Tag key={idx}>{item}</Tag>
+                    ))}
+                  </div>
+                </ConfigField>
+              )}
+          </>
+        )}
       </div>
-    </div>
+    </Modal>
   );
 }
diff --git a/app/components/DatasetListSkeleton.tsx b/app/components/DatasetListSkeleton.tsx
new file mode 100644
index 00000000..704a7ef1
--- /dev/null
+++ b/app/components/DatasetListSkeleton.tsx
@@ -0,0 +1,35 @@
+interface DatasetListSkeletonProps {
+  count?: number;
+}
+
+export default function DatasetListSkeleton({
+  count = 3,
+}: DatasetListSkeletonProps) {
+  return (
+    <div className="space-y-3 animate-pulse">
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          className="rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-[3px] border-l-neutral-200"
+        >
+          <div className="px-5 py-4">
+            <div className="flex items-start justify-between gap-4">
+              <div className="min-w-0 flex-1">
+                <div className="h-4 w-44 bg-neutral-200 rounded mb-2" />
+                <div className="h-3 w-64 bg-neutral-100 rounded mb-3" />
+                <div className="flex gap-3">
+                  <div className="h-3 w-16 bg-neutral-100 rounded" />
+                  <div className="h-3 w-20 bg-neutral-100 rounded" />
+                </div>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                <div className="h-7 w-14 bg-neutral-100 rounded-lg" />
+                <div className="h-7 w-16 bg-neutral-100 rounded-lg" />
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/ErrorModal.tsx b/app/components/ErrorModal.tsx
index 8d71be7d..f4a1ef48 100644
--- a/app/components/ErrorModal.tsx
+++ b/app/components/ErrorModal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import React from "react";
+import { Button, Modal } from "@/app/components";
+import { WarningIcon } from "@/app/components/icons";
 
 interface ErrorModalProps {
   isOpen: boolean;
@@ -15,73 +16,32 @@ export default function ErrorModal({
   title = "Error",
   message,
 }: ErrorModalProps) {
-  if (!isOpen) return null;
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
-        onClick={onClose}
-      />
-
-      {/* Modal */}
-      <div className="relative bg-white rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden">
-        {/* Header */}
-        <div className="flex items-start justify-between p-6 border-b border-gray-200">
-          <div className="flex items-center gap-3">
-            <div className="flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
-              <svg
-                className="w-6 h-6 text-red-600"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                />
-              </svg>
-            </div>
-            <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      maxWidth="max-w-md"
+      maxHeight="max-h-fit"
+      showClose={false}
+    >
+      <div className="px-6 py-5">
+        <div className="flex items-start gap-3">
+          <div className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center bg-status-error-bg">
+            <WarningIcon className="w-6 h-6 text-status-error-text" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-text-primary">{title}</h3>
+            <p className="text-sm mt-1 text-text-secondary whitespace-pre-wrap">
+              {message}
+            </p>
           </div>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 transition-colors"
-          >
-            <svg
-              className="w-6 h-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="p-6">
-          <p className="text-sm text-gray-700 whitespace-pre-wrap">{message}</p>
-        </div>
-
-        {/* Footer */}
-        <div className="flex justify-end p-6 border-t border-gray-200 bg-gray-50">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
-          >
-            Okay
-          </button>
         </div>
       </div>
-    </div>
+      <div className="flex justify-end gap-3 px-6 py-4 border-t border-border">
+        <Button variant="primary" size="md" onClick={onClose}>
+          Okay
+        </Button>
+      </div>
+    </Modal>
   );
 }
diff --git a/app/components/ResultsTableSkeleton.tsx b/app/components/ResultsTableSkeleton.tsx
new file mode 100644
index 00000000..d101630a
--- /dev/null
+++ b/app/components/ResultsTableSkeleton.tsx
@@ -0,0 +1,25 @@
+interface ResultsTableSkeletonProps {
+  rows?: number;
+  cols?: number;
+}
+
+export default function ResultsTableSkeleton({
+  rows = 5,
+  cols = 5,
+}: ResultsTableSkeletonProps) {
+  return (
+    <div className="p-4 space-y-3 animate-pulse">
+      {Array.from({ length: rows }).map((_, r) => (
+        <div key={r} className="flex items-center gap-3">
+          {Array.from({ length: cols }).map((_, c) => (
+            <div
+              key={c}
+              className="flex-1 h-12 bg-neutral-100 rounded"
+              style={{ animationDelay: `${(r + c) * 50}ms` }}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/RunsListSkeleton.tsx b/app/components/RunsListSkeleton.tsx
new file mode 100644
index 00000000..010c585b
--- /dev/null
+++ b/app/components/RunsListSkeleton.tsx
@@ -0,0 +1,32 @@
+interface RunsListSkeletonProps {
+  count?: number;
+}
+
+export default function RunsListSkeleton({ count = 5 }: RunsListSkeletonProps) {
+  return (
+    <div className="p-4 space-y-3 animate-pulse">
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          className="rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-[3px] border-l-neutral-200"
+        >
+          <div className="px-5 py-4">
+            <div className="flex items-start justify-between gap-4">
+              <div className="min-w-0 flex-1">
+                <div className="h-4 w-52 bg-neutral-200 rounded" />
+              </div>
+              <div className="h-5 w-20 bg-neutral-100 rounded-full" />
+            </div>
+            <div className="flex items-center justify-between gap-4 mt-3">
+              <div className="flex items-center gap-3">
+                <div className="h-3 w-32 bg-neutral-100 rounded" />
+                <div className="h-3 w-24 bg-neutral-100 rounded" />
+              </div>
+              <div className="h-7 w-24 bg-neutral-100 rounded-lg" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/Select.tsx b/app/components/Select.tsx
index 861aa8be..86824a0d 100644
--- a/app/components/Select.tsx
+++ b/app/components/Select.tsx
@@ -19,7 +19,7 @@ export default function Select({
 }: SelectProps) {
   return (
     <select
-      className="w-full text-sm rounded-md border border-border bg-bg-primary text-text-primary px-2.5 py-1.5 outline-none focus:ring-1"
+      className="w-full text-sm rounded-md border border-border bg-bg-primary text-text-primary px-2.5 py-1.5 outline-none focus:ring-accent-primary/20 focus:border-accent-primary cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
       {...props}
     >
       {placeholder && <option value="">{placeholder}</option>}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index db14326f..1c86cf9b 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -4,28 +4,28 @@
  */
 
 "use client";
-
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import {
+  AssessmentIcon,
+  BookOpenIcon,
+  ChevronRightIcon,
+  ChevronLeftIcon,
   ClipboardIcon,
   DocumentFileIcon,
-  BookOpenIcon,
   GearIcon,
-  SlidersIcon,
   ShieldCheckIcon,
-  ChevronRightIcon,
-  ChevronLeftIcon,
+  SlidersIcon,
   ChatIcon,
 } from "@/app/components/icons";
+import { MenuItem, SidebarProps } from "@/app/lib/types/nav";
 import { LoginModal } from "@/app/components/auth";
 import { Branding, UserMenuPopover } from "@/app/components/user-menu";
 import GatePopover from "@/app/components/GatePopover";
 import { NAV_ITEMS } from "@/app/lib/navConfig";
-import { MenuItem, SidebarProps } from "@/app/lib/types/nav";
 
 const PUBLIC_ROUTES = new Set(["/", "/chat"]);
 
@@ -34,7 +34,9 @@ export default function Sidebar({
   activeRoute = "/chat",
 }: SidebarProps) {
   const router = useRouter();
-  const { currentUser, googleProfile, isAuthenticated, logout } = useAuth();
+  const [hasMounted, setHasMounted] = useState(false);
+  const { currentUser, googleProfile, isAuthenticated, logout, hasFeature } =
+    useAuth();
   const { setSidebarCollapsed } = useApp();
   const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({
     Evaluations: true,
@@ -47,6 +49,10 @@ export default function Sidebar({
   const [gateRect, setGateRect] = useState<DOMRect | null>(null);
   const gateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
   useEffect(() => {
     const saved = localStorage.getItem("sidebar-expanded-menus");
     if (saved) {
@@ -119,16 +125,23 @@ export default function Sidebar({
     gear: <GearIcon className="w-5 h-5" />,
     shield: <ShieldCheckIcon />,
     sliders: <SlidersIcon />,
+    assessment: <AssessmentIcon />,
   };
 
-  const navItems: MenuItem[] = NAV_ITEMS.filter(
-    (item) => !item.superuserOnly || currentUser?.is_superuser,
-  ).map((item) => ({
+  const navItems: MenuItem[] = NAV_ITEMS.filter((item) => {
+    if (item.superuserOnly && !currentUser?.is_superuser) return false;
+    if (item.featureFlag) {
+      if (!hasMounted) return false;
+      if (!hasFeature(item.featureFlag)) return false;
+    }
+    return true;
+  }).map((item) => ({
     name: item.name,
     route: item.route,
     icon: iconMap[item.icon],
     submenu: item.submenu,
     gateDescription: item.gateDescription,
+    featureFlag: item.featureFlag,
   }));
 
   const getGateDescription = (name: string): string => {
diff --git a/app/components/StatusBadge.tsx b/app/components/StatusBadge.tsx
deleted file mode 100644
index 12b3704c..00000000
--- a/app/components/StatusBadge.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * StatusBadge - Color-coded status indicator
- * Displays status with appropriate color based on job/evaluation state
- */
-
-"use client";
-
-import { getStatusColor } from "./utils";
-
-interface StatusBadgeProps {
-  status: string;
-  size?: "sm" | "md";
-}
-
-export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) {
-  const statusColor = getStatusColor(status);
-
-  const sizeClasses =
-    size === "md" ? "px-3 py-1.5 text-sm" : "px-2 py-1 text-xs";
-
-  return (
-    <div
-      className={`inline-block ${sizeClasses} rounded font-semibold border ${statusColor.bg} ${statusColor.border} ${statusColor.text}`}
-    >
-      {status.toUpperCase()}
-    </div>
-  );
-}
diff --git a/app/components/TabNavigation.tsx b/app/components/TabNavigation.tsx
index 82448462..425b86d7 100644
--- a/app/components/TabNavigation.tsx
+++ b/app/components/TabNavigation.tsx
@@ -1,22 +1,8 @@
-/**
- * TabNavigation - Generic two-tab switcher component
- * Provides a tab interface with active state highlighting
- */
-
 "use client";
 
-import { colors } from "@/app/lib/colors";
-
-export interface Tab {
-  id: string;
-  label: string;
-}
+import type { TabNavigationProps } from "@/app/lib/types/nav";
 
-interface TabNavigationProps {
-  tabs: Tab[];
-  activeTab: string;
-  onTabChange: (tabId: string) => void;
-}
+export type { Tab } from "@/app/lib/types/nav";
 
 export default function TabNavigation({
   tabs,
@@ -24,21 +10,18 @@ export default function TabNavigation({
   onTabChange,
 }: TabNavigationProps) {
   return (
-    <div
-      className="border-b flex gap-1 px-4"
-      style={{ backgroundColor: colors.bg.primary, borderColor: colors.border }}
-    >
+    <div className="flex shrink-0 items-center gap-1 border-b border-border bg-bg-primary px-4">
       {tabs.map((tab) => {
         const isActive = activeTab === tab.id;
         return (
           <button
             key={tab.id}
             onClick={() => onTabChange(tab.id)}
-            className="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors"
-            style={{
-              borderColor: isActive ? colors.accent.primary : "transparent",
-              color: isActive ? colors.accent.primary : colors.text.secondary,
-            }}
+            className={`cursor-pointer border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+              isActive
+                ? "border-accent-primary text-accent-primary"
+                : "border-transparent text-text-secondary hover:text-text-primary"
+            }`}
           >
             {tab.label}
           </button>
diff --git a/app/components/assessment/ColumnMapperStep.tsx b/app/components/assessment/ColumnMapperStep.tsx
new file mode 100644
index 00000000..41a09a14
--- /dev/null
+++ b/app/components/assessment/ColumnMapperStep.tsx
@@ -0,0 +1,298 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/app/components";
+import Select from "@/app/components/Select";
+import {
+  ASSESSMENT_ROLE_OPTION_MAP,
+  ASSESSMENT_ROLE_OPTIONS,
+} from "@/app/lib/assessment/constants";
+import {
+  ATTACHMENT_FORMATS,
+  type Attachment,
+  type ColumnConfig,
+  type ColumnRole,
+  type ColumnMapperStepProps,
+} from "@/app/lib/types/assessment";
+import { buildColumnConfigs, colorMapping } from "@/app/lib/utils/assessment";
+
+export default function ColumnMapperStep({
+  columns,
+  columnMapping,
+  setColumnMapping,
+  onNext,
+  onBack,
+}: ColumnMapperStepProps) {
+  const [columnConfigs, setColumnConfigs] = useState<ColumnConfig[]>(() =>
+    buildColumnConfigs(columns, columnMapping),
+  );
+
+  useEffect(() => {
+    setColumnConfigs(buildColumnConfigs(columns, columnMapping));
+  }, [columns, columnMapping]);
+
+  const updateRole = (index: number, role: ColumnRole) => {
+    if (role === "ground_truth") {
+      return;
+    }
+
+    setColumnConfigs((prev) => {
+      const current = prev[index];
+      const next = [...prev];
+
+      if (role !== "attachment") {
+        next[index] = { role };
+        return next;
+      }
+
+      next[index] = {
+        role,
+        attachmentType: current?.attachmentType || "image",
+        attachmentFormat: current?.attachmentFormat || "url",
+      };
+      return next;
+    });
+  };
+
+  const updateAttachmentType = (index: number, type: "image" | "pdf") => {
+    setColumnConfigs((prev) => {
+      const next = [...prev];
+      next[index] = {
+        ...prev[index],
+        role: "attachment",
+        attachmentType: type,
+        attachmentFormat: "url",
+      };
+      return next;
+    });
+  };
+
+  const updateAttachmentFormat = (index: number, format: string) => {
+    setColumnConfigs((prev) => {
+      const next = [...prev];
+      next[index] = {
+        ...prev[index],
+        role: "attachment",
+        attachmentFormat: format,
+      };
+      return next;
+    });
+  };
+
+  const handleNext = () => {
+    const textColumns: string[] = [];
+    const attachments: Attachment[] = [];
+
+    columnConfigs.forEach((config, index) => {
+      const column = columns[index];
+      if (!column) return;
+
+      if (config.role === "text") {
+        textColumns.push(column);
+      } else if (
+        config.role === "attachment" &&
+        config.attachmentType &&
+        config.attachmentFormat
+      ) {
+        attachments.push({
+          column,
+          type: config.attachmentType,
+          format: config.attachmentFormat as Attachment["format"],
+        });
+      }
+    });
+
+    setColumnMapping({ textColumns, attachments, groundTruthColumns: [] });
+    onNext();
+  };
+
+  const mappedCount = columnConfigs.filter(
+    (config) => config.role !== "unmapped",
+  ).length;
+  const hasText = columnConfigs.some((config) => config.role === "text");
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col">
+      <div className="mx-auto w-full max-w-3xl flex-1 space-y-5 pb-16">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h2 className="text-lg font-semibold text-text-primary">
+              Map Columns
+            </h2>
+            <p className="mt-1 text-sm text-text-secondary">
+              Choose a role for each column.
+            </p>
+          </div>
+          <div className="rounded-full bg-bg-secondary px-3 py-1 text-xs font-medium text-text-secondary">
+            {mappedCount}/{columns.length} mapped
+          </div>
+        </div>
+
+        {columns.length === 0 ? (
+          <div className="rounded-2xl border border-border bg-bg-primary px-6 py-10 text-center">
+            <p className="text-sm font-medium text-text-primary">
+              No columns found.
+            </p>
+            <p className="mt-1 text-sm text-text-secondary">
+              Go back and select a dataset first.
+            </p>
+          </div>
+        ) : (
+          <div className="overflow-hidden rounded-2xl border border-border bg-bg-primary">
+            {columns.map((column, index) => {
+              const config = columnConfigs[index] || {
+                role: "unmapped" as ColumnRole,
+              };
+              const activeOption =
+                ASSESSMENT_ROLE_OPTION_MAP[config.role] ||
+                ASSESSMENT_ROLE_OPTION_MAP.unmapped;
+              const roleVisuals = colorMapping(activeOption.value);
+
+              return (
+                <div
+                  key={index}
+                  className={`bg-bg-primary px-4 py-4 sm:px-5 ${
+                    index === 0 ? "" : "border-t border-border"
+                  }`}
+                >
+                  <div
+                    className={`flex flex-col gap-3 rounded-xl border px-3 py-3 ${roleVisuals.panelClass}`}
+                  >
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                      <div className="min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span
+                            className={`h-2 w-2 rounded-full ${roleVisuals.dotClass}`}
+                          />
+                          <span className="font-mono text-sm font-semibold text-text-primary">
+                            {column}
+                          </span>
+                        </div>
+                      </div>
+
+                      <div className="flex flex-wrap gap-2">
+                        {ASSESSMENT_ROLE_OPTIONS.map((option) => {
+                          const isGroundTruth = option.value === "ground_truth";
+                          const isActive = config.role === option.value;
+                          return (
+                            <Button
+                              key={option.value}
+                              type="button"
+                              variant={isGroundTruth ? "ghost" : "outline"}
+                              size="sm"
+                              onClick={() => {
+                                if (!isGroundTruth) {
+                                  updateRole(index, option.value);
+                                }
+                              }}
+                              aria-disabled={isGroundTruth}
+                              title={
+                                isGroundTruth
+                                  ? "Ground Truth mapping is coming soon"
+                                  : undefined
+                              }
+                              className={`!rounded-full !px-4 !py-2 ${
+                                isGroundTruth
+                                  ? "!cursor-not-allowed !bg-transparent !text-text-secondary hover:!bg-transparent hover:!text-text-secondary"
+                                  : isActive
+                                    ? roleVisuals.activeButtonClass
+                                    : "!bg-bg-primary !text-text-secondary hover:!bg-bg-secondary"
+                              }`}
+                            >
+                              <span>{option.label}</span>
+                              {isGroundTruth && (
+                                <span className="rounded-full bg-bg-secondary px-1.5 py-0.5 text-[10px] font-medium text-text-secondary">
+                                  Soon
+                                </span>
+                              )}
+                            </Button>
+                          );
+                        })}
+                      </div>
+                    </div>
+
+                    {config.role === "attachment" && (
+                      <div className="flex flex-col gap-3 pt-1 sm:flex-row">
+                        <label className="flex-1">
+                          <span className="mb-1 block text-xs font-medium text-text-secondary">
+                            Attachment Type
+                          </span>
+                          <Select
+                            value={config.attachmentType || "image"}
+                            onChange={(event) =>
+                              updateAttachmentType(
+                                index,
+                                event.target.value as "image" | "pdf",
+                              )
+                            }
+                            options={[
+                              { value: "image", label: "Image" },
+                              { value: "pdf", label: "PDF" },
+                            ]}
+                            className="w-full cursor-pointer rounded-lg border border-border bg-bg-primary px-3 py-2 text-sm text-text-primary outline-none focus:ring-1"
+                          />
+                        </label>
+
+                        <label className="flex-1">
+                          <span className="mb-1 block text-xs font-medium text-text-secondary">
+                            Source
+                          </span>
+                          <Select
+                            value={config.attachmentFormat || "url"}
+                            onChange={(event) =>
+                              updateAttachmentFormat(index, event.target.value)
+                            }
+                            options={ATTACHMENT_FORMATS[
+                              config.attachmentType || "image"
+                            ].map((format) => ({
+                              value: format,
+                              label: format,
+                            }))}
+                            className="w-full cursor-pointer rounded-lg border border-border bg-bg-primary px-3 py-2 text-sm text-text-primary outline-none focus:ring-1"
+                          />
+                        </label>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div className="mt-auto sticky bottom-0 z-10 -mx-6 flex flex-col gap-3 border-t border-border bg-bg-secondary px-6 py-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="mx-auto flex w-full max-w-5xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onBack}
+            className="!rounded-lg"
+          >
+            Back
+          </Button>
+
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <span
+              className={`text-xs ${
+                hasText ? "text-text-secondary" : "text-status-warning"
+              }`}
+            >
+              {hasText
+                ? "Ready to continue."
+                : "Select at least one Text column."}
+            </span>
+            <Button
+              type="button"
+              onClick={handleNext}
+              disabled={!hasText}
+              className="!rounded-lg"
+            >
+              Next: Prompt Editor
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/CompactToggleSwitch.tsx b/app/components/assessment/CompactToggleSwitch.tsx
new file mode 100644
index 00000000..00920eb8
--- /dev/null
+++ b/app/components/assessment/CompactToggleSwitch.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import {
+  ToggleOffIcon,
+  ToggleOnIcon,
+} from "@/app/components/icons/assessment/ToggleThumbIcons";
+
+interface CompactToggleSwitchProps {
+  checked: boolean;
+  onChange: () => void;
+  title: string;
+}
+
+export default function CompactToggleSwitch({
+  checked,
+  onChange,
+  title,
+}: CompactToggleSwitchProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      onClick={onChange}
+      title={title}
+      className={`h-7 w-12 cursor-pointer flex-shrink-0 rounded-full border p-0.5 transition-colors ${
+        checked
+          ? "border-accent-primary bg-accent-primary"
+          : "border-neutral-200 bg-neutral-50"
+      }`}
+    >
+      <span className="relative flex h-full w-full items-center">
+        <span
+          className={`flex h-5 w-5 items-center justify-center rounded-full shadow-sm transition-transform ${
+            checked
+              ? "translate-x-6 bg-white text-accent-primary"
+              : "translate-x-0 bg-white text-neutral-500"
+          }`}
+        >
+          {checked ? (
+            <ToggleOnIcon className="h-3 w-3" />
+          ) : (
+            <ToggleOffIcon className="h-3 w-3" />
+          )}
+        </span>
+      </span>
+    </button>
+  );
+}
diff --git a/app/components/assessment/ConfigPanel.tsx b/app/components/assessment/ConfigPanel.tsx
new file mode 100644
index 00000000..ea2ac359
--- /dev/null
+++ b/app/components/assessment/ConfigPanel.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+// Multi-step wizard (Column Mapper → Prompt & Config → Review) for configuring an assessment run.
+import { Button } from "@/app/components";
+import { DatabaseIcon } from "@/app/components/icons";
+import { ASSESSMENT_CONFIG_STEPS } from "@/app/lib/assessment/constants";
+import type { ConfigPanelProps } from "@/app/lib/types/assessment";
+import ColumnMapperStep from "./ColumnMapperStep";
+import PromptAndConfigStep from "./PromptAndConfigStep";
+import ReviewStep from "./ReviewStep";
+import Stepper from "./Stepper";
+
+export default function ConfigPanel({
+  canSubmitAssessment,
+  columns,
+  columnMapping,
+  completedSteps,
+  configStep,
+  configs,
+  experimentName,
+  formState,
+  hasDataset,
+  isSubmitting,
+  outputSchema,
+  systemInstruction,
+  promptTemplate,
+  sampleRow,
+  setActiveTabToDatasets,
+  setColumnMapping,
+  setConfigStep,
+  setConfigs,
+  setExperimentName,
+  setOutputSchema,
+  setSystemInstruction,
+  setPromptTemplate,
+  submitBlockerMessage,
+  onSubmit,
+  onStepComplete,
+}: ConfigPanelProps) {
+  if (!hasDataset) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="text-center">
+          <DatabaseIcon className="mx-auto mb-4 h-12 w-12 text-border" />
+          <p className="mb-1 text-sm font-medium text-text-primary">
+            No dataset selected
+          </p>
+          <p className="mb-4 text-xs text-text-secondary">
+            Select a dataset first from the Datasets tab
+          </p>
+          <Button
+            type="button"
+            onClick={setActiveTabToDatasets}
+            className="!rounded-md"
+          >
+            Go to Datasets
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Stepper
+        steps={ASSESSMENT_CONFIG_STEPS}
+        currentStep={configStep}
+        onStepClick={setConfigStep}
+        completedSteps={completedSteps}
+      />
+      <div className="flex min-h-0 flex-1 flex-col overflow-auto px-6 pt-6">
+        <div
+          className={
+            configStep === 1 ? "flex min-h-0 h-full flex-1 flex-col" : "hidden"
+          }
+        >
+          <ColumnMapperStep
+            columns={columns}
+            columnMapping={columnMapping}
+            setColumnMapping={setColumnMapping}
+            onNext={() => onStepComplete(1)}
+            onBack={setActiveTabToDatasets}
+          />
+        </div>
+        <div
+          className={
+            configStep === 2 ? "flex min-h-0 h-full flex-1 flex-col" : "hidden"
+          }
+        >
+          <PromptAndConfigStep
+            textColumns={columnMapping.textColumns}
+            sampleRow={sampleRow}
+            systemInstruction={systemInstruction}
+            setSystemInstruction={setSystemInstruction}
+            promptTemplate={promptTemplate}
+            setPromptTemplate={setPromptTemplate}
+            configs={configs}
+            setConfigs={setConfigs}
+            outputSchema={outputSchema}
+            setOutputSchema={setOutputSchema}
+            onNext={() => onStepComplete(2)}
+            onBack={() => setConfigStep(1)}
+          />
+        </div>
+        <div
+          className={
+            configStep === 3 ? "flex min-h-0 h-full flex-1 flex-col" : "hidden"
+          }
+        >
+          <ReviewStep
+            formState={formState}
+            experimentName={experimentName}
+            setExperimentName={setExperimentName}
+            isSubmitting={isSubmitting}
+            canSubmit={canSubmitAssessment}
+            submitBlockerMessage={submitBlockerMessage}
+            onSubmit={onSubmit}
+            onBack={() => setConfigStep(2)}
+            onEditStep={setConfigStep}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/app/components/assessment/DataViewModal.tsx b/app/components/assessment/DataViewModal.tsx
new file mode 100644
index 00000000..6e2fd197
--- /dev/null
+++ b/app/components/assessment/DataViewModal.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { Modal } from "@/app/components";
+import CloseIcon from "@/app/components/icons/document/CloseIcon";
+interface DataViewModalProps {
+  title: string;
+  subtitle?: string;
+  headers: string[];
+  rows: string[][];
+  onClose: () => void;
+}
+
+/**
+ * Reusable modal for viewing tabular data (dataset preview, result preview).
+ */
+export default function DataViewModal({
+  title,
+  subtitle,
+  headers,
+  rows,
+  onClose,
+}: DataViewModalProps) {
+  return (
+    <Modal
+      open
+      onClose={onClose}
+      maxWidth="w-[85vw] max-w-[1100px]"
+      maxHeight="max-h-[80vh]"
+      showClose={false}
+    >
+      <div className="flex shrink-0 items-center justify-between border-b border-neutral-200 px-6 py-4">
+        <div>
+          <h3 className="text-sm font-semibold text-neutral-900">{title}</h3>
+          <p className="mt-0.5 text-xs text-neutral-500">
+            {subtitle ?? `${rows.length} rows · ${headers.length} columns`}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="cursor-pointer rounded p-1.5 text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900"
+          aria-label="Close"
+        >
+          <CloseIcon className="w-5 h-5" />
+        </button>
+      </div>
+      <div className="flex-1 overflow-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-neutral-200 bg-neutral-50">
+              <th className="sticky top-0 w-10 bg-neutral-50 px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-neutral-500"></th>
+              {headers.map((header, i) => (
+                <th
+                  key={i}
+                  className="sticky top-0 bg-neutral-50 px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-neutral-500"
+                >
+                  {header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, rowIdx) => (
+              <tr key={rowIdx} className="border-b border-neutral-200">
+                <td className="px-4 py-2.5 text-xs text-neutral-500">
+                  {rowIdx + 1}
+                </td>
+                {row.map((cell, cellIdx) => (
+                  <td key={cellIdx} className="px-4 py-2.5 text-neutral-900">
+                    <div className="max-h-[120px] overflow-auto text-sm leading-6">
+                      {cell || <span className="text-neutral-500">—</span>}
+                    </div>
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/assessment/DatasetsTab.tsx b/app/components/assessment/DatasetsTab.tsx
new file mode 100644
index 00000000..246ef75c
--- /dev/null
+++ b/app/components/assessment/DatasetsTab.tsx
@@ -0,0 +1,352 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { apiFetch } from "@/app/lib/apiClient";
+import { Dataset } from "@/app/lib/types/dataset";
+import { useToast } from "@/app/components/Toast";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import {
+  extractCreatedDataset,
+  fetchAndParseDatasetFile,
+  handleForbiddenError,
+  isAllowedDatasetFile,
+} from "@/app/lib/utils/assessment";
+import type {
+  CreateDatasetResponse,
+  DatasetResponse,
+  DatasetsTabProps,
+  DatasetViewModalData,
+} from "@/app/lib/types/assessment";
+import { Button, Modal } from "@/app/components";
+import { WarningIcon } from "@/app/components/icons";
+import DataViewModal from "@/app/components/assessment/DataViewModal";
+import CreatePanel from "@/app/components/assessment/datasets/CreatePanel";
+import DatasetList from "@/app/components/assessment/datasets/DatasetList";
+
+export default function DatasetsTab({
+  onForbidden,
+  datasetId,
+  setDatasetId,
+  setSelectedDatasetName,
+  onColumnsLoaded,
+  onNext,
+}: DatasetsTabProps) {
+  const toast = useToast();
+  const { activeKey, isAuthenticated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [datasets, setDatasets] = useState<Dataset[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
+  const [datasetName, setDatasetName] = useState("");
+  const [datasetDescription, setDatasetDescription] = useState("");
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [viewingId, setViewingId] = useState<number | null>(null);
+  const [viewModalData, setViewModalData] =
+    useState<DatasetViewModalData | null>(null);
+  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+
+  const loadDatasets = useCallback(async () => {
+    if (!isAuthenticated) return;
+    setIsLoading(true);
+    try {
+      const data = await apiFetch<DatasetResponse>(
+        "/api/assessment/datasets",
+        apiKey,
+      );
+      setDatasets(Array.isArray(data) ? data : data.data || []);
+    } catch (error) {
+      if (handleForbiddenError(error, onForbidden)) return;
+      console.error("Failed to load datasets:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiKey, isAuthenticated, onForbidden]);
+
+  useEffect(() => {
+    loadDatasets();
+  }, [loadDatasets]);
+
+  useEffect(() => {
+    if (!datasetId || datasets.length === 0) return;
+    const selected = datasets.find(
+      (dataset) => dataset.dataset_id.toString() === datasetId,
+    );
+    if (selected?.dataset_name) {
+      setSelectedDatasetName(selected.dataset_name);
+    }
+  }, [datasetId, datasets, setSelectedDatasetName]);
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (!isAllowedDatasetFile(file.name)) {
+      toast.error("Please select a CSV or Excel (.xlsx, .xls) file");
+      event.target.value = "";
+      return;
+    }
+
+    setUploadedFile(file);
+    if (!datasetName) {
+      setDatasetName(file.name.replace(/\.(csv|xlsx|xls)$/i, ""));
+    }
+  };
+
+  const resetForm = () => {
+    setDatasetName("");
+    setDatasetDescription("");
+    setUploadedFile(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const handleCreateDataset = async () => {
+    if (!uploadedFile || !datasetName.trim() || !isAuthenticated) return;
+
+    setIsUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", uploadedFile);
+      formData.append("dataset_name", datasetName.trim());
+      if (datasetDescription.trim()) {
+        formData.append("description", datasetDescription.trim());
+      }
+
+      const data = await apiFetch<CreateDatasetResponse>(
+        "/api/assessment/datasets",
+        apiKey,
+        {
+          method: "POST",
+          body: formData,
+        },
+      );
+      await loadDatasets();
+
+      const created = extractCreatedDataset(data);
+      if (created?.dataset_id) {
+        void handleDatasetSelect(
+          created.dataset_id.toString(),
+          created.dataset_name ?? datasetName.trim(),
+        );
+      }
+
+      resetForm();
+      toast.success("Dataset created successfully!");
+    } catch (error) {
+      if (handleForbiddenError(error, onForbidden)) return;
+      toast.error(
+        `Failed to create dataset: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleDatasetSelect = async (id: string, name?: string) => {
+    setDatasetId(id);
+    if (!id) {
+      setSelectedDatasetName("");
+      onColumnsLoaded([]);
+      return;
+    }
+
+    const resolvedName =
+      name ??
+      datasets.find((dataset) => dataset.dataset_id.toString() === id)
+        ?.dataset_name ??
+      "";
+    setSelectedDatasetName(resolvedName);
+
+    setIsLoadingColumns(true);
+    try {
+      const parsed = await fetchAndParseDatasetFile(id, apiKey);
+      const firstRow = parsed.rows[0] || [];
+      const sampleRow = Object.fromEntries(
+        parsed.headers.map((header, index) => [
+          header,
+          String(firstRow[index] ?? ""),
+        ]),
+      );
+      onColumnsLoaded(parsed.headers, sampleRow);
+    } catch (error) {
+      if (handleForbiddenError(error, onForbidden)) return;
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Failed to fetch dataset columns.";
+      onColumnsLoaded([]);
+      setDatasetId("");
+      setSelectedDatasetName("");
+      toast.error(message);
+    } finally {
+      setIsLoadingColumns(false);
+    }
+  };
+
+  const handleViewDataset = async (selectedDatasetId: number, name: string) => {
+    setViewingId(selectedDatasetId);
+    try {
+      const parsed = await fetchAndParseDatasetFile(selectedDatasetId, apiKey);
+      setViewModalData({
+        name,
+        headers: parsed.headers,
+        rows: parsed.rows,
+      });
+    } catch (error) {
+      if (handleForbiddenError(error, onForbidden)) return;
+      toast.error(
+        error instanceof Error ? error.message : "Failed to view dataset",
+      );
+    } finally {
+      setViewingId(null);
+    }
+  };
+
+  const handleDeleteDataset = async (id: number) => {
+    setDeletingId(id);
+    try {
+      await apiFetch(`/api/assessment/datasets/${id}`, apiKey, {
+        method: "DELETE",
+      });
+      toast.success("Dataset deleted");
+      if (datasetId === id.toString()) {
+        setDatasetId("");
+        setSelectedDatasetName("");
+      }
+      void loadDatasets();
+    } catch (error) {
+      if (handleForbiddenError(error, onForbidden)) return;
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete dataset",
+      );
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragging(false);
+
+    const file = event.dataTransfer.files?.[0];
+    if (!file || !isAllowedDatasetFile(file.name)) return;
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    if (!fileInputRef.current) return;
+
+    fileInputRef.current.files = dataTransfer.files;
+    fileInputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+  };
+
+  const canProceed = Boolean(datasetId) && !isLoadingColumns;
+  const datasetPendingDelete = datasets.find(
+    (dataset) => dataset.dataset_id === confirmDeleteId,
+  );
+
+  return (
+    <div className="flex min-h-0 flex-1 overflow-hidden">
+      <DatasetList
+        datasets={datasets}
+        datasetId={datasetId}
+        isLoading={isLoading}
+        isLoadingColumns={isLoadingColumns}
+        viewingId={viewingId}
+        canProceed={canProceed}
+        onSelectDataset={handleDatasetSelect}
+        onViewDataset={handleViewDataset}
+        onRequestDelete={setConfirmDeleteId}
+        onNext={onNext}
+      />
+
+      <CreatePanel
+        datasetName={datasetName}
+        datasetDescription={datasetDescription}
+        uploadedFile={uploadedFile}
+        isDragging={isDragging}
+        isUploading={isUploading}
+        fileInputRef={fileInputRef}
+        onDatasetNameChange={setDatasetName}
+        onDatasetDescriptionChange={setDatasetDescription}
+        onFileSelect={handleFileSelect}
+        onDragOver={(event) => {
+          event.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={handleDrop}
+        onRemoveFile={() => {
+          setUploadedFile(null);
+          if (fileInputRef.current) fileInputRef.current.value = "";
+        }}
+        onResetForm={resetForm}
+        onCreateDataset={handleCreateDataset}
+      />
+
+      {viewModalData && (
+        <DataViewModal
+          title={viewModalData.name}
+          headers={viewModalData.headers}
+          rows={viewModalData.rows}
+          onClose={() => setViewModalData(null)}
+        />
+      )}
+
+      {confirmDeleteId !== null && (
+        <Modal
+          open
+          onClose={() => setConfirmDeleteId(null)}
+          maxWidth="max-w-md"
+          maxHeight="max-h-[90vh]"
+          showClose={false}
+        >
+          <div className="px-6 py-5">
+            <div className="flex items-start gap-3">
+              <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-status-error-bg">
+                <span className="text-status-error">
+                  <WarningIcon className="w-5 h-5" />
+                </span>
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold text-text-primary">
+                  Delete dataset
+                </h3>
+                <p className="mt-1 text-sm text-text-secondary">
+                  Are you sure you want to delete{" "}
+                  <strong className="text-text-primary">
+                    {datasetPendingDelete?.dataset_name}
+                  </strong>
+                  ? This action cannot be undone.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end gap-3 border-t border-border px-6 py-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setConfirmDeleteId(null)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant="danger"
+              onClick={() => {
+                void handleDeleteDataset(confirmDeleteId);
+                setConfirmDeleteId(null);
+              }}
+              disabled={deletingId === confirmDeleteId}
+            >
+              {deletingId === confirmDeleteId ? "Deleting..." : "Delete"}
+            </Button>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/DownloadDropdown.tsx b/app/components/assessment/DownloadDropdown.tsx
new file mode 100644
index 00000000..de2d455f
--- /dev/null
+++ b/app/components/assessment/DownloadDropdown.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/app/components";
+import { ChevronDownIcon } from "@/app/components/icons";
+import DownloadIcon from "@/app/components/icons/assessment/DownloadIcon";
+import type { ExportFormat } from "@/app/lib/types/assessment";
+
+interface DownloadDropdownProps {
+  onDownload: (format: ExportFormat) => void;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+import LoadingSpinner from "@/app/components/assessment/LoadingSpinner";
+
+export default function DownloadDropdown({
+  onDownload,
+  disabled,
+  loading,
+}: DownloadDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node))
+        setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={() => setOpen(!open)}
+        disabled={disabled || loading}
+        className="!rounded-md !px-2.5 !py-1.5 !text-xs"
+        aria-label="Download results"
+        aria-expanded={open}
+      >
+        {loading ? (
+          <LoadingSpinner className="h-3.5 w-3.5" />
+        ) : (
+          <DownloadIcon className="h-3.5 w-3.5" />
+        )}
+        Export
+        <ChevronDownIcon className="h-3 w-3" />
+      </Button>
+      {open && (
+        <div className="absolute right-0 z-10 mt-1 w-36 rounded-md border border-border bg-bg-primary py-1 shadow-lg">
+          {(
+            [
+              ["csv", "CSV File"],
+              ["xlsx", "Excel Sheet"],
+            ] as const
+          ).map(([fmt, label]) => (
+            <Button
+              key={fmt}
+              type="button"
+              variant="ghost"
+              size="sm"
+              fullWidth
+              onClick={() => {
+                onDownload(fmt);
+                setOpen(false);
+              }}
+              className="!justify-start !rounded-none !px-3 !py-2 !text-xs !text-text-primary"
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/EvaluationsTab.tsx b/app/components/assessment/EvaluationsTab.tsx
new file mode 100644
index 00000000..0aa55d85
--- /dev/null
+++ b/app/components/assessment/EvaluationsTab.tsx
@@ -0,0 +1,425 @@
+"use client";
+
+// Assessment Evaluations tab — shows run cards with status, retry, and CSV export.
+import { Button, RunsListSkeleton } from "@/app/components";
+import Select from "@/app/components/Select";
+import { useToast } from "@/app/components/Toast";
+import {
+  DatabaseIcon,
+  ClipboardIcon,
+  EyeIcon,
+  RefreshIcon,
+} from "@/app/components/icons";
+import DataViewModal from "./DataViewModal";
+import DownloadDropdown from "./DownloadDropdown";
+import {
+  canRetryStatus,
+  formatStatusLabel,
+  getResultTone,
+  isCompletedStatus,
+  isFailedStatus,
+} from "@/app/lib/assessment/results";
+import {
+  ASSESSMENT_CARD_CLASSES,
+  STATUS_BADGE_CLASSES,
+  STATUS_FILTER_OPTIONS,
+} from "@/app/lib/assessment/constants";
+import { formatRelativeTime } from "@/app/lib/utils";
+import type { EvaluationsTabProps } from "@/app/lib/types/assessment";
+import useAssessmentResults from "@/app/hooks/useAssessmentResults";
+
+import LoadingSpinner from "@/app/components/assessment/LoadingSpinner";
+
+export default function EvaluationsTab({ onForbidden }: EvaluationsTabProps) {
+  const toast = useToast();
+  const {
+    assessments,
+    filteredRuns,
+    childRunsByAssessment,
+    configDetailsByKey,
+    configLoadingKeys,
+    configErrorKeys,
+    isLoading,
+    statusFilter,
+    setStatusFilter,
+    rerunningId,
+    retryingAssessmentId,
+    expandedId,
+    downloadingId,
+    previewLoading,
+    previewModal,
+    setPreviewModal,
+    loadAssessments,
+    handleExpand,
+    handleRetryAssessment,
+    handleRerun,
+    handlePreview,
+    handleAssessmentDownload,
+    handleRunDownload,
+  } = useAssessmentResults({ onForbidden, toast });
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden bg-bg-secondary">
+      <div className="flex-1 overflow-auto p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-base font-semibold text-text-primary">
+            Evaluation Runs
+          </h2>
+          <div className="flex items-center gap-2">
+            <Select
+              value={statusFilter}
+              onChange={(event) =>
+                setStatusFilter(event.target.value as typeof statusFilter)
+              }
+              options={STATUS_FILTER_OPTIONS}
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={loadAssessments}
+              disabled={isLoading}
+              aria-label="Refresh assessments"
+              className="!p-1.5 !rounded !rounded-md"
+            >
+              <RefreshIcon
+                className={`w-4 h-4 -scale-x-100 ${isLoading ? "animate-spin" : ""}`}
+              />
+            </Button>
+          </div>
+        </div>
+
+        <div className="rounded-lg overflow-visible bg-bg-primary shadow-sm">
+          {isLoading && assessments.length === 0 && <RunsListSkeleton />}
+
+          {!isLoading && assessments.length === 0 && (
+            <div className="p-16 text-center">
+              <ClipboardIcon className="w-12 h-12 mx-auto mb-3 text-border" />
+              <p className="text-sm font-medium mb-1 text-text-primary">
+                No evaluation runs yet
+              </p>
+              <p className="text-xs text-text-secondary">
+                Submit an assessment from the Config tab to get started
+              </p>
+            </div>
+          )}
+
+          {assessments.length > 0 &&
+            (filteredRuns.length > 0 ? (
+              <div className="p-4 space-y-3">
+                {filteredRuns.map((run) => {
+                  const statusTone = getResultTone(run.status);
+                  const statusClass = STATUS_BADGE_CLASSES[statusTone];
+                  const isExpanded = expandedId === run.id;
+                  const childRuns = childRunsByAssessment[run.id] || [];
+                  const canRetryAssessment = canRetryStatus(run.status);
+                  const isRetryingAssessment = retryingAssessmentId === run.id;
+                  const hasCompletedRuns = run.completed_runs > 0;
+
+                  return (
+                    <div
+                      key={run.id}
+                      className={`rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-[3px] ${
+                        ASSESSMENT_CARD_CLASSES[statusTone]
+                      }`}
+                    >
+                      <div className="px-5 py-4">
+                        <div className="flex items-start justify-between gap-4">
+                          <div className="min-w-0 flex-1">
+                            <div className="truncate text-sm font-semibold text-text-primary">
+                              {run.experiment_name}
+                            </div>
+                            <div className="mt-0.5 text-xs text-text-secondary">
+                              {formatRelativeTime(run.inserted_at)}
+                            </div>
+
+                            {(run.status === "failed" ||
+                              run.status === "completed_with_errors") &&
+                              run.error_message && (
+                                <div className="mt-2 text-xs wrap-break-word overflow-hidden text-status-error-text">
+                                  {run.error_message}
+                                </div>
+                              )}
+                          </div>
+
+                          <span
+                            className={`px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide shrink-0 ${statusClass}`}
+                          >
+                            {formatStatusLabel(run.status)}
+                          </span>
+                        </div>
+
+                        <div className="flex items-center justify-between gap-4 mt-3">
+                          <div className="flex items-center gap-3 text-xs text-text-secondary">
+                            {run.dataset_name && (
+                              <span className="flex items-center gap-1.5">
+                                <DatabaseIcon className="shrink-0" />
+                                {run.dataset_name}
+                              </span>
+                            )}
+                            <span className="px-1.5 py-0.5 rounded bg-bg-secondary">
+                              {run.total_runs} configs
+                            </span>
+                            <span>{run.completed_runs} completed</span>
+                            <span>
+                              {run.processing_runs + run.pending_runs} active
+                            </span>
+                            {run.failed_runs > 0 && (
+                              <span className="text-status-error-text">
+                                {run.failed_runs} failed
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex items-center gap-3 shrink-0">
+                            {hasCompletedRuns && (
+                              <DownloadDropdown
+                                onDownload={(fmt) =>
+                                  handleAssessmentDownload(run.id, fmt)
+                                }
+                                disabled={!hasCompletedRuns}
+                                loading={
+                                  downloadingId === `assessment-${run.id}`
+                                }
+                              />
+                            )}
+                            {canRetryAssessment && (
+                              <Button
+                                type="button"
+                                size="sm"
+                                onClick={() => handleRetryAssessment(run.id)}
+                                disabled={isRetryingAssessment}
+                              >
+                                {isRetryingAssessment ? "Retrying..." : "Retry"}
+                              </Button>
+                            )}
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              onClick={() => handleExpand(run.id)}
+                            >
+                              {isExpanded ? "Hide Details" : "View Results"}
+                            </Button>
+                          </div>
+                        </div>
+
+                        {isExpanded && (
+                          <div className="mt-5 space-y-3 border-t border-border pt-4">
+                            <div className="flex items-center justify-between gap-3">
+                              <div>
+                                <div className="text-sm font-semibold text-text-primary">
+                                  Configurations in this assessment
+                                </div>
+                                <div className="mt-1 text-xs text-text-secondary">
+                                  Each configuration keeps its own status,
+                                  preview, and export actions.
+                                </div>
+                              </div>
+                              <div className="rounded-full bg-bg-secondary px-2.5 py-1 text-[11px] font-medium text-text-secondary">
+                                {childRuns.length} run
+                                {childRuns.length !== 1 ? "s" : ""}
+                              </div>
+                            </div>
+
+                            {childRuns.length === 0 ? (
+                              <div className="rounded-xl border border-border bg-bg-secondary">
+                                <RunsListSkeleton count={2} />
+                              </div>
+                            ) : (
+                              childRuns.map((childRun) => {
+                                const childStatusClass =
+                                  STATUS_BADGE_CLASSES[
+                                    getResultTone(childRun.status)
+                                  ];
+                                const isFailedChild = isFailedStatus(
+                                  childRun.status,
+                                );
+                                const isCompletedChild = isCompletedStatus(
+                                  childRun.status,
+                                );
+                                const isRerunning = rerunningId === childRun.id;
+                                const configKey =
+                                  childRun.config_id && childRun.config_version
+                                    ? `${childRun.config_id}:${childRun.config_version}`
+                                    : null;
+                                const configDetail = configKey
+                                  ? configDetailsByKey[configKey]
+                                  : null;
+                                const isConfigLoading = configKey
+                                  ? Boolean(configLoadingKeys[configKey])
+                                  : false;
+                                const configError = configKey
+                                  ? configErrorKeys[configKey]
+                                  : null;
+                                const fallbackName = childRun.config_id
+                                  ? `Config ${childRun.config_id.slice(0, 8)}`
+                                  : "Configuration";
+                                const configName =
+                                  configDetail?.name || fallbackName;
+                                const previewLabel = `${configName}${childRun.config_version ? ` v${childRun.config_version}` : ""}`;
+
+                                return (
+                                  <div
+                                    key={childRun.id}
+                                    className="rounded-xl border border-border bg-bg-secondary p-4"
+                                  >
+                                    <div className="flex items-start justify-between gap-3">
+                                      <div className="min-w-0 flex-1">
+                                        <div className="flex flex-wrap items-center gap-2">
+                                          <span className="text-sm font-semibold text-text-primary">
+                                            {configName}
+                                          </span>
+                                          {childRun.config_version !== null && (
+                                            <span className="rounded-full bg-bg-primary px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-text-secondary">
+                                              v{childRun.config_version}
+                                            </span>
+                                          )}
+                                          {configDetail?.provider &&
+                                            configDetail?.model && (
+                                              <span className="rounded-full bg-bg-primary px-2 py-0.5 text-[10px] font-medium text-text-secondary">
+                                                {configDetail.provider}/
+                                                {configDetail.model}
+                                              </span>
+                                            )}
+                                        </div>
+
+                                        <div className="mt-1 text-sm text-text-secondary">
+                                          {isConfigLoading
+                                            ? "Loading configuration details..."
+                                            : configDetail?.description ||
+                                              configDetail?.commitMessage ||
+                                              "No description available for this configuration."}
+                                        </div>
+
+                                        <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-secondary">
+                                          <span>
+                                            {childRun.total_items} items
+                                          </span>
+                                          {childRun.updated_at && (
+                                            <span>
+                                              {formatRelativeTime(
+                                                childRun.updated_at,
+                                              )}
+                                            </span>
+                                          )}
+                                          {childRun.config_id && (
+                                            <span className="font-mono">
+                                              ID{" "}
+                                              {childRun.config_id.slice(0, 8)}
+                                            </span>
+                                          )}
+                                        </div>
+
+                                        {configError && (
+                                          <div className="mt-2 text-xs text-status-error-text">
+                                            {configError}
+                                          </div>
+                                        )}
+                                        {isFailedChild &&
+                                          childRun.error_message && (
+                                            <div className="mt-2 text-xs text-status-error-text">
+                                              {childRun.error_message}
+                                            </div>
+                                          )}
+                                      </div>
+
+                                      <div className="flex items-center gap-2 flex-shrink-0">
+                                        <span
+                                          className={`rounded-md px-2.5 py-1 text-xs font-bold uppercase tracking-wide ${childStatusClass}`}
+                                        >
+                                          {formatStatusLabel(childRun.status)}
+                                        </span>
+                                        {isCompletedChild && (
+                                          <Button
+                                            type="button"
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() =>
+                                              handlePreview(
+                                                childRun.id,
+                                                previewLabel,
+                                              )
+                                            }
+                                            disabled={
+                                              previewLoading === childRun.id
+                                            }
+                                            className={`!rounded-md !px-2.5 !py-1.5 !text-xs ${
+                                              previewLoading === childRun.id
+                                                ? "opacity-50"
+                                                : ""
+                                            }`}
+                                          >
+                                            {previewLoading === childRun.id ? (
+                                              <LoadingSpinner className="w-3.5 h-3.5" />
+                                            ) : (
+                                              <EyeIcon className="w-3.5 h-3.5" />
+                                            )}
+                                            Preview
+                                          </Button>
+                                        )}
+                                        {isCompletedChild && (
+                                          <DownloadDropdown
+                                            onDownload={(fmt) =>
+                                              handleRunDownload(
+                                                childRun.id,
+                                                fmt,
+                                              )
+                                            }
+                                            loading={
+                                              downloadingId ===
+                                              `run-${childRun.id}`
+                                            }
+                                          />
+                                        )}
+                                        {isFailedChild && (
+                                          <Button
+                                            type="button"
+                                            size="sm"
+                                            onClick={() =>
+                                              handleRerun(childRun)
+                                            }
+                                            disabled={isRerunning}
+                                            className="!rounded-lg !px-3 !py-1.5 !text-xs"
+                                          >
+                                            {isRerunning
+                                              ? "Re-running..."
+                                              : "Re-run"}
+                                          </Button>
+                                        )}
+                                      </div>
+                                    </div>
+                                  </div>
+                                );
+                              })
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="p-16 text-center">
+                <p className="text-sm font-medium mb-1 text-text-primary">
+                  No {statusFilter} runs
+                </p>
+                <p className="text-xs text-text-secondary">
+                  No evaluation runs with status &quot;{statusFilter}&quot;
+                </p>
+              </div>
+            ))}
+        </div>
+      </div>
+
+      {previewModal && (
+        <DataViewModal
+          title={previewModal.title}
+          subtitle={`${previewModal.rows.length} rows · ${previewModal.headers.length} columns`}
+          headers={previewModal.headers}
+          rows={previewModal.rows}
+          onClose={() => setPreviewModal(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/JsonEditor.tsx b/app/components/assessment/JsonEditor.tsx
new file mode 100644
index 00000000..02422ef1
--- /dev/null
+++ b/app/components/assessment/JsonEditor.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { useRef, useCallback, useId } from "react";
+import { Button } from "@/app/components";
+import { JSON_EDITOR_FONT_CLASSES } from "@/app/lib/assessment/constants";
+import { highlightJson } from "@/app/lib/utils/assessment";
+import type { ValueSetter } from "@/app/lib/types/assessment";
+
+interface JsonEditorProps {
+  value: string;
+  onChange: ValueSetter<string>;
+  error?: string | null;
+  isValid?: boolean;
+  placeholder?: string;
+  minHeight?: number;
+}
+
+export default function JsonEditor({
+  value,
+  onChange,
+  error,
+  isValid,
+  placeholder,
+  minHeight = 400,
+}: JsonEditorProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const preRef = useRef<HTMLPreElement>(null);
+  const textareaId = useId();
+  const errorId = `${textareaId}-error`;
+
+  const syncScroll = useCallback(() => {
+    if (textareaRef.current && preRef.current) {
+      preRef.current.scrollTop = textareaRef.current.scrollTop;
+      preRef.current.scrollLeft = textareaRef.current.scrollLeft;
+    }
+  }, []);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const el = e.currentTarget;
+      const s = el.selectionStart;
+      const newVal =
+        value.substring(0, s) + "  " + value.substring(el.selectionEnd);
+      onChange(newVal);
+      requestAnimationFrame(() => {
+        el.selectionStart = el.selectionEnd = s + 2;
+      });
+      return;
+    }
+    const pairs: Record<string, string> = { "{": "}", "[": "]" };
+    if (pairs[e.key]) {
+      const el = e.currentTarget;
+      const s = el.selectionStart;
+      if (s === el.selectionEnd) {
+        e.preventDefault();
+        const newVal =
+          value.substring(0, s) + e.key + pairs[e.key] + value.substring(s);
+        onChange(newVal);
+        requestAnimationFrame(() => {
+          el.selectionStart = el.selectionEnd = s + 1;
+        });
+      }
+    }
+  };
+
+  const borderColor = error
+    ? "border-status-error/40"
+    : isValid && value.trim()
+      ? "border-status-success/35"
+      : "border-border";
+  const minHeightClass = minHeight === 420 ? "min-h-[420px]" : "min-h-[400px]";
+  const statusClass = error
+    ? "bg-status-error-bg text-status-error-text"
+    : isValid
+      ? "bg-status-success-bg text-status-success-text"
+      : "";
+
+  return (
+    <div className={`overflow-hidden rounded-xl border ${borderColor}`}>
+      {/* Minimal top bar */}
+      <div className="flex items-center justify-between border-b border-border bg-bg-secondary px-4 py-2">
+        <div className="flex items-center gap-2">
+          <span
+            className={`${JSON_EDITOR_FONT_CLASSES} text-[11px] text-text-secondary`}
+          >
+            JSON
+          </span>
+          {value.trim() && (
+            <span
+              className={`rounded-full px-1.5 py-0.5 text-[10px] ${statusClass}`}
+            >
+              {error ? "Invalid" : isValid ? "Valid" : ""}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          {error && (
+            <span
+              id={errorId}
+              role="alert"
+              aria-live="polite"
+              className="max-w-xs truncate text-[11px] text-status-error"
+            >
+              {error}
+            </span>
+          )}
+          {value.trim() && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => onChange("")}
+              className="!px-2 !py-1 !text-xs"
+            >
+              Clear
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Editor */}
+      <div className={`relative overflow-auto bg-bg-primary ${minHeightClass}`}>
+        {/* Placeholder */}
+        {!value && placeholder && (
+          <pre
+            aria-hidden
+            className={`pointer-events-none absolute inset-0 z-0 m-0 px-5 py-4 text-border ${JSON_EDITOR_FONT_CLASSES}`}
+          >
+            {placeholder}
+          </pre>
+        )}
+
+        {/* Highlighted layer */}
+        <pre
+          ref={preRef}
+          aria-hidden
+          className={`pointer-events-none absolute inset-0 z-10 m-0 overflow-hidden whitespace-pre break-normal px-5 py-4 ${JSON_EDITOR_FONT_CLASSES} ${minHeightClass}`}
+          dangerouslySetInnerHTML={{ __html: highlightJson(value) + "\n" }}
+        />
+
+        {/* Editable layer */}
+        <textarea
+          id={textareaId}
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onScroll={syncScroll}
+          spellCheck={false}
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          aria-label="JSON editor"
+          aria-invalid={!!error}
+          aria-describedby={error ? errorId : undefined}
+          className={`relative z-20 block w-full resize-none border-none bg-transparent px-5 py-4 text-transparent outline-none caret-text-primary whitespace-pre break-normal ${JSON_EDITOR_FONT_CLASSES} ${minHeightClass}`}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/LoadingSpinner.tsx b/app/components/assessment/LoadingSpinner.tsx
new file mode 100644
index 00000000..e89bcb8c
--- /dev/null
+++ b/app/components/assessment/LoadingSpinner.tsx
@@ -0,0 +1,7 @@
+export default function LoadingSpinner({ className }: { className: string }) {
+  return (
+    <div
+      className={`${className} animate-spin rounded-full border-2 border-accent-primary border-t-transparent`}
+    />
+  );
+}
diff --git a/app/components/assessment/OutputSchemaEditor.tsx b/app/components/assessment/OutputSchemaEditor.tsx
new file mode 100644
index 00000000..d0ec9809
--- /dev/null
+++ b/app/components/assessment/OutputSchemaEditor.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { SchemaProperty, ValueSetter } from "@/app/lib/types/assessment";
+import OutputSchemaEditorInner from "./output-schema/OutputSchemaEditorInner";
+
+interface OutputSchemaEditorProps {
+  schema: SchemaProperty[];
+  setSchema: ValueSetter<SchemaProperty[]>;
+  title?: string;
+  description?: ReactNode;
+}
+
+export { default as OutputSchemaModal } from "./output-schema/OutputSchemaModal";
+
+export function OutputSchemaEditor({
+  schema,
+  setSchema,
+  title = "Response Format",
+  description,
+}: OutputSchemaEditorProps) {
+  return (
+    <div className="space-y-5">
+      {title && (
+        <div>
+          <h2 className="text-lg font-semibold text-text-primary">{title}</h2>
+          {description ? (
+            <p className="mt-0.5 text-xs text-text-secondary">{description}</p>
+          ) : null}
+        </div>
+      )}
+      <OutputSchemaEditorInner schema={schema} setSchema={setSchema} />
+    </div>
+  );
+}
+
+export default OutputSchemaEditor;
diff --git a/app/components/assessment/OutputSchemaStep.tsx b/app/components/assessment/OutputSchemaStep.tsx
new file mode 100644
index 00000000..87709da1
--- /dev/null
+++ b/app/components/assessment/OutputSchemaStep.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "@/app/components";
+import { ChevronLeftIcon } from "@/app/components/icons";
+import type { SchemaProperty, ValueSetter } from "@/app/lib/types/assessment";
+import { OutputSchemaEditor } from "./OutputSchemaEditor";
+
+interface OutputSchemaStepProps {
+  onNext: () => void;
+  onBack: () => void;
+  schema: SchemaProperty[];
+  setSchema: ValueSetter<SchemaProperty[]>;
+}
+
+export default function OutputSchemaStep({
+  schema,
+  setSchema,
+  onNext,
+  onBack,
+}: OutputSchemaStepProps) {
+  return (
+    <div className="mx-auto flex h-full min-h-0 max-w-2xl flex-col">
+      <div className="flex-1 space-y-5 pb-16">
+        <OutputSchemaEditor
+          schema={schema}
+          setSchema={setSchema}
+          description="Leave this empty for free text, or add fields if you want a structured response."
+        />
+      </div>
+
+      <div className="mt-auto sticky bottom-0 z-10 -mx-6 flex items-center justify-between border-t border-border bg-bg-secondary px-6 py-2">
+        <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onBack}
+            className="!rounded-lg"
+          >
+            <ChevronLeftIcon className="w-3.5 h-3.5" />
+            Back
+          </Button>
+          <Button type="button" onClick={onNext} className="!rounded-lg">
+            Next: Review
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/PageLayout.tsx b/app/components/assessment/PageLayout.tsx
new file mode 100644
index 00000000..3c129f80
--- /dev/null
+++ b/app/components/assessment/PageLayout.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+// Top-level layout for /assessment: sidebar, tab navigation, and active tab content.
+import Sidebar from "@/app/components/Sidebar";
+import TabNavigation from "@/app/components/TabNavigation";
+import PageHeader from "@/app/components/PageHeader";
+import { useApp } from "@/app/lib/context/AppContext";
+import type { PageLayoutProps } from "@/app/lib/types/assessment";
+import ConfigPanel from "./ConfigPanel";
+import DatasetsTab from "./DatasetsTab";
+import EvaluationsTab from "./EvaluationsTab";
+
+export default function PageLayout({
+  activeTab,
+  tabs,
+  onTabSwitch,
+  datasetsTabProps,
+  configPanelProps,
+  evaluationsTabProps,
+}: PageLayoutProps) {
+  const { sidebarCollapsed } = useApp();
+
+  return (
+    <div className="flex h-screen w-full flex-col bg-neutral-50">
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar collapsed={sidebarCollapsed} activeRoute="/assessment" />
+
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <PageHeader
+            title="Assessment"
+            subtitle="Multi-modal batch evaluation with prompt templates, attachments, and config comparison"
+          />
+
+          <TabNavigation
+            activeTab={activeTab}
+            tabs={tabs}
+            onTabChange={(tabId) => onTabSwitch(tabId as typeof activeTab)}
+          />
+
+          {activeTab === "datasets" && (
+            <div className="flex-1 overflow-hidden flex flex-col">
+              <DatasetsTab {...datasetsTabProps} />
+            </div>
+          )}
+
+          <div
+            className={`flex min-h-0 flex-1 flex-col overflow-hidden ${
+              activeTab === "config" ? "" : "hidden"
+            }`}
+          >
+            <ConfigPanel {...configPanelProps} />
+          </div>
+
+          {activeTab === "results" && (
+            <div className="flex-1 overflow-hidden flex flex-col">
+              <EvaluationsTab {...evaluationsTabProps} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/PromptAndConfigStep.tsx b/app/components/assessment/PromptAndConfigStep.tsx
new file mode 100644
index 00000000..4d1eff52
--- /dev/null
+++ b/app/components/assessment/PromptAndConfigStep.tsx
@@ -0,0 +1,499 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useToast } from "@/app/components/Toast";
+import { Button } from "@/app/components";
+import { ChevronLeftIcon } from "@/app/components/icons";
+import { DEFAULT_PAGE_LIMIT } from "@/app/lib/constants";
+import { ASSESSMENT_CONFIG_VERSION_PAGE_SIZE } from "@/app/lib/assessment/constants";
+import {
+  buildDefaultParams,
+  buildInitialAssessmentConfigDraft,
+  buildInitialAssessmentVersionState,
+  fetchConfigPage,
+  fetchConfigSelection,
+  fetchConfigVersionsPage,
+  getDefaultModelForProvider,
+  getModelConfigDefinition,
+  getModelsByProvider,
+  saveAssessmentConfig,
+} from "@/app/lib/utils/assessmentFetcher";
+import {
+  MAX_CONFIGS,
+  type ConfigMode,
+  type ConfigSelection,
+  type SampleRow,
+  type SchemaProperty,
+  type StateSetter,
+  type ValueSetter,
+  type VersionListState,
+} from "@/app/lib/types/assessment";
+import type { ConfigBlob, ConfigPublic } from "@/app/lib/types/configs";
+import AssessmentConfiguration from "./prompt-config/AssessmentConfiguration";
+import SetupProgress from "./prompt-config/SetupProgress";
+import PromptPanel from "./prompt-config/PromptPanel";
+import ResponseSchema from "./prompt-config/ResponseSchema";
+
+interface PromptAndConfigStepProps {
+  onNext: () => void;
+  onBack: () => void;
+  textColumns: string[];
+  sampleRow: SampleRow;
+  systemInstruction: string;
+  setSystemInstruction: ValueSetter<string>;
+  promptTemplate: string;
+  setPromptTemplate: ValueSetter<string>;
+  configs: ConfigSelection[];
+  setConfigs: StateSetter<ConfigSelection[]>;
+  outputSchema: SchemaProperty[];
+  setOutputSchema: ValueSetter<SchemaProperty[]>;
+}
+
+export default function PromptAndConfigStep({
+  textColumns,
+  sampleRow,
+  systemInstruction,
+  setSystemInstruction,
+  promptTemplate,
+  setPromptTemplate,
+  configs,
+  setConfigs,
+  outputSchema,
+  setOutputSchema,
+  onNext,
+  onBack,
+}: PromptAndConfigStepProps) {
+  const toast = useToast();
+  const { activeKey, isAuthenticated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+
+  const [configMode, setConfigMode] = useState<ConfigMode>("existing");
+  const [configCards, setConfigCards] = useState<ConfigPublic[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isLoadingConfigs, setIsLoadingConfigs] = useState(true);
+  const [hasMoreConfigs, setHasMoreConfigs] = useState(true);
+  const [nextConfigSkip, setNextConfigSkip] = useState(0);
+  const [expandedConfigId, setExpandedConfigId] = useState<string | null>(null);
+  const [versionStateByConfig, setVersionStateByConfig] = useState<
+    Record<string, VersionListState>
+  >({});
+  const [loadingSelectionKeys, setLoadingSelectionKeys] = useState<
+    Record<string, boolean>
+  >({});
+  const hasLoadedInitialConfigsRef = useRef(false);
+
+  const [draft, setDraft] = useState<ConfigBlob>(() =>
+    buildInitialAssessmentConfigDraft(),
+  );
+  const [configName, setConfigName] = useState("");
+  const [commitMessage, setCommitMessage] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+
+  const draftParams = draft.completion.params as Record<
+    string,
+    string | number | undefined
+  >;
+  const currentProvider = draft.completion.provider ?? "openai";
+  const providerModels = useMemo(
+    () => getModelsByProvider(currentProvider),
+    [currentProvider],
+  );
+  const currentModel = String(draftParams.model || providerModels[0]?.value);
+  const currentParamDefs = useMemo(
+    () => getModelConfigDefinition(currentModel),
+    [currentModel],
+  );
+
+  const usedColumns = useMemo(
+    () => textColumns.filter((col) => promptTemplate.includes(`{${col}}`)),
+    [promptTemplate, textColumns],
+  );
+  const namedSchemaFields = outputSchema.filter((field) => field.name.trim());
+  const hasPromptTemplate = promptTemplate.trim().length > 0;
+  const hasConfiguredResponseFormat = namedSchemaFields.length > 0;
+  const canProceed =
+    hasPromptTemplate && configs.length > 0 && hasConfiguredResponseFormat;
+  const nextBlockerMessage = !hasPromptTemplate
+    ? "Write a prompt to continue"
+    : configs.length === 0
+      ? "Select at least one configuration to continue"
+      : !hasConfiguredResponseFormat
+        ? "Set response format to continue"
+        : "";
+  const responseSummary =
+    namedSchemaFields.length > 0
+      ? `${namedSchemaFields.length} fields`
+      : "Not set";
+  const promptStatus = promptTemplate.trim()
+    ? `${usedColumns.length} placeholders`
+    : "Empty";
+
+  const isSelected = useCallback(
+    (configId: string, version: number) =>
+      configs.some(
+        (config) =>
+          config.config_id === configId && config.config_version === version,
+      ),
+    [configs],
+  );
+
+  const addSelection = useCallback(
+    (selection: ConfigSelection) => {
+      if (
+        configs.some(
+          (config) =>
+            config.config_id === selection.config_id &&
+            config.config_version === selection.config_version,
+        )
+      ) {
+        toast.error("This configuration version is already selected");
+        return;
+      }
+      if (configs.length >= MAX_CONFIGS) {
+        toast.error(`You can select up to ${MAX_CONFIGS} configurations`);
+        return;
+      }
+      setConfigs((prev) => [...prev, selection]);
+    },
+    [configs, setConfigs, toast],
+  );
+
+  const removeSelection = useCallback(
+    (configId: string, version: number) => {
+      setConfigs((prev) =>
+        prev.filter(
+          (config) =>
+            !(
+              config.config_id === configId && config.config_version === version
+            ),
+        ),
+      );
+    },
+    [setConfigs],
+  );
+
+  const toggleVersionSelection = useCallback(
+    async (config: ConfigPublic, version: number) => {
+      if (!isAuthenticated) return;
+      const key = `${config.id}:${version}`;
+      if (isSelected(config.id, version)) {
+        removeSelection(config.id, version);
+        return;
+      }
+      setLoadingSelectionKeys((prev) => ({ ...prev, [key]: true }));
+      try {
+        const selection = await fetchConfigSelection(apiKey, config, version);
+        addSelection(selection);
+      } catch {
+        toast.error("Failed to load configuration details");
+      } finally {
+        setLoadingSelectionKeys((prev) => ({ ...prev, [key]: false }));
+      }
+    },
+    [addSelection, apiKey, isAuthenticated, isSelected, removeSelection, toast],
+  );
+
+  const loadConfigs = useCallback(
+    async (skip: number, replace: boolean) => {
+      if (!isAuthenticated) {
+        if (replace) setIsLoadingConfigs(false);
+        return;
+      }
+      if (replace) setIsLoadingConfigs(true);
+      try {
+        const result = await fetchConfigPage({
+          apiKey,
+          skip,
+          limit: DEFAULT_PAGE_LIMIT,
+        });
+        setConfigCards((prev) =>
+          replace ? result.items : [...prev, ...result.items],
+        );
+        setHasMoreConfigs(result.hasMore);
+        setNextConfigSkip(result.nextSkip);
+      } catch {
+        toast.error("Failed to load configurations");
+      } finally {
+        setIsLoadingConfigs(false);
+      }
+    },
+    [apiKey, isAuthenticated, toast],
+  );
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    if (!hasLoadedInitialConfigsRef.current) {
+      hasLoadedInitialConfigsRef.current = true;
+      void loadConfigs(0, true);
+    }
+  }, [isAuthenticated, loadConfigs]);
+
+  const filteredConfigCards = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return configCards;
+    return configCards.filter((config) =>
+      `${config.name} ${config.description || ""}`
+        .toLowerCase()
+        .includes(query),
+    );
+  }, [configCards, searchQuery]);
+
+  const loadVersions = useCallback(
+    async (configId: string, skip: number) => {
+      if (!isAuthenticated) return;
+      setVersionStateByConfig((prev) => ({
+        ...prev,
+        [configId]: {
+          ...(prev[configId] ?? buildInitialAssessmentVersionState()),
+          isLoading: true,
+          error: null,
+        },
+      }));
+      try {
+        const result = await fetchConfigVersionsPage(apiKey, configId, {
+          skip,
+          limit: ASSESSMENT_CONFIG_VERSION_PAGE_SIZE,
+        });
+        setVersionStateByConfig((prev) => {
+          const existing =
+            prev[configId] ?? buildInitialAssessmentVersionState();
+          return {
+            ...prev,
+            [configId]: {
+              items:
+                skip === 0
+                  ? result.items
+                  : [...existing.items, ...result.items],
+              isLoading: false,
+              error: null,
+              hasMore: result.hasMore,
+              nextSkip: result.nextSkip,
+            },
+          };
+        });
+      } catch {
+        setVersionStateByConfig((prev) => ({
+          ...prev,
+          [configId]: {
+            ...(prev[configId] ?? buildInitialAssessmentVersionState()),
+            isLoading: false,
+            error: "Failed to load versions",
+          },
+        }));
+      }
+    },
+    [apiKey, isAuthenticated],
+  );
+
+  const toggleConfigExpansion = useCallback(
+    (configId: string) => {
+      if (expandedConfigId === configId) {
+        setExpandedConfigId(null);
+        return;
+      }
+      setExpandedConfigId(configId);
+      if (!versionStateByConfig[configId]) {
+        void loadVersions(configId, 0);
+      }
+    },
+    [expandedConfigId, loadVersions, versionStateByConfig],
+  );
+
+  const updateDraftParam = (key: string, value: string | number) => {
+    setDraft((prev) => ({
+      ...prev,
+      completion: {
+        ...prev.completion,
+        params: { ...prev.completion.params, [key]: value },
+      },
+    }));
+  };
+
+  const handleProviderChange = (provider: "openai") => {
+    const defaultModel = getDefaultModelForProvider(provider);
+    setDraft((prev) => ({
+      ...prev,
+      completion: {
+        ...prev.completion,
+        provider,
+        params: {
+          instructions: String(prev.completion.params.instructions || ""),
+          model: defaultModel,
+          ...buildDefaultParams(defaultModel),
+        },
+      },
+    }));
+  };
+
+  const handleModelChange = (modelName: string) => {
+    setDraft((prev) => ({
+      ...prev,
+      completion: {
+        ...prev.completion,
+        params: {
+          instructions: String(prev.completion.params.instructions || ""),
+          model: modelName,
+          ...buildDefaultParams(modelName),
+        },
+      },
+    }));
+  };
+
+  const handleCreateAndAdd = async () => {
+    if (!isAuthenticated) {
+      toast.error("Please sign in to create configurations");
+      return;
+    }
+    if (!configName.trim()) {
+      toast.error("Configuration name is required");
+      return;
+    }
+    setIsSaving(true);
+    try {
+      const existingConfig =
+        configCards.find(
+          (c) =>
+            c.name.trim().toLowerCase() === configName.trim().toLowerCase(),
+        ) ?? null;
+      const saved = await saveAssessmentConfig({
+        apiKey,
+        configName: configName.trim(),
+        commitMessage: commitMessage.trim(),
+        configBlob: draft,
+        existingConfig: existingConfig
+          ? { id: existingConfig.id, name: existingConfig.name }
+          : null,
+      });
+      addSelection({
+        config_id: saved.config_id,
+        config_version: saved.config_version,
+        name: configName.trim(),
+        provider: draft.completion.provider,
+        model: currentModel,
+      });
+      setDraft(buildInitialAssessmentConfigDraft());
+      setConfigName("");
+      setCommitMessage("");
+      setConfigMode("existing");
+      toast.success("Configuration saved and added!");
+      void loadConfigs(0, true);
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to save configuration",
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col">
+      <div className="mx-auto w-full max-w-7xl flex-1 pb-20">
+        <div className="mb-6 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <h2 className="text-xl font-semibold text-text-primary">
+              Prompt & Config
+            </h2>
+            <p className="mt-1 text-sm text-text-secondary">
+              Write the task on the left. Tune behavior and output on the right.
+            </p>
+          </div>
+          <SetupProgress
+            promptStatus={promptStatus}
+            selectedConfigCount={configs.length}
+            responseSummary={responseSummary}
+          />
+        </div>
+
+        <div className="grid gap-8 lg:grid-cols-[minmax(0,1.02fr)_minmax(330px,1fr)] xl:grid-cols-[minmax(0,1fr)_minmax(360px,1.05fr)]">
+          <PromptPanel
+            textColumns={textColumns}
+            sampleRow={sampleRow}
+            systemInstruction={systemInstruction}
+            setSystemInstruction={setSystemInstruction}
+            promptTemplate={promptTemplate}
+            setPromptTemplate={setPromptTemplate}
+          />
+
+          <aside className="self-start space-y-5 lg:sticky lg:top-6 lg:min-w-[330px] xl:min-w-[360px]">
+            <ResponseSchema
+              schema={outputSchema}
+              setSchema={setOutputSchema}
+              summary={responseSummary}
+              hasFields={hasConfiguredResponseFormat}
+            />
+
+            <AssessmentConfiguration
+              configMode={configMode}
+              setConfigMode={setConfigMode}
+              configs={configs}
+              onRemoveConfig={removeSelection}
+              configCards={filteredConfigCards}
+              searchQuery={searchQuery}
+              setSearchQuery={setSearchQuery}
+              isLoadingConfigs={isLoadingConfigs}
+              hasMoreConfigs={hasMoreConfigs}
+              nextConfigSkip={nextConfigSkip}
+              expandedConfigId={expandedConfigId}
+              versionStateByConfig={versionStateByConfig}
+              loadingSelectionKeys={loadingSelectionKeys}
+              isSelected={isSelected}
+              onLoadMoreConfigs={(skip) => void loadConfigs(skip, false)}
+              onLoadVersions={(configId, skip) =>
+                void loadVersions(configId, skip)
+              }
+              onToggleConfigExpansion={toggleConfigExpansion}
+              onToggleVersionSelection={toggleVersionSelection}
+              currentProvider={currentProvider}
+              currentModel={currentModel}
+              providerModels={providerModels}
+              currentParamDefs={currentParamDefs}
+              draftParams={draftParams}
+              configName={configName}
+              commitMessage={commitMessage}
+              isSaving={isSaving}
+              setConfigName={setConfigName}
+              setCommitMessage={setCommitMessage}
+              onProviderChange={handleProviderChange}
+              onModelChange={handleModelChange}
+              onParamChange={updateDraftParam}
+              onSaveConfig={handleCreateAndAdd}
+            />
+          </aside>
+        </div>
+      </div>
+
+      <div className="sticky bottom-0 z-10 mt-auto -mx-6 flex items-center justify-between border-t border-border bg-bg-secondary px-6 py-2">
+        <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
+          <Button
+            type="button"
+            variant="outline"
+            size="lg"
+            onClick={onBack}
+            className="!rounded-lg !px-6"
+          >
+            <ChevronLeftIcon className="h-3.5 w-3.5" />
+            Back
+          </Button>
+          <div className="flex items-center gap-3">
+            {!canProceed && (
+              <span className="text-xs text-text-secondary">
+                {nextBlockerMessage}
+              </span>
+            )}
+            <Button
+              type="button"
+              size="lg"
+              onClick={onNext}
+              disabled={!canProceed}
+              className="!rounded-lg !px-6"
+            >
+              Next: Review
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/ReviewStep.tsx b/app/components/assessment/ReviewStep.tsx
new file mode 100644
index 00000000..29bd9620
--- /dev/null
+++ b/app/components/assessment/ReviewStep.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { useState } from "react";
+import {
+  INITIAL_REVIEW_OPEN_SECTIONS,
+  REVIEW_SECTIONS,
+} from "@/app/lib/assessment/constants";
+import type {
+  AssessmentFormState,
+  ValueSetter,
+} from "@/app/lib/types/assessment";
+import { buildMappedColumns } from "@/app/lib/utils/assessment";
+
+interface ReviewStepProps {
+  formState: AssessmentFormState;
+  experimentName: string;
+  setExperimentName: ValueSetter<string>;
+  isSubmitting: boolean;
+  canSubmit: boolean;
+  submitBlockerMessage: string;
+  onSubmit: () => void;
+  onBack: () => void;
+  onEditStep: ValueSetter<number>;
+}
+import ColumnsReview from "./review/ColumnsReview";
+import ConfigsReview from "./review/ConfigsReview";
+import DatasetReview from "./review/DatasetReview";
+import ExperimentReview from "./review/ExperimentReview";
+import InputReview from "./review/InputReview";
+import SchemaReview from "./review/SchemaReview";
+import SubmitReview from "./review/SubmitReview";
+
+export default function ReviewStep({
+  formState,
+  experimentName,
+  setExperimentName,
+  isSubmitting,
+  canSubmit,
+  submitBlockerMessage,
+  onSubmit,
+  onBack,
+  onEditStep,
+}: ReviewStepProps) {
+  const {
+    datasetName,
+    columnMapping,
+    systemInstruction,
+    promptTemplate,
+    outputSchema,
+    configs,
+  } = formState;
+  const [openSections, setOpenSections] = useState<Set<number>>(
+    () => new Set(INITIAL_REVIEW_OPEN_SECTIONS),
+  );
+
+  const mappedColumns = buildMappedColumns(columnMapping);
+  const mappedColumnCount =
+    columnMapping.textColumns.length +
+    columnMapping.attachments.length +
+    columnMapping.groundTruthColumns.length;
+
+  const toggleSection = (section: number) => {
+    setOpenSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col">
+      <div className="mx-auto w-full max-w-2xl flex-1 space-y-4 pb-8">
+        <div className="mb-2">
+          <h2 className="text-lg font-semibold text-text-primary">
+            Review & Submit
+          </h2>
+          <p className="mt-1 text-sm text-text-secondary">
+            Verify your evaluation configuration before submitting.
+          </p>
+        </div>
+
+        <ExperimentReview
+          experimentName={experimentName}
+          setExperimentName={setExperimentName}
+        />
+
+        <DatasetReview
+          datasetName={datasetName}
+          isOpen={openSections.has(REVIEW_SECTIONS.dataset)}
+          onToggle={() => toggleSection(REVIEW_SECTIONS.dataset)}
+        />
+
+        <ColumnsReview
+          mappedColumns={mappedColumns}
+          mappedCount={mappedColumnCount}
+          isOpen={openSections.has(REVIEW_SECTIONS.columns)}
+          onToggle={() => toggleSection(REVIEW_SECTIONS.columns)}
+          onEdit={() => onEditStep(1)}
+        />
+
+        <InputReview
+          systemInstruction={systemInstruction}
+          promptTemplate={promptTemplate}
+          isOpen={openSections.has(REVIEW_SECTIONS.input)}
+          onToggle={() => toggleSection(REVIEW_SECTIONS.input)}
+        />
+
+        <ConfigsReview
+          configs={configs}
+          isOpen={openSections.has(REVIEW_SECTIONS.configs)}
+          onToggle={() => toggleSection(REVIEW_SECTIONS.configs)}
+          onEdit={() => onEditStep(2)}
+        />
+
+        <SchemaReview
+          outputSchema={outputSchema}
+          isOpen={openSections.has(REVIEW_SECTIONS.schema)}
+          onToggle={() => toggleSection(REVIEW_SECTIONS.schema)}
+          onEdit={() => onEditStep(2)}
+        />
+      </div>
+
+      <SubmitReview
+        isSubmitting={isSubmitting}
+        canSubmit={canSubmit}
+        submitBlockerMessage={submitBlockerMessage}
+        onSubmit={onSubmit}
+        onBack={onBack}
+      />
+    </div>
+  );
+}
diff --git a/app/components/assessment/Stepper.tsx b/app/components/assessment/Stepper.tsx
new file mode 100644
index 00000000..5988bc9f
--- /dev/null
+++ b/app/components/assessment/Stepper.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { Button } from "@/app/components";
+import { CheckIcon } from "@/app/components/icons";
+import type { Step, ValueSetter } from "@/app/lib/types/assessment";
+
+interface StepperProps {
+  steps: Step[];
+  currentStep: number;
+  onStepClick: ValueSetter<number>;
+  completedSteps: Set<number>;
+}
+
+export default function Stepper({
+  steps,
+  currentStep,
+  onStepClick,
+  completedSteps,
+}: StepperProps) {
+  return (
+    <div className="flex flex-wrap items-center gap-2 border-b border-border bg-bg-primary px-6 py-4">
+      {steps.map((step, index) => {
+        const isActive = currentStep === step.id;
+        const isCompleted = completedSteps.has(step.id);
+        const isSequentiallyUnlocked =
+          step.id > currentStep &&
+          steps
+            .filter((s) => s.id < step.id)
+            .every((s) => completedSteps.has(s.id));
+        const isClickable =
+          isCompleted || step.id <= currentStep || isSequentiallyUnlocked;
+
+        return (
+          <div key={step.id} className="flex items-center gap-2">
+            {index > 0 && (
+              <div
+                className={`h-px w-8 ${
+                  isCompleted || isActive ? "bg-accent-primary" : "bg-border"
+                }`}
+              />
+            )}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => isClickable && onStepClick(step.id)}
+              disabled={!isClickable}
+              className={`!rounded-full !px-3 !py-1.5 !text-left !text-xs ${
+                isActive
+                  ? "!border-accent-primary !bg-accent-primary !text-white"
+                  : isCompleted
+                    ? "!bg-bg-secondary !text-text-primary"
+                    : "!bg-transparent !text-text-secondary"
+              } ${isClickable ? "opacity-100" : "cursor-default opacity-50"}`}
+            >
+              {isCompleted && !isActive ? (
+                <CheckIcon className="w-3.5 h-3.5" />
+              ) : (
+                <span className="w-4 h-4 flex items-center justify-center text-[10px] font-bold">
+                  {step.id}
+                </span>
+              )}
+              <span className="max-w-[9rem] leading-4">{step.label}</span>
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/app/components/assessment/datasets/CreatePanel.tsx b/app/components/assessment/datasets/CreatePanel.tsx
new file mode 100644
index 00000000..976705f5
--- /dev/null
+++ b/app/components/assessment/datasets/CreatePanel.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { Button, Field } from "@/app/components";
+import { CheckIcon, CloseIcon, CloudUploadIcon } from "@/app/components/icons";
+import { DATASET_LEFT_PANEL_CLASSES } from "@/app/lib/assessment/constants";
+import type { ChangeEvent, DragEvent, RefObject } from "react";
+import type { ValueSetter } from "@/app/lib/types/assessment";
+
+interface DatasetsCreatePanelProps {
+  datasetName: string;
+  datasetDescription: string;
+  uploadedFile: File | null;
+  isDragging: boolean;
+  isUploading: boolean;
+  fileInputRef: RefObject<HTMLInputElement | null>;
+  onDatasetNameChange: ValueSetter<string>;
+  onDatasetDescriptionChange: ValueSetter<string>;
+  onFileSelect: (event: ChangeEvent<HTMLInputElement>) => void;
+  onDragOver: (event: DragEvent<HTMLDivElement>) => void;
+  onDragLeave: () => void;
+  onDrop: (event: DragEvent<HTMLDivElement>) => void;
+  onRemoveFile: () => void;
+  onResetForm: () => void;
+  onCreateDataset: () => void;
+}
+
+export default function CreatePanel({
+  datasetName,
+  datasetDescription,
+  uploadedFile,
+  isDragging,
+  isUploading,
+  fileInputRef,
+  onDatasetNameChange,
+  onDatasetDescriptionChange,
+  onFileSelect,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onRemoveFile,
+  onResetForm,
+  onCreateDataset,
+}: DatasetsCreatePanelProps) {
+  return (
+    <div
+      className={`${DATASET_LEFT_PANEL_CLASSES} flex min-h-0 flex-shrink-0 flex-col overflow-hidden border-r border-border bg-bg-primary`}
+    >
+      <div className="flex-1 space-y-4 overflow-auto p-4">
+        <div>
+          <h2 className="text-base font-semibold text-text-primary">
+            Create New Dataset
+          </h2>
+          <p className="mt-0.5 text-xs text-text-secondary">
+            Upload a CSV file for evaluation
+          </p>
+        </div>
+
+        <Field
+          label="Name *"
+          value={datasetName}
+          onChange={onDatasetNameChange}
+          placeholder="e.g., Hindi QnA Dataset"
+          className="!rounded-md !bg-bg-primary"
+        />
+
+        <Field
+          label="Description"
+          value={datasetDescription}
+          onChange={onDatasetDescriptionChange}
+          placeholder="Optional description"
+          className="!rounded-md !bg-bg-primary"
+        />
+        <div>
+          <label className="mb-1.5 block text-xs font-medium text-text-secondary">
+            Upload CSV *
+          </label>
+
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".csv,.xlsx,.xls"
+            onChange={onFileSelect}
+            className="hidden"
+          />
+
+          {uploadedFile ? (
+            <div className="rounded-lg bg-bg-secondary p-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2.5">
+                  <CheckIcon className="h-4 w-4 flex-shrink-0 text-status-success" />
+                  <div>
+                    <p className="text-sm font-medium text-text-primary">
+                      {uploadedFile.name}
+                    </p>
+                    <p className="text-xs text-text-secondary">
+                      {(uploadedFile.size / 1024).toFixed(1)} KB
+                    </p>
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={onRemoveFile}
+                  aria-label="Remove file"
+                  className="cursor-pointer rounded p-1 text-text-secondary transition-colors hover:bg-bg-primary hover:text-text-primary"
+                >
+                  <CloseIcon className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div
+              className={`cursor-pointer rounded-lg border-2 border-dashed p-6 text-center transition-colors ${
+                isDragging
+                  ? "border-accent-primary bg-accent-subtle/20"
+                  : "border-border"
+              }`}
+              onClick={() => fileInputRef.current?.click()}
+              onDragOver={onDragOver}
+              onDragLeave={onDragLeave}
+              onDrop={onDrop}
+            >
+              <span className="mx-auto mb-2 block text-border">
+                <CloudUploadIcon className="h-8 w-8" />
+              </span>
+              <p className="mb-1 text-sm font-medium text-text-primary">
+                Drop file here, or click to browse
+              </p>
+              <p className="text-xs text-text-secondary">
+                CSV or Excel (.xlsx, .xls)
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-end gap-3 pt-2">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={onResetForm}
+            className="!rounded-lg"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            onClick={onCreateDataset}
+            disabled={!uploadedFile || !datasetName.trim() || isUploading}
+            className="!rounded-lg"
+          >
+            {isUploading ? (
+              <>
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-transparent" />
+                Creating...
+              </>
+            ) : (
+              "Create Dataset"
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/datasets/DatasetList.tsx b/app/components/assessment/datasets/DatasetList.tsx
new file mode 100644
index 00000000..1bc7fe11
--- /dev/null
+++ b/app/components/assessment/datasets/DatasetList.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { Button, DatasetListSkeleton } from "@/app/components";
+import { DatabaseIcon } from "@/app/components/icons";
+import EvalDatasetDescription from "@/app/components/evaluations/EvalDatasetDescription";
+import type { ValueSetter } from "@/app/lib/types/assessment";
+import type { Dataset } from "@/app/lib/types/dataset";
+
+interface DatasetsListProps {
+  datasets: Dataset[];
+  datasetId: string;
+  isLoading: boolean;
+  isLoadingColumns: boolean;
+  viewingId: number | null;
+  canProceed: boolean;
+  onSelectDataset: (id: string, name?: string) => void;
+  onViewDataset: (datasetId: number, name: string) => void;
+  onRequestDelete: ValueSetter<number>;
+  onNext: () => void;
+}
+
+export default function DatasetList({
+  datasets,
+  datasetId,
+  isLoading,
+  isLoadingColumns,
+  viewingId,
+  canProceed,
+  onSelectDataset,
+  onViewDataset,
+  onRequestDelete,
+  onNext,
+}: DatasetsListProps) {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-bg-secondary">
+      <div className="flex-1 overflow-auto p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <h3 className="text-base font-semibold text-text-primary">
+              Datasets
+            </h3>
+            <p className="mt-2 rounded-md border border-accent-secondary bg-accent-secondary/15 px-3 py-2 text-xs font-medium text-text-primary">
+              Use an existing dataset from the list, or create a new dataset
+              from the form on the right.
+            </p>
+          </div>
+          {isLoadingColumns && (
+            <span className="text-xs text-text-secondary">
+              Loading columns...
+            </span>
+          )}
+        </div>
+
+        {isLoading ? (
+          <DatasetListSkeleton count={4} />
+        ) : datasets.length === 0 ? (
+          <div className="p-16 text-center">
+            <DatabaseIcon className="mx-auto mb-3 h-12 w-12 text-border" />
+            <p className="mb-1 text-sm font-medium text-text-primary">
+              No datasets yet
+            </p>
+            <p className="text-xs text-text-secondary">
+              Create your first dataset using the form on the right
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {datasets.map((dataset) => {
+              const isSelected = datasetId === dataset.dataset_id.toString();
+              return (
+                <div
+                  key={dataset.dataset_id}
+                  className={`cursor-pointer overflow-hidden rounded-lg border-l-[3px] bg-bg-primary transition-all ${
+                    isSelected
+                      ? "border-l-accent-primary ring-1 ring-accent-primary shadow-sm"
+                      : "border-l-accent-secondary shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
+                  }`}
+                  onClick={() =>
+                    onSelectDataset(
+                      dataset.dataset_id.toString(),
+                      dataset.dataset_name,
+                    )
+                  }
+                >
+                  <div className="px-5 py-4">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-2">
+                          <div className="truncate text-sm font-semibold text-text-primary">
+                            {dataset.dataset_name}
+                          </div>
+                        </div>
+                        {dataset.description && (
+                          <EvalDatasetDescription
+                            description={dataset.description}
+                          />
+                        )}
+                        <div className="mt-2 flex items-center gap-3 text-xs text-text-secondary">
+                          <span>{dataset.total_items} items</span>
+                          {dataset.original_items > 0 &&
+                            dataset.original_items !== dataset.total_items && (
+                              <>
+                                <span className="text-border">·</span>
+                                <span>{dataset.original_items} original</span>
+                              </>
+                            )}
+                        </div>
+                      </div>
+                      <div className="flex flex-shrink-0 items-center gap-2">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            onViewDataset(
+                              dataset.dataset_id,
+                              dataset.dataset_name,
+                            );
+                          }}
+                          disabled={viewingId === dataset.dataset_id}
+                          className={`!rounded-lg !px-3 !py-1.5 !text-xs ${
+                            viewingId === dataset.dataset_id ? "opacity-50" : ""
+                          }`}
+                        >
+                          {viewingId === dataset.dataset_id
+                            ? "Loading..."
+                            : "View"}
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            onRequestDelete(dataset.dataset_id);
+                          }}
+                          aria-label={`Delete ${dataset.dataset_name}`}
+                          className="!rounded-lg !px-3 !py-1.5 !text-xs !text-status-error"
+                        >
+                          Delete
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div className="sticky bottom-0 z-10 flex flex-shrink-0 items-center justify-between border-t border-border bg-bg-primary px-6 py-3">
+        <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
+          <span className="text-xs text-text-secondary">
+            {canProceed
+              ? "Dataset selected. Continue to AI configuration."
+              : "Select a dataset to continue."}
+          </span>
+          <Button
+            type="button"
+            onClick={onNext}
+            disabled={!canProceed}
+            className="!rounded-lg"
+          >
+            Next: AI Configuration
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/output-schema/OutputSchemaEditorInner.tsx b/app/components/assessment/output-schema/OutputSchemaEditorInner.tsx
new file mode 100644
index 00000000..21377a31
--- /dev/null
+++ b/app/components/assessment/output-schema/OutputSchemaEditorInner.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/app/components";
+import type { SchemaProperty } from "@/app/lib/types/assessment";
+import JsonEditor from "../JsonEditor";
+import {
+  addChildToTree,
+  createProperty,
+  fromJsonSchema,
+  removeFromTree,
+  toJsonSchema,
+  updateInTree,
+  validateOpenApiSchema,
+} from "@/app/lib/utils/outputSchema";
+import SchemaPropertyRow from "./SchemaPropertyRow";
+
+interface OutputSchemaEditorInnerProps {
+  schema: SchemaProperty[];
+  setSchema: (schema: SchemaProperty[]) => void;
+}
+
+export default function OutputSchemaEditorInner({
+  schema,
+  setSchema,
+}: OutputSchemaEditorInnerProps) {
+  const [editorMode, setEditorMode] = useState<"visual" | "code">("visual");
+  const [codeValue, setCodeValue] = useState(() => {
+    const json = toJsonSchema(schema);
+    return json ? JSON.stringify(json, null, 2) : "";
+  });
+  const [codeError, setCodeError] = useState<string | null>(null);
+  const [codeIsValid, setCodeIsValid] = useState(false);
+  const hasInitializedDefaultFieldRef = useRef(false);
+  const hasUserClearedFromJsonRef = useRef(false);
+
+  const handleUpdate = useCallback(
+    (id: string, updater: (p: SchemaProperty) => SchemaProperty) => {
+      setSchema(updateInTree(schema, id, updater));
+    },
+    [schema, setSchema],
+  );
+  const handleRemove = useCallback(
+    (id: string) => {
+      const next = removeFromTree(schema, id);
+      setSchema(next.length > 0 ? next : [createProperty()]);
+    },
+    [schema, setSchema],
+  );
+  const handleAddChild = useCallback(
+    (parentId: string) => {
+      setSchema(addChildToTree(schema, parentId));
+    },
+    [schema, setSchema],
+  );
+  const handleAddEnumValue = useCallback(
+    (id: string) => {
+      setSchema(
+        updateInTree(schema, id, (p) => ({
+          ...p,
+          enumValues: [...p.enumValues, ""],
+        })),
+      );
+    },
+    [schema, setSchema],
+  );
+  const handleUpdateEnumValue = useCallback(
+    (id: string, index: number, value: string) => {
+      setSchema(
+        updateInTree(schema, id, (p) => ({
+          ...p,
+          enumValues: p.enumValues.map((v, i) => (i === index ? value : v)),
+        })),
+      );
+    },
+    [schema, setSchema],
+  );
+  const handleRemoveEnumValue = useCallback(
+    (id: string, index: number) => {
+      setSchema(
+        updateInTree(schema, id, (p) => ({
+          ...p,
+          enumValues: p.enumValues.filter((_, i) => i !== index),
+        })),
+      );
+    },
+    [schema, setSchema],
+  );
+
+  useEffect(() => {
+    if (editorMode !== "visual") return;
+    if (schema.length > 0) {
+      hasInitializedDefaultFieldRef.current = true;
+      hasUserClearedFromJsonRef.current = false;
+      return;
+    }
+    if (hasUserClearedFromJsonRef.current) return;
+    if (!hasInitializedDefaultFieldRef.current || schema.length === 0) {
+      hasInitializedDefaultFieldRef.current = true;
+      setSchema([createProperty()]);
+    }
+  }, [editorMode, schema.length, setSchema]);
+
+  useEffect(() => {
+    if (editorMode !== "code") return;
+    const timer = setTimeout(() => {
+      if (!codeValue.trim()) {
+        setCodeError(null);
+        setCodeIsValid(false);
+        setSchema([]);
+        return;
+      }
+      const result = validateOpenApiSchema(codeValue);
+      if (result.valid) {
+        setCodeError(null);
+        setCodeIsValid(true);
+        if (result.schema) setSchema(fromJsonSchema(result.schema));
+        else setSchema([]);
+      } else {
+        setCodeError(result.error);
+        setCodeIsValid(false);
+      }
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [codeValue, editorMode, setSchema]);
+
+  const switchToVisual = () => {
+    const result = validateOpenApiSchema(codeValue);
+    if (!result.valid) {
+      setCodeError(result.error);
+      return;
+    }
+    if (result.schema) {
+      hasUserClearedFromJsonRef.current = false;
+      setSchema(fromJsonSchema(result.schema));
+    } else {
+      hasUserClearedFromJsonRef.current = true;
+      setSchema([]);
+    }
+    setCodeError(null);
+    setEditorMode("visual");
+  };
+  const switchToCode = () => {
+    const json = toJsonSchema(schema);
+    setCodeValue(json ? JSON.stringify(json, null, 2) : "");
+    setCodeError(null);
+    setCodeIsValid(false);
+    setEditorMode("code");
+  };
+
+  return (
+    <div className="space-y-5">
+      <div className="flex w-fit items-center gap-1 rounded-lg bg-bg-secondary p-1">
+        <Button
+          type="button"
+          variant={editorMode === "visual" ? "outline" : "ghost"}
+          size="sm"
+          onClick={() => (editorMode === "code" ? switchToVisual() : undefined)}
+          className={`!rounded-md !px-4 !py-1.5 ${
+            editorMode === "visual"
+              ? "!bg-bg-primary text-text-primary shadow-[0_1px_3px_rgba(0,0,0,0.08)]"
+              : "!bg-transparent text-text-secondary"
+          }`}
+        >
+          Visual Editor
+        </Button>
+        <Button
+          type="button"
+          variant={editorMode === "code" ? "outline" : "ghost"}
+          size="sm"
+          onClick={() => (editorMode !== "code" ? switchToCode() : undefined)}
+          className={`!rounded-md !px-4 !py-1.5 ${
+            editorMode === "code"
+              ? "!bg-bg-primary text-text-primary shadow-[0_1px_3px_rgba(0,0,0,0.08)]"
+              : "!bg-transparent text-text-secondary"
+          }`}
+        >
+          JSON
+        </Button>
+      </div>
+
+      {editorMode === "visual" && (
+        <div className="space-y-3">
+          <div className="grid grid-cols-[minmax(0,1fr)_196px_56px_56px_36px] items-center gap-3 rounded-md px-1 text-[11px] font-semibold uppercase tracking-wide text-text-secondary">
+            <span>Output Field</span>
+            <span>Type</span>
+            <span>Array</span>
+            <span>Required</span>
+            <span />
+          </div>
+          {schema.map((prop) => (
+            <SchemaPropertyRow
+              key={prop.id}
+              property={prop}
+              depth={0}
+              onUpdate={handleUpdate}
+              onRemove={handleRemove}
+              onAddChild={handleAddChild}
+              onAddEnumValue={handleAddEnumValue}
+              onUpdateEnumValue={handleUpdateEnumValue}
+              onRemoveEnumValue={handleRemoveEnumValue}
+            />
+          ))}
+          <Button
+            type="button"
+            onClick={() => setSchema([...schema, createProperty()])}
+            className="!rounded-lg !font-bold"
+          >
+            + Add field
+          </Button>
+        </div>
+      )}
+
+      {editorMode === "code" && (
+        <JsonEditor
+          value={codeValue}
+          onChange={setCodeValue}
+          error={codeError}
+          isValid={codeIsValid}
+          minHeight={420}
+          placeholder={`{\n  "type": "object",\n  "properties": {\n    "score": { "type": "number" },\n    "reason": { "type": "string" }\n  },\n  "required": ["score", "reason"]\n}`}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/output-schema/OutputSchemaModal.tsx b/app/components/assessment/output-schema/OutputSchemaModal.tsx
new file mode 100644
index 00000000..6c631ad2
--- /dev/null
+++ b/app/components/assessment/output-schema/OutputSchemaModal.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Button, Modal } from "@/app/components";
+import { CloseIcon } from "@/app/components/icons";
+import type { SchemaProperty, ValueSetter } from "@/app/lib/types/assessment";
+import { createProperty } from "@/app/lib/utils/outputSchema";
+import OutputSchemaEditorInner from "./OutputSchemaEditorInner";
+
+interface OutputSchemaModalProps {
+  open: boolean;
+  onClose: () => void;
+  schema: SchemaProperty[];
+  setSchema: ValueSetter<SchemaProperty[]>;
+}
+
+export default function OutputSchemaModal({
+  open,
+  onClose,
+  schema,
+  setSchema,
+}: OutputSchemaModalProps) {
+  const [draftSchema, setDraftSchema] = useState<SchemaProperty[]>([]);
+  const [mounted, setMounted] = useState(false);
+  const schemaRef = useRef(schema);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    schemaRef.current = schema;
+  }, [schema]);
+  useEffect(() => {
+    if (open) {
+      setDraftSchema(
+        JSON.parse(JSON.stringify(schemaRef.current)) as SchemaProperty[],
+      );
+    }
+  }, [open]);
+
+  if (!open || !mounted) return null;
+
+  const handleSave = () => {
+    setSchema(draftSchema);
+    onClose();
+  };
+  const handleReset = () => {
+    setDraftSchema([createProperty()]);
+  };
+
+  return createPortal(
+    <Modal
+      open
+      onClose={onClose}
+      maxWidth="!w-[760px] !max-w-[calc(100vw-2rem)]"
+      maxHeight="max-h-[85vh]"
+      showClose={false}
+    >
+      <div className="flex items-center justify-between px-6 pt-6 pb-2">
+        <h2 className="text-lg font-semibold text-text-primary">
+          Response format
+        </h2>
+        <button
+          type="button"
+          onClick={onClose}
+          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-bg-secondary hover:text-text-primary"
+          aria-label="Close response format"
+        >
+          <CloseIcon className="w-5 h-5" />
+        </button>
+      </div>
+
+      <p className="px-6 text-sm text-text-secondary">
+        Define the structure of the AI response. Use the visual editor or switch
+        to JSON.
+      </p>
+
+      <div className="flex-1 overflow-y-auto px-6 py-4">
+        <OutputSchemaEditorInner
+          schema={draftSchema}
+          setSchema={setDraftSchema}
+        />
+      </div>
+
+      <div className="flex items-center justify-end gap-3 border-t border-border px-6 py-4">
+        <Button type="button" variant="outline" onClick={handleReset}>
+          Reset
+        </Button>
+        <Button type="button" onClick={handleSave}>
+          Save
+        </Button>
+      </div>
+    </Modal>,
+    document.body,
+  );
+}
diff --git a/app/components/assessment/output-schema/SchemaPropertyRow.tsx b/app/components/assessment/output-schema/SchemaPropertyRow.tsx
new file mode 100644
index 00000000..d06f7d75
--- /dev/null
+++ b/app/components/assessment/output-schema/SchemaPropertyRow.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { Button } from "@/app/components";
+import Select from "@/app/components/Select";
+import { CloseIcon, TrashIcon } from "@/app/components/icons";
+import { SCHEMA_TYPE_OPTIONS } from "@/app/lib/assessment/constants";
+import type {
+  SchemaProperty,
+  SchemaPropertyType,
+  ValueSetter,
+} from "@/app/lib/types/assessment";
+import CompactToggleSwitch from "../CompactToggleSwitch";
+
+interface SchemaPropertyRowProps {
+  property: SchemaProperty;
+  depth: number;
+  onUpdate: (
+    id: string,
+    updater: (property: SchemaProperty) => SchemaProperty,
+  ) => void;
+  onRemove: ValueSetter<string>;
+  onAddChild: ValueSetter<string>;
+  onAddEnumValue: ValueSetter<string>;
+  onUpdateEnumValue: (id: string, index: number, value: string) => void;
+  onRemoveEnumValue: (id: string, index: number) => void;
+}
+
+export default function SchemaPropertyRow({
+  property,
+  depth,
+  onUpdate,
+  onRemove,
+  onAddChild,
+  onAddEnumValue,
+  onUpdateEnumValue,
+  onRemoveEnumValue,
+}: SchemaPropertyRowProps) {
+  return (
+    <div>
+      <div className="grid grid-cols-[minmax(0,1fr)_196px_56px_56px_36px] items-center gap-3">
+        <input
+          type="text"
+          value={property.name}
+          onChange={(e) =>
+            onUpdate(property.id, (p) => ({ ...p, name: e.target.value }))
+          }
+          placeholder="name"
+          className="h-9 min-w-0 flex-1 rounded-md border border-border bg-bg-primary px-3 text-sm text-text-primary"
+        />
+        <div className="min-w-0">
+          <Select
+            value={property.type}
+            onChange={(e) => {
+              const t = e.target.value as SchemaPropertyType;
+              onUpdate(property.id, (p) => ({
+                ...p,
+                type: t,
+                children: t === "object" ? p.children : [],
+                enumValues:
+                  t === "enum"
+                    ? p.enumValues.length > 0
+                      ? p.enumValues
+                      : [""]
+                    : [],
+              }));
+            }}
+            options={SCHEMA_TYPE_OPTIONS}
+            className="h-9 w-full cursor-pointer rounded-md border border-border bg-bg-primary px-2.5 py-1.5 text-sm text-text-primary outline-none focus:ring-1"
+          />
+        </div>
+        <CompactToggleSwitch
+          checked={property.isArray}
+          onChange={() =>
+            onUpdate(property.id, (p) => ({ ...p, isArray: !p.isArray }))
+          }
+          title={property.isArray ? "Remove array wrapper" : "Make array"}
+        />
+        <CompactToggleSwitch
+          checked={property.isRequired}
+          onChange={() =>
+            onUpdate(property.id, (p) => ({ ...p, isRequired: !p.isRequired }))
+          }
+          title={property.isRequired ? "Mark optional" : "Mark required"}
+        />
+        <button
+          type="button"
+          onClick={() => onRemove(property.id)}
+          className="flex h-8 w-8 cursor-pointer items-center justify-center justify-self-center rounded-md text-text-secondary transition-colors hover:bg-bg-secondary hover:text-text-primary"
+          aria-label={`Delete ${property.name.trim() || "field"}`}
+          title="Delete"
+        >
+          <TrashIcon className="w-4 h-4" />
+        </button>
+      </div>
+
+      {property.type === "enum" && (
+        <div className="ml-3 mt-2 space-y-1.5">
+          {property.enumValues.map((val, idx) => (
+            <div key={idx} className="flex items-center gap-2">
+              <input
+                type="text"
+                value={val}
+                onChange={(e) =>
+                  onUpdateEnumValue(property.id, idx, e.target.value)
+                }
+                placeholder={`value ${idx + 1}`}
+                className="h-8 max-w-[240px] rounded-md border border-border bg-bg-primary px-3 text-sm text-text-primary"
+              />
+              <button
+                type="button"
+                onClick={() => onRemoveEnumValue(property.id, idx)}
+                className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-bg-secondary hover:text-text-primary"
+                aria-label={`Remove enum value ${idx + 1} from ${property.name.trim() || "field"}`}
+              >
+                <CloseIcon className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          ))}
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => onAddEnumValue(property.id)}
+            className="mt-0.5 !justify-start !px-0 text-text-primary"
+          >
+            + Add enum value
+          </Button>
+        </div>
+      )}
+
+      {property.type === "object" && (
+        <div className="mt-2 ml-6 space-y-3">
+          {property.children.map((child) => (
+            <SchemaPropertyRow
+              key={child.id}
+              property={child}
+              depth={depth + 1}
+              onUpdate={onUpdate}
+              onRemove={onRemove}
+              onAddChild={onAddChild}
+              onAddEnumValue={onAddEnumValue}
+              onUpdateEnumValue={onUpdateEnumValue}
+              onRemoveEnumValue={onRemoveEnumValue}
+            />
+          ))}
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => onAddChild(property.id)}
+            className="!justify-start !px-0 text-text-primary"
+          >
+            + Add nested property
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/prompt-config/AssessmentConfiguration.tsx b/app/components/assessment/prompt-config/AssessmentConfiguration.tsx
new file mode 100644
index 00000000..a853b557
--- /dev/null
+++ b/app/components/assessment/prompt-config/AssessmentConfiguration.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { Button } from "@/app/components";
+import {
+  type ConfigMode,
+  type ConfigSelection,
+  type ValueSetter,
+  type VersionListState,
+} from "@/app/lib/types/assessment";
+import type { ConfigPublic } from "@/app/lib/types/configs";
+import ConfigCreator, { type ConfigCreatorProps } from "./ConfigCreator";
+import SavedConfigs from "./SavedConfigs";
+import SelectedConfigs from "./SelectedConfigs";
+
+interface AssessmentConfigurationProps extends Omit<
+  ConfigCreatorProps,
+  "onSave"
+> {
+  configMode: ConfigMode;
+  setConfigMode: ValueSetter<ConfigMode>;
+  configs: ConfigSelection[];
+  onRemoveConfig: (configId: string, version: number) => void;
+  configCards: ConfigPublic[];
+  searchQuery: string;
+  setSearchQuery: ValueSetter<string>;
+  isLoadingConfigs: boolean;
+  hasMoreConfigs: boolean;
+  nextConfigSkip: number;
+  expandedConfigId: string | null;
+  versionStateByConfig: Record<string, VersionListState>;
+  loadingSelectionKeys: Record<string, boolean>;
+  isSelected: (configId: string, version: number) => boolean;
+  onLoadMoreConfigs: (skip: number) => void;
+  onLoadVersions: (configId: string, skip: number) => void;
+  onToggleConfigExpansion: ValueSetter<string>;
+  onToggleVersionSelection: (
+    config: ConfigPublic,
+    version: number,
+  ) => void | Promise<void>;
+  onSaveConfig: () => void | Promise<void>;
+}
+
+export default function AssessmentConfiguration({
+  configMode,
+  setConfigMode,
+  configs,
+  onRemoveConfig,
+  configCards,
+  searchQuery,
+  setSearchQuery,
+  isLoadingConfigs,
+  hasMoreConfigs,
+  nextConfigSkip,
+  expandedConfigId,
+  versionStateByConfig,
+  loadingSelectionKeys,
+  isSelected,
+  onLoadMoreConfigs,
+  onLoadVersions,
+  onToggleConfigExpansion,
+  onToggleVersionSelection,
+  currentProvider,
+  currentModel,
+  providerModels,
+  currentParamDefs,
+  draftParams,
+  configName,
+  commitMessage,
+  isSaving,
+  setConfigName,
+  setCommitMessage,
+  onProviderChange,
+  onModelChange,
+  onParamChange,
+  onSaveConfig,
+}: AssessmentConfigurationProps) {
+  return (
+    <details open className="rounded-2xl border border-border bg-bg-primary">
+      <summary className="flex cursor-pointer items-center justify-between px-4 py-3">
+        <div>
+          <div className="text-sm font-semibold text-text-primary">
+            AI Configuration
+          </div>
+          <div className="mt-1 text-xs text-text-secondary">
+            {configs.length > 0
+              ? `${configs.length} selected`
+              : "Choose at least one configuration"}
+          </div>
+        </div>
+      </summary>
+
+      {configs.length > 0 && (
+        <div className="border-t border-border px-4 py-4">
+          <SelectedConfigs configs={configs} onRemove={onRemoveConfig} />
+        </div>
+      )}
+
+      <div className="border-t border-border px-4 py-4">
+        <div className="mb-4 inline-flex items-center gap-1 rounded-xl border border-border bg-bg-secondary p-1">
+          <Button
+            type="button"
+            variant={configMode === "existing" ? "primary" : "ghost"}
+            size="sm"
+            onClick={() => setConfigMode("existing")}
+            className="!rounded-lg !px-3 !py-1.5 !text-xs"
+          >
+            Saved
+          </Button>
+          <Button
+            type="button"
+            variant={configMode === "create" ? "primary" : "ghost"}
+            size="sm"
+            onClick={() => setConfigMode("create")}
+            className="!rounded-lg !px-3 !py-1.5 !text-xs"
+          >
+            New
+          </Button>
+        </div>
+
+        {configMode === "existing" && (
+          <SavedConfigs
+            configCards={configCards}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            isLoadingConfigs={isLoadingConfigs}
+            hasMoreConfigs={hasMoreConfigs}
+            nextConfigSkip={nextConfigSkip}
+            expandedConfigId={expandedConfigId}
+            versionStateByConfig={versionStateByConfig}
+            loadingSelectionKeys={loadingSelectionKeys}
+            isSelected={isSelected}
+            onLoadMoreConfigs={onLoadMoreConfigs}
+            onLoadVersions={onLoadVersions}
+            onToggleConfigExpansion={onToggleConfigExpansion}
+            onToggleVersionSelection={onToggleVersionSelection}
+          />
+        )}
+
+        {configMode === "create" && (
+          <ConfigCreator
+            currentProvider={currentProvider}
+            currentModel={currentModel}
+            providerModels={providerModels}
+            currentParamDefs={currentParamDefs}
+            draftParams={draftParams}
+            configName={configName}
+            commitMessage={commitMessage}
+            isSaving={isSaving}
+            setConfigName={setConfigName}
+            setCommitMessage={setCommitMessage}
+            onProviderChange={onProviderChange}
+            onModelChange={onModelChange}
+            onParamChange={onParamChange}
+            onSave={onSaveConfig}
+          />
+        )}
+      </div>
+    </details>
+  );
+}
diff --git a/app/components/assessment/prompt-config/ConfigCreator.tsx b/app/components/assessment/prompt-config/ConfigCreator.tsx
new file mode 100644
index 00000000..74b6ca86
--- /dev/null
+++ b/app/components/assessment/prompt-config/ConfigCreator.tsx
@@ -0,0 +1,138 @@
+import { Button, Field } from "@/app/components";
+import Select from "@/app/components/Select";
+import { PROVIDER_OPTIONS } from "@/app/lib/data/assessmentModels";
+import type {
+  ConfigParamDefinition,
+  ModelOption,
+  ValueSetter,
+} from "@/app/lib/types/assessment";
+import ConfigParamControl from "./ConfigParamControl";
+
+export interface ConfigCreatorProps {
+  currentProvider: string;
+  currentModel: string;
+  providerModels: ModelOption[];
+  currentParamDefs: Record<string, ConfigParamDefinition>;
+  draftParams: Record<string, string | number | undefined>;
+  configName: string;
+  commitMessage: string;
+  isSaving: boolean;
+  setConfigName: ValueSetter<string>;
+  setCommitMessage: ValueSetter<string>;
+  onProviderChange: ValueSetter<"openai">;
+  onModelChange: ValueSetter<string>;
+  onParamChange: (key: string, value: string | number) => void;
+  onSave: () => void | Promise<void>;
+}
+
+const inputClass = "!rounded-xl !bg-bg-primary !px-4 !py-3";
+const selectClass =
+  "w-full rounded-xl border border-border bg-bg-primary px-4 py-3 text-sm text-text-primary outline-none focus:ring-1";
+
+export default function ConfigCreator({
+  currentProvider,
+  currentModel,
+  providerModels,
+  currentParamDefs,
+  draftParams,
+  configName,
+  commitMessage,
+  isSaving,
+  setConfigName,
+  setCommitMessage,
+  onProviderChange,
+  onModelChange,
+  onParamChange,
+  onSave,
+}: ConfigCreatorProps) {
+  const saveDisabled = isSaving || !configName.trim();
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-3 sm:grid-cols-2">
+        <div>
+          <label className="mb-2 block text-xs font-semibold text-text-primary">
+            Provider
+          </label>
+          <Select
+            value={currentProvider}
+            onChange={(e) => onProviderChange(e.target.value as "openai")}
+            className={selectClass}
+            options={[...PROVIDER_OPTIONS]}
+          />
+        </div>
+        <div>
+          <label className="mb-2 block text-xs font-semibold text-text-primary">
+            Model
+          </label>
+          <Select
+            value={currentModel}
+            onChange={(e) => onModelChange(e.target.value)}
+            className={selectClass}
+            options={providerModels}
+          />
+        </div>
+      </div>
+
+      <details className="rounded-xl border border-border bg-bg-secondary">
+        <summary className="cursor-pointer px-4 py-3 text-sm font-semibold text-text-primary">
+          Advanced
+        </summary>
+        <div className="px-4 pb-4">
+          {Object.entries(currentParamDefs).map(([paramKey, definition]) => (
+            <div
+              key={paramKey}
+              className="border-b border-border py-4 last:border-b-0"
+            >
+              <div className="mb-3 flex items-start justify-between gap-3">
+                <div>
+                  <div className="text-sm font-semibold text-text-primary">
+                    {paramKey}
+                  </div>
+                  <div className="mt-1 text-xs leading-5 text-text-secondary">
+                    {definition.description}
+                  </div>
+                </div>
+                <span className="rounded-full bg-bg-primary px-2 py-0.5 text-[11px] text-text-secondary">
+                  {String(definition.default)}
+                </span>
+              </div>
+              <ConfigParamControl
+                value={draftParams[paramKey] ?? definition.default}
+                definition={definition}
+                onChange={(value) => onParamChange(paramKey, value)}
+              />
+            </div>
+          ))}
+        </div>
+      </details>
+
+      <div className="grid gap-3">
+        <Field
+          label="AI Configuration Name"
+          value={configName}
+          onChange={setConfigName}
+          placeholder="Helpful grader"
+          className={inputClass}
+        />
+        <Field
+          label="Save note"
+          value={commitMessage}
+          onChange={setCommitMessage}
+          placeholder="Optional"
+          className={inputClass}
+        />
+      </div>
+
+      <Button
+        type="button"
+        fullWidth
+        onClick={() => void onSave()}
+        disabled={saveDisabled}
+        className="!rounded-xl !py-3 !font-semibold"
+      >
+        {isSaving ? "Saving..." : "Save behavior"}
+      </Button>
+    </div>
+  );
+}
diff --git a/app/components/assessment/prompt-config/ConfigParamControl.tsx b/app/components/assessment/prompt-config/ConfigParamControl.tsx
new file mode 100644
index 00000000..df1c1352
--- /dev/null
+++ b/app/components/assessment/prompt-config/ConfigParamControl.tsx
@@ -0,0 +1,49 @@
+import Select from "@/app/components/Select";
+import type { ConfigParamDefinition } from "@/app/lib/types/assessment";
+
+const selectClass =
+  "w-full rounded-xl border border-border bg-bg-primary px-4 py-3 text-sm text-text-primary outline-none focus:ring-1";
+
+interface ConfigParamControlProps {
+  value: string | number;
+  definition: ConfigParamDefinition;
+  onChange: (value: string | number) => void;
+}
+
+export default function ConfigParamControl({
+  value,
+  definition,
+  onChange,
+}: ConfigParamControlProps) {
+  if (definition.type === "enum" && definition.options) {
+    return (
+      <Select
+        value={String(value)}
+        onChange={(e) => onChange(e.target.value)}
+        className={selectClass}
+        options={definition.options.map((option) => ({
+          value: option,
+          label: option,
+        }))}
+      />
+    );
+  }
+
+  const numericValue = typeof value === "number" ? value : Number(value);
+  return (
+    <div className="flex items-center gap-3">
+      <input
+        type="range"
+        min={definition.min ?? 0}
+        max={definition.max ?? 2}
+        step={definition.type === "int" ? 1 : 0.01}
+        value={numericValue}
+        onChange={(e) => onChange(parseFloat(e.target.value))}
+        className="flex-1"
+      />
+      <span className="w-12 text-right font-mono text-sm text-text-primary">
+        {definition.type === "int" ? numericValue : numericValue.toFixed(2)}
+      </span>
+    </div>
+  );
+}
diff --git a/app/components/assessment/prompt-config/PromptEditor.tsx b/app/components/assessment/prompt-config/PromptEditor.tsx
new file mode 100644
index 00000000..44501d73
--- /dev/null
+++ b/app/components/assessment/prompt-config/PromptEditor.tsx
@@ -0,0 +1,365 @@
+"use client";
+
+import {
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Button } from "@/app/components";
+import type { SampleRow, ValueSetter } from "@/app/lib/types/assessment";
+
+interface PromptEditorProps {
+  value: string;
+  onChange: ValueSetter<string>;
+  previewMode: boolean;
+  placeholder: string;
+  emptyPreviewText: string;
+  textColumns?: string[];
+  sampleRow?: SampleRow;
+  enablePlaceholders?: boolean;
+}
+
+export default function PromptEditor({
+  value,
+  onChange,
+  previewMode,
+  placeholder,
+  emptyPreviewText,
+  textColumns = [],
+  sampleRow = {},
+  enablePlaceholders = true,
+}: PromptEditorProps) {
+  const [mentionQuery, setMentionQuery] = useState<string | null>(null);
+  const [mentionIndex, setMentionIndex] = useState(0);
+  const [mentionPos, setMentionPos] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+  const [mentionStart, setMentionStart] = useState<number | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const mirrorRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const mentionOptions = useMemo(() => {
+    if (!enablePlaceholders || mentionQuery === null) return [];
+    const normalized = mentionQuery.toLowerCase();
+    return textColumns.filter((col) => col.toLowerCase().includes(normalized));
+  }, [enablePlaceholders, mentionQuery, textColumns]);
+
+  const computeCaretPosition = useCallback(() => {
+    const textarea = textareaRef.current;
+    const mirror = mirrorRef.current;
+    if (!textarea || !mirror) return null;
+
+    const style = window.getComputedStyle(textarea);
+    [
+      "font-family",
+      "font-size",
+      "font-weight",
+      "line-height",
+      "letter-spacing",
+      "padding-top",
+      "padding-left",
+      "padding-right",
+      "padding-bottom",
+      "border-top-width",
+      "border-left-width",
+      "word-wrap",
+      "overflow-wrap",
+      "tab-size",
+      "box-sizing",
+    ].forEach((prop) => {
+      mirror.style.setProperty(prop, style.getPropertyValue(prop));
+    });
+    mirror.style.width = `${textarea.clientWidth}px`;
+    mirror.style.whiteSpace = "pre-wrap";
+    mirror.style.wordWrap = "break-word";
+    mirror.style.position = "absolute";
+    mirror.style.visibility = "hidden";
+    mirror.style.left = "0";
+    mirror.style.top = "0";
+
+    mirror.textContent = textarea.value.substring(0, textarea.selectionStart);
+    const marker = document.createElement("span");
+    marker.textContent = "​";
+    mirror.appendChild(marker);
+
+    const markerRect = marker.getBoundingClientRect();
+    const mirrorRect = mirror.getBoundingClientRect();
+
+    return {
+      top:
+        markerRect.top -
+        mirrorRect.top -
+        textarea.scrollTop +
+        parseInt(style.lineHeight, 10) +
+        6,
+      left: markerRect.left - mirrorRect.left,
+    };
+  }, []);
+
+  const closeMention = useCallback(() => {
+    setMentionQuery(null);
+    setMentionStart(null);
+    setMentionPos(null);
+  }, []);
+
+  const handleInput = useCallback(() => {
+    if (!enablePlaceholders) {
+      closeMention();
+      return;
+    }
+
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const cursor = textarea.selectionStart;
+    const editorValue = textarea.value;
+    let index = cursor - 1;
+    while (
+      index >= 0 &&
+      editorValue[index] !== "@" &&
+      editorValue[index] !== " " &&
+      editorValue[index] !== "\n" &&
+      editorValue[index] !== "\t"
+    ) {
+      index -= 1;
+    }
+    if (index >= 0 && editorValue[index] === "@") {
+      setMentionQuery(editorValue.substring(index + 1, cursor));
+      setMentionStart(index);
+      setMentionIndex(0);
+      setMentionPos(computeCaretPosition());
+      return;
+    }
+    closeMention();
+  }, [closeMention, computeCaretPosition, enablePlaceholders]);
+
+  const insertMention = useCallback(
+    (column: string) => {
+      const textarea = textareaRef.current;
+      if (!textarea || mentionStart === null) return;
+      const cursor = textarea.selectionStart;
+      const nextValue = `${value.substring(0, mentionStart)}{${column}}${value.substring(cursor)}`;
+      const nextCursor = mentionStart + column.length + 2;
+      onChange(nextValue);
+      closeMention();
+      setTimeout(() => {
+        textarea.focus();
+        textarea.setSelectionRange(nextCursor, nextCursor);
+      }, 0);
+    },
+    [closeMention, mentionStart, onChange, value],
+  );
+
+  const insertPlaceholder = (column: string) => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const nextValue = `${value.slice(0, start)}{${column}}${value.slice(end)}`;
+    const nextCursor = start + column.length + 2;
+    onChange(nextValue);
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(nextCursor, nextCursor);
+    }, 0);
+  };
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (
+        !enablePlaceholders ||
+        mentionQuery === null ||
+        mentionOptions.length === 0
+      )
+        return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setMentionIndex((prev) => (prev + 1) % mentionOptions.length);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setMentionIndex(
+          (prev) => (prev - 1 + mentionOptions.length) % mentionOptions.length,
+        );
+      } else if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        insertMention(mentionOptions[mentionIndex]);
+      } else if (event.key === "Escape") {
+        closeMention();
+      }
+    },
+    [
+      closeMention,
+      enablePlaceholders,
+      insertMention,
+      mentionIndex,
+      mentionOptions,
+      mentionQuery,
+    ],
+  );
+
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (
+        textareaRef.current &&
+        !textareaRef.current.contains(target) &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(target)
+      ) {
+        closeMention();
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [closeMention]);
+
+  useEffect(() => {
+    if (dropdownRef.current && mentionOptions.length > 0) {
+      const active = dropdownRef.current.children[mentionIndex] as
+        | HTMLElement
+        | undefined;
+      active?.scrollIntoView({ block: "nearest" });
+    }
+  }, [mentionIndex, mentionOptions.length]);
+
+  useEffect(() => {
+    if (previewMode || !enablePlaceholders) {
+      closeMention();
+    }
+  }, [closeMention, enablePlaceholders, previewMode]);
+
+  const usedColumns = useMemo(
+    () => textColumns.filter((col) => value.includes(`{${col}}`)),
+    [textColumns, value],
+  );
+
+  const orderedColumns = useMemo(() => {
+    const used = textColumns.filter((col) => usedColumns.includes(col));
+    const unused = textColumns.filter((col) => !usedColumns.includes(col));
+    return [...used, ...unused];
+  }, [textColumns, usedColumns]);
+
+  const previewText = useMemo(() => {
+    if (!value.trim()) return "";
+    if (!enablePlaceholders) return value;
+
+    let next = value;
+    textColumns.forEach((col) => {
+      const safe = col.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      next = next.replace(
+        new RegExp(`\\{${safe}\\}`, "g"),
+        sampleRow[col] || "",
+      );
+    });
+    return next;
+  }, [enablePlaceholders, sampleRow, textColumns, value]);
+
+  if (previewMode) {
+    return (
+      <div className="min-h-[260px] whitespace-pre-wrap break-words rounded-xl border border-border bg-bg-secondary px-4 py-3 text-sm leading-7 text-text-primary">
+        {!value.trim() ? (
+          <span className="text-text-secondary">{emptyPreviewText}</span>
+        ) : enablePlaceholders && Object.keys(sampleRow).length === 0 ? (
+          <span className="text-text-secondary">
+            Sample data not available. Go back to Datasets and choose a row with
+            values.
+          </span>
+        ) : (
+          previewText || (
+            <span className="text-text-secondary">{emptyPreviewText}</span>
+          )
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {enablePlaceholders && (
+        <div className="mb-3">
+          <div className="mb-2 text-xs text-text-secondary">
+            Use `@` or tap a column chip to insert placeholders.
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {orderedColumns.map((col) => {
+              const isUsed = usedColumns.includes(col);
+              return (
+                <Button
+                  key={col}
+                  type="button"
+                  variant={isUsed ? "secondary" : "outline"}
+                  size="sm"
+                  onClick={() => insertPlaceholder(col)}
+                  className={`!rounded-full !px-3 !py-1.5 !font-mono !text-xs ${
+                    isUsed
+                      ? "!border-status-success-border !bg-status-success-bg !text-status-success-text"
+                      : "!bg-bg-primary"
+                  }`}
+                >
+                  {`{${col}}`}
+                </Button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div className="relative rounded-xl border border-border bg-bg-primary px-4 py-3">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(event) => {
+            onChange(event.target.value);
+            setTimeout(handleInput, 0);
+          }}
+          onKeyDown={handleKeyDown}
+          onSelect={handleInput}
+          placeholder={placeholder}
+          className="min-h-[260px] w-full resize-y border-0 bg-transparent px-0 py-0 text-sm leading-7 text-text-primary outline-none"
+        />
+        <div ref={mirrorRef} aria-hidden="true" />
+
+        {mentionQuery !== null && mentionOptions.length > 0 && mentionPos && (
+          <div
+            ref={dropdownRef}
+            className="absolute z-50 overflow-hidden rounded-xl border border-border bg-bg-primary shadow-lg"
+            style={{
+              top: `${mentionPos.top + 16}px`,
+              left: `${Math.max(16, Math.min(mentionPos.left + 16, 320))}px`,
+              minWidth: "220px",
+              maxHeight: "180px",
+              overflowY: "auto",
+            }}
+          >
+            {mentionOptions.map((col, idx) => (
+              <Button
+                key={col}
+                type="button"
+                variant="ghost"
+                size="sm"
+                fullWidth
+                className={`!justify-start !rounded-none !px-3 !py-2 !text-left !font-mono !text-sm !text-text-primary ${
+                  idx === mentionIndex ? "!bg-bg-secondary" : "!bg-bg-primary"
+                }`}
+                onMouseEnter={() => setMentionIndex(idx)}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  insertMention(col);
+                }}
+              >
+                <span className="rounded bg-bg-secondary px-1.5 py-0.5 text-xs font-sans text-text-secondary">
+                  @
+                </span>
+                {col}
+              </Button>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/app/components/assessment/prompt-config/PromptPanel.tsx b/app/components/assessment/prompt-config/PromptPanel.tsx
new file mode 100644
index 00000000..6ba64e4d
--- /dev/null
+++ b/app/components/assessment/prompt-config/PromptPanel.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/app/components";
+import type { SampleRow, ValueSetter } from "@/app/lib/types/assessment";
+
+interface PromptPanelProps {
+  textColumns: string[];
+  sampleRow: SampleRow;
+  systemInstruction: string;
+  setSystemInstruction: ValueSetter<string>;
+  promptTemplate: string;
+  setPromptTemplate: ValueSetter<string>;
+}
+import UserPrompt from "./UserPrompt";
+import SystemPrompt from "./SystemPrompt";
+
+export default function PromptPanel({
+  textColumns,
+  sampleRow,
+  systemInstruction,
+  setSystemInstruction,
+  promptTemplate,
+  setPromptTemplate,
+}: PromptPanelProps) {
+  const [previewMode, setPreviewMode] = useState(false);
+
+  return (
+    <section className="min-w-0 space-y-4">
+      <div className="flex justify-end">
+        <div className="flex items-center gap-1 rounded-xl border border-border bg-bg-secondary p-1">
+          <Button
+            type="button"
+            variant={!previewMode ? "primary" : "ghost"}
+            size="sm"
+            onClick={() => setPreviewMode(false)}
+            className="!rounded-lg !px-3 !py-1.5 !text-xs"
+          >
+            Edit
+          </Button>
+          <Button
+            type="button"
+            variant={previewMode ? "primary" : "ghost"}
+            size="sm"
+            onClick={() => setPreviewMode(true)}
+            className="!rounded-lg !px-3 !py-1.5 !text-xs"
+          >
+            Preview
+          </Button>
+        </div>
+      </div>
+
+      <SystemPrompt
+        value={systemInstruction}
+        onChange={setSystemInstruction}
+        previewMode={previewMode}
+      />
+      <UserPrompt
+        textColumns={textColumns}
+        sampleRow={sampleRow}
+        promptTemplate={promptTemplate}
+        setPromptTemplate={setPromptTemplate}
+        previewMode={previewMode}
+      />
+    </section>
+  );
+}
diff --git a/app/components/assessment/prompt-config/ResponseSchema.tsx b/app/components/assessment/prompt-config/ResponseSchema.tsx
new file mode 100644
index 00000000..63df90f4
--- /dev/null
+++ b/app/components/assessment/prompt-config/ResponseSchema.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/app/components";
+import type { SchemaProperty, ValueSetter } from "@/app/lib/types/assessment";
+
+interface ResponseSchemaProps {
+  schema: SchemaProperty[];
+  setSchema: ValueSetter<SchemaProperty[]>;
+  summary: string;
+  hasFields: boolean;
+}
+import { OutputSchemaModal } from "../OutputSchemaEditor";
+
+export default function ResponseSchema({
+  schema,
+  setSchema,
+  summary,
+  hasFields,
+}: ResponseSchemaProps) {
+  const [schemaModalOpen, setSchemaModalOpen] = useState(false);
+
+  return (
+    <>
+      <details open className="rounded-2xl border border-border bg-bg-primary">
+        <summary className="flex cursor-pointer items-center justify-between px-4 py-3">
+          <div className="min-w-0">
+            <div className="text-sm font-semibold text-text-primary">
+              Response Format
+            </div>
+            <div className="mt-1 text-xs text-text-secondary">{summary}</div>
+          </div>
+          <Button
+            type="button"
+            size="sm"
+            onClick={(event) => {
+              event.preventDefault();
+              setSchemaModalOpen(true);
+            }}
+            className="!min-w-[64px] !rounded-lg !px-3 !py-1.5 !text-xs !font-semibold"
+          >
+            {hasFields ? "Edit" : "Set"}
+          </Button>
+        </summary>
+      </details>
+
+      <OutputSchemaModal
+        open={schemaModalOpen}
+        onClose={() => setSchemaModalOpen(false)}
+        schema={schema}
+        setSchema={setSchema}
+      />
+    </>
+  );
+}
diff --git a/app/components/assessment/prompt-config/SavedConfigCard.tsx b/app/components/assessment/prompt-config/SavedConfigCard.tsx
new file mode 100644
index 00000000..0df5a3ad
--- /dev/null
+++ b/app/components/assessment/prompt-config/SavedConfigCard.tsx
@@ -0,0 +1,289 @@
+import { Button } from "@/app/components";
+import { ChevronDownIcon } from "@/app/components/icons";
+import { formatRelativeTime } from "@/app/lib/utils";
+import type { ConfigPublic, ConfigVersionItems } from "@/app/lib/types/configs";
+import type { ValueSetter, VersionListState } from "@/app/lib/types/assessment";
+
+interface SavedConfigCardProps {
+  config: ConfigPublic;
+  versions: VersionListState;
+  expanded: boolean;
+  loadingSelectionKeys: Record<string, boolean>;
+  isSelected: (configId: string, version: number) => boolean;
+  onLoadVersions: (configId: string, skip: number) => void;
+  onToggleExpansion: ValueSetter<string>;
+  onToggleVersionSelection: (
+    config: ConfigPublic,
+    version: number,
+  ) => void | Promise<void>;
+}
+
+function VersionSummary({
+  previewVersions,
+  knownVersionCount,
+}: {
+  previewVersions: ConfigVersionItems[];
+  knownVersionCount: number;
+}) {
+  return (
+    <div className="mt-2 flex items-center gap-1.5 text-[11px] text-text-secondary">
+      <span className="inline-flex items-center rounded-full border border-border bg-bg-secondary px-2 py-0.5 text-[10px] font-semibold text-text-secondary">
+        {previewVersions.length > 0
+          ? previewVersions.map((v) => `v${v.version}`).join(", ")
+          : "Versions"}
+      </span>
+      <span>
+        {previewVersions.length > 0
+          ? `${knownVersionCount} saved version${knownVersionCount === 1 ? "" : "s"}`
+          : 'Use "Show versions" to view history'}
+      </span>
+    </div>
+  );
+}
+
+function VersionPanel({
+  config,
+  versions,
+  expanded,
+  loadingSelectionKeys,
+  isSelected,
+  onLoadVersions,
+  onToggleVersionSelection,
+}: {
+  config: ConfigPublic;
+  versions: VersionListState;
+  expanded: boolean;
+  loadingSelectionKeys: Record<string, boolean>;
+  isSelected: (configId: string, version: number) => boolean;
+  onLoadVersions: (configId: string, skip: number) => void;
+  onToggleVersionSelection: (
+    config: ConfigPublic,
+    version: number,
+  ) => void | Promise<void>;
+}) {
+  return (
+    <div
+      className={`mt-2 overflow-hidden transition-all duration-300 ease-in-out ${
+        expanded ? "max-h-[22rem] opacity-100" : "max-h-0 opacity-0"
+      }`}
+      style={{ pointerEvents: expanded ? "auto" : "none" }}
+    >
+      <div className="rounded-[20px] border border-border bg-bg-secondary p-2.5">
+        <div className="mb-2 flex items-center justify-between gap-3">
+          <div>
+            <div className="text-sm font-semibold text-text-primary">
+              Saved versions
+            </div>
+            <div className="mt-0.5 text-xs text-text-secondary">
+              Pick a specific version to reuse.
+            </div>
+          </div>
+          <span className="inline-flex shrink-0 items-center rounded-full border border-border bg-bg-primary px-2 py-0.5 text-[10px] font-semibold text-text-secondary">
+            {versions.items.length}
+          </span>
+        </div>
+        {versions.isLoading && versions.items.length === 0 ? (
+          <div className="py-2 text-center text-xs text-text-secondary">
+            Loading versions...
+          </div>
+        ) : (
+          <div className="max-h-48 space-y-1.5 overflow-y-auto pr-1">
+            {versions.items.map((version) => {
+              const selected = isSelected(config.id, version.version);
+              const loading =
+                loadingSelectionKeys[`${config.id}:${version.version}`];
+
+              return (
+                <div
+                  key={version.id}
+                  className={`flex items-center justify-between gap-2.5 rounded-[18px] border bg-bg-primary px-2.5 py-2 ${
+                    selected ? "border-accent-primary" : "border-border"
+                  }`}
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex items-center rounded-full border border-border bg-bg-secondary px-1.5 py-0.5 text-[10px] font-semibold text-text-secondary">
+                        v{version.version}
+                      </span>
+                      <div className="text-xs font-semibold text-text-primary">
+                        Version {version.version}
+                      </div>
+                    </div>
+                    {version.commit_message && (
+                      <div className="mt-1 truncate text-[11px] text-text-secondary">
+                        {version.commit_message}
+                      </div>
+                    )}
+                  </div>
+                  <Button
+                    type="button"
+                    variant={selected ? "outline" : "primary"}
+                    size="sm"
+                    onClick={() =>
+                      void onToggleVersionSelection(config, version.version)
+                    }
+                    disabled={Boolean(loading)}
+                    className={`!rounded-full !px-3 !py-1.5 !text-[11px] ${
+                      selected ? "!bg-bg-secondary" : ""
+                    }`}
+                  >
+                    {loading ? "..." : selected ? "Added" : "Use"}
+                  </Button>
+                </div>
+              );
+            })}
+            {versions.hasMore && !versions.isLoading && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                fullWidth
+                onClick={() => onLoadVersions(config.id, versions.nextSkip)}
+                className="!py-1.5 !text-xs !text-accent-primary"
+              >
+                Load more
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function SavedConfigCard({
+  config,
+  versions,
+  expanded,
+  loadingSelectionKeys,
+  isSelected,
+  onLoadVersions,
+  onToggleExpansion,
+  onToggleVersionSelection,
+}: SavedConfigCardProps) {
+  const latestVersion =
+    versions.items.reduce<number>(
+      (maxVersion, item) =>
+        item.version > maxVersion ? item.version : maxVersion,
+      0,
+    ) || 1;
+  const versionsNotYetLoaded =
+    versions.items.length === 0 && versions.isLoading;
+  const defaultSelected = isSelected(config.id, latestVersion);
+  const defaultLoading = loadingSelectionKeys[`${config.id}:${latestVersion}`];
+  const knownVersionCount = versions.items.length;
+  const hasVersionsPanel =
+    knownVersionCount > 0 ||
+    versions.hasMore ||
+    versions.isLoading ||
+    Boolean(versions.error);
+  const previewVersions = versions.items.slice(0, 3);
+  const versionCountLabel =
+    knownVersionCount > 0
+      ? `${knownVersionCount}${versions.hasMore ? "+" : ""}`
+      : "Check";
+
+  const cardBorder =
+    expanded || defaultSelected ? "border-accent-primary" : "border-border";
+
+  return (
+    <div
+      className={`flex flex-col rounded-[24px] border bg-bg-primary p-3.5 ${cardBorder}`}
+      style={{
+        boxShadow: expanded
+          ? "0 10px 22px rgba(15, 23, 42, 0.06)"
+          : "0 4px 14px rgba(15, 23, 42, 0.035)",
+      }}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-semibold text-text-primary">
+            {config.name}
+          </div>
+          <div className="mt-1 text-xs text-text-secondary">
+            {config.updated_at
+              ? formatRelativeTime(config.updated_at)
+              : "Saved behavior"}
+          </div>
+          {config.description && (
+            <div className="mt-1.5 text-xs leading-5 text-text-secondary">
+              {config.description}
+            </div>
+          )}
+        </div>
+        {defaultSelected && (
+          <span className="shrink-0 rounded-full border border-border bg-bg-secondary px-1.5 py-0.5 text-[9px] font-medium text-text-primary">
+            Added
+          </span>
+        )}
+      </div>
+
+      <div className="mt-2.5 flex flex-wrap items-center gap-1.5">
+        <Button
+          type="button"
+          variant={defaultSelected ? "outline" : "primary"}
+          size="sm"
+          onClick={() => void onToggleVersionSelection(config, latestVersion)}
+          disabled={versionsNotYetLoaded || Boolean(defaultLoading)}
+          className={`!min-w-[126px] !rounded-full !px-3.5 !py-2 !text-[12px] ${
+            defaultLoading ? "cursor-progress" : ""
+          } ${defaultSelected ? "!bg-bg-secondary" : ""}`}
+        >
+          {defaultLoading
+            ? "Working..."
+            : defaultSelected
+              ? "Added"
+              : "Use this behavior"}
+        </Button>
+
+        {hasVersionsPanel && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => onToggleExpansion(config.id)}
+            aria-label={
+              expanded ? "Hide saved versions" : "View saved versions"
+            }
+            className={`!min-w-[146px] !rounded-full !px-3.5 !py-2 !text-[12px] ${
+              expanded
+                ? "!border-accent-primary !bg-bg-secondary"
+                : "!bg-bg-primary"
+            }`}
+          >
+            <span className="font-semibold">
+              {expanded ? "Hide versions" : "Show versions"}
+            </span>
+            <span className="rounded-full bg-bg-secondary px-1.5 py-0.5 text-[10px] font-semibold text-text-secondary">
+              {versionCountLabel}
+            </span>
+            <ChevronDownIcon
+              className={`h-3 w-3 transition-transform duration-300 ease-in-out ${
+                expanded ? "rotate-180" : "rotate-0"
+              }`}
+            />
+          </Button>
+        )}
+      </div>
+
+      {hasVersionsPanel && (
+        <VersionSummary
+          previewVersions={previewVersions}
+          knownVersionCount={knownVersionCount}
+        />
+      )}
+
+      {hasVersionsPanel && (
+        <VersionPanel
+          config={config}
+          versions={versions}
+          expanded={expanded}
+          loadingSelectionKeys={loadingSelectionKeys}
+          isSelected={isSelected}
+          onLoadVersions={onLoadVersions}
+          onToggleVersionSelection={onToggleVersionSelection}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/prompt-config/SavedConfigs.tsx b/app/components/assessment/prompt-config/SavedConfigs.tsx
new file mode 100644
index 00000000..83a6953e
--- /dev/null
+++ b/app/components/assessment/prompt-config/SavedConfigs.tsx
@@ -0,0 +1,100 @@
+import { Button } from "@/app/components";
+import Loader from "@/app/components/Loader";
+import type { ConfigPublic } from "@/app/lib/types/configs";
+import type { ValueSetter, VersionListState } from "@/app/lib/types/assessment";
+import { buildInitialAssessmentVersionState } from "@/app/lib/utils/assessmentFetcher";
+import SavedConfigCard from "./SavedConfigCard";
+
+interface SavedConfigsProps {
+  configCards: ConfigPublic[];
+  searchQuery: string;
+  setSearchQuery: ValueSetter<string>;
+  isLoadingConfigs: boolean;
+  hasMoreConfigs: boolean;
+  nextConfigSkip: number;
+  expandedConfigId: string | null;
+  versionStateByConfig: Record<string, VersionListState>;
+  loadingSelectionKeys: Record<string, boolean>;
+  isSelected: (configId: string, version: number) => boolean;
+  onLoadMoreConfigs: (skip: number) => void;
+  onLoadVersions: (configId: string, skip: number) => void;
+  onToggleConfigExpansion: ValueSetter<string>;
+  onToggleVersionSelection: (
+    config: ConfigPublic,
+    version: number,
+  ) => void | Promise<void>;
+}
+
+export default function SavedConfigs({
+  configCards,
+  searchQuery,
+  setSearchQuery,
+  isLoadingConfigs,
+  hasMoreConfigs,
+  nextConfigSkip,
+  expandedConfigId,
+  versionStateByConfig,
+  loadingSelectionKeys,
+  isSelected,
+  onLoadMoreConfigs,
+  onLoadVersions,
+  onToggleConfigExpansion,
+  onToggleVersionSelection,
+}: SavedConfigsProps) {
+  return (
+    <div>
+      <div className="mb-3">
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search behaviors..."
+          className="w-full rounded-xl border border-border bg-bg-secondary px-4 py-2.5 text-sm text-text-primary outline-none"
+        />
+      </div>
+
+      {isLoadingConfigs ? (
+        <div className="py-8">
+          <Loader size="sm" message="Loading behaviors..." />
+        </div>
+      ) : configCards.length === 0 ? (
+        <div className="py-8 text-center text-sm text-text-secondary">
+          {searchQuery
+            ? "No behaviors match your search."
+            : "No saved behaviors found."}
+        </div>
+      ) : (
+        <div className="max-h-[560px] space-y-3 overflow-y-auto pr-1">
+          {configCards.map((config) => (
+            <SavedConfigCard
+              key={config.id}
+              config={config}
+              versions={
+                versionStateByConfig[config.id] ??
+                buildInitialAssessmentVersionState()
+              }
+              expanded={expandedConfigId === config.id}
+              loadingSelectionKeys={loadingSelectionKeys}
+              isSelected={isSelected}
+              onLoadVersions={onLoadVersions}
+              onToggleExpansion={onToggleConfigExpansion}
+              onToggleVersionSelection={onToggleVersionSelection}
+            />
+          ))}
+          {hasMoreConfigs && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              fullWidth
+              onClick={() => onLoadMoreConfigs(nextConfigSkip)}
+              className="!rounded-xl !py-2 !text-xs"
+            >
+              Load more
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/prompt-config/SelectedConfigs.tsx b/app/components/assessment/prompt-config/SelectedConfigs.tsx
new file mode 100644
index 00000000..0cb3f4c5
--- /dev/null
+++ b/app/components/assessment/prompt-config/SelectedConfigs.tsx
@@ -0,0 +1,53 @@
+import { CloseIcon } from "@/app/components/icons";
+import type { ConfigSelection } from "@/app/lib/types/assessment";
+
+interface SelectedConfigsProps {
+  configs: ConfigSelection[];
+  onRemove: (configId: string, version: number) => void;
+}
+
+export default function SelectedConfigs({
+  configs,
+  onRemove,
+}: SelectedConfigsProps) {
+  if (configs.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {configs.map((config) => (
+        <div
+          key={`${config.config_id}-${config.config_version}`}
+          className="inline-flex max-w-full items-center gap-1 rounded-full border border-accent-primary bg-accent-subtle/20 px-2 py-1"
+        >
+          <span
+            className="max-w-[100px] truncate text-[12px] font-semibold text-accent-primary"
+            title={config.name}
+          >
+            {config.name}
+          </span>
+          <span
+            className="max-w-[96px] truncate text-[10px] text-text-secondary"
+            title={`v${config.config_version} ${
+              config.provider && config.model
+                ? `· ${config.provider}/${config.model}`
+                : ""
+            }`}
+          >
+            v{config.config_version}{" "}
+            {config.provider && config.model
+              ? `· ${config.provider}/${config.model}`
+              : ""}
+          </span>
+          <button
+            type="button"
+            onClick={() => onRemove(config.config_id, config.config_version)}
+            className="inline-flex h-[22px] w-[22px] cursor-pointer items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-bg-secondary hover:text-text-primary"
+            aria-label={`Remove ${config.name}`}
+          >
+            <CloseIcon className="h-3 w-3" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/assessment/prompt-config/SetupProgress.tsx b/app/components/assessment/prompt-config/SetupProgress.tsx
new file mode 100644
index 00000000..416e8caa
--- /dev/null
+++ b/app/components/assessment/prompt-config/SetupProgress.tsx
@@ -0,0 +1,37 @@
+import { MAX_CONFIGS } from "@/app/lib/types/assessment";
+
+interface StatusPillProps {
+  label: string;
+  value: string;
+}
+
+interface SetupProgressProps {
+  promptStatus: string;
+  selectedConfigCount: number;
+  responseSummary: string;
+}
+
+function StatusPill({ label, value }: StatusPillProps) {
+  return (
+    <span className="inline-flex items-center rounded-full border border-border bg-bg-primary px-3 py-1.5 text-xs font-medium text-text-secondary">
+      {label}: {value}
+    </span>
+  );
+}
+
+export default function SetupProgress({
+  promptStatus,
+  selectedConfigCount,
+  responseSummary,
+}: SetupProgressProps) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <StatusPill label="Prompt" value={promptStatus} />
+      <StatusPill
+        label="Behaviors"
+        value={`${selectedConfigCount}/${MAX_CONFIGS}`}
+      />
+      <StatusPill label="Output" value={responseSummary} />
+    </div>
+  );
+}
diff --git a/app/components/assessment/prompt-config/SystemPrompt.tsx b/app/components/assessment/prompt-config/SystemPrompt.tsx
new file mode 100644
index 00000000..218ab1ac
--- /dev/null
+++ b/app/components/assessment/prompt-config/SystemPrompt.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDownIcon } from "@/app/components/icons";
+import InfoTooltip from "@/app/components/InfoTooltip";
+import type { ValueSetter } from "@/app/lib/types/assessment";
+import PromptEditor from "./PromptEditor";
+
+interface SystemPromptProps {
+  value: string;
+  onChange: ValueSetter<string>;
+  previewMode: boolean;
+}
+
+export default function SystemPrompt({
+  value,
+  onChange,
+  previewMode,
+}: SystemPromptProps) {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <div className="overflow-hidden rounded-2xl border border-border bg-bg-primary">
+      <div className="flex items-center justify-between gap-3 px-5 py-4">
+        <button
+          type="button"
+          onClick={() => setIsOpen((prev) => !prev)}
+          className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md text-left"
+        >
+          <ChevronDownIcon
+            className={`h-4 w-4 text-text-secondary transition-transform ${
+              isOpen ? "rotate-0" : "-rotate-90"
+            }`}
+          />
+          <span className="text-base font-semibold text-text-primary">
+            System prompt
+          </span>
+        </button>
+        <InfoTooltip
+          text={
+            <span>
+              Set the evaluation rules. Example: judge every answer fairly,
+              follow the scoring format, and explain the result briefly.
+            </span>
+          }
+        />
+      </div>
+
+      {isOpen && (
+        <div className="border-t border-border px-5 pb-5 pt-4">
+          <PromptEditor
+            value={value}
+            onChange={onChange}
+            previewMode={previewMode}
+            enablePlaceholders={false}
+            emptyPreviewText="Example system prompt preview appears here."
+            placeholder={`Describe how AI should behave:\n\nYou are an evaluator. Judge answer quality.\nKeep reasoning concise and return strict output.`}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/prompt-config/UserPrompt.tsx b/app/components/assessment/prompt-config/UserPrompt.tsx
new file mode 100644
index 00000000..41aee235
--- /dev/null
+++ b/app/components/assessment/prompt-config/UserPrompt.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/app/components";
+import { ChevronDownIcon } from "@/app/components/icons";
+import InfoTooltip from "@/app/components/InfoTooltip";
+import type { SampleRow, ValueSetter } from "@/app/lib/types/assessment";
+import PromptEditor from "./PromptEditor";
+
+interface UserPromptProps {
+  textColumns: string[];
+  sampleRow: SampleRow;
+  promptTemplate: string;
+  setPromptTemplate: ValueSetter<string>;
+  previewMode: boolean;
+}
+
+export default function UserPrompt({
+  textColumns,
+  sampleRow,
+  promptTemplate,
+  setPromptTemplate,
+  previewMode,
+}: UserPromptProps) {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <div className="overflow-hidden rounded-2xl border border-border bg-bg-primary">
+      <div className="flex items-center justify-between gap-3 px-5 py-4">
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={() => setIsOpen((prev) => !prev)}
+          className="!min-w-0 !flex-1 !justify-start !rounded-md !p-0 hover:bg-transparent focus-visible:bg-transparent"
+        >
+          <ChevronDownIcon
+            className={`h-4 w-4 text-text-secondary transition-transform ${
+              isOpen ? "rotate-0" : "-rotate-90"
+            }`}
+          />
+          <span className="text-base font-semibold text-text-primary">
+            User prompt
+          </span>
+        </Button>
+        <InfoTooltip
+          text={
+            <span>
+              Tell the AI what to check in each row. Example: Read{" "}
+              {"{question}"}
+              and {"{answer}"}, then say if the answer is good and why.
+            </span>
+          }
+        />
+      </div>
+
+      {isOpen && (
+        <div className="border-t border-border px-5 pb-5 pt-4">
+          <PromptEditor
+            value={promptTemplate}
+            onChange={setPromptTemplate}
+            previewMode={previewMode}
+            textColumns={textColumns}
+            sampleRow={sampleRow}
+            enablePlaceholders
+            emptyPreviewText="Preview will appear here."
+            placeholder={`Describe what the AI should do.\n\nExample:\nEvaluate the student's answer.\nQuestion: {question}\nAnswer: {answer}\nContext: {context}`}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/results/ResultsHeader.tsx b/app/components/assessment/results/ResultsHeader.tsx
new file mode 100644
index 00000000..2e7d3c84
--- /dev/null
+++ b/app/components/assessment/results/ResultsHeader.tsx
@@ -0,0 +1,73 @@
+import { RefreshIcon } from "@/app/components/icons";
+import Select from "@/app/components/Select";
+import {
+  RESULT_SUMMARY_ITEMS,
+  SUMMARY_BADGE_CLASSES,
+  STATUS_FILTER_OPTIONS,
+} from "@/app/lib/assessment/constants";
+import type {
+  ResultsCounts,
+  StatusFilter,
+  ValueSetter,
+} from "@/app/lib/types/assessment";
+
+interface ResultsHeaderProps {
+  counts: ResultsCounts;
+  statusFilter: StatusFilter;
+  isLoading: boolean;
+  onStatusFilterChange: ValueSetter<StatusFilter>;
+  onRefresh: () => void;
+}
+
+export default function ResultsHeader({
+  counts,
+  statusFilter,
+  isLoading,
+  onStatusFilterChange,
+  onRefresh,
+}: ResultsHeaderProps) {
+  return (
+    <div className="flex shrink-0 items-center justify-between border-b border-border bg-bg-primary px-6 py-4">
+      <div className="flex items-center gap-3">
+        <h2 className="text-base font-semibold text-text-primary">
+          Assessments
+        </h2>
+        <div className="flex items-center gap-2 ml-2">
+          {RESULT_SUMMARY_ITEMS.map((item) => (
+            <span
+              key={item.label}
+              className={`inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs ${SUMMARY_BADGE_CLASSES[item.tone]}`}
+            >
+              <span className="font-semibold">{counts[item.key]}</span>
+              <span className="text-text-secondary">
+                {item.label.toLowerCase()}
+              </span>
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Select
+          aria-label="Filter by status"
+          value={statusFilter}
+          onChange={(e) => onStatusFilterChange(e.target.value as StatusFilter)}
+          options={STATUS_FILTER_OPTIONS}
+          className="w-full cursor-pointer rounded-md border border-border bg-bg-primary px-3 py-1.5 text-sm text-text-primary outline-none focus:ring-1"
+        />
+
+        <button
+          type="button"
+          onClick={onRefresh}
+          disabled={isLoading}
+          className="inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-white p-2 text-text-secondary transition-colors hover:bg-neutral-50 hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50"
+          aria-label="Refresh assessments"
+        >
+          <RefreshIcon
+            className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`}
+          />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/review/ColumnsReview.tsx b/app/components/assessment/review/ColumnsReview.tsx
new file mode 100644
index 00000000..6fb49db6
--- /dev/null
+++ b/app/components/assessment/review/ColumnsReview.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import type { ReviewColumn } from "@/app/lib/types/assessment";
+import ReviewSection from "./ReviewSection";
+
+interface ColumnsReviewProps {
+  mappedColumns: ReviewColumn[];
+  mappedCount: number;
+  isOpen: boolean;
+  onToggle: () => void;
+  onEdit: () => void;
+}
+
+export default function ColumnsReview({
+  mappedColumns,
+  mappedCount,
+  isOpen,
+  onToggle,
+  onEdit,
+}: ColumnsReviewProps) {
+  return (
+    <ReviewSection
+      title="Column Mapping"
+      isOpen={isOpen}
+      onToggle={onToggle}
+      onEdit={onEdit}
+      badge={`${mappedCount} mapped`}
+    >
+      <div className="pt-2">
+        {mappedColumns.length === 0 ? (
+          <div className="rounded-md bg-neutral-50 p-3 text-xs text-neutral-500">
+            No columns mapped.
+          </div>
+        ) : (
+          <div className="space-y-1 text-xs">
+            {mappedColumns.map((item) => (
+              <div key={item.key} className="font-mono">
+                <span
+                  className={`inline-flex rounded-md px-2 py-0.5 text-[11px] font-semibold ${item.badgeClass}`}
+                >
+                  {item.role}
+                </span>
+                <span className="text-neutral-500"> - </span>
+                <span className="text-neutral-900">{item.column}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </ReviewSection>
+  );
+}
diff --git a/app/components/assessment/review/ConfigsReview.tsx b/app/components/assessment/review/ConfigsReview.tsx
new file mode 100644
index 00000000..cea161e6
--- /dev/null
+++ b/app/components/assessment/review/ConfigsReview.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import type { ConfigSelection } from "@/app/lib/types/assessment";
+import ReviewSection from "./ReviewSection";
+
+interface ConfigsReviewProps {
+  configs: ConfigSelection[];
+  isOpen: boolean;
+  onToggle: () => void;
+  onEdit: () => void;
+}
+
+export default function ConfigsReview({
+  configs,
+  isOpen,
+  onToggle,
+  onEdit,
+}: ConfigsReviewProps) {
+  return (
+    <ReviewSection
+      title="Configurations"
+      isOpen={isOpen}
+      onToggle={onToggle}
+      onEdit={onEdit}
+      badge={`${configs.length} selected`}
+    >
+      <div className="space-y-2 pt-2">
+        {configs.map((config, index) => (
+          <div
+            key={`${config.config_id}-${config.config_version}`}
+            className="flex items-center gap-3 rounded-md bg-neutral-50 p-2.5"
+          >
+            <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-accent-primary text-[10px] font-bold text-white">
+              {index + 1}
+            </span>
+            <div className="min-w-0 flex-1">
+              <span className="text-sm font-medium text-neutral-900">
+                {config.name}
+              </span>
+              <span className="ml-1.5 rounded bg-white px-1.5 py-0.5 text-[10px] font-medium text-neutral-500">
+                v{config.config_version}
+              </span>
+            </div>
+            <span className="flex-shrink-0 text-xs text-neutral-500">
+              {config.provider}/{config.model}
+            </span>
+          </div>
+        ))}
+      </div>
+    </ReviewSection>
+  );
+}
diff --git a/app/components/assessment/review/DatasetReview.tsx b/app/components/assessment/review/DatasetReview.tsx
new file mode 100644
index 00000000..e1154eaf
--- /dev/null
+++ b/app/components/assessment/review/DatasetReview.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import ReviewSection from "./ReviewSection";
+
+interface DatasetReviewProps {
+  datasetName: string;
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+export default function DatasetReview({
+  datasetName,
+  isOpen,
+  onToggle,
+}: DatasetReviewProps) {
+  return (
+    <ReviewSection title="Dataset" isOpen={isOpen} onToggle={onToggle}>
+      <div className="pt-2">
+        <div className="mb-1 text-xs font-medium text-neutral-500">
+          Dataset Name
+        </div>
+        <div className="text-sm font-medium text-neutral-900">
+          {datasetName || "Unknown dataset"}
+        </div>
+      </div>
+    </ReviewSection>
+  );
+}
diff --git a/app/components/assessment/review/ExperimentReview.tsx b/app/components/assessment/review/ExperimentReview.tsx
new file mode 100644
index 00000000..52b6ec79
--- /dev/null
+++ b/app/components/assessment/review/ExperimentReview.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Field } from "@/app/components";
+import type { ValueSetter } from "@/app/lib/types/assessment";
+
+interface ExperimentReviewProps {
+  experimentName: string;
+  setExperimentName: ValueSetter<string>;
+}
+
+export default function ExperimentReview({
+  experimentName,
+  setExperimentName,
+}: ExperimentReviewProps) {
+  return (
+    <div className="rounded-lg border border-neutral-200 bg-white p-4">
+      <Field
+        label="Experiment Name"
+        value={experimentName}
+        onChange={setExperimentName}
+        placeholder="e.g. GPT-4o vs Claude Sonnet on medical QA"
+        className="!rounded-md !bg-neutral-50 !px-3 !py-2"
+      />
+      <p className="mt-1.5 text-[11px] text-neutral-500">
+        A descriptive name to identify this evaluation run.
+      </p>
+    </div>
+  );
+}
diff --git a/app/components/assessment/review/InputReview.tsx b/app/components/assessment/review/InputReview.tsx
new file mode 100644
index 00000000..a3b34fe5
--- /dev/null
+++ b/app/components/assessment/review/InputReview.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Modal } from "@/app/components";
+import { ChevronRightIcon } from "@/app/components/icons";
+import {
+  DEFAULT_SYSTEM_PROMPT,
+  DEFAULT_USER_PROMPT,
+} from "@/app/lib/assessment/constants";
+import ReviewSection from "./ReviewSection";
+
+interface InputReviewProps {
+  systemInstruction: string;
+  promptTemplate: string;
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+interface PromptNodeProps {
+  title: string;
+  value: string;
+  fallback: string;
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+function PromptNode({
+  title,
+  value,
+  fallback,
+  isOpen,
+  onToggle,
+}: PromptNodeProps) {
+  return (
+    <div>
+      <div className="flex items-center gap-2 text-neutral-700">
+        <button
+          type="button"
+          onClick={onToggle}
+          className="flex h-5 w-5 cursor-pointer items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900"
+          aria-label={`Toggle ${title}`}
+        >
+          <ChevronRightIcon
+            className={`h-3.5 w-3.5 transition-transform ${
+              isOpen ? "rotate-90" : "rotate-0"
+            }`}
+          />
+        </button>
+        <h3 className="text-base font-semibold text-neutral-900">{title}</h3>
+      </div>
+      {isOpen && (
+        <pre className="mt-2 whitespace-pre-wrap pl-5 font-mono text-xs text-neutral-700">
+          {value.trim() || fallback}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+export default function InputReview({
+  systemInstruction,
+  promptTemplate,
+  isOpen,
+  onToggle,
+}: InputReviewProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isSystemNodeOpen, setIsSystemNodeOpen] = useState(true);
+  const [isUserNodeOpen, setIsUserNodeOpen] = useState(true);
+
+  const llmInputGist = useMemo(
+    () => ({
+      system: systemInstruction.trim() || DEFAULT_SYSTEM_PROMPT,
+      user: promptTemplate.trim() || DEFAULT_USER_PROMPT,
+    }),
+    [promptTemplate, systemInstruction],
+  );
+
+  return (
+    <>
+      <ReviewSection
+        title="LLM Input"
+        isOpen={isOpen}
+        onToggle={onToggle}
+        headerAction={
+          <button
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation();
+              setIsModalOpen(true);
+            }}
+            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-accent-secondary text-text-primary transition-colors hover:bg-accent-secondary-hover hover:text-text-primary"
+            aria-label="Expand LLM input"
+            title="Expand LLM input"
+          >
+            <span className="text-base leading-none">⤢</span>
+          </button>
+        }
+        badge={
+          systemInstruction.trim() || promptTemplate.trim()
+            ? "Configured"
+            : "Default"
+        }
+      >
+        <div className="space-y-2 pt-2">
+          <div>
+            <h3 className="text-sm font-bold text-neutral-900">
+              System Prompt
+            </h3>
+            <pre
+              className="mt-1 whitespace-pre-wrap font-mono text-xs text-neutral-700"
+              style={{
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+              }}
+            >
+              {llmInputGist.system}
+            </pre>
+          </div>
+          <div>
+            <h3 className="text-sm font-bold text-neutral-900">User Prompt</h3>
+            <pre
+              className="mt-1 whitespace-pre-wrap font-mono text-xs text-neutral-700"
+              style={{
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+              }}
+            >
+              {llmInputGist.user}
+            </pre>
+          </div>
+        </div>
+      </ReviewSection>
+
+      <Modal
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        title="LLM Input"
+        maxWidth="max-w-3xl"
+      >
+        <div className="max-h-[72vh] overflow-y-auto px-4 py-3">
+          <div className="space-y-3">
+            <PromptNode
+              title="System Prompt"
+              value={systemInstruction}
+              fallback={DEFAULT_SYSTEM_PROMPT}
+              isOpen={isSystemNodeOpen}
+              onToggle={() => setIsSystemNodeOpen((prev) => !prev)}
+            />
+            <PromptNode
+              title="User Prompt"
+              value={promptTemplate}
+              fallback={DEFAULT_USER_PROMPT}
+              isOpen={isUserNodeOpen}
+              onToggle={() => setIsUserNodeOpen((prev) => !prev)}
+            />
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}
diff --git a/app/components/assessment/review/ReviewSection.tsx b/app/components/assessment/review/ReviewSection.tsx
new file mode 100644
index 00000000..3b04bece
--- /dev/null
+++ b/app/components/assessment/review/ReviewSection.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { Button } from "@/app/components";
+import { ChevronRightIcon } from "@/app/components/icons";
+import type { ReactNode } from "react";
+
+interface ReviewSectionProps {
+  title: string;
+  isOpen: boolean;
+  onToggle: () => void;
+  onEdit?: () => void;
+  headerAction?: ReactNode;
+  badge?: string;
+  children: ReactNode;
+}
+
+export default function ReviewSection({
+  title,
+  isOpen,
+  onToggle,
+  onEdit,
+  headerAction,
+  badge,
+  children,
+}: ReviewSectionProps) {
+  return (
+    <div
+      className={`overflow-hidden rounded-lg border bg-bg-primary ${
+        isOpen ? "border-accent-primary" : "border-border"
+      }`}
+    >
+      <div
+        onClick={onToggle}
+        className={`flex w-full cursor-pointer items-center justify-between px-4 py-3.5 text-left transition-colors ${
+          isOpen ? "bg-accent-subtle/15" : "bg-bg-primary"
+        }`}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onToggle();
+          }
+        }}
+      >
+        <div className="flex items-center gap-3">
+          <ChevronRightIcon
+            className={`h-4 w-4 flex-shrink-0 text-text-secondary transition-transform ${
+              isOpen ? "rotate-90" : "rotate-0"
+            }`}
+          />
+          <span className="text-sm font-semibold text-text-primary">
+            {title}
+          </span>
+          {badge && (
+            <span className="rounded-full bg-bg-secondary px-2 py-0.5 text-[10px] font-medium text-text-secondary">
+              {badge}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {headerAction}
+          {onEdit && (
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={(event) => {
+                event.stopPropagation();
+                onEdit();
+              }}
+              className="!rounded-md !px-2.5 !py-1 !text-xs"
+            >
+              Edit
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {isOpen && (
+        <div className="border-t border-border px-4 pb-4 pt-1">{children}</div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/review/SchemaReview.tsx b/app/components/assessment/review/SchemaReview.tsx
new file mode 100644
index 00000000..9be4a785
--- /dev/null
+++ b/app/components/assessment/review/SchemaReview.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import type { SchemaProperty } from "@/app/lib/types/assessment";
+import ReviewSection from "./ReviewSection";
+
+interface SchemaReviewProps {
+  outputSchema: SchemaProperty[];
+  isOpen: boolean;
+  onToggle: () => void;
+  onEdit: () => void;
+}
+
+export default function SchemaReview({
+  outputSchema,
+  isOpen,
+  onToggle,
+  onEdit,
+}: SchemaReviewProps) {
+  return (
+    <ReviewSection
+      title="Response Format"
+      isOpen={isOpen}
+      onToggle={onToggle}
+      onEdit={onEdit}
+      badge={
+        outputSchema.length > 0 ? `${outputSchema.length} fields` : "Free text"
+      }
+    >
+      <div className="pt-2">
+        {outputSchema.length > 0 ? (
+          <div className="flex flex-wrap gap-1.5">
+            {outputSchema.map((property) => (
+              <span
+                key={property.id}
+                className="inline-flex items-center gap-1 rounded bg-accent-subtle/30 px-2 py-0.5 font-mono text-xs font-medium text-accent-primary"
+              >
+                {property.name || "(unnamed)"}
+                <span className="font-sans text-[10px] opacity-70">
+                  {property.isArray ? `${property.type}[]` : property.type}
+                </span>
+              </span>
+            ))}
+          </div>
+        ) : (
+          <div className="rounded-md bg-bg-secondary p-3 text-xs text-text-secondary">
+            No response format defined — model will return free-form text.
+          </div>
+        )}
+      </div>
+    </ReviewSection>
+  );
+}
diff --git a/app/components/assessment/review/SubmitReview.tsx b/app/components/assessment/review/SubmitReview.tsx
new file mode 100644
index 00000000..6be30350
--- /dev/null
+++ b/app/components/assessment/review/SubmitReview.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { Button } from "@/app/components";
+import { ChevronLeftIcon } from "@/app/components/icons";
+import PlayIcon from "@/app/components/icons/assessment/PlayIcon";
+
+interface SubmitReviewProps {
+  isSubmitting: boolean;
+  canSubmit: boolean;
+  submitBlockerMessage: string;
+  onSubmit: () => void;
+  onBack: () => void;
+}
+
+export default function SubmitReview({
+  isSubmitting,
+  canSubmit,
+  submitBlockerMessage,
+  onSubmit,
+  onBack,
+}: SubmitReviewProps) {
+  return (
+    <div className="sticky bottom-0 z-10 mt-auto border-t border-neutral-200 bg-neutral-50 py-2">
+      <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
+        <Button
+          type="button"
+          variant="outline"
+          size="lg"
+          onClick={onBack}
+          disabled={isSubmitting}
+          className="!rounded-lg !px-6"
+        >
+          <ChevronLeftIcon className="h-3.5 w-3.5" />
+          Back
+        </Button>
+        <div className="flex items-center gap-3">
+          {!isSubmitting && !canSubmit && (
+            <span className="text-xs text-neutral-500">
+              {submitBlockerMessage}
+            </span>
+          )}
+          <Button
+            type="button"
+            size="lg"
+            onClick={onSubmit}
+            disabled={isSubmitting || !canSubmit}
+            className="!rounded-lg !px-8"
+          >
+            {isSubmitting ? (
+              <>
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-neutral-500 border-t-transparent" />
+                Submitting...
+              </>
+            ) : (
+              <>
+                <PlayIcon className="h-5 w-5" />
+                Submit Evaluation
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/evaluations/CreateDatasetForm.tsx b/app/components/evaluations/CreateDatasetForm.tsx
new file mode 100644
index 00000000..eac56565
--- /dev/null
+++ b/app/components/evaluations/CreateDatasetForm.tsx
@@ -0,0 +1,246 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Button, Field } from "@/app/components";
+import Select from "@/app/components/Select";
+import {
+  CheckLineIcon,
+  CloseIcon,
+  CloudUploadIcon,
+} from "@/app/components/icons";
+
+interface CreateDatasetFormProps {
+  datasetName: string;
+  setDatasetName: (name: string) => void;
+  datasetDescription: string;
+  setDatasetDescription: (desc: string) => void;
+  duplicationFactor: string;
+  setDuplicationFactor: (factor: string) => void;
+  uploadedFile: File | null;
+  onFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onRemoveFile: () => void;
+  isUploading: boolean;
+  handleCreateDataset: () => void;
+  resetForm: () => void;
+}
+
+export default function CreateDatasetForm({
+  datasetName,
+  setDatasetName,
+  datasetDescription,
+  setDatasetDescription,
+  duplicationFactor,
+  setDuplicationFactor,
+  uploadedFile,
+  onFileSelect,
+  onRemoveFile,
+  isUploading,
+  handleCreateDataset,
+  resetForm,
+}: CreateDatasetFormProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [showDuplicationInfo, setShowDuplicationInfo] = useState(false);
+  const [duplicationInfoPos, setDuplicationInfoPos] = useState({
+    top: 0,
+    left: 0,
+  });
+
+  useEffect(() => {
+    if (!showDuplicationInfo) return;
+    const handleClick = () => setShowDuplicationInfo(false);
+    const handleScroll = () => setShowDuplicationInfo(false);
+    document.addEventListener("click", handleClick);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("click", handleClick);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [showDuplicationInfo]);
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file && file.name.endsWith(".csv")) {
+      const dt = new DataTransfer();
+      dt.items.add(file);
+      if (fileInputRef.current) {
+        fileInputRef.current.files = dt.files;
+        fileInputRef.current.dispatchEvent(
+          new Event("change", { bubbles: true }),
+        );
+      }
+    }
+  };
+
+  const isCreateDisabled = !uploadedFile || !datasetName.trim() || isUploading;
+
+  return (
+    <div className="flex-1 overflow-auto p-4 space-y-4">
+      <div>
+        <h2 className="text-base font-semibold text-text-primary">
+          Create New Dataset
+        </h2>
+        <p className="text-xs mt-0.5 text-text-secondary">
+          Upload a CSV with golden question-answer pairs
+        </p>
+      </div>
+
+      <Field
+        label="Name *"
+        value={datasetName}
+        onChange={setDatasetName}
+        placeholder="e.g., QnA Dataset v1"
+      />
+
+      <Field
+        label="Description"
+        value={datasetDescription}
+        onChange={setDatasetDescription}
+        placeholder="Optional description"
+      />
+
+      <div>
+        <label className="text-xs font-medium mb-1.5 text-text-secondary">
+          <span className="inline-flex items-center gap-1">
+            Duplication Factor
+            <span
+              className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer shrink-0 bg-bg-primary border border-border text-text-secondary"
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                const rect = e.currentTarget.getBoundingClientRect();
+                setDuplicationInfoPos({
+                  top: rect.bottom + 4,
+                  left: rect.left,
+                });
+                setShowDuplicationInfo(!showDuplicationInfo);
+              }}
+            >
+              i
+            </span>
+            {showDuplicationInfo && (
+              <div
+                className="fixed z-50 rounded-lg shadow-lg border text-xs p-3 bg-bg-primary border-border w-[280px]"
+                style={{
+                  top: duplicationInfoPos.top,
+                  left: duplicationInfoPos.left,
+                }}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div className="font-semibold mb-1 text-text-primary">
+                  Duplication Factor
+                </div>
+                <p className="text-text-secondary leading-relaxed">
+                  Controls how many times each question is sent to the AI to
+                  generate an answer. For example, setting this to 3 means the
+                  AI answers each question 3 separate times — helpful for
+                  checking if the AI gives consistent and reliable responses
+                  each time.
+                </p>
+              </div>
+            )}
+          </span>
+        </label>
+        <Select
+          value={duplicationFactor}
+          onChange={(e) => setDuplicationFactor(e.target.value)}
+          options={[1, 2, 3, 4, 5].map((n) => ({
+            value: String(n),
+            label: String(n),
+          }))}
+        />
+      </div>
+
+      <div>
+        <label className="block text-xs font-medium mb-1.5 text-text-secondary">
+          Upload CSV *
+        </label>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".csv"
+          onChange={onFileSelect}
+          className="hidden"
+        />
+
+        {uploadedFile ? (
+          <div className="rounded-lg p-3 bg-bg-secondary">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2.5">
+                <CheckLineIcon className="w-4 h-4 shrink-0 text-status-success" />
+                <div>
+                  <p className="text-sm font-medium text-text-primary">
+                    {uploadedFile.name}
+                  </p>
+                  <p className="text-xs text-text-secondary">
+                    {(uploadedFile.size / 1024).toFixed(1)} KB
+                  </p>
+                </div>
+              </div>
+              <button
+                onClick={() => {
+                  onRemoveFile();
+                  if (fileInputRef.current) fileInputRef.current.value = "";
+                }}
+                className="p-1 rounded text-text-secondary cursor-pointer"
+                aria-label="Remove file"
+              >
+                <CloseIcon className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div
+            className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
+              isDragging
+                ? "border-accent-primary bg-blue-50/30"
+                : "border-border"
+            }`}
+            onClick={() => fileInputRef.current?.click()}
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragLeave={() => setIsDragging(false)}
+            onDrop={handleDrop}
+          >
+            <CloudUploadIcon className="mx-auto h-8 w-8 mb-2 text-border" />
+            <p className="text-sm font-medium mb-1 text-text-primary">
+              Drop CSV here, or click to browse
+            </p>
+            <p className="text-xs text-text-secondary">
+              Format:{" "}
+              <span className="font-mono text-text-primary">
+                question,answer
+              </span>
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center justify-end gap-3 pt-2">
+        <Button variant="ghost" size="md" onClick={resetForm}>
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          size="md"
+          onClick={handleCreateDataset}
+          disabled={isCreateDisabled}
+        >
+          {isUploading ? (
+            <>
+              <div className="w-4 h-4 border-2 border-text-secondary border-t-transparent rounded-full animate-spin" />
+              Creating...
+            </>
+          ) : (
+            "Create Dataset"
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/evaluations/DatasetCard.tsx b/app/components/evaluations/DatasetCard.tsx
new file mode 100644
index 00000000..180d2f26
--- /dev/null
+++ b/app/components/evaluations/DatasetCard.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { Dataset } from "@/app/lib/types/dataset";
+import { Button } from "@/app/components";
+import EvalDatasetDescription from "./EvalDatasetDescription";
+
+interface DatasetCardProps {
+  dataset: Dataset;
+  isViewing: boolean;
+  onView: () => void;
+  onRequestDelete: () => void;
+}
+
+export default function DatasetCard({
+  dataset,
+  isViewing,
+  onView,
+  onRequestDelete,
+}: DatasetCardProps) {
+  return (
+    <div className="rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-[3px] border-l-accent-primary/50">
+      <div className="px-5 py-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-semibold truncate text-text-primary">
+              {dataset.dataset_name}
+            </div>
+            {dataset.description && (
+              <EvalDatasetDescription description={dataset.description} />
+            )}
+            <div className="flex items-center gap-3 mt-2 text-xs text-text-secondary">
+              <span>{dataset.total_items} items</span>
+              {dataset.duplication_factor > 1 && (
+                <>
+                  <span className="text-border">·</span>
+                  <span>x{dataset.duplication_factor} duplication</span>
+                </>
+              )}
+              {dataset.original_items > 0 &&
+                dataset.original_items !== dataset.total_items && (
+                  <>
+                    <span className="text-border">·</span>
+                    <span>{dataset.original_items} original</span>
+                  </>
+                )}
+            </div>
+          </div>
+          <div className="flex items-center gap-2 shrink-0">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onView}
+              disabled={isViewing}
+            >
+              {isViewing ? "Loading..." : "View"}
+            </Button>
+            <Button variant="outline" size="sm" onClick={onRequestDelete}>
+              <span className="text-status-error-text">Delete</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/evaluations/DatasetsTab.tsx b/app/components/evaluations/DatasetsTab.tsx
index 1e1f2f4c..34b033ae 100644
--- a/app/components/evaluations/DatasetsTab.tsx
+++ b/app/components/evaluations/DatasetsTab.tsx
@@ -1,13 +1,18 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
-import { colors } from "@/app/lib/colors";
-import { Dataset } from "@/app/lib/types/dataset";
+import { useState } from "react";
+import { Dataset, ViewDatasetModalData } from "@/app/lib/types/dataset";
 import { useToast } from "@/app/components/Toast";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetch } from "@/app/lib/apiClient";
-import EvalDatasetDescription from "./EvalDatasetDescription";
-import Loader from "@/app/components/Loader";
+import { DatabaseIcon } from "@/app/components/icons";
+import { DatasetListSkeleton } from "@/app/components";
+import DatasetCard from "./DatasetCard";
+import CreateDatasetForm from "./CreateDatasetForm";
+import ViewDatasetModal from "./ViewDatasetModal";
+import DeleteDatasetModal from "./DeleteDatasetModal";
+import { parseCsvRow } from "@/app/lib/utils";
+
 export interface DatasetsTabProps {
   leftPanelWidth: number;
   datasetName: string;
@@ -50,26 +55,11 @@ export default function DatasetsTab({
   toast,
 }: DatasetsTabProps) {
   const { isAuthenticated } = useAuth();
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
   const [deletingId, setDeletingId] = useState<number | null>(null);
-  const [showDuplicationInfo, setShowDuplicationInfo] = useState(false);
-  const [duplicationInfoPos, setDuplicationInfoPos] = useState({
-    top: 0,
-    left: 0,
-  });
-
-  useEffect(() => {
-    if (!showDuplicationInfo) return;
-    const handleClick = () => setShowDuplicationInfo(false);
-    const handleScroll = () => setShowDuplicationInfo(false);
-    document.addEventListener("click", handleClick);
-    window.addEventListener("scroll", handleScroll, true);
-    return () => {
-      document.removeEventListener("click", handleClick);
-      window.removeEventListener("scroll", handleScroll, true);
-    };
-  }, [showDuplicationInfo]);
+  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
+  const [viewingId, setViewingId] = useState<number | null>(null);
+  const [viewModalData, setViewModalData] =
+    useState<ViewDatasetModalData | null>(null);
 
   const handleDeleteDataset = async (datasetId: number) => {
     if (!isAuthenticated) return;
@@ -90,15 +80,6 @@ export default function DatasetsTab({
     }
   };
 
-  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
-  const [viewingId, setViewingId] = useState<number | null>(null);
-  const [viewModalData, setViewModalData] = useState<{
-    name: string;
-    headers: string[];
-    rows: string[][];
-    signedUrl: string;
-  } | null>(null);
-
   const handleViewDataset = async (datasetId: number, datasetName: string) => {
     if (!isAuthenticated) return;
 
@@ -119,33 +100,9 @@ export default function DatasetsTab({
         return;
       }
 
-      // Parse CSV
       const lines = csvText.split("\n").filter((l: string) => l.trim());
-      const parseRow = (line: string): string[] => {
-        const result: string[] = [];
-        let current = "";
-        let inQuotes = false;
-        for (let i = 0; i < line.length; i++) {
-          if (line[i] === '"') {
-            if (inQuotes && line[i + 1] === '"') {
-              current += '"';
-              i++;
-            } else {
-              inQuotes = !inQuotes;
-            }
-          } else if (line[i] === "," && !inQuotes) {
-            result.push(current.trim());
-            current = "";
-          } else {
-            current += line[i];
-          }
-        }
-        result.push(current.trim());
-        return result;
-      };
-
-      const headers = lines.length > 0 ? parseRow(lines[0]) : [];
-      const rows = lines.slice(1).map(parseRow);
+      const headers = lines.length > 0 ? parseCsvRow(lines[0]) : [];
+      const rows = lines.slice(1).map(parseCsvRow);
 
       setViewModalData({
         name: datasetName,
@@ -153,763 +110,98 @@ export default function DatasetsTab({
         rows,
         signedUrl: signedUrl || "",
       });
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      toast.error(err.message || "Failed to view dataset");
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to view dataset",
+      );
     } finally {
       setViewingId(null);
     }
   };
 
-  const handleDownloadFromModal = () => {
-    if (!viewModalData) return;
-    const csvLines = [viewModalData.headers.join(",")];
-    viewModalData.rows.forEach((row) => {
-      csvLines.push(
-        row
-          .map((cell) =>
-            cell.includes(",") || cell.includes('"') || cell.includes("\n")
-              ? `"${cell.replace(/"/g, '""')}"`
-              : cell,
-          )
-          .join(","),
-      );
-    });
-    const blob = new Blob([csvLines.join("\n")], {
-      type: "text/csv;charset=utf-8;",
-    });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${viewModalData.name}.csv`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const file = e.dataTransfer.files?.[0];
-    if (file && file.name.endsWith(".csv")) {
-      const dt = new DataTransfer();
-      dt.items.add(file);
-      if (fileInputRef.current) {
-        fileInputRef.current.files = dt.files;
-        fileInputRef.current.dispatchEvent(
-          new Event("change", { bubbles: true }),
-        );
-      }
-    }
-  };
+  const datasetToDelete =
+    confirmDeleteId !== null
+      ? storedDatasets.find((d) => d.dataset_id === confirmDeleteId)
+      : undefined;
 
   return (
     <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Create Dataset Form */}
-      <div
-        className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-        style={{
-          width: `${leftPanelWidth}px`,
-          backgroundColor: colors.bg.primary,
-          borderColor: colors.border,
-        }}
-      >
-        <div className="flex-1 overflow-auto p-4 space-y-4">
-          {/* Page Title */}
-          <div>
-            <h2
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
-              Create New Dataset
-            </h2>
-            <p
-              className="text-xs mt-0.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Upload a CSV with golden question-answer pairs
-            </p>
-          </div>
-
-          {/* Name */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Name *
-            </label>
-            <input
-              type="text"
-              value={datasetName}
-              onChange={(e) => setDatasetName(e.target.value)}
-              placeholder="e.g., QnA Dataset v1"
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            />
-          </div>
-
-          {/* Description */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Description
-            </label>
-            <input
-              type="text"
-              value={datasetDescription}
-              onChange={(e) => setDatasetDescription(e.target.value)}
-              placeholder="Optional description"
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            />
-          </div>
-
-          {/* Duplication Factor */}
-          <div>
-            <label
-              className="text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              <span className="inline-flex items-center gap-1">
-                Duplication Factor
-                <span
-                  className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer shrink-0"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    border: `1px solid ${colors.border}`,
-                    color: colors.text.secondary,
-                  }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    const rect = e.currentTarget.getBoundingClientRect();
-                    setDuplicationInfoPos({
-                      top: rect.bottom + 4,
-                      left: rect.left,
-                    });
-                    setShowDuplicationInfo(!showDuplicationInfo);
-                  }}
-                >
-                  i
-                </span>
-                {showDuplicationInfo && (
-                  <div
-                    className="fixed z-50 rounded-lg shadow-lg border text-xs p-3"
-                    style={{
-                      backgroundColor: colors.bg.primary,
-                      borderColor: colors.border,
-                      width: "280px",
-                      top: duplicationInfoPos.top,
-                      left: duplicationInfoPos.left,
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <div
-                      className="font-semibold mb-1"
-                      style={{ color: colors.text.primary }}
-                    >
-                      Duplication Factor
-                    </div>
-                    <p
-                      style={{
-                        color: colors.text.secondary,
-                        lineHeight: "1.5",
-                      }}
-                    >
-                      Controls how many times each question is sent to the AI to
-                      generate an answer. For example, setting this to 3 means
-                      the AI answers each question 3 separate times — helpful
-                      for checking if the AI gives consistent and reliable
-                      responses each time.
-                    </p>
-                  </div>
-                )}
-              </span>
-            </label>
-            <select
-              value={duplicationFactor}
-              onChange={(e) => setDuplicationFactor(e.target.value)}
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            >
-              {[1, 2, 3, 4, 5].map((n) => (
-                <option key={n} value={String(n)}>
-                  {n}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {/* CSV Upload */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Upload CSV *
-            </label>
-
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept=".csv"
-              onChange={onFileSelect}
-              className="hidden"
-            />
-
-            {uploadedFile ? (
-              <div
-                className="rounded-lg p-3"
-                style={{ backgroundColor: colors.bg.secondary }}
-              >
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2.5">
-                    <svg
-                      className="w-4 h-4 flex-shrink-0"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      style={{ color: colors.status.success }}
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M5 13l4 4L19 7"
-                      />
-                    </svg>
-                    <div>
-                      <p
-                        className="text-sm font-medium"
-                        style={{ color: colors.text.primary }}
-                      >
-                        {uploadedFile.name}
-                      </p>
-                      <p
-                        className="text-xs"
-                        style={{ color: colors.text.secondary }}
-                      >
-                        {(uploadedFile.size / 1024).toFixed(1)} KB
-                      </p>
-                    </div>
-                  </div>
-                  <button
-                    onClick={() => {
-                      onRemoveFile();
-                      if (fileInputRef.current) fileInputRef.current.value = "";
-                    }}
-                    className="p-1 rounded"
-                    style={{ color: colors.text.secondary }}
-                    aria-label="Remove file"
-                  >
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M6 18L18 6M6 6l12 12"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <div
-                className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${isDragging ? "border-blue-400 bg-blue-50/30" : ""}`}
-                style={{
-                  borderColor: isDragging
-                    ? colors.accent.primary
-                    : colors.border,
-                }}
-                onClick={() => fileInputRef.current?.click()}
-                onDragOver={(e) => {
-                  e.preventDefault();
-                  setIsDragging(true);
-                }}
-                onDragLeave={() => setIsDragging(false)}
-                onDrop={handleDrop}
-              >
-                <svg
-                  className="mx-auto h-8 w-8 mb-2"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  style={{ color: colors.border }}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                  />
-                </svg>
-                <p
-                  className="text-sm font-medium mb-1"
-                  style={{ color: colors.text.primary }}
-                >
-                  Drop CSV here, or click to browse
-                </p>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>
-                  Format:{" "}
-                  <span
-                    className="font-mono"
-                    style={{ color: colors.text.primary }}
-                  >
-                    question,answer
-                  </span>
-                </p>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Bottom Action Bar */}
-        <div
-          className="flex-shrink-0 border-t px-4 py-4 flex items-center justify-end gap-3"
-          style={{
-            borderColor: colors.border,
-            backgroundColor: colors.bg.primary,
-          }}
-        >
-          <button
-            onClick={resetForm}
-            className="px-4 py-2 rounded-lg text-sm font-medium"
-            style={{ color: colors.text.secondary }}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleCreateDataset}
-            disabled={!uploadedFile || !datasetName.trim() || isUploading}
-            className="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium"
-            style={{
-              backgroundColor:
-                !uploadedFile || !datasetName.trim() || isUploading
-                  ? colors.bg.secondary
-                  : colors.accent.primary,
-              color:
-                !uploadedFile || !datasetName.trim() || isUploading
-                  ? colors.text.secondary
-                  : "#fff",
-              cursor:
-                !uploadedFile || !datasetName.trim() || isUploading
-                  ? "not-allowed"
-                  : "pointer",
-            }}
-          >
-            {isUploading ? (
-              <>
-                <div
-                  className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-                  style={{
-                    borderColor: colors.text.secondary,
-                    borderTopColor: "transparent",
-                  }}
-                />
-                Creating...
-              </>
-            ) : (
-              "Create Dataset"
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Right Panel - Dataset List */}
-      <div
-        className="flex-1 flex flex-col overflow-hidden"
-        style={{ backgroundColor: colors.bg.secondary }}
-      >
+      <div className="flex-1 flex flex-col overflow-hidden bg-bg-secondary">
         <div className="flex-1 overflow-auto p-6">
           <div className="flex items-center justify-between mb-4">
-            <h3
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
+            <h3 className="text-base font-semibold text-text-primary">
               Datasets
             </h3>
           </div>
 
           {isDatasetsLoading ? (
-            <div className="p-16 flex justify-center">
-              <Loader size="md" message="Loading datasets..." />
-            </div>
+            <DatasetListSkeleton />
           ) : storedDatasets.length === 0 ? (
             <div className="p-16 text-center">
-              <svg
-                className="w-12 h-12 mx-auto mb-3"
-                style={{ color: colors.border }}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1.5}
-                  d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3"
-                />
-              </svg>
-              <p
-                className="text-sm font-medium mb-1"
-                style={{ color: colors.text.primary }}
-              >
+              <DatabaseIcon className="w-12 h-12 mx-auto mb-3 text-border" />
+              <p className="text-sm font-medium mb-1 text-text-primary">
                 No datasets yet
               </p>
-              <p className="text-xs" style={{ color: colors.text.secondary }}>
-                Create your first dataset using the form on the left
+              <p className="text-xs text-text-secondary">
+                Create your first dataset using the form on the right
               </p>
             </div>
           ) : (
             <div className="space-y-3">
               {storedDatasets.map((dataset) => (
-                <div
+                <DatasetCard
                   key={dataset.dataset_id}
-                  className="rounded-lg overflow-hidden"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
-                    borderLeft: "3px solid #DCCFC3",
-                  }}
-                >
-                  <div className="px-5 py-4">
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="min-w-0 flex-1">
-                        <div
-                          className="text-sm font-semibold truncate"
-                          style={{ color: colors.text.primary }}
-                        >
-                          {dataset.dataset_name}
-                        </div>
-                        {dataset.description && (
-                          <EvalDatasetDescription
-                            description={dataset.description}
-                          />
-                        )}
-                        <div
-                          className="flex items-center gap-3 mt-2 text-xs"
-                          style={{ color: colors.text.secondary }}
-                        >
-                          <span>{dataset.total_items} items</span>
-                          {dataset.duplication_factor > 1 && (
-                            <>
-                              <span style={{ color: colors.border }}>·</span>
-                              <span>
-                                x{dataset.duplication_factor} duplication
-                              </span>
-                            </>
-                          )}
-                          {dataset.original_items > 0 &&
-                            dataset.original_items !== dataset.total_items && (
-                              <>
-                                <span style={{ color: colors.border }}>·</span>
-                                <span>{dataset.original_items} original</span>
-                              </>
-                            )}
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-2 flex-shrink-0">
-                        <button
-                          onClick={() =>
-                            handleViewDataset(
-                              dataset.dataset_id,
-                              dataset.dataset_name,
-                            )
-                          }
-                          disabled={viewingId === dataset.dataset_id}
-                          className="px-3 py-1.5 rounded-lg text-xs font-medium border"
-                          style={{
-                            backgroundColor: "transparent",
-                            borderColor: colors.border,
-                            color: colors.text.primary,
-                            opacity: viewingId === dataset.dataset_id ? 0.5 : 1,
-                          }}
-                        >
-                          {viewingId === dataset.dataset_id
-                            ? "Loading..."
-                            : "View"}
-                        </button>
-                        <button
-                          onClick={() => setConfirmDeleteId(dataset.dataset_id)}
-                          className="px-3 py-1.5 rounded-lg text-xs font-medium border"
-                          style={{
-                            backgroundColor: "transparent",
-                            borderColor: colors.border,
-                            color: "hsl(8, 86%, 40%)",
-                          }}
-                        >
-                          Delete
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                  dataset={dataset}
+                  isViewing={viewingId === dataset.dataset_id}
+                  onView={() =>
+                    handleViewDataset(dataset.dataset_id, dataset.dataset_name)
+                  }
+                  onRequestDelete={() => setConfirmDeleteId(dataset.dataset_id)}
+                />
               ))}
             </div>
           )}
         </div>
       </div>
 
-      {/* View Dataset Modal */}
-      {viewModalData && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center"
-          style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
-          onClick={() => setViewModalData(null)}
-        >
-          <div
-            className="rounded-lg shadow-xl flex flex-col"
-            style={{
-              backgroundColor: colors.bg.primary,
-              width: "80vw",
-              maxWidth: "1000px",
-              maxHeight: "80vh",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Modal Header */}
-            <div
-              className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0"
-              style={{ borderColor: colors.border }}
-            >
-              <div>
-                <h3
-                  className="text-sm font-semibold"
-                  style={{ color: colors.text.primary }}
-                >
-                  {viewModalData.name}
-                </h3>
-                <p
-                  className="text-xs mt-0.5"
-                  style={{ color: colors.text.secondary }}
-                >
-                  {viewModalData.rows.length} rows ·{" "}
-                  {viewModalData.headers.length} columns
-                </p>
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={handleDownloadFromModal}
-                  className="px-3 py-1.5 rounded-md text-xs font-medium"
-                  style={{
-                    backgroundColor: colors.accent.primary,
-                    color: "#ffffff",
-                  }}
-                >
-                  Download CSV
-                </button>
-                <button
-                  onClick={() => setViewModalData(null)}
-                  className="p-1.5 rounded"
-                  style={{ color: colors.text.secondary }}
-                  aria-label="Close modal"
-                >
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
+      <div
+        className="shrink-0 border-l flex flex-col overflow-hidden bg-bg-primary border-border"
+        style={{ width: `${leftPanelWidth}px` }}
+      >
+        <CreateDatasetForm
+          datasetName={datasetName}
+          setDatasetName={setDatasetName}
+          datasetDescription={datasetDescription}
+          setDatasetDescription={setDatasetDescription}
+          duplicationFactor={duplicationFactor}
+          setDuplicationFactor={setDuplicationFactor}
+          uploadedFile={uploadedFile}
+          onFileSelect={onFileSelect}
+          onRemoveFile={onRemoveFile}
+          isUploading={isUploading}
+          handleCreateDataset={handleCreateDataset}
+          resetForm={resetForm}
+        />
+      </div>
 
-            {/* Modal Body - Table */}
-            <div className="flex-1 overflow-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr
-                    style={{
-                      backgroundColor: colors.bg.secondary,
-                      borderBottom: `1px solid ${colors.border}`,
-                    }}
-                  >
-                    <th
-                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                      style={{
-                        color: colors.text.secondary,
-                        backgroundColor: colors.bg.secondary,
-                        width: "40px",
-                      }}
-                    ></th>
-                    {viewModalData.headers.map((header, i) => (
-                      <th
-                        key={i}
-                        className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                        style={{
-                          color: colors.text.secondary,
-                          backgroundColor: colors.bg.secondary,
-                        }}
-                      >
-                        {header}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {viewModalData.rows.map((row, rowIdx) => (
-                    <tr
-                      key={rowIdx}
-                      style={{ borderBottom: `1px solid ${colors.border}` }}
-                    >
-                      <td
-                        className="px-4 py-2.5 text-xs"
-                        style={{ color: colors.text.secondary }}
-                      >
-                        {rowIdx + 1}
-                      </td>
-                      {row.map((cell, cellIdx) => (
-                        <td
-                          key={cellIdx}
-                          className="px-4 py-2.5"
-                          style={{ color: colors.text.primary }}
-                        >
-                          <div
-                            className="text-sm"
-                            style={{
-                              maxHeight: "120px",
-                              overflow: "auto",
-                              lineHeight: "1.5",
-                            }}
-                          >
-                            {cell || (
-                              <span style={{ color: colors.text.secondary }}>
-                                —
-                              </span>
-                            )}
-                          </div>
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
+      {viewModalData && (
+        <ViewDatasetModal
+          data={viewModalData}
+          onClose={() => setViewModalData(null)}
+        />
       )}
 
-      {/* Delete Confirmation Modal */}
-      {confirmDeleteId !== null &&
-        (() => {
-          const dataset = storedDatasets.find(
-            (d) => d.dataset_id === confirmDeleteId,
-          );
-          return (
-            <div
-              className="fixed inset-0 z-50 flex items-center justify-center"
-              style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
-              onClick={() => setConfirmDeleteId(null)}
-            >
-              <div
-                className="rounded-lg shadow-xl w-full max-w-md"
-                style={{ backgroundColor: colors.bg.primary }}
-                onClick={(e) => e.stopPropagation()}
-              >
-                <div className="px-6 py-5">
-                  <div className="flex items-start gap-3">
-                    <div
-                      className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
-                      style={{ backgroundColor: "rgba(220, 38, 38, 0.1)" }}
-                    >
-                      <svg
-                        className="w-5 h-5"
-                        style={{ color: "hsl(8, 86%, 40%)" }}
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                        strokeWidth={2}
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"
-                        />
-                      </svg>
-                    </div>
-                    <div>
-                      <h3
-                        className="text-sm font-semibold"
-                        style={{ color: colors.text.primary }}
-                      >
-                        Delete dataset
-                      </h3>
-                      <p
-                        className="text-sm mt-1"
-                        style={{ color: colors.text.secondary }}
-                      >
-                        Are you sure you want to delete{" "}
-                        <strong style={{ color: colors.text.primary }}>
-                          {dataset?.dataset_name}
-                        </strong>
-                        ? This action cannot be undone.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="flex items-center justify-end gap-3 px-6 py-4 border-t"
-                  style={{ borderColor: colors.border }}
-                >
-                  <button
-                    onClick={() => setConfirmDeleteId(null)}
-                    className="px-4 py-2 rounded-lg text-sm font-medium border"
-                    style={{
-                      backgroundColor: "transparent",
-                      borderColor: colors.border,
-                      color: colors.text.primary,
-                    }}
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    onClick={() => {
-                      handleDeleteDataset(confirmDeleteId);
-                      setConfirmDeleteId(null);
-                    }}
-                    disabled={deletingId === confirmDeleteId}
-                    className="px-4 py-2 rounded-lg text-sm font-medium"
-                    style={{
-                      backgroundColor: "hsl(8, 86%, 40%)",
-                      color: "#ffffff",
-                      opacity: deletingId === confirmDeleteId ? 0.5 : 1,
-                    }}
-                  >
-                    {deletingId === confirmDeleteId ? "Deleting..." : "Delete"}
-                  </button>
-                </div>
-              </div>
-            </div>
-          );
-        })()}
+      {confirmDeleteId !== null && (
+        <DeleteDatasetModal
+          datasetName={datasetToDelete?.dataset_name}
+          isDeleting={deletingId === confirmDeleteId}
+          onCancel={() => setConfirmDeleteId(null)}
+          onConfirm={() => {
+            handleDeleteDataset(confirmDeleteId);
+            setConfirmDeleteId(null);
+          }}
+        />
+      )}
     </div>
   );
 }
diff --git a/app/components/evaluations/DeleteDatasetModal.tsx b/app/components/evaluations/DeleteDatasetModal.tsx
new file mode 100644
index 00000000..0ea9f947
--- /dev/null
+++ b/app/components/evaluations/DeleteDatasetModal.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { Button, Modal } from "@/app/components";
+import { WarningIcon } from "@/app/components/icons";
+
+interface DeleteDatasetModalProps {
+  datasetName?: string;
+  isDeleting: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export default function DeleteDatasetModal({
+  datasetName,
+  isDeleting,
+  onCancel,
+  onConfirm,
+}: DeleteDatasetModalProps) {
+  return (
+    <Modal
+      open
+      onClose={onCancel}
+      maxWidth="max-w-md"
+      maxHeight="max-h-fit"
+      showClose={false}
+    >
+      <div className="px-6 py-5">
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0">
+            <WarningIcon className="w-5 h-5 text-status-error-text" />
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold text-text-primary">
+              Delete dataset
+            </h3>
+            <p className="text-sm mt-1 text-text-secondary">
+              Are you sure you want to delete{" "}
+              <strong className="text-text-primary">{datasetName}</strong>? This
+              action cannot be undone.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-border">
+        <Button variant="outline" size="md" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button
+          variant="danger"
+          size="md"
+          onClick={onConfirm}
+          disabled={isDeleting}
+        >
+          {isDeleting ? "Deleting..." : "Delete"}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/evaluations/DetailedResultsTable.tsx b/app/components/evaluations/DetailedResultsTable.tsx
index 9d50ebd3..884b4756 100644
--- a/app/components/evaluations/DetailedResultsTable.tsx
+++ b/app/components/evaluations/DetailedResultsTable.tsx
@@ -5,7 +5,6 @@
  * Supports both row format (individual traces) and grouped format (multiple answers per question)
  */
 
-import { useState, useEffect } from "react";
 import type { GroupedTraceItem, EvalJob } from "@/app/lib/types/evaluation";
 import {
   getScoreObject,
@@ -15,6 +14,7 @@ import {
   isGroupedFormat,
 } from "@/app/lib/utils/evaluation";
 import { formatScoreValue, getScoreByName } from "@/app/lib/utils";
+import { InfoTooltip } from "@/app/components";
 import GroupedResultsTable from "@/app/components/evaluations/GroupedResultsTable";
 
 interface DetailedResultsTableProps {
@@ -24,18 +24,6 @@ interface DetailedResultsTableProps {
 export default function DetailedResultsTable({
   job,
 }: DetailedResultsTableProps) {
-  const [openCommentId, setOpenCommentId] = useState<string | null>(null);
-  const [commentPos, setCommentPos] = useState({ top: 0, left: 0 });
-
-  useEffect(() => {
-    if (!openCommentId) return;
-    const handleScroll = () => setOpenCommentId(null);
-    window.addEventListener("scroll", handleScroll, true);
-    return () => {
-      window.removeEventListener("scroll", handleScroll, true);
-    };
-  }, [openCommentId]);
-
   const scoreObject = getScoreObject(job);
 
   if (!scoreObject || !hasSummaryScores(scoreObject)) {
@@ -97,25 +85,25 @@ export default function DetailedResultsTable({
           style={{ minWidth: `${tableMinWidth}px` }}
         >
           <thead>
-            <tr className="bg-bg-secondary border-b border-border">
+            <tr className="bg-accent-primary border-b border-border">
               <th
-                className="px-4 py-3 text-left text-xs font-semibold uppercase text-[#171717]"
+                className="px-4 py-3 text-left text-xs font-semibold uppercase text-bg-primary"
                 style={{ width: `${COLUMN_WIDTHS.index}px` }}
               ></th>
               <th
-                className="px-4 py-3 text-left text-xs font-semibold uppercase text-[#171717]"
+                className="px-4 py-3 text-left text-xs font-semibold uppercase text-bg-primary"
                 style={{ width: `${COLUMN_WIDTHS.question}px` }}
               >
                 Question
               </th>
               <th
-                className="px-4 py-3 text-left text-xs font-semibold uppercase text-[#171717]"
+                className="px-4 py-3 text-left text-xs font-semibold uppercase text-bg-primary"
                 style={{ width: `${COLUMN_WIDTHS.groundTruth}px` }}
               >
                 Ground Truth
               </th>
               <th
-                className="px-4 py-3 text-left text-xs font-semibold uppercase text-[#171717]"
+                className="px-4 py-3 text-left text-xs font-semibold uppercase text-bg-primary"
                 style={{ width: `${COLUMN_WIDTHS.answer}px` }}
               >
                 Answer
@@ -123,7 +111,7 @@ export default function DetailedResultsTable({
               {scoreNames.map((scoreName) => (
                 <th
                   key={scoreName}
-                  className="px-4 py-3 text-center text-xs font-semibold uppercase text-[#171717] whitespace-normal wrap-break-word"
+                  className="px-4 py-3 text-center text-xs font-semibold uppercase text-bg-primary whitespace-normal wrap-break-word"
                   style={{ width: `${COLUMN_WIDTHS.score}px` }}
                 >
                   {scoreName}
@@ -148,19 +136,19 @@ export default function DetailedResultsTable({
                   </td>
 
                   <td className="px-4 py-3 align-top bg-bg-primary">
-                    <div className="text-sm overflow-auto text-[#171717] leading-normal max-h-[150px] wrap-break-word">
+                    <div className="text-sm overflow-auto text-text-primary leading-normal max-h-[150px] wrap-break-word">
                       {question}
                     </div>
                   </td>
 
                   <td className="px-4 py-3 align-top bg-bg-primary">
-                    <div className="text-sm overflow-auto text-[#171717] leading-normal max-h-[150px] wrap-break-word">
+                    <div className="text-sm overflow-auto text-text-primary leading-normal max-h-[150px] wrap-break-word">
                       {groundTruth}
                     </div>
                   </td>
 
                   <td className="px-4 py-3 align-top bg-bg-primary">
-                    <div className="text-sm overflow-auto text-[#171717] leading-normal max-h-[150px] wrap-break-word">
+                    <div className="text-sm overflow-auto text-text-primary leading-normal max-h-[150px] wrap-break-word">
                       {answer}
                     </div>
                   </td>
@@ -185,40 +173,7 @@ export default function DetailedResultsTable({
                             {value}
                           </div>
                           {score?.comment && (
-                            <>
-                              <div
-                                className={`inline-flex items-center justify-center w-4 h-4 rounded-full text-xs font-normal ${openCommentId === `${index}-${scoreName}` ? "bg-[#171717] text-bg-primary" : "bg-bg-secondary text-text-secondary"}`}
-                                onMouseEnter={(e) => {
-                                  const rect =
-                                    e.currentTarget.getBoundingClientRect();
-                                  const tooltipWidth = 300;
-                                  const centerX = rect.left + rect.width / 2;
-                                  const clampedLeft = Math.min(
-                                    Math.max(centerX - tooltipWidth / 2, 8),
-                                    window.innerWidth - tooltipWidth - 8,
-                                  );
-                                  setCommentPos({
-                                    top: rect.top - 8,
-                                    left: clampedLeft,
-                                  });
-                                  setOpenCommentId(`${index}-${scoreName}`);
-                                }}
-                                onMouseLeave={() => setOpenCommentId(null)}
-                              >
-                                i
-                              </div>
-                              {openCommentId === `${index}-${scoreName}` && (
-                                <div
-                                  className="fixed z-50 px-3 py-2 rounded-md text-xs whitespace-normal pointer-events-none bg-[#171717] text-white border border-gray-700 w-[300px] shadow-md -translate-y-full"
-                                  style={{
-                                    top: commentPos.top,
-                                    left: commentPos.left,
-                                  }}
-                                >
-                                  {score.comment}
-                                </div>
-                              )}
-                            </>
+                            <InfoTooltip text={score.comment} />
                           )}
                         </div>
                       </td>
diff --git a/app/components/evaluations/EvalRunCard.tsx b/app/components/evaluations/EvalRunCard.tsx
index 64dba5b9..572d10d9 100644
--- a/app/components/evaluations/EvalRunCard.tsx
+++ b/app/components/evaluations/EvalRunCard.tsx
@@ -6,7 +6,7 @@ import type { EvalJob, AssistantConfig } from "@/app/lib/types/evaluation";
 import { getScoreObject } from "@/app/lib/utils/evaluation";
 import { getStatusColor } from "@/app/components/utils";
 import { timeAgo, formatCostUSD } from "@/app/lib/utils";
-import { ConfigModal, InfoTooltip } from "@/app/components";
+import { Button, ConfigModal, InfoTooltip } from "@/app/components";
 import ScoreDisplay from "@/app/components/evaluations/ScoreDisplay";
 import CostIcon from "@/app/components/icons/evaluations/CostIcon";
 import DatabaseIcon from "@/app/components/icons/evaluations/DatabaseIcon";
@@ -42,7 +42,6 @@ export default function EvalRunCard({
                 {timeAgo(job.inserted_at)}
               </div>
             )}
-            {/* Error message (if failed) */}
             {job.error_message && (
               <div className="mt-2 text-xs wrap-break-word overflow-hidden text-status-error-text">
                 {job.error_message}
@@ -50,7 +49,7 @@ export default function EvalRunCard({
             )}
           </div>
           <span
-            className={`px-2.5 py-1 rounded text-xs font-semibold uppercase tracking-wide shrink-0 ${statusColor.bg} ${statusColor.text}`}
+            className={`px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide shrink-0 ${statusColor.bg} ${statusColor.text}`}
           >
             {job.status}
           </span>
@@ -105,23 +104,21 @@ export default function EvalRunCard({
             )}
           </div>
           <div className="flex items-center gap-3 shrink-0">
-            <button
+            <Button
+              variant="outline"
+              size="sm"
               onClick={() => setIsConfigModalOpen(true)}
-              className="px-3 py-1.5 rounded-lg text-xs font-medium border border-border bg-transparent text-text-primary"
             >
               View Config
-            </button>
-            <button
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
               onClick={() => router.push(`/evaluations/${job.id}`)}
               disabled={!isCompleted}
-              className={`px-3 py-1.5 rounded-lg text-xs font-medium border border-border bg-transparent cursor-pointer disabled:cursor-not-allowed ${
-                isCompleted
-                  ? "text-text-primary opacity-100"
-                  : "text-text-secondary opacity-50"
-              }`}
             >
               View Results
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/app/components/evaluations/EvalRunsList.tsx b/app/components/evaluations/EvalRunsList.tsx
new file mode 100644
index 00000000..dabc43e4
--- /dev/null
+++ b/app/components/evaluations/EvalRunsList.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { EvalJob, AssistantConfig } from "@/app/lib/types/evaluation";
+import { ClipboardIcon, RefreshIcon } from "@/app/components/icons";
+import { RunsListSkeleton } from "@/app/components";
+import Select from "@/app/components/Select";
+import EvalRunCard from "./EvalRunCard";
+
+interface EvalRunsListProps {
+  evalJobs: EvalJob[];
+  assistantConfigs: Map<string, AssistantConfig>;
+  isLoading: boolean;
+  error: string | null;
+  statusFilter: string;
+  onStatusFilterChange: (filter: string) => void;
+  onRefresh: () => void;
+}
+
+export default function EvalRunsList({
+  evalJobs,
+  assistantConfigs,
+  isLoading,
+  error,
+  statusFilter,
+  onStatusFilterChange,
+  onRefresh,
+}: EvalRunsListProps) {
+  const filteredJobs =
+    statusFilter === "all"
+      ? evalJobs
+      : evalJobs.filter((job) => job.status.toLowerCase() === statusFilter);
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden bg-bg-secondary">
+      <div className="flex-1 overflow-auto p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-base font-semibold text-text-primary">
+            Evaluation Runs
+          </h2>
+          <div className="flex items-center gap-2">
+            <Select
+              value={statusFilter}
+              onChange={(e) => onStatusFilterChange(e.target.value)}
+              options={[
+                { value: "all", label: "All Status" },
+                { value: "completed", label: "Completed" },
+                { value: "processing", label: "Processing" },
+                { value: "pending", label: "Pending" },
+                { value: "failed", label: "Failed" },
+              ]}
+            />
+            <button
+              onClick={onRefresh}
+              disabled={isLoading}
+              className="p-1.5 rounded text-text-secondary cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+              aria-label="Refresh evaluations"
+            >
+              <RefreshIcon
+                className={`w-4 h-4 -scale-x-100 ${isLoading ? "animate-spin" : ""}`}
+              />
+            </button>
+          </div>
+        </div>
+
+        <div className="rounded-lg overflow-visible bg-bg-primary shadow-sm">
+          {isLoading && evalJobs.length === 0 && <RunsListSkeleton />}
+
+          {error && (
+            <div className="p-4">
+              <div className="rounded-lg p-3 bg-status-error-bg">
+                <p className="text-sm text-status-error-text">Error: {error}</p>
+              </div>
+            </div>
+          )}
+
+          {!isLoading && evalJobs.length === 0 && !error && (
+            <div className="p-16 text-center">
+              <ClipboardIcon className="w-12 h-12 mx-auto mb-3 text-border" />
+              <p className="text-sm font-medium mb-1 text-text-primary">
+                No evaluation runs yet
+              </p>
+              <p className="text-xs text-text-secondary">
+                Select a dataset and configuration, then run your first
+                evaluation
+              </p>
+            </div>
+          )}
+
+          {evalJobs.length > 0 &&
+            (filteredJobs.length > 0 ? (
+              <div className="p-4 space-y-3">
+                {filteredJobs.map((job) => (
+                  <EvalRunCard
+                    key={job.id}
+                    job={job}
+                    assistantConfig={
+                      job.assistant_id
+                        ? assistantConfigs.get(job.assistant_id)
+                        : undefined
+                    }
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className="p-16 text-center">
+                <p className="text-sm font-medium mb-1 text-text-primary">
+                  No {statusFilter} runs
+                </p>
+                <p className="text-xs text-text-secondary">
+                  No evaluation runs with status &quot;{statusFilter}&quot;
+                </p>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/evaluations/EvaluationsTab.tsx b/app/components/evaluations/EvaluationsTab.tsx
index d57ea05b..ec370779 100644
--- a/app/components/evaluations/EvaluationsTab.tsx
+++ b/app/components/evaluations/EvaluationsTab.tsx
@@ -2,17 +2,11 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { apiFetch } from "@/app/lib/apiClient";
-import { colors } from "@/app/lib/colors";
 import { Dataset } from "@/app/lib/types/dataset";
-import { EvalJob, AssistantConfig } from "@/app/lib/types/evaluation";
-import ConfigSelector from "@/app/components/ConfigSelector";
-import Loader from "@/app/components/Loader";
-import EvalRunCard from "./EvalRunCard";
-import EvalDatasetDescription from "./EvalDatasetDescription";
+import { EvalJob, AssistantConfig, Tab } from "@/app/lib/types/evaluation";
 import { useAuth } from "@/app/lib/context/AuthContext";
-import { RefreshIcon } from "@/app/components/icons";
-
-type Tab = "datasets" | "evaluations";
+import EvalRunsList from "./EvalRunsList";
+import RunEvaluationForm from "./RunEvaluationForm";
 
 export interface EvaluationsTabProps {
   leftPanelWidth: number;
@@ -46,7 +40,7 @@ export default function EvaluationsTab({
   setActiveTab,
 }: EvaluationsTabProps) {
   const [evalJobs, setEvalJobs] = useState<EvalJob[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [assistantConfigs, setAssistantConfigs] = useState<
     Map<string, AssistantConfig>
@@ -56,12 +50,13 @@ export default function EvaluationsTab({
   const selectedDataset = storedDatasets.find(
     (d) => d.dataset_id.toString() === selectedDatasetId,
   );
-  const canRun =
+  const canRun = Boolean(
     experimentName.trim() &&
     selectedDatasetId &&
     selectedConfigId &&
     selectedConfigVersion &&
-    !isEvaluating;
+    !isEvaluating,
+  );
 
   const { isAuthenticated } = useAuth();
 
@@ -120,383 +115,47 @@ export default function EvaluationsTab({
 
   useEffect(() => {
     if (isAuthenticated) fetchEvaluations();
+    else setIsLoading(false);
   }, [isAuthenticated, fetchEvaluations]);
 
+  const handleRun = async () => {
+    const success = await handleRunEvaluation();
+    if (success) fetchEvaluations();
+  };
+
   return (
     <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Configuration */}
-      <div
-        className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-        style={{
-          width: `${leftPanelWidth}px`,
-          backgroundColor: colors.bg.primary,
-          borderColor: colors.border,
-        }}
-      >
-        <div className="flex-1 overflow-auto p-4 space-y-4">
-          {/* Page Title */}
-          <div>
-            <h2
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
-              Run New Evaluation
-            </h2>
-            <p
-              className="text-xs mt-0.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Test model responses against your golden datasets
-            </p>
-          </div>
-
-          {/* Evaluation Name */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Name *
-            </label>
-            <input
-              type="text"
-              value={experimentName}
-              onChange={(e) => setExperimentName(e.target.value)}
-              placeholder="e.g., test_run_1"
-              disabled={isEvaluating}
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: isEvaluating
-                  ? colors.bg.secondary
-                  : colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            />
-          </div>
-
-          {/* Config Selector */}
-          <ConfigSelector
-            selectedConfigId={selectedConfigId}
-            selectedVersion={selectedConfigVersion}
-            onConfigSelect={onConfigSelect}
-            disabled={isEvaluating}
-            compact
-            datasetId={selectedDatasetId}
-            experimentName={experimentName}
-          />
-
-          {/* Dataset Selection */}
-          <div className="pt-2">
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Select Dataset *
-            </label>
-            {storedDatasets.length === 0 ? (
-              <div
-                className="border rounded-md p-8 text-center"
-                style={{ borderColor: colors.border }}
-              >
-                <p className="text-sm" style={{ color: colors.text.secondary }}>
-                  No datasets available
-                </p>
-                <p
-                  className="text-xs mt-1"
-                  style={{ color: colors.text.secondary }}
-                >
-                  Create a dataset first in the{" "}
-                  <button
-                    onClick={() => setActiveTab("datasets")}
-                    className="underline"
-                    style={{ color: colors.accent.primary }}
-                  >
-                    Datasets tab
-                  </button>
-                </p>
-              </div>
-            ) : (
-              <div className="relative">
-                <select
-                  value={selectedDatasetId}
-                  onChange={(e) => setSelectedDatasetId(e.target.value)}
-                  className="w-full px-3 py-2 border rounded-md text-sm appearance-none pr-8"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    borderColor: colors.border,
-                    color: selectedDatasetId
-                      ? colors.text.primary
-                      : colors.text.secondary,
-                  }}
-                >
-                  <option value="">-- Select a dataset --</option>
-                  {storedDatasets.map((dataset) => (
-                    <option key={dataset.dataset_id} value={dataset.dataset_id}>
-                      {dataset.dataset_name} ({dataset.total_items} items)
-                    </option>
-                  ))}
-                </select>
-                <svg
-                  className="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none"
-                  style={{ color: colors.text.secondary }}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </div>
-            )}
-          </div>
-
-          {/* Selected Dataset Info */}
-          {selectedDataset && (
-            <div
-              className="border rounded-lg p-3"
-              style={{
-                borderColor: colors.status.success,
-                backgroundColor: "rgba(22, 163, 74, 0.02)",
-              }}
-            >
-              <div className="flex items-start gap-2">
-                <svg
-                  className="w-5 h-5 flex-shrink-0 mt-0.5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  style={{ color: colors.status.success }}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-                <div className="flex-1">
-                  <div
-                    className="text-sm font-medium"
-                    style={{ color: colors.text.primary }}
-                  >
-                    {selectedDataset.dataset_name}
-                  </div>
-                  {selectedDataset.description && (
-                    <EvalDatasetDescription
-                      description={selectedDataset.description}
-                    />
-                  )}
-                  <div
-                    className="text-xs mt-1"
-                    style={{ color: colors.text.secondary }}
-                  >
-                    {selectedDataset.total_items} items · x
-                    {selectedDataset.duplication_factor} duplication
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Run Evaluation Button */}
-        <div
-          className="flex-shrink-0 border-t px-4 py-3"
-          style={{
-            borderColor: colors.border,
-            backgroundColor: colors.bg.primary,
-          }}
-        >
-          <button
-            onClick={async () => {
-              const success = await handleRunEvaluation();
-              if (success) fetchEvaluations();
-            }}
-            disabled={!canRun}
-            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium"
-            style={{
-              backgroundColor: canRun
-                ? colors.accent.primary
-                : colors.bg.secondary,
-              color: canRun ? "#fff" : colors.text.secondary,
-              cursor: canRun ? "pointer" : "not-allowed",
-            }}
-          >
-            {isEvaluating ? (
-              <>
-                <div
-                  className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-                  style={{
-                    borderColor: colors.text.secondary,
-                    borderTopColor: "transparent",
-                  }}
-                />
-                Running Evaluation...
-              </>
-            ) : (
-              <>
-                <svg
-                  className="w-5 h-5"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M8 5v14l11-7z" />
-                </svg>
-                Run Evaluation
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Right Panel - Evaluation Runs */}
+      {/* Left Panel - Evaluation Runs */}
+      <EvalRunsList
+        evalJobs={evalJobs}
+        assistantConfigs={assistantConfigs}
+        isLoading={isLoading}
+        error={error}
+        statusFilter={statusFilter}
+        onStatusFilterChange={setStatusFilter}
+        onRefresh={fetchEvaluations}
+      />
+
+      {/* Right Panel - Configuration */}
       <div
-        className="flex-1 flex flex-col overflow-hidden"
-        style={{ backgroundColor: colors.bg.secondary }}
+        className="shrink-0 border-l flex flex-col overflow-hidden bg-bg-primary border-border"
+        style={{ width: `${leftPanelWidth}px` }}
       >
-        <div className="flex-1 overflow-auto p-4">
-          {/* Header */}
-          <div className="mb-4 flex items-center justify-between">
-            <h2
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
-              Evaluation Runs
-            </h2>
-            <div className="flex items-center gap-2">
-              <select
-                value={statusFilter}
-                onChange={(e) => setStatusFilter(e.target.value)}
-                className="px-2.5 py-1 rounded-md text-xs font-medium border appearance-none cursor-pointer pr-7"
-                style={{
-                  backgroundColor: colors.bg.primary,
-                  borderColor: colors.border,
-                  color: colors.text.primary,
-                  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
-                  backgroundRepeat: "no-repeat",
-                  backgroundPosition: "right 6px center",
-                }}
-              >
-                <option value="all">All Status</option>
-                <option value="completed">Completed</option>
-                <option value="processing">Processing</option>
-                <option value="pending">Pending</option>
-                <option value="failed">Failed</option>
-              </select>
-              <button
-                onClick={fetchEvaluations}
-                disabled={isLoading}
-                className="p-1.5 rounded text-text-secondary cursor-pointer"
-                aria-label="Refresh evaluations"
-              >
-                <RefreshIcon
-                  className={`w-4 h-4 -scale-x-100 ${isLoading ? "animate-spin" : ""}`}
-                />
-              </button>
-            </div>
-          </div>
-
-          <div
-            className="rounded-lg overflow-visible"
-            style={{
-              backgroundColor: colors.bg.primary,
-              boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
-            }}
-          >
-            {isLoading && evalJobs.length === 0 && (
-              <div className="p-16">
-                <Loader size="md" message="Loading evaluation runs..." />
-              </div>
-            )}
-
-            {error && (
-              <div className="p-4">
-                <div
-                  className="rounded-lg p-3"
-                  style={{ backgroundColor: "hsl(8, 86%, 95%)" }}
-                >
-                  <p className="text-sm" style={{ color: "hsl(8, 86%, 40%)" }}>
-                    Error: {error}
-                  </p>
-                </div>
-              </div>
-            )}
-
-            {!isLoading && evalJobs.length === 0 && !error && (
-              <div className="p-16 text-center">
-                <svg
-                  className="w-12 h-12 mx-auto mb-3"
-                  style={{ color: colors.border }}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-                  />
-                </svg>
-                <p
-                  className="text-sm font-medium mb-1"
-                  style={{ color: colors.text.primary }}
-                >
-                  No evaluation runs yet
-                </p>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>
-                  Select a dataset and configuration, then run your first
-                  evaluation
-                </p>
-              </div>
-            )}
-
-            {evalJobs.length > 0 &&
-              (() => {
-                const filteredJobs =
-                  statusFilter === "all"
-                    ? evalJobs
-                    : evalJobs.filter(
-                        (job) => job.status.toLowerCase() === statusFilter,
-                      );
-                return filteredJobs.length > 0 ? (
-                  <div className="p-4 space-y-3">
-                    {filteredJobs.map((job) => (
-                      <EvalRunCard
-                        key={job.id}
-                        job={job}
-                        assistantConfig={
-                          job.assistant_id
-                            ? assistantConfigs.get(job.assistant_id)
-                            : undefined
-                        }
-                      />
-                    ))}
-                  </div>
-                ) : (
-                  <div className="p-16 text-center">
-                    <p
-                      className="text-sm font-medium mb-1"
-                      style={{ color: colors.text.primary }}
-                    >
-                      No {statusFilter} runs
-                    </p>
-                    <p
-                      className="text-xs"
-                      style={{ color: colors.text.secondary }}
-                    >
-                      No evaluation runs with status &quot;{statusFilter}&quot;
-                    </p>
-                  </div>
-                );
-              })()}
-          </div>
-        </div>
+        <RunEvaluationForm
+          storedDatasets={storedDatasets}
+          selectedDataset={selectedDataset}
+          selectedDatasetId={selectedDatasetId}
+          setSelectedDatasetId={setSelectedDatasetId}
+          selectedConfigId={selectedConfigId}
+          selectedConfigVersion={selectedConfigVersion}
+          onConfigSelect={onConfigSelect}
+          experimentName={experimentName}
+          setExperimentName={setExperimentName}
+          isEvaluating={isEvaluating}
+          canRun={canRun}
+          onRun={handleRun}
+          setActiveTab={setActiveTab}
+        />
       </div>
     </div>
   );
diff --git a/app/components/evaluations/GroupedResultsTable.tsx b/app/components/evaluations/GroupedResultsTable.tsx
index 1943d22f..c62128f4 100644
--- a/app/components/evaluations/GroupedResultsTable.tsx
+++ b/app/components/evaluations/GroupedResultsTable.tsx
@@ -4,27 +4,16 @@
  * Displays multiple LLM answers per question in a grouped table format
  */
 
-import { useState, useEffect, Fragment } from "react";
+import { Fragment } from "react";
 import { TraceScore, GroupedTraceItem } from "@/app/lib/types/evaluation";
 import { formatScoreValue } from "@/app/lib/utils";
+import { InfoTooltip } from "@/app/components";
 
 export default function GroupedResultsTable({
   traces,
 }: {
   traces: GroupedTraceItem[];
 }) {
-  const [openCommentId, setOpenCommentId] = useState<string | null>(null);
-  const [commentPos, setCommentPos] = useState({ top: 0, left: 0 });
-
-  useEffect(() => {
-    if (!openCommentId) return;
-    const handleScroll = () => setOpenCommentId(null);
-    window.addEventListener("scroll", handleScroll, true);
-    return () => {
-      window.removeEventListener("scroll", handleScroll, true);
-    };
-  }, [openCommentId]);
-
   if (!traces || traces.length === 0) {
     return (
       <div className="border rounded-lg p-6 text-center bg-[#fef3c7] border-[#fbbf24]">
@@ -33,7 +22,6 @@ export default function GroupedResultsTable({
     );
   }
 
-  // Get max answers count
   const maxAnswers = Math.max(...traces.map((t) => t.llm_answers.length));
 
   // Fixed column widths (in pixels) for predictable layout
@@ -58,9 +46,9 @@ export default function GroupedResultsTable({
           style={{ minWidth: `${tableMinWidth}px` }}
         >
           <thead>
-            <tr className="bg-bg-secondary border-b border-border">
+            <tr className="bg-accent-primary border-b border-border">
               <th
-                className="px-4 py-3 text-left text-xs font-semibold uppercase text-[#171717]"
+                className="px-4 py-3 text-left text-xs font-semibold uppercase text-bg-primary"
                 style={{
                   width: `${COLUMN_WIDTHS.qId}px`,
                   minWidth: `${COLUMN_WIDTHS.qId}px`,
@@ -69,7 +57,7 @@ export default function GroupedResultsTable({
                 Q.ID
               </th>
               <th
-                className="px-4 py-3 text-left text-xs font-semibold uppercase text-[#171717]"
+                className="px-4 py-3 text-left text-xs font-semibold uppercase text-bg-primary"
                 style={{
                   width: `${COLUMN_WIDTHS.question}px`,
                   minWidth: `${COLUMN_WIDTHS.question}px`,
@@ -78,7 +66,7 @@ export default function GroupedResultsTable({
                 Question
               </th>
               <th
-                className="px-4 py-3 text-left text-xs font-semibold uppercase text-[#171717]"
+                className="px-4 py-3 text-left text-xs font-semibold uppercase text-bg-primary"
                 style={{
                   width: `${COLUMN_WIDTHS.groundTruth}px`,
                   minWidth: `${COLUMN_WIDTHS.groundTruth}px`,
@@ -89,7 +77,7 @@ export default function GroupedResultsTable({
               {Array.from({ length: maxAnswers }, (_, i) => (
                 <th
                   key={`answer-${i}`}
-                  className="px-4 py-3 text-left text-xs font-semibold uppercase text-[#171717]"
+                  className="px-4 py-3 text-left text-xs font-semibold uppercase text-bg-primary"
                   style={{
                     width: `${COLUMN_WIDTHS.answer}px`,
                     minWidth: `${COLUMN_WIDTHS.answer}px`,
@@ -112,19 +100,18 @@ export default function GroupedResultsTable({
                     {group.question_id}
                   </td>
 
-                  <td className="px-4 pt-3 pb-1 align-top bg-[#fafafa]">
-                    <div className="text-sm overflow-auto text-[#171717] leading-normal max-h-[150px] wrap-break-word">
+                  <td className="px-4 pt-3 pb-1 align-top bg-accent-subtle/50">
+                    <div className="text-sm overflow-auto text-text-primary leading-normal max-h-[150px] wrap-break-word">
                       {group.question}
                     </div>
                   </td>
 
-                  <td className="px-4 pt-3 pb-1 align-top bg-bg-secondary">
-                    <div className="text-sm overflow-auto text-[#171717] leading-normal max-h-[150px] wrap-break-word">
+                  <td className="px-4 pt-3 pb-1 align-top bg-accent-subtle/50">
+                    <div className="text-sm overflow-auto text-text-primary leading-normal max-h-[150px] wrap-break-word">
                       {group.ground_truth_answer}
                     </div>
                   </td>
 
-                  {/* Answer */}
                   {Array.from({ length: maxAnswers }, (_, answerIndex) => {
                     const answer = group.llm_answers[answerIndex];
                     return (
@@ -133,11 +120,11 @@ export default function GroupedResultsTable({
                         className="px-4 pt-3 pb-1 align-top"
                       >
                         {answer ? (
-                          <div className="text-sm overflow-auto text-[#171717] leading-6 max-h-[150px] wrap-break-word">
+                          <div className="text-sm overflow-auto text-text-primary leading-6 max-h-[150px] wrap-break-word">
                             {answer}
                           </div>
                         ) : (
-                          <span className="text-sm text-[#171717]">-</span>
+                          <span className="text-sm text-text-primary">-</span>
                         )}
                       </td>
                     );
@@ -148,8 +135,8 @@ export default function GroupedResultsTable({
                   className="border-b border-border"
                 >
                   <td className="px-4 pt-1 pb-3" />
-                  <td className="px-4 pt-1 pb-3 bg-bg-secondary" />
-                  <td className="px-4 pt-1 pb-3 bg-bg-secondary" />
+                  <td className="px-4 pt-1 pb-3 bg-accent-subtle/50" />
+                  <td className="px-4 pt-1 pb-3 bg-accent-subtle/50" />
 
                   {Array.from({ length: maxAnswers }, (_, answerIndex) => {
                     const answerScores: TraceScore[] =
@@ -187,59 +174,9 @@ export default function GroupedResultsTable({
                                       >
                                         {value}
                                       </div>
-                                      {score?.comment &&
-                                        (() => {
-                                          const commentId = `g${index}-a${answerIndex}-s${scoreIdx}`;
-                                          return (
-                                            <>
-                                              <div
-                                                className={`inline-flex items-center justify-center w-4 h-4 rounded-full text-xs font-normal ${
-                                                  openCommentId === commentId
-                                                    ? "bg-[#171717] text-white"
-                                                    : "bg-bg-secondary text-text-secondary"
-                                                }`}
-                                                onMouseEnter={(e) => {
-                                                  const rect =
-                                                    e.currentTarget.getBoundingClientRect();
-                                                  const tooltipWidth = 300;
-                                                  const centerX =
-                                                    rect.left + rect.width / 2;
-                                                  const clampedLeft = Math.min(
-                                                    Math.max(
-                                                      centerX -
-                                                        tooltipWidth / 2,
-                                                      8,
-                                                    ),
-                                                    window.innerWidth -
-                                                      tooltipWidth -
-                                                      8,
-                                                  );
-                                                  setCommentPos({
-                                                    top: rect.top - 8,
-                                                    left: clampedLeft,
-                                                  });
-                                                  setOpenCommentId(commentId);
-                                                }}
-                                                onMouseLeave={() =>
-                                                  setOpenCommentId(null)
-                                                }
-                                              >
-                                                i
-                                              </div>
-                                              {openCommentId === commentId && (
-                                                <div
-                                                  className="fixed z-50 px-3 py-2 rounded-md text-xs whitespace-normal pointer-events-none bg-[#171717] text-white w-[300px] shadow-[0_4px_6px_rgba(0,0,0,0.1)] -translate-y-full"
-                                                  style={{
-                                                    top: commentPos.top,
-                                                    left: commentPos.left,
-                                                  }}
-                                                >
-                                                  {score.comment}
-                                                </div>
-                                              )}
-                                            </>
-                                          );
-                                        })()}
+                                      {score?.comment && (
+                                        <InfoTooltip text={score.comment} />
+                                      )}
                                     </div>
                                   </div>
                                 );
diff --git a/app/components/evaluations/MetricsOverview.tsx b/app/components/evaluations/MetricsOverview.tsx
new file mode 100644
index 00000000..d260e39c
--- /dev/null
+++ b/app/components/evaluations/MetricsOverview.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import type { EvalJob, SummaryScore } from "@/app/lib/types/evaluation";
+import { Button } from "@/app/components";
+import { RefreshIcon, WarningTriangleIcon } from "@/app/components/icons";
+
+interface MetricsOverviewProps {
+  job: EvalJob;
+  summaryScores: SummaryScore[];
+  isJobInProgress: boolean;
+  isResyncing: boolean;
+  onResync: () => void;
+}
+
+export default function MetricsOverview({
+  job,
+  summaryScores,
+  isJobInProgress,
+  isResyncing,
+  onResync,
+}: MetricsOverviewProps) {
+  const showPartialNotice =
+    summaryScores.some(
+      (s) => job.total_items && s.total_pairs < job.total_items,
+    ) && isJobInProgress;
+
+  return (
+    <div>
+      {showPartialNotice && (
+        <div className="flex items-center gap-2 px-3 py-2 rounded-lg mb-3 text-xs bg-amber-500/10 border border-amber-500/30 text-status-warning">
+          <WarningTriangleIcon className="shrink-0" />
+          Some traces are still being scored. Scores shown are partial and may
+          change - click <strong className="font-semibold">Resync</strong> to
+          get the latest.
+        </div>
+      )}
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-sm font-semibold text-text-secondary">
+          Metrics Overview
+        </h3>
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={onResync}
+          disabled={isResyncing}
+        >
+          <RefreshIcon className={isResyncing ? "animate-spin" : ""} />
+          {isResyncing ? "Resyncing..." : "Resync"}
+        </Button>
+      </div>
+      {summaryScores.length > 0 ? (
+        <div className="flex gap-4 flex-wrap">
+          {summaryScores
+            .filter((s) => s.data_type === "NUMERIC")
+            .map((summary) => (
+              <div
+                key={summary.name}
+                className="rounded-lg px-6 py-5 text-center flex-1 min-w-[180px] relative bg-bg-primary shadow-sm"
+              >
+                <div className="text-xs font-medium mb-2 text-text-secondary">
+                  {summary.name}
+                </div>
+                <div className="text-2xl font-bold text-text-primary">
+                  {summary.avg !== undefined ? summary.avg.toFixed(3) : "N/A"}
+                </div>
+                <div className="text-xs mt-1 text-text-secondary">
+                  {summary.std !== undefined && `±${summary.std.toFixed(3)} · `}
+                  <span>
+                    {summary.total_pairs}
+                    {job.total_items &&
+                      summary.total_pairs < job.total_items &&
+                      `/${job.total_items}`}{" "}
+                    pairs
+                  </span>
+                </div>
+              </div>
+            ))}
+          {summaryScores
+            .filter((s) => s.data_type === "CATEGORICAL")
+            .map((summary) => (
+              <div
+                key={summary.name}
+                className="rounded-lg px-6 py-5 flex-1 min-w-[180px] relative bg-bg-primary shadow-sm"
+              >
+                <div className="text-xs font-medium mb-3 text-center text-text-secondary">
+                  {summary.name}
+                </div>
+                <div className="space-y-1">
+                  {summary.distribution &&
+                    Object.entries(summary.distribution).map(([key, value]) => (
+                      <div
+                        key={key}
+                        className="flex justify-between items-center px-3 py-1 rounded bg-bg-secondary"
+                      >
+                        <span className="text-xs font-medium text-text-primary">
+                          {key}
+                        </span>
+                        <span className="text-xs font-bold text-text-primary">
+                          {value}
+                        </span>
+                      </div>
+                    ))}
+                </div>
+                <div className="text-xs mt-2 text-center text-text-secondary">
+                  <span>
+                    {summary.total_pairs}
+                    {job.total_items &&
+                      summary.total_pairs < job.total_items &&
+                      `/${job.total_items}`}{" "}
+                    pairs
+                  </span>
+                </div>
+              </div>
+            ))}
+        </div>
+      ) : (
+        <div className="rounded-lg p-8 text-center bg-bg-primary shadow-sm">
+          <p className="text-sm text-text-secondary">
+            No summary scores available
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/evaluations/RunEvaluationForm.tsx b/app/components/evaluations/RunEvaluationForm.tsx
new file mode 100644
index 00000000..7b6465b6
--- /dev/null
+++ b/app/components/evaluations/RunEvaluationForm.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { Dataset } from "@/app/lib/types/dataset";
+import { Button, Field } from "@/app/components";
+import Select from "@/app/components/Select";
+import { CheckCircleIcon, PlayIcon } from "@/app/components/icons";
+import ConfigSelector from "@/app/components/ConfigSelector";
+import EvalDatasetDescription from "./EvalDatasetDescription";
+import { Tab } from "@/app/lib/types/evaluation";
+
+interface RunEvaluationFormProps {
+  storedDatasets: Dataset[];
+  selectedDataset?: Dataset;
+  selectedDatasetId: string;
+  setSelectedDatasetId: (id: string) => void;
+  selectedConfigId: string;
+  selectedConfigVersion: number;
+  onConfigSelect: (configId: string, configVersion: number) => void;
+  experimentName: string;
+  setExperimentName: (name: string) => void;
+  isEvaluating: boolean;
+  canRun: boolean;
+  onRun: () => void;
+  setActiveTab: (tab: Tab) => void;
+}
+
+export default function RunEvaluationForm({
+  storedDatasets,
+  selectedDataset,
+  selectedDatasetId,
+  setSelectedDatasetId,
+  selectedConfigId,
+  selectedConfigVersion,
+  onConfigSelect,
+  experimentName,
+  setExperimentName,
+  isEvaluating,
+  canRun,
+  onRun,
+  setActiveTab,
+}: RunEvaluationFormProps) {
+  return (
+    <div className="flex-1 overflow-auto p-4 space-y-4">
+      <div>
+        <h2 className="text-base font-semibold text-text-primary">
+          Run New Evaluation
+        </h2>
+        <p className="text-xs mt-0.5 text-text-secondary">
+          Test model responses against your golden datasets
+        </p>
+      </div>
+
+      <Field
+        label="Name *"
+        value={experimentName}
+        onChange={setExperimentName}
+        placeholder="e.g., test_run_1"
+        disabled={isEvaluating}
+      />
+
+      <ConfigSelector
+        selectedConfigId={selectedConfigId}
+        selectedVersion={selectedConfigVersion}
+        onConfigSelect={onConfigSelect}
+        disabled={isEvaluating}
+        compact
+        datasetId={selectedDatasetId}
+        experimentName={experimentName}
+      />
+
+      <div className="pt-2">
+        <label className="block text-xs font-medium mb-1.5 text-text-secondary">
+          Select Dataset *
+        </label>
+        {storedDatasets.length === 0 ? (
+          <div className="border rounded-md p-8 text-center border-border">
+            <p className="text-sm text-text-secondary">No datasets available</p>
+            <p className="text-xs mt-1 text-text-secondary">
+              Create a dataset first in the{" "}
+              <button
+                onClick={() => setActiveTab("datasets")}
+                className="underline text-accent-primary cursor-pointer"
+              >
+                Datasets tab
+              </button>
+            </p>
+          </div>
+        ) : (
+          <Select
+            value={selectedDatasetId}
+            onChange={(e) => setSelectedDatasetId(e.target.value)}
+            placeholder="-- Select a dataset --"
+            options={storedDatasets.map((dataset) => ({
+              value: String(dataset.dataset_id),
+              label: `${dataset.dataset_name} (${dataset.total_items} items)`,
+            }))}
+          />
+        )}
+      </div>
+
+      {selectedDataset && (
+        <div className="border rounded-lg p-3 border-status-success bg-green-600/2">
+          <div className="flex items-start gap-2">
+            <CheckCircleIcon className="w-5 h-5 shrink-0 mt-0.5 text-status-success" />
+            <div className="flex-1">
+              <div className="text-sm font-medium text-text-primary">
+                {selectedDataset.dataset_name}
+              </div>
+              {selectedDataset.description && (
+                <EvalDatasetDescription
+                  description={selectedDataset.description}
+                />
+              )}
+              <div className="text-xs mt-1 text-text-secondary">
+                {selectedDataset.total_items} items · x
+                {selectedDataset.duplication_factor} duplication
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="pt-2">
+        <Button
+          variant="primary"
+          size="lg"
+          fullWidth
+          onClick={onRun}
+          disabled={!canRun}
+        >
+          {isEvaluating ? (
+            <>
+              <div className="w-4 h-4 border-2 border-text-secondary border-t-transparent rounded-full animate-spin" />
+              Running Evaluation...
+            </>
+          ) : (
+            <>
+              <PlayIcon className="w-5 h-5" />
+              Run Evaluation
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/evaluations/ViewDatasetModal.tsx b/app/components/evaluations/ViewDatasetModal.tsx
new file mode 100644
index 00000000..28519aea
--- /dev/null
+++ b/app/components/evaluations/ViewDatasetModal.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { Button, Modal } from "@/app/components";
+import { ViewDatasetModalData } from "@/app/lib/types/dataset";
+
+interface ViewDatasetModalProps {
+  data: ViewDatasetModalData;
+  onClose: () => void;
+}
+
+export default function ViewDatasetModal({
+  data,
+  onClose,
+}: ViewDatasetModalProps) {
+  const handleDownload = () => {
+    const csvLines = [data.headers.join(",")];
+    data.rows.forEach((row) => {
+      csvLines.push(
+        row
+          .map((cell) =>
+            cell.includes(",") || cell.includes('"') || cell.includes("\n")
+              ? `"${cell.replace(/"/g, '""')}"`
+              : cell,
+          )
+          .join(","),
+      );
+    });
+    const blob = new Blob([csvLines.join("\n")], {
+      type: "text/csv;charset=utf-8;",
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${data.name}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Modal
+      open
+      onClose={onClose}
+      title={data.name}
+      maxWidth="max-w-[1000px]"
+      maxHeight="max-h-[80vh]"
+    >
+      <div className="sticky top-0 bg-bg-primary border-b border-border px-6 py-3 flex items-center justify-between gap-4 z-10">
+        <p className="text-xs text-text-secondary">
+          {data.rows.length} rows · {data.headers.length} columns
+        </p>
+        <Button size="sm" onClick={handleDownload}>
+          Download CSV
+        </Button>
+      </div>
+
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="bg-bg-secondary border-b border-border">
+            <th className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-13 text-text-secondary bg-bg-secondary w-10" />
+            {data.headers.map((header, i) => (
+              <th
+                key={i}
+                className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-13 text-text-secondary bg-bg-secondary"
+              >
+                {header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.rows.map((row, rowIdx) => (
+            <tr key={rowIdx} className="border-b border-border">
+              <td className="px-4 py-2.5 text-xs text-text-secondary">
+                {rowIdx + 1}
+              </td>
+              {row.map((cell, cellIdx) => (
+                <td key={cellIdx} className="px-4 py-2.5 text-text-primary">
+                  <div className="text-sm max-h-[120px] overflow-auto leading-relaxed">
+                    {cell || <span className="text-text-secondary">—</span>}
+                  </div>
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Modal>
+  );
+}
diff --git a/app/components/icons/assessment/DownloadIcon.tsx b/app/components/icons/assessment/DownloadIcon.tsx
new file mode 100644
index 00000000..b9b2f86c
--- /dev/null
+++ b/app/components/icons/assessment/DownloadIcon.tsx
@@ -0,0 +1,23 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function DownloadIcon({ className, style }: IconProps) {
+  return (
+    <svg
+      className={`w-3.5 h-3.5 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+      style={style}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/icons/assessment/PlayIcon.tsx b/app/components/icons/assessment/PlayIcon.tsx
new file mode 100644
index 00000000..38a485a7
--- /dev/null
+++ b/app/components/icons/assessment/PlayIcon.tsx
@@ -0,0 +1,17 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function PlayIcon({ className, style }: IconProps) {
+  return (
+    <svg
+      className={`w-5 h-5 ${className ?? ""}`}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      style={style}
+    >
+      <path d="M8 5v14l11-7z" />
+    </svg>
+  );
+}
diff --git a/app/components/icons/assessment/ToggleThumbIcons.tsx b/app/components/icons/assessment/ToggleThumbIcons.tsx
new file mode 100644
index 00000000..f550b547
--- /dev/null
+++ b/app/components/icons/assessment/ToggleThumbIcons.tsx
@@ -0,0 +1,34 @@
+interface ToggleIconProps {
+  className?: string;
+}
+
+export function ToggleOnIcon({ className }: ToggleIconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2.5}
+      aria-hidden="true"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M5 12l5 5 9-9" />
+    </svg>
+  );
+}
+
+export function ToggleOffIcon({ className }: ToggleIconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2.5}
+      aria-hidden="true"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M18 6L6 18" />
+    </svg>
+  );
+}
diff --git a/app/components/icons/common/CheckLineIcon.tsx b/app/components/icons/common/CheckLineIcon.tsx
new file mode 100644
index 00000000..03a2dc91
--- /dev/null
+++ b/app/components/icons/common/CheckLineIcon.tsx
@@ -0,0 +1,17 @@
+interface IconProps {
+  className?: string;
+}
+
+export default function CheckLineIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={`w-4 h-4 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+    </svg>
+  );
+}
diff --git a/app/components/icons/common/MusicNoteIcon.tsx b/app/components/icons/common/MusicNoteIcon.tsx
new file mode 100644
index 00000000..2dcd42a8
--- /dev/null
+++ b/app/components/icons/common/MusicNoteIcon.tsx
@@ -0,0 +1,21 @@
+interface IconProps {
+  className?: string;
+}
+
+export default function MusicNoteIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={`w-8 h-8 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/icons/common/PlayIcon.tsx b/app/components/icons/common/PlayIcon.tsx
new file mode 100644
index 00000000..b36e2f56
--- /dev/null
+++ b/app/components/icons/common/PlayIcon.tsx
@@ -0,0 +1,15 @@
+interface IconProps {
+  className?: string;
+}
+
+export default function PlayIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={`w-5 h-5 ${className ?? ""}`}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path d="M8 5v14l11-7z" />
+    </svg>
+  );
+}
diff --git a/app/components/icons/index.tsx b/app/components/icons/index.tsx
index bb69ab8f..6a2dc88d 100644
--- a/app/components/icons/index.tsx
+++ b/app/components/icons/index.tsx
@@ -2,6 +2,9 @@
 export { default as ArrowLeftIcon } from "./common/ArrowLeftIcon";
 export { default as ChevronDownIcon } from "./common/ChevronDownIcon";
 export { default as CheckIcon } from "./common/CheckIcon";
+export { default as CheckLineIcon } from "./common/CheckLineIcon";
+export { default as MusicNoteIcon } from "./common/MusicNoteIcon";
+export { default as PlayIcon } from "./common/PlayIcon";
 export { default as CopyIcon } from "./common/CopyIcon";
 export { default as EyeIcon } from "./common/EyeIcon";
 export { default as EyeOffIcon } from "./common/EyeOffIcon";
@@ -40,6 +43,7 @@ export { default as BookOpenIcon } from "./sidebar/BookOpenIcon";
 export { default as SlidersIcon } from "./sidebar/SlidersIcon";
 export { default as ShieldCheckIcon } from "./sidebar/ShieldCheckIcon";
 export { default as LogoutIcon } from "./sidebar/LogoutIcon";
+export { default as AssessmentIcon } from "./sidebar/AssessmentIcon";
 export { default as ChatIcon } from "./sidebar/ChatIcon";
 export { default as SendIcon } from "./sidebar/SendIcon";
 
diff --git a/app/components/icons/sidebar/AssessmentIcon.tsx b/app/components/icons/sidebar/AssessmentIcon.tsx
new file mode 100644
index 00000000..3de2421b
--- /dev/null
+++ b/app/components/icons/sidebar/AssessmentIcon.tsx
@@ -0,0 +1,21 @@
+interface IconProps {
+  className?: string;
+}
+
+export default function AssessmentIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={`w-5 h-5 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/icons/sidebar/SlidersIcon.tsx b/app/components/icons/sidebar/SlidersIcon.tsx
index 251d6940..fdef8f5d 100644
--- a/app/components/icons/sidebar/SlidersIcon.tsx
+++ b/app/components/icons/sidebar/SlidersIcon.tsx
@@ -1,8 +1,9 @@
 interface IconProps {
   className?: string;
+  style?: React.CSSProperties;
 }
 
-export default function SlidersIcon({ className }: IconProps) {
+export default function SlidersIcon({ className, style }: IconProps) {
   return (
     <svg
       className={`w-5 h-5 ${className ?? ""}`}
@@ -10,6 +11,7 @@ export default function SlidersIcon({ className }: IconProps) {
       viewBox="0 0 24 24"
       stroke="currentColor"
       strokeWidth={2}
+      style={style}
     >
       <path
         strokeLinecap="round"
diff --git a/app/components/index.ts b/app/components/index.ts
index 9f5fbc4d..d314998c 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -8,3 +8,6 @@ export { default as Modal } from "./Modal";
 export { default as PageHeader } from "./PageHeader";
 export { default as Sidebar } from "./Sidebar";
 export { default as Tag } from "./Tag";
+export { default as DatasetListSkeleton } from "./DatasetListSkeleton";
+export { default as RunsListSkeleton } from "./RunsListSkeleton";
+export { default as ResultsTableSkeleton } from "./ResultsTableSkeleton";
diff --git a/app/components/speech-to-text/AudioFileItem.tsx b/app/components/speech-to-text/AudioFileItem.tsx
new file mode 100644
index 00000000..2219c999
--- /dev/null
+++ b/app/components/speech-to-text/AudioFileItem.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { AudioFile, Language } from "@/app/lib/types/speechToText";
+import { CheckLineIcon, CloseIcon } from "@/app/components/icons";
+import Select from "@/app/components/Select";
+import AudioPlayer from "@/app/components/speech-to-text/AudioPlayer";
+
+interface AudioFileItemProps {
+  audioFile: AudioFile;
+  index: number;
+  isPlaying: boolean;
+  languages: Language[];
+  formatFileSize: (bytes: number) => string;
+  onPlayToggle: () => void;
+  onRemove: () => void;
+  onUpdateLanguage: (languageId: number) => void;
+  onUpdateGroundTruth: (groundTruth: string) => void;
+}
+
+export default function AudioFileItem({
+  audioFile,
+  index,
+  isPlaying,
+  languages,
+  formatFileSize,
+  onPlayToggle,
+  onRemove,
+  onUpdateLanguage,
+  onUpdateGroundTruth,
+}: AudioFileItemProps) {
+  const uploaded = !!audioFile.fileId;
+
+  return (
+    <div className="rounded-lg overflow-hidden bg-bg-primary shadow-sm">
+      <div className="p-4">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2 min-w-0 flex-1">
+            <span className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] shrink-0 font-medium bg-bg-secondary text-text-secondary">
+              {index + 1}
+            </span>
+            <span className="text-sm font-medium truncate text-text-primary">
+              {audioFile.name}
+            </span>
+            <span className="text-xs shrink-0 text-text-secondary">
+              {formatFileSize(audioFile.size)}
+            </span>
+            {uploaded ? (
+              <CheckLineIcon className="w-3.5 h-3.5 shrink-0 text-status-success" />
+            ) : (
+              <div className="w-3 h-3 border-2 border-accent-primary border-t-transparent rounded-full animate-spin shrink-0" />
+            )}
+          </div>
+          <button
+            onClick={onRemove}
+            className="p-1 rounded shrink-0 text-text-secondary"
+            aria-label="Remove audio sample"
+          >
+            <CloseIcon className="w-3.5 h-3.5" />
+          </button>
+        </div>
+
+        <AudioPlayer
+          audioBase64={audioFile.base64}
+          mediaType={audioFile.mediaType}
+          isPlaying={isPlaying}
+          onPlayToggle={onPlayToggle}
+        />
+
+        <div className="mt-3 flex items-start gap-3">
+          <div className="shrink-0 w-[120px]">
+            <label className="block text-[10px] font-medium mb-1 uppercase tracking-wide text-text-secondary">
+              Language
+            </label>
+            <Select
+              value={audioFile.languageId}
+              onChange={(e) => onUpdateLanguage(Number(e.target.value))}
+              options={languages.map((lang) => ({
+                value: String(lang.id),
+                label: lang.name,
+              }))}
+            />
+          </div>
+          <div className="flex-1">
+            <label className="block text-[10px] font-medium mb-1 uppercase tracking-wide text-text-secondary">
+              Ground Truth
+            </label>
+            <textarea
+              value={audioFile.groundTruth}
+              onChange={(e) => onUpdateGroundTruth(e.target.value)}
+              placeholder={
+                uploaded ? "Expected transcription..." : "Uploading..."
+              }
+              disabled={!uploaded}
+              rows={2}
+              className={`w-full px-2 py-1.5 border rounded-md text-xs border-border resize-y ${
+                uploaded
+                  ? "bg-bg-primary text-text-primary cursor-text"
+                  : "bg-bg-secondary text-text-secondary cursor-not-allowed opacity-60"
+              }`}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/CreateSTTDatasetForm.tsx b/app/components/speech-to-text/CreateSTTDatasetForm.tsx
new file mode 100644
index 00000000..a5e13afd
--- /dev/null
+++ b/app/components/speech-to-text/CreateSTTDatasetForm.tsx
@@ -0,0 +1,231 @@
+"use client";
+
+import { AudioFile, Language } from "@/app/lib/types/speechToText";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { Button, Field, InfoTooltip } from "@/app/components";
+import Select from "@/app/components/Select";
+import { MusicNoteIcon, PlusIcon } from "@/app/components/icons";
+import AudioFileItem from "./AudioFileItem";
+
+interface CreateSTTDatasetFormProps {
+  datasetName: string;
+  setDatasetName: (name: string) => void;
+  datasetDescription: string;
+  setDatasetDescription: (desc: string) => void;
+  datasetLanguageId: number;
+  setDatasetLanguageId: (id: number) => void;
+  audioFiles: AudioFile[];
+  setAudioFiles: React.Dispatch<React.SetStateAction<AudioFile[]>>;
+  playingFileId: string | null;
+  setPlayingFileId: (id: string | null) => void;
+  handleAudioFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  triggerAudioUpload: () => void;
+  removeAudioFile: (id: string) => void;
+  updateGroundTruth: (id: string, groundTruth: string) => void;
+  updateFileLanguage: (id: string, languageId: number) => void;
+  formatFileSize: (bytes: number) => string;
+  isCreating: boolean;
+  handleCreateDataset: () => void;
+  languages: Language[];
+}
+
+export default function CreateSTTDatasetForm({
+  datasetName,
+  setDatasetName,
+  datasetDescription,
+  setDatasetDescription,
+  datasetLanguageId,
+  setDatasetLanguageId,
+  audioFiles,
+  setAudioFiles,
+  playingFileId,
+  setPlayingFileId,
+  handleAudioFileSelect,
+  triggerAudioUpload,
+  removeAudioFile,
+  updateGroundTruth,
+  updateFileLanguage,
+  formatFileSize,
+  isCreating,
+  handleCreateDataset,
+  languages,
+}: CreateSTTDatasetFormProps) {
+  const { isAuthenticated } = useAuth();
+
+  const isCreateDisabled =
+    isCreating || !datasetName.trim() || audioFiles.length === 0;
+  const uploadedCount = audioFiles.filter((f) => f.fileId).length;
+
+  return (
+    <div className="flex-1 overflow-auto p-4 space-y-4">
+      <div>
+        <h2 className="text-base font-semibold text-text-primary">
+          Create New Dataset
+        </h2>
+        <p className="text-xs mt-0.5 text-text-secondary">
+          Add audio samples that will be transcribed during evaluation
+        </p>
+      </div>
+
+      <Field
+        label="Name *"
+        value={datasetName}
+        onChange={setDatasetName}
+        placeholder="e.g., English Podcast Dataset"
+      />
+
+      <Field
+        label="Description"
+        value={datasetDescription}
+        onChange={setDatasetDescription}
+        placeholder="Optional description"
+      />
+
+      <div>
+        <label className="text-xs font-medium mb-1.5 text-text-secondary">
+          <span className="inline-flex items-center gap-1">
+            Language *
+            <InfoTooltip
+              text={
+                <>
+                  <div className="font-semibold mb-1">Default Language</div>
+                  <p className="leading-relaxed">
+                    This is the default language applied to all samples in the
+                    dataset. You can override the language for individual
+                    samples in the audio files section below.
+                  </p>
+                </>
+              }
+            />
+          </span>
+        </label>
+        <Select
+          value={datasetLanguageId}
+          onChange={(e) => {
+            const newId = Number(e.target.value);
+            setDatasetLanguageId(newId);
+            setAudioFiles((prev) =>
+              prev.map((f) => ({ ...f, languageId: newId })),
+            );
+          }}
+          options={languages.map((lang) => ({
+            value: String(lang.id),
+            label: lang.name,
+          }))}
+        />
+      </div>
+
+      <div>
+        <div className="flex items-center justify-between mb-1.5">
+          <label className="text-xs font-medium text-text-secondary">
+            Audio Samples *
+          </label>
+        </div>
+
+        <input
+          id="audio-upload"
+          type="file"
+          accept=".mp3,.wav,.m4a,.ogg,.flac,.webm"
+          multiple
+          onChange={handleAudioFileSelect}
+          className="hidden"
+        />
+
+        {audioFiles.length === 0 ? (
+          <div
+            onClick={isAuthenticated ? triggerAudioUpload : undefined}
+            className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors border-border bg-bg-primary ${
+              isAuthenticated
+                ? "cursor-pointer hover:bg-bg-secondary"
+                : "cursor-not-allowed opacity-50"
+            }`}
+          >
+            <MusicNoteIcon className="w-8 h-8 mx-auto mb-2 text-text-secondary" />
+            <p className="text-xs font-medium mb-1 text-text-primary">
+              {isAuthenticated
+                ? "Click to upload audio samples"
+                : "Add an API key to upload"}
+            </p>
+            <p className="text-xs text-text-secondary">
+              MP3, WAV, M4A, OGG, FLAC, WebM
+            </p>
+          </div>
+        ) : (
+          <div>
+            <div className="space-y-3 max-h-[400px] overflow-auto">
+              {audioFiles.map((audioFile, idx) => (
+                <AudioFileItem
+                  key={audioFile.id}
+                  audioFile={audioFile}
+                  index={idx}
+                  isPlaying={playingFileId === audioFile.id}
+                  languages={languages}
+                  formatFileSize={formatFileSize}
+                  onPlayToggle={() =>
+                    setPlayingFileId(
+                      playingFileId === audioFile.id ? null : audioFile.id,
+                    )
+                  }
+                  onRemove={() => removeAudioFile(audioFile.id)}
+                  onUpdateLanguage={(languageId) =>
+                    updateFileLanguage(audioFile.id, languageId)
+                  }
+                  onUpdateGroundTruth={(groundTruth) =>
+                    updateGroundTruth(audioFile.id, groundTruth)
+                  }
+                />
+              ))}
+            </div>
+
+            <button
+              onClick={isAuthenticated ? triggerAudioUpload : undefined}
+              className={`flex items-center gap-1 text-xs font-medium mt-2 ${
+                isAuthenticated
+                  ? "text-accent-primary cursor-pointer"
+                  : "text-text-secondary cursor-not-allowed"
+              }`}
+            >
+              <PlusIcon className="w-3.5 h-3.5" />
+              Add more samples
+              <span className="text-text-secondary">
+                ({uploadedCount}/{audioFiles.length} uploaded)
+              </span>
+            </button>
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center justify-end gap-3 pt-2">
+        <Button
+          variant="ghost"
+          size="md"
+          onClick={() => {
+            setDatasetName("");
+            setDatasetDescription("");
+            setDatasetLanguageId(languages[0]?.id ?? datasetLanguageId);
+            setAudioFiles([]);
+            setPlayingFileId(null);
+          }}
+          disabled={isCreating}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          size="md"
+          onClick={handleCreateDataset}
+          disabled={isCreateDisabled}
+        >
+          {isCreating ? (
+            <>
+              <div className="w-4 h-4 border-2 border-text-secondary border-t-transparent rounded-full animate-spin" />
+              Creating...
+            </>
+          ) : (
+            "Create Dataset"
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/DatasetsTab.tsx b/app/components/speech-to-text/DatasetsTab.tsx
index fba902cf..eca0a19f 100644
--- a/app/components/speech-to-text/DatasetsTab.tsx
+++ b/app/components/speech-to-text/DatasetsTab.tsx
@@ -1,21 +1,22 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { colors } from "@/app/lib/colors";
+import { useState } from "react";
 import {
   AudioFile,
   Dataset,
   Language,
   STTSample,
+  STTViewDatasetModalData,
 } from "@/app/lib/types/speechToText";
 import { APIKey } from "@/app/lib/types/credentials";
 import { useToast } from "@/app/components/Toast";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetch } from "@/app/lib/apiClient";
-import Loader from "@/app/components/Loader";
-import AudioPlayer from "./AudioPlayer";
-import AudioPlayerFromUrl from "./AudioPlayerFromUrl";
-import DatasetDescription from "./DatasetDescription";
+import { DatabaseIcon } from "@/app/components/icons";
+import { DatasetListSkeleton } from "@/app/components";
+import STTDatasetCard from "./STTDatasetCard";
+import CreateSTTDatasetForm from "./CreateSTTDatasetForm";
+import STTViewDatasetModal from "./STTViewDatasetModal";
 
 export interface DatasetsTabProps {
   leftPanelWidth: number;
@@ -72,15 +73,9 @@ export default function DatasetsTab({
   toast,
 }: DatasetsTabProps) {
   const { isAuthenticated } = useAuth();
-  const [showLanguageInfo, setShowLanguageInfo] = useState(false);
-  const [languageInfoPos, setLanguageInfoPos] = useState({ top: 0, left: 0 });
   const [viewingId, setViewingId] = useState<number | null>(null);
-  const [viewModalData, setViewModalData] = useState<{
-    name: string;
-    datasetId: number;
-    samples: STTSample[];
-  } | null>(null);
-  const [viewPlayingId, setViewPlayingId] = useState<number | null>(null);
+  const [viewModalData, setViewModalData] =
+    useState<STTViewDatasetModalData | null>(null);
   const [savingSampleId, setSavingSampleId] = useState<number | null>(null);
 
   const handleViewDataset = async (datasetId: number, datasetName: string) => {
@@ -144,851 +139,92 @@ export default function DatasetsTab({
     }
   };
 
-  useEffect(() => {
-    if (!showLanguageInfo) return;
-    const handleClick = () => setShowLanguageInfo(false);
-    const handleScroll = () => setShowLanguageInfo(false);
-    document.addEventListener("click", handleClick);
-    window.addEventListener("scroll", handleScroll, true);
-    return () => {
-      document.removeEventListener("click", handleClick);
-      window.removeEventListener("scroll", handleScroll, true);
-    };
-  }, [showLanguageInfo]);
+  const handleLocalGroundTruthChange = (sampleId: number, value: string) => {
+    setViewModalData((prev) =>
+      prev
+        ? {
+            ...prev,
+            samples: prev.samples.map((s) =>
+              s.id === sampleId ? { ...s, ground_truth: value } : s,
+            ),
+          }
+        : null,
+    );
+  };
 
   return (
     <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Create Dataset Form */}
-      <div
-        className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-        style={{
-          width: `${leftPanelWidth}px`,
-          backgroundColor: colors.bg.primary,
-          borderColor: colors.border,
-        }}
-      >
-        <div className="flex-1 overflow-auto p-4 space-y-4">
-          {/* Page Title */}
-          <div>
-            <h2
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
-              Create New Dataset
-            </h2>
-            <p
-              className="text-xs mt-0.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Add audio samples that will be transcribed during evaluation
-            </p>
-          </div>
-
-          {/* Name */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Name *
-            </label>
-            <input
-              type="text"
-              value={datasetName}
-              onChange={(e) => setDatasetName(e.target.value)}
-              placeholder="e.g., English Podcast Dataset"
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            />
-          </div>
-
-          {/* Description */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Description
-            </label>
-            <input
-              type="text"
-              value={datasetDescription}
-              onChange={(e) => setDatasetDescription(e.target.value)}
-              placeholder="Optional description"
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            />
-          </div>
-
-          {/* Language */}
-          <div>
-            <label
-              className="text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              <span className="inline-flex items-center gap-1">
-                Language *
-                <button
-                  type="button"
-                  aria-label="Show language information"
-                  className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer shrink-0"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    border: `1px solid ${colors.border}`,
-                    color: colors.text.secondary,
-                    padding: 0,
-                    lineHeight: 1,
-                  }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    const rect = e.currentTarget.getBoundingClientRect();
-                    setLanguageInfoPos({
-                      top: rect.bottom + 4,
-                      left: rect.left,
-                    });
-                    setShowLanguageInfo(!showLanguageInfo);
-                  }}
-                >
-                  i
-                </button>
-                {showLanguageInfo && (
-                  <div
-                    className="fixed z-50 rounded-lg shadow-lg border text-xs p-3"
-                    style={{
-                      backgroundColor: colors.bg.primary,
-                      borderColor: colors.border,
-                      width: "280px",
-                      top: languageInfoPos.top,
-                      left: languageInfoPos.left,
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <div
-                      className="font-semibold mb-1"
-                      style={{ color: colors.text.primary }}
-                    >
-                      Default Language
-                    </div>
-                    <p
-                      style={{
-                        color: colors.text.secondary,
-                        lineHeight: "1.5",
-                      }}
-                    >
-                      This is the default language applied to all samples in the
-                      dataset. You can override the language for individual
-                      samples in the audio files section below.
-                    </p>
-                  </div>
-                )}
-              </span>
-            </label>
-            <select
-              value={datasetLanguageId}
-              onChange={(e) => {
-                const newId = Number(e.target.value);
-                setDatasetLanguageId(newId);
-                setAudioFiles((prev) =>
-                  prev.map((f) => ({ ...f, languageId: newId })),
-                );
-              }}
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            >
-              {languages.map((lang) => (
-                <option key={lang.id} value={lang.id}>
-                  {lang.name}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {/* Audio Samples */}
-          <div>
-            <div className="flex items-center justify-between mb-1.5">
-              <label
-                className="text-xs font-medium"
-                style={{ color: colors.text.secondary }}
-              >
-                Audio Samples *
-              </label>
-            </div>
-
-            <input
-              id="audio-upload"
-              type="file"
-              accept=".mp3,.wav,.m4a,.ogg,.flac,.webm"
-              multiple
-              onChange={handleAudioFileSelect}
-              className="hidden"
-            />
-
-            {audioFiles.length === 0 ? (
-              <div
-                onClick={isAuthenticated ? triggerAudioUpload : undefined}
-                className="border-2 border-dashed rounded-lg p-6 text-center transition-colors"
-                style={{
-                  borderColor: colors.border,
-                  backgroundColor: colors.bg.primary,
-                  cursor: isAuthenticated ? "pointer" : "not-allowed",
-                  opacity: isAuthenticated ? 1 : 0.5,
-                }}
-                onMouseEnter={(e) =>
-                  isAuthenticated &&
-                  (e.currentTarget.style.backgroundColor = colors.bg.secondary)
-                }
-                onMouseLeave={(e) =>
-                  isAuthenticated &&
-                  (e.currentTarget.style.backgroundColor = colors.bg.primary)
-                }
-              >
-                <svg
-                  className="w-8 h-8 mx-auto mb-2"
-                  style={{ color: colors.text.secondary }}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                    d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-                  />
-                </svg>
-                <p
-                  className="text-xs font-medium mb-1"
-                  style={{ color: colors.text.primary }}
-                >
-                  {isAuthenticated
-                    ? "Click to upload audio samples"
-                    : "Add an API key to upload"}
-                </p>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>
-                  MP3, WAV, M4A, OGG, FLAC, WebM
-                </p>
-              </div>
-            ) : (
-              <div>
-                <div
-                  className="space-y-3"
-                  style={{ maxHeight: "400px", overflow: "auto" }}
-                >
-                  {audioFiles.map((audioFile, idx) => (
-                    <div
-                      key={audioFile.id}
-                      className="rounded-lg overflow-hidden"
-                      style={{
-                        backgroundColor: colors.bg.primary,
-                        boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
-                      }}
-                    >
-                      <div className="p-4">
-                        {/* Header: number, filename, status, remove */}
-                        <div className="flex items-center justify-between mb-3">
-                          <div className="flex items-center gap-2 min-w-0 flex-1">
-                            <span
-                              className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] flex-shrink-0 font-medium"
-                              style={{
-                                backgroundColor: colors.bg.secondary,
-                                color: colors.text.secondary,
-                              }}
-                            >
-                              {idx + 1}
-                            </span>
-                            <span
-                              className="text-sm font-medium truncate"
-                              style={{ color: colors.text.primary }}
-                            >
-                              {audioFile.name}
-                            </span>
-                            <span
-                              className="text-xs flex-shrink-0"
-                              style={{ color: colors.text.secondary }}
-                            >
-                              {formatFileSize(audioFile.size)}
-                            </span>
-                            {audioFile.fileId ? (
-                              <svg
-                                className="w-3.5 h-3.5 flex-shrink-0"
-                                style={{ color: colors.status.success }}
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                              >
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  strokeWidth={2}
-                                  d="M5 13l4 4L19 7"
-                                />
-                              </svg>
-                            ) : (
-                              <div
-                                className="w-3 h-3 border-2 border-t-transparent rounded-full animate-spin flex-shrink-0"
-                                style={{
-                                  borderColor: colors.accent.primary,
-                                  borderTopColor: "transparent",
-                                }}
-                              />
-                            )}
-                          </div>
-                          <button
-                            onClick={() => removeAudioFile(audioFile.id)}
-                            className="p-1 rounded flex-shrink-0"
-                            style={{ color: colors.text.secondary }}
-                          >
-                            <svg
-                              className="w-3.5 h-3.5"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M6 18L18 6M6 6l12 12"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-
-                        {/* Audio Player */}
-                        <AudioPlayer
-                          audioBase64={audioFile.base64}
-                          mediaType={audioFile.mediaType}
-                          isPlaying={playingFileId === audioFile.id}
-                          onPlayToggle={() =>
-                            setPlayingFileId(
-                              playingFileId === audioFile.id
-                                ? null
-                                : audioFile.id,
-                            )
-                          }
-                        />
-
-                        {/* Language + Ground Truth */}
-                        <div className="mt-3 flex items-start gap-3">
-                          <div
-                            className="flex-shrink-0"
-                            style={{ width: "120px" }}
-                          >
-                            <label
-                              className="block text-[10px] font-medium mb-1 uppercase tracking-wide"
-                              style={{ color: colors.text.secondary }}
-                            >
-                              Language
-                            </label>
-                            <select
-                              value={audioFile.languageId}
-                              onChange={(e) =>
-                                updateFileLanguage(
-                                  audioFile.id,
-                                  Number(e.target.value),
-                                )
-                              }
-                              className="w-full px-2 py-1.5 border rounded-md text-xs"
-                              style={{
-                                backgroundColor: colors.bg.primary,
-                                borderColor: colors.border,
-                                color: colors.text.primary,
-                              }}
-                            >
-                              {languages.map((lang) => (
-                                <option key={lang.id} value={lang.id}>
-                                  {lang.name}
-                                </option>
-                              ))}
-                            </select>
-                          </div>
-                          <div className="flex-1">
-                            <label
-                              className="block text-[10px] font-medium mb-1 uppercase tracking-wide"
-                              style={{ color: colors.text.secondary }}
-                            >
-                              Ground Truth
-                            </label>
-                            <textarea
-                              value={audioFile.groundTruth}
-                              onChange={(e) =>
-                                updateGroundTruth(audioFile.id, e.target.value)
-                              }
-                              placeholder={
-                                audioFile.fileId
-                                  ? "Expected transcription..."
-                                  : "Uploading..."
-                              }
-                              disabled={!audioFile.fileId}
-                              rows={2}
-                              className="w-full px-2 py-1.5 border rounded-md text-xs"
-                              style={{
-                                backgroundColor: audioFile.fileId
-                                  ? colors.bg.primary
-                                  : colors.bg.secondary,
-                                borderColor: colors.border,
-                                color: audioFile.fileId
-                                  ? colors.text.primary
-                                  : colors.text.secondary,
-                                cursor: audioFile.fileId
-                                  ? "text"
-                                  : "not-allowed",
-                                opacity: audioFile.fileId ? 1 : 0.6,
-                                resize: "vertical",
-                              }}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-
-                {/* Upload more - below scrollable area */}
-                <button
-                  onClick={isAuthenticated ? triggerAudioUpload : undefined}
-                  className="flex items-center gap-1 text-xs font-medium mt-2"
-                  style={{
-                    color: isAuthenticated
-                      ? colors.accent.primary
-                      : colors.text.secondary,
-                    cursor: isAuthenticated ? "pointer" : "not-allowed",
-                  }}
-                >
-                  <svg
-                    className="w-3.5 h-3.5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M12 4v16m8-8H4"
-                    />
-                  </svg>
-                  Add more samples
-                  <span style={{ color: colors.text.secondary }}>
-                    ({audioFiles.filter((f) => f.fileId).length}/
-                    {audioFiles.length} uploaded)
-                  </span>
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Bottom Action Bar */}
-        <div
-          className="flex-shrink-0 border-t px-4 py-4 flex items-center justify-end gap-3"
-          style={{
-            borderColor: colors.border,
-            backgroundColor: colors.bg.primary,
-          }}
-        >
-          <button
-            onClick={() => {
-              setDatasetName("");
-              setDatasetDescription("");
-              setDatasetLanguageId(1);
-              setAudioFiles([]);
-              setPlayingFileId(null);
-            }}
-            disabled={isCreating}
-            className="px-4 py-2 rounded-lg text-sm font-medium"
-            style={{ color: colors.text.secondary }}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleCreateDataset}
-            disabled={
-              isCreating || !datasetName.trim() || audioFiles.length === 0
-            }
-            className="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium"
-            style={{
-              backgroundColor:
-                isCreating || !datasetName.trim() || audioFiles.length === 0
-                  ? colors.bg.secondary
-                  : colors.accent.primary,
-              color:
-                isCreating || !datasetName.trim() || audioFiles.length === 0
-                  ? colors.text.secondary
-                  : "#fff",
-              cursor:
-                isCreating || !datasetName.trim() || audioFiles.length === 0
-                  ? "not-allowed"
-                  : "pointer",
-            }}
-          >
-            {isCreating ? (
-              <>
-                <div
-                  className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-                  style={{
-                    borderColor: colors.text.secondary,
-                    borderTopColor: "transparent",
-                  }}
-                />
-                Creating...
-              </>
-            ) : (
-              "Create Dataset"
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Right Panel - Dataset List */}
-      <div
-        className="flex-1 flex flex-col overflow-hidden"
-        style={{ backgroundColor: colors.bg.secondary }}
-      >
+      <div className="flex-1 flex flex-col overflow-hidden bg-bg-secondary">
         <div className="flex-1 overflow-auto p-6">
           <div className="flex items-center justify-between mb-4">
-            <h3
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
+            <h3 className="text-base font-semibold text-text-primary">
               Datasets
             </h3>
           </div>
 
           {isLoadingDatasets ? (
-            <div className="p-16">
-              <Loader size="md" message="Loading datasets..." />
-            </div>
+            <DatasetListSkeleton />
           ) : datasets.length === 0 ? (
             <div className="p-16 text-center">
-              <svg
-                className="w-12 h-12 mx-auto mb-3"
-                style={{ color: colors.border }}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1.5}
-                  d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3"
-                />
-              </svg>
-              <p
-                className="text-sm font-medium mb-1"
-                style={{ color: colors.text.primary }}
-              >
+              <DatabaseIcon className="w-12 h-12 mx-auto mb-3 text-border" />
+              <p className="text-sm font-medium mb-1 text-text-primary">
                 No datasets yet
               </p>
-              <p className="text-xs" style={{ color: colors.text.secondary }}>
-                Create your first dataset using the form on the left
+              <p className="text-xs text-text-secondary">
+                Create your first dataset using the form on the right
               </p>
             </div>
           ) : (
             <div className="space-y-3">
               {datasets.map((dataset) => (
-                <div
+                <STTDatasetCard
                   key={dataset.id}
-                  className="rounded-lg overflow-hidden"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
-                    borderLeft: "3px solid #DCCFC3",
-                  }}
-                >
-                  <div className="px-5 py-4">
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="min-w-0 flex-1">
-                        <div
-                          className="text-sm font-semibold truncate"
-                          style={{ color: colors.text.primary }}
-                        >
-                          {dataset.name}
-                        </div>
-                        {dataset.description && (
-                          <DatasetDescription
-                            description={dataset.description}
-                          />
-                        )}
-                        {dataset.dataset_metadata?.sample_count !==
-                          undefined && (
-                          <div
-                            className="mt-2 text-xs"
-                            style={{ color: colors.text.secondary }}
-                          >
-                            {dataset.dataset_metadata.sample_count} samples
-                          </div>
-                        )}
-                      </div>
-                      <div className="flex items-center gap-2 flex-shrink-0">
-                        <button
-                          onClick={() =>
-                            handleViewDataset(dataset.id, dataset.name)
-                          }
-                          disabled={viewingId === dataset.id}
-                          className="px-3 py-1.5 rounded-lg text-xs font-medium border"
-                          style={{
-                            backgroundColor: "transparent",
-                            borderColor: colors.border,
-                            color: colors.text.primary,
-                            opacity: viewingId === dataset.id ? 0.5 : 1,
-                          }}
-                        >
-                          {viewingId === dataset.id ? "Loading..." : "View"}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                  dataset={dataset}
+                  isViewing={viewingId === dataset.id}
+                  onView={() => handleViewDataset(dataset.id, dataset.name)}
+                />
               ))}
             </div>
           )}
         </div>
       </div>
 
-      {/* View Dataset Modal */}
-      {viewModalData && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center"
-          style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
-          onClick={() => {
-            setViewModalData(null);
-            setViewPlayingId(null);
-          }}
-        >
-          <div
-            className="rounded-lg shadow-xl flex flex-col"
-            style={{
-              backgroundColor: colors.bg.primary,
-              width: "90vw",
-              maxWidth: "900px",
-              maxHeight: "85vh",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Modal Header */}
-            <div
-              className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0"
-              style={{ borderColor: colors.border }}
-            >
-              <div>
-                <h3
-                  className="text-sm font-semibold"
-                  style={{ color: colors.text.primary }}
-                >
-                  {viewModalData.name}
-                </h3>
-                <p
-                  className="text-xs mt-0.5"
-                  style={{ color: colors.text.secondary }}
-                >
-                  {viewModalData.samples.length} audio samples
-                </p>
-              </div>
-              <button
-                onClick={() => {
-                  setViewModalData(null);
-                  setViewPlayingId(null);
-                }}
-                className="p-1.5 rounded"
-                style={{ color: colors.text.secondary }}
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
+      <div
+        className="shrink-0 border-l flex flex-col overflow-hidden bg-bg-primary border-border"
+        style={{ width: `${leftPanelWidth}px` }}
+      >
+        <CreateSTTDatasetForm
+          datasetName={datasetName}
+          setDatasetName={setDatasetName}
+          datasetDescription={datasetDescription}
+          setDatasetDescription={setDatasetDescription}
+          datasetLanguageId={datasetLanguageId}
+          setDatasetLanguageId={setDatasetLanguageId}
+          audioFiles={audioFiles}
+          setAudioFiles={setAudioFiles}
+          playingFileId={playingFileId}
+          setPlayingFileId={setPlayingFileId}
+          handleAudioFileSelect={handleAudioFileSelect}
+          triggerAudioUpload={triggerAudioUpload}
+          removeAudioFile={removeAudioFile}
+          updateGroundTruth={updateGroundTruth}
+          updateFileLanguage={updateFileLanguage}
+          formatFileSize={formatFileSize}
+          isCreating={isCreating}
+          handleCreateDataset={handleCreateDataset}
+          languages={languages}
+        />
+      </div>
 
-            {/* Modal Body - Samples */}
-            <div className="flex-1 overflow-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr
-                    style={{
-                      backgroundColor: colors.bg.secondary,
-                      borderBottom: `1px solid ${colors.border}`,
-                    }}
-                  >
-                    <th
-                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                      style={{
-                        color: colors.text.secondary,
-                        backgroundColor: colors.bg.secondary,
-                        width: "40px",
-                      }}
-                    ></th>
-                    <th
-                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                      style={{
-                        color: colors.text.secondary,
-                        backgroundColor: colors.bg.secondary,
-                      }}
-                    >
-                      Sample
-                    </th>
-                    <th
-                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                      style={{
-                        color: colors.text.secondary,
-                        backgroundColor: colors.bg.secondary,
-                        width: "120px",
-                      }}
-                    >
-                      Language
-                    </th>
-                    <th
-                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                      style={{
-                        color: colors.text.secondary,
-                        backgroundColor: colors.bg.secondary,
-                      }}
-                    >
-                      Ground Truth
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {viewModalData.samples.map((sample, idx) => (
-                    <tr
-                      key={sample.id}
-                      style={{ borderBottom: `1px solid ${colors.border}` }}
-                    >
-                      <td
-                        className="px-4 py-3 text-xs align-top"
-                        style={{ color: colors.text.secondary }}
-                      >
-                        {idx + 1}
-                      </td>
-                      <td className="px-4 py-3 align-top">
-                        <div className="space-y-1.5">
-                          {sample.sample_metadata?.original_filename && (
-                            <div
-                              className="text-xs font-medium truncate"
-                              style={{
-                                color: colors.text.primary,
-                                maxWidth: "280px",
-                              }}
-                            >
-                              {sample.sample_metadata.original_filename}
-                            </div>
-                          )}
-                          {sample.signed_url ? (
-                            <AudioPlayerFromUrl
-                              signedUrl={sample.signed_url}
-                              isPlaying={viewPlayingId === sample.id}
-                              onPlayToggle={() =>
-                                setViewPlayingId(
-                                  viewPlayingId === sample.id
-                                    ? null
-                                    : sample.id,
-                                )
-                              }
-                            />
-                          ) : (
-                            <span
-                              className="text-xs"
-                              style={{ color: colors.text.secondary }}
-                            >
-                              No audio
-                            </span>
-                          )}
-                        </div>
-                      </td>
-                      <td className="px-4 py-3 align-top">
-                        <select
-                          value={sample.language_id ?? ""}
-                          onChange={(e) =>
-                            handleUpdateSample(
-                              sample.id,
-                              "language_id",
-                              Number(e.target.value),
-                            )
-                          }
-                          disabled={savingSampleId === sample.id}
-                          className="w-full px-2 py-1.5 border rounded-md text-xs"
-                          style={{
-                            backgroundColor: colors.bg.primary,
-                            borderColor: colors.border,
-                            color: colors.text.primary,
-                            opacity: savingSampleId === sample.id ? 0.5 : 1,
-                          }}
-                        >
-                          {languages.map((lang) => (
-                            <option key={lang.id} value={lang.id}>
-                              {lang.name}
-                            </option>
-                          ))}
-                        </select>
-                      </td>
-                      <td className="px-4 py-3 align-top">
-                        <textarea
-                          value={sample.ground_truth || ""}
-                          onChange={(e) => {
-                            const newVal = e.target.value;
-                            setViewModalData((prev) =>
-                              prev
-                                ? {
-                                    ...prev,
-                                    samples: prev.samples.map((s) =>
-                                      s.id === sample.id
-                                        ? { ...s, ground_truth: newVal }
-                                        : s,
-                                    ),
-                                  }
-                                : null,
-                            );
-                          }}
-                          onBlur={(e) =>
-                            handleUpdateSample(
-                              sample.id,
-                              "ground_truth",
-                              e.target.value,
-                            )
-                          }
-                          placeholder="Enter ground truth..."
-                          disabled={savingSampleId === sample.id}
-                          rows={3}
-                          className="w-full px-2 py-1.5 border rounded-md text-xs"
-                          style={{
-                            backgroundColor: colors.bg.primary,
-                            borderColor: colors.border,
-                            color: colors.text.primary,
-                            opacity: savingSampleId === sample.id ? 0.5 : 1,
-                            resize: "vertical",
-                          }}
-                        />
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
+      {viewModalData && (
+        <STTViewDatasetModal
+          data={viewModalData}
+          languages={languages}
+          savingSampleId={savingSampleId}
+          onClose={() => setViewModalData(null)}
+          onUpdateSample={handleUpdateSample}
+          onLocalGroundTruthChange={handleLocalGroundTruthChange}
+        />
       )}
     </div>
   );
diff --git a/app/components/speech-to-text/EvaluationsTab.tsx b/app/components/speech-to-text/EvaluationsTab.tsx
index 119e955d..cda60d04 100644
--- a/app/components/speech-to-text/EvaluationsTab.tsx
+++ b/app/components/speech-to-text/EvaluationsTab.tsx
@@ -1,17 +1,12 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { colors } from "@/app/lib/colors";
-import { Tab, Dataset, STTRun, STTResult } from "@/app/lib/types/speechToText";
+import { Dataset, STTRun, STTResult } from "@/app/lib/types/speechToText";
 import { APIKey } from "@/app/lib/types/credentials";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetch } from "@/app/lib/apiClient";
-import Loader, { LoaderBox } from "@/app/components/Loader";
-import StatusBadge from "@/app/components/StatusBadge";
-import { computeWordDiff } from "./TranscriptionDiffViewer";
-import { getStatusColor } from "@/app/components/utils";
-import AudioPlayerFromUrl from "@/app/components/speech-to-text/AudioPlayerFromUrl";
-import { RefreshIcon } from "@/app/components/icons";
+import STTRunsList from "./STTRunsList";
+import RunSTTEvaluationForm from "./RunSTTEvaluationForm";
+import { Tab } from "@/app/lib/types/evaluation";
 
 export interface EvaluationsTabProps {
   leftPanelWidth: number;
@@ -64,50 +59,12 @@ export default function EvaluationsTab({
   loadResults,
   apiKeys,
   toast,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  setActiveTab,
 }: EvaluationsTabProps) {
   const { isAuthenticated } = useAuth();
-  const [statusFilter, setStatusFilter] = useState<string>("all");
-  const [expandedTranscriptions, setExpandedTranscriptions] = useState<
-    Set<number>
-  >(new Set());
-  const [openScoreInfo, setOpenScoreInfo] = useState<string | null>(null);
-  const [scoreInfoPos, setScoreInfoPos] = useState({ top: 0, left: 0 });
-  const [playingResultId, setPlayingResultId] = useState<number | null>(null);
-  const [loadingRunId, setLoadingRunId] = useState<number | null>(null);
-
-  useEffect(() => {
-    setLoadingRunId(null);
-  }, [selectedRunId]);
-
-  useEffect(() => {
-    if (!openScoreInfo) return;
-    const handleClick = () => setOpenScoreInfo(null);
-    const handleScroll = () => setOpenScoreInfo(null);
-    document.addEventListener("click", handleClick);
-    window.addEventListener("scroll", handleScroll, true);
-    return () => {
-      document.removeEventListener("click", handleClick);
-      window.removeEventListener("scroll", handleScroll, true);
-    };
-  }, [openScoreInfo]);
-
-  const toggleTranscription = (resultId: number) => {
-    setExpandedTranscriptions((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(resultId)) {
-        newSet.delete(resultId);
-      } else {
-        newSet.add(resultId);
-      }
-      return newSet;
-    });
-  };
 
   const updateFeedback = async (
     resultId: number,
-    isCorrect: boolean | null,
+    isCorrect: boolean | null | undefined,
     comment?: string,
   ) => {
     if (!isAuthenticated) return;
@@ -126,7 +83,6 @@ export default function EvaluationsTab({
         },
       );
 
-      // Update local state
       setResults((prev) =>
         prev.map((r) =>
           r.id === resultId
@@ -146,1182 +102,41 @@ export default function EvaluationsTab({
 
   return (
     <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Evaluation Configuration */}
+      {/* Left Panel - Evaluation Runs List or Results */}
+      <STTRunsList
+        runs={runs}
+        isLoadingRuns={isLoadingRuns}
+        loadRuns={loadRuns}
+        selectedRunId={selectedRunId}
+        setSelectedRunId={setSelectedRunId}
+        results={results}
+        setResults={setResults}
+        isLoadingResults={isLoadingResults}
+        loadResults={loadResults}
+        onUpdateFeedback={updateFeedback}
+      />
+
+      {/* Right Panel - Evaluation Configuration */}
       {selectedRunId === null && (
         <div
-          className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-          style={{
-            width: `${leftPanelWidth}px`,
-            backgroundColor: colors.bg.primary,
-            borderColor: colors.border,
-          }}
+          className="shrink-0 border-l flex flex-col overflow-hidden bg-bg-primary border-border"
+          style={{ width: `${leftPanelWidth}px` }}
         >
-          <div className="flex-1 overflow-auto p-4 space-y-4">
-            {/* Page Title */}
-            <div>
-              <h2
-                className="text-base font-semibold"
-                style={{ color: colors.text.primary }}
-              >
-                Run New Evaluation
-              </h2>
-              <p
-                className="text-xs mt-0.5"
-                style={{ color: colors.text.secondary }}
-              >
-                Compare transcription quality across STT models
-              </p>
-            </div>
-
-            {/* Evaluation Name */}
-            <div>
-              <label
-                className="block text-xs font-medium mb-1.5"
-                style={{ color: colors.text.secondary }}
-              >
-                Name *
-              </label>
-              <input
-                type="text"
-                value={evaluationName}
-                onChange={(e) => setEvaluationName(e.target.value)}
-                placeholder="e.g., English Podcast Evaluation v1"
-                className="w-full px-3 py-2 border rounded-md text-sm"
-                style={{
-                  backgroundColor: colors.bg.primary,
-                  borderColor: colors.border,
-                  color: colors.text.primary,
-                }}
-              />
-            </div>
-
-            {/* Model Selection */}
-            <div>
-              <label
-                className="block text-xs font-medium mb-1.5"
-                style={{ color: colors.text.secondary }}
-              >
-                Model *
-              </label>
-              <select
-                value={selectedModel}
-                onChange={(e) => setSelectedModel(e.target.value)}
-                className="w-full px-3 py-2 border rounded-md text-sm"
-                style={{
-                  backgroundColor: colors.bg.primary,
-                  borderColor: colors.border,
-                  color: colors.text.primary,
-                }}
-              >
-                <option value="gemini-2.5-pro">gemini-2.5-pro</option>
-              </select>
-            </div>
-
-            {/* Dataset Selection */}
-            <div className="pt-2">
-              <label
-                className="block text-xs font-medium mb-1.5"
-                style={{ color: colors.text.secondary }}
-              >
-                Select Dataset *
-              </label>
-              {isLoadingDatasets ? (
-                <LoaderBox message="Loading datasets..." size="sm" />
-              ) : datasets.length === 0 ? (
-                <div
-                  className="border rounded-md p-8 text-center"
-                  style={{ borderColor: colors.border }}
-                >
-                  <p
-                    className="text-sm"
-                    style={{ color: colors.text.secondary }}
-                  >
-                    No datasets available
-                  </p>
-                  <p
-                    className="text-xs mt-1"
-                    style={{ color: colors.text.secondary }}
-                  >
-                    Create a dataset first in the Datasets tab
-                  </p>
-                </div>
-              ) : (
-                <select
-                  value={selectedDatasetId || ""}
-                  onChange={(e) =>
-                    setSelectedDatasetId(
-                      e.target.value ? parseInt(e.target.value) : null,
-                    )
-                  }
-                  className="w-full px-3 py-2 border rounded-md text-sm"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    borderColor: colors.border,
-                    color: colors.text.primary,
-                  }}
-                >
-                  <option value="">-- Select a dataset --</option>
-                  {datasets.map((dataset) => (
-                    <option key={dataset.id} value={dataset.id}>
-                      {dataset.name} (
-                      {dataset.dataset_metadata?.sample_count || 0} samples)
-                    </option>
-                  ))}
-                </select>
-              )}
-            </div>
-
-            {/* Selected Dataset Info */}
-            {selectedDataset && (
-              <div
-                className="border rounded-lg p-3"
-                style={{
-                  borderColor: colors.status.success,
-                  backgroundColor: "rgba(22, 163, 74, 0.02)",
-                }}
-              >
-                <div className="flex items-start gap-2">
-                  <svg
-                    className="w-5 h-5 flex-shrink-0 mt-0.5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    style={{ color: colors.status.success }}
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <div className="flex-1">
-                    <div
-                      className="text-sm font-medium"
-                      style={{ color: colors.text.primary }}
-                    >
-                      {selectedDataset.name}
-                    </div>
-                    <div
-                      className="text-xs mt-1 space-y-0.5"
-                      style={{ color: colors.text.secondary }}
-                    >
-                      <div>
-                        {selectedDataset.dataset_metadata?.sample_count || 0}{" "}
-                        samples
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* Run Evaluation Button */}
-          <div
-            className="flex-shrink-0 border-t px-4 py-3"
-            style={{
-              borderColor: colors.border,
-              backgroundColor: colors.bg.primary,
-            }}
-          >
-            <button
-              onClick={handleRunEvaluation}
-              disabled={
-                isRunning || !evaluationName.trim() || !selectedDatasetId
-              }
-              className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium"
-              style={{
-                backgroundColor:
-                  isRunning || !evaluationName.trim() || !selectedDatasetId
-                    ? colors.bg.secondary
-                    : colors.accent.primary,
-                color:
-                  isRunning || !evaluationName.trim() || !selectedDatasetId
-                    ? colors.text.secondary
-                    : "#fff",
-                cursor:
-                  isRunning || !evaluationName.trim() || !selectedDatasetId
-                    ? "not-allowed"
-                    : "pointer",
-              }}
-            >
-              {isRunning ? (
-                <>
-                  <div
-                    className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-                    style={{
-                      borderColor: colors.text.secondary,
-                      borderTopColor: "transparent",
-                    }}
-                  />
-                  Starting Evaluation...
-                </>
-              ) : (
-                <>
-                  <svg
-                    className="w-5 h-5"
-                    fill="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path d="M8 5v14l11-7z" />
-                  </svg>
-                  Run Evaluation
-                </>
-              )}
-            </button>
-          </div>
+          <RunSTTEvaluationForm
+            evaluationName={evaluationName}
+            setEvaluationName={setEvaluationName}
+            datasets={datasets}
+            isLoadingDatasets={isLoadingDatasets}
+            selectedDatasetId={selectedDatasetId}
+            setSelectedDatasetId={setSelectedDatasetId}
+            selectedDataset={selectedDataset}
+            selectedModel={selectedModel}
+            setSelectedModel={setSelectedModel}
+            isRunning={isRunning}
+            handleRunEvaluation={handleRunEvaluation}
+          />
         </div>
       )}
-
-      {/* Right Panel - Evaluation Runs List or Results */}
-      <div
-        className="flex-1 flex flex-col overflow-hidden"
-        style={{ backgroundColor: colors.bg.secondary }}
-      >
-        <div className="flex-1 overflow-auto p-4">
-          <div className="mb-3 flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              {selectedRunId !== null ? (
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => setSelectedRunId(null)}
-                    className="p-1 rounded"
-                    style={{ color: colors.text.secondary }}
-                  >
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M15 19l-7-7 7-7"
-                      />
-                    </svg>
-                  </button>
-                  <h2
-                    className="text-base font-semibold"
-                    style={{ color: colors.text.primary }}
-                  >
-                    {runs.find((r) => r.id === selectedRunId)?.run_name}
-                  </h2>
-                </div>
-              ) : (
-                <h2
-                  className="text-base font-semibold"
-                  style={{ color: colors.text.primary }}
-                >
-                  Evaluation Runs
-                </h2>
-              )}
-            </div>
-            {selectedRunId === null && (
-              <div className="flex items-center gap-2">
-                <select
-                  value={statusFilter}
-                  onChange={(e) => setStatusFilter(e.target.value)}
-                  className="px-2.5 py-1 rounded-md text-xs font-medium border appearance-none cursor-pointer pr-7"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    borderColor: colors.border,
-                    color: colors.text.primary,
-                    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
-                    backgroundRepeat: "no-repeat",
-                    backgroundPosition: "right 6px center",
-                  }}
-                >
-                  <option value="all">All Status</option>
-                  <option value="completed">Completed</option>
-                  <option value="processing">Processing</option>
-                  <option value="pending">Pending</option>
-                  <option value="failed">Failed</option>
-                </select>
-                <button
-                  onClick={loadRuns}
-                  disabled={isLoadingRuns}
-                  className="p-1.5 rounded cursor-pointer text-text-secondary"
-                >
-                  <RefreshIcon
-                    className={`w-4 h-4 -scale-x-100 ${isLoadingRuns ? "animate-spin" : ""}`}
-                  />
-                </button>
-              </div>
-            )}
-          </div>
-
-          <div
-            className="rounded-lg overflow-visible"
-            style={{
-              backgroundColor: colors.bg.primary,
-              boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
-            }}
-          >
-            {selectedRunId !== null ? (
-              // Results View
-              isLoadingResults ? (
-                <div className="p-16">
-                  <Loader size="md" message="Loading results..." />
-                </div>
-              ) : results.length === 0 ? (
-                <div className="p-16 text-center">
-                  <p
-                    className="text-sm font-medium mb-1"
-                    style={{ color: colors.text.primary }}
-                  >
-                    No results found
-                  </p>
-                  <p
-                    className="text-xs"
-                    style={{ color: colors.text.secondary }}
-                  >
-                    This evaluation has no results yet
-                  </p>
-                </div>
-              ) : (
-                <table className="w-full">
-                  <thead>
-                    <tr
-                      style={{
-                        backgroundColor: colors.bg.secondary,
-                        borderBottom: `1px solid ${colors.border}`,
-                      }}
-                    >
-                      <th
-                        className="text-left px-4 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "10%" }}
-                      >
-                        Sample
-                      </th>
-                      <th
-                        className="text-left px-4 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "40%" }}
-                      >
-                        <div>
-                          <div>Ground Truth vs Transcription</div>
-                          <div className="flex items-center gap-2 font-normal mt-1">
-                            <span className="inline-flex items-center gap-1">
-                              <span
-                                className="inline-block w-2 h-2 rounded"
-                                style={{ backgroundColor: "#fee2e2" }}
-                              />
-                              <span style={{ color: colors.text.secondary }}>
-                                Deletion
-                              </span>
-                            </span>
-                            <span className="inline-flex items-center gap-1">
-                              <span
-                                className="inline-block w-2 h-2 rounded"
-                                style={{ backgroundColor: "#dcfce7" }}
-                              />
-                              <span style={{ color: colors.text.secondary }}>
-                                Insertion
-                              </span>
-                            </span>
-                            <span className="inline-flex items-center gap-1">
-                              <span
-                                className="inline-block w-2 h-2 rounded"
-                                style={{ backgroundColor: "#fef3c7" }}
-                              />
-                              <span style={{ color: colors.text.secondary }}>
-                                Substitution
-                              </span>
-                            </span>
-                          </div>
-                        </div>
-                      </th>
-                      <th
-                        className="text-left px-4 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "15%" }}
-                      >
-                        <span className="inline-flex items-center gap-1">
-                          Score
-                          <span
-                            className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer shrink-0"
-                            style={{
-                              backgroundColor: colors.bg.primary,
-                              border: `1px solid ${colors.border}`,
-                              color: colors.text.secondary,
-                            }}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              const rect =
-                                e.currentTarget.getBoundingClientRect();
-                              setScoreInfoPos({
-                                top: rect.bottom + 4,
-                                left: rect.left,
-                              });
-                              setOpenScoreInfo(
-                                openScoreInfo ? null : "accuracy",
-                              );
-                            }}
-                          >
-                            i
-                          </span>
-                          {openScoreInfo &&
-                            (() => {
-                              const metrics = [
-                                {
-                                  key: "accuracy",
-                                  title:
-                                    "Accuracy (Word Information Preserved)",
-                                  desc: "Measures how much of the original information was correctly captured.",
-                                  formula: "WIP = (C / N) × (C / H)",
-                                  formulaDesc:
-                                    "C = correct words\nN = total words in reference\nH = total words in hypothesis",
-                                  example: `Reference:  "the cat sat on the mat" (N=6)\nHypothesis: "a cat sit on mat" (H=5)\nC = 3 (cat, on, mat)\n\nWIP = (3/6) × (3/5)\n    = 0.5 × 0.6 = 0.30 = 30%`,
-                                  direction: "Higher is better.",
-                                  directionColor: colors.status.success,
-                                },
-                                {
-                                  key: "wer",
-                                  title: "WER (Word Error Rate)",
-                                  desc: "The most widely used metric in STT evaluation.",
-                                  formula: "WER = (S + D + I) / N",
-                                  formulaDesc:
-                                    "S = substitutions, D = deletions\nI = insertions, N = total words in reference",
-                                  example: `Reference:  "the cat sat on the mat" (N=6)\nHypothesis: "a cat sit on mat"\n\nthe → a    (Substitution)\ncat → cat  (Correct)\nsat → sit  (Substitution)\non  → on   (Correct)\nthe → ∅    (Deletion)\nmat → mat  (Correct)\n\nS=2, D=1, I=0\nWER = (2+1+0) / 6 = 0.50 = 50%`,
-                                  direction: "Lower is better.",
-                                  directionColor: colors.status.error,
-                                },
-                                {
-                                  key: "cer",
-                                  title: "CER (Character Error Rate)",
-                                  desc: "Same concept as WER but at the character level — more granular, catches partial word errors.",
-                                  formula: "CER = (S + D + I) / N",
-                                  formulaDesc:
-                                    "S, D, I = character-level errors\nN = total characters in reference",
-                                  example: `Reference:  "the cat sat" (N=11 chars)\nHypothesis: "the bat set"\n\nt → t  (Correct)\nh → h  (Correct)\ne → e  (Correct)\n· → ·  (Correct)\nc → b  (Substitution)\na → a  (Correct)\nt → t  (Correct)\n· → ·  (Correct)\ns → s  (Correct)\na → e  (Substitution)\nt → t  (Correct)\n\nS=2, D=0, I=0\nCER = 2/11 = 0.18 = 18%`,
-                                  direction: "Lower is better.",
-                                  directionColor: colors.status.error,
-                                },
-                                {
-                                  key: "lenient_wer",
-                                  title: "Lenient WER",
-                                  desc: "Same as WER but ignores differences in casing and punctuation — useful when exact formatting doesn't matter.",
-                                  formula: "Same as WER after normalizing text",
-                                  formulaDesc:
-                                    "Normalization: lowercase + remove punctuation",
-                                  example: `Reference:  "Hello, World!"\nHypothesis: "hello world"\n\nAfter normalization:\n"hello world" vs "hello world"\n→ exact match\n\nLenient WER = 0%\n(strict WER would be higher)`,
-                                  direction: "Lower is better.",
-                                  directionColor: colors.status.error,
-                                },
-                              ];
-                              const currentIdx = metrics.findIndex(
-                                (m) => m.key === openScoreInfo,
-                              );
-                              const current =
-                                metrics[currentIdx >= 0 ? currentIdx : 0];
-                              return (
-                                <div
-                                  className="fixed z-50 rounded-lg shadow-lg border text-xs"
-                                  style={{
-                                    backgroundColor: colors.bg.primary,
-                                    borderColor: colors.border,
-                                    width: "370px",
-                                    top: scoreInfoPos.top,
-                                    left: scoreInfoPos.left,
-                                  }}
-                                  onClick={(e) => e.stopPropagation()}
-                                >
-                                  {/* Tab navigation */}
-                                  <div
-                                    className="flex border-b"
-                                    style={{ borderColor: colors.border }}
-                                  >
-                                    {metrics.map((m, _idx) => (
-                                      <button
-                                        key={m.key}
-                                        className="flex-1 px-2 py-2 text-xs font-medium"
-                                        style={{
-                                          color:
-                                            openScoreInfo === m.key
-                                              ? colors.accent.primary
-                                              : colors.text.secondary,
-                                          borderBottom:
-                                            openScoreInfo === m.key
-                                              ? `2px solid ${colors.accent.primary}`
-                                              : "2px solid transparent",
-                                          backgroundColor: "transparent",
-                                          cursor: "pointer",
-                                        }}
-                                        onClick={() => setOpenScoreInfo(m.key)}
-                                      >
-                                        {m.key === "accuracy"
-                                          ? "Accuracy"
-                                          : m.key === "wer"
-                                            ? "WER"
-                                            : m.key === "cer"
-                                              ? "CER"
-                                              : "Lenient WER"}
-                                      </button>
-                                    ))}
-                                  </div>
-                                  {/* Content */}
-                                  <div
-                                    className="p-3"
-                                    style={{
-                                      fontFamily:
-                                        "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-                                    }}
-                                  >
-                                    <div
-                                      className="font-semibold mb-2"
-                                      style={{ color: colors.text.primary }}
-                                    >
-                                      {current.title}
-                                    </div>
-                                    <p
-                                      className="mb-2"
-                                      style={{
-                                        color: colors.text.secondary,
-                                        fontFamily: "system-ui, sans-serif",
-                                      }}
-                                    >
-                                      {current.desc}
-                                    </p>
-                                    <div
-                                      className="mb-1 font-semibold"
-                                      style={{ color: colors.text.primary }}
-                                    >
-                                      Formula
-                                    </div>
-                                    <div
-                                      className="mb-2 p-2 rounded whitespace-pre-wrap"
-                                      style={{
-                                        backgroundColor: colors.bg.secondary,
-                                        color: colors.text.primary,
-                                      }}
-                                    >
-                                      {current.formula}
-                                      {"\n"}
-                                      <span
-                                        style={{ color: colors.text.secondary }}
-                                      >
-                                        {current.formulaDesc}
-                                      </span>
-                                    </div>
-                                    <div
-                                      className="mb-1 font-semibold"
-                                      style={{ color: colors.text.primary }}
-                                    >
-                                      Example
-                                    </div>
-                                    <div
-                                      className="p-2 rounded whitespace-pre-wrap"
-                                      style={{
-                                        backgroundColor: colors.bg.secondary,
-                                        color: colors.text.primary,
-                                        lineHeight: "1.6",
-                                      }}
-                                    >
-                                      {current.example}
-                                    </div>
-                                    <div
-                                      className="mt-2 font-semibold"
-                                      style={{ color: current.directionColor }}
-                                    >
-                                      {current.direction}
-                                    </div>
-                                  </div>
-                                </div>
-                              );
-                            })()}
-                        </span>
-                      </th>
-                      <th
-                        className="text-left px-4 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "8%" }}
-                      >
-                        Is Correct
-                      </th>
-                      <th
-                        className="text-left px-4 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "27%" }}
-                      >
-                        Comment
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {results.map((result) => (
-                      <tr
-                        key={result.id}
-                        style={{ borderBottom: `1px solid ${colors.border}` }}
-                      >
-                        <td className="px-4 py-3 text-sm align-top">
-                          {result.signedUrl ? (
-                            <AudioPlayerFromUrl
-                              signedUrl={result.signedUrl}
-                              sampleName={result.sampleName}
-                              isPlaying={playingResultId === result.id}
-                              onPlayToggle={() =>
-                                setPlayingResultId(
-                                  playingResultId === result.id
-                                    ? null
-                                    : result.id,
-                                )
-                              }
-                            />
-                          ) : (
-                            <div
-                              className="font-medium"
-                              style={{ color: colors.text.primary }}
-                            >
-                              {result.sampleName || "-"}
-                            </div>
-                          )}
-                        </td>
-                        <td className="px-4 py-3 text-sm align-top">
-                          {(() => {
-                            const hasBoth =
-                              result.groundTruth && result.transcription;
-                            const segments = hasBoth
-                              ? computeWordDiff(
-                                  result.groundTruth,
-                                  result.transcription,
-                                )
-                              : [];
-                            const isExpanded = expandedTranscriptions.has(
-                              result.id,
-                            );
-                            return (
-                              <div>
-                                <div
-                                  className="grid grid-cols-2 rounded-md overflow-hidden border"
-                                  style={{
-                                    borderColor: colors.border,
-                                    fontFamily:
-                                      "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-                                    fontSize: "12px",
-                                  }}
-                                >
-                                  {/* Left Panel - Ground Truth */}
-                                  <div>
-                                    <div
-                                      className="px-2 py-1.5 text-xs font-semibold border-b"
-                                      style={{
-                                        backgroundColor: colors.bg.secondary,
-                                        borderColor: colors.border,
-                                        color: colors.text.secondary,
-                                      }}
-                                    >
-                                      Ground Truth
-                                    </div>
-                                    <div
-                                      className="px-3 py-2 leading-relaxed"
-                                      style={{
-                                        backgroundColor: colors.bg.primary,
-                                        ...(!isExpanded
-                                          ? {
-                                              display: "-webkit-box",
-                                              WebkitLineClamp: 3,
-                                              WebkitBoxOrient:
-                                                "vertical" as const,
-                                              overflow: "hidden",
-                                            }
-                                          : {}),
-                                      }}
-                                    >
-                                      {hasBoth ? (
-                                        segments.map((seg, idx) => {
-                                          if (seg.type === "insertion")
-                                            return null;
-                                          const word = seg.reference || "";
-                                          return (
-                                            <span key={idx}>
-                                              <span
-                                                className="px-0.5 rounded"
-                                                style={{
-                                                  backgroundColor:
-                                                    seg.type === "substitution"
-                                                      ? "#fef3c7"
-                                                      : seg.type === "deletion"
-                                                        ? "#fee2e2"
-                                                        : "transparent",
-                                                  textDecoration:
-                                                    seg.type === "deletion"
-                                                      ? "line-through"
-                                                      : "none",
-                                                  color:
-                                                    seg.type === "deletion"
-                                                      ? "#dc2626"
-                                                      : colors.text.primary,
-                                                }}
-                                                title={
-                                                  seg.type === "substitution"
-                                                    ? `→ "${seg.hypothesis}"`
-                                                    : undefined
-                                                }
-                                              >
-                                                {seg.type === "deletion" &&
-                                                  "- "}
-                                                {word}
-                                              </span>{" "}
-                                            </span>
-                                          );
-                                        })
-                                      ) : (
-                                        <span
-                                          style={{
-                                            color: colors.text.secondary,
-                                          }}
-                                        >
-                                          {result.groundTruth || "-"}
-                                        </span>
-                                      )}
-                                    </div>
-                                  </div>
-                                  {/* Right Panel - Transcription */}
-                                  <div
-                                    className="border-l"
-                                    style={{ borderColor: colors.border }}
-                                  >
-                                    <div
-                                      className="px-2 py-1.5 text-xs font-semibold border-b"
-                                      style={{
-                                        backgroundColor: colors.bg.secondary,
-                                        borderColor: colors.border,
-                                        color: colors.text.secondary,
-                                      }}
-                                    >
-                                      Transcription
-                                    </div>
-                                    <div
-                                      className="px-3 py-2 leading-relaxed"
-                                      style={{
-                                        backgroundColor: colors.bg.primary,
-                                        ...(!isExpanded
-                                          ? {
-                                              display: "-webkit-box",
-                                              WebkitLineClamp: 3,
-                                              WebkitBoxOrient:
-                                                "vertical" as const,
-                                              overflow: "hidden",
-                                            }
-                                          : {}),
-                                      }}
-                                    >
-                                      {hasBoth ? (
-                                        segments.map((seg, idx) => {
-                                          if (seg.type === "deletion") {
-                                            return (
-                                              <span key={idx}>
-                                                <span
-                                                  className="px-0.5 rounded"
-                                                  style={{
-                                                    backgroundColor: "#fee2e2",
-                                                    color: "#dc2626",
-                                                  }}
-                                                  title={`Missing: "${seg.reference}"`}
-                                                >
-                                                  ___
-                                                </span>{" "}
-                                              </span>
-                                            );
-                                          }
-                                          const word =
-                                            seg.hypothesis ||
-                                            seg.reference ||
-                                            "";
-                                          return (
-                                            <span key={idx}>
-                                              <span
-                                                className="px-0.5 rounded"
-                                                style={{
-                                                  backgroundColor:
-                                                    seg.type === "substitution"
-                                                      ? "#fef3c7"
-                                                      : seg.type === "insertion"
-                                                        ? "#dcfce7"
-                                                        : "transparent",
-                                                  color:
-                                                    seg.type === "insertion"
-                                                      ? "#16a34a"
-                                                      : colors.text.primary,
-                                                  fontWeight:
-                                                    seg.type === "insertion"
-                                                      ? 500
-                                                      : "normal",
-                                                }}
-                                                title={
-                                                  seg.type === "substitution"
-                                                    ? `Was: "${seg.reference}"`
-                                                    : seg.type === "insertion"
-                                                      ? "Inserted"
-                                                      : undefined
-                                                }
-                                              >
-                                                {seg.type === "insertion" &&
-                                                  "+ "}
-                                                {word}
-                                              </span>{" "}
-                                            </span>
-                                          );
-                                        })
-                                      ) : (
-                                        <span
-                                          style={{
-                                            color: colors.text.secondary,
-                                          }}
-                                        >
-                                          {result.transcription || "-"}
-                                        </span>
-                                      )}
-                                    </div>
-                                  </div>
-                                </div>
-                                {hasBoth &&
-                                  (result.groundTruth!.length > 100 ||
-                                    result.transcription!.length > 100) && (
-                                    <button
-                                      onClick={() =>
-                                        toggleTranscription(result.id)
-                                      }
-                                      className="text-xs mt-1.5"
-                                      style={{
-                                        color: colors.accent.primary,
-                                        cursor: "pointer",
-                                      }}
-                                    >
-                                      {isExpanded ? "Show less" : "Expand"}
-                                    </button>
-                                  )}
-                              </div>
-                            );
-                          })()}
-                        </td>
-                        <td className="px-4 py-3 text-xs align-top">
-                          {result.score ? (
-                            <div className="space-y-2">
-                              <div className="flex justify-between gap-2">
-                                <span style={{ color: colors.text.secondary }}>
-                                  Accuracy
-                                </span>
-                                <span
-                                  className="font-mono font-medium"
-                                  style={{
-                                    color:
-                                      result.score.wip >= 0.9
-                                        ? colors.status.success
-                                        : result.score.wip >= 0.7
-                                          ? "#ca8a04"
-                                          : colors.status.error,
-                                  }}
-                                >
-                                  {(result.score.wip * 100).toFixed(1)}%
-                                </span>
-                              </div>
-                              <div>
-                                <div
-                                  className="mb-1"
-                                  style={{
-                                    color: colors.text.secondary,
-                                    fontSize: "10px",
-                                    textTransform: "uppercase",
-                                    letterSpacing: "0.05em",
-                                  }}
-                                >
-                                  Errors
-                                </div>
-                                <div
-                                  className="space-y-1 pl-1"
-                                  style={{
-                                    borderLeft: `2px solid ${colors.border}`,
-                                  }}
-                                >
-                                  {[
-                                    { label: "WER", value: result.score.wer },
-                                    { label: "CER", value: result.score.cer },
-                                    {
-                                      label: "Lenient WER",
-                                      value: result.score.lenient_wer,
-                                    },
-                                  ].map(({ label, value }) => (
-                                    <div
-                                      key={label}
-                                      className="flex justify-between gap-2 pl-1.5"
-                                    >
-                                      <span
-                                        style={{ color: colors.text.secondary }}
-                                      >
-                                        {label}
-                                      </span>
-                                      <span
-                                        className="font-mono font-medium"
-                                        style={{
-                                          color:
-                                            value >= 0.8
-                                              ? colors.status.error
-                                              : value >= 0.4
-                                                ? "#ca8a04"
-                                                : colors.status.success,
-                                        }}
-                                      >
-                                        {(value * 100).toFixed(1)}%
-                                      </span>
-                                    </div>
-                                  ))}
-                                </div>
-                              </div>
-                            </div>
-                          ) : (
-                            <span style={{ color: colors.text.secondary }}>
-                              -
-                            </span>
-                          )}
-                        </td>
-                        <td className="px-4 py-3 text-sm align-top">
-                          <select
-                            value={
-                              result.is_correct === null
-                                ? ""
-                                : result.is_correct
-                                  ? "true"
-                                  : "false"
-                            }
-                            onChange={(e) => {
-                              const value = e.target.value;
-                              updateFeedback(
-                                result.id,
-                                value === "" ? null : value === "true",
-                              );
-                            }}
-                            className="px-3 py-1.5 border rounded text-xs font-medium"
-                            style={{
-                              backgroundColor:
-                                result.is_correct === null
-                                  ? colors.bg.primary
-                                  : result.is_correct
-                                    ? "rgba(22, 163, 74, 0.1)"
-                                    : "rgba(239, 68, 68, 0.1)",
-                              borderColor:
-                                result.is_correct === null
-                                  ? colors.border
-                                  : result.is_correct
-                                    ? colors.status.success
-                                    : colors.status.error,
-                              color:
-                                result.is_correct === null
-                                  ? colors.text.primary
-                                  : result.is_correct
-                                    ? colors.status.success
-                                    : colors.status.error,
-                              cursor: "pointer",
-                            }}
-                          >
-                            <option value="">-</option>
-                            <option value="true">Yes</option>
-                            <option value="false">No</option>
-                          </select>
-                        </td>
-                        <td className="px-4 py-3 text-sm align-top">
-                          <div className="flex items-start gap-2">
-                            <textarea
-                              value={result.comment || ""}
-                              onChange={(e) => {
-                                setResults((prev) =>
-                                  prev.map((r) =>
-                                    r.id === result.id
-                                      ? { ...r, comment: e.target.value }
-                                      : r,
-                                  ),
-                                );
-                              }}
-                              onBlur={(e) => {
-                                updateFeedback(
-                                  result.id,
-                                  result.is_correct!,
-                                  e.target.value,
-                                );
-                              }}
-                              placeholder="Add your comment..."
-                              rows={2}
-                              className="flex-1 px-3 py-2 border rounded text-sm"
-                              style={{
-                                backgroundColor: colors.bg.primary,
-                                borderColor: colors.border,
-                                color: colors.text.primary,
-                                resize: "vertical",
-                              }}
-                            />
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              )
-            ) : // Runs List View
-            isLoadingRuns ? (
-              <div className="p-16">
-                <Loader size="md" message="Loading evaluation runs..." />
-              </div>
-            ) : runs.length === 0 ? (
-              <div className="p-16 text-center">
-                <svg
-                  className="w-12 h-12 mx-auto mb-3"
-                  style={{ color: colors.border }}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-                  />
-                </svg>
-                <p
-                  className="text-sm font-medium mb-1"
-                  style={{ color: colors.text.primary }}
-                >
-                  No evaluation runs yet
-                </p>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>
-                  Run your first evaluation to get started
-                </p>
-              </div>
-            ) : (
-              (() => {
-                const filteredRuns =
-                  statusFilter === "all"
-                    ? runs
-                    : runs.filter(
-                        (r) => r.status.toLowerCase() === statusFilter,
-                      );
-                return filteredRuns.length > 0 ? (
-                  <div className="p-4 space-y-3">
-                    {filteredRuns.map((run) => {
-                      const isCompleted =
-                        run.status.toLowerCase() === "completed";
-                      const statusColor = getStatusColor(run.status);
-                      return (
-                        <div
-                          key={run.id}
-                          className={`rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-3 ${statusColor.border}`}
-                        >
-                          <div className="px-5 py-4">
-                            {/* Row 1: Run Name + Status */}
-                            <div className="flex items-start justify-between gap-4">
-                              <div className="min-w-0 flex-1">
-                                <div className="text-sm font-semibold truncate text-text-primary">
-                                  {run.run_name}
-                                </div>
-                                {/* Error message */}
-                                {run.error_message && (
-                                  <div className="mt-2 text-xs wrap-break-word overflow-hidden text-status-error-text">
-                                    {run.error_message}
-                                  </div>
-                                )}
-                              </div>
-                              <StatusBadge status={run.status} size="sm" />
-                            </div>
-
-                            {/* Row 2: Dataset + Models (left) | Actions (right) */}
-                            <div className="flex items-center justify-between gap-4 mt-3">
-                              <div
-                                className="flex items-center gap-3 text-xs"
-                                style={{ color: colors.text.secondary }}
-                              >
-                                <span className="flex items-center gap-1.5">
-                                  <svg
-                                    className="w-3.5 h-3.5 flex-shrink-0"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke="currentColor"
-                                    strokeWidth={2}
-                                  >
-                                    <path
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                      d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3"
-                                    />
-                                  </svg>
-                                  {run.dataset_name}
-                                </span>
-                                {run.models && run.models.length > 0 && (
-                                  <span
-                                    className="px-1.5 py-0.5 rounded"
-                                    style={{
-                                      backgroundColor: colors.bg.secondary,
-                                    }}
-                                  >
-                                    {run.models.join(", ")}
-                                  </span>
-                                )}
-                              </div>
-                              <button
-                                onClick={
-                                  isCompleted && loadingRunId === null
-                                    ? () => {
-                                        setLoadingRunId(run.id);
-                                        loadResults(run.id);
-                                      }
-                                    : undefined
-                                }
-                                disabled={!isCompleted || loadingRunId !== null}
-                                className="px-3 py-1.5 rounded-lg text-xs font-medium border flex-shrink-0 flex items-center gap-1.5"
-                                style={{
-                                  backgroundColor: "transparent",
-                                  borderColor: colors.border,
-                                  color: isCompleted
-                                    ? colors.text.primary
-                                    : colors.text.secondary,
-                                  cursor:
-                                    isCompleted && loadingRunId === null
-                                      ? "pointer"
-                                      : "not-allowed",
-                                  opacity:
-                                    isCompleted && loadingRunId === null
-                                      ? 1
-                                      : 0.5,
-                                }}
-                              >
-                                {loadingRunId === run.id && (
-                                  <div
-                                    className="w-3 h-3 border-2 border-t-transparent rounded-full animate-spin"
-                                    style={{
-                                      borderColor: colors.text.secondary,
-                                      borderTopColor: "transparent",
-                                    }}
-                                  />
-                                )}
-                                {loadingRunId === run.id
-                                  ? "Loading..."
-                                  : "View Results"}
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                ) : (
-                  <div className="p-16 text-center">
-                    <p
-                      className="text-sm font-medium mb-1"
-                      style={{ color: colors.text.primary }}
-                    >
-                      No {statusFilter} runs
-                    </p>
-                    <p
-                      className="text-xs"
-                      style={{ color: colors.text.secondary }}
-                    >
-                      No evaluation runs with status &quot;{statusFilter}&quot;
-                    </p>
-                  </div>
-                );
-              })()
-            )}
-          </div>
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/app/components/speech-to-text/RunSTTEvaluationForm.tsx b/app/components/speech-to-text/RunSTTEvaluationForm.tsx
new file mode 100644
index 00000000..0b5da0c8
--- /dev/null
+++ b/app/components/speech-to-text/RunSTTEvaluationForm.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { Dataset } from "@/app/lib/types/speechToText";
+import { Button, Field } from "@/app/components";
+import Select from "@/app/components/Select";
+import { CheckCircleIcon, PlayIcon } from "@/app/components/icons";
+import { LoaderBox } from "@/app/components/Loader";
+
+interface RunSTTEvaluationFormProps {
+  evaluationName: string;
+  setEvaluationName: (name: string) => void;
+  datasets: Dataset[];
+  isLoadingDatasets: boolean;
+  selectedDatasetId: number | null;
+  setSelectedDatasetId: (id: number | null) => void;
+  selectedDataset: Dataset | undefined;
+  selectedModel: string;
+  setSelectedModel: (model: string) => void;
+  isRunning: boolean;
+  handleRunEvaluation: () => void;
+}
+
+export default function RunSTTEvaluationForm({
+  evaluationName,
+  setEvaluationName,
+  datasets,
+  isLoadingDatasets,
+  selectedDatasetId,
+  setSelectedDatasetId,
+  selectedDataset,
+  selectedModel,
+  setSelectedModel,
+  isRunning,
+  handleRunEvaluation,
+}: RunSTTEvaluationFormProps) {
+  const isRunDisabled =
+    isRunning || !evaluationName.trim() || !selectedDatasetId;
+
+  return (
+    <div className="flex-1 overflow-auto p-4 space-y-4">
+      <div>
+        <h2 className="text-base font-semibold text-text-primary">
+          Run New Evaluation
+        </h2>
+        <p className="text-xs mt-0.5 text-text-secondary">
+          Compare transcription quality across STT models
+        </p>
+      </div>
+
+      <Field
+        label="Name *"
+        value={evaluationName}
+        onChange={setEvaluationName}
+        placeholder="e.g., English Podcast Evaluation v1"
+      />
+
+      <div>
+        <label className="block text-xs font-medium mb-1.5 text-text-secondary">
+          Model *
+        </label>
+        <Select
+          value={selectedModel}
+          onChange={(e) => setSelectedModel(e.target.value)}
+          options={[{ value: "gemini-2.5-pro", label: "gemini-2.5-pro" }]}
+        />
+      </div>
+
+      <div className="pt-2">
+        <label className="block text-xs font-medium mb-1.5 text-text-secondary">
+          Select Dataset *
+        </label>
+        {isLoadingDatasets ? (
+          <LoaderBox message="Loading datasets..." size="sm" />
+        ) : datasets.length === 0 ? (
+          <div className="border rounded-md p-8 text-center border-border">
+            <p className="text-sm text-text-secondary">No datasets available</p>
+            <p className="text-xs mt-1 text-text-secondary">
+              Create a dataset first in the Datasets tab
+            </p>
+          </div>
+        ) : (
+          <Select
+            value={selectedDatasetId || ""}
+            onChange={(e) =>
+              setSelectedDatasetId(
+                e.target.value ? parseInt(e.target.value) : null,
+              )
+            }
+            placeholder="-- Select a dataset --"
+            options={datasets.map((dataset) => ({
+              value: String(dataset.id),
+              label: `${dataset.name} (${dataset.dataset_metadata?.sample_count || 0} samples)`,
+            }))}
+          />
+        )}
+      </div>
+
+      {selectedDataset && (
+        <div className="border rounded-lg p-3 border-status-success bg-green-600/2">
+          <div className="flex items-start gap-2">
+            <CheckCircleIcon className="w-5 h-5 shrink-0 mt-0.5 text-status-success" />
+            <div className="flex-1">
+              <div className="text-sm font-medium text-text-primary">
+                {selectedDataset.name}
+              </div>
+              <div className="text-xs mt-1 space-y-0.5 text-text-secondary">
+                <div>
+                  {selectedDataset.dataset_metadata?.sample_count || 0} samples
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="pt-2">
+        <Button
+          variant="primary"
+          size="lg"
+          fullWidth
+          onClick={handleRunEvaluation}
+          disabled={isRunDisabled}
+        >
+          {isRunning ? (
+            <>
+              <div className="w-4 h-4 border-2 border-text-secondary border-t-transparent rounded-full animate-spin" />
+              Starting Evaluation...
+            </>
+          ) : (
+            <>
+              <PlayIcon className="w-5 h-5" />
+              Run Evaluation
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/STTDatasetCard.tsx b/app/components/speech-to-text/STTDatasetCard.tsx
new file mode 100644
index 00000000..d5c344d2
--- /dev/null
+++ b/app/components/speech-to-text/STTDatasetCard.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { Dataset } from "@/app/lib/types/speechToText";
+import { Button } from "@/app/components";
+import DatasetDescription from "./DatasetDescription";
+
+interface STTDatasetCardProps {
+  dataset: Dataset;
+  isViewing: boolean;
+  onView: () => void;
+}
+
+export default function STTDatasetCard({
+  dataset,
+  isViewing,
+  onView,
+}: STTDatasetCardProps) {
+  return (
+    <div className="rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-[3px] border-l-accent-primary/50">
+      <div className="px-5 py-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-semibold truncate text-text-primary">
+              {dataset.name}
+            </div>
+            {dataset.description && (
+              <DatasetDescription description={dataset.description} />
+            )}
+            {dataset.dataset_metadata?.sample_count !== undefined && (
+              <div className="mt-2 text-xs text-text-secondary">
+                {dataset.dataset_metadata.sample_count} samples
+              </div>
+            )}
+          </div>
+          <div className="flex items-center gap-2 shrink-0">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onView}
+              disabled={isViewing}
+            >
+              {isViewing ? "Loading..." : "View"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/STTResultRow.tsx b/app/components/speech-to-text/STTResultRow.tsx
new file mode 100644
index 00000000..272938a7
--- /dev/null
+++ b/app/components/speech-to-text/STTResultRow.tsx
@@ -0,0 +1,264 @@
+"use client";
+
+import { STTResult } from "@/app/lib/types/speechToText";
+import AudioPlayerFromUrl from "./AudioPlayerFromUrl";
+import { computeWordDiff } from "./TranscriptionDiffViewer";
+
+interface STTResultRowProps {
+  result: STTResult;
+  isExpanded: boolean;
+  isPlaying: boolean;
+  onPlayToggle: () => void;
+  onToggleExpanded: () => void;
+  onLocalCommentChange: (value: string) => void;
+  onCommitFeedback: (
+    isCorrect: boolean | null | undefined,
+    comment?: string,
+  ) => void;
+}
+
+const wipColorClass = (wip: number): string => {
+  if (wip >= 0.9) return "text-status-success";
+  if (wip >= 0.7) return "text-yellow-600";
+  return "text-status-error";
+};
+
+const errorColorClass = (value: number): string => {
+  if (value >= 0.8) return "text-status-error";
+  if (value >= 0.4) return "text-yellow-600";
+  return "text-status-success";
+};
+
+export default function STTResultRow({
+  result,
+  isExpanded,
+  isPlaying,
+  onPlayToggle,
+  onToggleExpanded,
+  onLocalCommentChange,
+  onCommitFeedback,
+}: STTResultRowProps) {
+  const hasBoth = !!(result.groundTruth && result.transcription);
+  const segments = hasBoth
+    ? computeWordDiff(result.groundTruth, result.transcription)
+    : [];
+
+  const showExpandToggle =
+    hasBoth &&
+    (result.groundTruth!.length > 100 || result.transcription!.length > 100);
+
+  const clampClass = isExpanded
+    ? ""
+    : "[display:-webkit-box] [-webkit-line-clamp:3] [-webkit-box-orient:vertical] overflow-hidden";
+
+  const isCorrectValue =
+    result.is_correct === null ? "" : result.is_correct ? "true" : "false";
+
+  return (
+    <tr className="border-b border-border">
+      <td className="px-4 py-3 text-sm align-top">
+        {result.signedUrl ? (
+          <AudioPlayerFromUrl
+            signedUrl={result.signedUrl}
+            sampleName={result.sampleName}
+            isPlaying={isPlaying}
+            onPlayToggle={onPlayToggle}
+          />
+        ) : (
+          <div className="font-medium text-text-primary">
+            {result.sampleName || "-"}
+          </div>
+        )}
+      </td>
+      <td className="px-4 py-3 text-sm align-top">
+        <div>
+          <div className="grid grid-cols-2 rounded-md overflow-hidden border border-border font-mono text-[12px]">
+            <div>
+              <div className="px-2 py-1.5 text-xs font-semibold border-b bg-bg-secondary border-border text-text-secondary">
+                Ground Truth
+              </div>
+              <div
+                className={`px-3 py-2 leading-relaxed bg-bg-primary ${clampClass}`}
+              >
+                {hasBoth ? (
+                  segments.map((seg, idx) => {
+                    if (seg.type === "insertion") return null;
+                    const word = seg.reference || "";
+                    const bgClass =
+                      seg.type === "substitution"
+                        ? "bg-amber-100"
+                        : seg.type === "deletion"
+                          ? "bg-red-100"
+                          : "bg-transparent";
+                    const colorClass =
+                      seg.type === "deletion"
+                        ? "text-red-600 line-through"
+                        : "text-text-primary";
+                    return (
+                      <span key={idx}>
+                        <span
+                          className={`px-0.5 rounded ${bgClass} ${colorClass}`}
+                          title={
+                            seg.type === "substitution"
+                              ? `→ "${seg.hypothesis}"`
+                              : undefined
+                          }
+                        >
+                          {seg.type === "deletion" && "- "}
+                          {word}
+                        </span>{" "}
+                      </span>
+                    );
+                  })
+                ) : (
+                  <span className="text-text-secondary">
+                    {result.groundTruth || "-"}
+                  </span>
+                )}
+              </div>
+            </div>
+            <div className="border-l border-border">
+              <div className="px-2 py-1.5 text-xs font-semibold border-b bg-bg-secondary border-border text-text-secondary">
+                Transcription
+              </div>
+              <div
+                className={`px-3 py-2 leading-relaxed bg-bg-primary ${clampClass}`}
+              >
+                {hasBoth ? (
+                  segments.map((seg, idx) => {
+                    if (seg.type === "deletion") {
+                      return (
+                        <span key={idx}>
+                          <span
+                            className="px-0.5 rounded bg-red-100 text-red-600"
+                            title={`Missing: "${seg.reference}"`}
+                          >
+                            ___
+                          </span>{" "}
+                        </span>
+                      );
+                    }
+                    const word = seg.hypothesis || seg.reference || "";
+                    const bgClass =
+                      seg.type === "substitution"
+                        ? "bg-amber-100"
+                        : seg.type === "insertion"
+                          ? "bg-green-100"
+                          : "bg-transparent";
+                    const colorClass =
+                      seg.type === "insertion"
+                        ? "text-green-600 font-medium"
+                        : "text-text-primary";
+                    return (
+                      <span key={idx}>
+                        <span
+                          className={`px-0.5 rounded ${bgClass} ${colorClass}`}
+                          title={
+                            seg.type === "substitution"
+                              ? `Was: "${seg.reference}"`
+                              : seg.type === "insertion"
+                                ? "Inserted"
+                                : undefined
+                          }
+                        >
+                          {seg.type === "insertion" && "+ "}
+                          {word}
+                        </span>{" "}
+                      </span>
+                    );
+                  })
+                ) : (
+                  <span className="text-text-secondary">
+                    {result.transcription || "-"}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+          {showExpandToggle && (
+            <button
+              onClick={onToggleExpanded}
+              className="text-xs mt-1.5 text-accent-primary cursor-pointer"
+            >
+              {isExpanded ? "Show less" : "Expand"}
+            </button>
+          )}
+        </div>
+      </td>
+      <td className="px-4 py-3 text-xs align-top">
+        {result.score ? (
+          <div className="space-y-2">
+            <div className="flex justify-between gap-2">
+              <span className="text-text-secondary">Accuracy</span>
+              <span
+                className={`font-mono font-medium ${wipColorClass(result.score.wip)}`}
+              >
+                {(result.score.wip * 100).toFixed(1)}%
+              </span>
+            </div>
+            <div>
+              <div className="mb-1 text-text-secondary text-[10px] uppercase tracking-wide">
+                Errors
+              </div>
+              <div className="space-y-1 pl-1 border-l-2 border-border">
+                {[
+                  { label: "WER", value: result.score.wer },
+                  { label: "CER", value: result.score.cer },
+                  { label: "Lenient WER", value: result.score.lenient_wer },
+                ].map(({ label, value }) => (
+                  <div
+                    key={label}
+                    className="flex justify-between gap-2 pl-1.5"
+                  >
+                    <span className="text-text-secondary">{label}</span>
+                    <span
+                      className={`font-mono font-medium ${errorColorClass(value)}`}
+                    >
+                      {(value * 100).toFixed(1)}%
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <span className="text-text-secondary">-</span>
+        )}
+      </td>
+      <td className="px-4 py-3 text-sm align-top">
+        <select
+          value={isCorrectValue}
+          onChange={(e) => {
+            const value = e.target.value;
+            onCommitFeedback(value === "" ? null : value === "true");
+          }}
+          className={`px-3 py-1.5 border rounded text-xs font-medium cursor-pointer ${
+            result.is_correct === null
+              ? "bg-bg-primary border-border text-text-primary"
+              : result.is_correct
+                ? "bg-green-600/10 border-status-success text-status-success"
+                : "bg-red-500/10 border-status-error text-status-error"
+          }`}
+        >
+          <option value="">-</option>
+          <option value="true">Yes</option>
+          <option value="false">No</option>
+        </select>
+      </td>
+      <td className="px-4 py-3 text-sm align-top">
+        <div className="flex items-start gap-2">
+          <textarea
+            value={result.comment || ""}
+            onChange={(e) => onLocalCommentChange(e.target.value)}
+            onBlur={(e) =>
+              onCommitFeedback(result.is_correct ?? null, e.target.value)
+            }
+            placeholder="Add your comment..."
+            rows={2}
+            className="flex-1 px-3 py-2 border rounded text-sm resize-y bg-bg-primary border-border text-text-primary"
+          />
+        </div>
+      </td>
+    </tr>
+  );
+}
diff --git a/app/components/speech-to-text/STTResultsTable.tsx b/app/components/speech-to-text/STTResultsTable.tsx
new file mode 100644
index 00000000..db04a48e
--- /dev/null
+++ b/app/components/speech-to-text/STTResultsTable.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { STTResult } from "@/app/lib/types/speechToText";
+import { ResultsTableSkeleton } from "@/app/components";
+import STTResultRow from "./STTResultRow";
+import STTScoreInfoTooltip from "./STTScoreInfoTooltip";
+
+interface STTResultsTableProps {
+  results: STTResult[];
+  isLoading: boolean;
+  setResults: React.Dispatch<React.SetStateAction<STTResult[]>>;
+  onUpdateFeedback: (
+    resultId: number,
+    isCorrect: boolean | null | undefined,
+    comment?: string,
+  ) => void;
+}
+
+export default function STTResultsTable({
+  results,
+  isLoading,
+  setResults,
+  onUpdateFeedback,
+}: STTResultsTableProps) {
+  const [expandedTranscriptions, setExpandedTranscriptions] = useState<
+    Set<number>
+  >(new Set());
+  const [openScoreInfo, setOpenScoreInfo] = useState<string | null>(null);
+  const [scoreInfoPos, setScoreInfoPos] = useState({ top: 0, left: 0 });
+  const [playingResultId, setPlayingResultId] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!openScoreInfo) return;
+    const handleClick = () => setOpenScoreInfo(null);
+    const handleScroll = () => setOpenScoreInfo(null);
+    document.addEventListener("click", handleClick);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("click", handleClick);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [openScoreInfo]);
+
+  const toggleTranscription = (resultId: number) => {
+    setExpandedTranscriptions((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(resultId)) {
+        newSet.delete(resultId);
+      } else {
+        newSet.add(resultId);
+      }
+      return newSet;
+    });
+  };
+
+  const handleScoreInfoClick = (e: React.MouseEvent<HTMLSpanElement>) => {
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    setScoreInfoPos({ top: rect.bottom + 4, left: rect.left });
+    setOpenScoreInfo(openScoreInfo ? null : "accuracy");
+  };
+
+  if (isLoading) {
+    return <ResultsTableSkeleton rows={5} cols={5} />;
+  }
+
+  if (results.length === 0) {
+    return (
+      <div className="p-16 text-center">
+        <p className="text-sm font-medium mb-1 text-text-primary">
+          No results found
+        </p>
+        <p className="text-xs text-text-secondary">
+          This evaluation has no results yet
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <table className="w-full">
+      <thead>
+        <tr className="bg-bg-secondary border-b border-border">
+          <th className="text-left px-4 py-3 text-xs font-medium align-top text-text-secondary w-[10%]">
+            Sample
+          </th>
+          <th className="text-left px-4 py-3 text-xs font-medium align-top text-text-secondary w-[40%]">
+            <div>
+              <div>Ground Truth vs Transcription</div>
+              <div className="flex items-center gap-2 font-normal mt-1">
+                <span className="inline-flex items-center gap-1">
+                  <span className="inline-block w-2 h-2 rounded bg-red-100" />
+                  <span className="text-text-secondary">Deletion</span>
+                </span>
+                <span className="inline-flex items-center gap-1">
+                  <span className="inline-block w-2 h-2 rounded bg-green-100" />
+                  <span className="text-text-secondary">Insertion</span>
+                </span>
+                <span className="inline-flex items-center gap-1">
+                  <span className="inline-block w-2 h-2 rounded bg-amber-100" />
+                  <span className="text-text-secondary">Substitution</span>
+                </span>
+              </div>
+            </div>
+          </th>
+          <th className="text-left px-4 py-3 text-xs font-medium align-top text-text-secondary w-[15%]">
+            <span className="inline-flex items-center gap-1">
+              Score
+              <span
+                onClick={handleScoreInfoClick}
+                className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer shrink-0 bg-bg-primary border border-border text-text-secondary"
+              >
+                i
+              </span>
+              {openScoreInfo && (
+                <STTScoreInfoTooltip
+                  activeKey={openScoreInfo}
+                  position={scoreInfoPos}
+                  onSelectKey={setOpenScoreInfo}
+                />
+              )}
+            </span>
+          </th>
+          <th className="text-left px-4 py-3 text-xs font-medium align-top text-text-secondary w-[8%]">
+            Is Correct
+          </th>
+          <th className="text-left px-4 py-3 text-xs font-medium align-top text-text-secondary w-[27%]">
+            Comment
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {results.map((result) => (
+          <STTResultRow
+            key={result.id}
+            result={result}
+            isExpanded={expandedTranscriptions.has(result.id)}
+            isPlaying={playingResultId === result.id}
+            onPlayToggle={() =>
+              setPlayingResultId(
+                playingResultId === result.id ? null : result.id,
+              )
+            }
+            onToggleExpanded={() => toggleTranscription(result.id)}
+            onLocalCommentChange={(value) =>
+              setResults((prev) =>
+                prev.map((r) =>
+                  r.id === result.id ? { ...r, comment: value } : r,
+                ),
+              )
+            }
+            onCommitFeedback={(isCorrect, comment) =>
+              onUpdateFeedback(result.id, isCorrect, comment)
+            }
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/app/components/speech-to-text/STTRunCard.tsx b/app/components/speech-to-text/STTRunCard.tsx
new file mode 100644
index 00000000..0a8ead9c
--- /dev/null
+++ b/app/components/speech-to-text/STTRunCard.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { STTRun } from "@/app/lib/types/speechToText";
+import { Button } from "@/app/components";
+import { DatabaseIcon } from "@/app/components/icons";
+import { getStatusColor } from "@/app/components/utils";
+
+interface STTRunCardProps {
+  run: STTRun;
+  loadingRunId: number | null;
+  onLoadResults: () => void;
+}
+
+export default function STTRunCard({
+  run,
+  loadingRunId,
+  onLoadResults,
+}: STTRunCardProps) {
+  const isCompleted = run.status.toLowerCase() === "completed";
+  const statusColor = getStatusColor(run.status);
+  const isLoading = loadingRunId === run.id;
+  const disabled = !isCompleted || loadingRunId !== null;
+
+  return (
+    <div
+      className={`rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-3 ${statusColor.border}`}
+    >
+      <div className="px-5 py-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-semibold truncate text-text-primary">
+              {run.run_name}
+            </div>
+            {run.error_message && (
+              <div className="mt-2 text-xs wrap-break-word overflow-hidden text-status-error-text">
+                {run.error_message}
+              </div>
+            )}
+          </div>
+          <div
+            className={`px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide shrink-0 ${statusColor.bg} ${statusColor.text}`}
+          >
+            {run.status.toUpperCase()}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between gap-4 mt-3">
+          <div className="flex items-center gap-3 text-xs text-text-secondary">
+            <span className="flex items-center gap-1.5">
+              <DatabaseIcon className="w-3.5 h-3.5 shrink-0" />
+              {run.dataset_name}
+            </span>
+            {run.models && run.models.length > 0 && (
+              <span className="px-1.5 py-0.5 rounded bg-bg-secondary">
+                {run.models.join(", ")}
+              </span>
+            )}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={
+              isCompleted && loadingRunId === null ? onLoadResults : undefined
+            }
+            disabled={disabled}
+            className="shrink-0"
+          >
+            {isLoading && (
+              <div className="w-3 h-3 border-2 border-text-secondary border-t-transparent rounded-full animate-spin" />
+            )}
+            {isLoading ? "Loading..." : "View Results"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/STTRunsList.tsx b/app/components/speech-to-text/STTRunsList.tsx
new file mode 100644
index 00000000..617a6839
--- /dev/null
+++ b/app/components/speech-to-text/STTRunsList.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { STTRun, STTResult } from "@/app/lib/types/speechToText";
+import {
+  ChevronLeftIcon,
+  ClipboardIcon,
+  RefreshIcon,
+} from "@/app/components/icons";
+import { RunsListSkeleton } from "@/app/components";
+import STTRunCard from "./STTRunCard";
+import STTResultsTable from "./STTResultsTable";
+
+interface STTRunsListProps {
+  runs: STTRun[];
+  isLoadingRuns: boolean;
+  loadRuns: () => void;
+  selectedRunId: number | null;
+  setSelectedRunId: (id: number | null) => void;
+  results: STTResult[];
+  setResults: React.Dispatch<React.SetStateAction<STTResult[]>>;
+  isLoadingResults: boolean;
+  loadResults: (runId: number) => void;
+  onUpdateFeedback: (
+    resultId: number,
+    isCorrect: boolean | null | undefined,
+    comment?: string,
+  ) => void;
+}
+
+export default function STTRunsList({
+  runs,
+  isLoadingRuns,
+  loadRuns,
+  selectedRunId,
+  setSelectedRunId,
+  results,
+  setResults,
+  isLoadingResults,
+  loadResults,
+  onUpdateFeedback,
+}: STTRunsListProps) {
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [loadingRunId, setLoadingRunId] = useState<number | null>(null);
+
+  useEffect(() => {
+    setLoadingRunId(null);
+  }, [selectedRunId]);
+
+  const selectedRun = runs.find((r) => r.id === selectedRunId);
+
+  const filteredRuns =
+    statusFilter === "all"
+      ? runs
+      : runs.filter((r) => r.status.toLowerCase() === statusFilter);
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden bg-bg-secondary">
+      <div className="flex-1 overflow-auto p-4">
+        <div className="mb-3 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {selectedRunId !== null ? (
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => {
+                    setSelectedRunId(null);
+                    setLoadingRunId(null);
+                  }}
+                  className="p-1 rounded text-text-secondary cursor-pointer"
+                  aria-label="Back to runs list"
+                >
+                  <ChevronLeftIcon className="w-4 h-4" />
+                </button>
+                <h2 className="text-base font-semibold text-text-primary">
+                  {selectedRun?.run_name}
+                </h2>
+              </div>
+            ) : (
+              <h2 className="text-base font-semibold text-text-primary">
+                Evaluation Runs
+              </h2>
+            )}
+          </div>
+          {selectedRunId === null && (
+            <div className="flex items-center gap-2">
+              <select
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value)}
+                className="px-2.5 py-1 rounded-md text-xs font-medium border appearance-none cursor-pointer pr-7 bg-bg-primary border-border text-text-primary bg-no-repeat bg-position-[right_6px_center] bg-[url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2712%27%20height=%2712%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23737373%27%20stroke-width=%272%27%3E%3Cpath%20d=%27M6%209l6%206%206-6%27/%3E%3C/svg%3E')]"
+              >
+                <option value="all">All Status</option>
+                <option value="completed">Completed</option>
+                <option value="processing">Processing</option>
+                <option value="pending">Pending</option>
+                <option value="failed">Failed</option>
+              </select>
+              <button
+                onClick={loadRuns}
+                disabled={isLoadingRuns}
+                className="p-1.5 rounded text-text-secondary cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+                aria-label="Refresh runs"
+              >
+                <RefreshIcon
+                  className={`w-4 h-4 -scale-x-100 ${isLoadingRuns ? "animate-spin" : ""}`}
+                />
+              </button>
+            </div>
+          )}
+        </div>
+
+        <div className="rounded-lg overflow-visible bg-bg-primary shadow-sm">
+          {selectedRunId !== null ? (
+            <STTResultsTable
+              results={results}
+              isLoading={isLoadingResults}
+              setResults={setResults}
+              onUpdateFeedback={onUpdateFeedback}
+            />
+          ) : isLoadingRuns ? (
+            <RunsListSkeleton />
+          ) : runs.length === 0 ? (
+            <div className="p-16 text-center">
+              <ClipboardIcon className="w-12 h-12 mx-auto mb-3 text-border" />
+              <p className="text-sm font-medium mb-1 text-text-primary">
+                No evaluation runs yet
+              </p>
+              <p className="text-xs text-text-secondary">
+                Run your first evaluation to get started
+              </p>
+            </div>
+          ) : filteredRuns.length === 0 ? (
+            <div className="p-16 text-center">
+              <p className="text-sm font-medium mb-1 text-text-primary">
+                No {statusFilter} runs
+              </p>
+              <p className="text-xs text-text-secondary">
+                No evaluation runs with status &quot;{statusFilter}&quot;
+              </p>
+            </div>
+          ) : (
+            <div className="p-4 space-y-3">
+              {filteredRuns.map((run) => (
+                <STTRunCard
+                  key={run.id}
+                  run={run}
+                  loadingRunId={loadingRunId}
+                  onLoadResults={() => {
+                    setLoadingRunId(run.id);
+                    loadResults(run.id);
+                  }}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/STTScoreInfoTooltip.tsx b/app/components/speech-to-text/STTScoreInfoTooltip.tsx
new file mode 100644
index 00000000..8e4c174d
--- /dev/null
+++ b/app/components/speech-to-text/STTScoreInfoTooltip.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+interface ScoreInfoMetric {
+  key: string;
+  title: string;
+  desc: string;
+  formula: string;
+  formulaDesc: string;
+  example: string;
+  direction: string;
+  directionClass: string;
+  shortLabel: string;
+}
+
+const METRICS: ScoreInfoMetric[] = [
+  {
+    key: "accuracy",
+    title: "Accuracy (Word Information Preserved)",
+    desc: "Measures how much of the original information was correctly captured.",
+    formula: "WIP = (C / N) × (C / H)",
+    formulaDesc:
+      "C = correct words\nN = total words in reference\nH = total words in hypothesis",
+    example: `Reference:  "the cat sat on the mat" (N=6)\nHypothesis: "a cat sit on mat" (H=5)\nC = 3 (cat, on, mat)\n\nWIP = (3/6) × (3/5)\n    = 0.5 × 0.6 = 0.30 = 30%`,
+    direction: "Higher is better.",
+    directionClass: "text-status-success",
+    shortLabel: "Accuracy",
+  },
+  {
+    key: "wer",
+    title: "WER (Word Error Rate)",
+    desc: "The most widely used metric in STT evaluation.",
+    formula: "WER = (S + D + I) / N",
+    formulaDesc:
+      "S = substitutions, D = deletions\nI = insertions, N = total words in reference",
+    example: `Reference:  "the cat sat on the mat" (N=6)\nHypothesis: "a cat sit on mat"\n\nthe → a    (Substitution)\ncat → cat  (Correct)\nsat → sit  (Substitution)\non  → on   (Correct)\nthe → ∅    (Deletion)\nmat → mat  (Correct)\n\nS=2, D=1, I=0\nWER = (2+1+0) / 6 = 0.50 = 50%`,
+    direction: "Lower is better.",
+    directionClass: "text-status-error",
+    shortLabel: "WER",
+  },
+  {
+    key: "cer",
+    title: "CER (Character Error Rate)",
+    desc: "Same concept as WER but at the character level — more granular, catches partial word errors.",
+    formula: "CER = (S + D + I) / N",
+    formulaDesc:
+      "S, D, I = character-level errors\nN = total characters in reference",
+    example: `Reference:  "the cat sat" (N=11 chars)\nHypothesis: "the bat set"\n\nt → t  (Correct)\nh → h  (Correct)\ne → e  (Correct)\n· → ·  (Correct)\nc → b  (Substitution)\na → a  (Correct)\nt → t  (Correct)\n· → ·  (Correct)\ns → s  (Correct)\na → e  (Substitution)\nt → t  (Correct)\n\nS=2, D=0, I=0\nCER = 2/11 = 0.18 = 18%`,
+    direction: "Lower is better.",
+    directionClass: "text-status-error",
+    shortLabel: "CER",
+  },
+  {
+    key: "lenient_wer",
+    title: "Lenient WER",
+    desc: "Same as WER but ignores differences in casing and punctuation — useful when exact formatting doesn't matter.",
+    formula: "Same as WER after normalizing text",
+    formulaDesc: "Normalization: lowercase + remove punctuation",
+    example: `Reference:  "Hello, World!"\nHypothesis: "hello world"\n\nAfter normalization:\n"hello world" vs "hello world"\n→ exact match\n\nLenient WER = 0%\n(strict WER would be higher)`,
+    direction: "Lower is better.",
+    directionClass: "text-status-error",
+    shortLabel: "Lenient WER",
+  },
+];
+
+interface STTScoreInfoTooltipProps {
+  activeKey: string;
+  position: { top: number; left: number };
+  onSelectKey: (key: string) => void;
+}
+
+export default function STTScoreInfoTooltip({
+  activeKey,
+  position,
+  onSelectKey,
+}: STTScoreInfoTooltipProps) {
+  const current = METRICS.find((m) => m.key === activeKey) ?? METRICS[0];
+
+  return (
+    <div
+      className="fixed z-50 rounded-lg shadow-lg border text-xs bg-bg-primary border-border w-[370px]"
+      style={{ top: position.top, left: position.left }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="flex border-b border-border">
+        {METRICS.map((m) => (
+          <button
+            key={m.key}
+            onClick={() => onSelectKey(m.key)}
+            className={`flex-1 px-2 py-2 text-xs font-medium bg-transparent cursor-pointer border-b-2 ${
+              activeKey === m.key
+                ? "text-accent-primary border-accent-primary"
+                : "text-text-secondary border-transparent"
+            }`}
+          >
+            {m.shortLabel}
+          </button>
+        ))}
+      </div>
+      <div className="p-3 font-mono">
+        <div className="font-semibold mb-2 text-text-primary">
+          {current.title}
+        </div>
+        <p className="mb-2 text-text-secondary font-sans">{current.desc}</p>
+        <div className="mb-1 font-semibold text-text-primary">Formula</div>
+        <div className="mb-2 p-2 rounded whitespace-pre-wrap bg-bg-secondary text-text-primary">
+          {current.formula}
+          {"\n"}
+          <span className="text-text-secondary">{current.formulaDesc}</span>
+        </div>
+        <div className="mb-1 font-semibold text-text-primary">Example</div>
+        <div className="p-2 rounded whitespace-pre-wrap bg-bg-secondary text-text-primary leading-relaxed">
+          {current.example}
+        </div>
+        <div className={`mt-2 font-semibold ${current.directionClass}`}>
+          {current.direction}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/STTViewDatasetModal.tsx b/app/components/speech-to-text/STTViewDatasetModal.tsx
new file mode 100644
index 00000000..32f768f2
--- /dev/null
+++ b/app/components/speech-to-text/STTViewDatasetModal.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Language,
+  STTViewDatasetModalData,
+} from "@/app/lib/types/speechToText";
+import { Modal } from "@/app/components";
+import AudioPlayerFromUrl from "./AudioPlayerFromUrl";
+
+interface STTViewDatasetModalProps {
+  data: STTViewDatasetModalData;
+  languages: Language[];
+  savingSampleId: number | null;
+  onClose: () => void;
+  onUpdateSample: (
+    sampleId: number,
+    field: "ground_truth" | "language_id",
+    value: string | number,
+  ) => void;
+  onLocalGroundTruthChange: (sampleId: number, value: string) => void;
+}
+
+export default function STTViewDatasetModal({
+  data,
+  languages,
+  savingSampleId,
+  onClose,
+  onUpdateSample,
+  onLocalGroundTruthChange,
+}: STTViewDatasetModalProps) {
+  const [viewPlayingId, setViewPlayingId] = useState<number | null>(null);
+
+  const handleClose = () => {
+    setViewPlayingId(null);
+    onClose();
+  };
+
+  return (
+    <Modal
+      open
+      onClose={handleClose}
+      title={data.name}
+      maxWidth="max-w-[900px]"
+      maxHeight="max-h-[85vh]"
+    >
+      <div className="sticky top-0 bg-bg-primary border-b border-border px-6 py-3 z-10">
+        <p className="text-xs text-text-secondary">
+          {data.samples.length} audio samples
+        </p>
+      </div>
+
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="bg-bg-secondary border-b border-border">
+            <th className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-11 text-text-secondary bg-bg-secondary w-10" />
+            <th className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-11 text-text-secondary bg-bg-secondary">
+              Sample
+            </th>
+            <th className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-11 text-text-secondary bg-bg-secondary w-[120px]">
+              Language
+            </th>
+            <th className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-11 text-text-secondary bg-bg-secondary">
+              Ground Truth
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.samples.map((sample, idx) => {
+            const isSaving = savingSampleId === sample.id;
+            return (
+              <tr key={sample.id} className="border-b border-border">
+                <td className="px-4 py-3 text-xs align-top text-text-secondary">
+                  {idx + 1}
+                </td>
+                <td className="px-4 py-3 align-top">
+                  <div className="space-y-1.5">
+                    {sample.sample_metadata?.original_filename && (
+                      <div className="text-xs font-medium truncate text-text-primary max-w-[280px]">
+                        {sample.sample_metadata.original_filename}
+                      </div>
+                    )}
+                    {sample.signed_url ? (
+                      <AudioPlayerFromUrl
+                        signedUrl={sample.signed_url}
+                        isPlaying={viewPlayingId === sample.id}
+                        onPlayToggle={() =>
+                          setViewPlayingId(
+                            viewPlayingId === sample.id ? null : sample.id,
+                          )
+                        }
+                      />
+                    ) : (
+                      <span className="text-xs text-text-secondary">
+                        No audio
+                      </span>
+                    )}
+                  </div>
+                </td>
+                <td className="px-4 py-3 align-top">
+                  <select
+                    value={sample.language_id ?? ""}
+                    onChange={(e) =>
+                      onUpdateSample(
+                        sample.id,
+                        "language_id",
+                        Number(e.target.value),
+                      )
+                    }
+                    disabled={isSaving}
+                    className={`w-full px-2 py-1.5 border rounded-md text-xs bg-bg-primary border-border text-text-primary ${
+                      isSaving
+                        ? "opacity-50 cursor-not-allowed"
+                        : "cursor-pointer"
+                    }`}
+                  >
+                    {languages.map((lang) => (
+                      <option key={lang.id} value={lang.id}>
+                        {lang.name}
+                      </option>
+                    ))}
+                  </select>
+                </td>
+                <td className="px-4 py-3 align-top">
+                  <textarea
+                    value={sample.ground_truth || ""}
+                    onChange={(e) =>
+                      onLocalGroundTruthChange(sample.id, e.target.value)
+                    }
+                    onBlur={(e) =>
+                      onUpdateSample(sample.id, "ground_truth", e.target.value)
+                    }
+                    placeholder="Enter ground truth..."
+                    disabled={isSaving}
+                    rows={3}
+                    className={`w-full px-2 py-1.5 border rounded-md text-xs bg-bg-primary border-border text-text-primary resize-y ${
+                      isSaving ? "opacity-50 cursor-not-allowed" : ""
+                    }`}
+                  />
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </Modal>
+  );
+}
diff --git a/app/components/text-to-speech/CreateTTSDatasetForm.tsx b/app/components/text-to-speech/CreateTTSDatasetForm.tsx
new file mode 100644
index 00000000..45f601a7
--- /dev/null
+++ b/app/components/text-to-speech/CreateTTSDatasetForm.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { TextSample } from "@/app/lib/types/textToSpeech";
+import { Language } from "@/app/lib/types/speechToText";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { Button, Field } from "@/app/components";
+import Select from "@/app/components/Select";
+import { CloseIcon, PlusIcon } from "@/app/components/icons";
+
+interface CreateTTSDatasetFormProps {
+  datasetName: string;
+  setDatasetName: (name: string) => void;
+  datasetDescription: string;
+  setDatasetDescription: (desc: string) => void;
+  datasetLanguageId: number;
+  setDatasetLanguageId: (id: number) => void;
+  languages: Language[];
+  textSamples: TextSample[];
+  addTextSample: () => void;
+  removeTextSample: (id: string) => void;
+  updateSampleText: (id: string, text: string) => void;
+  isCreating: boolean;
+  handleCreateDataset: () => void;
+  resetForm: () => void;
+}
+
+export default function CreateTTSDatasetForm({
+  datasetName,
+  setDatasetName,
+  datasetDescription,
+  setDatasetDescription,
+  datasetLanguageId,
+  setDatasetLanguageId,
+  languages,
+  textSamples,
+  addTextSample,
+  removeTextSample,
+  updateSampleText,
+  isCreating,
+  handleCreateDataset,
+  resetForm,
+}: CreateTTSDatasetFormProps) {
+  const { isAuthenticated } = useAuth();
+  const samplesContainerRef = useRef<HTMLDivElement>(null);
+  const prevSamplesCount = useRef(textSamples.length);
+
+  useEffect(() => {
+    if (textSamples.length > prevSamplesCount.current) {
+      setTimeout(() => {
+        samplesContainerRef.current?.scrollTo({
+          top: samplesContainerRef.current.scrollHeight,
+          behavior: "smooth",
+        });
+      }, 50);
+    }
+    prevSamplesCount.current = textSamples.length;
+  }, [textSamples.length]);
+
+  const isCreateDisabled =
+    isCreating ||
+    !datasetName.trim() ||
+    textSamples.filter((s) => s.text.trim()).length === 0;
+
+  return (
+    <div className="flex-1 overflow-auto p-4 space-y-4">
+      <div>
+        <h2 className="text-base font-semibold text-text-primary">
+          Create New Dataset
+        </h2>
+        <p className="text-xs mt-0.5 text-text-secondary">
+          Add text samples for speech synthesis evaluation
+        </p>
+      </div>
+
+      <Field
+        label="Name *"
+        value={datasetName}
+        onChange={setDatasetName}
+        placeholder="e.g., Hindi News Dataset"
+      />
+
+      <Field
+        label="Description"
+        value={datasetDescription}
+        onChange={setDatasetDescription}
+        placeholder="Optional description"
+      />
+
+      <div>
+        <label className="block text-xs font-medium mb-1.5 text-text-secondary">
+          Language *
+        </label>
+        <Select
+          value={datasetLanguageId}
+          onChange={(e) => setDatasetLanguageId(Number(e.target.value))}
+          options={languages.map((lang) => ({
+            value: String(lang.id),
+            label: lang.name,
+          }))}
+        />
+      </div>
+
+      <div>
+        <label className="text-xs font-medium mb-1.5 block text-text-secondary">
+          Text Samples *
+        </label>
+
+        {textSamples.length === 0 ? (
+          <div className="border-2 border-dashed rounded-lg p-6 text-center border-border">
+            <p className="text-xs text-text-secondary">No samples added yet</p>
+          </div>
+        ) : (
+          <div
+            ref={samplesContainerRef}
+            className="space-y-2 max-h-[300px] overflow-auto"
+          >
+            {textSamples.map((sample, idx) => (
+              <div key={sample.id} className="flex gap-2">
+                <textarea
+                  value={sample.text}
+                  onChange={(e) => updateSampleText(sample.id, e.target.value)}
+                  placeholder={`Sample ${idx + 1}...`}
+                  rows={2}
+                  className="flex-1 px-3 py-2 border rounded-md text-sm bg-bg-primary border-border text-text-primary resize-y"
+                />
+                <button
+                  onClick={() => removeTextSample(sample.id)}
+                  className="p-1 rounded shrink-0 self-start mt-1.5 text-text-secondary cursor-pointer"
+                  aria-label="Remove sample"
+                >
+                  <CloseIcon className="w-4 h-4" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <button
+          onClick={isAuthenticated ? addTextSample : undefined}
+          className={`flex items-center gap-1 text-xs font-medium mt-2 ${
+            isAuthenticated
+              ? "text-accent-primary cursor-pointer"
+              : "text-text-secondary cursor-not-allowed"
+          }`}
+        >
+          <PlusIcon className="w-3.5 h-3.5" />
+          Add Sample
+        </button>
+      </div>
+
+      <div className="flex items-center justify-end gap-3 pt-2">
+        <Button variant="ghost" size="md" onClick={resetForm}>
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          size="md"
+          onClick={handleCreateDataset}
+          disabled={isCreateDisabled}
+        >
+          {isCreating ? (
+            <>
+              <div className="w-4 h-4 border-2 border-text-secondary border-t-transparent rounded-full animate-spin" />
+              Creating...
+            </>
+          ) : (
+            "Create Dataset"
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/text-to-speech/DatasetsTab.tsx b/app/components/text-to-speech/DatasetsTab.tsx
index 1eb2c574..419806f6 100644
--- a/app/components/text-to-speech/DatasetsTab.tsx
+++ b/app/components/text-to-speech/DatasetsTab.tsx
@@ -1,19 +1,23 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
-import { colors } from "@/app/lib/colors";
+import { useState } from "react";
 import {
   TextSample,
   TTSDataset,
   TTSDatasetDetailResponse,
+  TTSViewDatasetModalData,
 } from "@/app/lib/types/textToSpeech";
 import { Language } from "@/app/lib/types/speechToText";
 import { APIKey } from "@/app/lib/types/credentials";
 import { useToast } from "@/app/components/Toast";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetch } from "@/app/lib/apiClient";
-import Loader from "@/app/components/Loader";
-import TTSDatasetDescription from "./DatasetDescription";
+import { DatabaseIcon } from "@/app/components/icons";
+import { DatasetListSkeleton } from "@/app/components";
+import TTSDatasetCard from "./TTSDatasetCard";
+import CreateTTSDatasetForm from "./CreateTTSDatasetForm";
+import TTSViewDatasetModal from "./TTSViewDatasetModal";
+import { parseCsvRow } from "@/app/lib/utils";
 
 export interface DatasetsTabProps {
   leftPanelWidth: number;
@@ -37,6 +41,30 @@ export interface DatasetsTabProps {
   toast: ReturnType<typeof useToast>;
 }
 
+const splitCSVRecords = (text: string): string[] => {
+  const records: string[] = [];
+  let current = "";
+  let inQuotes = false;
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (ch === '"') {
+      inQuotes = !inQuotes;
+      current += ch;
+    } else if (
+      (ch === "\n" || (ch === "\r" && text[i + 1] === "\n")) &&
+      !inQuotes
+    ) {
+      if (current.trim()) records.push(current);
+      current = "";
+      if (ch === "\r") i++;
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim()) records.push(current);
+  return records;
+};
+
 export default function DatasetsTab({
   leftPanelWidth,
   datasetName,
@@ -60,25 +88,8 @@ export default function DatasetsTab({
 }: DatasetsTabProps) {
   const { isAuthenticated } = useAuth();
   const [viewingId, setViewingId] = useState<number | null>(null);
-  const [viewModalData, setViewModalData] = useState<{
-    name: string;
-    headers: string[];
-    rows: string[][];
-  } | null>(null);
-  const samplesContainerRef = useRef<HTMLDivElement>(null);
-  const prevSamplesCount = useRef(textSamples.length);
-
-  useEffect(() => {
-    if (textSamples.length > prevSamplesCount.current) {
-      setTimeout(() => {
-        samplesContainerRef.current?.scrollTo({
-          top: samplesContainerRef.current.scrollHeight,
-          behavior: "smooth",
-        });
-      }, 50);
-    }
-    prevSamplesCount.current = textSamples.length;
-  }, [textSamples.length]);
+  const [viewModalData, setViewModalData] =
+    useState<TTSViewDatasetModalData | null>(null);
 
   const handleViewDataset = async (datasetId: number, datasetName: string) => {
     if (!isAuthenticated) return;
@@ -94,57 +105,9 @@ export default function DatasetsTab({
         return;
       }
 
-      // Split CSV into logical records (quote-aware)
-      const splitCSVRecords = (text: string): string[] => {
-        const records: string[] = [];
-        let current = "";
-        let inQuotes = false;
-        for (let i = 0; i < text.length; i++) {
-          const ch = text[i];
-          if (ch === '"') {
-            inQuotes = !inQuotes;
-            current += ch;
-          } else if (
-            (ch === "\n" || (ch === "\r" && text[i + 1] === "\n")) &&
-            !inQuotes
-          ) {
-            if (current.trim()) records.push(current);
-            current = "";
-            if (ch === "\r") i++; // skip \n in \r\n
-          } else {
-            current += ch;
-          }
-        }
-        if (current.trim()) records.push(current);
-        return records;
-      };
-
       const lines = splitCSVRecords(csvText);
-      const parseRow = (line: string): string[] => {
-        const result: string[] = [];
-        let current = "";
-        let inQuotes = false;
-        for (let i = 0; i < line.length; i++) {
-          if (line[i] === '"') {
-            if (inQuotes && line[i + 1] === '"') {
-              current += '"';
-              i++;
-            } else {
-              inQuotes = !inQuotes;
-            }
-          } else if (line[i] === "," && !inQuotes) {
-            result.push(current.trim());
-            current = "";
-          } else {
-            current += line[i];
-          }
-        }
-        result.push(current.trim());
-        return result;
-      };
-
-      const headers = lines.length > 0 ? parseRow(lines[0]) : [];
-      const rows = lines.slice(1).map(parseRow);
+      const headers = lines.length > 0 ? parseCsvRow(lines[0]) : [];
+      const rows = lines.slice(1).map(parseCsvRow);
 
       setViewModalData({ name: datasetName, headers, rows });
     } catch (err: unknown) {
@@ -156,536 +119,70 @@ export default function DatasetsTab({
     }
   };
 
-  const handleDownloadFromModal = () => {
-    if (!viewModalData) return;
-    const csvLines = [viewModalData.headers.join(",")];
-    viewModalData.rows.forEach((row) => {
-      csvLines.push(
-        row
-          .map((cell) =>
-            cell.includes(",") || cell.includes('"') || cell.includes("\n")
-              ? `"${cell.replace(/"/g, '""')}"`
-              : cell,
-          )
-          .join(","),
-      );
-    });
-    const blob = new Blob([csvLines.join("\n")], {
-      type: "text/csv;charset=utf-8;",
-    });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${viewModalData.name}.csv`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
   return (
     <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Create Dataset Form */}
-      <div
-        className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-        style={{
-          width: `${leftPanelWidth}px`,
-          backgroundColor: colors.bg.primary,
-          borderColor: colors.border,
-        }}
-      >
-        <div className="flex-1 overflow-auto p-4 space-y-4">
-          {/* Page Title */}
-          <div>
-            <h2
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
-              Create New Dataset
-            </h2>
-            <p
-              className="text-xs mt-0.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Add text samples for speech synthesis evaluation
-            </p>
-          </div>
-
-          {/* Name */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Name *
-            </label>
-            <input
-              type="text"
-              value={datasetName}
-              onChange={(e) => setDatasetName(e.target.value)}
-              placeholder="e.g., Hindi News Dataset"
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            />
-          </div>
-
-          {/* Description */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Description
-            </label>
-            <input
-              type="text"
-              value={datasetDescription}
-              onChange={(e) => setDatasetDescription(e.target.value)}
-              placeholder="Optional description"
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            />
-          </div>
-
-          {/* Language */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Language *
-            </label>
-            <select
-              value={datasetLanguageId}
-              onChange={(e) => setDatasetLanguageId(Number(e.target.value))}
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            >
-              {languages.map((lang) => (
-                <option key={lang.id} value={lang.id}>
-                  {lang.name}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {/* Text Samples */}
-          <div>
-            <label
-              className="text-xs font-medium mb-1.5 block"
-              style={{ color: colors.text.secondary }}
-            >
-              Text Samples *
-            </label>
-
-            {textSamples.length === 0 ? (
-              <div
-                className="border-2 border-dashed rounded-lg p-6 text-center"
-                style={{ borderColor: colors.border }}
-              >
-                <p className="text-xs" style={{ color: colors.text.secondary }}>
-                  No samples added yet
-                </p>
-              </div>
-            ) : (
-              <div
-                ref={samplesContainerRef}
-                className="space-y-2"
-                style={{ maxHeight: "300px", overflow: "auto" }}
-              >
-                {textSamples.map((sample, idx) => (
-                  <div key={sample.id} className="flex gap-2">
-                    <textarea
-                      value={sample.text}
-                      onChange={(e) =>
-                        updateSampleText(sample.id, e.target.value)
-                      }
-                      placeholder={`Sample ${idx + 1}...`}
-                      rows={2}
-                      className="flex-1 px-3 py-2 border rounded-md text-sm"
-                      style={{
-                        backgroundColor: colors.bg.primary,
-                        borderColor: colors.border,
-                        color: colors.text.primary,
-                        resize: "vertical",
-                      }}
-                    />
-                    <button
-                      onClick={() => removeTextSample(sample.id)}
-                      className="p-1 rounded flex-shrink-0 self-start mt-1.5"
-                      style={{ color: colors.text.secondary }}
-                    >
-                      <svg
-                        className="w-4 h-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M6 18L18 6M6 6l12 12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            <button
-              onClick={isAuthenticated ? addTextSample : undefined}
-              className="flex items-center gap-1 text-xs font-medium mt-2"
-              style={{
-                color: isAuthenticated
-                  ? colors.accent.primary
-                  : colors.text.secondary,
-                cursor: isAuthenticated ? "pointer" : "not-allowed",
-              }}
-            >
-              <svg
-                className="w-3.5 h-3.5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 4v16m8-8H4"
-                />
-              </svg>
-              Add Sample
-            </button>
-          </div>
-        </div>
-
-        {/* Bottom Action Bar */}
-        <div
-          className="flex-shrink-0 border-t px-4 py-4 flex items-center justify-end gap-3"
-          style={{
-            borderColor: colors.border,
-            backgroundColor: colors.bg.primary,
-          }}
-        >
-          <button
-            onClick={resetForm}
-            className="px-4 py-2 rounded-lg text-sm font-medium"
-            style={{ color: colors.text.secondary }}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleCreateDataset}
-            disabled={
-              isCreating ||
-              !datasetName.trim() ||
-              textSamples.filter((s) => s.text.trim()).length === 0
-            }
-            className="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium"
-            style={{
-              backgroundColor:
-                isCreating ||
-                !datasetName.trim() ||
-                textSamples.filter((s) => s.text.trim()).length === 0
-                  ? colors.bg.secondary
-                  : colors.accent.primary,
-              color:
-                isCreating ||
-                !datasetName.trim() ||
-                textSamples.filter((s) => s.text.trim()).length === 0
-                  ? colors.text.secondary
-                  : "#fff",
-              cursor:
-                isCreating ||
-                !datasetName.trim() ||
-                textSamples.filter((s) => s.text.trim()).length === 0
-                  ? "not-allowed"
-                  : "pointer",
-            }}
-          >
-            {isCreating ? (
-              <>
-                <div
-                  className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-                  style={{
-                    borderColor: colors.text.secondary,
-                    borderTopColor: "transparent",
-                  }}
-                />
-                Creating...
-              </>
-            ) : (
-              "Create Dataset"
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Right Panel - Dataset List */}
-      <div
-        className="flex-1 flex flex-col overflow-hidden"
-        style={{ backgroundColor: colors.bg.secondary }}
-      >
+      <div className="flex-1 flex flex-col overflow-hidden bg-bg-secondary">
         <div className="flex-1 overflow-auto p-6">
           <div className="flex items-center justify-between mb-4">
-            <h3
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
+            <h3 className="text-base font-semibold text-text-primary">
               Datasets
             </h3>
           </div>
 
           {isLoadingDatasets ? (
-            <div className="p-16">
-              <Loader size="md" message="Loading datasets..." />
-            </div>
+            <DatasetListSkeleton />
           ) : datasets.length === 0 ? (
             <div className="p-16 text-center">
-              <svg
-                className="w-12 h-12 mx-auto mb-3"
-                style={{ color: colors.border }}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1.5}
-                  d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3"
-                />
-              </svg>
-              <p
-                className="text-sm font-medium mb-1"
-                style={{ color: colors.text.primary }}
-              >
+              <DatabaseIcon className="w-12 h-12 mx-auto mb-3 text-border" />
+              <p className="text-sm font-medium mb-1 text-text-primary">
                 No datasets yet
               </p>
-              <p className="text-xs" style={{ color: colors.text.secondary }}>
-                Create your first dataset using the form on the left
+              <p className="text-xs text-text-secondary">
+                Create your first dataset using the form on the right
               </p>
             </div>
           ) : (
             <div className="space-y-3">
               {datasets.map((dataset) => (
-                <div
+                <TTSDatasetCard
                   key={dataset.id}
-                  className="rounded-lg overflow-hidden"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
-                    borderLeft: "3px solid #DCCFC3",
-                  }}
-                >
-                  <div className="px-5 py-4">
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="min-w-0 flex-1">
-                        <div
-                          className="text-sm font-semibold truncate"
-                          style={{ color: colors.text.primary }}
-                        >
-                          {dataset.name}
-                        </div>
-                        {dataset.description && (
-                          <TTSDatasetDescription
-                            description={dataset.description}
-                          />
-                        )}
-                        {dataset.dataset_metadata?.sample_count !==
-                          undefined && (
-                          <div
-                            className="mt-2 text-xs"
-                            style={{ color: colors.text.secondary }}
-                          >
-                            {dataset.dataset_metadata.sample_count} samples
-                          </div>
-                        )}
-                      </div>
-                      <div className="flex items-center gap-2 flex-shrink-0">
-                        <button
-                          onClick={() =>
-                            handleViewDataset(dataset.id, dataset.name)
-                          }
-                          disabled={viewingId === dataset.id}
-                          className="px-3 py-1.5 rounded-lg text-xs font-medium border"
-                          style={{
-                            backgroundColor: "transparent",
-                            borderColor: colors.border,
-                            color: colors.text.primary,
-                            opacity: viewingId === dataset.id ? 0.5 : 1,
-                          }}
-                        >
-                          {viewingId === dataset.id ? "Loading..." : "View"}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                  dataset={dataset}
+                  isViewing={viewingId === dataset.id}
+                  onView={() => handleViewDataset(dataset.id, dataset.name)}
+                />
               ))}
             </div>
           )}
         </div>
       </div>
 
-      {/* View Dataset Modal */}
-      {viewModalData && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center"
-          style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
-          onClick={() => setViewModalData(null)}
-        >
-          <div
-            className="rounded-lg shadow-xl flex flex-col"
-            style={{
-              backgroundColor: colors.bg.primary,
-              width: "80vw",
-              maxWidth: "1000px",
-              maxHeight: "80vh",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Modal Header */}
-            <div
-              className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0"
-              style={{ borderColor: colors.border }}
-            >
-              <div>
-                <h3
-                  className="text-sm font-semibold"
-                  style={{ color: colors.text.primary }}
-                >
-                  {viewModalData.name}
-                </h3>
-                <p
-                  className="text-xs mt-0.5"
-                  style={{ color: colors.text.secondary }}
-                >
-                  {viewModalData.rows.length} rows ·{" "}
-                  {viewModalData.headers.length} columns
-                </p>
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={handleDownloadFromModal}
-                  className="px-3 py-1.5 rounded-md text-xs font-medium"
-                  style={{
-                    backgroundColor: colors.accent.primary,
-                    color: "#ffffff",
-                  }}
-                >
-                  Download CSV
-                </button>
-                <button
-                  onClick={() => setViewModalData(null)}
-                  className="p-1.5 rounded"
-                  style={{ color: colors.text.secondary }}
-                >
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
+      <div
+        className="shrink-0 border-l flex flex-col overflow-hidden bg-bg-primary border-border"
+        style={{ width: `${leftPanelWidth}px` }}
+      >
+        <CreateTTSDatasetForm
+          datasetName={datasetName}
+          setDatasetName={setDatasetName}
+          datasetDescription={datasetDescription}
+          setDatasetDescription={setDatasetDescription}
+          datasetLanguageId={datasetLanguageId}
+          setDatasetLanguageId={setDatasetLanguageId}
+          languages={languages}
+          textSamples={textSamples}
+          addTextSample={addTextSample}
+          removeTextSample={removeTextSample}
+          updateSampleText={updateSampleText}
+          isCreating={isCreating}
+          handleCreateDataset={handleCreateDataset}
+          resetForm={resetForm}
+        />
+      </div>
 
-            {/* Modal Body - Table */}
-            <div className="flex-1 overflow-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr
-                    style={{
-                      backgroundColor: colors.bg.secondary,
-                      borderBottom: `1px solid ${colors.border}`,
-                    }}
-                  >
-                    <th
-                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                      style={{
-                        color: colors.text.secondary,
-                        backgroundColor: colors.bg.secondary,
-                        width: "40px",
-                      }}
-                    ></th>
-                    {viewModalData.headers.map((header, i) => (
-                      <th
-                        key={i}
-                        className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                        style={{
-                          color: colors.text.secondary,
-                          backgroundColor: colors.bg.secondary,
-                        }}
-                      >
-                        {header}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {viewModalData.rows.map((row, rowIdx) => (
-                    <tr
-                      key={rowIdx}
-                      style={{ borderBottom: `1px solid ${colors.border}` }}
-                    >
-                      <td
-                        className="px-4 py-2.5 text-xs"
-                        style={{ color: colors.text.secondary }}
-                      >
-                        {rowIdx + 1}
-                      </td>
-                      {row.map((cell, cellIdx) => (
-                        <td
-                          key={cellIdx}
-                          className="px-4 py-2.5"
-                          style={{ color: colors.text.primary }}
-                        >
-                          <div
-                            className="text-sm"
-                            style={{
-                              maxHeight: "120px",
-                              overflow: "auto",
-                              lineHeight: "1.5",
-                            }}
-                          >
-                            {cell || (
-                              <span style={{ color: colors.text.secondary }}>
-                                —
-                              </span>
-                            )}
-                          </div>
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
+      {viewModalData && (
+        <TTSViewDatasetModal
+          data={viewModalData}
+          onClose={() => setViewModalData(null)}
+        />
       )}
     </div>
   );
diff --git a/app/components/text-to-speech/EvaluationsTab.tsx b/app/components/text-to-speech/EvaluationsTab.tsx
index 0caa46f2..a6b15834 100644
--- a/app/components/text-to-speech/EvaluationsTab.tsx
+++ b/app/components/text-to-speech/EvaluationsTab.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { colors } from "@/app/lib/colors";
 import {
   TTSTab,
   TTSDataset,
@@ -13,11 +11,9 @@ import {
 import { APIKey } from "@/app/lib/types/credentials";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetch } from "@/app/lib/apiClient";
-import Loader, { LoaderBox } from "@/app/components/Loader";
-import { getStatusColor } from "@/app/components/utils";
-import { RefreshIcon } from "@/app/components/icons";
-import AudioPlayerFromUrl from "./AudioPlayerFromUrl";
 import { useToast } from "@/app/components/Toast";
+import TTSRunsList from "./TTSRunsList";
+import RunTTSEvaluationForm from "./RunTTSEvaluationForm";
 
 export interface EvaluationsTabProps {
   leftPanelWidth: number;
@@ -70,38 +66,12 @@ export default function EvaluationsTab({
   loadResults,
   apiKeys,
   toast,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  setActiveTab,
 }: EvaluationsTabProps) {
   const { isAuthenticated } = useAuth();
-  const [statusFilter, setStatusFilter] = useState<string>("all");
-  const [playingResultId, setPlayingResultId] = useState<number | null>(null);
-  const [loadingRunId, setLoadingRunId] = useState<number | null>(null);
-
-  useEffect(() => {
-    setLoadingRunId(null);
-  }, [selectedRunId]);
-  const [openScoreInfo, setOpenScoreInfo] = useState<string | null>(null);
-  const [scoreInfoPos, setScoreInfoPos] = useState<{
-    top: number;
-    left: number;
-  }>({ top: 0, left: 0 });
-
-  // Close score info tooltip on outside click or scroll
-  useEffect(() => {
-    if (!openScoreInfo) return;
-    const handleClose = () => setOpenScoreInfo(null);
-    document.addEventListener("click", handleClose);
-    document.addEventListener("scroll", handleClose, true);
-    return () => {
-      document.removeEventListener("click", handleClose);
-      document.removeEventListener("scroll", handleClose, true);
-    };
-  }, [openScoreInfo]);
 
   const updateFeedback = async (
     resultId: number,
-    isCorrect: boolean | null,
+    isCorrect: boolean | null | undefined,
     comment?: string,
     score?: TTSScore,
   ) => {
@@ -144,1109 +114,39 @@ export default function EvaluationsTab({
 
   return (
     <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Evaluation Configuration */}
+      <TTSRunsList
+        runs={runs}
+        isLoadingRuns={isLoadingRuns}
+        loadRuns={loadRuns}
+        selectedRunId={selectedRunId}
+        setSelectedRunId={setSelectedRunId}
+        results={results}
+        setResults={setResults}
+        isLoadingResults={isLoadingResults}
+        loadResults={loadResults}
+        onUpdateFeedback={updateFeedback}
+      />
+
       {selectedRunId === null && (
         <div
-          className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-          style={{
-            width: `${leftPanelWidth}px`,
-            backgroundColor: colors.bg.primary,
-            borderColor: colors.border,
-          }}
+          className="shrink-0 border-l flex flex-col overflow-hidden bg-bg-primary border-border"
+          style={{ width: `${leftPanelWidth}px` }}
         >
-          <div className="flex-1 overflow-auto p-4 space-y-4">
-            {/* Page Title */}
-            <div>
-              <h2
-                className="text-base font-semibold"
-                style={{ color: colors.text.primary }}
-              >
-                Run New Evaluation
-              </h2>
-              <p
-                className="text-xs mt-0.5"
-                style={{ color: colors.text.secondary }}
-              >
-                Evaluate speech synthesis quality across TTS models
-              </p>
-            </div>
-
-            {/* Evaluation Name */}
-            <div>
-              <label
-                className="block text-xs font-medium mb-1.5"
-                style={{ color: colors.text.secondary }}
-              >
-                Name *
-              </label>
-              <input
-                type="text"
-                value={evaluationName}
-                onChange={(e) => setEvaluationName(e.target.value)}
-                placeholder="e.g., Hindi TTS Evaluation v1"
-                className="w-full px-3 py-2 border rounded-md text-sm"
-                style={{
-                  backgroundColor: colors.bg.primary,
-                  borderColor: colors.border,
-                  color: colors.text.primary,
-                }}
-              />
-            </div>
-
-            {/* Model Selection */}
-            <div>
-              <label
-                className="block text-xs font-medium mb-1.5"
-                style={{ color: colors.text.secondary }}
-              >
-                Model *
-              </label>
-              <select
-                value={selectedModel}
-                onChange={(e) => setSelectedModel(e.target.value)}
-                className="w-full px-3 py-2 border rounded-md text-sm"
-                style={{
-                  backgroundColor: colors.bg.primary,
-                  borderColor: colors.border,
-                  color: colors.text.primary,
-                }}
-              >
-                <option value="gemini-2.5-pro-preview-tts">
-                  gemini-2.5-pro-preview-tts
-                </option>
-              </select>
-            </div>
-
-            {/* Dataset Selection */}
-            <div className="pt-2">
-              <label
-                className="block text-xs font-medium mb-1.5"
-                style={{ color: colors.text.secondary }}
-              >
-                Select Dataset *
-              </label>
-              {isLoadingDatasets ? (
-                <LoaderBox message="Loading datasets..." size="sm" />
-              ) : datasets.length === 0 ? (
-                <div
-                  className="border rounded-md p-8 text-center"
-                  style={{ borderColor: colors.border }}
-                >
-                  <p
-                    className="text-sm"
-                    style={{ color: colors.text.secondary }}
-                  >
-                    No datasets available
-                  </p>
-                  <p
-                    className="text-xs mt-1"
-                    style={{ color: colors.text.secondary }}
-                  >
-                    Create a dataset first in the Datasets tab
-                  </p>
-                </div>
-              ) : (
-                <select
-                  value={selectedDatasetId || ""}
-                  onChange={(e) =>
-                    setSelectedDatasetId(
-                      e.target.value ? parseInt(e.target.value) : null,
-                    )
-                  }
-                  className="w-full px-3 py-2 border rounded-md text-sm"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    borderColor: colors.border,
-                    color: colors.text.primary,
-                  }}
-                >
-                  <option value="">-- Select a dataset --</option>
-                  {datasets.map((dataset) => (
-                    <option key={dataset.id} value={dataset.id}>
-                      {dataset.name} (
-                      {dataset.dataset_metadata?.sample_count || 0} samples)
-                    </option>
-                  ))}
-                </select>
-              )}
-            </div>
-
-            {/* Selected Dataset Info */}
-            {selectedDataset && (
-              <div
-                className="border rounded-lg p-3"
-                style={{
-                  borderColor: colors.status.success,
-                  backgroundColor: "rgba(22, 163, 74, 0.02)",
-                }}
-              >
-                <div className="flex items-start gap-2">
-                  <svg
-                    className="w-5 h-5 flex-shrink-0 mt-0.5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    style={{ color: colors.status.success }}
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <div className="flex-1">
-                    <div
-                      className="text-sm font-medium"
-                      style={{ color: colors.text.primary }}
-                    >
-                      {selectedDataset.name}
-                    </div>
-                    <div
-                      className="text-xs mt-1 space-y-0.5"
-                      style={{ color: colors.text.secondary }}
-                    >
-                      <div>
-                        {selectedDataset.dataset_metadata?.sample_count || 0}{" "}
-                        samples
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* Run Evaluation Button */}
-          <div
-            className="flex-shrink-0 border-t px-4 py-3"
-            style={{
-              borderColor: colors.border,
-              backgroundColor: colors.bg.primary,
-            }}
-          >
-            <button
-              onClick={handleRunEvaluation}
-              disabled={
-                isRunning || !evaluationName.trim() || !selectedDatasetId
-              }
-              className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium"
-              style={{
-                backgroundColor:
-                  isRunning || !evaluationName.trim() || !selectedDatasetId
-                    ? colors.bg.secondary
-                    : colors.accent.primary,
-                color:
-                  isRunning || !evaluationName.trim() || !selectedDatasetId
-                    ? colors.text.secondary
-                    : "#fff",
-                cursor:
-                  isRunning || !evaluationName.trim() || !selectedDatasetId
-                    ? "not-allowed"
-                    : "pointer",
-              }}
-            >
-              {isRunning ? (
-                <>
-                  <div
-                    className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-                    style={{
-                      borderColor: colors.text.secondary,
-                      borderTopColor: "transparent",
-                    }}
-                  />
-                  Starting Evaluation...
-                </>
-              ) : (
-                <>
-                  <svg
-                    className="w-5 h-5"
-                    fill="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path d="M8 5v14l11-7z" />
-                  </svg>
-                  Run Evaluation
-                </>
-              )}
-            </button>
-          </div>
+          <RunTTSEvaluationForm
+            evaluationName={evaluationName}
+            setEvaluationName={setEvaluationName}
+            datasets={datasets}
+            isLoadingDatasets={isLoadingDatasets}
+            selectedDatasetId={selectedDatasetId}
+            setSelectedDatasetId={setSelectedDatasetId}
+            selectedDataset={selectedDataset}
+            selectedModel={selectedModel}
+            setSelectedModel={setSelectedModel}
+            isRunning={isRunning}
+            handleRunEvaluation={handleRunEvaluation}
+          />
         </div>
       )}
-
-      {/* Right Panel - Evaluation Runs List or Results */}
-      <div
-        className="flex-1 flex flex-col overflow-hidden"
-        style={{ backgroundColor: colors.bg.secondary }}
-      >
-        <div className="flex-1 overflow-auto p-4">
-          <div className="mb-4 flex items-center justify-between">
-            <div>
-              {selectedRunId !== null ? (
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => setSelectedRunId(null)}
-                    className="p-1 rounded"
-                    style={{ color: colors.text.secondary }}
-                  >
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M15 19l-7-7 7-7"
-                      />
-                    </svg>
-                  </button>
-                  <h2
-                    className="text-base font-semibold"
-                    style={{ color: colors.text.primary }}
-                  >
-                    {runs.find((r) => r.id === selectedRunId)?.run_name}
-                  </h2>
-                </div>
-              ) : (
-                <h2
-                  className="text-base font-semibold"
-                  style={{ color: colors.text.primary }}
-                >
-                  Evaluation Runs
-                </h2>
-              )}
-            </div>
-            {selectedRunId === null && (
-              <div className="flex items-center gap-2">
-                <select
-                  value={statusFilter}
-                  onChange={(e) => setStatusFilter(e.target.value)}
-                  className="px-2.5 py-1 rounded-md text-xs font-medium border appearance-none cursor-pointer pr-7"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    borderColor: colors.border,
-                    color: colors.text.primary,
-                    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
-                    backgroundRepeat: "no-repeat",
-                    backgroundPosition: "right 6px center",
-                  }}
-                >
-                  <option value="all">All Status</option>
-                  <option value="completed">Completed</option>
-                  <option value="processing">Processing</option>
-                  <option value="pending">Pending</option>
-                  <option value="failed">Failed</option>
-                </select>
-                <button
-                  onClick={loadRuns}
-                  disabled={isLoadingRuns}
-                  className="p-1.5 rounded text-text-secondary cursor-pointer"
-                >
-                  <RefreshIcon
-                    className={`w-4 h-4 ${isLoadingRuns ? "animate-spin" : ""}`}
-                  />
-                </button>
-              </div>
-            )}
-          </div>
-
-          <div
-            className="rounded-lg overflow-visible"
-            style={{
-              backgroundColor: colors.bg.primary,
-              boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
-            }}
-          >
-            {selectedRunId !== null ? (
-              // Results View
-              isLoadingResults ? (
-                <div className="p-16">
-                  <Loader size="md" message="Loading results..." />
-                </div>
-              ) : results.length === 0 ? (
-                <div className="p-16 text-center">
-                  <p
-                    className="text-sm font-medium mb-1"
-                    style={{ color: colors.text.primary }}
-                  >
-                    No results found
-                  </p>
-                  <p
-                    className="text-xs"
-                    style={{ color: colors.text.secondary }}
-                  >
-                    This evaluation has no results yet
-                  </p>
-                </div>
-              ) : (
-                <table className="w-full" style={{ minWidth: "900px" }}>
-                  <thead>
-                    <tr
-                      style={{
-                        backgroundColor: colors.bg.secondary,
-                        borderBottom: `1px solid ${colors.border}`,
-                      }}
-                    >
-                      <th
-                        className="text-left px-4 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "24%" }}
-                      >
-                        Text
-                      </th>
-                      <th
-                        className="text-left px-4 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "18%" }}
-                      >
-                        Audio
-                      </th>
-                      <th
-                        className="text-left px-3 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "12%" }}
-                      >
-                        <div>
-                          <div>Speech</div>
-                          <div>
-                            Naturalness{" "}
-                            <span
-                              className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer align-middle"
-                              style={{
-                                backgroundColor: colors.bg.primary,
-                                border: `1px solid ${colors.border}`,
-                                color: colors.text.secondary,
-                              }}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                const rect =
-                                  e.currentTarget.getBoundingClientRect();
-                                setScoreInfoPos({
-                                  top: rect.bottom + 4,
-                                  left: rect.left,
-                                });
-                                setOpenScoreInfo(
-                                  openScoreInfo === "speech_naturalness"
-                                    ? null
-                                    : "speech_naturalness",
-                                );
-                              }}
-                            >
-                              i
-                            </span>
-                            {openScoreInfo === "speech_naturalness" && (
-                              <div
-                                className="fixed z-50 rounded-lg shadow-lg border text-xs"
-                                style={{
-                                  backgroundColor: colors.bg.primary,
-                                  borderColor: colors.border,
-                                  width: "340px",
-                                  top: scoreInfoPos.top,
-                                  left: scoreInfoPos.left,
-                                }}
-                                onClick={(e) => e.stopPropagation()}
-                              >
-                                <div className="p-3">
-                                  <div
-                                    className="font-semibold mb-2"
-                                    style={{ color: colors.text.primary }}
-                                  >
-                                    Speech Naturalness
-                                  </div>
-                                  <p
-                                    className="mb-3"
-                                    style={{
-                                      color: colors.text.secondary,
-                                      fontFamily: "system-ui, sans-serif",
-                                    }}
-                                  >
-                                    Assesses how human-like the generated speech
-                                    sounds.
-                                  </p>
-                                  <div
-                                    className="mb-1 font-semibold"
-                                    style={{ color: colors.text.primary }}
-                                  >
-                                    Scoring
-                                  </div>
-                                  <div
-                                    className="space-y-2 p-2 rounded"
-                                    style={{
-                                      backgroundColor: colors.bg.secondary,
-                                    }}
-                                  >
-                                    <div className="flex">
-                                      <span
-                                        className="font-semibold shrink-0"
-                                        style={{
-                                          color: colors.status.success,
-                                          width: "62px",
-                                        }}
-                                      >
-                                        High:
-                                      </span>
-                                      <span
-                                        style={{ color: colors.text.primary }}
-                                      >
-                                        Very human-like, natural flow with
-                                        appropriate pauses and inflections.
-                                      </span>
-                                    </div>
-                                    <div className="flex">
-                                      <span
-                                        className="font-semibold shrink-0"
-                                        style={{
-                                          color: "#ca8a04",
-                                          width: "62px",
-                                        }}
-                                      >
-                                        Medium:
-                                      </span>
-                                      <span
-                                        style={{ color: colors.text.primary }}
-                                      >
-                                        Some human qualities but with occasional
-                                        robotic or awkward elements.
-                                      </span>
-                                    </div>
-                                    <div className="flex">
-                                      <span
-                                        className="font-semibold shrink-0"
-                                        style={{
-                                          color: colors.status.error,
-                                          width: "62px",
-                                        }}
-                                      >
-                                        Low:
-                                      </span>
-                                      <span
-                                        style={{ color: colors.text.primary }}
-                                      >
-                                        Clearly robotic or artificial, with
-                                        choppy or monotone speech.
-                                      </span>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="mt-2 font-semibold"
-                                    style={{ color: colors.status.success }}
-                                  >
-                                    Higher is better.
-                                  </div>
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </th>
-                      <th
-                        className="text-left px-3 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "12%" }}
-                      >
-                        <div>
-                          <div>Pronunciation</div>
-                          <div>
-                            Accuracy{" "}
-                            <span
-                              className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer align-middle"
-                              style={{
-                                backgroundColor: colors.bg.primary,
-                                border: `1px solid ${colors.border}`,
-                                color: colors.text.secondary,
-                              }}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                const rect =
-                                  e.currentTarget.getBoundingClientRect();
-                                setScoreInfoPos({
-                                  top: rect.bottom + 4,
-                                  left: rect.left,
-                                });
-                                setOpenScoreInfo(
-                                  openScoreInfo === "pronunciation_accuracy"
-                                    ? null
-                                    : "pronunciation_accuracy",
-                                );
-                              }}
-                            >
-                              i
-                            </span>
-                            {openScoreInfo === "pronunciation_accuracy" && (
-                              <div
-                                className="fixed z-50 rounded-lg shadow-lg border text-xs"
-                                style={{
-                                  backgroundColor: colors.bg.primary,
-                                  borderColor: colors.border,
-                                  width: "340px",
-                                  top: scoreInfoPos.top,
-                                  left: scoreInfoPos.left,
-                                }}
-                                onClick={(e) => e.stopPropagation()}
-                              >
-                                <div className="p-3">
-                                  <div
-                                    className="font-semibold mb-2"
-                                    style={{ color: colors.text.primary }}
-                                  >
-                                    Pronunciation Accuracy
-                                  </div>
-                                  <p
-                                    className="mb-3"
-                                    style={{
-                                      color: colors.text.secondary,
-                                      fontFamily: "system-ui, sans-serif",
-                                    }}
-                                  >
-                                    Evaluates how clearly and correctly words
-                                    are pronounced in the TTS output.
-                                  </p>
-                                  <div
-                                    className="mb-1 font-semibold"
-                                    style={{ color: colors.text.primary }}
-                                  >
-                                    Scoring
-                                  </div>
-                                  <div
-                                    className="space-y-2 p-2 rounded"
-                                    style={{
-                                      backgroundColor: colors.bg.secondary,
-                                    }}
-                                  >
-                                    <div className="flex">
-                                      <span
-                                        className="font-semibold shrink-0"
-                                        style={{
-                                          color: colors.status.success,
-                                          width: "62px",
-                                        }}
-                                      >
-                                        High:
-                                      </span>
-                                      <span
-                                        style={{ color: colors.text.primary }}
-                                      >
-                                        All words are pronounced clearly and
-                                        correctly.
-                                      </span>
-                                    </div>
-                                    <div className="flex">
-                                      <span
-                                        className="font-semibold shrink-0"
-                                        style={{
-                                          color: "#ca8a04",
-                                          width: "62px",
-                                        }}
-                                      >
-                                        Medium:
-                                      </span>
-                                      <span
-                                        style={{ color: colors.text.primary }}
-                                      >
-                                        1-2 words are mispronounced or unclear.
-                                      </span>
-                                    </div>
-                                    <div className="flex">
-                                      <span
-                                        className="font-semibold shrink-0"
-                                        style={{
-                                          color: colors.status.error,
-                                          width: "62px",
-                                        }}
-                                      >
-                                        Low:
-                                      </span>
-                                      <span
-                                        style={{ color: colors.text.primary }}
-                                      >
-                                        3 or more words are mispronounced or
-                                        difficult to understand.
-                                      </span>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="mt-2 font-semibold"
-                                    style={{ color: colors.status.success }}
-                                  >
-                                    Higher is better.
-                                  </div>
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </th>
-                      <th
-                        className="text-left px-3 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "12%" }}
-                      >
-                        Is Correct
-                      </th>
-                      <th
-                        className="text-left px-4 py-3 text-xs font-medium align-top"
-                        style={{ color: colors.text.secondary, width: "18%" }}
-                      >
-                        Comment
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {results.map((result, idx) => {
-                      return (
-                        <tr
-                          key={result.id}
-                          style={{ borderBottom: `1px solid ${colors.border}` }}
-                        >
-                          <td
-                            className="px-4 py-3 text-sm align-top"
-                            style={{ color: colors.text.primary }}
-                          >
-                            <div
-                              className="overflow-y-auto"
-                              style={{
-                                maxHeight: "80px",
-                                lineHeight: "1.5",
-                              }}
-                            >
-                              {result.sample_text || "-"}
-                            </div>
-                          </td>
-                          <td className="px-4 py-3 text-sm align-top">
-                            {result.signedUrl ? (
-                              <AudioPlayerFromUrl
-                                signedUrl={result.signedUrl}
-                                isPlaying={playingResultId === result.id}
-                                onPlayToggle={() =>
-                                  setPlayingResultId(
-                                    playingResultId === result.id
-                                      ? null
-                                      : result.id,
-                                  )
-                                }
-                                sampleLabel={`Sample ${idx + 1}`}
-                                durationSeconds={result.duration_seconds}
-                                sizeBytes={result.size_bytes}
-                              />
-                            ) : (
-                              <span
-                                className="text-xs"
-                                style={{ color: colors.text.secondary }}
-                              >
-                                {result.status === "SUCCESS"
-                                  ? "No audio available"
-                                  : "-"}
-                              </span>
-                            )}
-                          </td>
-                          {(() => {
-                            const snVal =
-                              result.score?.["Speech Naturalness"] ||
-                              result.score?.speech_naturalness ||
-                              "";
-                            const normalizedSn = snVal
-                              ? snVal.charAt(0).toUpperCase() +
-                                snVal.slice(1).toLowerCase()
-                              : "";
-                            return (
-                              <td className="px-3 py-3 text-sm align-top">
-                                <select
-                                  value={normalizedSn}
-                                  onChange={(e) => {
-                                    const value = e.target.value || null;
-                                    const newScore = {
-                                      ...(result.score || {}),
-                                      "Speech Naturalness": value,
-                                    };
-                                    setResults((prev) =>
-                                      prev.map((r) =>
-                                        r.id === result.id
-                                          ? { ...r, score: newScore }
-                                          : r,
-                                      ),
-                                    );
-                                    updateFeedback(
-                                      result.id,
-                                      result.is_correct,
-                                      undefined,
-                                      { "Speech Naturalness": value },
-                                    );
-                                  }}
-                                  disabled={result.status !== "SUCCESS"}
-                                  className="w-full px-2 py-1.5 border rounded text-xs font-medium"
-                                  style={{
-                                    backgroundColor: !normalizedSn
-                                      ? colors.bg.primary
-                                      : normalizedSn === "High"
-                                        ? "rgba(22, 163, 74, 0.1)"
-                                        : normalizedSn === "Medium"
-                                          ? "rgba(234, 179, 8, 0.1)"
-                                          : "rgba(239, 68, 68, 0.1)",
-                                    borderColor: !normalizedSn
-                                      ? colors.border
-                                      : normalizedSn === "High"
-                                        ? colors.status.success
-                                        : normalizedSn === "Medium"
-                                          ? "#eab308"
-                                          : colors.status.error,
-                                    color: !normalizedSn
-                                      ? colors.text.primary
-                                      : normalizedSn === "High"
-                                        ? colors.status.success
-                                        : normalizedSn === "Medium"
-                                          ? "#ca8a04"
-                                          : colors.status.error,
-                                    cursor:
-                                      result.status === "SUCCESS"
-                                        ? "pointer"
-                                        : "not-allowed",
-                                    opacity:
-                                      result.status === "SUCCESS" ? 1 : 0.5,
-                                  }}
-                                >
-                                  <option value="">-</option>
-                                  <option value="High">High</option>
-                                  <option value="Medium">Medium</option>
-                                  <option value="Low">Low</option>
-                                </select>
-                              </td>
-                            );
-                          })()}
-                          {(() => {
-                            const paVal =
-                              result.score?.["Pronunciation Accuracy"] ||
-                              result.score?.pronunciation_accuracy ||
-                              "";
-                            const normalizedPa = paVal
-                              ? paVal.charAt(0).toUpperCase() +
-                                paVal.slice(1).toLowerCase()
-                              : "";
-                            return (
-                              <td className="px-3 py-3 text-sm align-top">
-                                <select
-                                  value={normalizedPa}
-                                  onChange={(e) => {
-                                    const value = e.target.value || null;
-                                    const newScore = {
-                                      ...(result.score || {}),
-                                      "Pronunciation Accuracy": value,
-                                    };
-                                    setResults((prev) =>
-                                      prev.map((r) =>
-                                        r.id === result.id
-                                          ? { ...r, score: newScore }
-                                          : r,
-                                      ),
-                                    );
-                                    updateFeedback(
-                                      result.id,
-                                      result.is_correct,
-                                      undefined,
-                                      { "Pronunciation Accuracy": value },
-                                    );
-                                  }}
-                                  disabled={result.status !== "SUCCESS"}
-                                  className="w-full px-2 py-1.5 border rounded text-xs font-medium"
-                                  style={{
-                                    backgroundColor: !normalizedPa
-                                      ? colors.bg.primary
-                                      : normalizedPa === "High"
-                                        ? "rgba(22, 163, 74, 0.1)"
-                                        : normalizedPa === "Medium"
-                                          ? "rgba(234, 179, 8, 0.1)"
-                                          : "rgba(239, 68, 68, 0.1)",
-                                    borderColor: !normalizedPa
-                                      ? colors.border
-                                      : normalizedPa === "High"
-                                        ? colors.status.success
-                                        : normalizedPa === "Medium"
-                                          ? "#eab308"
-                                          : colors.status.error,
-                                    color: !normalizedPa
-                                      ? colors.text.primary
-                                      : normalizedPa === "High"
-                                        ? colors.status.success
-                                        : normalizedPa === "Medium"
-                                          ? "#ca8a04"
-                                          : colors.status.error,
-                                    cursor:
-                                      result.status === "SUCCESS"
-                                        ? "pointer"
-                                        : "not-allowed",
-                                    opacity:
-                                      result.status === "SUCCESS" ? 1 : 0.5,
-                                  }}
-                                >
-                                  <option value="">-</option>
-                                  <option value="High">High</option>
-                                  <option value="Medium">Medium</option>
-                                  <option value="Low">Low</option>
-                                </select>
-                              </td>
-                            );
-                          })()}
-                          <td className="px-3 py-3 text-sm align-top">
-                            <select
-                              value={
-                                result.is_correct === null
-                                  ? ""
-                                  : result.is_correct
-                                    ? "true"
-                                    : "false"
-                              }
-                              onChange={(e) => {
-                                const value = e.target.value;
-                                updateFeedback(
-                                  result.id,
-                                  value === "" ? null : value === "true",
-                                );
-                              }}
-                              disabled={result.status !== "SUCCESS"}
-                              className="w-full px-2 py-1.5 border rounded text-xs font-medium"
-                              style={{
-                                backgroundColor:
-                                  result.is_correct === null
-                                    ? colors.bg.primary
-                                    : result.is_correct
-                                      ? "rgba(22, 163, 74, 0.1)"
-                                      : "rgba(239, 68, 68, 0.1)",
-                                borderColor:
-                                  result.is_correct === null
-                                    ? colors.border
-                                    : result.is_correct
-                                      ? colors.status.success
-                                      : colors.status.error,
-                                color:
-                                  result.is_correct === null
-                                    ? colors.text.primary
-                                    : result.is_correct
-                                      ? colors.status.success
-                                      : colors.status.error,
-                                cursor:
-                                  result.status === "SUCCESS"
-                                    ? "pointer"
-                                    : "not-allowed",
-                                opacity: result.status === "SUCCESS" ? 1 : 0.5,
-                              }}
-                            >
-                              <option value="">-</option>
-                              <option value="true">Yes</option>
-                              <option value="false">No</option>
-                            </select>
-                          </td>
-                          <td className="px-4 py-3 text-sm align-top">
-                            <textarea
-                              value={result.comment || ""}
-                              onChange={(e) => {
-                                setResults((prev) =>
-                                  prev.map((r) =>
-                                    r.id === result.id
-                                      ? { ...r, comment: e.target.value }
-                                      : r,
-                                  ),
-                                );
-                              }}
-                              onBlur={(e) => {
-                                if (result.status === "SUCCESS") {
-                                  updateFeedback(
-                                    result.id,
-                                    result.is_correct,
-                                    e.target.value,
-                                  );
-                                }
-                              }}
-                              placeholder="Add comment..."
-                              rows={2}
-                              disabled={result.status !== "SUCCESS"}
-                              className="w-full px-2 py-1.5 border rounded text-xs"
-                              style={{
-                                backgroundColor: colors.bg.primary,
-                                borderColor: colors.border,
-                                color: colors.text.primary,
-                                resize: "vertical",
-                                opacity: result.status === "SUCCESS" ? 1 : 0.5,
-                                cursor:
-                                  result.status === "SUCCESS"
-                                    ? "text"
-                                    : "not-allowed",
-                              }}
-                            />
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              )
-            ) : // Runs List View
-            isLoadingRuns ? (
-              <div className="p-16">
-                <Loader size="md" message="Loading evaluation runs..." />
-              </div>
-            ) : runs.length === 0 ? (
-              <div className="p-16 text-center">
-                <svg
-                  className="w-12 h-12 mx-auto mb-3"
-                  style={{ color: colors.border }}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-                  />
-                </svg>
-                <p
-                  className="text-sm font-medium mb-1"
-                  style={{ color: colors.text.primary }}
-                >
-                  No evaluation runs yet
-                </p>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>
-                  Run your first evaluation to get started
-                </p>
-              </div>
-            ) : (
-              (() => {
-                const filteredRuns =
-                  statusFilter === "all"
-                    ? runs
-                    : runs.filter(
-                        (r) => r.status.toLowerCase() === statusFilter,
-                      );
-                return filteredRuns.length > 0 ? (
-                  <div className="p-4 space-y-3">
-                    {filteredRuns.map((run) => {
-                      const isCompleted =
-                        run.status.toLowerCase() === "completed";
-                      const statusColor = getStatusColor(run.status);
-                      return (
-                        <div
-                          key={run.id}
-                          className={`rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-3 ${statusColor.border}`}
-                        >
-                          <div className="px-5 py-4">
-                            {/* Row 1: Run Name + Status */}
-                            <div className="flex items-start justify-between gap-4">
-                              <div className="min-w-0 flex-1">
-                                <div className="text-sm font-semibold truncate text-text-primary">
-                                  {run.run_name}
-                                </div>
-                                {/* Error message */}
-                                {run.error_message && (
-                                  <div className="mt-2 text-xs wrap-break-word overflow-hidden text-status-error-text">
-                                    {run.error_message}
-                                  </div>
-                                )}
-                              </div>
-                              <span
-                                className={`px-2.5 py-1 rounded text-xs font-semibold uppercase tracking-wide shrink-0 ${statusColor.bg} ${statusColor.text}`}
-                              >
-                                {run.status}
-                              </span>
-                            </div>
-
-                            {/* Row 2: Dataset + Models (left) | Actions (right) */}
-                            <div className="flex items-center justify-between gap-4 mt-3">
-                              <div
-                                className="flex items-center gap-3 text-xs"
-                                style={{ color: colors.text.secondary }}
-                              >
-                                <span className="flex items-center gap-1.5">
-                                  <svg
-                                    className="w-3.5 h-3.5 flex-shrink-0"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke="currentColor"
-                                    strokeWidth={2}
-                                  >
-                                    <path
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                      d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3"
-                                    />
-                                  </svg>
-                                  {run.dataset_name}
-                                </span>
-                                {run.models && run.models.length > 0 && (
-                                  <span
-                                    className="px-1.5 py-0.5 rounded"
-                                    style={{
-                                      backgroundColor: colors.bg.secondary,
-                                    }}
-                                  >
-                                    {run.models.join(", ")}
-                                  </span>
-                                )}
-                              </div>
-                              <button
-                                onClick={
-                                  isCompleted && loadingRunId === null
-                                    ? () => {
-                                        setLoadingRunId(run.id);
-                                        loadResults(run.id);
-                                      }
-                                    : undefined
-                                }
-                                disabled={!isCompleted || loadingRunId !== null}
-                                className="px-3 py-1.5 rounded-lg text-xs font-medium border flex-shrink-0 flex items-center gap-1.5"
-                                style={{
-                                  backgroundColor: "transparent",
-                                  borderColor: colors.border,
-                                  color: isCompleted
-                                    ? colors.text.primary
-                                    : colors.text.secondary,
-                                  cursor:
-                                    isCompleted && loadingRunId === null
-                                      ? "pointer"
-                                      : "not-allowed",
-                                  opacity:
-                                    isCompleted && loadingRunId === null
-                                      ? 1
-                                      : 0.5,
-                                }}
-                              >
-                                {loadingRunId === run.id && (
-                                  <div
-                                    className="w-3 h-3 border-2 border-t-transparent rounded-full animate-spin"
-                                    style={{
-                                      borderColor: colors.text.secondary,
-                                      borderTopColor: "transparent",
-                                    }}
-                                  />
-                                )}
-                                {loadingRunId === run.id
-                                  ? "Loading..."
-                                  : "View Results"}
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                ) : (
-                  <div className="p-16 text-center">
-                    <p
-                      className="text-sm font-medium mb-1"
-                      style={{ color: colors.text.primary }}
-                    >
-                      No {statusFilter} runs
-                    </p>
-                    <p
-                      className="text-xs"
-                      style={{ color: colors.text.secondary }}
-                    >
-                      No evaluation runs with status &quot;{statusFilter}&quot;
-                    </p>
-                  </div>
-                );
-              })()
-            )}
-          </div>
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/app/components/text-to-speech/RunTTSEvaluationForm.tsx b/app/components/text-to-speech/RunTTSEvaluationForm.tsx
new file mode 100644
index 00000000..c83c952e
--- /dev/null
+++ b/app/components/text-to-speech/RunTTSEvaluationForm.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { TTSDataset } from "@/app/lib/types/textToSpeech";
+import { Button, Field } from "@/app/components";
+import Select from "@/app/components/Select";
+import { CheckCircleIcon, PlayIcon } from "@/app/components/icons";
+import { LoaderBox } from "@/app/components/Loader";
+
+interface RunTTSEvaluationFormProps {
+  evaluationName: string;
+  setEvaluationName: (name: string) => void;
+  datasets: TTSDataset[];
+  isLoadingDatasets: boolean;
+  selectedDatasetId: number | null;
+  setSelectedDatasetId: (id: number | null) => void;
+  selectedDataset: TTSDataset | undefined;
+  selectedModel: string;
+  setSelectedModel: (model: string) => void;
+  isRunning: boolean;
+  handleRunEvaluation: () => void;
+}
+
+export default function RunTTSEvaluationForm({
+  evaluationName,
+  setEvaluationName,
+  datasets,
+  isLoadingDatasets,
+  selectedDatasetId,
+  setSelectedDatasetId,
+  selectedDataset,
+  selectedModel,
+  setSelectedModel,
+  isRunning,
+  handleRunEvaluation,
+}: RunTTSEvaluationFormProps) {
+  const isRunDisabled =
+    isRunning || !evaluationName.trim() || !selectedDatasetId;
+
+  return (
+    <div className="flex-1 overflow-auto p-4 space-y-4">
+      <div>
+        <h2 className="text-base font-semibold text-text-primary">
+          Run New Evaluation
+        </h2>
+        <p className="text-xs mt-0.5 text-text-secondary">
+          Evaluate speech synthesis quality across TTS models
+        </p>
+      </div>
+
+      <Field
+        label="Name *"
+        value={evaluationName}
+        onChange={setEvaluationName}
+        placeholder="e.g., Hindi TTS Evaluation v1"
+      />
+
+      <div>
+        <label className="block text-xs font-medium mb-1.5 text-text-secondary">
+          Model *
+        </label>
+        <Select
+          value={selectedModel}
+          onChange={(e) => setSelectedModel(e.target.value)}
+          options={[
+            {
+              value: "gemini-2.5-pro-preview-tts",
+              label: "gemini-2.5-pro-preview-tts",
+            },
+          ]}
+        />
+      </div>
+
+      <div className="pt-2">
+        <label className="block text-xs font-medium mb-1.5 text-text-secondary">
+          Select Dataset *
+        </label>
+        {isLoadingDatasets ? (
+          <LoaderBox message="Loading datasets..." size="sm" />
+        ) : datasets.length === 0 ? (
+          <div className="border rounded-md p-8 text-center border-border">
+            <p className="text-sm text-text-secondary">No datasets available</p>
+            <p className="text-xs mt-1 text-text-secondary">
+              Create a dataset first in the Datasets tab
+            </p>
+          </div>
+        ) : (
+          <Select
+            value={selectedDatasetId || ""}
+            onChange={(e) =>
+              setSelectedDatasetId(
+                e.target.value ? parseInt(e.target.value) : null,
+              )
+            }
+            placeholder="-- Select a dataset --"
+            options={datasets.map((dataset) => ({
+              value: String(dataset.id),
+              label: `${dataset.name} (${dataset.dataset_metadata?.sample_count || 0} samples)`,
+            }))}
+          />
+        )}
+      </div>
+
+      {selectedDataset && (
+        <div className="border rounded-lg p-3 border-status-success bg-green-600/2">
+          <div className="flex items-start gap-2">
+            <CheckCircleIcon className="w-5 h-5 shrink-0 mt-0.5 text-status-success" />
+            <div className="flex-1">
+              <div className="text-sm font-medium text-text-primary">
+                {selectedDataset.name}
+              </div>
+              <div className="text-xs mt-1 space-y-0.5 text-text-secondary">
+                <div>
+                  {selectedDataset.dataset_metadata?.sample_count || 0} samples
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="pt-2">
+        <Button
+          variant="primary"
+          size="lg"
+          fullWidth
+          onClick={handleRunEvaluation}
+          disabled={isRunDisabled}
+        >
+          {isRunning ? (
+            <>
+              <div className="w-4 h-4 border-2 border-text-secondary border-t-transparent rounded-full animate-spin" />
+              Starting Evaluation...
+            </>
+          ) : (
+            <>
+              <PlayIcon className="w-5 h-5" />
+              Run Evaluation
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/text-to-speech/TTSDatasetCard.tsx b/app/components/text-to-speech/TTSDatasetCard.tsx
new file mode 100644
index 00000000..da9d815d
--- /dev/null
+++ b/app/components/text-to-speech/TTSDatasetCard.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { TTSDataset } from "@/app/lib/types/textToSpeech";
+import { Button } from "@/app/components";
+import TTSDatasetDescription from "@/app/components/text-to-speech/DatasetDescription";
+
+interface TTSDatasetCardProps {
+  dataset: TTSDataset;
+  isViewing: boolean;
+  onView: () => void;
+}
+
+export default function TTSDatasetCard({
+  dataset,
+  isViewing,
+  onView,
+}: TTSDatasetCardProps) {
+  return (
+    <div className="rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-[3px] border-l-accent-primary/50">
+      <div className="px-5 py-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-semibold truncate text-text-primary">
+              {dataset.name}
+            </div>
+            {dataset.description && (
+              <TTSDatasetDescription description={dataset.description} />
+            )}
+            {dataset.dataset_metadata?.sample_count !== undefined && (
+              <div className="mt-2 text-xs text-text-secondary">
+                {dataset.dataset_metadata.sample_count} samples
+              </div>
+            )}
+          </div>
+          <div className="flex items-center gap-2 shrink-0">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onView}
+              disabled={isViewing}
+            >
+              {isViewing ? "Loading..." : "View"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/text-to-speech/TTSResultRow.tsx b/app/components/text-to-speech/TTSResultRow.tsx
new file mode 100644
index 00000000..c4350b9a
--- /dev/null
+++ b/app/components/text-to-speech/TTSResultRow.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import { TTSResult, TTSScore } from "@/app/lib/types/textToSpeech";
+import AudioPlayerFromUrl from "./AudioPlayerFromUrl";
+
+interface TTSResultRowProps {
+  result: TTSResult;
+  index: number;
+  isPlaying: boolean;
+  onPlayToggle: () => void;
+  onUpdateLocalScore: (score: TTSScore) => void;
+  onUpdateLocalCorrect: (value: boolean | null) => void;
+  onUpdateLocalComment: (value: string) => void;
+  onCommitFeedback: (
+    isCorrect: boolean | null | undefined,
+    comment?: string,
+    score?: TTSScore,
+  ) => void;
+}
+
+const ratingClass = (
+  rating: string,
+): { bg: string; border: string; text: string } => {
+  if (!rating) {
+    return {
+      bg: "bg-bg-primary",
+      border: "border-border",
+      text: "text-text-primary",
+    };
+  }
+  if (rating === "High") {
+    return {
+      bg: "bg-green-600/10",
+      border: "border-status-success",
+      text: "text-status-success",
+    };
+  }
+  if (rating === "Medium") {
+    return {
+      bg: "bg-yellow-500/10",
+      border: "border-yellow-500",
+      text: "text-yellow-600",
+    };
+  }
+  return {
+    bg: "bg-red-500/10",
+    border: "border-status-error",
+    text: "text-status-error",
+  };
+};
+
+const correctnessClass = (
+  value: boolean | null,
+): { bg: string; border: string; text: string } => {
+  if (value === null) {
+    return {
+      bg: "bg-bg-primary",
+      border: "border-border",
+      text: "text-text-primary",
+    };
+  }
+  if (value) {
+    return {
+      bg: "bg-green-600/10",
+      border: "border-status-success",
+      text: "text-status-success",
+    };
+  }
+  return {
+    bg: "bg-red-500/10",
+    border: "border-status-error",
+    text: "text-status-error",
+  };
+};
+
+export default function TTSResultRow({
+  result,
+  index,
+  isPlaying,
+  onPlayToggle,
+  onUpdateLocalScore,
+  onUpdateLocalCorrect,
+  onUpdateLocalComment,
+  onCommitFeedback,
+}: TTSResultRowProps) {
+  const isSuccess = result.status === "SUCCESS";
+
+  const snVal =
+    result.score?.["Speech Naturalness"] ||
+    result.score?.speech_naturalness ||
+    "";
+  const normalizedSn = snVal
+    ? snVal.charAt(0).toUpperCase() + snVal.slice(1).toLowerCase()
+    : "";
+
+  const paVal =
+    result.score?.["Pronunciation Accuracy"] ||
+    result.score?.pronunciation_accuracy ||
+    "";
+  const normalizedPa = paVal
+    ? paVal.charAt(0).toUpperCase() + paVal.slice(1).toLowerCase()
+    : "";
+
+  const isCorrectValue =
+    result.is_correct === null ? "" : result.is_correct ? "true" : "false";
+
+  const snStyles = ratingClass(normalizedSn);
+  const paStyles = ratingClass(normalizedPa);
+  const correctStyles = correctnessClass(result.is_correct);
+
+  const disabledClass = isSuccess
+    ? "cursor-pointer opacity-100"
+    : "cursor-not-allowed opacity-50";
+
+  return (
+    <tr className="border-b border-border">
+      <td className="px-4 py-3 text-sm align-top text-text-primary">
+        <div className="overflow-y-auto max-h-20 leading-relaxed">
+          {result.sample_text || "-"}
+        </div>
+      </td>
+      <td className="px-4 py-3 text-sm align-top">
+        {result.signedUrl ? (
+          <AudioPlayerFromUrl
+            signedUrl={result.signedUrl}
+            isPlaying={isPlaying}
+            onPlayToggle={onPlayToggle}
+            sampleLabel={`Sample ${index + 1}`}
+            durationSeconds={result.duration_seconds}
+            sizeBytes={result.size_bytes}
+          />
+        ) : (
+          <span className="text-xs text-text-secondary">
+            {result.status === "SUCCESS" ? "No audio available" : "-"}
+          </span>
+        )}
+      </td>
+      <td className="px-3 py-3 text-sm align-top">
+        <select
+          value={normalizedSn}
+          onChange={(e) => {
+            const value = e.target.value || null;
+            const newScore: TTSScore = {
+              ...(result.score || {}),
+              "Speech Naturalness": value,
+            };
+            onUpdateLocalScore(newScore);
+            onCommitFeedback(result.is_correct, undefined, {
+              "Speech Naturalness": value,
+            });
+          }}
+          disabled={!isSuccess}
+          className={`w-full px-2 py-1.5 border rounded text-xs font-medium ${snStyles.bg} ${snStyles.border} ${snStyles.text} ${disabledClass}`}
+        >
+          <option value="">-</option>
+          <option value="High">High</option>
+          <option value="Medium">Medium</option>
+          <option value="Low">Low</option>
+        </select>
+      </td>
+      <td className="px-3 py-3 text-sm align-top">
+        <select
+          value={normalizedPa}
+          onChange={(e) => {
+            const value = e.target.value || null;
+            const newScore: TTSScore = {
+              ...(result.score || {}),
+              "Pronunciation Accuracy": value,
+            };
+            onUpdateLocalScore(newScore);
+            onCommitFeedback(result.is_correct, undefined, {
+              "Pronunciation Accuracy": value,
+            });
+          }}
+          disabled={!isSuccess}
+          className={`w-full px-2 py-1.5 border rounded text-xs font-medium ${paStyles.bg} ${paStyles.border} ${paStyles.text} ${disabledClass}`}
+        >
+          <option value="">-</option>
+          <option value="High">High</option>
+          <option value="Medium">Medium</option>
+          <option value="Low">Low</option>
+        </select>
+      </td>
+      <td className="px-3 py-3 text-sm align-top">
+        <select
+          value={isCorrectValue}
+          onChange={(e) => {
+            const value = e.target.value;
+            const next = value === "" ? null : value === "true";
+            onUpdateLocalCorrect(next);
+            onCommitFeedback(next);
+          }}
+          disabled={!isSuccess}
+          className={`w-full px-2 py-1.5 border rounded text-xs font-medium ${correctStyles.bg} ${correctStyles.border} ${correctStyles.text} ${disabledClass}`}
+        >
+          <option value="">-</option>
+          <option value="true">Yes</option>
+          <option value="false">No</option>
+        </select>
+      </td>
+      <td className="px-4 py-3 text-sm align-top">
+        <textarea
+          value={result.comment || ""}
+          onChange={(e) => onUpdateLocalComment(e.target.value)}
+          onBlur={(e) => {
+            if (isSuccess) {
+              onCommitFeedback(result.is_correct, e.target.value);
+            }
+          }}
+          placeholder="Add comment..."
+          rows={2}
+          disabled={!isSuccess}
+          className={`w-full px-2 py-1.5 border rounded text-xs resize-y bg-bg-primary border-border text-text-primary ${
+            isSuccess
+              ? "opacity-100 cursor-text"
+              : "opacity-50 cursor-not-allowed"
+          }`}
+        />
+      </td>
+    </tr>
+  );
+}
diff --git a/app/components/text-to-speech/TTSResultsTable.tsx b/app/components/text-to-speech/TTSResultsTable.tsx
new file mode 100644
index 00000000..b77543dc
--- /dev/null
+++ b/app/components/text-to-speech/TTSResultsTable.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { TTSResult, TTSScore } from "@/app/lib/types/textToSpeech";
+import { ResultsTableSkeleton } from "@/app/components";
+import TTSResultRow from "./TTSResultRow";
+import TTSScoreInfoTooltip from "./TTSScoreInfoTooltip";
+
+interface TTSResultsTableProps {
+  results: TTSResult[];
+  isLoading: boolean;
+  setResults: React.Dispatch<React.SetStateAction<TTSResult[]>>;
+  onUpdateFeedback: (
+    resultId: number,
+    isCorrect: boolean | null | undefined,
+    comment?: string,
+    score?: TTSScore,
+  ) => void;
+}
+
+type ScoreInfoKey = "speech_naturalness" | "pronunciation_accuracy";
+
+export default function TTSResultsTable({
+  results,
+  isLoading,
+  setResults,
+  onUpdateFeedback,
+}: TTSResultsTableProps) {
+  const [playingResultId, setPlayingResultId] = useState<number | null>(null);
+  const [openScoreInfo, setOpenScoreInfo] = useState<ScoreInfoKey | null>(null);
+  const [scoreInfoPos, setScoreInfoPos] = useState({ top: 0, left: 0 });
+
+  useEffect(() => {
+    if (!openScoreInfo) return;
+    const handleClose = () => setOpenScoreInfo(null);
+    document.addEventListener("click", handleClose);
+    document.addEventListener("scroll", handleClose, true);
+    return () => {
+      document.removeEventListener("click", handleClose);
+      document.removeEventListener("scroll", handleClose, true);
+    };
+  }, [openScoreInfo]);
+
+  const handleScoreInfoClick = (
+    e: React.MouseEvent<HTMLSpanElement>,
+    key: ScoreInfoKey,
+  ) => {
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    setScoreInfoPos({ top: rect.bottom + 4, left: rect.left });
+    setOpenScoreInfo(openScoreInfo === key ? null : key);
+  };
+
+  if (isLoading) {
+    return <ResultsTableSkeleton rows={5} cols={6} />;
+  }
+
+  if (results.length === 0) {
+    return (
+      <div className="p-16 text-center">
+        <p className="text-sm font-medium mb-1 text-text-primary">
+          No results found
+        </p>
+        <p className="text-xs text-text-secondary">
+          This evaluation has no results yet
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <table className="w-full min-w-[900px]">
+      <thead>
+        <tr className="bg-bg-secondary border-b border-border">
+          <th className="text-left px-4 py-3 text-xs font-medium align-top text-text-secondary w-[24%]">
+            Text
+          </th>
+          <th className="text-left px-4 py-3 text-xs font-medium align-top text-text-secondary w-[18%]">
+            Audio
+          </th>
+          <th className="text-left px-3 py-3 text-xs font-medium align-top text-text-secondary w-[12%]">
+            <div>
+              <div>Speech</div>
+              <div>
+                Naturalness{" "}
+                <span
+                  onClick={(e) => handleScoreInfoClick(e, "speech_naturalness")}
+                  className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer align-middle bg-bg-primary border border-border text-text-secondary"
+                >
+                  i
+                </span>
+                {openScoreInfo === "speech_naturalness" && (
+                  <TTSScoreInfoTooltip
+                    metricKey="speech_naturalness"
+                    position={scoreInfoPos}
+                  />
+                )}
+              </div>
+            </div>
+          </th>
+          <th className="text-left px-3 py-3 text-xs font-medium align-top text-text-secondary w-[12%]">
+            <div>
+              <div>Pronunciation</div>
+              <div>
+                Accuracy{" "}
+                <span
+                  onClick={(e) =>
+                    handleScoreInfoClick(e, "pronunciation_accuracy")
+                  }
+                  className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer align-middle bg-bg-primary border border-border text-text-secondary"
+                >
+                  i
+                </span>
+                {openScoreInfo === "pronunciation_accuracy" && (
+                  <TTSScoreInfoTooltip
+                    metricKey="pronunciation_accuracy"
+                    position={scoreInfoPos}
+                  />
+                )}
+              </div>
+            </div>
+          </th>
+          <th className="text-left px-3 py-3 text-xs font-medium align-top text-text-secondary w-[12%]">
+            Is Correct
+          </th>
+          <th className="text-left px-4 py-3 text-xs font-medium align-top text-text-secondary w-[18%]">
+            Comment
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {results.map((result, idx) => (
+          <TTSResultRow
+            key={result.id}
+            result={result}
+            index={idx}
+            isPlaying={playingResultId === result.id}
+            onPlayToggle={() =>
+              setPlayingResultId(
+                playingResultId === result.id ? null : result.id,
+              )
+            }
+            onUpdateLocalScore={(newScore) =>
+              setResults((prev) =>
+                prev.map((r) =>
+                  r.id === result.id ? { ...r, score: newScore } : r,
+                ),
+              )
+            }
+            onUpdateLocalCorrect={(value) =>
+              setResults((prev) =>
+                prev.map((r) =>
+                  r.id === result.id ? { ...r, is_correct: value } : r,
+                ),
+              )
+            }
+            onUpdateLocalComment={(value) =>
+              setResults((prev) =>
+                prev.map((r) =>
+                  r.id === result.id ? { ...r, comment: value } : r,
+                ),
+              )
+            }
+            onCommitFeedback={(isCorrect, comment, score) =>
+              onUpdateFeedback(result.id, isCorrect, comment, score)
+            }
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/app/components/text-to-speech/TTSRunCard.tsx b/app/components/text-to-speech/TTSRunCard.tsx
new file mode 100644
index 00000000..35e9475e
--- /dev/null
+++ b/app/components/text-to-speech/TTSRunCard.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { TTSRun } from "@/app/lib/types/textToSpeech";
+import { Button } from "@/app/components";
+import { DatabaseIcon } from "@/app/components/icons";
+import { getStatusColor } from "@/app/components/utils";
+
+interface TTSRunCardProps {
+  run: TTSRun;
+  loadingRunId: number | null;
+  onLoadResults: () => void;
+}
+
+export default function TTSRunCard({
+  run,
+  loadingRunId,
+  onLoadResults,
+}: TTSRunCardProps) {
+  const isCompleted = run.status.toLowerCase() === "completed";
+  const statusColor = getStatusColor(run.status);
+  const isLoading = loadingRunId === run.id;
+  const disabled = !isCompleted || loadingRunId !== null;
+
+  return (
+    <div
+      className={`rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-3 ${statusColor.border}`}
+    >
+      <div className="px-5 py-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-semibold truncate text-text-primary">
+              {run.run_name}
+            </div>
+            {run.error_message && (
+              <div className="mt-2 text-xs wrap-break-word overflow-hidden text-status-error-text">
+                {run.error_message}
+              </div>
+            )}
+          </div>
+          <span
+            className={`px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide shrink-0 ${statusColor.bg} ${statusColor.text}`}
+          >
+            {run.status}
+          </span>
+        </div>
+
+        <div className="flex items-center justify-between gap-4 mt-3">
+          <div className="flex items-center gap-3 text-xs text-text-secondary">
+            <span className="flex items-center gap-1.5">
+              <DatabaseIcon className="w-3.5 h-3.5 shrink-0" />
+              {run.dataset_name}
+            </span>
+            {run.models && run.models.length > 0 && (
+              <span className="px-1.5 py-0.5 rounded bg-bg-secondary">
+                {run.models.join(", ")}
+              </span>
+            )}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={
+              isCompleted && loadingRunId === null ? onLoadResults : undefined
+            }
+            disabled={disabled}
+            className="shrink-0"
+          >
+            {isLoading && (
+              <div className="w-3 h-3 border-2 border-text-secondary border-t-transparent rounded-full animate-spin" />
+            )}
+            {isLoading ? "Loading..." : "View Results"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/text-to-speech/TTSRunsList.tsx b/app/components/text-to-speech/TTSRunsList.tsx
new file mode 100644
index 00000000..bcd65187
--- /dev/null
+++ b/app/components/text-to-speech/TTSRunsList.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { TTSRun, TTSResult, TTSScore } from "@/app/lib/types/textToSpeech";
+import {
+  ChevronLeftIcon,
+  ClipboardIcon,
+  RefreshIcon,
+} from "@/app/components/icons";
+import { RunsListSkeleton } from "@/app/components";
+import TTSRunCard from "./TTSRunCard";
+import TTSResultsTable from "./TTSResultsTable";
+
+interface TTSRunsListProps {
+  runs: TTSRun[];
+  isLoadingRuns: boolean;
+  loadRuns: () => void;
+  selectedRunId: number | null;
+  setSelectedRunId: (id: number | null) => void;
+  results: TTSResult[];
+  setResults: React.Dispatch<React.SetStateAction<TTSResult[]>>;
+  isLoadingResults: boolean;
+  loadResults: (runId: number) => void;
+  onUpdateFeedback: (
+    resultId: number,
+    isCorrect: boolean | null | undefined,
+    comment?: string,
+    score?: TTSScore,
+  ) => void;
+}
+
+export default function TTSRunsList({
+  runs,
+  isLoadingRuns,
+  loadRuns,
+  selectedRunId,
+  setSelectedRunId,
+  results,
+  setResults,
+  isLoadingResults,
+  loadResults,
+  onUpdateFeedback,
+}: TTSRunsListProps) {
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [loadingRunId, setLoadingRunId] = useState<number | null>(null);
+
+  useEffect(() => {
+    setLoadingRunId(null);
+  }, [selectedRunId]);
+
+  const selectedRun = runs.find((r) => r.id === selectedRunId);
+
+  const filteredRuns =
+    statusFilter === "all"
+      ? runs
+      : runs.filter((r) => r.status.toLowerCase() === statusFilter);
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden bg-bg-secondary">
+      <div className="flex-1 overflow-auto p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            {selectedRunId !== null ? (
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => {
+                    setSelectedRunId(null);
+                    setLoadingRunId(null);
+                  }}
+                  className="p-1 rounded text-text-secondary cursor-pointer"
+                  aria-label="Back to runs list"
+                >
+                  <ChevronLeftIcon className="w-4 h-4" />
+                </button>
+                <h2 className="text-base font-semibold text-text-primary">
+                  {selectedRun?.run_name}
+                </h2>
+              </div>
+            ) : (
+              <h2 className="text-base font-semibold text-text-primary">
+                Evaluation Runs
+              </h2>
+            )}
+          </div>
+          {selectedRunId === null && (
+            <div className="flex items-center gap-2">
+              <select
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value)}
+                className="px-2.5 py-1 rounded-md text-xs font-medium border appearance-none cursor-pointer pr-7 bg-bg-primary border-border text-text-primary bg-no-repeat bg-position-[right_6px_center] bg-[url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2712%27%20height=%2712%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23737373%27%20stroke-width=%272%27%3E%3Cpath%20d=%27M6%209l6%206%206-6%27/%3E%3C/svg%3E')]"
+              >
+                <option value="all">All Status</option>
+                <option value="completed">Completed</option>
+                <option value="processing">Processing</option>
+                <option value="pending">Pending</option>
+                <option value="failed">Failed</option>
+              </select>
+              <button
+                onClick={loadRuns}
+                disabled={isLoadingRuns}
+                className="p-1.5 rounded text-text-secondary cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+                aria-label="Refresh runs"
+              >
+                <RefreshIcon
+                  className={`w-4 h-4 ${isLoadingRuns ? "animate-spin" : ""}`}
+                />
+              </button>
+            </div>
+          )}
+        </div>
+
+        <div className="rounded-lg overflow-visible bg-bg-primary shadow-sm">
+          {selectedRunId !== null ? (
+            <TTSResultsTable
+              results={results}
+              isLoading={isLoadingResults}
+              setResults={setResults}
+              onUpdateFeedback={onUpdateFeedback}
+            />
+          ) : isLoadingRuns ? (
+            <RunsListSkeleton />
+          ) : runs.length === 0 ? (
+            <div className="p-16 text-center">
+              <ClipboardIcon className="w-12 h-12 mx-auto mb-3 text-border" />
+              <p className="text-sm font-medium mb-1 text-text-primary">
+                No evaluation runs yet
+              </p>
+              <p className="text-xs text-text-secondary">
+                Run your first evaluation to get started
+              </p>
+            </div>
+          ) : filteredRuns.length === 0 ? (
+            <div className="p-16 text-center">
+              <p className="text-sm font-medium mb-1 text-text-primary">
+                No {statusFilter} runs
+              </p>
+              <p className="text-xs text-text-secondary">
+                No evaluation runs with status &quot;{statusFilter}&quot;
+              </p>
+            </div>
+          ) : (
+            <div className="p-4 space-y-3">
+              {filteredRuns.map((run) => (
+                <TTSRunCard
+                  key={run.id}
+                  run={run}
+                  loadingRunId={loadingRunId}
+                  onLoadResults={() => {
+                    setLoadingRunId(run.id);
+                    loadResults(run.id);
+                  }}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/text-to-speech/TTSScoreInfoTooltip.tsx b/app/components/text-to-speech/TTSScoreInfoTooltip.tsx
new file mode 100644
index 00000000..8375e4c5
--- /dev/null
+++ b/app/components/text-to-speech/TTSScoreInfoTooltip.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+interface TooltipContent {
+  title: string;
+  description: string;
+  high: string;
+  medium: string;
+  low: string;
+}
+
+const CONTENT: Record<string, TooltipContent> = {
+  speech_naturalness: {
+    title: "Speech Naturalness",
+    description: "Assesses how human-like the generated speech sounds.",
+    high: "Very human-like, natural flow with appropriate pauses and inflections.",
+    medium:
+      "Some human qualities but with occasional robotic or awkward elements.",
+    low: "Clearly robotic or artificial, with choppy or monotone speech.",
+  },
+  pronunciation_accuracy: {
+    title: "Pronunciation Accuracy",
+    description:
+      "Evaluates how clearly and correctly words are pronounced in the TTS output.",
+    high: "All words are pronounced clearly and correctly.",
+    medium: "1-2 words are mispronounced or unclear.",
+    low: "3 or more words are mispronounced or difficult to understand.",
+  },
+};
+
+interface TTSScoreInfoTooltipProps {
+  metricKey: "speech_naturalness" | "pronunciation_accuracy";
+  position: { top: number; left: number };
+}
+
+export default function TTSScoreInfoTooltip({
+  metricKey,
+  position,
+}: TTSScoreInfoTooltipProps) {
+  const content = CONTENT[metricKey];
+
+  return (
+    <div
+      className="fixed z-50 rounded-lg shadow-lg border text-xs bg-bg-primary border-border w-[340px]"
+      style={{ top: position.top, left: position.left }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="p-3">
+        <div className="font-semibold mb-2 text-text-primary">
+          {content.title}
+        </div>
+        <p className="mb-3 text-text-secondary font-sans">
+          {content.description}
+        </p>
+        <div className="mb-1 font-semibold text-text-primary">Scoring</div>
+        <div className="space-y-2 p-2 rounded bg-bg-secondary">
+          <div className="flex">
+            <span className="font-semibold shrink-0 text-status-success w-[62px]">
+              High:
+            </span>
+            <span className="text-text-primary">{content.high}</span>
+          </div>
+          <div className="flex">
+            <span className="font-semibold shrink-0 text-yellow-600 w-[62px]">
+              Medium:
+            </span>
+            <span className="text-text-primary">{content.medium}</span>
+          </div>
+          <div className="flex">
+            <span className="font-semibold shrink-0 text-status-error w-[62px]">
+              Low:
+            </span>
+            <span className="text-text-primary">{content.low}</span>
+          </div>
+        </div>
+        <div className="mt-2 font-semibold text-status-success">
+          Higher is better.
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/text-to-speech/TTSViewDatasetModal.tsx b/app/components/text-to-speech/TTSViewDatasetModal.tsx
new file mode 100644
index 00000000..a989e67e
--- /dev/null
+++ b/app/components/text-to-speech/TTSViewDatasetModal.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { Button, Modal } from "@/app/components";
+import { TTSViewDatasetModalData } from "@/app/lib/types/textToSpeech";
+
+interface TTSViewDatasetModalProps {
+  data: TTSViewDatasetModalData;
+  onClose: () => void;
+}
+
+export default function TTSViewDatasetModal({
+  data,
+  onClose,
+}: TTSViewDatasetModalProps) {
+  const handleDownload = () => {
+    const csvLines = [data.headers.join(",")];
+    data.rows.forEach((row) => {
+      csvLines.push(
+        row
+          .map((cell) =>
+            cell.includes(",") || cell.includes('"') || cell.includes("\n")
+              ? `"${cell.replace(/"/g, '""')}"`
+              : cell,
+          )
+          .join(","),
+      );
+    });
+    const blob = new Blob([csvLines.join("\n")], {
+      type: "text/csv;charset=utf-8;",
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${data.name}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Modal
+      open
+      onClose={onClose}
+      title={data.name}
+      maxWidth="max-w-[1000px]"
+      maxHeight="max-h-[80vh]"
+    >
+      <div className="sticky top-0 bg-bg-primary border-b border-border px-6 py-3 flex items-center justify-between gap-4 z-10">
+        <p className="text-xs text-text-secondary">
+          {data.rows.length} rows · {data.headers.length} columns
+        </p>
+        <Button size="sm" onClick={handleDownload}>
+          Download CSV
+        </Button>
+      </div>
+
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="bg-bg-secondary border-b border-border">
+            <th className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-13 text-text-secondary bg-bg-secondary w-10" />
+            {data.headers.map((header, i) => (
+              <th
+                key={i}
+                className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-13 text-text-secondary bg-bg-secondary"
+              >
+                {header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.rows.map((row, rowIdx) => {
+            const isLast = rowIdx === data.rows.length - 1;
+            return (
+              <tr
+                key={rowIdx}
+                className={isLast ? "" : "border-b border-border"}
+              >
+                <td className="px-4 py-2.5 text-xs text-text-secondary">
+                  {rowIdx + 1}
+                </td>
+                {row.map((cell, cellIdx) => (
+                  <td key={cellIdx} className="px-4 py-2.5 text-text-primary">
+                    <div className="text-sm max-h-[120px] overflow-auto leading-relaxed">
+                      {cell || <span className="text-text-secondary">—</span>}
+                    </div>
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </Modal>
+  );
+}
diff --git a/app/favicon.ico b/app/favicon.ico
index 76c320f5..03f3370a 100644
Binary files a/app/favicon.ico and b/app/favicon.ico differ
diff --git a/app/hooks/useAssessmentResults.ts b/app/hooks/useAssessmentResults.ts
new file mode 100644
index 00000000..b12d0659
--- /dev/null
+++ b/app/hooks/useAssessmentResults.ts
@@ -0,0 +1,477 @@
+"use client";
+
+// Fetches, polls, and manages assessment run list state including filtering and retry.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { apiFetch } from "@/app/lib/apiClient";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import {
+  getConfigDetailErrorMessage,
+  handleForbiddenError,
+  isAbortError,
+} from "@/app/lib/utils/assessment";
+import {
+  filterAssessments,
+  getAsyncErrorMessage,
+  getResultsCounts,
+  isActiveStatus,
+  isCompletedStatus,
+  isFailedStatus,
+  jsonResultsToTableData,
+} from "@/app/lib/assessment/results";
+import {
+  ASSESSMENT_TAG,
+  RESULTS_POLL_INTERVAL_MS,
+} from "@/app/lib/assessment/constants";
+import type {
+  ConfigResponse,
+  ConfigVersionResponse,
+} from "@/app/lib/types/configs";
+import type {
+  AssessmentChildRun,
+  AssessmentChildRunListResponse,
+  AssessmentListResponse,
+  AssessmentResultsPreview,
+  AssessmentRun,
+  ConfigRunDetail,
+  ExportFormat,
+  StatusFilter,
+} from "@/app/lib/types/assessment";
+import type { ToastContextType } from "@/app/lib/types/toast";
+
+interface UseAssessmentResultsParams {
+  onForbidden?: () => void;
+  toast: ToastContextType;
+}
+
+function safeCount(value: unknown, fallback = 0): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function normalizeAssessmentRun(run: AssessmentRun): AssessmentRun {
+  const runStats = Array.isArray(run.run_stats) ? run.run_stats : [];
+  const pendingRuns = safeCount(
+    run.pending_runs,
+    runStats.filter((item) => item.status === "pending").length,
+  );
+  const processingRuns = safeCount(
+    run.processing_runs,
+    Math.max(
+      0,
+      runStats.filter((item) => isActiveStatus(item.status)).length -
+        pendingRuns,
+    ),
+  );
+  const completedRuns = safeCount(
+    run.completed_runs,
+    runStats.filter((item) => isCompletedStatus(item.status)).length,
+  );
+  const failedRuns = safeCount(
+    run.failed_runs,
+    runStats.filter((item) => isFailedStatus(item.status)).length,
+  );
+  const totalRuns = safeCount(
+    run.total_runs,
+    runStats.length ||
+      pendingRuns + processingRuns + completedRuns + failedRuns,
+  );
+
+  return {
+    ...run,
+    total_runs: totalRuns,
+    pending_runs: pendingRuns,
+    processing_runs: processingRuns,
+    completed_runs: completedRuns,
+    failed_runs: failedRuns,
+  };
+}
+
+export default function useAssessmentResults({
+  onForbidden,
+  toast,
+}: UseAssessmentResultsParams) {
+  const { activeKey, isAuthenticated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+  const [assessments, setAssessments] = useState<AssessmentRun[]>([]);
+  const [childRunsByAssessment, setChildRunsByAssessment] = useState<
+    Record<number, AssessmentChildRun[]>
+  >({});
+  const [configDetailsByKey, setConfigDetailsByKey] = useState<
+    Record<string, ConfigRunDetail>
+  >({});
+  const [configLoadingKeys, setConfigLoadingKeys] = useState<
+    Record<string, boolean>
+  >({});
+  const [configErrorKeys, setConfigErrorKeys] = useState<
+    Record<string, string>
+  >({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+  const [rerunningId, setRerunningId] = useState<number | null>(null);
+  const [retryingAssessmentId, setRetryingAssessmentId] = useState<
+    number | null
+  >(null);
+  const [expandedId, setExpandedId] = useState<number | null>(null);
+  const [downloadingId, setDownloadingId] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState<number | null>(null);
+  const [previewModal, setPreviewModal] =
+    useState<AssessmentResultsPreview | null>(null);
+  const configDetailControllersRef = useRef<Record<string, AbortController>>(
+    {},
+  );
+  const configDetailFetchedRef = useRef<Record<string, boolean>>({});
+
+  const buildAuthHeaders = useCallback(() => {
+    const headers = new Headers();
+    if (apiKey) headers.set("X-API-KEY", apiKey);
+    return headers;
+  }, [apiKey]);
+
+  const loadAssessments = useCallback(async () => {
+    if (!isAuthenticated) return;
+    setIsLoading(true);
+    try {
+      const data = await apiFetch<AssessmentListResponse>(
+        "/api/assessment/assessments",
+        apiKey,
+      );
+      const list = Array.isArray(data) ? data : data.data || [];
+      setAssessments(list.map(normalizeAssessmentRun));
+    } catch (e) {
+      if (handleForbiddenError(e, onForbidden)) return;
+      console.error("Failed to load assessments:", e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiKey, isAuthenticated, onForbidden]);
+
+  const loadChildRuns = useCallback(
+    async (assessmentId: number) => {
+      if (!isAuthenticated) return;
+      try {
+        const data = await apiFetch<AssessmentChildRunListResponse>(
+          `/api/assessment/runs?assessment_id=${assessmentId}`,
+          apiKey,
+        );
+        const list = Array.isArray(data) ? data : data.data || [];
+        setChildRunsByAssessment((prev) => ({ ...prev, [assessmentId]: list }));
+      } catch (e) {
+        if (handleForbiddenError(e, onForbidden)) return;
+        console.error("Failed to load child runs:", e);
+      }
+    },
+    [apiKey, isAuthenticated, onForbidden],
+  );
+
+  const loadConfigDetail = useCallback(
+    async (configId: string, version: number) => {
+      if (!isAuthenticated) return;
+
+      const key = `${configId}:${version}`;
+      if (configDetailFetchedRef.current[key]) return;
+      configDetailFetchedRef.current[key] = true;
+
+      setConfigLoadingKeys((prev) => ({ ...prev, [key]: true }));
+      setConfigErrorKeys((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+
+      configDetailControllersRef.current[key]?.abort();
+      const controller = new AbortController();
+      configDetailControllersRef.current[key] = controller;
+
+      try {
+        const query = new URLSearchParams({ tag: ASSESSMENT_TAG });
+        const [configResponse, versionResponse] = await Promise.all([
+          apiFetch<ConfigResponse>(
+            `/api/configs/${configId}?${query.toString()}`,
+            apiKey,
+            { signal: controller.signal },
+          ),
+          apiFetch<ConfigVersionResponse>(
+            `/api/configs/${configId}/versions/${version}?${query.toString()}`,
+            apiKey,
+            { signal: controller.signal },
+          ),
+        ]);
+
+        if (
+          !configResponse.success ||
+          !configResponse.data ||
+          !versionResponse.success ||
+          !versionResponse.data
+        ) {
+          throw new Error(
+            configResponse.error ||
+              versionResponse.error ||
+              "Configuration details unavailable",
+          );
+        }
+
+        const detail: ConfigRunDetail = {
+          configId,
+          version,
+          name: configResponse.data.name,
+          description: configResponse.data.description,
+          commitMessage: versionResponse.data.commit_message,
+          provider:
+            versionResponse.data.config_blob?.completion?.provider || null,
+          model:
+            versionResponse.data.config_blob?.completion?.params?.model || null,
+        };
+
+        setConfigDetailsByKey((prev) => ({ ...prev, [key]: detail }));
+      } catch (error) {
+        if (isAbortError(error)) return;
+        setConfigErrorKeys((prev) => ({
+          ...prev,
+          [key]: getConfigDetailErrorMessage(error),
+        }));
+      } finally {
+        if (configDetailControllersRef.current[key] === controller) {
+          delete configDetailControllersRef.current[key];
+        }
+        setConfigLoadingKeys((prev) => {
+          const next = { ...prev };
+          delete next[key];
+          return next;
+        });
+      }
+    },
+    [apiKey, isAuthenticated],
+  );
+
+  useEffect(() => {
+    const controllers = configDetailControllersRef.current;
+    return () => {
+      Object.values(controllers).forEach((controller) => controller.abort());
+    };
+  }, []);
+
+  useEffect(() => {
+    loadAssessments();
+  }, [loadAssessments]);
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    const timer = setInterval(() => {
+      void loadAssessments();
+      if (expandedId !== null) {
+        void loadChildRuns(expandedId);
+      }
+    }, RESULTS_POLL_INTERVAL_MS);
+
+    return () => clearInterval(timer);
+  }, [expandedId, isAuthenticated, loadAssessments, loadChildRuns]);
+
+  useEffect(() => {
+    if (expandedId === null) return;
+    const runs = childRunsByAssessment[expandedId] || [];
+    runs.forEach((run) => {
+      if (run.config_id && run.config_version) {
+        void loadConfigDetail(run.config_id, run.config_version);
+      }
+    });
+  }, [childRunsByAssessment, expandedId, loadConfigDetail]);
+
+  const triggerDownload = useCallback(
+    async (url: string, format: ExportFormat, key: string) => {
+      if (!isAuthenticated) return;
+      setDownloadingId(key);
+      try {
+        const response = await fetch(`${url}?export_format=${format}`, {
+          headers: buildAuthHeaders(),
+          credentials: "include",
+        });
+        if (response.status === 403) {
+          onForbidden?.();
+          return;
+        }
+        if (!response.ok) {
+          const err = await response.json().catch(() => ({}));
+          throw new Error(
+            err.error ||
+              err.message ||
+              err.detail ||
+              `Export failed (${response.status})`,
+          );
+        }
+        const blob = await response.blob();
+        const disposition = response.headers.get("content-disposition") || "";
+        const filenameMatch = disposition.match(/filename="?([^"]+)"?/);
+        const filename = filenameMatch?.[1] || `export.${format}`;
+
+        const a = document.createElement("a");
+        a.href = URL.createObjectURL(blob);
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(a.href);
+        toast.success("Download started");
+      } catch (error) {
+        toast.error(getAsyncErrorMessage("Export failed", error));
+      } finally {
+        setDownloadingId(null);
+      }
+    },
+    [buildAuthHeaders, isAuthenticated, onForbidden, toast],
+  );
+
+  const handleAssessmentDownload = useCallback(
+    (assessmentId: number, format: ExportFormat) =>
+      triggerDownload(
+        `/api/assessment/assessments/${assessmentId}/results`,
+        format,
+        `assessment-${assessmentId}`,
+      ),
+    [triggerDownload],
+  );
+
+  const handleRunDownload = useCallback(
+    (runId: number, format: ExportFormat) =>
+      triggerDownload(
+        `/api/assessment/runs/${runId}/results`,
+        format,
+        `run-${runId}`,
+      ),
+    [triggerDownload],
+  );
+
+  const handleRerun = useCallback(
+    async (run: AssessmentChildRun) => {
+      if (!isAuthenticated) {
+        toast.error("Please sign in to retry this run");
+        return;
+      }
+
+      setRerunningId(run.id);
+      try {
+        await apiFetch(`/api/assessment/runs/${run.id}/retry`, apiKey, {
+          method: "POST",
+        });
+
+        toast.success("Run re-submitted successfully!");
+        void loadAssessments();
+        if (run.assessment_id) {
+          void loadChildRuns(run.assessment_id);
+        }
+      } catch (error) {
+        if (handleForbiddenError(error, onForbidden)) return;
+        toast.error(getAsyncErrorMessage("Re-run failed", error));
+      } finally {
+        setRerunningId(null);
+      }
+    },
+    [
+      apiKey,
+      isAuthenticated,
+      loadAssessments,
+      loadChildRuns,
+      onForbidden,
+      toast,
+    ],
+  );
+
+  const handleRetryAssessment = useCallback(
+    async (assessmentId: number) => {
+      if (!isAuthenticated) {
+        toast.error("Please sign in to retry this assessment");
+        return;
+      }
+
+      setRetryingAssessmentId(assessmentId);
+      try {
+        await apiFetch(
+          `/api/assessment/assessments/${assessmentId}/retry`,
+          apiKey,
+          {
+            method: "POST",
+          },
+        );
+
+        toast.success("Assessment re-submitted successfully!");
+        void loadAssessments();
+        if (expandedId !== null) {
+          void loadChildRuns(expandedId);
+        }
+      } catch (error) {
+        if (handleForbiddenError(error, onForbidden)) return;
+        toast.error(getAsyncErrorMessage("Retry failed", error));
+      } finally {
+        setRetryingAssessmentId(null);
+      }
+    },
+    [
+      apiKey,
+      expandedId,
+      isAuthenticated,
+      loadAssessments,
+      loadChildRuns,
+      onForbidden,
+      toast,
+    ],
+  );
+
+  const handleExpand = useCallback(
+    (assessmentId: number) => {
+      const next = expandedId === assessmentId ? null : assessmentId;
+      setExpandedId(next);
+      if (next !== null && !childRunsByAssessment[next]) {
+        loadChildRuns(next);
+      }
+    },
+    [childRunsByAssessment, expandedId, loadChildRuns],
+  );
+
+  const handlePreview = useCallback(
+    async (runId: number, label: string) => {
+      if (!isAuthenticated) return;
+      setPreviewLoading(runId);
+      try {
+        const json = await apiFetch<
+          { data?: Record<string, unknown>[] } | Record<string, unknown>[]
+        >(`/api/assessment/runs/${runId}/results?export_format=json`, apiKey);
+        const results: Record<string, unknown>[] = Array.isArray(json)
+          ? json
+          : json.data || [];
+        const { headers, rows } = jsonResultsToTableData(results);
+        setPreviewModal({ title: label, headers, rows });
+      } catch (error) {
+        if (handleForbiddenError(error, onForbidden)) return;
+        toast.error(getAsyncErrorMessage("Preview failed", error));
+      } finally {
+        setPreviewLoading(null);
+      }
+    },
+    [apiKey, isAuthenticated, onForbidden, toast],
+  );
+
+  return {
+    assessments,
+    counts: getResultsCounts(assessments),
+    filteredRuns: filterAssessments(assessments, statusFilter),
+    childRunsByAssessment,
+    configDetailsByKey,
+    configLoadingKeys,
+    configErrorKeys,
+    isLoading,
+    statusFilter,
+    setStatusFilter,
+    rerunningId,
+    retryingAssessmentId,
+    expandedId,
+    downloadingId,
+    previewLoading,
+    previewModal,
+    setPreviewModal,
+    loadAssessments,
+    handleExpand,
+    handleRetryAssessment,
+    handleRerun,
+    handlePreview,
+    handleAssessmentDownload,
+    handleRunDownload,
+  };
+}
diff --git a/app/hooks/useConfigs.ts b/app/hooks/useConfigs.ts
index 2e9e5c0b..0e830699 100644
--- a/app/hooks/useConfigs.ts
+++ b/app/hooks/useConfigs.ts
@@ -25,7 +25,7 @@ import {
   pendingSingleVersionLoads,
   loadCache,
   saveCache,
-} from "@/app/lib/store/configStore";
+} from "@/app/lib/store/config";
 import {
   fetchAllConfigs,
   fetchNextConfigBatch,
diff --git a/app/lib/apiClient.ts b/app/lib/apiClient.ts
index ba7233a8..79d55314 100644
--- a/app/lib/apiClient.ts
+++ b/app/lib/apiClient.ts
@@ -3,38 +3,65 @@ import { AUTH_EXPIRED_EVENT } from "@/app/lib/constants";
 
 const BACKEND_URL = process.env.BACKEND_URL || "http://localhost:8000";
 export type UploadPhase = "uploading" | "processing" | "done";
+type ApiClientOptions<TResponseType extends "json" | "raw" = "json"> =
+  RequestInit & { responseType?: TResponseType };
+type ApiClientJsonResponse<TData = unknown> = {
+  status: number;
+  data: TData | null;
+  headers: Headers;
+};
+type ApiClientResponse<
+  TData,
+  TResponseType extends "json" | "raw",
+> = TResponseType extends "raw" ? Response : ApiClientJsonResponse<TData>;
 
 /** Coalesces concurrent refresh calls into a single request. */
 let refreshPromise: Promise<boolean> | null = null;
 
 /**
  * Forwards a request to the backend, relaying auth headers (X-API-KEY, Cookie).
- * Returns raw { status, data, headers } so the route handler can relay the response.
+ * Returns either a parsed JSON payload or the raw backend response.
  */
-export async function apiClient(
+export async function apiClient<
+  TData = unknown,
+  TResponseType extends "json" | "raw" = "json",
+>(
   request: NextRequest | Request,
   endpoint: string,
-  options: RequestInit = {},
-) {
+  options: ApiClientOptions<TResponseType> = {} as ApiClientOptions<TResponseType>,
+): Promise<ApiClientResponse<TData, TResponseType>> {
+  const { responseType = "json", ...requestOptions } = options;
   const apiKey = request.headers.get("X-API-KEY") || "";
   const cookie = request.headers.get("Cookie") || "";
-  const headers = new Headers(options.headers);
-  if (!(options.body instanceof FormData) && !headers.has("Content-Type")) {
+  const headers = new Headers(requestOptions.headers);
+  if (
+    requestOptions.body !== undefined &&
+    !(requestOptions.body instanceof FormData) &&
+    !headers.has("Content-Type")
+  ) {
     headers.set("Content-Type", "application/json");
   }
   headers.set("X-API-KEY", apiKey);
   if (cookie) headers.set("Cookie", cookie);
 
   const response = await fetch(`${BACKEND_URL}${endpoint}`, {
-    ...options,
+    ...requestOptions,
     headers,
     credentials: "include",
   });
 
+  if (responseType === "raw") {
+    return response as ApiClientResponse<TData, TResponseType>;
+  }
+
   const text = response.status === 204 ? "" : await response.text();
-  const data = text ? JSON.parse(text) : null;
+  const data: unknown = text ? JSON.parse(text) : null;
 
-  return { status: response.status, data, headers: response.headers };
+  return {
+    status: response.status,
+    data: data as TData | null,
+    headers: response.headers,
+  } as ApiClientResponse<TData, TResponseType>;
 }
 
 /** Parse an error body into a readable message string. */
diff --git a/app/lib/assessment/constants.ts b/app/lib/assessment/constants.ts
new file mode 100644
index 00000000..ed6e9282
--- /dev/null
+++ b/app/lib/assessment/constants.ts
@@ -0,0 +1,143 @@
+import type {
+  ColumnRole,
+  ResultsCounts,
+  ResultTone,
+  RoleOption,
+  SchemaPropertyType,
+  StatusFilter,
+  Step,
+} from "@/app/lib/types/assessment";
+
+export const ASSESSMENT_TAG = "ASSESSMENT" as const;
+export const ASSESSMENT_FEATURE_FLAG = ASSESSMENT_TAG;
+export const ASSESSMENT_CONFIG_TAG = ASSESSMENT_TAG;
+export const ASSESSMENT_CONFIG_VERSION_PAGE_SIZE = 8;
+
+export const RESULTS_POLL_INTERVAL_MS = 60_000;
+
+export const ACTIVE_ASSESSMENT_STATUSES: ReadonlySet<string> = new Set([
+  "pending",
+  "processing",
+  "in_progress",
+]);
+export const FAILED_ASSESSMENT_STATUSES: ReadonlySet<string> = new Set([
+  "failed",
+  "completed_with_errors",
+]);
+export const COMPLETED_ASSESSMENT_STATUSES: ReadonlySet<string> = new Set([
+  "completed",
+]);
+
+export const STATUS_FILTER_OPTIONS: Array<{
+  value: StatusFilter;
+  label: string;
+}> = [
+  { value: "all", label: "All Status" },
+  { value: "processing", label: "Processing" },
+  { value: "completed", label: "Completed" },
+  { value: "failed", label: "Failed" },
+];
+
+export const RESULT_SUMMARY_ITEMS: Array<{
+  key: keyof ResultsCounts;
+  label: string;
+  tone: ResultTone;
+}> = [
+  { key: "total", label: "Total", tone: "default" },
+  { key: "processing", label: "Processing", tone: "warning" },
+  { key: "completed", label: "Completed", tone: "success" },
+  { key: "failed", label: "Failed", tone: "error" },
+];
+
+export const STATUS_BADGE_CLASSES: Record<ResultTone, string> = {
+  default: "bg-status-default-bg text-status-default-text",
+  warning: "bg-status-warning-bg text-status-warning-text",
+  success: "bg-status-success-bg text-status-success-text",
+  error: "bg-status-error-bg text-status-error-text",
+};
+
+export const ASSESSMENT_CARD_CLASSES: Record<ResultTone, string> = {
+  default: "border-l-border",
+  warning: "border-l-status-warning",
+  success: "border-l-status-success",
+  error: "border-l-status-error",
+};
+
+export const SUMMARY_BADGE_CLASSES: Record<ResultTone, string> = {
+  default: "bg-bg-secondary text-text-primary",
+  warning: "bg-bg-secondary text-status-warning-text",
+  success: "bg-bg-secondary text-status-success-text",
+  error: "bg-bg-secondary text-status-error-text",
+};
+
+export const ASSESSMENT_CONFIG_STEPS: Step[] = [
+  { id: 1, label: "Mapper" },
+  { id: 2, label: "Prompt & Config" },
+  { id: 3, label: "Review" },
+];
+
+export const SCHEMA_TYPE_OPTIONS: Array<{
+  value: SchemaPropertyType;
+  label: string;
+}> = [
+  { value: "string", label: "Text" },
+  { value: "number", label: "Number" },
+  { value: "integer", label: "Whole number" },
+  { value: "boolean", label: "Yes / No" },
+  { value: "enum", label: "Choice" },
+  { value: "object", label: "Group" },
+];
+
+export const ASSESSMENT_ROLE_OPTION_MAP: Record<ColumnRole, RoleOption> = {
+  text: {
+    value: "text",
+    label: "Text",
+  },
+  attachment: {
+    value: "attachment",
+    label: "Attachment",
+  },
+  ground_truth: {
+    value: "ground_truth",
+    label: "Ground Truth",
+  },
+  unmapped: {
+    value: "unmapped",
+    label: "Skip",
+  },
+};
+
+export const ASSESSMENT_ROLE_OPTIONS = Object.values(
+  ASSESSMENT_ROLE_OPTION_MAP,
+);
+
+export const REVIEW_SECTIONS = {
+  dataset: 1,
+  columns: 2,
+  input: 3,
+  configs: 4,
+  schema: 5,
+} as const;
+
+export const INITIAL_REVIEW_OPEN_SECTIONS = new Set<number>(
+  Object.values(REVIEW_SECTIONS),
+);
+
+export const DEFAULT_SYSTEM_PROMPT = "(not set)";
+export const DEFAULT_USER_PROMPT =
+  "(not set: backend concatenates mapped text columns)";
+
+export const DATASET_LEFT_PANEL_CLASSES = "w-[40%] min-w-[360px] max-w-[500px]";
+export const ALLOWED_DATASET_EXTENSIONS = [".csv", ".xlsx", ".xls"] as const;
+
+export const JSON_TOKEN_CLASSES = {
+  key: "text-[#0550ae]",
+  string: "text-[#116329]",
+  number: "text-[#953800]",
+  boolean: "text-[#8250df]",
+  null: "text-[#8250df]",
+  punct: "text-[#6e7781]",
+};
+
+export const JSON_EDITOR_FONT_CLASSES =
+  "font-mono text-[13px] leading-[1.7] [tab-size:2]";
diff --git a/app/lib/assessment/results.ts b/app/lib/assessment/results.ts
new file mode 100644
index 00000000..c67f3f78
--- /dev/null
+++ b/app/lib/assessment/results.ts
@@ -0,0 +1,118 @@
+// Result status utilities: status checks, counts, filters, and label formatting for assessment runs.
+import type {
+  AssessmentRun,
+  ResultTone,
+  ResultsCounts,
+  StatusFilter,
+} from "@/app/lib/types/assessment";
+import {
+  ACTIVE_ASSESSMENT_STATUSES,
+  COMPLETED_ASSESSMENT_STATUSES,
+  FAILED_ASSESSMENT_STATUSES,
+} from "@/app/lib/assessment/constants";
+
+export function isActiveStatus(status: string): boolean {
+  return ACTIVE_ASSESSMENT_STATUSES.has(status);
+}
+
+export function isFailedStatus(status: string): boolean {
+  return FAILED_ASSESSMENT_STATUSES.has(status);
+}
+
+export function isCompletedStatus(status: string): boolean {
+  return COMPLETED_ASSESSMENT_STATUSES.has(status);
+}
+
+export function canRetryStatus(status: string): boolean {
+  return isFailedStatus(status);
+}
+
+export function getResultTone(status: string): ResultTone {
+  if (isCompletedStatus(status)) return "success";
+  if (status === "failed") return "error";
+  if (isActiveStatus(status) || status === "completed_with_errors") {
+    return "warning";
+  }
+  return "default";
+}
+
+export function formatStatusLabel(status: string): string {
+  return status.replace(/_/g, " ");
+}
+
+export function getAsyncErrorMessage(action: string, error: unknown): string {
+  return `${action}: ${error instanceof Error ? error.message : "Unknown error"}`;
+}
+
+export function getResultsCounts(assessments: AssessmentRun[]): ResultsCounts {
+  return {
+    total: assessments.length,
+    processing: assessments.filter((run) => isActiveStatus(run.status)).length,
+    completed: assessments.filter((run) => isCompletedStatus(run.status))
+      .length,
+    failed: assessments.filter((run) => isFailedStatus(run.status)).length,
+  };
+}
+
+export function filterAssessments(
+  assessments: AssessmentRun[],
+  statusFilter: StatusFilter,
+): AssessmentRun[] {
+  if (statusFilter === "all") return assessments;
+
+  return assessments.filter((run) => {
+    if (statusFilter === "processing") return isActiveStatus(run.status);
+    if (statusFilter === "failed") return isFailedStatus(run.status);
+    return run.status === statusFilter;
+  });
+}
+
+export function jsonResultsToTableData(
+  results: Record<string, unknown>[],
+  opts?: { skipFields?: Set<string> },
+): { headers: string[]; rows: string[][] } {
+  if (results.length === 0) return { headers: [], rows: [] };
+
+  const skipFields =
+    opts?.skipFields ??
+    new Set([
+      "assessment_id",
+      "dataset_id",
+      "dataset_name",
+      "run_id",
+      "run_name",
+      "run_status",
+      "config_id",
+      "config_version",
+      "response_id",
+      "input_tokens",
+      "output_tokens",
+      "total_tokens",
+      "updated_at",
+      "result_status",
+      "error",
+      "row_id",
+      "experiment_name",
+    ]);
+
+  const allKeys = Array.from(new Set(results.flatMap((r) => Object.keys(r))));
+  const displayKeys = allKeys.filter((k) => !skipFields.has(k));
+
+  const nonEmptyKeys = displayKeys.filter((key) =>
+    results.some((r) => {
+      const v = r[key];
+      return v != null && String(v).trim() !== "";
+    }),
+  );
+
+  const rows = results.map((r) =>
+    nonEmptyKeys.map((key) => {
+      const v = r[key];
+      if (v == null) return "";
+      if (typeof v === "object") return JSON.stringify(v);
+      return String(v);
+    }),
+  );
+
+  return { headers: nonEmptyKeys, rows };
+}
diff --git a/app/lib/authCookie.ts b/app/lib/authCookie.ts
index 8f600256..a56a82fa 100644
--- a/app/lib/authCookie.ts
+++ b/app/lib/authCookie.ts
@@ -1,10 +1,9 @@
 import type { NextResponse } from "next/server";
-
-/** Cookie name used by middleware to gate routes. */
-export const ROLE_COOKIE = "kaapi_role";
+import { COOKIE_KEYS, type FeatureFlagKey } from "@/app/lib/constants";
 
 interface UserLike {
   is_superuser?: boolean;
+  features?: FeatureFlagKey[];
 }
 
 /** Set the role cookie by appending a raw Set-Cookie header (won't overwrite existing cookies). */
@@ -19,14 +18,38 @@ export function setRoleCookieFromBody(
 
   const value = user.is_superuser ? "superuser" : "user";
   const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
-  const cookie = `${ROLE_COOKIE}=${value}; Path=/; Max-Age=${60 * 60 * 24 * 7}; SameSite=Lax${secure}`;
+  const cookie = `${COOKIE_KEYS.ROLE}=${value}; Path=/; Max-Age=${60 * 60 * 24 * 7}; SameSite=Lax${secure}`;
 
   response.headers.append("Set-Cookie", cookie);
 }
 
 export function clearRoleCookie(response: NextResponse): void {
   const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
-  const cookie = `${ROLE_COOKIE}=; Path=/; Max-Age=0; SameSite=Lax${secure}`;
+  const cookie = `${COOKIE_KEYS.ROLE}=; Path=/; Max-Age=0; SameSite=Lax${secure}`;
+
+  response.headers.append("Set-Cookie", cookie);
+}
+
+export function setFeaturesCookieFromBody(
+  response: NextResponse,
+  body: unknown,
+): void {
+  if (!body || typeof body !== "object") return;
+
+  const user = extractUser(body);
+  if (!user || !Array.isArray(user.features)) return;
+
+  const features = user.features.filter((f) => typeof f === "string");
+  const value = encodeURIComponent(JSON.stringify(features));
+  const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
+  const cookie = `${COOKIE_KEYS.FEATURES}=${value}; Path=/; Max-Age=${60 * 60 * 24 * 7}; SameSite=Lax${secure}`;
+
+  response.headers.append("Set-Cookie", cookie);
+}
+
+export function clearFeaturesCookie(response: NextResponse): void {
+  const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
+  const cookie = `${COOKIE_KEYS.FEATURES}=; Path=/; Max-Age=0; SameSite=Lax${secure}`;
 
   response.headers.append("Set-Cookie", cookie);
 }
diff --git a/app/lib/configFetchers.ts b/app/lib/configFetchers.ts
index 2edc3d64..8e578b73 100644
--- a/app/lib/configFetchers.ts
+++ b/app/lib/configFetchers.ts
@@ -14,7 +14,7 @@ import {
   FetchResult,
 } from "@/app/lib/types/configs";
 import { CACHE_INVALIDATED_EVENT } from "@/app/lib/constants";
-import { configState } from "@/app/lib/store/configStore";
+import { configState } from "@/app/lib/store/config";
 import { flattenConfigVersion } from "@/app/lib/utils";
 import { apiFetch } from "@/app/lib/apiClient";
 
@@ -303,3 +303,12 @@ export async function fetchNextConfigBatch(
 
   return { newVersions, newVersionCounts, newConfigMeta };
 }
+
+export function invalidateConfigCache(): void {
+  configState.inMemoryCache = null;
+  configState.versionItemsCache = {};
+  configState.allConfigMeta = null;
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new Event(CACHE_INVALIDATED_EVENT));
+  }
+}
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index dc433d28..5bcbed61 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -4,9 +4,16 @@
 
 import { ConfigBlob } from "@/app/lib/types/promptEditor";
 import { ToastType } from "@/app/components/Toast";
+import { ASSESSMENT_FEATURE_FLAG } from "@/app/lib/assessment/constants";
 
 export const APP_NAME = "Kaapi Konsole";
 
+export const FeatureFlag = {
+  ASSESSMENT: ASSESSMENT_FEATURE_FLAG,
+} as const;
+
+export type FeatureFlagKey = (typeof FeatureFlag)[keyof typeof FeatureFlag];
+
 export const STORAGE_KEYS = {
   API_KEYS: "kaapi_api_keys",
   SESSION: "kaapi_session",
@@ -17,6 +24,11 @@ export const STORAGE_KEYS = {
   CHAT_STATE: "kaapi_chat_state",
 } as const;
 
+export const COOKIE_KEYS = {
+  ROLE: "kaapi_role",
+  FEATURES: "kaapi_features",
+} as const;
+
 /** localStorage key for the config cache */
 export const CACHE_KEY = STORAGE_KEYS.CONFIGS_CACHE;
 
@@ -37,6 +49,8 @@ export const CACHE_INVALIDATED_EVENT = "kaapi:config-cache-invalidated";
 
 /** Dispatched when the user's session is no longer valid (expired or revoked). */
 export const AUTH_EXPIRED_EVENT = "kaapi:auth-expired";
+/** Dispatched when client-side feature flags are updated. */
+export const FEATURES_UPDATED_EVENT = "kaapi:features-updated";
 
 export const PROVIDES_OPTIONS = [
   { value: "openai", label: "OpenAI" },
diff --git a/app/lib/context/AuthContext.tsx b/app/lib/context/AuthContext.tsx
index 5fd58780..00b2a86f 100644
--- a/app/lib/context/AuthContext.tsx
+++ b/app/lib/context/AuthContext.tsx
@@ -15,7 +15,11 @@ import {
   AuthContextValue,
 } from "@/app/lib/types/auth";
 import { apiFetch } from "@/app/lib/apiClient";
-import { AUTH_EXPIRED_EVENT, STORAGE_KEYS } from "@/app/lib/constants";
+import {
+  AUTH_EXPIRED_EVENT,
+  FEATURES_UPDATED_EVENT,
+  STORAGE_KEYS,
+} from "@/app/lib/constants";
 import { useChatStore } from "@/app/lib/store/chat";
 import { clearAllStorage } from "@/app/lib/utils";
 export type { User, GoogleProfile, Session } from "@/app/lib/types/auth";
@@ -96,6 +100,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     } else {
       localStorage.removeItem(STORAGE_KEYS.API_KEYS);
     }
+    window.dispatchEvent(new Event("kaapi-auth-changed"));
   }, []);
 
   const addKey = useCallback(
@@ -137,7 +142,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     clearAllStorage();
     useChatStore.getState().reset();
     setApiKeys([]);
-  }, [persist]);
+    window.dispatchEvent(new Event("kaapi-auth-changed"));
+    window.location.replace("/evaluations");
+  }, []);
 
   // logout when both access + refresh tokens are expired
   useEffect(() => {
@@ -146,8 +153,44 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     return () => window.removeEventListener(AUTH_EXPIRED_EVENT, handleExpired);
   }, [logout]);
 
+  // keep auth state in sync when feature flags are updated client-side
+  useEffect(() => {
+    const handleFeaturesUpdated = (event: Event) => {
+      const customEvent = event as CustomEvent<{ features?: string[] }>;
+      const features = customEvent.detail?.features;
+      if (!Array.isArray(features)) return;
+
+      setCurrentUser((prev) =>
+        prev ? { ...prev, features: [...features] } : prev,
+      );
+      setSession((prev) =>
+        prev?.user
+          ? {
+              ...prev,
+              user: { ...prev.user, features: [...features] },
+            }
+          : prev,
+      );
+    };
+
+    window.addEventListener(
+      FEATURES_UPDATED_EVENT,
+      handleFeaturesUpdated as EventListener,
+    );
+    return () =>
+      window.removeEventListener(
+        FEATURES_UPDATED_EVENT,
+        handleFeaturesUpdated as EventListener,
+      );
+  }, []);
+
   const activeKey = apiKeys[0] ?? null;
   const isAuthenticated = !!activeKey || !!session;
+  const features = currentUser?.features ?? [];
+  const hasFeature = useCallback(
+    (flag: string) => features.includes(flag),
+    [features],
+  );
 
   return (
     <AuthContext.Provider
@@ -159,6 +202,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         googleProfile: session?.googleProfile ?? null,
         session,
         isAuthenticated,
+        features,
+        hasFeature,
         addKey,
         removeKey,
         setKeys,
diff --git a/app/lib/data/assessmentModels.ts b/app/lib/data/assessmentModels.ts
new file mode 100644
index 00000000..4f822295
--- /dev/null
+++ b/app/lib/data/assessmentModels.ts
@@ -0,0 +1,233 @@
+import type {
+  AssessmentModelConfig,
+  ConfigParamDefinition,
+} from "@/app/lib/types/assessment";
+import type { ConfigBlob } from "@/app/lib/types/configs";
+
+export const GPT4_STYLE_CONFIG = {
+  top_p: {
+    max: 1.0,
+    min: 0.0,
+    type: "float",
+    default: 1.0,
+    description: "Nucleus sampling. Use either this or temperature, not both.",
+  },
+  temperature: {
+    max: 2.0,
+    min: 0.0,
+    type: "float",
+    default: 1.0,
+    description: "Controls randomness. Lower = more deterministic.",
+  },
+} as const satisfies Record<string, ConfigParamDefinition>;
+
+export const ASSESSMENT_MODEL_CONFIGS: AssessmentModelConfig[] = [
+  { provider: "openai", model_name: "gpt-4o-mini", config: GPT4_STYLE_CONFIG },
+  { provider: "openai", model_name: "gpt-4o", config: GPT4_STYLE_CONFIG },
+  { provider: "openai", model_name: "gpt-4.1", config: GPT4_STYLE_CONFIG },
+  { provider: "openai", model_name: "gpt-4.1-mini", config: GPT4_STYLE_CONFIG },
+  { provider: "openai", model_name: "gpt-4.1-nano", config: GPT4_STYLE_CONFIG },
+  {
+    provider: "openai",
+    model_name: "o3-mini",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "o3",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "o4-mini",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["minimal", "low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5-mini",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["minimal", "low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5-nano",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["minimal", "low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5.1",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["none", "low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5.1-chat-latest",
+    config: {
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5.2",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["none", "low", "medium", "high", "xhigh"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5.2-chat-latest",
+    config: {
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5.2-pro",
+    config: {
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+];
+
+export const PROVIDER_OPTIONS = [{ value: "openai", label: "OpenAI" }] as const;
+
+export const ASSESSMENT_DEFAULT_CONFIG: ConfigBlob = {
+  completion: {
+    provider: "openai",
+    type: "text",
+    params: {
+      model: "gpt-4o-mini",
+      instructions: "",
+      top_p: GPT4_STYLE_CONFIG.top_p.default,
+      temperature: GPT4_STYLE_CONFIG.temperature.default,
+    },
+  },
+};
diff --git a/app/lib/navConfig.ts b/app/lib/navConfig.ts
index f68d5a9a..3a961b84 100644
--- a/app/lib/navConfig.ts
+++ b/app/lib/navConfig.ts
@@ -1,3 +1,4 @@
+import { FeatureFlag } from "@/app/lib/constants";
 import { NavItemConfig, SettingsNavSection } from "@/app/lib/types/nav";
 
 export const SETTINGS_NAV: SettingsNavSection[] = [
@@ -56,4 +57,11 @@ export const NAV_ITEMS: NavItemConfig[] = [
     gateDescription:
       "Log in to compare model response quality across different configs.",
   },
+  {
+    name: "Assessment",
+    route: "/assessment",
+    icon: "assessment",
+    featureFlag: FeatureFlag.ASSESSMENT,
+    gateDescription: "Log in to run assessments.",
+  },
 ];
diff --git a/app/lib/store/assessment.ts b/app/lib/store/assessment.ts
new file mode 100644
index 00000000..d29864be
--- /dev/null
+++ b/app/lib/store/assessment.ts
@@ -0,0 +1,46 @@
+// Zustand store for the selected assessment dataset: id, columns, sample row, and column mapping.
+import { create } from "zustand";
+import type {
+  AssessmentDatasetState,
+  ColumnMapping,
+} from "@/app/lib/types/assessment";
+
+const DEFAULT_MAPPING: ColumnMapping = {
+  textColumns: [],
+  attachments: [],
+  groundTruthColumns: [],
+};
+
+export const useAssessmentDatasetStore = create<AssessmentDatasetState>()(
+  (set) => ({
+    datasetId: "",
+    datasetName: "",
+    columns: [],
+    sampleRow: {},
+    columnMapping: DEFAULT_MAPPING,
+
+    setDatasetId: (id) => set({ datasetId: id }),
+    setDatasetName: (name) => set({ datasetName: name }),
+
+    setDataset: (datasetId, columns, sampleRow, datasetName) =>
+      set((state) => ({
+        datasetId,
+        datasetName: datasetName ?? state.datasetName,
+        columns,
+        sampleRow,
+        columnMapping:
+          datasetId !== state.datasetId ? DEFAULT_MAPPING : state.columnMapping,
+      })),
+
+    setColumnMapping: (mapping) => set({ columnMapping: mapping }),
+
+    clearDataset: () =>
+      set({
+        datasetId: "",
+        datasetName: "",
+        columns: [],
+        sampleRow: {},
+        columnMapping: DEFAULT_MAPPING,
+      }),
+  }),
+);
diff --git a/app/lib/store/config.ts b/app/lib/store/config.ts
new file mode 100644
index 00000000..28ef7ae1
--- /dev/null
+++ b/app/lib/store/config.ts
@@ -0,0 +1,59 @@
+import {
+  ConfigCache,
+  SavedConfig,
+  ConfigPublic,
+  ConfigVersionItems,
+} from "@/app/lib/types/configs";
+import { CACHE_KEY } from "@/app/lib/constants";
+
+export const configState = {
+  inMemoryCache: null as ConfigCache | null,
+
+  versionItemsCache: {} as Record<string, ConfigVersionItems[]>,
+
+  allConfigMeta: null as ConfigPublic[] | null,
+
+  pendingLoadMore: null as Promise<void> | null,
+
+  pendingFetch: null as Promise<void> | null,
+
+  validationInProgress: false,
+};
+
+export const pendingSingleVersionLoads = new Map<
+  string,
+  Promise<SavedConfig | null>
+>();
+
+export const pendingVersionLoads = new Map<string, Promise<void>>();
+
+export const loadCache = (): ConfigCache | null => {
+  if (typeof window === "undefined") return null;
+  try {
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (cached) return JSON.parse(cached);
+  } catch (e) {
+    console.error("Failed to load config cache:", e);
+  }
+  return null;
+};
+
+export const saveCache = (cache: ConfigCache): void => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
+  } catch (e) {
+    console.error("Failed to save config cache:", e);
+  }
+};
+
+export const clearConfigCache = (): void => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.removeItem(CACHE_KEY);
+    configState.inMemoryCache = null;
+    configState.versionItemsCache = {};
+  } catch (e) {
+    console.error("Failed to clear config cache:", e);
+  }
+};
diff --git a/app/lib/store/configStore.ts b/app/lib/store/configStore.ts
deleted file mode 100644
index c61a076c..00000000
--- a/app/lib/store/configStore.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Module-level mutable state and localStorage cache utilities for Config Management.
- *
- * All shared state is held on a single exported object (`configState`) so that
- * other modules (configFetchers, the hook) can mutate it via property assignment—
- * which works correctly with ES module semantics, unlike reassigning named exports.
- */
-
-import {
-  ConfigCache,
-  SavedConfig,
-  ConfigPublic,
-  ConfigVersionItems,
-} from "@/app/lib/types/configs";
-import { CACHE_KEY } from "@/app/lib/constants";
-
-/**
- * All module-level mutable singletons in one object.
- * Properties can be read and reassigned from any importing module.
- */
-export const configState = {
-  /** In-memory cache for the current session (avoids localStorage reads). */
-  inMemoryCache: null as ConfigCache | null,
-
-  /**
-   * In-memory lightweight version-item list per config (no config_blob).
-   * Populated during initial fetchAllConfigs so loadVersionsForConfig can skip
-   * the extra GET /api/configs/{id}/versions re-fetches.
-   */
-  versionItemsCache: {} as Record<string, ConfigVersionItems[]>,
-
-  /**
-   * Full lightweight config list from GET /api/configs (no version details).
-   * Used by loadMoreConfigs to know which configs still need version details fetched.
-   */
-  allConfigMeta: null as ConfigPublic[] | null,
-
-  /** Deduplication guard for concurrent loadMoreConfigs calls. */
-  pendingLoadMore: null as Promise<void> | null,
-
-  /**
-   * A single in-flight fetch promise shared by every useConfigs() instance.
-   * When a second component calls fetchConfigs() while a fetch is already running,
-   * it awaits this promise instead of starting its own request.
-   */
-  pendingFetch: null as Promise<void> | null,
-
-  /**
-   * Prevents concurrent background validations.
-   * A single GET /api/configs call is all that's needed.
-   */
-  validationInProgress: false,
-};
-
-/**
- * Per-version in-flight fetch promises for single on-demand version detail loads.
- * Key is `${config_id}:${version}`. Prevents duplicate fetches when the user
- * rapidly clicks the same history entry.
- */
-export const pendingSingleVersionLoads = new Map<
-  string,
-  Promise<SavedConfig | null>
->();
-
-/**
- * Per-config in-flight version-load promises.
- * Deduplicates concurrent loadVersionsForConfig(config_id) calls.
- */
-export const pendingVersionLoads = new Map<string, Promise<void>>();
-
-export const loadCache = (): ConfigCache | null => {
-  if (typeof window === "undefined") return null;
-  try {
-    const cached = localStorage.getItem(CACHE_KEY);
-    if (cached) return JSON.parse(cached);
-  } catch (e) {
-    console.error("Failed to load config cache:", e);
-  }
-  return null;
-};
-
-export const saveCache = (cache: ConfigCache): void => {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
-  } catch (e) {
-    console.error("Failed to save config cache:", e);
-  }
-};
-
-export const clearConfigCache = (): void => {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.removeItem(CACHE_KEY);
-    configState.inMemoryCache = null;
-    configState.versionItemsCache = {};
-  } catch (e) {
-    console.error("Failed to clear config cache:", e);
-  }
-};
diff --git a/app/lib/types/assessment.ts b/app/lib/types/assessment.ts
new file mode 100644
index 00000000..5edf69b3
--- /dev/null
+++ b/app/lib/types/assessment.ts
@@ -0,0 +1,325 @@
+// Shared TypeScript types for the Assessment feature.
+import type { Dispatch, SetStateAction } from "react";
+import type { Dataset } from "@/app/lib/types/dataset";
+import type { ConfigVersionItems } from "@/app/lib/types/configs";
+
+export type ValueSetter<T> = (value: T) => void;
+export type StateSetter<T> = Dispatch<SetStateAction<T>>;
+export type SampleRow = Record<string, string>;
+export type JsonSchemaValue = object | null;
+export type ListResponse<T> = T[] | { data?: T[] };
+export type CreateResponse<T> = T | { data?: T };
+export type RouteContext<K extends string> = {
+  params: Promise<Record<K, string>>;
+};
+
+export interface LabeledValue<T = string> {
+  value: T;
+  label: string;
+}
+
+export interface Attachment {
+  column: string;
+  type: "image" | "pdf";
+  format: "url" | "base64";
+}
+
+export interface ConfigRef {
+  config_id: string;
+  config_version: number;
+}
+
+export interface ConfigSelection extends ConfigRef {
+  name?: string;
+  provider?: string;
+  model?: string;
+}
+
+export interface ColumnMapping {
+  textColumns: string[];
+  attachments: Attachment[];
+  groundTruthColumns: string[];
+}
+
+export type ColumnRole = "unmapped" | "text" | "attachment" | "ground_truth";
+export type RoleOption = LabeledValue<ColumnRole>;
+
+export type SchemaPropertyType =
+  | "string"
+  | "number"
+  | "integer"
+  | "boolean"
+  | "object"
+  | "enum";
+
+export interface SchemaProperty {
+  id: string;
+  name: string;
+  type: SchemaPropertyType;
+  isArray: boolean;
+  isRequired: boolean;
+  children: SchemaProperty[];
+  enumValues: string[];
+}
+
+export interface AssessmentFormState {
+  experimentName: string;
+  datasetId: string;
+  datasetName: string;
+  columns: string[];
+  sampleRow: SampleRow;
+  columnMapping: ColumnMapping;
+  systemInstruction: string;
+  promptTemplate: string;
+  outputSchema: SchemaProperty[];
+  configs: ConfigSelection[];
+}
+
+export interface AssessmentDatasetState {
+  datasetId: string;
+  datasetName: string;
+  columns: string[];
+  sampleRow: SampleRow;
+  columnMapping: ColumnMapping;
+  setDatasetId: ValueSetter<string>;
+  setDatasetName: ValueSetter<string>;
+  setDataset: (
+    datasetId: string,
+    columns: string[],
+    sampleRow: SampleRow,
+    datasetName?: string,
+  ) => void;
+  setColumnMapping: ValueSetter<ColumnMapping>;
+  clearDataset: () => void;
+}
+
+export type ConfigParamType = "float" | "int" | "enum";
+
+export interface ConfigParamDefinition {
+  type: ConfigParamType;
+  default: number | string;
+  description: string;
+  min?: number;
+  max?: number;
+  options?: string[];
+}
+
+export interface AssessmentModelConfig {
+  provider: "openai";
+  model_name: string;
+  config: Record<string, ConfigParamDefinition>;
+}
+
+export type ModelOption = LabeledValue;
+
+export interface PagedResult<T> {
+  items: T[];
+  hasMore: boolean;
+  nextSkip: number;
+}
+
+export type AssessmentTabId = "datasets" | "config" | "results";
+export interface AssessmentTab {
+  id: AssessmentTabId;
+  label: string;
+}
+
+export interface Step {
+  id: number;
+  label: string;
+}
+
+export interface StepNavigationProps {
+  onNext: () => void;
+  onBack: () => void;
+}
+
+export interface WithForbiddenHandler {
+  onForbidden?: () => void;
+}
+
+export interface ColumnConfig {
+  role: ColumnRole;
+  attachmentType?: "image" | "pdf";
+  attachmentFormat?: string;
+}
+
+export interface RoleVisuals {
+  panelClass: string;
+  dotClass: string;
+  activeButtonClass: string;
+}
+
+export interface ColumnMapperStepProps extends StepNavigationProps {
+  columns: string[];
+  columnMapping: ColumnMapping;
+  setColumnMapping: ValueSetter<ColumnMapping>;
+}
+
+export interface ConfigPanelProps {
+  canSubmitAssessment: boolean;
+  columns: string[];
+  columnMapping: ColumnMapping;
+  completedSteps: Set<number>;
+  configStep: number;
+  configs: ConfigSelection[];
+  experimentName: string;
+  formState: AssessmentFormState;
+  hasDataset: boolean;
+  isSubmitting: boolean;
+  outputSchema: SchemaProperty[];
+  systemInstruction: string;
+  promptTemplate: string;
+  sampleRow: SampleRow;
+  setActiveTabToDatasets: () => void;
+  setColumnMapping: ValueSetter<ColumnMapping>;
+  setConfigStep: ValueSetter<number>;
+  setConfigs: StateSetter<ConfigSelection[]>;
+  setExperimentName: ValueSetter<string>;
+  setOutputSchema: ValueSetter<SchemaProperty[]>;
+  setSystemInstruction: ValueSetter<string>;
+  setPromptTemplate: ValueSetter<string>;
+  submitBlockerMessage: string;
+  onSubmit: () => void;
+  onStepComplete: ValueSetter<number>;
+}
+
+export type EvaluationsTabProps = WithForbiddenHandler;
+
+export interface DatasetsTabProps extends WithForbiddenHandler {
+  datasetId: string;
+  setDatasetId: ValueSetter<string>;
+  setSelectedDatasetName: ValueSetter<string>;
+  onColumnsLoaded: (columns: string[], sampleRow?: SampleRow) => void;
+  onNext: () => void;
+}
+
+export interface PageLayoutProps {
+  activeTab: AssessmentTabId;
+  tabs: AssessmentTab[];
+  onTabSwitch: ValueSetter<AssessmentTabId>;
+  datasetsTabProps: DatasetsTabProps;
+  configPanelProps: ConfigPanelProps;
+  evaluationsTabProps: EvaluationsTabProps;
+}
+
+export interface AssessmentRunStat {
+  run_id: number;
+  config_id: string | null;
+  config_version: number | null;
+  status: string;
+  total_items: number;
+  error_message: string | null;
+  updated_at: string | null;
+}
+
+export interface AssessmentRun {
+  id: number;
+  experiment_name: string;
+  dataset_name: string | null;
+  dataset_id: number | null;
+  status: string;
+  total_runs: number;
+  pending_runs: number;
+  processing_runs: number;
+  completed_runs: number;
+  failed_runs: number;
+  run_stats: AssessmentRunStat[];
+  error_message: string | null;
+  inserted_at: string;
+  updated_at: string;
+}
+
+export interface AssessmentChildRun {
+  id: number;
+  assessment_id: number | null;
+  run_name: string;
+  dataset_name: string | null;
+  dataset_id: number | null;
+  config_id: string | null;
+  config_version: number | null;
+  status: string;
+  total_items: number;
+  error_message: string | null;
+  organization_id: number;
+  project_id: number;
+  assessment_config: Record<string, unknown> | null;
+  inserted_at: string;
+  updated_at: string;
+}
+
+export interface ConfigRunDetail {
+  configId: string;
+  version: number;
+  name: string;
+  description: string | null;
+  commitMessage: string | null;
+  provider: string | null;
+  model: string | null;
+}
+
+export type StatusFilter = "all" | "processing" | "completed" | "failed";
+export type ExportFormat = "csv" | "xlsx";
+export type ResultTone = "default" | "warning" | "success" | "error";
+export type AssessmentTag = "ASSESSMENT";
+export type AssessmentListResponse = ListResponse<AssessmentRun>;
+export type AssessmentChildRunListResponse = ListResponse<AssessmentChildRun>;
+
+export interface ResultsCounts {
+  total: number;
+  processing: number;
+  completed: number;
+  failed: number;
+}
+
+export interface AssessmentResultsPreview {
+  title: string;
+  headers: string[];
+  rows: string[][];
+}
+
+export interface AssessmentDatasetSummary {
+  dataset_id: number;
+  dataset_name?: string;
+}
+
+export type DatasetResponse = ListResponse<Dataset>;
+export type CreateDatasetResponse = CreateResponse<
+  Partial<AssessmentDatasetSummary>
+>;
+export type DatasetFileResponse = { file_content?: string };
+
+export interface ParsedDatasetFile {
+  headers: string[];
+  rows: string[][];
+}
+
+export interface DatasetViewModalData extends ParsedDatasetFile {
+  name: string;
+}
+
+export type ConfigMode = "existing" | "create";
+
+export interface VersionListState {
+  items: ConfigVersionItems[];
+  isLoading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  nextSkip: number;
+}
+
+export const ATTACHMENT_FORMATS: Record<string, string[]> = {
+  image: ["url", "base64"],
+  pdf: ["url", "base64"],
+};
+
+export const MAX_CONFIGS = 4;
+
+export type ReviewColumnRole = "text" | "attachment" | "ground truth";
+
+export interface ReviewColumn {
+  key: string;
+  column: string;
+  role: ReviewColumnRole;
+  badgeClass: string;
+}
diff --git a/app/lib/types/auth.ts b/app/lib/types/auth.ts
index 5c69a1a9..cfba47da 100644
--- a/app/lib/types/auth.ts
+++ b/app/lib/types/auth.ts
@@ -6,6 +6,7 @@ export interface User {
   full_name: string;
   is_active: boolean;
   is_superuser: boolean;
+  features?: string[];
 }
 
 export interface GoogleProfile {
@@ -68,6 +69,8 @@ export interface AuthContextValue {
   googleProfile: GoogleProfile | null;
   session: Session | null;
   isAuthenticated: boolean;
+  features: string[];
+  hasFeature: (flag: string) => boolean;
   addKey: (key: APIKey) => void;
   removeKey: (id: string) => void;
   setKeys: (keys: APIKey[]) => void;
diff --git a/app/lib/types/configs.ts b/app/lib/types/configs.ts
index 9bb78496..474709d4 100644
--- a/app/lib/types/configs.ts
+++ b/app/lib/types/configs.ts
@@ -1,3 +1,5 @@
+import type { AssessmentTag } from "@/app/lib/types/assessment";
+
 export interface SavedConfig {
   id: string;
   config_id: string;
@@ -72,7 +74,7 @@ export interface CompletionParams {
 }
 
 export interface CompletionConfig {
-  provider: "openai";
+  provider: "openai" | "google";
   type?: "text" | "stt" | "tts";
   params: CompletionParams;
 }
@@ -96,11 +98,13 @@ export interface ConfigCreate {
   description?: string | null;
   config_blob: ConfigBlob;
   commit_message?: string | null;
+  tag?: ConfigTag | null;
 }
 
 export interface ConfigUpdate {
   name?: string | null; // 1-128 chars
   description?: string | null;
+  tag?: ConfigTag | null;
 }
 
 export interface ConfigVersionCreate {
@@ -112,6 +116,7 @@ export interface ConfigPublic {
   id: string;
   name: string;
   description: string | null;
+  tag?: ConfigTag | null;
   project_id: number;
   inserted_at: string;
   updated_at: string;
@@ -152,3 +157,4 @@ export type ConfigResponse = APIResponse<ConfigPublic>;
 export type ConfigWithVersionResponse = APIResponse<ConfigWithVersion>;
 export type ConfigVersionListResponse = APIResponse<ConfigVersionItems[]>;
 export type ConfigVersionResponse = APIResponse<ConfigVersionPublic>;
+export type ConfigTag = AssessmentTag;
diff --git a/app/lib/types/dataset.ts b/app/lib/types/dataset.ts
index 00187818..9b4154eb 100644
--- a/app/lib/types/dataset.ts
+++ b/app/lib/types/dataset.ts
@@ -8,3 +8,10 @@ export interface Dataset {
   langfuse_dataset_id: string;
   object_store_url: string;
 }
+
+export interface ViewDatasetModalData {
+  name: string;
+  headers: string[];
+  rows: string[][];
+  signedUrl: string;
+}
diff --git a/app/lib/types/evaluation.ts b/app/lib/types/evaluation.ts
index 8b01a15a..210f18a8 100644
--- a/app/lib/types/evaluation.ts
+++ b/app/lib/types/evaluation.ts
@@ -1,3 +1,5 @@
+export type Tab = "datasets" | "evaluations";
+
 export interface TraceScore {
   name: string;
   value: number | string;
@@ -139,3 +141,9 @@ export interface EvalJob {
   inserted_at: string;
   updated_at: string;
 }
+
+export interface EvalJobApiResponse {
+  success?: boolean;
+  error?: string;
+  data?: EvalJob;
+}
diff --git a/app/lib/types/nav.ts b/app/lib/types/nav.ts
index e17d3ec5..4296f2d0 100644
--- a/app/lib/types/nav.ts
+++ b/app/lib/types/nav.ts
@@ -1,4 +1,5 @@
 import React from "react";
+import type { FeatureFlagKey } from "@/app/lib/constants";
 
 export interface NavSubItem {
   name: string;
@@ -12,6 +13,7 @@ export interface NavItemConfig {
   submenu?: NavSubItem[];
   gateDescription?: string;
   superuserOnly?: boolean;
+  featureFlag?: FeatureFlagKey;
 }
 
 export interface SubMenuItem {
@@ -27,6 +29,7 @@ export interface MenuItem {
   icon: React.ReactNode;
   submenu?: SubMenuItem[];
   gateDescription?: string;
+  featureFlag?: FeatureFlagKey;
 }
 
 export interface SidebarProps {
@@ -51,3 +54,14 @@ export interface SettingsNavSection {
   label: string;
   items: SettingsNavItem[];
 }
+
+export interface Tab {
+  id: string;
+  label: string;
+}
+
+export interface TabNavigationProps {
+  tabs: Tab[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+}
diff --git a/app/lib/types/speechToText.ts b/app/lib/types/speechToText.ts
index c28d76f6..758bb72d 100644
--- a/app/lib/types/speechToText.ts
+++ b/app/lib/types/speechToText.ts
@@ -1,5 +1,3 @@
-export type Tab = "datasets" | "evaluations";
-
 export interface AudioFile {
   id: string;
   file: File;
@@ -146,3 +144,9 @@ export interface CreateRunResponse {
   id: number;
   run_name: string;
 }
+
+export interface STTViewDatasetModalData {
+  name: string;
+  datasetId: number;
+  samples: STTSample[];
+}
diff --git a/app/lib/types/textToSpeech.ts b/app/lib/types/textToSpeech.ts
index 78ff2d3d..b5041223 100644
--- a/app/lib/types/textToSpeech.ts
+++ b/app/lib/types/textToSpeech.ts
@@ -115,3 +115,9 @@ export interface TTSFeedbackPayload {
   comment?: string;
   score?: TTSScore;
 }
+
+export interface TTSViewDatasetModalData {
+  name: string;
+  headers: string[];
+  rows: string[][];
+}
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 1ac04eb2..423fba83 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -1,6 +1,6 @@
 import { Credential, ProviderDef } from "@/app/lib/types/credentials";
 import { formatDistanceToNow } from "date-fns";
-import { clearConfigCache } from "@/app/lib/store/configStore";
+import { clearConfigCache } from "@/app/lib/store/config";
 import {
   ConfigPublic,
   ConfigVersionPublic,
@@ -258,3 +258,26 @@ export const formatCostUSD = (cost: number): string => {
   }
   return `$${cost.toFixed(2)}`;
 };
+
+export function parseCsvRow(line: string): string[] {
+  const result: string[] = [];
+  let current = "";
+  let inQuotes = false;
+  for (let i = 0; i < line.length; i++) {
+    if (line[i] === '"') {
+      if (inQuotes && line[i + 1] === '"') {
+        current += '"';
+        i++;
+      } else {
+        inQuotes = !inQuotes;
+      }
+    } else if (line[i] === "," && !inQuotes) {
+      result.push(current.trim());
+      current = "";
+    } else {
+      current += line[i];
+    }
+  }
+  result.push(current.trim());
+  return result;
+}
diff --git a/app/lib/utils/assessment.ts b/app/lib/utils/assessment.ts
new file mode 100644
index 00000000..dc00d0d1
--- /dev/null
+++ b/app/lib/utils/assessment.ts
@@ -0,0 +1,244 @@
+import * as XLSX from "xlsx";
+import { apiFetch } from "@/app/lib/apiClient";
+import {
+  ALLOWED_DATASET_EXTENSIONS,
+  JSON_TOKEN_CLASSES,
+} from "@/app/lib/assessment/constants";
+import type {
+  ColumnConfig,
+  ColumnMapping,
+  ColumnRole,
+  CreateDatasetResponse,
+  DatasetFileResponse,
+  ParsedDatasetFile,
+  ReviewColumn,
+  RoleVisuals,
+} from "@/app/lib/types/assessment";
+
+export function isAllowedDatasetFile(fileName: string): boolean {
+  const normalizedName = fileName.toLowerCase();
+  return ALLOWED_DATASET_EXTENSIONS.some((extension) =>
+    normalizedName.endsWith(extension),
+  );
+}
+
+export async function fetchAndParseDatasetFile(
+  id: string | number,
+  apiKey: string,
+): Promise<ParsedDatasetFile> {
+  let json: DatasetFileResponse;
+  try {
+    json = await apiFetch<DatasetFileResponse>(
+      `/api/assessment/datasets/${id}?fetch_content=true`,
+      apiKey,
+    );
+  } catch (error) {
+    const message =
+      error instanceof Error
+        ? error.message
+        : "Failed to download dataset file";
+    throw new Error(message);
+  }
+
+  const base64 = json?.file_content;
+  if (!base64) {
+    throw new Error("Dataset file content is unavailable.");
+  }
+
+  const binary = Uint8Array.from(atob(base64), (character) =>
+    character.charCodeAt(0),
+  );
+  const workbook = XLSX.read(binary, { type: "array" });
+  const sheet = workbook.Sheets[workbook.SheetNames[0]];
+  if (!sheet) {
+    throw new Error("Dataset file does not contain a readable sheet.");
+  }
+
+  const rawData: string[][] = XLSX.utils.sheet_to_json(sheet, {
+    header: 1,
+    defval: "",
+  });
+  if (rawData.length === 0) {
+    throw new Error("Dataset file is empty.");
+  }
+
+  const headers = rawData[0].map(String);
+  if (headers.length === 0 || headers.every((header) => !header.trim())) {
+    throw new Error("Dataset file is missing column headers.");
+  }
+
+  const rows = rawData
+    .slice(1)
+    .filter((row) => row.some((cell) => String(cell).trim() !== ""));
+
+  if (rows.length === 0) {
+    throw new Error("Dataset file has headers but no data rows.");
+  }
+
+  return { headers, rows: rows.map((row) => row.map(String)) };
+}
+
+export function extractCreatedDataset(data: CreateDatasetResponse) {
+  return (
+    (data as { data?: { dataset_id?: number; dataset_name?: string } }).data ??
+    (data as { dataset_id?: number; dataset_name?: string })
+  );
+}
+
+export function handleForbiddenError(
+  error: unknown,
+  onForbidden?: () => void,
+): boolean {
+  if (!(error instanceof Error)) return false;
+  const message = error.message.toLowerCase();
+  const isForbidden =
+    /request failed:\s*403/i.test(error.message) ||
+    message.includes("forbidden") ||
+    message.includes("not enabled") ||
+    message.includes("permission denied");
+
+  if (!isForbidden) return false;
+  onForbidden?.();
+  return true;
+}
+
+export function isAbortError(error: unknown): boolean {
+  return (
+    (error instanceof DOMException && error.name === "AbortError") ||
+    (error instanceof Error && error.name === "AbortError")
+  );
+}
+
+const CONFIG_VERSION_UNAVAILABLE_MESSAGE =
+  "Config version was tampered or changed.";
+
+export function getConfigDetailErrorMessage(error: unknown): string {
+  const message = error instanceof Error ? error.message : "";
+  const normalized = message.toLowerCase();
+  if (
+    message.includes("404") ||
+    normalized.includes("not found") ||
+    normalized.includes("unavailable")
+  ) {
+    return CONFIG_VERSION_UNAVAILABLE_MESSAGE;
+  }
+  return message || "Failed to load configuration details";
+}
+
+export function colorMapping(role: ColumnRole): RoleVisuals {
+  switch (role) {
+    case "text":
+      return {
+        panelClass: "border-status-success-border bg-status-success-bg",
+        dotClass: "bg-status-success",
+        activeButtonClass:
+          "!border-status-success-border !bg-status-success-bg !text-status-success-text hover:!bg-status-success-bg !ring-0",
+      };
+    case "attachment":
+      return {
+        panelClass: "border-status-warning-border bg-status-warning-bg",
+        dotClass: "bg-status-warning",
+        activeButtonClass:
+          "!border-status-warning-border !bg-status-warning-bg !text-status-warning-text hover:!bg-status-warning-bg !ring-0",
+      };
+    case "ground_truth":
+      return {
+        panelClass: "border-accent-subtle bg-accent-subtle/20",
+        dotClass: "bg-accent-primary",
+        activeButtonClass:
+          "!border-accent-subtle !bg-accent-subtle/20 !text-accent-primary hover:!bg-accent-subtle/20 !ring-0",
+      };
+    case "unmapped":
+    default:
+      return {
+        panelClass: "border-border bg-bg-primary",
+        dotClass: "bg-border",
+        activeButtonClass:
+          "!border-border !bg-bg-secondary !text-text-primary hover:!bg-bg-secondary !ring-0",
+      };
+  }
+}
+
+export function buildColumnConfigs(
+  columns: string[],
+  columnMapping: ColumnMapping,
+): ColumnConfig[] {
+  return columns.map((column) => {
+    if (columnMapping.textColumns.includes(column)) {
+      return { role: "text" };
+    }
+    const attachment = columnMapping.attachments.find(
+      (item) => item.column === column,
+    );
+    return attachment
+      ? {
+          role: "attachment",
+          attachmentType: attachment.type,
+          attachmentFormat: attachment.format,
+        }
+      : { role: "unmapped" };
+  });
+}
+
+export function buildMappedColumns(
+  columnMapping: ColumnMapping,
+): ReviewColumn[] {
+  return [
+    ...columnMapping.textColumns.map((column) => ({
+      key: `text:${column}`,
+      column,
+      role: "text" as const,
+      badgeClass: "bg-status-success-bg text-status-success-text",
+    })),
+    ...columnMapping.attachments.map(({ column }) => ({
+      key: `attachment:${column}`,
+      column,
+      role: "attachment" as const,
+      badgeClass: "bg-status-warning-bg text-status-warning-text",
+    })),
+    ...columnMapping.groundTruthColumns.map((column) => ({
+      key: `ground_truth:${column}`,
+      column,
+      role: "ground truth" as const,
+      badgeClass: "bg-accent-subtle/30 text-accent-primary",
+    })),
+  ];
+}
+
+export function highlightJson(code: string): string {
+  if (!code) return "";
+
+  const escHtml = (s: string) =>
+    s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+  const re =
+    /("(?:\\.|[^"\\])*")(\s*:)?|(\btrue\b|\bfalse\b|\bnull\b)|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g;
+  let result = "";
+  let cursor = 0;
+  let m: RegExpExecArray | null;
+
+  while ((m = re.exec(code)) !== null) {
+    if (cursor < m.index) {
+      result += `<span class="${JSON_TOKEN_CLASSES.punct}">${escHtml(code.slice(cursor, m.index))}</span>`;
+    }
+    if (m[1] !== undefined) {
+      const isKey = !!m[2];
+      result += `<span class="${isKey ? JSON_TOKEN_CLASSES.key : JSON_TOKEN_CLASSES.string}">${escHtml(m[1])}</span>`;
+      if (m[2])
+        result += `<span class="${JSON_TOKEN_CLASSES.punct}">${escHtml(m[2])}</span>`;
+      cursor = m.index + m[0].length;
+    } else if (m[3] !== undefined) {
+      result += `<span class="${m[3] === "null" ? JSON_TOKEN_CLASSES.null : JSON_TOKEN_CLASSES.boolean}">${escHtml(m[3])}</span>`;
+      cursor = m.index + m[3].length;
+    } else if (m[4] !== undefined) {
+      result += `<span class="${JSON_TOKEN_CLASSES.number}">${escHtml(m[4])}</span>`;
+      cursor = m.index + m[4].length;
+    }
+  }
+
+  if (cursor < code.length) {
+    result += `<span class="${JSON_TOKEN_CLASSES.punct}">${escHtml(code.slice(cursor))}</span>`;
+  }
+
+  return result;
+}
diff --git a/app/lib/utils/assessmentFetcher.ts b/app/lib/utils/assessmentFetcher.ts
new file mode 100644
index 00000000..28594648
--- /dev/null
+++ b/app/lib/utils/assessmentFetcher.ts
@@ -0,0 +1,268 @@
+// Assessment-scoped config fetchers, model helpers, and save logic.
+import { apiFetch } from "@/app/lib/apiClient";
+import { invalidateConfigCache } from "@/app/lib/configFetchers";
+import { ASSESSMENT_TAG } from "@/app/lib/assessment/constants";
+import {
+  ASSESSMENT_DEFAULT_CONFIG,
+  ASSESSMENT_MODEL_CONFIGS,
+  GPT4_STYLE_CONFIG,
+} from "@/app/lib/data/assessmentModels";
+import { DEFAULT_PAGE_LIMIT } from "@/app/lib/constants";
+import type {
+  ConfigParamDefinition,
+  ConfigSelection,
+  ModelOption,
+  PagedResult,
+  VersionListState,
+} from "@/app/lib/types/assessment";
+import type {
+  CompletionParams,
+  ConfigBlob,
+  ConfigCreate,
+  ConfigListResponse,
+  ConfigPublic,
+  ConfigVersionCreate,
+  ConfigVersionItems,
+  ConfigVersionListResponse,
+  ConfigVersionPublic,
+  ConfigVersionResponse,
+  ConfigWithVersionResponse,
+  SavedConfig,
+} from "@/app/lib/types/configs";
+
+export function getModelsByProvider(provider: string): ModelOption[] {
+  return ASSESSMENT_MODEL_CONFIGS.filter(
+    (model) => model.provider === provider,
+  ).map(({ model_name }) => ({ value: model_name, label: model_name }));
+}
+
+export function getDefaultModelForProvider(provider: string): string {
+  return (
+    ASSESSMENT_MODEL_CONFIGS.find((model) => model.provider === provider)
+      ?.model_name ?? "gpt-4o-mini"
+  );
+}
+
+export function getModelConfigDefinition(
+  modelName: string,
+): Record<string, ConfigParamDefinition> {
+  return (
+    ASSESSMENT_MODEL_CONFIGS.find((item) => item.model_name === modelName)
+      ?.config ?? GPT4_STYLE_CONFIG
+  );
+}
+
+export function buildDefaultParams(
+  modelName: string,
+): Record<string, number | string> {
+  const definition = getModelConfigDefinition(modelName);
+  return Object.fromEntries(
+    Object.entries(definition).map(([key, value]) => [key, value.default]),
+  );
+}
+
+export function buildInitialAssessmentConfigDraft(): ConfigBlob {
+  return JSON.parse(JSON.stringify(ASSESSMENT_DEFAULT_CONFIG)) as ConfigBlob;
+}
+
+export function buildInitialAssessmentVersionState(): VersionListState {
+  return {
+    items: [],
+    isLoading: false,
+    error: null,
+    hasMore: true,
+    nextSkip: 0,
+  };
+}
+
+export function toConfigSelection(saved: SavedConfig): ConfigSelection {
+  return {
+    config_id: saved.config_id,
+    config_version: saved.version,
+    name: saved.name,
+    provider: saved.provider,
+    model: saved.modelName,
+  };
+}
+
+function buildPageResult<T>(
+  items: T[],
+  skip: number,
+  limit: number,
+): PagedResult<T> {
+  return {
+    items,
+    hasMore: items.length === limit,
+    nextSkip: skip + items.length,
+  };
+}
+
+function normalizeConfigBlobForApi(configBlob: ConfigBlob): ConfigBlob {
+  const nextParams: Partial<CompletionParams> = {};
+  Object.entries(configBlob.completion.params).forEach(([key, value]) => {
+    if (value !== undefined && value !== "") {
+      nextParams[key] = value;
+    }
+  });
+  return {
+    completion: {
+      provider: configBlob.completion.provider,
+      type: "text",
+      params: nextParams as CompletionParams,
+    },
+  };
+}
+
+export async function fetchConfigPage(params: {
+  apiKey: string;
+  skip?: number;
+  limit?: number;
+}): Promise<PagedResult<ConfigPublic>> {
+  const skip = params.skip ?? 0;
+  const limit = params.limit ?? DEFAULT_PAGE_LIMIT;
+  const query = new URLSearchParams({
+    skip: String(skip),
+    limit: String(limit),
+    tag: ASSESSMENT_TAG,
+  });
+  const data = await apiFetch<ConfigListResponse>(
+    `/api/configs?${query.toString()}`,
+    params.apiKey,
+  );
+  if (!data.success || !data.data) {
+    throw new Error(data.error || "Failed to fetch configs");
+  }
+  return buildPageResult(data.data, skip, limit);
+}
+
+export async function fetchConfigVersionsPage(
+  apiKey: string,
+  configId: string,
+  params: { skip?: number; limit?: number },
+): Promise<PagedResult<ConfigVersionItems>> {
+  const skip = params.skip ?? 0;
+  const limit = params.limit ?? DEFAULT_PAGE_LIMIT;
+  const query = new URLSearchParams({
+    skip: String(skip),
+    limit: String(limit),
+    tag: ASSESSMENT_TAG,
+  });
+  const data = await apiFetch<ConfigVersionListResponse>(
+    `/api/configs/${configId}/versions?${query.toString()}`,
+    apiKey,
+  );
+  if (!data.success || !data.data) {
+    throw new Error(data.error || "Failed to fetch config versions");
+  }
+  return buildPageResult(data.data, skip, limit);
+}
+
+export async function fetchConfigVersionDetail(
+  apiKey: string,
+  configId: string,
+  versionNumber: number,
+): Promise<ConfigVersionPublic> {
+  const query = new URLSearchParams({ tag: ASSESSMENT_TAG });
+  const data = await apiFetch<ConfigVersionResponse>(
+    `/api/configs/${configId}/versions/${versionNumber}?${query.toString()}`,
+    apiKey,
+  );
+  if (!data.success || !data.data) {
+    throw new Error(data.error || "Failed to fetch version details");
+  }
+  return data.data;
+}
+
+export async function fetchConfigSelection(
+  apiKey: string,
+  config: Pick<ConfigPublic, "id" | "name">,
+  versionNumber: number,
+): Promise<ConfigSelection> {
+  const version = await fetchConfigVersionDetail(
+    apiKey,
+    config.id,
+    versionNumber,
+  );
+  const completion = version.config_blob.completion;
+  return {
+    config_id: config.id,
+    config_version: version.version,
+    name: config.name,
+    provider: completion.provider,
+    model: String(completion.params.model || ""),
+  };
+}
+
+export async function saveAssessmentConfig(params: {
+  apiKey: string;
+  configName: string;
+  commitMessage: string;
+  configBlob: ConfigBlob;
+  existingConfig: { id: string; name: string } | null;
+}): Promise<ConfigSelection> {
+  const { apiKey, existingConfig } = params;
+
+  if (!apiKey) {
+    throw new Error("No API key selected. Please choose one in the Keystore.");
+  }
+
+  const trimmedName = params.configName.trim();
+  if (!trimmedName) {
+    throw new Error("Configuration name is required");
+  }
+
+  const normalizedBlob = normalizeConfigBlobForApi(params.configBlob);
+  const provider = normalizedBlob.completion.provider;
+  const model = String(normalizedBlob.completion.params.model || "");
+
+  if (existingConfig) {
+    const versionCreate: ConfigVersionCreate = {
+      config_blob: normalizedBlob,
+      commit_message:
+        params.commitMessage.trim() || "Updated assessment configuration",
+    };
+    const data = await apiFetch<ConfigVersionResponse>(
+      `/api/configs/${existingConfig.id}/versions`,
+      apiKey,
+      { method: "POST", body: JSON.stringify(versionCreate) },
+    );
+    if (!data.success || !data.data) {
+      throw new Error(data.error || "Failed to create config version");
+    }
+    invalidateConfigCache();
+    return {
+      config_id: existingConfig.id,
+      config_version: data.data.version,
+      name: existingConfig.name,
+      provider,
+      model,
+    };
+  }
+
+  const configCreate: ConfigCreate = {
+    name: trimmedName,
+    description: "Assessment configuration",
+    config_blob: normalizedBlob,
+    commit_message:
+      params.commitMessage.trim() || "Initial assessment configuration",
+  };
+  const data = await apiFetch<ConfigWithVersionResponse>(
+    "/api/configs",
+    apiKey,
+    {
+      method: "POST",
+      body: JSON.stringify(configCreate),
+    },
+  );
+  if (!data.success || !data.data) {
+    throw new Error(data.error || "Failed to create configuration");
+  }
+  invalidateConfigCache();
+  return {
+    config_id: data.data.id,
+    config_version: data.data.version.version,
+    name: data.data.name,
+    provider,
+    model,
+  };
+}
diff --git a/app/lib/utils/evaluationExport.ts b/app/lib/utils/evaluationExport.ts
new file mode 100644
index 00000000..39d28444
--- /dev/null
+++ b/app/lib/utils/evaluationExport.ts
@@ -0,0 +1,115 @@
+import type {
+  EvalJob,
+  AssistantConfig,
+  GroupedTraceItem,
+  ScoreObject,
+} from "@/app/lib/types/evaluation";
+import { normalizeToIndividualScores } from "@/app/lib/utils/evaluation";
+import { sanitizeCSVCell } from "@/app/lib/utils";
+
+const downloadCSV = (csvContent: string, filename: string) => {
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.setAttribute("href", url);
+  link.setAttribute("download", filename);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+};
+
+const safeFilename = (input: string) => input.replace(/[^a-z0-9]/gi, "_");
+
+export const exportGroupedCSV = (
+  job: EvalJob,
+  traces: GroupedTraceItem[],
+): number => {
+  const maxAnswers = Math.max(...traces.map((g) => g.llm_answers.length));
+  const scoreNames = traces[0]?.scores[0]?.map((s) => s.name) || [];
+  let csvContent = "Question ID,Question,Ground Truth";
+  for (let i = 1; i <= maxAnswers; i++) {
+    csvContent += `,LLM Answer ${i},Trace ID ${i}`;
+    scoreNames.forEach((name) => {
+      csvContent += `,${name} (${i}),${sanitizeCSVCell(`${name} (${i}) Comment`)}`;
+    });
+  }
+  csvContent += "\n";
+  traces.forEach((group) => {
+    const row: string[] = [
+      String(group.question_id),
+      sanitizeCSVCell(group.question || ""),
+      sanitizeCSVCell(group.ground_truth_answer || ""),
+    ];
+    for (let i = 0; i < maxAnswers; i++) {
+      row.push(
+        `"${(group.llm_answers[i] || "").replace(/"/g, '""').replace(/\n/g, " ")}"`,
+      );
+      row.push(group.trace_ids[i] || "");
+      scoreNames.forEach((name) => {
+        const score = group.scores[i]?.find((s) => s.name === name);
+        row.push(score ? String(score.value) : "");
+        row.push(score?.comment ? sanitizeCSVCell(score.comment, true) : "");
+      });
+    }
+    csvContent += row.join(",") + "\n";
+  });
+
+  downloadCSV(
+    csvContent,
+    `evaluation_${job.id}_${safeFilename(job.run_name)}_grouped.csv`,
+  );
+  return traces.length;
+};
+
+export const exportRowCSV = (
+  job: EvalJob,
+  scoreObject: ScoreObject,
+  assistantConfig?: AssistantConfig,
+): number => {
+  const individual_scores = normalizeToIndividualScores(scoreObject);
+  if (!individual_scores || individual_scores.length === 0) {
+    throw new Error("No valid data available to export");
+  }
+
+  let csvContent = "";
+  const firstItem = individual_scores[0];
+  const scoreNames = firstItem?.trace_scores?.map((s) => s.name) || [];
+  csvContent +=
+    "Counter,Trace ID,Job ID,Run Name,Dataset,Model,Status,Total Items,";
+  csvContent += "Question,Answer,Ground Truth,";
+  csvContent +=
+    scoreNames.map((name) => `${name},${name} (comment)`).join(",") + "\n";
+
+  let rowCount = 0;
+  individual_scores.forEach((item, index) => {
+    const row = [
+      index + 1,
+      item.trace_id || "N/A",
+      job.id,
+      `"${job.run_name.replace(/"/g, '""')}"`,
+      `"${job.dataset_name.replace(/"/g, '""')}"`,
+      assistantConfig?.model || job.config?.model || "N/A",
+      job.status,
+      job.total_items,
+      `"${(item.input?.question || "").replace(/"/g, '""').replace(/\n/g, " ")}"`,
+      `"${(item.output?.answer || "").replace(/"/g, '""').replace(/\n/g, " ")}"`,
+      `"${(item.metadata?.ground_truth || "").replace(/"/g, '""').replace(/\n/g, " ")}"`,
+      ...scoreNames.flatMap((name) => {
+        const score = item.trace_scores?.find((s) => s.name === name);
+        return [
+          score ? score.value : "N/A",
+          score?.comment ? sanitizeCSVCell(score.comment, true) : "",
+        ];
+      }),
+    ].join(",");
+    csvContent += row + "\n";
+    rowCount++;
+  });
+
+  downloadCSV(
+    csvContent,
+    `evaluation_${job.id}_${safeFilename(job.run_name)}.csv`,
+  );
+  return rowCount;
+};
diff --git a/app/lib/utils/features.ts b/app/lib/utils/features.ts
new file mode 100644
index 00000000..d90fe1d6
--- /dev/null
+++ b/app/lib/utils/features.ts
@@ -0,0 +1,90 @@
+import {
+  COOKIE_KEYS,
+  FEATURES_UPDATED_EVENT,
+  STORAGE_KEYS,
+} from "@/app/lib/constants";
+const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 7;
+
+function parseFeatures(raw: string | undefined): string[] | null {
+  if (!raw) return null;
+  try {
+    const parsed: unknown = JSON.parse(decodeURIComponent(raw));
+    if (!Array.isArray(parsed)) return null;
+    return parsed.filter(
+      (feature): feature is string => typeof feature === "string",
+    );
+  } catch {
+    return null;
+  }
+}
+
+function readCookie(name: string): string | undefined {
+  if (typeof document === "undefined") return undefined;
+  const prefix = `${name}=`;
+  const entry = document.cookie
+    .split(";")
+    .map((part) => part.trim())
+    .find((part) => part.startsWith(prefix));
+  return entry?.slice(prefix.length);
+}
+
+function writeFeaturesCookie(features: string[]): void {
+  if (typeof document === "undefined") return;
+  const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
+  const value = encodeURIComponent(JSON.stringify(features));
+  document.cookie = `${COOKIE_KEYS.FEATURES}=${value}; Path=/; Max-Age=${COOKIE_MAX_AGE_SECONDS}; SameSite=Lax${secure}`;
+}
+
+function readSessionFeatures(): string[] | null {
+  if (typeof localStorage === "undefined") return null;
+  const raw = localStorage.getItem(STORAGE_KEYS.SESSION);
+  if (!raw) return null;
+
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    const features = (parsed as { user?: { features?: unknown } } | null)?.user
+      ?.features;
+    if (!Array.isArray(features)) return null;
+    return features.filter(
+      (feature): feature is string => typeof feature === "string",
+    );
+  } catch {
+    return null;
+  }
+}
+
+function syncSessionFeatures(features: string[]): void {
+  if (typeof localStorage === "undefined") return;
+  const raw = localStorage.getItem(STORAGE_KEYS.SESSION);
+  if (!raw) return;
+
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed?.user && typeof parsed.user === "object") {
+      parsed.user.features = features;
+      localStorage.setItem(STORAGE_KEYS.SESSION, JSON.stringify(parsed));
+    }
+  } catch {
+    // ignore malformed session payload
+  }
+}
+
+function broadcastFeatures(features: string[]): void {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(
+    new CustomEvent(FEATURES_UPDATED_EVENT, {
+      detail: { features },
+    }),
+  );
+}
+
+export function removeFeatureFromClient(feature: string): void {
+  const currentFeatures =
+    parseFeatures(readCookie(COOKIE_KEYS.FEATURES)) ?? readSessionFeatures();
+  if (!currentFeatures) return;
+
+  const nextFeatures = currentFeatures.filter((value) => value !== feature);
+  writeFeaturesCookie(nextFeatures);
+  syncSessionFeatures(nextFeatures);
+  broadcastFeatures(nextFeatures);
+}
diff --git a/app/lib/utils/outputSchema.ts b/app/lib/utils/outputSchema.ts
new file mode 100644
index 00000000..b9fb3aa9
--- /dev/null
+++ b/app/lib/utils/outputSchema.ts
@@ -0,0 +1,159 @@
+import type {
+  SchemaProperty,
+  SchemaPropertyType,
+} from "@/app/lib/types/assessment";
+
+let idCounter = 0;
+export function genId() {
+  return `prop_${Date.now()}_${++idCounter}`;
+}
+
+export function createProperty(): SchemaProperty {
+  return {
+    id: genId(),
+    name: "",
+    type: "string",
+    isArray: false,
+    isRequired: true,
+    children: [],
+    enumValues: [],
+  };
+}
+
+export function updateInTree(
+  props: SchemaProperty[],
+  id: string,
+  updater: (p: SchemaProperty) => SchemaProperty,
+): SchemaProperty[] {
+  return props.map((p) => {
+    if (p.id === id) return updater(p);
+    if (p.children.length > 0)
+      return { ...p, children: updateInTree(p.children, id, updater) };
+    return p;
+  });
+}
+
+export function removeFromTree(
+  props: SchemaProperty[],
+  id: string,
+): SchemaProperty[] {
+  return props
+    .filter((p) => p.id !== id)
+    .map((p) => ({ ...p, children: removeFromTree(p.children, id) }));
+}
+
+export function addChildToTree(
+  props: SchemaProperty[],
+  parentId: string,
+): SchemaProperty[] {
+  return props.map((p) => {
+    if (p.id === parentId)
+      return { ...p, children: [...p.children, createProperty()] };
+    if (p.children.length > 0)
+      return { ...p, children: addChildToTree(p.children, parentId) };
+    return p;
+  });
+}
+
+export function toJsonSchema(properties: SchemaProperty[]): object | null {
+  if (properties.length === 0) return null;
+  const props: Record<string, object> = {};
+  const required: string[] = [];
+  properties.forEach((p) => {
+    if (!p.name.trim()) return;
+    let def: object;
+    if (p.type === "object")
+      def = toJsonSchema(p.children) || { type: "object" };
+    else if (p.type === "enum")
+      def = { type: "string", enum: p.enumValues.filter((v) => v.trim()) };
+    else def = { type: p.type };
+    if (p.isArray) def = { type: "array", items: def };
+    props[p.name] = def;
+    if (p.isRequired) required.push(p.name);
+  });
+  return {
+    type: "object",
+    properties: props,
+    ...(required.length > 0 ? { required } : {}),
+  };
+}
+
+export function fromJsonSchema(
+  schema: Record<string, unknown>,
+): SchemaProperty[] {
+  if (!schema || schema.type !== "object" || !schema.properties) return [];
+  const required: string[] = Array.isArray(schema.required)
+    ? (schema.required as string[])
+    : [];
+  const properties = schema.properties as Record<
+    string,
+    Record<string, unknown>
+  >;
+  return Object.entries(properties).map(([name, def]) => {
+    let type: SchemaPropertyType = "string";
+    let isArray = false;
+    let children: SchemaProperty[] = [];
+    let enumValues: string[] = [];
+    let actualDef: Record<string, unknown> = def;
+    if (def.type === "array" && def.items && typeof def.items === "object") {
+      isArray = true;
+      actualDef = def.items as Record<string, unknown>;
+    }
+    if (actualDef.type === "object") {
+      type = "object";
+      children = fromJsonSchema(actualDef as Record<string, unknown>);
+    } else if (Array.isArray(actualDef.enum)) {
+      type = "enum";
+      enumValues = actualDef.enum as string[];
+    } else {
+      type = (actualDef.type as SchemaPropertyType) || "string";
+    }
+    return {
+      id: genId(),
+      name,
+      type,
+      isArray,
+      isRequired: required.includes(name),
+      children,
+      enumValues,
+    };
+  });
+}
+
+export function validateOpenApiSchema(raw: string): {
+  valid: boolean;
+  schema: Record<string, unknown> | null;
+  error: string | null;
+} {
+  if (!raw.trim()) return { valid: true, schema: null, error: null };
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return {
+      valid: false,
+      schema: null,
+      error: "Invalid JSON — check for syntax errors.",
+    };
+  }
+  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
+    return {
+      valid: false,
+      schema: null,
+      error: "Schema must be a JSON object.",
+    };
+  const obj = parsed as Record<string, unknown>;
+  if (obj.type !== "object")
+    return {
+      valid: false,
+      schema: null,
+      error: 'Root schema must have "type": "object".',
+    };
+  if (!obj.properties || typeof obj.properties !== "object")
+    return {
+      valid: false,
+      schema: null,
+      error: 'Schema must have a "properties" object.',
+    };
+  return { valid: true, schema: obj, error: null };
+}
diff --git a/middleware.ts b/middleware.ts
index 650dd24c..a49a5eae 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,6 +1,9 @@
 import { NextResponse, type NextRequest } from "next/server";
-
-/** Route protection via `kaapi_role` cookie. Settings requires superuser. */
+import {
+  COOKIE_KEYS,
+  FeatureFlag,
+  type FeatureFlagKey,
+} from "@/app/lib/constants";
 
 const PUBLIC_ROUTES = new Set<string>([
   "/",
@@ -13,18 +16,37 @@ const PUBLIC_ROUTES = new Set<string>([
   "/coming-soon/text-to-speech",
 ]);
 
+const FEATURE_GATED_PREFIXES: Array<{
+  prefix: string;
+  flag: FeatureFlagKey;
+}> = [{ prefix: "/assessment", flag: FeatureFlag.ASSESSMENT }];
+
 const GUEST_ONLY_ROUTES = new Set<string>(["/keystore"]);
 
 const HOME_ROUTE = "/chat";
 const PATHNAME_STARTS_WITH = ["/settings"];
+function parseFeatures(raw: string | undefined): Set<string> {
+  if (!raw) return new Set();
+  try {
+    const parsed: unknown = JSON.parse(decodeURIComponent(raw));
+    if (Array.isArray(parsed)) {
+      return new Set(parsed.filter((f): f is string => typeof f === "string"));
+    }
+  } catch {
+    /* ignore malformed cookie */
+  }
+  return new Set();
+}
 
 export function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
-  const role = request.cookies.get("kaapi_role")?.value;
+  const role = request.cookies.get(COOKIE_KEYS.ROLE)?.value;
+  const features = parseFeatures(
+    request.cookies.get(COOKIE_KEYS.FEATURES)?.value,
+  );
   const isAuthenticated = role === "superuser" || role === "user";
   const isSuperuser = role === "superuser";
 
-  // Guest-only routes: allowed when unauthenticated, blocked otherwise
   if (GUEST_ONLY_ROUTES.has(pathname)) {
     if (isAuthenticated) {
       return NextResponse.redirect(new URL(HOME_ROUTE, request.url));
@@ -32,27 +54,28 @@ export function middleware(request: NextRequest) {
     return NextResponse.next();
   }
 
-  // Allow public routes for everyone
   if (PUBLIC_ROUTES.has(pathname)) {
     return NextResponse.next();
   }
 
-  // /settings/* requires superuser
   if (PATHNAME_STARTS_WITH.some((prefix) => pathname.startsWith(prefix))) {
-    if (!isAuthenticated) {
-      return NextResponse.redirect(new URL(HOME_ROUTE, request.url));
-    }
-    if (!isSuperuser) {
+    if (!isAuthenticated || !isSuperuser) {
       return NextResponse.redirect(new URL(HOME_ROUTE, request.url));
     }
     return NextResponse.next();
   }
 
-  // Any other app route requires authentication
   if (!isAuthenticated) {
     return NextResponse.redirect(new URL(HOME_ROUTE, request.url));
   }
 
+  const gated = FEATURE_GATED_PREFIXES.find(
+    ({ prefix }) => pathname === prefix || pathname.startsWith(`${prefix}/`),
+  );
+  if (gated && !features.has(gated.flag)) {
+    return NextResponse.redirect(new URL(HOME_ROUTE, request.url));
+  }
+
   return NextResponse.next();
 }
 
diff --git a/package-lock.json b/package-lock.json
index 9f653954..6a16b17c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "react-dom": "19.2.0",
         "react-router-dom": "^7.9.5",
         "swr": "^2.3.6",
+        "xlsx": "^0.18.5",
         "zustand": "^5.0.12"
       },
       "devDependencies": {
@@ -2172,6 +2173,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2590,6 +2600,19 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2663,6 +2686,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2723,6 +2755,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3746,6 +3790,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -6409,6 +6462,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -7149,6 +7214,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -7159,6 +7242,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index 9831c150..36a36252 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react-dom": "19.2.0",
     "react-router-dom": "^7.9.5",
     "swr": "^2.3.6",
+    "xlsx": "^0.18.5",
     "zustand": "^5.0.12"
   },
   "devDependencies": {