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)/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)/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/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/Select.tsx b/app/components/Select.tsx
index 43e2f060..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 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+      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/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/evaluations/DatasetCard.tsx b/app/components/evaluations/DatasetCard.tsx
index a9a8b626..180d2f26 100644
--- a/app/components/evaluations/DatasetCard.tsx
+++ b/app/components/evaluations/DatasetCard.tsx
@@ -18,7 +18,7 @@ export default function DatasetCard({
   onRequestDelete,
 }: DatasetCardProps) {
   return (
-    <div className="rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-[3px] border-l-[#DCCFC3]">
+    <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">
diff --git a/app/components/evaluations/DatasetsTab.tsx b/app/components/evaluations/DatasetsTab.tsx
index 87999489..dcf679f5 100644
--- a/app/components/evaluations/DatasetsTab.tsx
+++ b/app/components/evaluations/DatasetsTab.tsx
@@ -148,7 +148,6 @@ export default function DatasetsTab({
 
   return (
     <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Dataset List */}
       <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">
@@ -187,7 +186,6 @@ export default function DatasetsTab({
         </div>
       </div>
 
-      {/* Right Panel - Create Dataset Form */}
       <div
         className="shrink-0 border-l flex flex-col overflow-hidden bg-bg-primary border-border"
         style={{ width: `${leftPanelWidth}px` }}
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 47220218..572d10d9 100644
--- a/app/components/evaluations/EvalRunCard.tsx
+++ b/app/components/evaluations/EvalRunCard.tsx
@@ -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>
diff --git a/app/components/evaluations/EvaluationsTab.tsx b/app/components/evaluations/EvaluationsTab.tsx
index 9d166a07..ec370779 100644
--- a/app/components/evaluations/EvaluationsTab.tsx
+++ b/app/components/evaluations/EvaluationsTab.tsx
@@ -3,13 +3,11 @@
 import { useState, useEffect, useCallback } from "react";
 import { apiFetch } from "@/app/lib/apiClient";
 import { Dataset } from "@/app/lib/types/dataset";
-import { EvalJob, AssistantConfig } from "@/app/lib/types/evaluation";
+import { EvalJob, AssistantConfig, Tab } from "@/app/lib/types/evaluation";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import EvalRunsList from "./EvalRunsList";
 import RunEvaluationForm from "./RunEvaluationForm";
 
-type Tab = "datasets" | "evaluations";
-
 export interface EvaluationsTabProps {
   leftPanelWidth: number;
   apiKey: string;
@@ -42,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>
@@ -117,6 +115,7 @@ export default function EvaluationsTab({
 
   useEffect(() => {
     if (isAuthenticated) fetchEvaluations();
+    else setIsLoading(false);
   }, [isAuthenticated, fetchEvaluations]);
 
   const handleRun = async () => {
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
index 535494c3..7b6465b6 100644
--- a/app/components/evaluations/RunEvaluationForm.tsx
+++ b/app/components/evaluations/RunEvaluationForm.tsx
@@ -6,8 +6,7 @@ import Select from "@/app/components/Select";
 import { CheckCircleIcon, PlayIcon } from "@/app/components/icons";
 import ConfigSelector from "@/app/components/ConfigSelector";
 import EvalDatasetDescription from "./EvalDatasetDescription";
-
-type Tab = "datasets" | "evaluations";
+import { Tab } from "@/app/lib/types/evaluation";
 
 interface RunEvaluationFormProps {
   storedDatasets: Dataset[];
diff --git a/app/components/speech-to-text/AudioFileItem.tsx b/app/components/speech-to-text/AudioFileItem.tsx
index dca739bd..2219c999 100644
--- a/app/components/speech-to-text/AudioFileItem.tsx
+++ b/app/components/speech-to-text/AudioFileItem.tsx
@@ -3,7 +3,7 @@
 import { AudioFile, Language } from "@/app/lib/types/speechToText";
 import { CheckLineIcon, CloseIcon } from "@/app/components/icons";
 import Select from "@/app/components/Select";
-import AudioPlayer from "./AudioPlayer";
+import AudioPlayer from "@/app/components/speech-to-text/AudioPlayer";
 
 interface AudioFileItemProps {
   audioFile: AudioFile;
diff --git a/app/components/speech-to-text/CreateSTTDatasetForm.tsx b/app/components/speech-to-text/CreateSTTDatasetForm.tsx
index dd3be51d..a5e13afd 100644
--- a/app/components/speech-to-text/CreateSTTDatasetForm.tsx
+++ b/app/components/speech-to-text/CreateSTTDatasetForm.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { AudioFile, Language } from "@/app/lib/types/speechToText";
 import { useAuth } from "@/app/lib/context/AuthContext";
-import { Button, Field } from "@/app/components";
+import { Button, Field, InfoTooltip } from "@/app/components";
 import Select from "@/app/components/Select";
 import { MusicNoteIcon, PlusIcon } from "@/app/components/icons";
 import AudioFileItem from "./AudioFileItem";
@@ -52,20 +51,6 @@ export default function CreateSTTDatasetForm({
   languages,
 }: CreateSTTDatasetFormProps) {
   const { isAuthenticated } = useAuth();
-  const [showLanguageInfo, setShowLanguageInfo] = useState(false);
-  const [languageInfoPos, setLanguageInfoPos] = useState({ top: 0, left: 0 });
-
-  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 isCreateDisabled =
     isCreating || !datasetName.trim() || audioFiles.length === 0;
@@ -100,42 +85,18 @@ export default function CreateSTTDatasetForm({
         <label className="text-xs font-medium mb-1.5 text-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 p-0 leading-none bg-bg-primary border border-border text-text-secondary"
-              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 bg-bg-primary border-border w-[280px]"
-                style={{
-                  top: languageInfoPos.top,
-                  left: languageInfoPos.left,
-                }}
-                onClick={(e) => e.stopPropagation()}
-              >
-                <div className="font-semibold mb-1 text-text-primary">
-                  Default Language
-                </div>
-                <p className="text-text-secondary 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>
-              </div>
-            )}
+            <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
@@ -241,7 +202,7 @@ export default function CreateSTTDatasetForm({
           onClick={() => {
             setDatasetName("");
             setDatasetDescription("");
-            setDatasetLanguageId(1);
+            setDatasetLanguageId(languages[0]?.id ?? datasetLanguageId);
             setAudioFiles([]);
             setPlayingFileId(null);
           }}
diff --git a/app/components/speech-to-text/DatasetsTab.tsx b/app/components/speech-to-text/DatasetsTab.tsx
index e08af1ba..eca0a19f 100644
--- a/app/components/speech-to-text/DatasetsTab.tsx
+++ b/app/components/speech-to-text/DatasetsTab.tsx
@@ -154,7 +154,6 @@ export default function DatasetsTab({
 
   return (
     <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Dataset List */}
       <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">
@@ -190,7 +189,6 @@ export default function DatasetsTab({
         </div>
       </div>
 
-      {/* Right Panel - Create Dataset Form */}
       <div
         className="shrink-0 border-l flex flex-col overflow-hidden bg-bg-primary border-border"
         style={{ width: `${leftPanelWidth}px` }}
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..50093d4e 100644
--- a/app/components/text-to-speech/DatasetsTab.tsx
+++ b/app/components/text-to-speech/DatasetsTab.tsx
@@ -1,19 +1,22 @@
 "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";
 
 export interface DatasetsTabProps {
   leftPanelWidth: number;
@@ -37,6 +40,53 @@ 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;
+};
+
+const 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;
+};
+
 export default function DatasetsTab({
   leftPanelWidth,
   datasetName,
@@ -60,25 +110,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 +127,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 +141,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..1fe4ebf6
--- /dev/null
+++ b/app/components/text-to-speech/TTSViewDatasetModal.tsx
@@ -0,0 +1,91 @@
+"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) => (
+            <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/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/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..13fda320 100644
--- a/app/lib/types/nav.ts
+++ b/app/lib/types/nav.ts
@@ -51,3 +51,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/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;
+};