diff --git a/.env.example b/.env.example
index ae81a04..3e6995f 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
-BACKEND_URL=http://localhost:8000
\ No newline at end of file
+BACKEND_URL=http://localhost:8000
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
\ No newline at end of file
diff --git a/app/(main)/configurations/page.tsx b/app/(main)/configurations/page.tsx
index 1e35c43..d9243f0 100644
--- a/app/(main)/configurations/page.tsx
+++ b/app/(main)/configurations/page.tsx
@@ -45,8 +45,8 @@ export default function ConfigLibraryPage() {
     Record<string, number>
   >({});
   const { sidebarCollapsed } = useApp();
-  const { activeKey } = useAuth();
-  const apiKey = activeKey?.key;
+  const { activeKey, isAuthenticated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
   const [searchInput, setSearchInput] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState("");
   const [columnCount, setColumnCount] = useState(3);
@@ -100,11 +100,11 @@ export default function ConfigLibraryPage() {
 
   useEffect(() => {
     const fetchEvaluationCounts = async () => {
-      if (!activeKey) return;
+      if (!isAuthenticated) return;
       try {
         const data = await apiFetch<EvalJob[] | { data: EvalJob[] }>(
           "/api/evaluations",
-          activeKey.key,
+          apiKey,
         );
         const jobs: EvalJob[] = Array.isArray(data) ? data : data.data || [];
         const counts: Record<string, number> = {};
@@ -129,7 +129,7 @@ export default function ConfigLibraryPage() {
         await existing;
         return;
       }
-      if (!apiKey) return;
+      if (!isAuthenticated) return;
 
       const loadPromise = (async () => {
         const res = await apiFetch<{
@@ -144,7 +144,7 @@ export default function ConfigLibraryPage() {
       pendingVersionLoads.set(configId, loadPromise);
       await loadPromise;
     },
-    [apiKey],
+    [apiKey, isAuthenticated],
   );
 
   const loadSingleVersion = useCallback(
@@ -152,7 +152,7 @@ export default function ConfigLibraryPage() {
       const key = `${configId}:${version}`;
       const existing = pendingSingleVersionLoads.get(key);
       if (existing) return existing;
-      if (!apiKey) return null;
+      if (!isAuthenticated) return null;
 
       const configPublic =
         configs.find((c) => c.id === configId) ??
@@ -179,7 +179,7 @@ export default function ConfigLibraryPage() {
       pendingSingleVersionLoads.set(key, loadPromise);
       return loadPromise;
     },
-    [apiKey, configs],
+    [apiKey, configs, isAuthenticated],
   );
 
   const handleCreateNew = () => {
@@ -277,17 +277,7 @@ export default function ConfigLibraryPage() {
             ) : error ? (
               <div className="rounded-lg p-6 text-center bg-[#fef2f2] border border-[#fecaca]">
                 <WarningTriangleIcon className="w-12 h-12 mx-auto mb-3 text-[#dc2626]" />
-                <p className="text-sm font-medium text-[#dc2626]">{error}</p>
-                <button
-                  onClick={() => router.push("/keystore")}
-                  className="mt-4 px-4 py-2 rounded-md text-sm font-medium transition-colors"
-                  style={{
-                    backgroundColor: colors.accent.primary,
-                    color: colors.bg.primary,
-                  }}
-                >
-                  Go to Keystore
-                </button>
+                <p className="text-sm font-medium text-status-error">{error}</p>
               </div>
             ) : configs.length === 0 ? (
               <div
diff --git a/app/(main)/configurations/prompt-editor/page.tsx b/app/(main)/configurations/prompt-editor/page.tsx
index c1fb97d..7e4b4e0 100644
--- a/app/(main)/configurations/prompt-editor/page.tsx
+++ b/app/(main)/configurations/prompt-editor/page.tsx
@@ -36,7 +36,7 @@ function PromptEditorContent() {
   const toast = useToast();
   const searchParams = useSearchParams();
   const { sidebarCollapsed } = useApp();
-  const { activeKey } = useAuth();
+  const { activeKey, isAuthenticated } = useAuth();
   const urlConfigId = searchParams.get("config");
   const urlVersion = searchParams.get("version");
   const showHistory = searchParams.get("history") === "true";
@@ -253,9 +253,9 @@ function PromptEditorContent() {
       return;
     }
 
-    const apiKey = activeKey?.key;
-    if (!apiKey) {
-      toast.error("No API key found. Please add an API key in the Keystore.");
+    const apiKey = activeKey?.key ?? "";
+    if (!isAuthenticated) {
+      toast.error("Please log in to save configurations.");
       return;
     }
 
diff --git a/app/(main)/datasets/page.tsx b/app/(main)/datasets/page.tsx
index cc9f20b..1234bc1 100644
--- a/app/(main)/datasets/page.tsx
+++ b/app/(main)/datasets/page.tsx
@@ -10,23 +10,12 @@ import { useState, useEffect } from "react";
 
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
-import { APIKey } from "@/app/lib/types/credentials";
+import { apiFetch } from "@/app/lib/apiClient";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import { useToast } from "@/app/components/Toast";
+import { Dataset } from "@/app/lib/types/dataset";
 
-export interface Dataset {
-  dataset_id: number;
-  dataset_name: string;
-  description?: string;
-  total_items: number;
-  original_items: number;
-  duplication_factor: number;
-  langfuse_dataset_id: string;
-  object_store_url: string;
-}
-
-// Keep for backward compatibility with evaluations page
 export const DATASETS_STORAGE_KEY = "kaapi_datasets";
 
 export default function Datasets() {
@@ -40,22 +29,19 @@ export default function Datasets() {
   const [isUploading, setIsUploading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const { activeKey: apiKey } = useAuth();
-
-  // Pagination state
+  const { activeKey: apiKey, isAuthenticated } = useAuth();
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 10;
 
-  // Fetch datasets from backend when API key is available
   useEffect(() => {
-    if (apiKey) {
+    if (isAuthenticated) {
       fetchDatasets();
     }
-  }, [apiKey]);
+  }, [apiKey, isAuthenticated]);
 
   const fetchDatasets = async () => {
-    if (!apiKey) {
-      setError("No API key found. Please add an API key in the Keystore.");
+    if (!isAuthenticated) {
+      setError("Please log in to continue.");
       return;
     }
 
@@ -63,23 +49,10 @@ export default function Datasets() {
     setError(null);
 
     try {
-      const response = await fetch("/api/evaluations/datasets", {
-        method: "GET",
-        headers: {
-          "X-API-KEY": apiKey.key,
-        },
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(
-          errorData.error ||
-            errorData.message ||
-            `Failed to fetch datasets: ${response.status}`,
-        );
-      }
-
-      const data = await response.json();
+      const data = await apiFetch<Dataset[] | { data: Dataset[] }>(
+        "/api/evaluations/datasets",
+        apiKey?.key ?? "",
+      );
       const datasetList = Array.isArray(data) ? data : data.data || [];
       setDatasets(datasetList);
     } catch (err: unknown) {
@@ -117,49 +90,29 @@ export default function Datasets() {
       return;
     }
 
-    if (!apiKey) {
-      toast.error("No API key found. Please add an API key in the Keystore.");
+    if (!isAuthenticated) {
+      toast.error("Please log in to continue.");
       return;
     }
 
     setIsUploading(true);
 
     try {
-      // Prepare FormData for upload
       const formData = new FormData();
       formData.append("file", selectedFile);
       formData.append("dataset_name", datasetName.trim());
 
       formData.append("duplication_factor", duplicationFactor || "1");
 
-      // Upload to backend
-      const response = await fetch("/api/evaluations/datasets", {
+      await apiFetch<Dataset>("/api/evaluations/datasets", apiKey?.key ?? "", {
         method: "POST",
         body: formData,
-        headers: {
-          "X-API-KEY": apiKey.key,
-        },
       });
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(
-          errorData.error ||
-            errorData.message ||
-            `Upload failed with status ${response.status}`,
-        );
-      }
-
-      await response.json();
-      // Refresh datasets list
       await fetchDatasets();
 
-      // Reset form
       setSelectedFile(null);
       setDatasetName("");
       setDuplicationFactor("1");
-
-      // Close modal
       setIsModalOpen(false);
 
       toast.success("Dataset uploaded successfully!");
@@ -174,8 +127,8 @@ export default function Datasets() {
   };
 
   const handleDeleteDataset = async (datasetId: number) => {
-    if (!apiKey) {
-      toast.error("No API key found");
+    if (!isAuthenticated) {
+      toast.error("Please log in to continue");
       return;
     }
 
@@ -185,23 +138,14 @@ export default function Datasets() {
     }
 
     try {
-      const response = await fetch(`/api/evaluations/datasets/${datasetId}`, {
-        method: "DELETE",
-        headers: {
-          "X-API-KEY": apiKey.key,
+      await apiFetch(
+        `/api/evaluations/datasets/${datasetId}`,
+        apiKey?.key ?? "",
+        {
+          method: "DELETE",
         },
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(
-          errorData.error ||
-            errorData.message ||
-            `Delete failed with status ${response.status}`,
-        );
-      }
+      );
 
-      // Refresh datasets list
       await fetchDatasets();
       toast.success("Dataset deleted successfully");
     } catch (error) {
@@ -212,7 +156,6 @@ export default function Datasets() {
     }
   };
 
-  // Pagination calculations
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
   const currentDatasets = datasets.slice(indexOfFirstItem, indexOfLastItem);
@@ -221,26 +164,17 @@ export default function Datasets() {
   const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
 
   return (
-    <div
-      className="w-full h-screen flex flex-col"
-      style={{ backgroundColor: "#fafafa" }}
-    >
+    <div className="w-full h-screen flex flex-col bg-bg-secondary">
       <div className="flex flex-1 overflow-hidden">
-        {/* Sidebar */}
         <Sidebar collapsed={sidebarCollapsed} activeRoute="/datasets" />
 
-        {/* Main Content */}
         <div className="flex-1 flex flex-col overflow-hidden">
           <PageHeader
             title="Datasets"
             subtitle="Manage your evaluation datasets"
           />
 
-          {/* Content Area */}
-          <div
-            className="flex-1 overflow-auto p-6"
-            style={{ backgroundColor: "#fafafa" }}
-          >
+          <div className="flex-1 overflow-auto p-6 bg-bg-secondary">
             <div className="max-w-6xl mx-auto space-y-6">
               <DatasetListing
                 datasets={currentDatasets}
@@ -248,7 +182,7 @@ export default function Datasets() {
                 onUploadNew={() => setIsModalOpen(true)}
                 isLoading={isLoading}
                 error={error}
-                apiKey={apiKey}
+                isAuthenticated={isAuthenticated}
                 totalPages={totalPages}
                 currentPage={currentPage}
                 onPageChange={paginate}
@@ -258,7 +192,6 @@ export default function Datasets() {
         </div>
       </div>
 
-      {/* Upload Dataset Modal */}
       {isModalOpen && (
         <UploadDatasetModal
           selectedFile={selectedFile}
@@ -288,7 +221,7 @@ interface DatasetListingProps {
   onUploadNew: () => void;
   isLoading: boolean;
   error: string | null;
-  apiKey: APIKey | null;
+  isAuthenticated: boolean;
   totalPages: number;
   currentPage: number;
   onPageChange: (page: number) => void;
@@ -300,7 +233,7 @@ function DatasetListing({
   onUploadNew,
   isLoading,
   error,
-  apiKey,
+  isAuthenticated,
   totalPages,
   currentPage,
   onPageChange,
@@ -362,43 +295,10 @@ function DatasetListing({
             </svg>
             <p className="text-sm">Loading datasets...</p>
           </div>
-        ) : !apiKey ? (
-          <div
-            className="text-center py-12"
-            style={{ color: "hsl(330, 3%, 49%)" }}
-          >
-            <svg
-              className="mx-auto h-12 w-12 mb-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-              />
-            </svg>
-            <p
-              className="font-medium mb-2"
-              style={{ color: "hsl(330, 3%, 19%)" }}
-            >
-              No API key found
-            </p>
-            <p className="text-sm mb-4">
-              Please add an API key in the Keystore to manage datasets
-            </p>
-            <a
-              href="/keystore"
-              className="inline-block px-6 py-2 rounded-md text-sm font-medium transition-colors"
-              style={{
-                backgroundColor: "#171717",
-                color: "hsl(0, 0%, 100%)",
-              }}
-            >
-              Go to Keystore
-            </a>
+        ) : !isAuthenticated ? (
+          <div className="text-center py-12 text-text-secondary">
+            <p className="font-medium mb-2 text-text-primary">Login required</p>
+            <p className="text-sm">Please log in to manage datasets</p>
           </div>
         ) : error ? (
           <div
@@ -597,7 +497,7 @@ function DatasetListing({
         {/* Pagination */}
         {!isLoading &&
           !error &&
-          apiKey &&
+          isAuthenticated &&
           datasets.length > 0 &&
           totalPages > 1 && (
             <div
diff --git a/app/(main)/document/page.tsx b/app/(main)/document/page.tsx
index d619c49..368547e 100644
--- a/app/(main)/document/page.tsx
+++ b/app/(main)/document/page.tsx
@@ -35,7 +35,7 @@ export default function DocumentPage() {
   const [uploadProgress, setUploadProgress] = useState(0);
   const [uploadPhase, setUploadPhase] = useState<UploadPhase>("uploading");
   const abortUploadRef = useRef<(() => void) | null>(null);
-  const { activeKey: apiKey } = useAuth();
+  const { activeKey: apiKey, isAuthenticated } = useAuth();
 
   const {
     items: documents,
@@ -72,7 +72,7 @@ export default function DocumentPage() {
   };
 
   const handleUpload = async () => {
-    if (!apiKey || !selectedFile) return;
+    if (!isAuthenticated || !selectedFile) return;
 
     setIsUploading(true);
     setUploadProgress(0);
@@ -84,7 +84,7 @@ export default function DocumentPage() {
 
       const { promise, abort } = uploadWithProgress<{ data?: { id: string } }>(
         "/api/document",
-        apiKey.key,
+        apiKey?.key ?? "",
         formData,
         (percent, phase) => {
           setUploadProgress(percent);
@@ -121,8 +121,8 @@ export default function DocumentPage() {
   };
 
   const handleDeleteDocument = async (documentId: string) => {
-    if (!apiKey) {
-      toast.error("No API key found");
+    if (!isAuthenticated) {
+      toast.error("Please log in to continue");
       return;
     }
 
@@ -131,7 +131,7 @@ export default function DocumentPage() {
     }
 
     try {
-      await apiFetch(`/api/document/${documentId}`, apiKey.key, {
+      await apiFetch(`/api/document/${documentId}`, apiKey?.key ?? "", {
         method: "DELETE",
       });
 
@@ -150,13 +150,13 @@ export default function DocumentPage() {
   };
 
   const handleSelectDocument = async (doc: Document) => {
-    if (!apiKey) return;
+    if (!isAuthenticated) return;
 
     setIsLoadingDocument(true);
     try {
       const data = await apiFetch<{ data?: Document }>(
         `/api/document/${doc.id}`,
-        apiKey.key,
+        apiKey?.key ?? "",
       );
       const documentDetails: Document =
         data.data ?? (data as unknown as Document);
@@ -201,7 +201,6 @@ export default function DocumentPage() {
                 isLoading={isLoading}
                 isLoadingMore={isLoadingMore}
                 error={error}
-                apiKey={apiKey}
                 scrollRef={scrollRef}
               />
             </div>
diff --git a/app/(main)/evaluations/[id]/page.tsx b/app/(main)/evaluations/[id]/page.tsx
index 300e61c..d2e583f 100644
--- a/app/(main)/evaluations/[id]/page.tsx
+++ b/app/(main)/evaluations/[id]/page.tsx
@@ -48,26 +48,16 @@ export default function EvaluationReport() {
   >(undefined);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const { apiKeys } = useAuth();
+  const { apiKeys, isAuthenticated } = useAuth();
+  const apiKey = apiKeys[0]?.key ?? "";
   const { sidebarCollapsed, setSidebarCollapsed } = useApp();
-  const [selectedKeyId, setSelectedKeyId] = useState<string>("");
   const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
   const [exportFormat, setExportFormat] = useState<"row" | "grouped">("row");
   const [isResyncing, setIsResyncing] = useState(false);
   const [showNoTracesModal, setShowNoTracesModal] = useState(false);
 
-  useEffect(() => {
-    if (apiKeys.length > 0 && !selectedKeyId) {
-      setSelectedKeyId(apiKeys[0].id);
-    }
-  }, [apiKeys, selectedKeyId]);
-
-  // Fetch job details
   const fetchJobDetails = useCallback(async () => {
-    if (!selectedKeyId || !jobId) return;
-
-    const selectedKey = apiKeys.find((k) => k.id === selectedKeyId);
-    if (!selectedKey) return;
+    if (!isAuthenticated || !jobId) return;
 
     setIsLoading(true);
     setError(null);
@@ -76,7 +66,7 @@ export default function EvaluationReport() {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const data = await apiFetch<any>(
         `/api/evaluations/${jobId}?export_format=${exportFormat}`,
-        selectedKey.key,
+        apiKey,
       );
 
       if (data.success === false && data.error) {
@@ -91,14 +81,10 @@ export default function EvaluationReport() {
       setJob(foundJob);
 
       if (foundJob.assistant_id) {
-        fetchAssistantConfig(foundJob.assistant_id, selectedKey.key);
+        fetchAssistantConfig(foundJob.assistant_id);
       }
       if (foundJob.config_id && foundJob.config_version) {
-        fetchConfigInfo(
-          foundJob.config_id,
-          foundJob.config_version,
-          selectedKey.key,
-        );
+        fetchConfigInfo(foundJob.config_id, foundJob.config_version);
       }
     } catch (err: unknown) {
       setError(
@@ -107,9 +93,9 @@ export default function EvaluationReport() {
     } finally {
       setIsLoading(false);
     }
-  }, [apiKeys, selectedKeyId, jobId, exportFormat]);
+  }, [apiKey, isAuthenticated, jobId, exportFormat]);
 
-  const fetchAssistantConfig = async (assistantId: string, apiKey: string) => {
+  const fetchAssistantConfig = async (assistantId: string) => {
     try {
       const result = await apiFetch<{
         success: boolean;
@@ -124,11 +110,7 @@ export default function EvaluationReport() {
     }
   };
 
-  const fetchConfigInfo = async (
-    configId: string,
-    configVersion: number,
-    apiKey: string,
-  ) => {
+  const fetchConfigInfo = async (configId: string, configVersion: number) => {
     try {
       await apiFetch(`/api/configs/${configId}`, apiKey);
       await apiFetch(
@@ -141,8 +123,8 @@ export default function EvaluationReport() {
   };
 
   useEffect(() => {
-    if (selectedKeyId && jobId) fetchJobDetails();
-  }, [selectedKeyId, jobId, fetchJobDetails]);
+    if (isAuthenticated && jobId) fetchJobDetails();
+  }, [isAuthenticated, jobId, fetchJobDetails]);
 
   // Export grouped format CSV
   const exportGroupedCSV = (traces: GroupedTraceItem[]) => {
@@ -285,16 +267,14 @@ export default function EvaluationReport() {
   };
 
   const handleResync = async () => {
-    if (!selectedKeyId || !jobId) return;
-    const selectedKey = apiKeys.find((k) => k.id === selectedKeyId);
-    if (!selectedKey) return;
+    if (!isAuthenticated || !jobId) return;
 
     setIsResyncing(true);
     try {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const data = await apiFetch<any>(
         `/api/evaluations/${jobId}?get_trace_info=true&resync_score=true&export_format=${exportFormat}`,
-        selectedKey.key,
+        apiKey,
       );
       const foundJob = data.data || data;
       if (!foundJob) throw new Error("Evaluation job not found");
@@ -307,14 +287,9 @@ export default function EvaluationReport() {
       }
 
       setJob(foundJob);
-      if (foundJob.assistant_id)
-        fetchAssistantConfig(foundJob.assistant_id, selectedKey.key);
+      if (foundJob.assistant_id) fetchAssistantConfig(foundJob.assistant_id);
       if (foundJob.config_id && foundJob.config_version)
-        fetchConfigInfo(
-          foundJob.config_id,
-          foundJob.config_version,
-          selectedKey.key,
-        );
+        fetchConfigInfo(foundJob.config_id, foundJob.config_version);
       toast.success("Metrics resynced successfully");
     } catch (error: unknown) {
       toast.error(
diff --git a/app/(main)/evaluations/page.tsx b/app/(main)/evaluations/page.tsx
index df6c5a5..d7900f3 100644
--- a/app/(main)/evaluations/page.tsx
+++ b/app/(main)/evaluations/page.tsx
@@ -8,16 +8,17 @@
 "use client";
 
 import { useState, useEffect, useCallback, Suspense } from "react";
+import { apiFetch } from "@/app/lib/apiClient";
 import { colors } from "@/app/lib/colors";
 import { useSearchParams } from "next/navigation";
-import { Dataset } from "@/app/(main)/datasets/page";
+import { Dataset } from "@/app/lib/types/dataset";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import TabNavigation from "@/app/components/TabNavigation";
 import { useToast } from "@/app/components/Toast";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
-import { apiFetch } from "@/app/lib/apiClient";
+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";
@@ -38,7 +39,9 @@ function SimplifiedEvalContent() {
   });
 
   const { sidebarCollapsed } = useApp();
-  const { activeKey } = useAuth();
+  const { activeKey, isAuthenticated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+  const [showLoginModal, setShowLoginModal] = useState(false);
   const [mounted, setMounted] = useState(false);
   // Dataset creation state
   const [datasetName, setDatasetName] = useState("");
@@ -74,15 +77,12 @@ function SimplifiedEvalContent() {
   }, []);
 
   const loadStoredDatasets = useCallback(async () => {
-    if (!activeKey?.key) {
-      console.error("No selected API key found for loading datasets");
-      return;
-    }
+    if (!isAuthenticated) return;
     setIsDatasetsLoading(true);
     try {
       const data = await apiFetch<Dataset[] | { data: Dataset[] }>(
         "/api/evaluations/datasets",
-        activeKey.key,
+        apiKey,
       );
       setStoredDatasets(Array.isArray(data) ? data : data.data || []);
     } catch (e) {
@@ -90,11 +90,11 @@ function SimplifiedEvalContent() {
     } finally {
       setIsDatasetsLoading(false);
     }
-  }, [activeKey]);
+  }, [apiKey, isAuthenticated]);
 
   useEffect(() => {
-    if (activeKey?.key) loadStoredDatasets();
-  }, [activeKey, loadStoredDatasets]);
+    if (isAuthenticated) loadStoredDatasets();
+  }, [isAuthenticated, loadStoredDatasets]);
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
@@ -159,8 +159,8 @@ function SimplifiedEvalContent() {
       toast.error("Please enter a dataset name");
       return;
     }
-    if (!activeKey?.key) {
-      toast.error("No API key selected. Please select one in the Keystore.");
+    if (!isAuthenticated) {
+      toast.error("Please log in to create datasets.");
       return;
     }
 
@@ -178,7 +178,7 @@ function SimplifiedEvalContent() {
 
       const data = await apiFetch<{ dataset_id?: number }>(
         "/api/evaluations/datasets",
-        activeKey.key,
+        apiKey,
         { method: "POST", body: formData },
       );
       await loadStoredDatasets();
@@ -193,7 +193,7 @@ function SimplifiedEvalContent() {
       setDuplicationFactor("1");
 
       toast.success("Dataset created successfully!");
-    } catch (error) {
+    } catch (error: unknown) {
       toast.error(
         `Failed to create dataset: ${error instanceof Error ? error.message : "Unknown error"}`,
       );
@@ -203,8 +203,8 @@ function SimplifiedEvalContent() {
   };
 
   const handleRunEvaluation = async () => {
-    if (!activeKey?.key) {
-      toast.error("Please select an API key first");
+    if (!isAuthenticated) {
+      toast.error("Please log in to run evaluations.");
       return;
     }
     if (!selectedDatasetId) {
@@ -229,7 +229,7 @@ function SimplifiedEvalContent() {
         config_version: selectedConfigVersion,
       };
 
-      await apiFetch("/api/evaluations", activeKey.key, {
+      await apiFetch("/api/evaluations", apiKey, {
         method: "POST",
         body: JSON.stringify(payload),
       });
@@ -271,51 +271,18 @@ function SimplifiedEvalContent() {
           />
 
           {/* Tab Content */}
-          {!mounted || !activeKey ? (
-            <div
-              className="flex-1 flex items-center justify-center"
-              style={{ backgroundColor: colors.bg.secondary }}
-            >
-              <div className="text-center">
-                <svg
-                  className="mx-auto h-12 w-12 mb-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  style={{ color: colors.border }}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                    d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-                  />
-                </svg>
-                <p
-                  className="text-sm font-medium mb-1"
-                  style={{ color: colors.text.primary }}
-                >
-                  API key required
-                </p>
-                <p
-                  className="text-xs mb-4"
-                  style={{ color: colors.text.secondary }}
-                >
-                  Add an API key in the Keystore to start creating datasets and
-                  running evaluations
-                </p>
-                <a
-                  href="/keystore"
-                  className="inline-block px-4 py-2 rounded-md text-sm font-medium"
-                  style={{
-                    backgroundColor: colors.accent.primary,
-                    color: "#ffffff",
-                  }}
-                >
-                  Go to Keystore
-                </a>
-              </div>
-            </div>
+          {!mounted || !isAuthenticated ? (
+            <>
+              <FeatureGateModal
+                feature="Text Evaluation"
+                description="Log in to compare model response quality on your datasets across different configs."
+                onLogin={() => setShowLoginModal(true)}
+              />
+              <LoginModal
+                open={showLoginModal}
+                onClose={() => setShowLoginModal(false)}
+              />
+            </>
           ) : activeTab === "datasets" ? (
             <DatasetsTab
               leftPanelWidth={leftPanelWidth}
@@ -338,14 +305,14 @@ function SimplifiedEvalContent() {
               }}
               storedDatasets={storedDatasets}
               isDatasetsLoading={isDatasetsLoading}
-              activeKey={activeKey}
+              apiKey={apiKey}
               loadStoredDatasets={loadStoredDatasets}
               toast={toast}
             />
           ) : (
             <EvaluationsTab
               leftPanelWidth={leftPanelWidth}
-              activeKey={activeKey}
+              apiKey={apiKey}
               storedDatasets={storedDatasets}
               selectedDatasetId={selectedDatasetId}
               setSelectedDatasetId={setSelectedDatasetId}
diff --git a/app/(main)/knowledge-base/page.tsx b/app/(main)/knowledge-base/page.tsx
index 34a5b34..6be08ee 100644
--- a/app/(main)/knowledge-base/page.tsx
+++ b/app/(main)/knowledge-base/page.tsx
@@ -1,13 +1,28 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
-import { colors } from "@/app/lib/colors";
 import { formatDate } from "@/app/components/utils";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import Modal from "@/app/components/Modal";
+import {
+  CloseIcon,
+  TrashIcon,
+  BookOpenIcon,
+  ChevronRightIcon,
+} from "@/app/components/icons";
+import { Button, Field } from "@/app/components";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
+import { apiFetch } from "@/app/lib/apiClient";
+import {
+  JobStatusData,
+  CollectionResponse,
+  DocumentResponse,
+  CreateCollectionResponse,
+  DeleteCollectionResponse,
+  DocumentDetailResponse,
+} from "@/app/lib/types/knowledgeBase";
 import { Document, Collection } from "@/app/lib/types/document";
 
 export default function KnowledgeBasePage() {
@@ -26,7 +41,7 @@ export default function KnowledgeBasePage() {
   );
   const [showDocPreviewModal, setShowDocPreviewModal] = useState(false);
   const [previewDoc, setPreviewDoc] = useState<Document | null>(null);
-  const { activeKey: apiKey } = useAuth();
+  const { activeKey: apiKey, isAuthenticated } = useAuth();
   const [showAllDocs, setShowAllDocs] = useState(false);
 
   // Polling refs — persist across renders, no stale closures
@@ -206,7 +221,7 @@ export default function KnowledgeBasePage() {
   ): Promise<
     Map<string, { status: string | null; collectionId: string | null }>
   > => {
-    if (!apiKey) return new Map();
+    if (!isAuthenticated) return new Map();
 
     const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || "{}");
 
@@ -240,22 +255,18 @@ export default function KnowledgeBasePage() {
     const results = await Promise.all(
       Array.from(jobIdsToFetch).map(async (jobId) => {
         try {
-          const response = await fetch(`/api/collections/jobs/${jobId}`, {
-            headers: { "X-API-KEY": apiKey.key },
-          });
-
-          if (response.ok) {
-            const result = await response.json();
-            const jobData = result.data || result;
-            const collectionId =
-              jobData.collection?.id || jobData.collection_id || null;
-
-            return {
-              jobId,
-              status: jobData.status || null,
-              collectionId: collectionId,
-            };
-          }
+          const result = await apiFetch<
+            { data?: JobStatusData } & JobStatusData
+          >(`/api/collections/jobs/${jobId}`, apiKey?.key ?? "");
+          const jobData = result.data || result;
+          const collectionId =
+            jobData.collection?.id || jobData.collection_id || null;
+
+          return {
+            jobId,
+            status: jobData.status || null,
+            collectionId: collectionId,
+          };
         } catch (error) {
           console.error("Error fetching job status:", error);
         }
@@ -272,79 +283,75 @@ export default function KnowledgeBasePage() {
     return jobStatusMap;
   };
 
+  // Fetch collections
+
   const fetchCollections = async () => {
-    if (!apiKey) return;
+    if (!isAuthenticated) return;
 
     setIsLoading(true);
     try {
-      const response = await fetch("/api/collections", {
-        headers: { "X-API-KEY": apiKey.key },
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-        const collections = result.data || [];
+      const result = await apiFetch<CollectionResponse>(
+        "/api/collections",
+        apiKey?.key ?? "",
+      );
+      const collections = (
+        Array.isArray(result.data) ? result.data : []
+      ) as Collection[];
+
+      // Pre-fetch job statuses only for collections that need it
+      const jobStatusMap = await preFetchJobStatuses(collections);
+
+      // Enrich collections with cached names and live status
+      const enrichedCollections = await Promise.all(
+        collections.map((collection: Collection) =>
+          enrichCollectionWithCache(collection, jobStatusMap),
+        ),
+      );
 
-        // Pre-fetch job statuses only for collections that need it
-        const jobStatusMap = await preFetchJobStatuses(collections);
+      // Remove cache entries whose collection no longer exists on the backend
+      const liveIds = new Set<string>(
+        enrichedCollections.map((c: Collection) => c.id),
+      );
+      pruneStaleCache(liveIds);
 
-        // Enrich collections with cached names and live status
-        const enrichedCollections = await Promise.all(
-          collections.map((collection: Collection) =>
-            enrichCollectionWithCache(collection, jobStatusMap),
-          ),
+      // Preserve optimistic entries not yet replaced by a real collection
+      setCollections((prev) => {
+        const fetchedJobIds = new Set(
+          enrichedCollections.map((c: Collection) => c.job_id).filter(Boolean),
         );
-
-        // Remove cache entries whose collection no longer exists on the backend
-        const liveIds = new Set<string>(
-          enrichedCollections.map((c: Collection) => c.id),
+        const activeOptimistic = prev.filter(
+          (c) =>
+            c.id.startsWith("optimistic-") &&
+            (!c.job_id || !fetchedJobIds.has(c.job_id)),
         );
-        pruneStaleCache(liveIds);
-
-        // Preserve optimistic entries not yet replaced by a real collection
-        setCollections((prev) => {
-          const fetchedJobIds = new Set(
-            enrichedCollections
-              .map((c: Collection) => c.job_id)
-              .filter(Boolean),
-          );
-          const activeOptimistic = prev.filter(
-            (c) =>
-              c.id.startsWith("optimistic-") &&
-              (!c.job_id || !fetchedJobIds.has(c.job_id)),
-          );
-          // Sort by inserted_at in descending order (latest first)
-          const combined = [...activeOptimistic, ...enrichedCollections];
-          return combined.sort(
-            (a, b) =>
-              new Date(b.inserted_at).getTime() -
-              new Date(a.inserted_at).getTime(),
+        // Sort by inserted_at in descending order (latest first)
+        const combined = [...activeOptimistic, ...enrichedCollections];
+        return combined.sort(
+          (a, b) =>
+            new Date(b.inserted_at).getTime() -
+            new Date(a.inserted_at).getTime(),
+        );
+      });
+
+      // If selectedCollection is optimistic and the real one just arrived, fetch full details
+      // Extract the logic outside the updater to avoid side effects
+      let replacementId: string | null = null;
+      setSelectedCollection((prev) => {
+        if (prev?.id.startsWith("optimistic-") && prev.job_id) {
+          const replacement = enrichedCollections.find(
+            (c: Collection) => c.job_id === prev.job_id,
           );
-        });
-
-        // If selectedCollection is optimistic and the real one just arrived, fetch full details
-        // Extract the logic outside the updater to avoid side effects
-        let replacementId: string | null = null;
-        setSelectedCollection((prev) => {
-          if (prev?.id.startsWith("optimistic-") && prev.job_id) {
-            const replacement = enrichedCollections.find(
-              (c: Collection) => c.job_id === prev.job_id,
-            );
-            if (replacement) {
-              replacementId = replacement.id;
-              // Don't set the replacement yet - let fetchCollectionDetails do it with full data
-            }
+          if (replacement) {
+            replacementId = replacement.id;
+            // Don't set the replacement yet - let fetchCollectionDetails do it with full data
           }
-          return prev;
-        });
-
-        // Fetch full details (including documents) for the replacement
-        if (replacementId) {
-          fetchCollectionDetails(replacementId);
         }
-      } else {
-        const error = await response.json().catch(() => ({}));
-        console.error("Failed to fetch collections:", response.status, error);
+        return prev;
+      });
+
+      // Fetch full details (including documents) for the replacement
+      if (replacementId) {
+        fetchCollectionDetails(replacementId);
       }
     } catch (error) {
       console.error("Error fetching collections:", error);
@@ -355,31 +362,27 @@ export default function KnowledgeBasePage() {
 
   // Fetch available documents
   const fetchDocuments = async () => {
-    if (!apiKey) return;
+    if (!isAuthenticated) return;
 
     try {
-      const response = await fetch("/api/document", {
-        headers: { "X-API-KEY": apiKey.key },
-      });
-
-      if (response.ok) {
-        const result = await response.json();
+      const result = await apiFetch<Document[] | DocumentResponse>(
+        "/api/document",
+        apiKey?.key ?? "",
+      );
 
-        // Handle both direct array and wrapped response
-        const documentList = Array.isArray(result) ? result : result.data || [];
+      // Handle both direct array and wrapped response
+      const documentList = Array.isArray(result)
+        ? result
+        : (result as DocumentResponse).data || [];
 
-        // Sort by inserted_at in descending order (latest first)
-        const sortedDocuments = documentList.sort(
-          (a: Document, b: Document) =>
-            new Date(b.inserted_at || 0).getTime() -
-            new Date(a.inserted_at || 0).getTime(),
-        );
+      // Sort by inserted_at in descending order (latest first)
+      const sortedDocuments = documentList.sort(
+        (a: Document, b: Document) =>
+          new Date(b.inserted_at || 0).getTime() -
+          new Date(a.inserted_at || 0).getTime(),
+      );
 
-        setAvailableDocuments(sortedDocuments);
-      } else {
-        const error = await response.json().catch(() => ({}));
-        console.error("Failed to fetch documents:", response.status, error);
-      }
+      setAvailableDocuments(sortedDocuments);
     } catch (error) {
       console.error("Error fetching documents:", error);
     }
@@ -387,7 +390,7 @@ export default function KnowledgeBasePage() {
 
   // Fetch collection details with documents
   const fetchCollectionDetails = async (collectionId: string) => {
-    if (!apiKey) return;
+    if (!isAuthenticated) return;
 
     // Don't fetch optimistic collections from the server
     if (collectionId.startsWith("optimistic-")) {
@@ -402,53 +405,44 @@ export default function KnowledgeBasePage() {
 
     setIsLoading(true);
     try {
-      const response = await fetch(`/api/collections/${collectionId}`, {
-        headers: { "X-API-KEY": apiKey.key },
-      });
-
-      if (response.ok) {
-        const result = await response.json();
+      const result = await apiFetch<CollectionResponse & Collection>(
+        `/api/collections/${collectionId}`,
+        apiKey?.key ?? "",
+      );
 
-        // Handle different response formats
-        const collectionData = result.data || result;
+      // Handle different response formats
+      const collectionData = (result.data as Collection) || result;
 
-        // Get cached data to find the job_id
-        const cached = getCollectionDataByCollectionId(collectionId);
+      // Get cached data to find the job_id
+      const cached = getCollectionDataByCollectionId(collectionId);
 
-        // If we have a job_id, fetch its status
-        let status = undefined;
-        if (cached.job_id) {
-          try {
-            const jobResponse = await fetch(
-              `/api/collections/jobs/${cached.job_id}`,
-              {
-                headers: { "X-API-KEY": apiKey.key },
-              },
-            );
-            if (jobResponse.ok) {
-              const jobResult = await jobResponse.json();
-              const jobData = jobResult.data || jobResult;
-              status = jobData.status || undefined;
-            }
-          } catch (error) {
-            console.error(
-              "Error fetching job status for collection details:",
-              error,
-            );
-          }
+      // If we have a job_id, fetch its status
+      let status = undefined;
+      if (cached.job_id) {
+        try {
+          const jobResult = await apiFetch<
+            { data?: JobStatusData } & JobStatusData
+          >(`/api/collections/jobs/${cached.job_id}`, apiKey?.key ?? "");
+          const jobData = jobResult.data || jobResult;
+          status = jobData.status || undefined;
+        } catch (error) {
+          console.error(
+            "Error fetching job status for collection details:",
+            error,
+          );
         }
+      }
 
-        // Enrich the collection with cached name/description and live status
-        const enrichedCollection = {
-          ...collectionData,
-          name: cached.name || collectionData.name || "Untitled Collection",
-          description: cached.description || collectionData.description || "",
-          status: status,
-          job_id: cached.job_id,
-        };
+      // Enrich the collection with cached name/description and live status
+      const enrichedCollection = {
+        ...collectionData,
+        name: cached.name || collectionData.name || "Untitled Collection",
+        description: cached.description || collectionData.description || "",
+        status: status,
+        job_id: cached.job_id,
+      };
 
-        setSelectedCollection(enrichedCollection);
-      }
+      setSelectedCollection(enrichedCollection);
     } catch (error) {
       console.error("Error fetching collection details:", error);
     } finally {
@@ -463,7 +457,7 @@ export default function KnowledgeBasePage() {
 
     pollingRef.current = setInterval(async () => {
       const currentApiKey = apiKeyRef.current;
-      if (!currentApiKey) return;
+      if (!currentApiKey && !isAuthenticated) return;
 
       const jobs = activeJobsRef.current;
       if (jobs.size === 0) {
@@ -476,12 +470,9 @@ export default function KnowledgeBasePage() {
 
       for (const [collectionId, jobId] of Array.from(jobs)) {
         try {
-          const response = await fetch(`/api/collections/jobs/${jobId}`, {
-            headers: { "X-API-KEY": currentApiKey.key },
-          });
-          if (!response.ok) continue;
-
-          const result = await response.json();
+          const result = await apiFetch<
+            { data?: JobStatusData } & JobStatusData
+          >(`/api/collections/jobs/${jobId}`, currentApiKey?.key ?? "");
           const jobData = result.data || result;
           const status = jobData.status || null;
           const realCollectionId =
@@ -554,8 +545,8 @@ export default function KnowledgeBasePage() {
 
   // Create knowledge base
   const handleCreateClick = async () => {
-    if (!apiKey) {
-      alert("No API key found");
+    if (!isAuthenticated) {
+      alert("Please log in to continue");
       return;
     }
 
@@ -599,60 +590,51 @@ export default function KnowledgeBasePage() {
     setSelectedCollection(optimisticCollection);
 
     try {
-      const response = await fetch("/api/collections", {
-        method: "POST",
-        headers: {
-          "X-API-KEY": apiKey.key,
-          "Content-Type": "application/json",
+      const result = await apiFetch<CreateCollectionResponse>(
+        "/api/collections",
+        apiKey?.key ?? "",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            name: nameAtCreation,
+            description: descriptionAtCreation,
+            documents: docsAtCreation,
+            provider: "openai",
+          }),
         },
-        body: JSON.stringify({
-          name: nameAtCreation,
-          description: descriptionAtCreation,
-          documents: docsAtCreation,
-          provider: "openai",
-        }),
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-        const jobId = result.data?.job_id;
+      );
 
-        if (jobId) {
-          saveCollectionData(jobId, nameAtCreation, descriptionAtCreation);
+      const jobId = result.data?.job_id;
 
-          // Attach job_id to the optimistic entry so polling picks it up
-          setCollections((prev) =>
-            prev.map((c) =>
-              c.id === optimisticId ? { ...c, job_id: jobId } : c,
-            ),
-          );
-          setSelectedCollection((prev) =>
-            prev?.id === optimisticId ? { ...prev, job_id: jobId } : prev,
-          );
+      if (jobId) {
+        saveCollectionData(jobId, nameAtCreation, descriptionAtCreation);
 
-          // Register for polling immediately — don't wait for the next collections render
-          activeJobsRef.current.set(optimisticId, jobId);
-          startPolling();
-        } else {
-          console.error(
-            "No job ID found in response - cannot save name to cache",
-          );
-        }
+        // Attach job_id to the optimistic entry so polling picks it up
+        setCollections((prev) =>
+          prev.map((c) =>
+            c.id === optimisticId ? { ...c, job_id: jobId } : c,
+          ),
+        );
+        setSelectedCollection((prev) =>
+          prev?.id === optimisticId ? { ...prev, job_id: jobId } : prev,
+        );
 
-        // Refresh the real list from the backend (replaces the optimistic entry once the backend knows about it)
-        await fetchCollections();
+        // Register for polling immediately — don't wait for the next collections render
+        activeJobsRef.current.set(optimisticId, jobId);
+        startPolling();
       } else {
-        const error = await response.json().catch(() => ({}));
-        alert(
-          `Failed to create knowledge base: ${error.error || "Unknown error"}`,
+        console.error(
+          "No job ID found in response - cannot save name to cache",
         );
-        // Remove the optimistic entry on failure
-        setCollections((prev) => prev.filter((c) => c.id !== optimisticId));
-        setSelectedCollection(null);
       }
+
+      // Refresh the real list from the backend (replaces the optimistic entry once the backend knows about it)
+      await fetchCollections();
     } catch (error) {
       console.error("Error creating knowledge base:", error);
-      alert("Failed to create knowledge base");
+      alert(
+        `Failed to create knowledge base: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
       setCollections((prev) => prev.filter((c) => c.id !== optimisticId));
       setSelectedCollection(null);
     } finally {
@@ -662,14 +644,14 @@ export default function KnowledgeBasePage() {
 
   // Delete collection - show confirmation modal
   const handleDeleteCollection = (collectionId: string) => {
-    if (!apiKey) return;
+    if (!isAuthenticated) return;
     setCollectionToDelete(collectionId);
     setShowConfirmDelete(true);
   };
 
   // Confirm and execute delete
   const handleConfirmDelete = async () => {
-    if (!collectionToDelete || !apiKey) return;
+    if (!collectionToDelete || !isAuthenticated) return;
 
     setShowConfirmDelete(false);
     const collectionId = collectionToDelete;
@@ -689,76 +671,38 @@ export default function KnowledgeBasePage() {
     );
 
     try {
-      const response = await fetch(`/api/collections/${collectionId}`, {
-        method: "DELETE",
-        headers: { "X-API-KEY": apiKey.key },
-      });
+      const result = await apiFetch<DeleteCollectionResponse>(
+        `/api/collections/${collectionId}`,
+        apiKey?.key ?? "",
+        { method: "DELETE" },
+      );
 
-      if (response.ok) {
-        const result = await response.json();
-        const jobId = result.data?.job_id;
-
-        if (jobId) {
-          // Poll the delete job status
-          const pollDeleteStatus = async () => {
-            const currentApiKey = apiKeyRef.current;
-            if (!currentApiKey) return;
-
-            try {
-              const jobResponse = await fetch(
-                `/api/collections/jobs/${jobId}`,
-                {
-                  headers: { "X-API-KEY": currentApiKey.key },
-                },
-              );
+      const jobId = result.data?.job_id;
 
-              if (jobResponse.ok) {
-                const jobResult = await jobResponse.json();
-                const jobData = jobResult.data || jobResult;
-                const status = jobData.status;
-                const statusLower = status?.toLowerCase();
-
-                if (statusLower === "successful") {
-                  // Job completed successfully - remove from UI and clean up cache
-                  deleteCollectionFromCache(collectionId);
-                  setCollections((prev) =>
-                    prev.filter((c) => c.id !== collectionId),
-                  );
-                  setSelectedCollection(null);
-                } else if (statusLower === "failed") {
-                  // Job failed - restore original collection
-                  alert("Failed to delete collection");
-                  if (originalCollection) {
-                    setCollections((prev) =>
-                      prev.map((c) =>
-                        c.id === collectionId ? originalCollection : c,
-                      ),
-                    );
-                    setSelectedCollection((prev) =>
-                      prev?.id === collectionId ? originalCollection : prev,
-                    );
-                  }
-                } else {
-                  // Still processing - keep status as "deleting" and poll again
-                  setTimeout(pollDeleteStatus, 2000); // Poll every 2 seconds
-                }
-              } else {
-                // Failed to get job status
-                alert("Failed to check delete status");
-                if (originalCollection) {
-                  setCollections((prev) =>
-                    prev.map((c) =>
-                      c.id === collectionId ? originalCollection : c,
-                    ),
-                  );
-                  setSelectedCollection((prev) =>
-                    prev?.id === collectionId ? originalCollection : prev,
-                  );
-                }
-              }
-            } catch (error) {
-              console.error("Error polling delete status:", error);
-              alert("Failed to check delete status");
+      if (jobId) {
+        // Poll the delete job status
+        const pollDeleteStatus = async () => {
+          const currentApiKey = apiKeyRef.current;
+          if (!currentApiKey) return;
+
+          try {
+            const jobResult = await apiFetch<
+              { data?: JobStatusData } & JobStatusData
+            >(`/api/collections/jobs/${jobId}`, currentApiKey?.key ?? "");
+            const jobData = jobResult.data || jobResult;
+            const status = jobData.status;
+            const statusLower = status?.toLowerCase();
+
+            if (statusLower === "successful") {
+              // Job completed successfully - remove from UI and clean up cache
+              deleteCollectionFromCache(collectionId);
+              setCollections((prev) =>
+                prev.filter((c) => c.id !== collectionId),
+              );
+              setSelectedCollection(null);
+            } else if (statusLower === "failed") {
+              // Job failed - restore original collection
+              alert("Failed to delete collection");
               if (originalCollection) {
                 setCollections((prev) =>
                   prev.map((c) =>
@@ -769,28 +713,33 @@ export default function KnowledgeBasePage() {
                   prev?.id === collectionId ? originalCollection : prev,
                 );
               }
+            } else {
+              // Still processing - keep status as "deleting" and poll again
+              setTimeout(pollDeleteStatus, 2000); // Poll every 2 seconds
             }
-          };
+          } catch (error) {
+            console.error("Error polling delete status:", error);
+            alert("Failed to check delete status");
+            if (originalCollection) {
+              setCollections((prev) =>
+                prev.map((c) =>
+                  c.id === collectionId ? originalCollection : c,
+                ),
+              );
+              setSelectedCollection((prev) =>
+                prev?.id === collectionId ? originalCollection : prev,
+              );
+            }
+          }
+        };
 
-          // Start polling
-          pollDeleteStatus();
-        } else {
-          // No job_id returned, assume immediate success
-          deleteCollectionFromCache(collectionId);
-          setCollections((prev) => prev.filter((c) => c.id !== collectionId));
-          setSelectedCollection(null);
-        }
+        // Start polling
+        pollDeleteStatus();
       } else {
-        alert("Failed to delete collection");
-        // Restore the original collection on failure
-        if (originalCollection) {
-          setCollections((prev) =>
-            prev.map((c) => (c.id === collectionId ? originalCollection : c)),
-          );
-          setSelectedCollection((prev) =>
-            prev?.id === collectionId ? originalCollection : prev,
-          );
-        }
+        // No job_id returned, assume immediate success
+        deleteCollectionFromCache(collectionId);
+        setCollections((prev) => prev.filter((c) => c.id !== collectionId));
+        setSelectedCollection(null);
       }
     } catch (error) {
       console.error("Error deleting collection:", error);
@@ -807,6 +756,23 @@ export default function KnowledgeBasePage() {
     }
   };
 
+  // Fetch document details and set preview
+  const fetchAndPreviewDoc = async (doc: Document) => {
+    setPreviewDoc(doc);
+    if (isAuthenticated) {
+      try {
+        const data = await apiFetch<DocumentDetailResponse & Document>(
+          `/api/document/${doc.id}`,
+          apiKey?.key ?? "",
+        );
+        const documentDetails = (data.data || data) as Document;
+        setPreviewDoc(documentDetails);
+      } catch (err) {
+        console.error("Failed to fetch document details:", err);
+      }
+    }
+  };
+
   // Toggle document selection
   const toggleDocumentSelection = (documentId: string) => {
     const newSelection = new Set(selectedDocuments);
@@ -819,7 +785,7 @@ export default function KnowledgeBasePage() {
   };
 
   useEffect(() => {
-    if (apiKey) {
+    if (isAuthenticated) {
       fetchCollections();
       fetchDocuments();
     }
@@ -828,7 +794,7 @@ export default function KnowledgeBasePage() {
   // Keep apiKeyRef in sync so polling always has the current key
   useEffect(() => {
     apiKeyRef.current = apiKey;
-  }, [apiKey]);
+  }, [apiKey, isAuthenticated]);
 
   // Keep fetchCollectionsRef in sync so polling always has the current function
   useEffect(() => {
@@ -855,8 +821,8 @@ export default function KnowledgeBasePage() {
       }
     });
 
-    if (newJobAdded && apiKey) startPolling();
-  }, [collections, apiKey]);
+    if (newJobAdded && isAuthenticated) startPolling();
+  }, [collections, isAuthenticated]);
 
   // Reset showAllDocs when selectedCollection changes
   useEffect(() => {
@@ -874,10 +840,7 @@ export default function KnowledgeBasePage() {
   }, []);
 
   return (
-    <div
-      className="flex h-screen"
-      style={{ backgroundColor: colors.bg.primary }}
-    >
+    <div className="flex h-screen bg-bg-primary">
       <Sidebar collapsed={sidebarCollapsed} activeRoute="/knowledge-base" />
 
       {/* Main Content */}
@@ -890,21 +853,19 @@ export default function KnowledgeBasePage() {
         {/* Content Area - Split View */}
         <div className="flex-1 overflow-hidden flex">
           {/* Left Panel - Collections List */}
-          <div
-            className="w-1/3 border-r flex flex-col"
-            style={{ borderColor: colors.border }}
-          >
+          <div className="w-1/3 border-r border-border flex flex-col">
             {/* Create Button */}
             <div className="px-6 py-4 flex justify-end">
-              <button
+              <Button
+                variant="outline"
+                size="sm"
                 onClick={() => {
                   setShowCreateForm(true);
                   setSelectedCollection(null);
                 }}
-                className="px-4 py-2 rounded-md text-sm font-medium transition-colors bg-bg-secondary text-text-primary border border-border"
               >
                 + Create
-              </button>
+              </Button>
             </div>
 
             <div className="flex-1 overflow-y-auto px-6 pb-6">
@@ -917,124 +878,68 @@ export default function KnowledgeBasePage() {
                   No knowledge bases yet. Create your first one!
                 </div>
               ) : (
-                <div className="space-y-2">
-                  {collections.map((collection) => (
-                    <div
-                      key={collection.id}
-                      onClick={() => {
-                        setShowCreateForm(false);
-                        setShowDocumentPicker(false);
-                        fetchCollectionDetails(collection.id);
-                      }}
-                      className={`border rounded-lg p-3 cursor-pointer transition-colors ${
-                        selectedCollection?.id === collection.id ? "" : ""
-                      }`}
-                      style={{
-                        backgroundColor:
-                          selectedCollection?.id === collection.id
-                            ? "hsl(202, 100%, 95%)"
-                            : colors.bg.primary,
-                        borderColor:
-                          selectedCollection?.id === collection.id
-                            ? "hsl(202, 100%, 50%)"
-                            : colors.border,
-                      }}
-                    >
-                      <div className="flex items-center justify-between gap-2">
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2 mb-1">
-                            <svg
-                              className="w-5 h-5 flex-shrink-0"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                              style={{ color: colors.text.primary }}
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                <div className="space-y-1.5">
+                  {collections.map((collection) => {
+                    const isSelected = selectedCollection?.id === collection.id;
+                    return (
+                      <button
+                        key={collection.id}
+                        onClick={() => {
+                          setShowCreateForm(false);
+                          setShowDocumentPicker(false);
+                          fetchCollectionDetails(collection.id);
+                        }}
+                        className={`w-full text-left rounded-lg p-3 transition-all duration-150 border ${
+                          isSelected
+                            ? "bg-neutral-100 border-border font-semibold"
+                            : "bg-white border-border hover:bg-neutral-50"
+                        }`}
+                      >
+                        <div className="flex items-start justify-between gap-2">
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 mb-0.5">
+                              <BookOpenIcon
+                                className={`w-4 h-4 shrink-0 ${isSelected ? "text-text-primary" : "text-text-secondary"}`}
                               />
-                            </svg>
-                            <h3
-                              className="text-sm font-semibold truncate"
-                              style={{ color: colors.text.primary }}
-                            >
-                              {collection.name}
-                            </h3>
+                              <h3 className="text-sm font-medium text-text-primary truncate">
+                                {collection.name}
+                              </h3>
+                            </div>
+                            {collection.description && (
+                              <p className="text-xs text-text-secondary truncate pl-6">
+                                {collection.description}
+                              </p>
+                            )}
+                            <p className="text-xs text-text-secondary mt-0.5 pl-6">
+                              {formatDate(collection.inserted_at)}
+                            </p>
                           </div>
-                          {collection.description && (
-                            <p
-                              className="text-xs truncate"
-                              style={{ color: colors.text.secondary }}
+                          {!collection.id.startsWith("optimistic-") && (
+                            <span
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleDeleteCollection(collection.id);
+                              }}
+                              className="p-1.5 rounded-md border border-red-200 bg-white text-red-500 hover:bg-red-50 transition-colors shrink-0 cursor-pointer"
+                              title="Delete Knowledge Base"
                             >
-                              {collection.description}
-                            </p>
+                              <TrashIcon className="w-3.5 h-3.5" />
+                            </span>
                           )}
-                          <p
-                            className="text-xs mt-1"
-                            style={{ color: colors.text.secondary }}
-                          >
-                            {formatDate(collection.inserted_at)}
-                          </p>
                         </div>
-                        {!collection.id.startsWith("optimistic-") && (
-                          <button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleDeleteCollection(collection.id);
-                            }}
-                            className="p-1.5 rounded-md transition-colors flex-shrink-0"
-                            style={{
-                              borderWidth: "1px",
-                              borderColor: "hsl(8, 86%, 80%)",
-                              backgroundColor: colors.bg.primary,
-                              color: "hsl(8, 86%, 40%)",
-                            }}
-                            onMouseEnter={(e) => {
-                              e.currentTarget.style.backgroundColor =
-                                "hsl(8, 86%, 95%)";
-                            }}
-                            onMouseLeave={(e) => {
-                              e.currentTarget.style.backgroundColor =
-                                colors.bg.primary;
-                            }}
-                            title="Delete Knowledge Base"
-                          >
-                            <svg
-                              className="w-4 h-4"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                              />
-                            </svg>
-                          </button>
-                        )}
-                      </div>
-                    </div>
-                  ))}
+                      </button>
+                    );
+                  })}
                 </div>
               )}
             </div>
           </div>
 
-          {/* Right Panel - Create Form or Preview */}
           <div className="w-2/3 flex flex-col">
             {showCreateForm ? (
-              /* Create Form */
               <div className="flex-1 overflow-y-auto p-6">
                 <div className="flex items-center justify-between mb-6">
-                  <h2
-                    className="text-xl font-semibold"
-                    style={{ color: colors.text.primary }}
-                  >
+                  <h2 className="text-xl font-semibold text-text-primary">
                     Create Knowledge Base
                   </h2>
                   <button
@@ -1045,53 +950,25 @@ export default function KnowledgeBasePage() {
                       setCollectionDescription("");
                       setSelectedDocuments(new Set());
                     }}
-                    className="p-2 rounded-md transition-colors"
-                    style={{ color: colors.text.secondary }}
+                    className="p-2 rounded-md text-text-secondary hover:bg-neutral-100 transition-colors"
                   >
-                    <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>
+                    <CloseIcon className="w-5 h-5" />
                   </button>
                 </div>
 
                 {/* Name Input */}
                 <div className="mb-4">
-                  <label
-                    className="block text-sm font-medium mb-2"
-                    style={{ color: colors.text.primary }}
-                  >
-                    Name *
-                  </label>
-                  <input
-                    type="text"
+                  <Field
+                    label="Name *"
                     value={collectionName}
-                    onChange={(e) => setCollectionName(e.target.value)}
+                    onChange={setCollectionName}
                     placeholder="Enter collection name"
-                    className="w-full px-4 py-2 rounded-md border text-sm"
-                    style={{
-                      borderColor: colors.border,
-                      backgroundColor: colors.bg.secondary,
-                      color: colors.text.primary,
-                    }}
                   />
                 </div>
 
                 {/* Description Input */}
                 <div className="mb-4">
-                  <label
-                    className="block text-sm font-medium mb-2"
-                    style={{ color: colors.text.primary }}
-                  >
+                  <label className="block text-sm font-medium mb-2 text-text-primary">
                     Description
                   </label>
                   <textarea
@@ -1099,54 +976,28 @@ export default function KnowledgeBasePage() {
                     onChange={(e) => setCollectionDescription(e.target.value)}
                     placeholder="Enter collection description (optional)"
                     rows={3}
-                    className="w-full px-4 py-2 rounded-md border text-sm resize-none"
-                    style={{
-                      borderColor: colors.border,
-                      backgroundColor: colors.bg.secondary,
-                      color: colors.text.primary,
-                    }}
+                    className="w-full px-4 py-2 rounded-md border border-border bg-bg-secondary text-text-primary text-sm resize-none focus:outline-none focus:ring-1 focus:ring-border"
                   />
                 </div>
 
                 {/* Document Selection */}
                 <div className="mb-6">
-                  <label
-                    className="block text-sm font-medium mb-2"
-                    style={{ color: colors.text.primary }}
-                  >
+                  <label className="block text-sm font-medium mb-2 text-text-primary">
                     Select Documents *
                   </label>
                   <button
                     type="button"
                     onClick={() => setShowDocumentPicker(true)}
-                    className="w-full px-4 py-3 rounded-md border text-left flex items-center justify-between"
-                    style={{
-                      borderColor: colors.border,
-                      backgroundColor: colors.bg.secondary,
-                      color: colors.text.primary,
-                    }}
+                    className="w-full px-4 py-3 rounded-md border border-border bg-bg-secondary text-text-primary text-left flex items-center justify-between hover:bg-neutral-100 transition-colors"
                   >
                     <span className="text-sm">
                       {selectedDocuments.size === 0
                         ? "Click to select documents"
                         : `${selectedDocuments.size} document${selectedDocuments.size > 1 ? "s" : ""} selected`}
                     </span>
-                    <svg
-                      className="w-5 h-5"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M9 5l7 7-7 7"
-                      />
-                    </svg>
+                    <ChevronRightIcon className="w-4 h-4 text-text-secondary" />
                   </button>
 
-                  {/* Show selected documents */}
                   {selectedDocuments.size > 0 && (
                     <div className="mt-3 space-y-2">
                       {Array.from(selectedDocuments).map((docId) => {
@@ -1157,37 +1008,16 @@ export default function KnowledgeBasePage() {
                         return (
                           <div
                             key={docId}
-                            className="flex items-center justify-between p-2 rounded-md"
-                            style={{
-                              backgroundColor: colors.bg.secondary,
-                              borderColor: colors.border,
-                              border: `1px solid ${colors.border}`,
-                            }}
+                            className="flex items-center justify-between p-2 rounded-md border border-border bg-bg-secondary"
                           >
-                            <span
-                              className="text-sm truncate"
-                              style={{ color: colors.text.primary }}
-                            >
+                            <span className="text-sm text-text-primary truncate">
                               {doc.fname}
                             </span>
                             <button
                               onClick={() => toggleDocumentSelection(docId)}
-                              className="ml-2 p-1 rounded-md transition-colors"
-                              style={{ color: colors.text.secondary }}
+                              className="ml-2 p-1 rounded-md text-text-secondary hover:text-red-500 transition-colors"
                             >
-                              <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>
+                              <CloseIcon className="w-4 h-4" />
                             </button>
                           </div>
                         );
@@ -1196,214 +1026,118 @@ export default function KnowledgeBasePage() {
                   )}
                 </div>
 
-                {/* Create Button */}
                 <div className="flex justify-end">
-                  <button
+                  <Button
                     onClick={handleCreateClick}
                     disabled={
                       isCreating ||
                       !collectionName.trim() ||
                       selectedDocuments.size === 0
                     }
-                    className="px-6 py-2 rounded-md text-sm font-medium"
-                    style={{
-                      backgroundColor: colors.bg.secondary,
-                      color: colors.text.primary,
-                      border: `1px solid ${colors.border}`,
-                      opacity:
-                        isCreating ||
-                        !collectionName.trim() ||
-                        selectedDocuments.size === 0
-                          ? 0.5
-                          : 1,
-                    }}
                   >
                     {isCreating ? "Creating..." : "Create"}
-                  </button>
+                  </Button>
                 </div>
               </div>
             ) : selectedCollection ? (
               <>
-                {/* Preview Header */}
-                <div
-                  className="p-6 border-b"
-                  style={{ borderColor: colors.border }}
-                >
+                <div className="p-6 border-b border-border">
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
-                      <h2
-                        className="text-xl font-semibold"
-                        style={{ color: colors.text.primary }}
-                      >
+                      <h2 className="text-xl font-semibold text-text-primary">
                         {selectedCollection.name}
                       </h2>
                       {selectedCollection.description && (
-                        <p
-                          className="text-sm mt-1"
-                          style={{ color: colors.text.secondary }}
-                        >
+                        <p className="text-sm mt-1 text-text-secondary">
                           {selectedCollection.description}
                         </p>
                       )}
                     </div>
                     {!selectedCollection.id.startsWith("optimistic-") && (
-                      <button
+                      <Button
+                        variant="danger"
+                        size="sm"
                         onClick={() =>
                           handleDeleteCollection(selectedCollection.id)
                         }
-                        className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
-                        style={{
-                          backgroundColor: "transparent",
-                          color: "#ef4444",
-                          border: "1px solid #ef4444",
-                        }}
                       >
                         Delete
-                      </button>
+                      </Button>
                     )}
                   </div>
 
                   {/* Metadata */}
                   <div className="space-y-3 mt-6">
                     <div className="flex items-center gap-3">
-                      <div
-                        className="text-xs uppercase font-semibold"
-                        style={{ color: colors.text.secondary }}
-                      >
+                      <div className="text-xs uppercase font-semibold text-text-secondary">
                         Status:
                       </div>
-                      <div
-                        className="text-sm font-semibold"
-                        style={{ color: colors.text.primary }}
-                      >
+                      <div className="text-sm font-semibold text-text-primary">
                         {(selectedCollection.status || "N/A")
                           .replace(/_/g, " ")
                           .toUpperCase()}
                       </div>
                     </div>
                     <div className="flex items-center gap-3">
-                      <div
-                        className="text-xs uppercase font-semibold"
-                        style={{ color: colors.text.secondary }}
-                      >
+                      <div className="text-xs uppercase font-semibold text-text-secondary">
                         Knowledge Base ID:
                       </div>
-                      <div
-                        className="text-sm font-semibold"
-                        style={{ color: colors.text.primary }}
-                      >
+                      <div className="text-sm font-semibold text-text-primary">
                         {selectedCollection.knowledge_base_id || "N/A"}
                       </div>
                     </div>
                     <div className="flex items-center gap-3">
-                      <div
-                        className="text-xs uppercase font-semibold"
-                        style={{ color: colors.text.secondary }}
-                      >
+                      <div className="text-xs uppercase font-semibold text-text-secondary">
                         Created:
                       </div>
-                      <div
-                        className="text-sm font-semibold"
-                        style={{ color: colors.text.primary }}
-                      >
+                      <div className="text-sm font-semibold text-text-primary">
                         {formatDate(selectedCollection.inserted_at)}
                       </div>
                     </div>
                     <div className="flex items-center gap-3">
-                      <div
-                        className="text-xs uppercase font-semibold"
-                        style={{ color: colors.text.secondary }}
-                      >
+                      <div className="text-xs uppercase font-semibold text-text-secondary">
                         Last Updated:
                       </div>
-                      <div
-                        className="text-sm font-semibold"
-                        style={{ color: colors.text.primary }}
-                      >
+                      <div className="text-sm font-semibold text-text-primary">
                         {formatDate(selectedCollection.updated_at)}
                       </div>
                     </div>
                   </div>
                 </div>
 
-                {/* Documents in Collection */}
                 <div className="flex-1 overflow-y-auto px-6 pt-6 pb-4">
                   <div className="flex items-center justify-between mb-4">
-                    <h3
-                      className="text-sm font-semibold"
-                      style={{ color: colors.text.primary }}
-                    >
+                    <h3 className="text-sm font-semibold text-text-primary">
                       Documents Present (
                       {selectedCollection.documents?.length || 0})
                     </h3>
                     {selectedCollection.documents &&
                       selectedCollection.documents.length > 0 && (
                         <button
-                          onClick={async () => {
+                          onClick={() => {
                             setShowDocPreviewModal(true);
-                            // Fetch the first document with signed_url
-                            const firstDoc = selectedCollection.documents![0];
-                            setPreviewDoc(firstDoc);
-
-                            if (apiKey) {
-                              try {
-                                const response = await fetch(
-                                  `/api/document/${firstDoc.id}`,
-                                  {
-                                    method: "GET",
-                                    headers: {
-                                      "X-API-KEY": apiKey.key,
-                                    },
-                                  },
-                                );
-
-                                if (response.ok) {
-                                  const data = await response.json();
-                                  const documentDetails = data.data || data;
-                                  setPreviewDoc(documentDetails);
-                                }
-                              } catch (err) {
-                                console.error(
-                                  "Failed to fetch document details for preview:",
-                                  err,
-                                );
-                              }
-                            }
-                          }}
-                          className="text-xs px-3 py-1.5 rounded-md hover:opacity-80 transition-opacity"
-                          style={{
-                            color: colors.text.primary,
-                            backgroundColor: colors.bg.secondary,
-                            border: `1px solid ${colors.border}`,
+                            fetchAndPreviewDoc(
+                              selectedCollection.documents![0],
+                            );
                           }}
+                          className="text-xs px-3 py-1.5 rounded-md border border-border bg-bg-secondary text-text-primary hover:bg-neutral-100 transition-colors"
                         >
                           Preview
                         </button>
                       )}
                   </div>
 
-                  {/* Document List */}
                   {selectedCollection.documents &&
                   selectedCollection.documents.length > 0 ? (
                     <div>
-                      {/* Header Row */}
-                      <div
-                        className="flex items-center justify-between pb-2 mb-2 border-b"
-                        style={{ borderColor: colors.border }}
-                      >
+                      <div className="flex items-center justify-between pb-2 mb-2 border-b border-border">
                         <div className="flex-1">
-                          <p
-                            className="text-[10px] font-semibold uppercase"
-                            style={{ color: colors.text.secondary }}
-                          >
+                          <p className="text-[10px] font-semibold uppercase text-text-secondary">
                             Name
                           </p>
                         </div>
                         <div className="flex-shrink-0">
-                          <p
-                            className="text-[10px] font-semibold uppercase"
-                            style={{ color: colors.text.secondary }}
-                          >
+                          <p className="text-[10px] font-semibold uppercase text-text-secondary">
                             Uploaded At
                           </p>
                         </div>
@@ -1424,18 +1158,12 @@ export default function KnowledgeBasePage() {
                               className="flex items-center justify-between py-1"
                             >
                               <div className="flex-1 min-w-0 mr-4">
-                                <p
-                                  className="text-sm truncate"
-                                  style={{ color: colors.text.primary }}
-                                >
+                                <p className="text-sm text-text-primary truncate">
                                   {doc.fname}
                                 </p>
                               </div>
                               <div className="flex-shrink-0">
-                                <p
-                                  className="text-xs"
-                                  style={{ color: colors.text.secondary }}
-                                >
+                                <p className="text-xs text-text-secondary">
                                   {doc.inserted_at
                                     ? formatDate(doc.inserted_at)
                                     : "N/A"}
@@ -1447,36 +1175,29 @@ export default function KnowledgeBasePage() {
 
                       {/* Show More / Show Less Button */}
                       {selectedCollection.documents.length > 3 && (
-                        <button
-                          onClick={() => setShowAllDocs(!showAllDocs)}
-                          className="w-full py-2 px-4 rounded-md text-sm font-medium transition-colors mt-3"
-                          style={{
-                            backgroundColor: "transparent",
-                            color: colors.text.secondary,
-                            border: `1px solid ${colors.border}`,
-                          }}
-                        >
-                          {showAllDocs
-                            ? "Show Less"
-                            : `Show More (${selectedCollection.documents.length - 3} more)`}
-                        </button>
+                        <div className="mt-3">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            fullWidth
+                            onClick={() => setShowAllDocs(!showAllDocs)}
+                          >
+                            {showAllDocs
+                              ? "Show Less"
+                              : `Show More (${selectedCollection.documents.length - 3} more)`}
+                          </Button>
+                        </div>
                       )}
                     </div>
                   ) : (
-                    <p
-                      className="text-sm text-center py-8"
-                      style={{ color: colors.text.secondary }}
-                    >
+                    <p className="text-sm text-center py-8 text-text-secondary">
                       No documents in this collection
                     </p>
                   )}
                 </div>
               </>
             ) : (
-              <div
-                className="flex-1 flex items-center justify-center"
-                style={{ color: colors.text.secondary }}
-              >
+              <div className="flex-1 flex items-center justify-center text-text-secondary">
                 Select a knowledge base to view details
               </div>
             )}
@@ -1484,55 +1205,36 @@ export default function KnowledgeBasePage() {
         </div>
       </div>
 
-      {showConfirmDelete && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div
-            className="rounded-lg p-6 w-full max-w-md"
-            style={{ backgroundColor: colors.bg.primary }}
-          >
-            <h2
-              className="text-xl font-semibold mb-4"
-              style={{ color: colors.text.primary }}
-            >
-              Delete Collection
-            </h2>
-            <p
-              className="text-sm mb-6"
-              style={{ color: colors.text.secondary }}
+      <Modal
+        open={showConfirmDelete}
+        onClose={() => {
+          setShowConfirmDelete(false);
+          setCollectionToDelete(null);
+        }}
+        title="Delete Collection"
+        maxWidth="max-w-md"
+      >
+        <div className="px-6 pb-6">
+          <p className="text-sm text-text-secondary mb-6">
+            Are you sure you want to delete this collection? This action cannot
+            be undone.
+          </p>
+          <div className="flex justify-end gap-3">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setShowConfirmDelete(false);
+                setCollectionToDelete(null);
+              }}
             >
-              Are you sure you want to delete this collection? This action
-              cannot be undone.
-            </p>
-            <div className="flex justify-end gap-3">
-              <button
-                onClick={() => {
-                  setShowConfirmDelete(false);
-                  setCollectionToDelete(null);
-                }}
-                className="px-4 py-2 rounded-md text-sm font-medium"
-                style={{
-                  backgroundColor: "transparent",
-                  color: colors.text.secondary,
-                  border: `1px solid ${colors.border}`,
-                }}
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleConfirmDelete}
-                className="px-4 py-2 rounded-md text-sm font-medium"
-                style={{
-                  backgroundColor: "#ef4444",
-                  color: "#ffffff",
-                  border: "1px solid #ef4444",
-                }}
-              >
-                Delete
-              </button>
-            </div>
+              Cancel
+            </Button>
+            <Button variant="danger" onClick={handleConfirmDelete}>
+              Delete
+            </Button>
           </div>
         </div>
-      )}
+      </Modal>
 
       <Modal
         open={showDocumentPicker}
@@ -1542,10 +1244,7 @@ export default function KnowledgeBasePage() {
         <div className="p-6">
           <div className="mb-4">
             {availableDocuments.length === 0 ? (
-              <div
-                className="p-8 text-center text-sm"
-                style={{ color: colors.text.secondary }}
-              >
+              <div className="p-8 text-center text-sm text-text-secondary">
                 No documents available. Please upload documents first.
               </div>
             ) : (
@@ -1553,26 +1252,11 @@ export default function KnowledgeBasePage() {
                 {availableDocuments.map((doc) => (
                   <label
                     key={doc.id}
-                    className="flex items-center p-4 rounded-md border cursor-pointer transition-colors"
-                    style={{
-                      backgroundColor: selectedDocuments.has(doc.id)
-                        ? colors.bg.secondary
-                        : "transparent",
-                      borderColor: selectedDocuments.has(doc.id)
-                        ? colors.border
-                        : "transparent",
-                    }}
-                    onMouseEnter={(e) => {
-                      if (!selectedDocuments.has(doc.id)) {
-                        e.currentTarget.style.backgroundColor =
-                          colors.bg.secondary;
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (!selectedDocuments.has(doc.id)) {
-                        e.currentTarget.style.backgroundColor = "transparent";
-                      }
-                    }}
+                    className={`flex items-center p-4 rounded-md border cursor-pointer transition-colors ${
+                      selectedDocuments.has(doc.id)
+                        ? "bg-neutral-50 border-border"
+                        : "border-transparent hover:bg-neutral-50"
+                    }`}
                   >
                     <input
                       type="checkbox"
@@ -1581,16 +1265,10 @@ export default function KnowledgeBasePage() {
                       className="mr-3 w-4 h-4"
                     />
                     <div className="flex-1 min-w-0">
-                      <p
-                        className="text-sm font-medium truncate"
-                        style={{ color: colors.text.primary }}
-                      >
+                      <p className="text-sm font-medium text-text-primary truncate">
                         {doc.fname}
                       </p>
-                      <p
-                        className="text-xs mt-1"
-                        style={{ color: colors.text.secondary }}
-                      >
+                      <p className="text-xs mt-1 text-text-secondary">
                         ID: {doc.id.substring(0, 8)}...
                       </p>
                     </div>
@@ -1601,39 +1279,24 @@ export default function KnowledgeBasePage() {
           </div>
 
           {/* Selected Count and Actions */}
-          <div
-            className="flex items-center justify-between pt-4 border-t"
-            style={{ borderColor: colors.border }}
-          >
-            <p className="text-sm" style={{ color: colors.text.secondary }}>
+          <div className="flex items-center justify-between pt-4 border-t border-border">
+            <p className="text-sm text-text-secondary">
               {selectedDocuments.size} document
               {selectedDocuments.size !== 1 ? "s" : ""} selected
             </p>
             <div className="flex gap-3">
-              <button
+              <Button
+                variant="outline"
                 onClick={() => setShowDocumentPicker(false)}
-                className="px-4 py-2 rounded-md text-sm font-medium"
-                style={{
-                  backgroundColor: "transparent",
-                  color: colors.text.secondary,
-                  border: `1px solid ${colors.border}`,
-                }}
               >
                 Cancel
-              </button>
-              <button
+              </Button>
+              <Button
                 onClick={() => setShowDocumentPicker(false)}
                 disabled={selectedDocuments.size === 0}
-                className="px-4 py-2 rounded-md text-sm font-medium"
-                style={{
-                  backgroundColor: colors.bg.secondary,
-                  color: colors.text.primary,
-                  border: `1px solid ${colors.border}`,
-                  opacity: selectedDocuments.size === 0 ? 0.5 : 1,
-                }}
               >
                 Done
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -1651,84 +1314,52 @@ export default function KnowledgeBasePage() {
       >
         <div className="flex flex-1 overflow-hidden h-full">
           <div
-            className="w-1/5 flex flex-col overflow-y-auto shrink-0"
-            style={{ borderRight: `1px solid ${colors.border}` }}
+            className="bg-white rounded-2xl shadow-xl border border-border w-full max-w-5xl h-[85vh] flex flex-col"
+            onClick={(e) => e.stopPropagation()}
           >
-            {selectedCollection?.documents?.map((doc: Document) => (
-              <button
-                key={doc.id}
-                onClick={async () => {
-                  setPreviewDoc(doc);
-
-                  if (apiKey) {
-                    try {
-                      const response = await fetch(`/api/document/${doc.id}`, {
-                        method: "GET",
-                        headers: {
-                          "X-API-KEY": apiKey.key,
-                        },
-                      });
-
-                      if (response.ok) {
-                        const data = await response.json();
-                        const documentDetails = data.data || data;
-                        setPreviewDoc(documentDetails);
-                      }
-                    } catch (err) {
-                      console.error(
-                        "Failed to fetch document details for preview:",
-                        err,
-                      );
-                    }
-                  }
-                }}
-                className="text-left px-4 py-3 shrink-0 transition-colors"
-                style={{
-                  backgroundColor:
-                    previewDoc?.id === doc.id
-                      ? colors.bg.secondary
-                      : "transparent",
-                  borderBottom: `1px solid ${colors.border}`,
-                }}
-              >
-                <p
-                  className="text-sm truncate"
-                  style={{ color: colors.text.primary }}
-                >
-                  {doc.fname}
-                </p>
-                {doc.inserted_at && (
-                  <p
-                    className="text-xs mt-0.5"
-                    style={{ color: colors.text.secondary }}
+            <div className="flex flex-1 min-h-0">
+              <div className="w-56 shrink-0 border-r border-border overflow-y-auto">
+                {selectedCollection?.documents?.map((doc: Document) => (
+                  <button
+                    key={doc.id}
+                    onClick={() => fetchAndPreviewDoc(doc)}
+                    className={`w-full text-left px-4 py-3 border-b border-border transition-colors ${
+                      previewDoc?.id === doc.id
+                        ? "bg-neutral-100"
+                        : "hover:bg-neutral-50"
+                    }`}
                   >
-                    {formatDate(doc.inserted_at)}
-                  </p>
-                )}
-              </button>
-            ))}
-          </div>
+                    <p className="text-sm text-text-primary truncate">
+                      {doc.fname}
+                    </p>
+                    {doc.inserted_at && (
+                      <p className="text-xs text-text-secondary mt-0.5">
+                        {formatDate(doc.inserted_at)}
+                      </p>
+                    )}
+                  </button>
+                ))}
+              </div>
 
-          {/* Right pane — preview content */}
-          <div
-            className="flex-1 overflow-hidden flex items-center justify-center"
-            style={{ backgroundColor: colors.bg.secondary }}
-          >
-            {previewDoc?.signed_url ? (
-              <iframe
-                key={previewDoc.id}
-                src={previewDoc.signed_url}
-                title={previewDoc.fname}
-                className="w-full h-full"
-                style={{ border: "none" }}
-              />
-            ) : (
-              <p className="text-sm" style={{ color: colors.text.secondary }}>
-                {previewDoc
-                  ? "No preview available for this document"
-                  : "Select a document to preview"}
-              </p>
-            )}
+              <div className="flex-1 min-h-0 bg-neutral-50">
+                {previewDoc?.signed_url ? (
+                  <iframe
+                    key={previewDoc.id}
+                    src={previewDoc.signed_url}
+                    title={previewDoc.fname}
+                    className="w-full h-full border-none"
+                  />
+                ) : (
+                  <div className="flex items-center justify-center h-full">
+                    <p className="text-sm text-text-secondary">
+                      {previewDoc
+                        ? "No preview available for this document"
+                        : "Select a document to preview"}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </Modal>
diff --git a/app/(main)/settings/credentials/page.tsx b/app/(main)/settings/credentials/page.tsx
index d4af78b..c80364e 100644
--- a/app/(main)/settings/credentials/page.tsx
+++ b/app/(main)/settings/credentials/page.tsx
@@ -8,11 +8,10 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import Sidebar from "@/app/components/Sidebar";
+import SettingsSidebar from "@/app/components/settings/SettingsSidebar";
 import { colors } from "@/app/lib/colors";
 import { useToast } from "@/app/components/Toast";
 import { useAuth } from "@/app/lib/context/AuthContext";
-import { useApp } from "@/app/lib/context/AppContext";
 import {
   PROVIDERS,
   Credential,
@@ -22,12 +21,10 @@ import { getExistingForProvider } from "@/app/lib/utils";
 import ProviderList from "@/app/components/settings/credentials/ProviderList";
 import CredentialForm from "@/app/components/settings/credentials/CredentialForm";
 import { apiFetch } from "@/app/lib/apiClient";
-import Link from "next/link";
 
 export default function CredentialsPage() {
   const toast = useToast();
-  const { sidebarCollapsed, setSidebarCollapsed } = useApp();
-  const { apiKeys } = useAuth();
+  const { apiKeys, isAuthenticated } = useAuth();
   const [selectedProvider, setSelectedProvider] = useState<ProviderDef>(
     PROVIDERS[0],
   );
@@ -43,7 +40,7 @@ export default function CredentialsPage() {
 
   // Load credentials once we have an API key
   useEffect(() => {
-    if (apiKeys.length === 0) return;
+    if (!isAuthenticated) return;
     loadCredentials();
   }, [apiKeys]);
 
@@ -75,11 +72,11 @@ export default function CredentialsPage() {
     try {
       const data = await apiFetch<{ data?: Credential[] } | Credential[]>(
         "/api/credentials",
-        apiKeys[0].key,
+        apiKeys[0]?.key ?? "",
       );
       setCredentials(Array.isArray(data) ? data : data.data || []);
-    } catch (err) {
-      console.error("Failed to load credentials:", err);
+    } catch {
+      // Silently ignore — credentials may not exist yet or auth may be cookie-only
     } finally {
       setIsLoading(false);
     }
@@ -100,7 +97,7 @@ export default function CredentialsPage() {
   };
 
   const handleSave = async () => {
-    if (apiKeys.length === 0) {
+    if (!isAuthenticated) {
       toast.error("Please add an API key in Keystore first");
       return;
     }
@@ -115,13 +112,13 @@ export default function CredentialsPage() {
     setIsSaving(true);
     try {
       if (existingCredential) {
-        await apiFetch("/api/credentials", apiKeys[0].key, {
+        await apiFetch("/api/credentials", apiKeys[0]?.key ?? "", {
           method: "PATCH",
           body: JSON.stringify(buildCredentialBody(true)),
         });
         toast.success(`${selectedProvider.name} credentials updated`);
       } else {
-        await apiFetch("/api/credentials", apiKeys[0].key, {
+        await apiFetch("/api/credentials", apiKeys[0]?.key ?? "", {
           method: "POST",
           body: JSON.stringify(buildCredentialBody(false)),
         });
@@ -158,12 +155,12 @@ export default function CredentialsPage() {
   };
 
   const handleDelete = async () => {
-    if (!existingCredential || apiKeys.length === 0) return;
+    if (!existingCredential || !isAuthenticated) return;
     setIsDeleting(true);
     try {
       await apiFetch(
         `/api/credentials/${selectedProvider.credentialKey}`,
-        apiKeys[0].key,
+        apiKeys[0]?.key ?? "",
         { method: "DELETE" },
       );
       toast.success(`${selectedProvider.name} credentials removed`);
@@ -199,10 +196,7 @@ export default function CredentialsPage() {
       style={{ backgroundColor: colors.bg.secondary }}
     >
       <div className="flex flex-1 overflow-hidden">
-        <Sidebar
-          collapsed={sidebarCollapsed}
-          activeRoute="/settings/credentials"
-        />
+        <SettingsSidebar />
 
         <div className="flex-1 flex flex-col overflow-hidden">
           <div
@@ -212,41 +206,19 @@ export default function CredentialsPage() {
               borderColor: colors.border,
             }}
           >
-            <div className="flex items-center gap-3">
-              <button
-                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-                className="p-1.5 rounded-md"
-                style={{ color: colors.text.secondary }}
-                aria-label="Toggle sidebar"
+            <div>
+              <h1
+                className="text-base font-semibold"
+                style={{
+                  color: colors.text.primary,
+                  letterSpacing: "-0.01em",
+                }}
               >
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 6h16M4 12h16M4 18h16"
-                  />
-                </svg>
-              </button>
-              <div>
-                <h1
-                  className="text-base font-semibold"
-                  style={{
-                    color: colors.text.primary,
-                    letterSpacing: "-0.01em",
-                  }}
-                >
-                  Settings
-                </h1>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>
-                  Manage provider credentials
-                </p>
-              </div>
+                Credentials
+              </h1>
+              <p className="text-xs" style={{ color: colors.text.secondary }}>
+                Manage provider credentials
+              </p>
             </div>
           </div>
 
@@ -259,7 +231,7 @@ export default function CredentialsPage() {
             />
 
             <div className="flex-1 overflow-y-auto p-8">
-              {apiKeys.length === 0 ? (
+              {!isAuthenticated ? (
                 <div
                   className="max-w-lg rounded-lg border p-6 text-sm"
                   style={{
@@ -268,15 +240,7 @@ export default function CredentialsPage() {
                     color: colors.text.secondary,
                   }}
                 >
-                  No API key found. Please add one in{" "}
-                  <Link
-                    href="/keystore"
-                    className="underline"
-                    style={{ color: colors.text.primary }}
-                  >
-                    Keystore
-                  </Link>{" "}
-                  first.
+                  Please log in to manage credentials.
                 </div>
               ) : (
                 <CredentialForm
diff --git a/app/(main)/settings/onboarding/page.tsx b/app/(main)/settings/onboarding/page.tsx
index 1f1f697..f453e60 100644
--- a/app/(main)/settings/onboarding/page.tsx
+++ b/app/(main)/settings/onboarding/page.tsx
@@ -2,9 +2,8 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import Sidebar from "@/app/components/Sidebar";
+import SettingsSidebar from "@/app/components/settings/SettingsSidebar";
 import PageHeader from "@/app/components/PageHeader";
-import { useApp } from "@/app/lib/context/AppContext";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { usePaginatedList, useInfiniteScroll } from "@/app/hooks";
 import {
@@ -61,8 +60,7 @@ function OrganizationListSkeleton() {
 
 export default function OnboardingPage() {
   const router = useRouter();
-  const { sidebarCollapsed } = useApp();
-  const { activeKey, currentUser, isHydrated } = useAuth();
+  const { activeKey, currentUser, isHydrated, isAuthenticated } = useAuth();
   const [view, setView] = useState<View>("loading");
   const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
   const [selectedProject, setSelectedProject] = useState<Project | null>(null);
@@ -102,7 +100,7 @@ export default function OnboardingPage() {
   // Redirect if no API key or not a superuser
   useEffect(() => {
     if (!isHydrated) return;
-    if (!activeKey) {
+    if (!isAuthenticated) {
       router.replace("/");
       return;
     }
@@ -179,10 +177,7 @@ export default function OnboardingPage() {
       style={{ backgroundColor: colors.bg.secondary }}
     >
       <div className="flex flex-1 overflow-hidden">
-        <Sidebar
-          collapsed={sidebarCollapsed}
-          activeRoute="/settings/onboarding"
-        />
+        <SettingsSidebar />
 
         <div className="flex-1 flex flex-col overflow-hidden">
           <PageHeader
diff --git a/app/(main)/speech-to-text/page.tsx b/app/(main)/speech-to-text/page.tsx
index 80a5908..de69554 100644
--- a/app/(main)/speech-to-text/page.tsx
+++ b/app/(main)/speech-to-text/page.tsx
@@ -7,333 +7,35 @@
 
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { colors } from "@/app/lib/colors";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import TabNavigation from "@/app/components/TabNavigation";
-import StatusBadge from "@/app/components/StatusBadge";
-import Loader, { LoaderBox } from "@/app/components/Loader";
 import { useToast } from "@/app/components/Toast";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import { apiFetch } from "@/app/lib/apiClient";
-import { APIKey } from "@/app/lib/types/credentials";
-import WaveformVisualizer from "@/app/components/speech-to-text/WaveformVisualizer";
-import { computeWordDiff } from "@/app/components/speech-to-text/TranscriptionDiffViewer";
 import ErrorModal from "@/app/components/ErrorModal";
-import { getStatusColor } from "@/app/components/utils";
-
-type Tab = "datasets" | "evaluations";
-
-// Types
-interface AudioFile {
-  id: string;
-  file: File;
-  name: string;
-  size: number;
-  base64: string;
-  mediaType: string;
-  groundTruth: string;
-  languageId: number;
-  fileId?: string;
-}
-
-interface Dataset {
-  id: number;
-  name: string;
-  description?: string;
-  type: string;
-  language_id: number | null;
-  object_store_url: string | null;
-  dataset_metadata: {
-    sample_count?: number;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any;
-  };
-  organization_id: number;
-  project_id: number;
-  inserted_at: string;
-  updated_at: string;
-}
-
-interface STTRun {
-  id: number;
-  run_name: string;
-  dataset_name: string;
-  dataset_id: number;
-  type: string;
-  language_id: number | null;
-  models: string[] | null;
-  status: string;
-  total_items: number;
-  score: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any;
-  } | null;
-  error_message: string | null;
-  organization_id: number;
-  project_id: number;
-  inserted_at: string;
-  updated_at: string;
-}
-
-interface STTResult {
-  id: number;
-  transcription: string | null;
-  provider: string;
-  status: string;
-  score: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any;
-  } | null;
-  is_correct: boolean | null;
-  comment: string | null;
-  error_message: string | null;
-  stt_sample_id: number;
-  evaluation_run_id: number;
-  organization_id: number;
-  project_id: number;
-  inserted_at: string;
-  updated_at: string;
-  sampleName?: string; // Enriched field
-  groundTruth?: string; // Enriched field
-  fileId?: string; // Enriched field - file ID from sample
-  signedUrl?: string; // Enriched field - signed URL for audio playback
-}
-
-// Audio Player Component with Waveform
-function AudioPlayer({
-  audioBase64,
-  mediaType,
-  isPlaying,
-  onPlayToggle,
-}: {
-  audioBase64: string;
-  mediaType: string;
-  isPlaying: boolean;
-  onPlayToggle: () => void;
-}) {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const [duration, setDuration] = useState(0);
-  const [currentTime, setCurrentTime] = useState(0);
-
-  const audioSrc = `data:${mediaType};base64,${audioBase64}`;
-
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    const handleLoadedMetadata = () => setDuration(audio.duration);
-    const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
-    const handleEnded = () => onPlayToggle();
-
-    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
-    audio.addEventListener("timeupdate", handleTimeUpdate);
-    audio.addEventListener("ended", handleEnded);
-
-    return () => {
-      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
-      audio.removeEventListener("timeupdate", handleTimeUpdate);
-      audio.removeEventListener("ended", handleEnded);
-    };
-  }, [onPlayToggle]);
-
-  useEffect(() => {
-    if (!audioRef.current) return;
-    if (isPlaying) {
-      audioRef.current.play().catch(console.error);
-    } else {
-      audioRef.current.pause();
-    }
-  }, [isPlaying]);
-
-  const formatTime = (time: number) => {
-    const mins = Math.floor(time / 60);
-    const secs = Math.floor(time % 60);
-    return `${mins}:${secs.toString().padStart(2, "0")}`;
-  };
-
-  return (
-    <div className="space-y-1.5">
-      <audio ref={audioRef} src={audioSrc} preload="metadata" />
-
-      <div className="flex items-center gap-2">
-        <button
-          onClick={onPlayToggle}
-          className="w-8 h-8 flex items-center justify-center rounded-full flex-shrink-0"
-          style={{
-            backgroundColor: isPlaying
-              ? colors.accent.primary
-              : colors.bg.secondary,
-            color: isPlaying ? "#fff" : colors.text.primary,
-          }}
-        >
-          {isPlaying ? (
-            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
-              <rect x="6" y="4" width="4" height="16" />
-              <rect x="14" y="4" width="4" height="16" />
-            </svg>
-          ) : (
-            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M8 5v14l11-7z" />
-            </svg>
-          )}
-        </button>
-
-        {/* Waveform Visualizer */}
-        <div className="flex-1 min-w-0">
-          {/* eslint-disable react-hooks/refs -- accessing ref in render for waveform display */}
-          <WaveformVisualizer
-            audioElement={audioRef.current}
-            isPlaying={isPlaying}
-            height={32}
-          />
-          {/* eslint-enable react-hooks/refs */}
-        </div>
-
-        <span
-          className="text-xs tabular-nums flex-shrink-0"
-          style={{ color: colors.text.secondary }}
-        >
-          {isPlaying ? formatTime(currentTime) : formatTime(duration)}
-        </span>
-      </div>
-
-      {/* Progress bar */}
-      <div
-        className="h-0.5 rounded-full overflow-hidden mt-1"
-        style={{ backgroundColor: colors.border }}
-      >
-        <div
-          className="h-full rounded-full"
-          style={{
-            width: duration > 0 ? `${(currentTime / duration) * 100}%` : "0%",
-            backgroundColor: colors.accent.primary,
-            transition: "width 0.1s linear",
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-// Audio Player Component for URL-based playback
-function AudioPlayerFromUrl({
-  signedUrl,
-  isPlaying,
-  onPlayToggle,
-  sampleName,
-}: {
-  signedUrl: string;
-  isPlaying: boolean;
-  onPlayToggle: () => void;
-  sampleName?: string;
-}) {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const [duration, setDuration] = useState(0);
-  const [currentTime, setCurrentTime] = useState(0);
-
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    const handleLoadedMetadata = () => setDuration(audio.duration);
-    const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
-    const handleEnded = () => onPlayToggle();
-
-    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
-    audio.addEventListener("timeupdate", handleTimeUpdate);
-    audio.addEventListener("ended", handleEnded);
-
-    return () => {
-      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
-      audio.removeEventListener("timeupdate", handleTimeUpdate);
-      audio.removeEventListener("ended", handleEnded);
-    };
-  }, [onPlayToggle]);
-
-  useEffect(() => {
-    if (!audioRef.current) return;
-    if (isPlaying) {
-      audioRef.current.play().catch(console.error);
-    } else {
-      audioRef.current.pause();
-    }
-  }, [isPlaying]);
-
-  return (
-    <div className="w-full">
-      <audio ref={audioRef} src={signedUrl} preload="metadata" />
-
-      <div className="flex items-center gap-3">
-        <button
-          onClick={onPlayToggle}
-          className="w-6 h-6 flex items-center justify-center rounded-full flex-shrink-0 border-2"
-          style={{
-            borderColor: colors.accent.primary,
-            backgroundColor: "transparent",
-            color: colors.accent.primary,
-          }}
-        >
-          {isPlaying ? (
-            <svg
-              className="w-2.5 h-2.5"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <rect x="7" y="5" width="3" height="14" />
-              <rect x="14" y="5" width="3" height="14" />
-            </svg>
-          ) : (
-            <svg
-              className="w-2.5 h-2.5 ml-0.5"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path d="M8 5v14l11-7z" />
-            </svg>
-          )}
-        </button>
-
-        {sampleName && (
-          <div
-            className="flex-1 font-medium"
-            style={{ color: colors.text.primary }}
-          >
-            {sampleName}
-          </div>
-        )}
-      </div>
-
-      {/* Progress bar */}
-      <div
-        className="h-0.5 rounded-full overflow-hidden mt-1.5"
-        style={{ backgroundColor: colors.border }}
-      >
-        <div
-          className="h-full rounded-full"
-          style={{
-            width: duration > 0 ? `${(currentTime / duration) * 100}%` : "0%",
-            backgroundColor: colors.accent.primary,
-            transition: "width 0.05s ease-out",
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-interface Language {
-  id: number;
-  code: string;
-  name: string;
-}
-
-const DEFAULT_LANGUAGES: Language[] = [
-  { id: 1, code: "en", name: "English" },
-  { id: 2, code: "hi", name: "Hindi" },
-];
+import DatasetsTab from "@/app/components/speech-to-text/DatasetsTab";
+import EvaluationsTab from "@/app/components/speech-to-text/EvaluationsTab";
+import {
+  Tab,
+  AudioFile,
+  Dataset,
+  STTRun,
+  STTResult,
+  STTResultRaw,
+  Language,
+  DEFAULT_LANGUAGES,
+  RawLanguage,
+  LanguagesResponse,
+  DatasetsResponse,
+  RunsResponse,
+  RunDetailResponse,
+  CreateDatasetResponse,
+  CreateRunResponse,
+} from "@/app/lib/types/speechToText";
 
 export default function SpeechToTextPage() {
   const toast = useToast();
@@ -341,7 +43,7 @@ export default function SpeechToTextPage() {
   const [activeTab, setActiveTab] = useState<Tab>("datasets");
   const { sidebarCollapsed } = useApp();
   const [leftPanelWidth] = useState(450);
-  const { apiKeys } = useAuth();
+  const { apiKeys, isAuthenticated } = useAuth();
   const [languages, setLanguages] = useState<Language[]>([]);
   const [datasetName, setDatasetName] = useState("");
   const [datasetDescription, setDatasetDescription] = useState("");
@@ -349,45 +51,39 @@ export default function SpeechToTextPage() {
   const [audioFiles, setAudioFiles] = useState<AudioFile[]>([]);
   const [playingFileId, setPlayingFileId] = useState<string | null>(null);
   const [isCreating, setIsCreating] = useState(false);
-
-  // Datasets list (both tabs)
   const [datasets, setDatasets] = useState<Dataset[]>([]);
   const [isLoadingDatasets, setIsLoadingDatasets] = useState(false);
-
-  // Evaluation form (Tab 2)
   const [evaluationName, setEvaluationName] = useState("");
   const [selectedDatasetId, setSelectedDatasetId] = useState<number | null>(
     null,
   );
   const [selectedModel, setSelectedModel] = useState("gemini-2.5-pro");
   const [isRunning, setIsRunning] = useState(false);
-
-  // Evaluation runs (Tab 2)
   const [runs, setRuns] = useState<STTRun[]>([]);
   const [isLoadingRuns, setIsLoadingRuns] = useState(false);
-
-  // Result viewing
   const [selectedRunId, setSelectedRunId] = useState<number | null>(null);
   const [results, setResults] = useState<STTResult[]>([]);
   const [isLoadingResults, setIsLoadingResults] = useState(false);
-
-  // Error modal state
   const [errorModalOpen, setErrorModalOpen] = useState(false);
   const [errorModalMessage, setErrorModalMessage] = useState("");
 
-  // Load languages
   const loadLanguages = async () => {
-    if (apiKeys.length === 0) return;
+    if (!isAuthenticated) return;
 
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = await apiFetch<any>("/api/languages", apiKeys[0].key);
+      const data = await apiFetch<RawLanguage[] | LanguagesResponse>(
+        "/api/languages",
+        apiKeys[0]?.key ?? "",
+      );
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      let rawList: any[] = [];
+      let rawList: RawLanguage[] = [];
       if (Array.isArray(data)) {
         rawList = data;
-      } else if (data.data?.data && Array.isArray(data.data.data)) {
+      } else if (
+        data.data &&
+        !Array.isArray(data.data) &&
+        Array.isArray(data.data.data)
+      ) {
         rawList = data.data.data;
       } else if (data.data && Array.isArray(data.data)) {
         rawList = data.data;
@@ -396,10 +92,8 @@ export default function SpeechToTextPage() {
       }
 
       const languagesList: Language[] = rawList
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .filter((l: any) => l.is_active !== false)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .map((l: any) => ({
+        .filter((l) => l.is_active !== false)
+        .map((l) => ({
           id: l.id,
           code: l.locale || l.code || "",
           name: l.label || l.name || "",
@@ -420,19 +114,17 @@ export default function SpeechToTextPage() {
     }
   };
 
-  // Load datasets
   const loadDatasets = async () => {
-    if (apiKeys.length === 0) return;
+    if (!isAuthenticated) return;
 
     setIsLoadingDatasets(true);
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = await apiFetch<any>(
+      const data = await apiFetch<Dataset[] | DatasetsResponse>(
         "/api/evaluations/stt/datasets",
-        apiKeys[0].key,
+        apiKeys[0]?.key ?? "",
       );
 
-      let datasetsList = [];
+      let datasetsList: Dataset[] = [];
       if (Array.isArray(data)) {
         datasetsList = data;
       } else if (data.datasets && Array.isArray(data.datasets)) {
@@ -451,19 +143,17 @@ export default function SpeechToTextPage() {
     }
   };
 
-  // Load evaluation runs
   const loadRuns = async () => {
-    if (apiKeys.length === 0) return;
+    if (!isAuthenticated) return;
 
     setIsLoadingRuns(true);
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = await apiFetch<any>(
+      const data = await apiFetch<STTRun[] | RunsResponse>(
         "/api/evaluations/stt/runs",
-        apiKeys[0].key,
+        apiKeys[0]?.key ?? "",
       );
 
-      let runsList = [];
+      let runsList: STTRun[] = [];
       if (Array.isArray(data)) {
         runsList = data;
       } else if (data.runs && Array.isArray(data.runs)) {
@@ -490,7 +180,6 @@ export default function SpeechToTextPage() {
     }
   }, [apiKeys, activeTab]);
 
-  // Handle audio file selection and upload
   const handleAudioFileSelect = async (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
@@ -498,7 +187,7 @@ export default function SpeechToTextPage() {
 
     if (!files || files.length === 0) return;
 
-    if (apiKeys.length === 0) {
+    if (!isAuthenticated) {
       toast.error("Please add an API key in Keystore first");
       return;
     }
@@ -548,7 +237,7 @@ export default function SpeechToTextPage() {
           file_id?: string;
           id?: string;
           data?: { file_id?: string; id?: string };
-        }>("/api/evaluations/stt/files", apiKeys[0].key, {
+        }>("/api/evaluations/stt/files", apiKeys[0]?.key ?? "", {
           method: "POST",
           body: formData,
         });
@@ -574,8 +263,6 @@ export default function SpeechToTextPage() {
             f.id === localId ? { ...f, fileId: backendFileId } : f,
           ),
         );
-
-        // toast.success(`${file.name} uploaded`); // Removed toast notification
       } catch (error) {
         console.error(`Error uploading ${file.name}:`, error);
         toast.error(`Failed to upload ${file.name}`);
@@ -619,7 +306,7 @@ export default function SpeechToTextPage() {
       return;
     }
 
-    if (apiKeys.length === 0) {
+    if (!isAuthenticated) {
       toast.error("Please add an API key in Keystore first");
       return;
     }
@@ -647,11 +334,14 @@ export default function SpeechToTextPage() {
         language_id: datasetLanguageId,
         samples: samples,
       };
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await apiFetch<any>("/api/evaluations/stt/datasets", apiKeys[0].key, {
-        method: "POST",
-        body: JSON.stringify(payload),
-      });
+      await apiFetch<CreateDatasetResponse>(
+        "/api/evaluations/stt/datasets",
+        apiKeys[0]?.key ?? "",
+        {
+          method: "POST",
+          body: JSON.stringify(payload),
+        },
+      );
 
       toast.success(`Dataset "${datasetName}" created successfully!`);
 
@@ -672,7 +362,7 @@ export default function SpeechToTextPage() {
   };
 
   const handleRunEvaluation = async () => {
-    if (apiKeys.length === 0) {
+    if (!isAuthenticated) {
       toast.error("Please add an API key in Keystore first");
       return;
     }
@@ -690,17 +380,19 @@ export default function SpeechToTextPage() {
     setIsRunning(true);
 
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await apiFetch<any>("/api/evaluations/stt/runs", apiKeys[0].key, {
-        method: "POST",
-        body: JSON.stringify({
-          run_name: evaluationName.trim(),
-          dataset_id: selectedDatasetId,
-          model: selectedModel,
-        }),
-      });
+      await apiFetch<CreateRunResponse>(
+        "/api/evaluations/stt/runs",
+        apiKeys[0]?.key ?? "",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            run_name: evaluationName.trim(),
+            dataset_id: selectedDatasetId,
+            model: selectedModel,
+          }),
+        },
+      );
 
-      // toast.success(`Evaluation "${evaluationName}" started successfully!`);
       setSelectedModel("gemini-2.5-pro");
 
       setEvaluationName("");
@@ -726,53 +418,41 @@ export default function SpeechToTextPage() {
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
 
-  // Load results for a specific run
   const loadResults = async (runId: number) => {
-    if (apiKeys.length === 0) return;
+    if (!isAuthenticated) return;
 
     setIsLoadingResults(true);
     try {
-      // Fetch run details with results
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const runData = await apiFetch<any>(
+      const runData = await apiFetch<STTResultRaw[] | RunDetailResponse>(
         `/api/evaluations/stt/runs/${runId}?include_results=true&include_signed_url=true`,
-        apiKeys[0].key,
+        apiKeys[0]?.key ?? "",
       );
 
-      // Extract results
-      let resultsList = [];
+      let rawResults: STTResultRaw[] = [];
       if (Array.isArray(runData)) {
-        resultsList = runData;
+        rawResults = runData;
       } else if (runData.results && Array.isArray(runData.results)) {
-        resultsList = runData.results;
+        rawResults = runData.results;
       } else if (runData.data && Array.isArray(runData.data)) {
-        resultsList = runData.data;
+        rawResults = runData.data as STTResultRaw[];
       } else if (
         runData.data &&
+        !Array.isArray(runData.data) &&
         runData.data.results &&
         Array.isArray(runData.data.results)
       ) {
-        resultsList = runData.data.results;
+        rawResults = runData.data.results;
       }
 
-      // Enrich results with sample data (filename, ground truth, signed URL)
-      // The structure is: data.results[].sample contains all sample information
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      resultsList = resultsList.map((result: any) => {
+      const resultsList: STTResult[] = rawResults.map((result) => {
         const sample = result.sample;
 
-        // Extract sample name from sample_metadata.original_filename
         const sampleName =
           sample?.sample_metadata?.original_filename ||
           `Sample ${result.stt_sample_id}`;
 
-        // Extract ground truth
         const groundTruth = sample?.ground_truth || "";
-
-        // Extract signed URL
         const signedUrl = sample?.signed_url || "";
-
-        // Extract file ID
         const fileId = sample?.file_id;
 
         return {
@@ -811,7 +491,6 @@ export default function SpeechToTextPage() {
             subtitle="Compare transcription quality across STT models"
           />
 
-          {/* Tab Navigation */}
           <TabNavigation
             tabs={[
               { id: "datasets", label: "Datasets" },
@@ -821,50 +500,25 @@ export default function SpeechToTextPage() {
             onTabChange={(tabId) => setActiveTab(tabId as Tab)}
           />
 
-          {/* Tab Content */}
-          {apiKeys.length === 0 ? (
+          {!isAuthenticated ? (
             <div
               className="flex-1 flex items-center justify-center"
               style={{ backgroundColor: colors.bg.secondary }}
             >
               <div className="text-center">
-                <svg
-                  className="mx-auto h-12 w-12 mb-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  style={{ color: colors.border }}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                    d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-                  />
-                </svg>
                 <p
                   className="text-sm font-medium mb-1"
                   style={{ color: colors.text.primary }}
                 >
-                  API key required
+                  Authentication required
                 </p>
                 <p
                   className="text-xs mb-4"
                   style={{ color: colors.text.secondary }}
                 >
-                  Add an API key in the Keystore to start creating datasets and
-                  running evaluations
+                  Please sign in to start creating datasets and running
+                  evaluations
                 </p>
-                <a
-                  href="/keystore"
-                  className="inline-block px-4 py-2 rounded-md text-sm font-medium"
-                  style={{
-                    backgroundColor: colors.accent.primary,
-                    color: "#ffffff",
-                  }}
-                >
-                  Go to Keystore
-                </a>
               </div>
             </div>
           ) : activeTab === "datasets" ? (
@@ -926,7 +580,6 @@ export default function SpeechToTextPage() {
         </div>
       </div>
 
-      {/* Error Modal */}
       <ErrorModal
         isOpen={errorModalOpen}
         onClose={() => setErrorModalOpen(false)}
@@ -936,2353 +589,3 @@ export default function SpeechToTextPage() {
     </div>
   );
 }
-
-// ============ DATASET DESCRIPTION COMPONENT ============
-const DESCRIPTION_CHAR_LIMIT = 100;
-
-function DatasetDescription({ description }: { description: string }) {
-  const [expanded, setExpanded] = useState(false);
-  const isLong = description.length > DESCRIPTION_CHAR_LIMIT;
-
-  return (
-    <div
-      className="mt-2 text-xs leading-relaxed break-words overflow-hidden"
-      style={{ color: colors.text.secondary }}
-    >
-      <span>
-        {isLong && !expanded
-          ? description.slice(0, DESCRIPTION_CHAR_LIMIT).trimEnd() + "..."
-          : description}
-      </span>
-      {isLong && (
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            setExpanded(!expanded);
-          }}
-          className="mt-1 block text-xs font-medium"
-          style={{ color: colors.text.primary }}
-        >
-          {expanded ? "Show less" : "Read more"}
-        </button>
-      )}
-    </div>
-  );
-}
-
-// ============ DATASETS TAB COMPONENT ============
-interface DatasetsTabProps {
-  leftPanelWidth: number;
-  datasetName: string;
-  setDatasetName: (name: string) => void;
-  datasetDescription: string;
-  setDatasetDescription: (desc: string) => void;
-  datasetLanguageId: number;
-  setDatasetLanguageId: (id: number) => void;
-  audioFiles: AudioFile[];
-  setAudioFiles: React.Dispatch<React.SetStateAction<AudioFile[]>>;
-  playingFileId: string | null;
-  setPlayingFileId: (id: string | null) => void;
-  handleAudioFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  triggerAudioUpload: () => void;
-  removeAudioFile: (id: string) => void;
-  updateGroundTruth: (id: string, groundTruth: string) => void;
-  updateFileLanguage: (id: string, languageId: number) => void;
-  formatFileSize: (bytes: number) => string;
-  isCreating: boolean;
-  handleCreateDataset: () => void;
-  datasets: Dataset[];
-  isLoadingDatasets: boolean;
-  loadDatasets: () => void;
-  apiKeys: APIKey[];
-  languages: Language[];
-  toast: ReturnType<typeof useToast>;
-}
-
-function DatasetsTab({
-  leftPanelWidth,
-  datasetName,
-  setDatasetName,
-  datasetDescription,
-  setDatasetDescription,
-  datasetLanguageId,
-  setDatasetLanguageId,
-  audioFiles,
-  setAudioFiles,
-  playingFileId,
-  setPlayingFileId,
-  handleAudioFileSelect,
-  triggerAudioUpload,
-  removeAudioFile,
-  updateGroundTruth,
-  updateFileLanguage,
-  formatFileSize,
-  isCreating,
-  handleCreateDataset,
-  datasets,
-  apiKeys,
-  languages,
-  toast,
-}: DatasetsTabProps) {
-  const [showLanguageInfo, setShowLanguageInfo] = useState(false);
-  const [languageInfoPos, setLanguageInfoPos] = useState({ top: 0, left: 0 });
-  const [viewingId, setViewingId] = useState<number | null>(null);
-  const [viewModalData, setViewModalData] = useState<{
-    name: string;
-    datasetId: number;
-    samples: {
-      id: number;
-      text: string;
-      ground_truth: string;
-      language_id: number;
-      signed_url?: string;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      sample_metadata?: { original_filename?: string; [key: string]: any };
-    }[];
-  } | null>(null);
-  const [viewPlayingId, setViewPlayingId] = useState<number | null>(null);
-  const [savingSampleId, setSavingSampleId] = useState<number | null>(null);
-
-  const handleViewDataset = async (datasetId: number, datasetName: string) => {
-    if (apiKeys.length === 0) return;
-    setViewingId(datasetId);
-    try {
-      const data = await apiFetch<{
-        data?: {
-          samples?: {
-            id: number;
-            text: string;
-            ground_truth: string;
-            language_id: number;
-            signed_url?: string;
-            sample_metadata?: {
-              original_filename?: string;
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              [key: string]: any;
-            };
-          }[];
-        };
-        samples?: {
-          id: number;
-          text: string;
-          ground_truth: string;
-          language_id: number;
-          signed_url?: string;
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          sample_metadata?: { original_filename?: string; [key: string]: any };
-        }[];
-      }>(
-        `/api/evaluations/stt/datasets/${datasetId}?include_samples=true&include_signed_url=true&sample_limit=100&sample_offset=0`,
-        apiKeys[0].key,
-      );
-      const samples = data?.data?.samples || data?.samples || [];
-      if (samples.length === 0) {
-        toast.error("No samples found in this dataset");
-        return;
-      }
-      setViewModalData({ name: datasetName, datasetId, samples });
-    } catch (err: unknown) {
-      toast.error(
-        err instanceof Error ? err.message : "Failed to view dataset",
-      );
-    } finally {
-      setViewingId(null);
-    }
-  };
-
-  const handleUpdateSample = async (
-    sampleId: number,
-    field: "ground_truth" | "language_id",
-    value: string | number,
-  ) => {
-    if (!viewModalData || apiKeys.length === 0) return;
-    setSavingSampleId(sampleId);
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await apiFetch<any>(
-        `/api/evaluations/stt/samples/${sampleId}`,
-        apiKeys[0].key,
-        {
-          method: "PATCH",
-          body: JSON.stringify({ [field]: value }),
-        },
-      );
-      setViewModalData((prev) =>
-        prev
-          ? {
-              ...prev,
-              samples: prev.samples.map((s) =>
-                s.id === sampleId ? { ...s, [field]: value } : s,
-              ),
-            }
-          : null,
-      );
-    } catch (err: unknown) {
-      toast.error(
-        err instanceof Error ? err.message : "Failed to update sample",
-      );
-    } finally {
-      setSavingSampleId(null);
-    }
-  };
-
-  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]);
-
-  return (
-    <div className="flex-1 flex overflow-hidden">
-      {/* Left Panel - Create Dataset Form */}
-      <div
-        className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-        style={{
-          width: `${leftPanelWidth}px`,
-          backgroundColor: colors.bg.primary,
-          borderColor: colors.border,
-        }}
-      >
-        <div className="flex-1 overflow-auto p-4 space-y-4">
-          {/* Page Title */}
-          <div>
-            <h2
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
-              Create New Dataset
-            </h2>
-            <p
-              className="text-xs mt-0.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Add audio samples that will be transcribed during evaluation
-            </p>
-          </div>
-
-          {/* Name */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Name *
-            </label>
-            <input
-              type="text"
-              value={datasetName}
-              onChange={(e) => setDatasetName(e.target.value)}
-              placeholder="e.g., English Podcast Dataset"
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            />
-          </div>
-
-          {/* Description */}
-          <div>
-            <label
-              className="block text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              Description
-            </label>
-            <input
-              type="text"
-              value={datasetDescription}
-              onChange={(e) => setDatasetDescription(e.target.value)}
-              placeholder="Optional description"
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            />
-          </div>
-
-          {/* Language */}
-          <div>
-            <label
-              className="text-xs font-medium mb-1.5"
-              style={{ color: colors.text.secondary }}
-            >
-              <span className="inline-flex items-center gap-1">
-                Language *
-                <button
-                  type="button"
-                  aria-label="Show language information"
-                  className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer shrink-0"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    border: `1px solid ${colors.border}`,
-                    color: colors.text.secondary,
-                    padding: 0,
-                    lineHeight: 1,
-                  }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    const rect = e.currentTarget.getBoundingClientRect();
-                    setLanguageInfoPos({
-                      top: rect.bottom + 4,
-                      left: rect.left,
-                    });
-                    setShowLanguageInfo(!showLanguageInfo);
-                  }}
-                >
-                  i
-                </button>
-                {showLanguageInfo && (
-                  <div
-                    className="fixed z-50 rounded-lg shadow-lg border text-xs p-3"
-                    style={{
-                      backgroundColor: colors.bg.primary,
-                      borderColor: colors.border,
-                      width: "280px",
-                      top: languageInfoPos.top,
-                      left: languageInfoPos.left,
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <div
-                      className="font-semibold mb-1"
-                      style={{ color: colors.text.primary }}
-                    >
-                      Default Language
-                    </div>
-                    <p
-                      style={{
-                        color: colors.text.secondary,
-                        lineHeight: "1.5",
-                      }}
-                    >
-                      This is the default language applied to all samples in the
-                      dataset. You can override the language for individual
-                      samples in the audio files section below.
-                    </p>
-                  </div>
-                )}
-              </span>
-            </label>
-            <select
-              value={datasetLanguageId}
-              onChange={(e) => {
-                const newId = Number(e.target.value);
-                setDatasetLanguageId(newId);
-                setAudioFiles((prev) =>
-                  prev.map((f) => ({ ...f, languageId: newId })),
-                );
-              }}
-              className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{
-                backgroundColor: colors.bg.primary,
-                borderColor: colors.border,
-                color: colors.text.primary,
-              }}
-            >
-              {languages.map((lang) => (
-                <option key={lang.id} value={lang.id}>
-                  {lang.name}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {/* Audio Samples */}
-          <div>
-            <div className="flex items-center justify-between mb-1.5">
-              <label
-                className="text-xs font-medium"
-                style={{ color: colors.text.secondary }}
-              >
-                Audio Samples *
-              </label>
-            </div>
-
-            <input
-              id="audio-upload"
-              type="file"
-              accept=".mp3,.wav,.m4a,.ogg,.flac,.webm"
-              multiple
-              onChange={handleAudioFileSelect}
-              className="hidden"
-            />
-
-            {audioFiles.length === 0 ? (
-              <div
-                onClick={apiKeys.length > 0 ? triggerAudioUpload : undefined}
-                className="border-2 border-dashed rounded-lg p-6 text-center transition-colors"
-                style={{
-                  borderColor: colors.border,
-                  backgroundColor: colors.bg.primary,
-                  cursor: apiKeys.length > 0 ? "pointer" : "not-allowed",
-                  opacity: apiKeys.length > 0 ? 1 : 0.5,
-                }}
-                onMouseEnter={(e) =>
-                  apiKeys.length > 0 &&
-                  (e.currentTarget.style.backgroundColor = colors.bg.secondary)
-                }
-                onMouseLeave={(e) =>
-                  apiKeys.length > 0 &&
-                  (e.currentTarget.style.backgroundColor = colors.bg.primary)
-                }
-              >
-                <svg
-                  className="w-8 h-8 mx-auto mb-2"
-                  style={{ color: colors.text.secondary }}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                    d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-                  />
-                </svg>
-                <p
-                  className="text-xs font-medium mb-1"
-                  style={{ color: colors.text.primary }}
-                >
-                  {apiKeys.length > 0
-                    ? "Click to upload audio samples"
-                    : "Add an API key to upload"}
-                </p>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>
-                  MP3, WAV, M4A, OGG, FLAC, WebM
-                </p>
-              </div>
-            ) : (
-              <div>
-                <div
-                  className="space-y-3"
-                  style={{ maxHeight: "400px", overflow: "auto" }}
-                >
-                  {audioFiles.map((audioFile, idx) => (
-                    <div
-                      key={audioFile.id}
-                      className="rounded-lg overflow-hidden"
-                      style={{
-                        backgroundColor: colors.bg.primary,
-                        boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
-                      }}
-                    >
-                      <div className="p-4">
-                        {/* Header: number, filename, status, remove */}
-                        <div className="flex items-center justify-between mb-3">
-                          <div className="flex items-center gap-2 min-w-0 flex-1">
-                            <span
-                              className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] flex-shrink-0 font-medium"
-                              style={{
-                                backgroundColor: colors.bg.secondary,
-                                color: colors.text.secondary,
-                              }}
-                            >
-                              {idx + 1}
-                            </span>
-                            <span
-                              className="text-sm font-medium truncate"
-                              style={{ color: colors.text.primary }}
-                            >
-                              {audioFile.name}
-                            </span>
-                            <span
-                              className="text-xs flex-shrink-0"
-                              style={{ color: colors.text.secondary }}
-                            >
-                              {formatFileSize(audioFile.size)}
-                            </span>
-                            {audioFile.fileId ? (
-                              <svg
-                                className="w-3.5 h-3.5 flex-shrink-0"
-                                style={{ color: colors.status.success }}
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                              >
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  strokeWidth={2}
-                                  d="M5 13l4 4L19 7"
-                                />
-                              </svg>
-                            ) : (
-                              <div
-                                className="w-3 h-3 border-2 border-t-transparent rounded-full animate-spin flex-shrink-0"
-                                style={{
-                                  borderColor: colors.accent.primary,
-                                  borderTopColor: "transparent",
-                                }}
-                              />
-                            )}
-                          </div>
-                          <button
-                            onClick={() => removeAudioFile(audioFile.id)}
-                            className="p-1 rounded flex-shrink-0"
-                            style={{ color: colors.text.secondary }}
-                          >
-                            <svg
-                              className="w-3.5 h-3.5"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M6 18L18 6M6 6l12 12"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-
-                        {/* Audio Player */}
-                        <AudioPlayer
-                          audioBase64={audioFile.base64}
-                          mediaType={audioFile.mediaType}
-                          isPlaying={playingFileId === audioFile.id}
-                          onPlayToggle={() =>
-                            setPlayingFileId(
-                              playingFileId === audioFile.id
-                                ? null
-                                : audioFile.id,
-                            )
-                          }
-                        />
-
-                        {/* Language + Ground Truth */}
-                        <div className="mt-3 flex items-start gap-3">
-                          <div
-                            className="flex-shrink-0"
-                            style={{ width: "120px" }}
-                          >
-                            <label
-                              className="block text-[10px] font-medium mb-1 uppercase tracking-wide"
-                              style={{ color: colors.text.secondary }}
-                            >
-                              Language
-                            </label>
-                            <select
-                              value={audioFile.languageId}
-                              onChange={(e) =>
-                                updateFileLanguage(
-                                  audioFile.id,
-                                  Number(e.target.value),
-                                )
-                              }
-                              className="w-full px-2 py-1.5 border rounded-md text-xs"
-                              style={{
-                                backgroundColor: colors.bg.primary,
-                                borderColor: colors.border,
-                                color: colors.text.primary,
-                              }}
-                            >
-                              {languages.map((lang) => (
-                                <option key={lang.id} value={lang.id}>
-                                  {lang.name}
-                                </option>
-                              ))}
-                            </select>
-                          </div>
-                          <div className="flex-1">
-                            <label
-                              className="block text-[10px] font-medium mb-1 uppercase tracking-wide"
-                              style={{ color: colors.text.secondary }}
-                            >
-                              Ground Truth
-                            </label>
-                            <textarea
-                              value={audioFile.groundTruth}
-                              onChange={(e) =>
-                                updateGroundTruth(audioFile.id, e.target.value)
-                              }
-                              placeholder={
-                                audioFile.fileId
-                                  ? "Expected transcription..."
-                                  : "Uploading..."
-                              }
-                              disabled={!audioFile.fileId}
-                              rows={2}
-                              className="w-full px-2 py-1.5 border rounded-md text-xs"
-                              style={{
-                                backgroundColor: audioFile.fileId
-                                  ? colors.bg.primary
-                                  : colors.bg.secondary,
-                                borderColor: colors.border,
-                                color: audioFile.fileId
-                                  ? colors.text.primary
-                                  : colors.text.secondary,
-                                cursor: audioFile.fileId
-                                  ? "text"
-                                  : "not-allowed",
-                                opacity: audioFile.fileId ? 1 : 0.6,
-                                resize: "vertical",
-                              }}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-
-                {/* Upload more - below scrollable area */}
-                <button
-                  onClick={apiKeys.length > 0 ? triggerAudioUpload : undefined}
-                  className="flex items-center gap-1 text-xs font-medium mt-2"
-                  style={{
-                    color:
-                      apiKeys.length > 0
-                        ? colors.accent.primary
-                        : colors.text.secondary,
-                    cursor: apiKeys.length > 0 ? "pointer" : "not-allowed",
-                  }}
-                >
-                  <svg
-                    className="w-3.5 h-3.5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M12 4v16m8-8H4"
-                    />
-                  </svg>
-                  Add more samples
-                  <span style={{ color: colors.text.secondary }}>
-                    ({audioFiles.filter((f) => f.fileId).length}/
-                    {audioFiles.length} uploaded)
-                  </span>
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Bottom Action Bar */}
-        <div
-          className="flex-shrink-0 border-t px-4 py-3 flex items-center justify-end gap-3"
-          style={{
-            borderColor: colors.border,
-            backgroundColor: colors.bg.primary,
-          }}
-        >
-          <button
-            onClick={() => {
-              setDatasetName("");
-              setDatasetDescription("");
-              setDatasetLanguageId(1);
-              setAudioFiles([]);
-              setPlayingFileId(null);
-            }}
-            disabled={isCreating}
-            className="px-4 py-2 rounded-lg text-sm font-medium"
-            style={{ color: colors.text.secondary }}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleCreateDataset}
-            disabled={
-              isCreating || !datasetName.trim() || audioFiles.length === 0
-            }
-            className="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium"
-            style={{
-              backgroundColor:
-                isCreating || !datasetName.trim() || audioFiles.length === 0
-                  ? colors.bg.secondary
-                  : colors.accent.primary,
-              color:
-                isCreating || !datasetName.trim() || audioFiles.length === 0
-                  ? colors.text.secondary
-                  : "#fff",
-              cursor:
-                isCreating || !datasetName.trim() || audioFiles.length === 0
-                  ? "not-allowed"
-                  : "pointer",
-            }}
-          >
-            {isCreating ? (
-              <>
-                <div
-                  className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-                  style={{
-                    borderColor: colors.text.secondary,
-                    borderTopColor: "transparent",
-                  }}
-                />
-                Creating...
-              </>
-            ) : (
-              "Create Dataset"
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Right Panel - Dataset List */}
-      <div
-        className="flex-1 flex flex-col overflow-hidden"
-        style={{ backgroundColor: colors.bg.secondary }}
-      >
-        <div className="flex-1 overflow-auto p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h3
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
-              Datasets
-            </h3>
-          </div>
-
-          {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 }}
-              >
-                No datasets yet
-              </p>
-              <p className="text-xs" style={{ color: colors.text.secondary }}>
-                Create your first dataset using the form on the left
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {datasets.map((dataset) => (
-                <div
-                  key={dataset.id}
-                  className="rounded-lg overflow-hidden"
-                  style={{
-                    backgroundColor: colors.bg.primary,
-                    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
-                    borderLeft: "3px solid #DCCFC3",
-                  }}
-                >
-                  <div className="px-5 py-4">
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="min-w-0 flex-1">
-                        <div
-                          className="text-sm font-semibold truncate"
-                          style={{ color: colors.text.primary }}
-                        >
-                          {dataset.name}
-                        </div>
-                        {dataset.description && (
-                          <DatasetDescription
-                            description={dataset.description}
-                          />
-                        )}
-                        {dataset.dataset_metadata?.sample_count !==
-                          undefined && (
-                          <div
-                            className="mt-2 text-xs"
-                            style={{ color: colors.text.secondary }}
-                          >
-                            {dataset.dataset_metadata.sample_count} samples
-                          </div>
-                        )}
-                      </div>
-                      <div className="flex items-center gap-2 flex-shrink-0">
-                        <button
-                          onClick={() =>
-                            handleViewDataset(dataset.id, dataset.name)
-                          }
-                          disabled={viewingId === dataset.id}
-                          className="px-3 py-1.5 rounded-lg text-xs font-medium border"
-                          style={{
-                            backgroundColor: "transparent",
-                            borderColor: colors.border,
-                            color: colors.text.primary,
-                            opacity: viewingId === dataset.id ? 0.5 : 1,
-                          }}
-                        >
-                          {viewingId === dataset.id ? "Loading..." : "View"}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* View Dataset Modal */}
-      {viewModalData && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center"
-          style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
-          onClick={() => {
-            setViewModalData(null);
-            setViewPlayingId(null);
-          }}
-        >
-          <div
-            className="rounded-lg shadow-xl flex flex-col"
-            style={{
-              backgroundColor: colors.bg.primary,
-              width: "90vw",
-              maxWidth: "900px",
-              maxHeight: "85vh",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Modal Header */}
-            <div
-              className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0"
-              style={{ borderColor: colors.border }}
-            >
-              <div>
-                <h3
-                  className="text-sm font-semibold"
-                  style={{ color: colors.text.primary }}
-                >
-                  {viewModalData.name}
-                </h3>
-                <p
-                  className="text-xs mt-0.5"
-                  style={{ color: colors.text.secondary }}
-                >
-                  {viewModalData.samples.length} audio samples
-                </p>
-              </div>
-              <button
-                onClick={() => {
-                  setViewModalData(null);
-                  setViewPlayingId(null);
-                }}
-                className="p-1.5 rounded"
-                style={{ color: colors.text.secondary }}
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-
-            {/* Modal Body - Samples */}
-            <div className="flex-1 overflow-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr
-                    style={{
-                      backgroundColor: colors.bg.secondary,
-                      borderBottom: `1px solid ${colors.border}`,
-                    }}
-                  >
-                    <th
-                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                      style={{
-                        color: colors.text.secondary,
-                        backgroundColor: colors.bg.secondary,
-                        width: "40px",
-                      }}
-                    ></th>
-                    <th
-                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                      style={{
-                        color: colors.text.secondary,
-                        backgroundColor: colors.bg.secondary,
-                      }}
-                    >
-                      Sample
-                    </th>
-                    <th
-                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                      style={{
-                        color: colors.text.secondary,
-                        backgroundColor: colors.bg.secondary,
-                        width: "120px",
-                      }}
-                    >
-                      Language
-                    </th>
-                    <th
-                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
-                      style={{
-                        color: colors.text.secondary,
-                        backgroundColor: colors.bg.secondary,
-                      }}
-                    >
-                      Ground Truth
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {viewModalData.samples.map((sample, idx) => (
-                    <tr
-                      key={sample.id}
-                      style={{ borderBottom: `1px solid ${colors.border}` }}
-                    >
-                      <td
-                        className="px-4 py-3 text-xs align-top"
-                        style={{ color: colors.text.secondary }}
-                      >
-                        {idx + 1}
-                      </td>
-                      <td className="px-4 py-3 align-top">
-                        <div className="space-y-1.5">
-                          {sample.sample_metadata?.original_filename && (
-                            <div
-                              className="text-xs font-medium truncate"
-                              style={{
-                                color: colors.text.primary,
-                                maxWidth: "280px",
-                              }}
-                            >
-                              {sample.sample_metadata.original_filename}
-                            </div>
-                          )}
-                          {sample.signed_url ? (
-                            <AudioPlayerFromUrl
-                              signedUrl={sample.signed_url}
-                              isPlaying={viewPlayingId === sample.id}
-                              onPlayToggle={() =>
-                                setViewPlayingId(
-                                  viewPlayingId === sample.id
-                                    ? null
-                                    : sample.id,
-                                )
-                              }
-                            />
-                          ) : (
-                            <span
-                              className="text-xs"
-                              style={{ color: colors.text.secondary }}
-                            >
-                              No audio
-                            </span>
-                          )}
-                        </div>
-                      </td>
-                      <td className="px-4 py-3 align-top">
-                        <select
-                          value={sample.language_id}
-                          onChange={(e) =>
-                            handleUpdateSample(
-                              sample.id,
-                              "language_id",
-                              Number(e.target.value),
-                            )
-                          }
-                          disabled={savingSampleId === sample.id}
-                          className="w-full px-2 py-1.5 border rounded-md text-xs"
-                          style={{
-                            backgroundColor: colors.bg.primary,
-                            borderColor: colors.border,
-                            color: colors.text.primary,
-                            opacity: savingSampleId === sample.id ? 0.5 : 1,
-                          }}
-                        >
-                          {languages.map((lang) => (
-                            <option key={lang.id} value={lang.id}>
-                              {lang.name}
-                            </option>
-                          ))}
-                        </select>
-                      </td>
-                      <td className="px-4 py-3 align-top">
-                        <textarea
-                          value={sample.ground_truth || ""}
-                          onChange={(e) => {
-                            const newVal = e.target.value;
-                            setViewModalData((prev) =>
-                              prev
-                                ? {
-                                    ...prev,
-                                    samples: prev.samples.map((s) =>
-                                      s.id === sample.id
-                                        ? { ...s, ground_truth: newVal }
-                                        : s,
-                                    ),
-                                  }
-                                : null,
-                            );
-                          }}
-                          onBlur={(e) =>
-                            handleUpdateSample(
-                              sample.id,
-                              "ground_truth",
-                              e.target.value,
-                            )
-                          }
-                          placeholder="Enter ground truth..."
-                          disabled={savingSampleId === sample.id}
-                          rows={3}
-                          className="w-full px-2 py-1.5 border rounded-md text-xs"
-                          style={{
-                            backgroundColor: colors.bg.primary,
-                            borderColor: colors.border,
-                            color: colors.text.primary,
-                            opacity: savingSampleId === sample.id ? 0.5 : 1,
-                            resize: "vertical",
-                          }}
-                        />
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ============ EVALUATIONS TAB COMPONENT ============
-interface EvaluationsTabProps {
-  leftPanelWidth: number;
-  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;
-  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;
-  apiKeys: APIKey[];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  toast: any;
-  setActiveTab: (tab: Tab) => void;
-}
-
-function EvaluationsTab({
-  leftPanelWidth,
-  evaluationName,
-  setEvaluationName,
-  datasets,
-  isLoadingDatasets,
-  selectedDatasetId,
-  setSelectedDatasetId,
-  selectedDataset,
-  selectedModel,
-  setSelectedModel,
-  isRunning,
-  handleRunEvaluation,
-  runs,
-  isLoadingRuns,
-  loadRuns,
-  selectedRunId,
-  setSelectedRunId,
-  results,
-  setResults,
-  isLoadingResults,
-  loadResults,
-  apiKeys,
-  toast,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  setActiveTab,
-}: EvaluationsTabProps) {
-  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);
-
-  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,
-    comment?: string,
-  ) => {
-    if (apiKeys.length === 0) return;
-
-    try {
-      const payload: { is_correct?: boolean | null; comment?: string } = {};
-      if (isCorrect !== undefined) payload.is_correct = isCorrect;
-      if (comment !== undefined) payload.comment = comment;
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await apiFetch<any>(
-        `/api/evaluations/stt/results/${resultId}`,
-        apiKeys[0].key,
-        {
-          method: "PATCH",
-          body: JSON.stringify(payload),
-        },
-      );
-
-      // Update local state
-      setResults((prev) =>
-        prev.map((r) =>
-          r.id === resultId
-            ? {
-                ...r,
-                ...(isCorrect !== undefined ? { is_correct: isCorrect } : {}),
-                ...(comment !== undefined && { comment }),
-              }
-            : r,
-        ),
-      );
-
-      //   toast.success('Feedback updated successfully');
-    } catch (error) {
-      console.error("Failed to update feedback:", error);
-      toast.error("Failed to update feedback");
-    }
-  };
-
-  return (
-    <div className="flex-1 flex overflow-hidden">
-      {/* Left 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,
-          }}
-        >
-          <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>
-        </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"
-                  style={{ color: colors.text.secondary }}
-                >
-                  <svg
-                    className={`w-4 h-4 ${isLoadingRuns ? "animate-spin" : ""}`}
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                    />
-                  </svg>
-                </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"
-                          style={{
-                            borderLeftColor: 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"
-                                  style={{ color: colors.text.primary }}
-                                >
-                                  {run.run_name}
-                                </div>
-                                {/* Error message */}
-                                {run.error_message && (
-                                  <div
-                                    className="mt-2 text-xs break-words overflow-hidden"
-                                    style={{ color: "hsl(8, 86%, 40%)" }}
-                                  >
-                                    {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
-                                    ? () => loadResults(run.id)
-                                    : undefined
-                                }
-                                disabled={!isCompleted}
-                                className="px-3 py-1.5 rounded-lg text-xs font-medium border flex-shrink-0"
-                                style={{
-                                  backgroundColor: "transparent",
-                                  borderColor: colors.border,
-                                  color: isCompleted
-                                    ? colors.text.primary
-                                    : colors.text.secondary,
-                                  cursor: isCompleted
-                                    ? "pointer"
-                                    : "not-allowed",
-                                  opacity: isCompleted ? 1 : 0.5,
-                                }}
-                              >
-                                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/(main)/text-to-speech/page.tsx b/app/(main)/text-to-speech/page.tsx
index 700dc54..bfdb9f6 100644
--- a/app/(main)/text-to-speech/page.tsx
+++ b/app/(main)/text-to-speech/page.tsx
@@ -7,273 +7,53 @@
 
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { colors } from "@/app/lib/colors";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import TabNavigation from "@/app/components/TabNavigation";
-import Loader, { LoaderBox } from "@/app/components/Loader";
-import { getStatusColor } from "@/app/components/utils";
 import { useToast } from "@/app/components/Toast";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import { apiFetch } from "@/app/lib/apiClient";
-import { APIKey } from "@/app/lib/types/credentials";
 import ErrorModal from "@/app/components/ErrorModal";
-
-type Tab = "datasets" | "evaluations";
-
-// Types
-interface TextSample {
-  id: string;
-  text: string;
-}
-
-interface Language {
-  id: number;
-  code: string;
-  name: string;
-}
-
-const DEFAULT_LANGUAGES: Language[] = [
-  { id: 1, code: "en", name: "English" },
-  { id: 2, code: "hi", name: "Hindi" },
-];
-
-interface TTSDataset {
-  id: number;
-  name: string;
-  description?: string;
-  type: string;
-  object_store_url: string | null;
-  dataset_metadata: {
-    sample_count?: number;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any;
-  };
-  organization_id: number;
-  project_id: number;
-  inserted_at: string;
-  updated_at: string;
-}
-
-interface TTSRun {
-  id: number;
-  run_name: string;
-  dataset_name: string;
-  dataset_id: number;
-  type: string;
-  models: string[] | null;
-  status: string;
-  total_items: number;
-  score: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any;
-  } | null;
-  error_message: string | null;
-  run_metadata: {
-    voice_name?: string;
-    style_prompt?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any;
-  } | null;
-  organization_id: number;
-  project_id: number;
-  inserted_at: string;
-  updated_at: string;
-}
-
-interface TTSResult {
-  id: number;
-  sample_text: string;
-  object_store_url: string | null;
-  duration_seconds: number | null;
-  size_bytes: number | null;
-  provider: string;
-  status: string;
-  score: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any;
-  } | null;
-  is_correct: boolean | null;
-  comment: string | null;
-  error_message: string | null;
-  evaluation_run_id: number;
-  organization_id: number;
-  project_id: number;
-  inserted_at: string;
-  updated_at: string;
-  signedUrl?: string; // Enriched field - signed URL for audio playback
-}
-
-// Audio Player Component for URL-based playback
-function AudioPlayerFromUrl({
-  signedUrl,
-  isPlaying,
-  onPlayToggle,
-  sampleLabel,
-  durationSeconds,
-  sizeBytes,
-}: {
-  signedUrl: string;
-  isPlaying: boolean;
-  onPlayToggle: () => void;
-  sampleLabel?: string;
-  durationSeconds?: number | null;
-  sizeBytes?: number | null;
-}) {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const [duration, setDuration] = useState(0);
-  const [currentTime, setCurrentTime] = useState(0);
-
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    const handleLoadedMetadata = () => setDuration(audio.duration);
-    const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
-    const handleEnded = () => onPlayToggle();
-
-    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
-    audio.addEventListener("timeupdate", handleTimeUpdate);
-    audio.addEventListener("ended", handleEnded);
-
-    return () => {
-      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
-      audio.removeEventListener("timeupdate", handleTimeUpdate);
-      audio.removeEventListener("ended", handleEnded);
-    };
-  }, [onPlayToggle]);
-
-  useEffect(() => {
-    if (!audioRef.current) return;
-    if (isPlaying) {
-      audioRef.current.play().catch(console.error);
-    } else {
-      audioRef.current.pause();
-    }
-  }, [isPlaying]);
-
-  const formatSize = (bytes: number) => {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  };
-
-  return (
-    <div className="w-full">
-      <audio ref={audioRef} src={signedUrl} preload="metadata" />
-
-      <div className="flex items-center gap-3">
-        <button
-          onClick={onPlayToggle}
-          className="w-6 h-6 flex items-center justify-center rounded-full flex-shrink-0 border-2"
-          style={{
-            borderColor: colors.accent.primary,
-            backgroundColor: "transparent",
-            color: colors.accent.primary,
-          }}
-        >
-          {isPlaying ? (
-            <svg
-              className="w-2.5 h-2.5"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <rect x="7" y="5" width="3" height="14" />
-              <rect x="14" y="5" width="3" height="14" />
-            </svg>
-          ) : (
-            <svg
-              className="w-2.5 h-2.5 ml-0.5"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path d="M8 5v14l11-7z" />
-            </svg>
-          )}
-        </button>
-
-        {sampleLabel && (
-          <span
-            className="text-sm font-medium"
-            style={{ color: colors.text.primary }}
-          >
-            {sampleLabel}
-          </span>
-        )}
-      </div>
-
-      {/* Progress bar */}
-      <div
-        className="h-1 rounded-full overflow-hidden mt-2"
-        style={{ backgroundColor: colors.bg.secondary }}
-      >
-        <div
-          className="h-full rounded-full"
-          style={{
-            width: duration > 0 ? `${(currentTime / duration) * 100}%` : "0%",
-            backgroundColor: colors.accent.primary,
-            transition: "width 0.05s ease-out",
-          }}
-        />
-      </div>
-
-      {/* Meta info */}
-      {(durationSeconds != null || sizeBytes != null) && (
-        <div className="flex items-center gap-3 mt-1.5">
-          {durationSeconds != null && (
-            <span
-              className="text-xs tabular-nums"
-              style={{ color: colors.text.secondary }}
-            >
-              {durationSeconds >= 60
-                ? `${Math.floor(durationSeconds / 60)}m ${Math.round(durationSeconds % 60)}s`
-                : `${Math.round(durationSeconds)}s`}
-            </span>
-          )}
-          {sizeBytes != null && (
-            <span
-              className="text-xs tabular-nums"
-              style={{ color: colors.text.secondary }}
-            >
-              {formatSize(sizeBytes)}
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
+import DatasetsTab from "@/app/components/text-to-speech/DatasetsTab";
+import EvaluationsTab from "@/app/components/text-to-speech/EvaluationsTab";
+import {
+  TTSTab,
+  TextSample,
+  TTSDataset,
+  TTSRun,
+  TTSResult,
+  TTSResultRaw,
+  TTSDatasetsResponse,
+  TTSRunsResponse,
+  TTSRunDetailResponse,
+  TTSCreateDatasetResponse,
+  TTSCreateRunResponse,
+} from "@/app/lib/types/textToSpeech";
+import {
+  Language,
+  DEFAULT_LANGUAGES,
+  RawLanguage,
+  LanguagesResponse,
+} from "@/app/lib/types/speechToText";
 
 export default function TextToSpeechPage() {
   const toast = useToast();
 
-  // Tab state
-  const [activeTab, setActiveTab] = useState<Tab>("datasets");
-
-  // UI State
+  const [activeTab, setActiveTab] = useState<TTSTab>("datasets");
   const { sidebarCollapsed } = useApp();
   const leftPanelWidth = 450;
-
-  // API Keys
-  const { apiKeys } = useAuth();
-
-  // Languages
+  const { apiKeys, isAuthenticated } = useAuth();
   const [languages, setLanguages] = useState<Language[]>([]);
-
-  // Dataset form (Tab 1)
   const [datasetName, setDatasetName] = useState("");
   const [datasetDescription, setDatasetDescription] = useState("");
   const [datasetLanguageId, setDatasetLanguageId] = useState<number>(1);
   const [textSamples, setTextSamples] = useState<TextSample[]>([]);
   const [isCreating, setIsCreating] = useState(false);
-
-  // Datasets list (both tabs)
   const [datasets, setDatasets] = useState<TTSDataset[]>([]);
   const [isLoadingDatasets, setIsLoadingDatasets] = useState(false);
-
-  // Evaluation form (Tab 2)
   const [evaluationName, setEvaluationName] = useState("");
   const [selectedDatasetId, setSelectedDatasetId] = useState<number | null>(
     null,
@@ -282,33 +62,32 @@ export default function TextToSpeechPage() {
     "gemini-2.5-pro-preview-tts",
   );
   const [isRunning, setIsRunning] = useState(false);
-
-  // Evaluation runs (Tab 2)
   const [runs, setRuns] = useState<TTSRun[]>([]);
   const [isLoadingRuns, setIsLoadingRuns] = useState(false);
-
-  // Result viewing
   const [selectedRunId, setSelectedRunId] = useState<number | null>(null);
   const [results, setResults] = useState<TTSResult[]>([]);
   const [isLoadingResults, setIsLoadingResults] = useState(false);
-
-  // Error modal state
   const [errorModalOpen, setErrorModalOpen] = useState(false);
   const [errorModalMessage, setErrorModalMessage] = useState("");
 
   // Load languages
   const loadLanguages = async () => {
-    if (apiKeys.length === 0) return;
+    if (!isAuthenticated) return;
 
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = await apiFetch<any>("/api/languages", apiKeys[0].key);
+      const data = await apiFetch<RawLanguage[] | LanguagesResponse>(
+        "/api/languages",
+        apiKeys[0]?.key ?? "",
+      );
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      let rawList: any[] = [];
+      let rawList: RawLanguage[] = [];
       if (Array.isArray(data)) {
         rawList = data;
-      } else if (data.data?.data && Array.isArray(data.data.data)) {
+      } else if (
+        data.data &&
+        !Array.isArray(data.data) &&
+        Array.isArray(data.data.data)
+      ) {
         rawList = data.data.data;
       } else if (data.data && Array.isArray(data.data)) {
         rawList = data.data;
@@ -317,10 +96,8 @@ export default function TextToSpeechPage() {
       }
 
       const languagesList: Language[] = rawList
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .filter((l: any) => l.is_active !== false)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .map((l: any) => ({
+        .filter((l) => l.is_active !== false)
+        .map((l) => ({
           id: l.id,
           code: l.locale || l.code || "",
           name: l.label || l.name || "",
@@ -340,19 +117,17 @@ export default function TextToSpeechPage() {
     }
   };
 
-  // Load datasets
   const loadDatasets = async () => {
-    if (apiKeys.length === 0) return;
+    if (!isAuthenticated) return;
 
     setIsLoadingDatasets(true);
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = await apiFetch<any>(
+      const data = await apiFetch<TTSDataset[] | TTSDatasetsResponse>(
         "/api/evaluations/tts/datasets",
-        apiKeys[0].key,
+        apiKeys[0]?.key ?? "",
       );
 
-      let datasetsList = [];
+      let datasetsList: TTSDataset[] = [];
       if (Array.isArray(data)) {
         datasetsList = data;
       } else if (data.datasets && Array.isArray(data.datasets)) {
@@ -373,17 +148,16 @@ export default function TextToSpeechPage() {
 
   // Load evaluation runs
   const loadRuns = async () => {
-    if (apiKeys.length === 0) return;
+    if (!isAuthenticated) return;
 
     setIsLoadingRuns(true);
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = await apiFetch<any>(
+      const data = await apiFetch<TTSRun[] | TTSRunsResponse>(
         "/api/evaluations/tts/runs",
-        apiKeys[0].key,
+        apiKeys[0]?.key ?? "",
       );
 
-      let runsList = [];
+      let runsList: TTSRun[] = [];
       if (Array.isArray(data)) {
         runsList = data;
       } else if (data.runs && Array.isArray(data.runs)) {
@@ -410,7 +184,6 @@ export default function TextToSpeechPage() {
     }
   }, [apiKeys, activeTab]);
 
-  // Add a new text sample
   const addTextSample = () => {
     setTextSamples((prev) => [
       ...prev,
@@ -421,19 +194,16 @@ export default function TextToSpeechPage() {
     ]);
   };
 
-  // Remove a text sample
   const removeTextSample = (id: string) => {
     setTextSamples((prev) => prev.filter((s) => s.id !== id));
   };
 
-  // Update text sample text
   const updateSampleText = (id: string, text: string) => {
     setTextSamples((prev) =>
       prev.map((s) => (s.id === id ? { ...s, text } : s)),
     );
   };
 
-  // Create dataset
   const handleCreateDataset = async () => {
     if (!datasetName.trim()) {
       toast.error("Please enter a dataset name");
@@ -446,7 +216,7 @@ export default function TextToSpeechPage() {
       return;
     }
 
-    if (apiKeys.length === 0) {
+    if (!isAuthenticated) {
       toast.error("Please add an API key in Keystore first");
       return;
     }
@@ -458,16 +228,19 @@ export default function TextToSpeechPage() {
         text: sample.text.trim(),
       }));
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await apiFetch<any>("/api/evaluations/tts/datasets", apiKeys[0].key, {
-        method: "POST",
-        body: JSON.stringify({
-          name: datasetName.trim(),
-          description: datasetDescription.trim() || undefined,
-          language_id: datasetLanguageId,
-          samples,
-        }),
-      });
+      await apiFetch<TTSCreateDatasetResponse>(
+        "/api/evaluations/tts/datasets",
+        apiKeys[0]?.key ?? "",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            name: datasetName.trim(),
+            description: datasetDescription.trim() || undefined,
+            language_id: datasetLanguageId,
+            samples,
+          }),
+        },
+      );
 
       toast.success(`Dataset "${datasetName}" created successfully!`);
 
@@ -486,9 +259,8 @@ export default function TextToSpeechPage() {
     }
   };
 
-  // Run evaluation
   const handleRunEvaluation = async () => {
-    if (apiKeys.length === 0) {
+    if (!isAuthenticated) {
       toast.error("Please add an API key in Keystore first");
       return;
     }
@@ -506,15 +278,18 @@ export default function TextToSpeechPage() {
     setIsRunning(true);
 
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await apiFetch<any>("/api/evaluations/tts/runs", apiKeys[0].key, {
-        method: "POST",
-        body: JSON.stringify({
-          run_name: evaluationName.trim(),
-          dataset_id: selectedDatasetId,
-          models: [selectedModel],
-        }),
-      });
+      await apiFetch<TTSCreateRunResponse>(
+        "/api/evaluations/tts/runs",
+        apiKeys[0]?.key ?? "",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            run_name: evaluationName.trim(),
+            dataset_id: selectedDatasetId,
+            models: [selectedModel],
+          }),
+        },
+      );
 
       setEvaluationName("");
       setSelectedDatasetId(null);
@@ -533,39 +308,38 @@ export default function TextToSpeechPage() {
     }
   };
 
-  // Load results for a specific run
   const loadResults = async (runId: number) => {
-    if (apiKeys.length === 0) return;
+    if (!isAuthenticated) return;
 
     setIsLoadingResults(true);
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const runData = await apiFetch<any>(
+      const runData = await apiFetch<TTSResultRaw[] | TTSRunDetailResponse>(
         `/api/evaluations/tts/runs/${runId}?include_results=true&include_signed_url=true`,
-        apiKeys[0].key,
+        apiKeys[0]?.key ?? "",
       );
 
-      let resultsList = [];
+      let rawResults: TTSResultRaw[] = [];
       if (Array.isArray(runData)) {
-        resultsList = runData;
+        rawResults = runData;
       } else if (runData.results && Array.isArray(runData.results)) {
-        resultsList = runData.results;
+        rawResults = runData.results;
       } else if (runData.data && Array.isArray(runData.data)) {
-        resultsList = runData.data;
+        rawResults = runData.data as TTSResultRaw[];
       } else if (
         runData.data &&
+        !Array.isArray(runData.data) &&
         runData.data.results &&
         Array.isArray(runData.data.results)
       ) {
-        resultsList = runData.data.results;
+        rawResults = runData.data.results;
       }
 
       // Enrich results with signed URL for audio playback
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      resultsList = resultsList.map((result: any) => {
+      const resultsList: TTSResult[] = rawResults.map((result) => {
         const signedUrl = result.signed_url || result.sample?.signed_url || "";
+        const { sample: _, ...rest } = result;
         return {
-          ...result,
+          ...rest,
           signedUrl,
         };
       });
@@ -597,61 +371,24 @@ export default function TextToSpeechPage() {
             subtitle="Compare synthesized audio quality across TTS models"
           />
 
-          {/* Tab Navigation */}
           <TabNavigation
             tabs={[
               { id: "datasets", label: "Datasets" },
               { id: "evaluations", label: "Evaluations" },
             ]}
             activeTab={activeTab}
-            onTabChange={(tabId) => setActiveTab(tabId as Tab)}
+            onTabChange={(tabId) => setActiveTab(tabId as TTSTab)}
           />
 
-          {/* Tab Content */}
-          {apiKeys.length === 0 ? (
+          {!isAuthenticated ? (
             <div
               className="flex-1 flex items-center justify-center"
               style={{ backgroundColor: colors.bg.secondary }}
             >
-              <div className="text-center">
-                <svg
-                  className="mx-auto h-12 w-12 mb-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  style={{ color: colors.border }}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1.5}
-                    d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-                  />
-                </svg>
-                <p
-                  className="text-sm font-medium mb-1"
-                  style={{ color: colors.text.primary }}
-                >
-                  API key required
-                </p>
-                <p
-                  className="text-xs mb-4"
-                  style={{ color: colors.text.secondary }}
-                >
-                  Add an API key in the Keystore to start creating datasets and
-                  running evaluations
-                </p>
-                <a
-                  href="/keystore"
-                  className="inline-block px-4 py-2 rounded-md text-sm font-medium"
-                  style={{
-                    backgroundColor: colors.accent.primary,
-                    color: "#ffffff",
-                  }}
-                >
-                  Go to Keystore
-                </a>
-              </div>
+              <p className="text-sm" style={{ color: colors.text.secondary }}>
+                Please sign in to start creating datasets and running
+                evaluations.
+              </p>
             </div>
           ) : activeTab === "datasets" ? (
             <DatasetsTab
@@ -676,6 +413,7 @@ export default function TextToSpeechPage() {
               }}
               apiKeys={apiKeys}
               datasets={datasets}
+              isLoadingDatasets={isLoadingDatasets}
               toast={toast}
             />
           ) : (
@@ -709,7 +447,6 @@ export default function TextToSpeechPage() {
         </div>
       </div>
 
-      {/* Error Modal */}
       <ErrorModal
         isOpen={errorModalOpen}
         onClose={() => setErrorModalOpen(false)}
@@ -719,1955 +456,3 @@ export default function TextToSpeechPage() {
     </div>
   );
 }
-
-// ============ DATASET DESCRIPTION COMPONENT ============
-const TTS_DESCRIPTION_CHAR_LIMIT = 100;
-
-function TTSDatasetDescription({ description }: { description: string }) {
-  const [expanded, setExpanded] = useState(false);
-  const isLong = description.length > TTS_DESCRIPTION_CHAR_LIMIT;
-
-  return (
-    <div
-      className="mt-2 text-xs leading-relaxed break-words overflow-hidden"
-      style={{ color: colors.text.secondary }}
-    >
-      <span>
-        {isLong && !expanded
-          ? description.slice(0, TTS_DESCRIPTION_CHAR_LIMIT).trimEnd() + "..."
-          : description}
-      </span>
-      {isLong && (
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            setExpanded(!expanded);
-          }}
-          className="mt-1 block text-xs font-medium"
-          style={{ color: colors.text.primary }}
-        >
-          {expanded ? "Show less" : "Read more"}
-        </button>
-      )}
-    </div>
-  );
-}
-
-// ============ DATASETS TAB COMPONENT ============
-interface DatasetsTabProps {
-  leftPanelWidth: number;
-  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;
-  apiKeys: APIKey[];
-  datasets: TTSDataset[];
-  toast: ReturnType<typeof useToast>;
-}
-
-function DatasetsTab({
-  leftPanelWidth,
-  datasetName,
-  setDatasetName,
-  datasetDescription,
-  setDatasetDescription,
-  datasetLanguageId,
-  setDatasetLanguageId,
-  languages,
-  textSamples,
-  addTextSample,
-  removeTextSample,
-  updateSampleText,
-  isCreating,
-  handleCreateDataset,
-  resetForm,
-  apiKeys,
-  datasets,
-  toast,
-}: DatasetsTabProps) {
-  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 handleViewDataset = async (datasetId: number, datasetName: string) => {
-    if (apiKeys.length === 0) return;
-    setViewingId(datasetId);
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const data = await apiFetch<any>(
-        `/api/evaluations/tts/datasets/${datasetId}?include_signed_url=true&fetch_content=true`,
-        apiKeys[0].key,
-      );
-      const csvText = data?.csv_content;
-      if (!csvText) {
-        toast.error("No data available for this dataset");
-        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);
-
-      setViewModalData({ name: datasetName, headers, rows });
-    } catch (err: unknown) {
-      toast.error(
-        err instanceof Error ? err.message : "Failed to view dataset",
-      );
-    } finally {
-      setViewingId(null);
-    }
-  };
-
-  const handleDownloadFromModal = () => {
-    if (!viewModalData) return;
-    const csvLines = [viewModalData.headers.join(",")];
-    viewModalData.rows.forEach((row) => {
-      csvLines.push(
-        row
-          .map((cell) =>
-            cell.includes(",") || cell.includes('"') || cell.includes("\n")
-              ? `"${cell.replace(/"/g, '""')}"`
-              : cell,
-          )
-          .join(","),
-      );
-    });
-    const blob = new Blob([csvLines.join("\n")], {
-      type: "text/csv;charset=utf-8;",
-    });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${viewModalData.name}.csv`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  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={apiKeys.length > 0 ? addTextSample : undefined}
-              className="flex items-center gap-1 text-xs font-medium mt-2"
-              style={{
-                color:
-                  apiKeys.length > 0
-                    ? colors.accent.primary
-                    : colors.text.secondary,
-                cursor: apiKeys.length > 0 ? "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-3 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 overflow-auto p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h3
-              className="text-base font-semibold"
-              style={{ color: colors.text.primary }}
-            >
-              Datasets
-            </h3>
-          </div>
-
-          {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 }}
-              >
-                No datasets yet
-              </p>
-              <p className="text-xs" style={{ color: colors.text.secondary }}>
-                Create your first dataset using the form on the left
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {datasets.map((dataset) => (
-                <div
-                  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>
-              ))}
-            </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>
-
-            {/* 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>
-      )}
-    </div>
-  );
-}
-
-// ============ EVALUATIONS TAB COMPONENT ============
-interface EvaluationsTabProps {
-  leftPanelWidth: number;
-  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;
-  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;
-  apiKeys: APIKey[];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  toast: any;
-  setActiveTab: (tab: Tab) => void;
-}
-
-function EvaluationsTab({
-  leftPanelWidth,
-  evaluationName,
-  setEvaluationName,
-  datasets,
-  isLoadingDatasets,
-  selectedDatasetId,
-  setSelectedDatasetId,
-  selectedDataset,
-  selectedModel,
-  setSelectedModel,
-  isRunning,
-  handleRunEvaluation,
-  runs,
-  isLoadingRuns,
-  loadRuns,
-  selectedRunId,
-  setSelectedRunId,
-  results,
-  setResults,
-  isLoadingResults,
-  loadResults,
-  apiKeys,
-  toast,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  setActiveTab,
-}: EvaluationsTabProps) {
-  const [statusFilter, setStatusFilter] = useState<string>("all");
-  const [playingResultId, setPlayingResultId] = useState<number | null>(null);
-  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,
-    comment?: string,
-    score?: {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      [key: string]: any;
-    },
-  ) => {
-    if (apiKeys.length === 0) return;
-
-    try {
-      const payload: {
-        is_correct?: boolean | null;
-        comment?: string;
-        score?: {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          [key: string]: any;
-        };
-      } = {};
-      if (isCorrect !== undefined) payload.is_correct = isCorrect;
-      if (comment !== undefined) payload.comment = comment;
-      if (score !== undefined) payload.score = score;
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await apiFetch<any>(
-        `/api/evaluations/tts/results/${resultId}`,
-        apiKeys[0].key,
-        {
-          method: "PATCH",
-          body: JSON.stringify(payload),
-        },
-      );
-
-      setResults((prev) =>
-        prev.map((r) =>
-          r.id === resultId
-            ? {
-                ...r,
-                ...(isCorrect !== undefined ? { is_correct: isCorrect } : {}),
-                ...(comment !== undefined && { comment }),
-                ...(score !== undefined && {
-                  score: { ...(r.score || {}), ...score },
-                }),
-              }
-            : r,
-        ),
-      );
-    } catch (error) {
-      console.error("Failed to update feedback:", error);
-      toast.error("Failed to update feedback");
-    }
-  };
-
-  return (
-    <div className="flex-1 flex overflow-hidden">
-      {/* Left 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,
-          }}
-        >
-          <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>
-        </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"
-                  style={{ color: colors.text.secondary }}
-                >
-                  <svg
-                    className={`w-4 h-4 ${isLoadingRuns ? "animate-spin" : ""}`}
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                    />
-                  </svg>
-                </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"
-                          style={{
-                            backgroundColor: colors.bg.primary,
-                            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
-                            borderLeft: `3px solid ${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"
-                                  style={{ color: colors.text.primary }}
-                                >
-                                  {run.run_name}
-                                </div>
-                                {/* Error message */}
-                                {run.error_message && (
-                                  <div
-                                    className="mt-2 text-xs break-words overflow-hidden"
-                                    style={{ color: "hsl(8, 86%, 40%)" }}
-                                  >
-                                    {run.error_message}
-                                  </div>
-                                )}
-                              </div>
-                              <span
-                                className="px-2.5 py-1 rounded text-xs font-semibold uppercase tracking-wide flex-shrink-0"
-                                style={{
-                                  backgroundColor: statusColor.bg,
-                                  color: 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
-                                    ? () => loadResults(run.id)
-                                    : undefined
-                                }
-                                disabled={!isCompleted}
-                                className="px-3 py-1.5 rounded-lg text-xs font-medium border flex-shrink-0"
-                                style={{
-                                  backgroundColor: "transparent",
-                                  borderColor: colors.border,
-                                  color: isCompleted
-                                    ? colors.text.primary
-                                    : colors.text.secondary,
-                                  cursor: isCompleted
-                                    ? "pointer"
-                                    : "not-allowed",
-                                  opacity: isCompleted ? 1 : 0.5,
-                                }}
-                              >
-                                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/api/auth/google/route.ts b/app/api/auth/google/route.ts
new file mode 100644
index 0000000..7dc39ad
--- /dev/null
+++ b/app/api/auth/google/route.ts
@@ -0,0 +1,41 @@
+import { NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+/** Proxy Google login token to backend. Forwards Set-Cookie headers back to the browser. */
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+
+    if (!body.token) {
+      return NextResponse.json(
+        { success: false, error: "Missing Google credential token" },
+        { status: 400 },
+      );
+    }
+
+    const {
+      status,
+      data,
+      headers: backendHeaders,
+    } = await apiClient(request, "/api/v1/auth/google", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+
+    const response = NextResponse.json(data, { status });
+
+    const setCookie = backendHeaders.getSetCookie?.();
+    if (setCookie) {
+      setCookie.forEach((cookie: string) => {
+        response.headers.append("Set-Cookie", cookie);
+      });
+    }
+
+    return response;
+  } catch {
+    return NextResponse.json(
+      { success: false, error: "Failed to connect to backend" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/auth/logout/route.ts b/app/api/auth/logout/route.ts
new file mode 100644
index 0000000..3b5994f
--- /dev/null
+++ b/app/api/auth/logout/route.ts
@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function POST(request: NextRequest) {
+  const { status, data, headers } = await apiClient(
+    request,
+    "/api/v1/auth/logout",
+    { method: "POST" },
+  );
+
+  const res = NextResponse.json(data, { status });
+
+  const setCookies = headers.getSetCookie?.() ?? [];
+  for (const cookie of setCookies) {
+    res.headers.append("Set-Cookie", cookie);
+  }
+
+  return res;
+}
diff --git a/app/api/document/route.ts b/app/api/document/route.ts
index 5ebfa9d..fc4291c 100644
--- a/app/api/document/route.ts
+++ b/app/api/document/route.ts
@@ -51,6 +51,13 @@ export async function POST(request: NextRequest) {
         pull(controller) {
           if (offset >= totalSize) {
             controller.close();
+
+            // All bytes forwarded — notify "processing" phase before backend responds
+            writer
+              .write(
+                encoder.encode(JSON.stringify({ phase: "processing" }) + "\n"),
+              )
+              .catch(() => {});
             return;
           }
           const end = Math.min(offset + CHUNK_SIZE, totalSize);
@@ -80,10 +87,6 @@ export async function POST(request: NextRequest) {
         duplex: "half",
       });
 
-      await writer.write(
-        encoder.encode(JSON.stringify({ phase: "processing" }) + "\n"),
-      );
-
       await writer.write(
         encoder.encode(JSON.stringify({ done: true, status, data }) + "\n"),
       );
diff --git a/app/api/user-projects/[userId]/route.ts b/app/api/user-projects/[userId]/route.ts
new file mode 100644
index 0000000..b793306
--- /dev/null
+++ b/app/api/user-projects/[userId]/route.ts
@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ userId: string }> },
+) {
+  try {
+    const { userId } = await params;
+    const { searchParams } = new URL(request.url);
+    const queryString = searchParams.toString();
+
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/user-projects/${userId}${queryString ? `?${queryString}` : ""}`,
+      { method: "DELETE" },
+    );
+    return NextResponse.json(data, { status });
+  } catch {
+    return NextResponse.json(
+      { success: false, error: "Failed to connect to backend" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/user-projects/route.ts b/app/api/user-projects/route.ts
new file mode 100644
index 0000000..cfff7e0
--- /dev/null
+++ b/app/api/user-projects/route.ts
@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const queryString = searchParams.toString();
+
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/user-projects/${queryString ? `?${queryString}` : ""}`,
+    );
+    return NextResponse.json(data, { status });
+  } catch {
+    return NextResponse.json(
+      { success: false, error: "Failed to connect to backend" },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { status, data } = await apiClient(
+      request,
+      "/api/v1/user-projects/",
+      {
+        method: "POST",
+        body: JSON.stringify(body),
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch {
+    return NextResponse.json(
+      { success: false, error: "Failed to connect to backend" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/v1/auth/refresh/route.ts b/app/api/v1/auth/refresh/route.ts
new file mode 100644
index 0000000..7750261
--- /dev/null
+++ b/app/api/v1/auth/refresh/route.ts
@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function POST(request: NextRequest) {
+  const { status, data, headers } = await apiClient(
+    request,
+    "/api/v1/auth/refresh",
+    { method: "POST" },
+  );
+
+  const res = NextResponse.json(data, { status });
+
+  const setCookies = headers.getSetCookie?.() ?? [];
+  for (const cookie of setCookies) {
+    res.headers.append("Set-Cookie", cookie);
+  }
+
+  return res;
+}
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 73a8a04..c36032a 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -33,9 +33,9 @@ const variantStyles: Record<ButtonVariant, { base: string; disabled: string }> =
   };
 
 const sizeStyles: Record<ButtonSize, string> = {
-  sm: "px-3 py-1.5 text-xs",
-  md: "px-4 py-2 text-sm",
-  lg: "px-5 py-2.5 text-sm",
+  sm: "px-3 py-1.5",
+  md: "px-4 py-2",
+  lg: "px-5 py-2.5",
 };
 
 export default function Button({
@@ -52,7 +52,7 @@ export default function Button({
   return (
     <button
       disabled={disabled}
-      className={`rounded-lg 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 ${
         sizeStyles[size]
       } ${disabled ? styles.disabled : styles.base} ${
         fullWidth ? "w-full" : ""
diff --git a/app/components/ConfigCard.tsx b/app/components/ConfigCard.tsx
index 0edb838..d490c1d 100644
--- a/app/components/ConfigCard.tsx
+++ b/app/components/ConfigCard.tsx
@@ -99,7 +99,7 @@ export default function ConfigCard({
 
   return (
     <div
-      className="border rounded-lg overflow-hidden transition-all"
+      className="border rounded-lg overflow-hidden transition-all min-w-0"
       style={{
         backgroundColor: colors.bg.primary,
         borderColor: expanded ? colors.accent.primary : colors.border,
@@ -119,7 +119,7 @@ export default function ConfigCard({
         <div className="flex items-start justify-between">
           <div className="flex-1 min-w-0">
             <h3
-              className="text-base font-semibold truncate"
+              className="text-sm font-semibold truncate"
               style={{ color: colors.text.primary }}
             >
               {config.name}
diff --git a/app/components/ConfigModal.tsx b/app/components/ConfigModal.tsx
index b081300..817b24f 100644
--- a/app/components/ConfigModal.tsx
+++ b/app/components/ConfigModal.tsx
@@ -9,7 +9,12 @@ import React, { useState, useEffect } from "react";
 import { colors } from "@/app/lib/colors";
 import { EvalJob, AssistantConfig } from "./types";
 import { useAuth } from "@/app/lib/context/AuthContext";
-import { Tool } from "@/app/lib/types/configs";
+import { apiFetch } from "@/app/lib/apiClient";
+import {
+  Tool,
+  ConfigVersionPublic,
+  CompletionParams,
+} from "@/app/lib/types/configs";
 
 interface ConfigModalProps {
   isOpen: boolean;
@@ -24,7 +29,7 @@ interface ConfigVersionInfo {
   model?: string;
   instructions?: string;
   temperature?: number;
-  tools?: { type: string; [key: string]: unknown }[];
+  tools?: Tool[];
   provider?: string;
   type?: "text" | "stt" | "tts";
   knowledge_base_ids?: string[];
@@ -36,7 +41,7 @@ export default function ConfigModal({
   job,
   assistantConfig,
 }: ConfigModalProps) {
-  const { activeKey } = useAuth();
+  const { activeKey, isAuthenticated } = useAuth();
   const [configVersionInfo, setConfigVersionInfo] =
     useState<ConfigVersionInfo | null>(null);
   const [isLoadingConfig, setIsLoadingConfig] = useState(false);
@@ -49,45 +54,31 @@ export default function ConfigModal({
     }
 
     const fetchConfigVersionInfo = async () => {
+      if (!isAuthenticated) return;
+      const apiKey = activeKey?.key ?? "";
+
       setIsLoadingConfig(true);
       try {
-        const apiKey = activeKey?.key;
-        if (!apiKey) {
-          console.error("No API key found");
-          return;
-        }
-
         // Fetch config name first
-        const configResponse = await fetch(`/api/configs/${job.config_id}`, {
-          headers: { "X-API-KEY": apiKey },
-        });
-
-        if (!configResponse.ok) {
-          console.error("Failed to fetch config info");
-          return;
-        }
-
-        const configData = await configResponse.json();
+        const configData = await apiFetch<{
+          success: boolean;
+          data?: { name: string };
+        }>(`/api/configs/${job.config_id}`, apiKey);
         const configName =
           configData.success && configData.data ? configData.data.name : null;
 
         // Fetch full version details including config_blob
-        const versionResponse = await fetch(
+        const versionData = await apiFetch<{
+          success: boolean;
+          data?: ConfigVersionPublic;
+        }>(
           `/api/configs/${job.config_id}/versions/${job.config_version}`,
-          {
-            headers: { "X-API-KEY": apiKey },
-          },
+          apiKey,
         );
-
-        if (!versionResponse.ok) {
-          console.error("Failed to fetch version details");
-          return;
-        }
-
-        const versionData = await versionResponse.json();
         if (versionData.success && versionData.data) {
           const blob = versionData.data.config_blob;
-          const params = blob?.completion?.params || {};
+          const params: CompletionParams =
+            blob?.completion?.params || ({} as CompletionParams);
 
           // Extract knowledge base IDs from multiple sources
           const knowledgeBaseIds: string[] = [];
diff --git a/app/components/GatePopover.tsx b/app/components/GatePopover.tsx
new file mode 100644
index 0000000..0ed1a0b
--- /dev/null
+++ b/app/components/GatePopover.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import { Button } from "@/app/components";
+import { GatePopoverProps } from "@/app/lib/types/nav";
+
+export default function GatePopover({
+  name,
+  description,
+  anchorRect,
+  onMouseEnter,
+  onMouseLeave,
+  onLogin,
+}: GatePopoverProps) {
+  return createPortal(
+    <div
+      className="fixed z-9999 w-72"
+      style={{
+        top: anchorRect.top - 40,
+        left: anchorRect.right + 10,
+      }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <div className="bg-white rounded-2xl shadow-2xl border border-border overflow-hidden">
+        {/* Gradient banner */}
+        <div
+          className="h-24"
+          style={{
+            background:
+              "linear-gradient(135deg, #dbeafe 0%, #e0e7ff 30%, #c7d2fe 50%, #ddd6fe 70%, #fce7f3 100%)",
+          }}
+        />
+
+        {/* Content */}
+        <div className="px-4 pt-3 pb-4">
+          <p className="text-[15px] font-semibold text-text-primary leading-snug">
+            {name}
+          </p>
+          <p className="text-[13px] text-text-secondary mt-1.5 leading-relaxed">
+            {description}
+          </p>
+
+          <div className="mt-4">
+            <Button size="sm" onClick={onLogin}>
+              Log in
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/app/components/PageHeader.tsx b/app/components/PageHeader.tsx
index 2482308..1b56118 100644
--- a/app/components/PageHeader.tsx
+++ b/app/components/PageHeader.tsx
@@ -1,9 +1,12 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { colors } from "@/app/lib/colors";
 import { useApp } from "@/app/lib/context/AppContext";
+import { useAuth } from "@/app/lib/context/AuthContext";
 import { MenuIcon } from "@/app/components/icons";
+import { LoginModal } from "@/app/components/auth";
+import { Button } from "@/app/components";
 
 interface PageHeaderProps {
   title?: string;
@@ -21,48 +24,64 @@ export default function PageHeader({
   hidden = false,
 }: PageHeaderProps) {
   const { sidebarCollapsed, setSidebarCollapsed } = useApp();
+  const { isAuthenticated } = useAuth();
+  const [showLoginModal, setShowLoginModal] = useState(false);
 
   if (hidden) return null;
 
   return (
-    <div
-      className="border-b px-4 py-3 flex items-center justify-between shrink-0"
-      style={{
-        backgroundColor: colors.bg.primary,
-        borderColor: colors.border,
-      }}
-    >
-      <div className="flex items-center gap-3">
-        <button
-          onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-          className="p-1.5 rounded-md"
-          style={{ color: colors.text.secondary }}
-          aria-label="Toggle sidebar"
-        >
-          <MenuIcon className="w-5 h-5" />
-        </button>
-        {children ?? (
-          <div>
-            {title && (
-              <h1
-                className="text-base font-semibold"
-                style={{
-                  color: colors.text.primary,
-                  letterSpacing: "-0.01em",
-                }}
-              >
-                {title}
-              </h1>
-            )}
-            {subtitle && (
-              <p className="text-xs" style={{ color: colors.text.secondary }}>
-                {subtitle}
-              </p>
-            )}
-          </div>
-        )}
+    <>
+      <div
+        className="border-b px-4 py-3 flex items-center justify-between shrink-0"
+        style={{
+          backgroundColor: colors.bg.primary,
+          borderColor: colors.border,
+        }}
+      >
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+            className="p-1.5 rounded-md"
+            style={{ color: colors.text.secondary }}
+            aria-label="Toggle sidebar"
+          >
+            <MenuIcon className="w-5 h-5" />
+          </button>
+          {children ?? (
+            <div>
+              {title && (
+                <h1
+                  className="text-base font-semibold"
+                  style={{
+                    color: colors.text.primary,
+                    letterSpacing: "-0.01em",
+                  }}
+                >
+                  {title}
+                </h1>
+              )}
+              {subtitle && (
+                <p className="text-xs" style={{ color: colors.text.secondary }}>
+                  {subtitle}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {actions}
+          {!isAuthenticated && (
+            <Button size="sm" onClick={() => setShowLoginModal(true)}>
+              Log in
+            </Button>
+          )}
+        </div>
       </div>
-      {actions && <div className="flex items-center gap-2">{actions}</div>}
-    </div>
+
+      <LoginModal
+        open={showLoginModal}
+        onClose={() => setShowLoginModal(false)}
+      />
+    </>
   );
 }
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 359c320..e97d71c 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -5,48 +5,42 @@
 
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter } from "next/navigation";
+import Image from "next/image";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import {
   ClipboardIcon,
   DocumentFileIcon,
   BookOpenIcon,
   GearIcon,
-  SlidersIcon,
-  KeyIcon,
   ChevronRightIcon,
 } from "@/app/components/icons";
+import { LoginModal } from "@/app/components/auth";
+import { Branding, UserMenuPopover } from "@/app/components/user-menu";
+import GatePopover from "@/app/components/GatePopover";
+import { NAV_ITEMS } from "@/app/lib/navConfig";
+import { MenuItem, SidebarProps } from "@/app/lib/types/nav";
 
-interface SubMenuItem {
-  name: string;
-  route?: string;
-  comingSoon?: boolean;
-  submenu?: SubMenuItem[];
-}
-
-interface MenuItem {
-  name: string;
-  route?: string;
-  icon: React.ReactNode;
-  submenu?: SubMenuItem[];
-}
-
-interface SidebarProps {
-  collapsed: boolean;
-  activeRoute?: string;
-}
+/** Routes that are always accessible without auth */
+const PUBLIC_ROUTES = new Set(["/evaluations"]);
 
 export default function Sidebar({
   collapsed,
   activeRoute = "/evaluations",
 }: SidebarProps) {
   const router = useRouter();
-  const { currentUser } = useAuth();
+  const { currentUser, googleProfile, isAuthenticated, logout } = useAuth();
   const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({
     Evaluations: true,
     Configurations: false,
   });
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const [showUserMenu, setShowUserMenu] = useState(false);
+  const userMenuRef = useRef<HTMLDivElement>(null);
+  const [hoveredGate, setHoveredGate] = useState<string | null>(null);
+  const [gateRect, setGateRect] = useState<DOMRect | null>(null);
+  const gateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     const saved = localStorage.getItem("sidebar-expanded-menus");
@@ -59,76 +53,104 @@ export default function Sidebar({
     }
   }, []);
 
+  // Close user menu on click outside
+  useEffect(() => {
+    if (!showUserMenu) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        userMenuRef.current &&
+        !userMenuRef.current.contains(e.target as Node)
+      ) {
+        setShowUserMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showUserMenu]);
+
   const toggleMenu = (menuName: string) => {
     const newState = { ...expandedMenus, [menuName]: !expandedMenus[menuName] };
     setExpandedMenus(newState);
     localStorage.setItem("sidebar-expanded-menus", JSON.stringify(newState));
   };
 
-  const navItems: MenuItem[] = [
-    {
-      name: "Evaluations",
-      icon: <ClipboardIcon />,
-      submenu: [
-        { name: "Text", route: "/evaluations" },
-        { name: "Speech-to-Text", route: "/speech-to-text" },
-        { name: "Text-to-Speech", route: "/text-to-speech" },
-      ],
-    },
-    {
-      name: "Documents",
-      route: "/document",
-      icon: <DocumentFileIcon />,
-    },
-    {
-      name: "Knowledge Base",
-      route: "/knowledge-base",
-      icon: <BookOpenIcon />,
-    },
-    {
-      name: "Configurations",
-      icon: <GearIcon className="w-5 h-5" />,
-      submenu: [
-        { name: "Library", route: "/configurations" },
-        { name: "Prompt Editor", route: "/configurations/prompt-editor" },
-      ],
-    },
-    ...(currentUser?.is_superuser
-      ? [
-          {
-            name: "Settings",
-            icon: <SlidersIcon />,
-            submenu: [
-              { name: "Credentials", route: "/settings/credentials" },
-              { name: "Onboarding", route: "/settings/onboarding" },
-            ],
-          },
-        ]
-      : []),
-  ];
+  const handleGateEnter = useCallback((name: string, el: HTMLElement) => {
+    if (gateTimeoutRef.current) clearTimeout(gateTimeoutRef.current);
+    setHoveredGate(name);
+    setGateRect(el.getBoundingClientRect());
+  }, []);
 
-  const bottomItem: MenuItem = {
-    name: "Keystore",
-    route: "/keystore",
-    icon: <KeyIcon className="w-5 h-5" />,
+  const handleGateLeave = useCallback(() => {
+    gateTimeoutRef.current = setTimeout(() => {
+      setHoveredGate(null);
+      setGateRect(null);
+    }, 200);
+  }, []);
+
+  const handleGatePopoverEnter = useCallback(() => {
+    if (gateTimeoutRef.current) clearTimeout(gateTimeoutRef.current);
+  }, []);
+
+  const isRouteGated = (route?: string): boolean => {
+    if (isAuthenticated) return false;
+    if (!route) return false;
+    return !PUBLIC_ROUTES.has(route);
+  };
+
+  const isItemGated = (item: MenuItem): boolean => {
+    if (isAuthenticated) return false;
+    if (item.route) return isRouteGated(item.route);
+    if (item.submenu) {
+      return item.submenu.every((sub) => isRouteGated(sub.route));
+    }
+    return false;
+  };
+
+  const iconMap: Record<string, React.ReactNode> = {
+    clipboard: <ClipboardIcon />,
+    document: <DocumentFileIcon />,
+    book: <BookOpenIcon />,
+    gear: <GearIcon className="w-5 h-5" />,
+  };
+
+  const navItems: MenuItem[] = NAV_ITEMS.filter(
+    (item) => !item.superuserOnly || currentUser?.is_superuser,
+  ).map((item) => ({
+    name: item.name,
+    route: item.route,
+    icon: iconMap[item.icon],
+    submenu: item.submenu,
+    gateDescription: item.gateDescription,
+  }));
+
+  const getGateDescription = (name: string): string => {
+    for (const item of navItems) {
+      if (item.name === name)
+        return (
+          item.gateDescription || `Log in to access ${name.toLowerCase()}.`
+        );
+      if (item.submenu) {
+        for (const sub of item.submenu) {
+          if (sub.name === name)
+            return `Log in to access ${name.toLowerCase()}.`;
+        }
+      }
+    }
+    return "Log in to access this feature.";
   };
 
   return (
     <aside
-      className={`border-r border-border transition-all duration-300 ease-in-out h-full shrink-0 flex flex-col bg-bg-secondary overflow-hidden ${collapsed ? "w-0" : "w-60"}`}
+      className={`border-r border-border transition-all duration-300 ease-in-out h-full shrink-0 flex flex-col bg-bg-secondary ${collapsed ? "w-0 overflow-hidden" : "w-60"}`}
     >
-      <div className="px-5 py-[13px] border-b border-border">
-        <h2 className="text-sm font-semibold text-text-primary tracking-tight">
-          Kaapi Konsole
-        </h2>
-        <p className="text-xs mt-0.5 text-text-secondary">Tech4Dev</p>
-      </div>
+      <Branding />
 
       <nav className="p-3 space-y-1 flex-1 overflow-y-auto w-60">
         {navItems.map((item) => {
           const hasSubmenu = item.submenu && item.submenu.length > 0;
           const isExpanded = expandedMenus[item.name];
           const isActive = activeRoute === item.route;
+          const gated = isItemGated(item);
 
           const hasActiveChild =
             hasSubmenu &&
@@ -142,7 +164,12 @@ export default function Sidebar({
           return (
             <div key={item.name}>
               <button
+                onMouseEnter={(e) =>
+                  gated && handleGateEnter(item.name, e.currentTarget)
+                }
+                onMouseLeave={() => gated && handleGateLeave()}
                 onClick={() => {
+                  if (gated) return;
                   if (hasSubmenu) {
                     toggleMenu(item.name);
                   } else if (item.route) {
@@ -152,7 +179,7 @@ export default function Sidebar({
                 className={`w-full text-left px-3 py-2 rounded-lg text-[14px] flex items-center gap-2.5 transition-all duration-150 border ${
                   isActive
                     ? "bg-neutral-100 text-text-primary font-semibold border-border"
-                    : isActive || hasActiveChild
+                    : hasActiveChild
                       ? "bg-transparent text-text-primary font-semibold border-transparent"
                       : "bg-transparent text-black font-medium border-transparent hover:bg-neutral-100"
                 }`}
@@ -174,13 +201,14 @@ export default function Sidebar({
                 )}
               </button>
 
-              {hasSubmenu && isExpanded && (
+              {hasSubmenu && isExpanded && !gated && (
                 <div className="ml-3 mt-1 space-y-0.5 overflow-hidden border-l-2 border-border pl-3 animate-[slideDown_0.15s_ease-out]">
                   {item.submenu?.map((subItem) => {
                     const hasNestedSubmenu =
                       subItem.submenu && subItem.submenu.length > 0;
                     const isNestedExpanded = expandedMenus[subItem.name];
                     const isSubActive = activeRoute === subItem.route;
+                    const subGated = isRouteGated(subItem.route);
                     const hasActiveNestedChild =
                       hasNestedSubmenu &&
                       subItem.submenu?.some(
@@ -190,7 +218,13 @@ export default function Sidebar({
                     return (
                       <div key={subItem.name}>
                         <button
+                          onMouseEnter={(e) =>
+                            subGated &&
+                            handleGateEnter(subItem.name, e.currentTarget)
+                          }
+                          onMouseLeave={() => subGated && handleGateLeave()}
                           onClick={() => {
+                            if (subGated) return;
                             if (hasNestedSubmenu) {
                               toggleMenu(subItem.name);
                             } else if (subItem.route) {
@@ -200,7 +234,7 @@ export default function Sidebar({
                           className={`w-full text-left px-3 py-1.5 rounded-md text-[13px] flex items-center justify-between gap-2 transition-all duration-150 border ${
                             isSubActive
                               ? "bg-neutral-100 text-text-primary font-medium border-border"
-                              : isSubActive || hasActiveNestedChild
+                              : hasActiveNestedChild
                                 ? "bg-transparent text-text-primary font-medium border-transparent"
                                 : "bg-transparent text-black font-normal border-transparent hover:bg-neutral-100"
                           }`}
@@ -259,25 +293,93 @@ export default function Sidebar({
         })}
       </nav>
 
-      <div className="px-3 py-[11px] border-t border-border w-60">
-        <button
-          onClick={() => router.push(bottomItem.route!)}
-          className={`w-full text-left px-3 py-2 rounded-lg text-sm flex items-center gap-2.5 transition-all duration-150 border ${
-            activeRoute === bottomItem.route
-              ? "bg-neutral-100 text-text-primary font-semibold border-border"
-              : "bg-transparent text-text-secondary font-medium border-transparent hover:bg-neutral-100 hover:text-text-primary"
-          }`}
-        >
-          <span
-            className={
-              activeRoute === bottomItem.route ? "opacity-100" : "opacity-70"
-            }
+      <div className="w-60">
+        {isAuthenticated && (currentUser || googleProfile) ? (
+          <div
+            className="px-3 pb-3 pt-1 border-t border-border relative"
+            ref={userMenuRef}
           >
-            {bottomItem.icon}
-          </span>
-          {bottomItem.name}
-        </button>
+            {showUserMenu && (
+              <UserMenuPopover
+                currentUser={currentUser}
+                googleProfile={googleProfile}
+                onClose={() => setShowUserMenu(false)}
+                onLogout={logout}
+              />
+            )}
+
+            <button
+              onClick={() => setShowUserMenu((prev) => !prev)}
+              className="w-full flex items-center gap-3 px-2 py-2 rounded-lg cursor-pointer hover:bg-neutral-100 transition-colors"
+            >
+              {googleProfile?.picture ? (
+                <Image
+                  src={googleProfile.picture}
+                  alt={googleProfile.name}
+                  width={32}
+                  height={32}
+                  className="rounded-full shrink-0"
+                  referrerPolicy="no-referrer"
+                />
+              ) : (
+                <div className="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center shrink-0">
+                  <span className="text-xs font-semibold text-white">
+                    {(currentUser?.full_name || currentUser?.email || "U")
+                      .charAt(0)
+                      .toUpperCase()}
+                  </span>
+                </div>
+              )}
+              <div className="flex-1 min-w-0 text-left">
+                <p className="text-sm font-medium text-text-primary truncate">
+                  {googleProfile?.name ||
+                    currentUser?.full_name ||
+                    currentUser?.email}
+                </p>
+                <p className="text-[11px] text-text-secondary truncate">
+                  {currentUser?.email}
+                </p>
+              </div>
+            </button>
+          </div>
+        ) : !isAuthenticated ? (
+          <div className="px-4 py-4 w-60 border-t border-border">
+            <div className="rounded-lg bg-neutral-50 py-3">
+              <p className="text-sm font-bold text-text-primary">
+                Get full access
+              </p>
+              <p className="text-xs text-text-secondary mt-1 leading-relaxed">
+                Log in to run evaluations, manage configs, and upload documents.
+              </p>
+              <button
+                onClick={() => setShowLoginModal(true)}
+                className="mt-3 w-full py-2 rounded-full border border-border bg-white text-sm font-medium text-text-primary hover:bg-neutral-50 transition-colors"
+              >
+                Log in
+              </button>
+            </div>
+          </div>
+        ) : null}
       </div>
+
+      {hoveredGate && gateRect && (
+        <GatePopover
+          name={hoveredGate}
+          description={getGateDescription(hoveredGate)}
+          anchorRect={gateRect}
+          onMouseEnter={handleGatePopoverEnter}
+          onMouseLeave={handleGateLeave}
+          onLogin={() => {
+            setHoveredGate(null);
+            setShowLoginModal(true);
+          }}
+        />
+      )}
+
+      <LoginModal
+        open={showLoginModal}
+        onClose={() => setShowLoginModal(false)}
+      />
     </aside>
   );
 }
diff --git a/app/components/SimplifiedConfigEditor.tsx b/app/components/SimplifiedConfigEditor.tsx
index aace472..a65fbf6 100644
--- a/app/components/SimplifiedConfigEditor.tsx
+++ b/app/components/SimplifiedConfigEditor.tsx
@@ -14,6 +14,8 @@
 import { useState, useEffect } from "react";
 import ConfigDrawer from "./ConfigDrawer";
 import { useToast } from "./Toast";
+import { apiFetch } from "@/app/lib/apiClient";
+import { useAuth } from "@/app/lib/context/AuthContext";
 import {
   ConfigPublic,
   ConfigVersionPublic,
@@ -24,6 +26,7 @@ import {
   ConfigListResponse,
   ConfigWithVersionResponse,
   ConfigVersionListResponse,
+  ConfigVersionResponse,
 } from "@/app/lib/types/configs";
 import { colors } from "../lib/colors";
 
@@ -80,20 +83,8 @@ export default function SimplifiedConfigEditor({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(false);
   const [commitMessage, setCommitMessage] = useState<string>("");
-
-  // Get API key from localStorage
-  const getApiKey = (): string | null => {
-    try {
-      const stored = localStorage.getItem("kaapi_api_keys");
-      if (stored) {
-        const keys = JSON.parse(stored);
-        return keys.length > 0 ? keys[0].key : null;
-      }
-    } catch (e) {
-      console.error("Failed to get API key:", e);
-    }
-    return null;
-  };
+  const { activeKey, isAuthenticated } = useAuth();
+  const apiKeyStr = activeKey?.key ?? "";
 
   // Flatten config versions for UI
   const flattenConfigVersion = (
@@ -143,21 +134,15 @@ export default function SimplifiedConfigEditor({
   useEffect(() => {
     const fetchConfigs = async () => {
       setIsLoading(true);
-      const apiKey = getApiKey();
-      if (!apiKey) {
-        console.warn(
-          "No API key found. Please add an API key in the Keystore.",
-        );
+      if (!isAuthenticated) {
         setIsLoading(false);
         return;
       }
+      const apiKey = apiKeyStr;
 
       try {
         // Fetch all configs
-        const response = await fetch("/api/configs", {
-          headers: { "X-API-KEY": apiKey },
-        });
-        const data: ConfigListResponse = await response.json();
+        const data = await apiFetch<ConfigListResponse>("/api/configs", apiKey);
 
         if (!data.success || !data.data) {
           console.error("Failed to fetch configs:", data.error);
@@ -169,24 +154,19 @@ export default function SimplifiedConfigEditor({
         const allVersions: SavedConfig[] = [];
         for (const config of data.data) {
           try {
-            const versionsResponse = await fetch(
+            const versionsData = await apiFetch<ConfigVersionListResponse>(
               `/api/configs/${config.id}/versions`,
-              {
-                headers: { "X-API-KEY": apiKey },
-              },
+              apiKey,
             );
-            const versionsData: ConfigVersionListResponse =
-              await versionsResponse.json();
 
             if (versionsData.success && versionsData.data) {
               // Fetch full version details for each version
               for (const versionItem of versionsData.data) {
                 try {
-                  const versionResponse = await fetch(
+                  const versionData = await apiFetch<ConfigVersionResponse>(
                     `/api/configs/${config.id}/versions/${versionItem.version}`,
-                    { headers: { "X-API-KEY": apiKey } },
+                    apiKey,
                   );
-                  const versionData = await versionResponse.json();
 
                   if (versionData.success && versionData.data) {
                     allVersions.push(
@@ -260,11 +240,11 @@ export default function SimplifiedConfigEditor({
       return;
     }
 
-    const apiKey = getApiKey();
-    if (!apiKey) {
-      toast.error("No API key found. Please add an API key in the Keystore.");
+    if (!isAuthenticated) {
+      toast.error("Please log in to save configurations.");
       return;
     }
+    const apiKey = apiKeyStr;
 
     try {
       // Build config blob
@@ -312,20 +292,15 @@ export default function SimplifiedConfigEditor({
             `Updated to ${modelName} with temperature ${temperature}`,
         };
 
-        const response = await fetch(
+        const data = await apiFetch<ConfigVersionResponse>(
           `/api/configs/${existingConfig.config_id}/versions`,
+          apiKey,
           {
             method: "POST",
-            headers: {
-              "X-API-KEY": apiKey,
-              "Content-Type": "application/json",
-            },
             body: JSON.stringify(versionCreate),
           },
         );
 
-        const data = await response.json();
-
         if (!data.success) {
           toast.error(
             `Failed to create version: ${data.error || "Unknown error"}`,
@@ -345,16 +320,14 @@ export default function SimplifiedConfigEditor({
           commit_message: commitMessage.trim() || "Initial version",
         };
 
-        const response = await fetch("/api/configs", {
-          method: "POST",
-          headers: {
-            "X-API-KEY": apiKey,
-            "Content-Type": "application/json",
+        const data = await apiFetch<ConfigWithVersionResponse>(
+          "/api/configs",
+          apiKey,
+          {
+            method: "POST",
+            body: JSON.stringify(configCreate),
           },
-          body: JSON.stringify(configCreate),
-        });
-
-        const data: ConfigWithVersionResponse = await response.json();
+        );
 
         if (!data.success || !data.data) {
           toast.error(
@@ -367,32 +340,27 @@ export default function SimplifiedConfigEditor({
       }
 
       // Refresh configs list
-      const response = await fetch("/api/configs", {
-        headers: { "X-API-KEY": apiKey },
-      });
-      const data: ConfigListResponse = await response.json();
+      const refreshData = await apiFetch<ConfigListResponse>(
+        "/api/configs",
+        apiKey,
+      );
 
-      if (data.success && data.data) {
+      if (refreshData.success && refreshData.data) {
         const allVersions: SavedConfig[] = [];
-        for (const config of data.data) {
+        for (const config of refreshData.data) {
           try {
-            const versionsResponse = await fetch(
+            const versionsData = await apiFetch<ConfigVersionListResponse>(
               `/api/configs/${config.id}/versions`,
-              {
-                headers: { "X-API-KEY": apiKey },
-              },
+              apiKey,
             );
-            const versionsData: ConfigVersionListResponse =
-              await versionsResponse.json();
 
             if (versionsData.success && versionsData.data) {
               for (const versionItem of versionsData.data) {
                 try {
-                  const versionResponse = await fetch(
+                  const versionData = await apiFetch<ConfigVersionResponse>(
                     `/api/configs/${config.id}/versions/${versionItem.version}`,
-                    { headers: { "X-API-KEY": apiKey } },
+                    apiKey,
                   );
-                  const versionData = await versionResponse.json();
 
                   if (versionData.success && versionData.data) {
                     allVersions.push(
diff --git a/app/components/auth/FeatureGateModal.tsx b/app/components/auth/FeatureGateModal.tsx
new file mode 100644
index 0000000..2e0b821
--- /dev/null
+++ b/app/components/auth/FeatureGateModal.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { Button } from "@/app/components";
+
+interface FeatureGateModalProps {
+  feature: string;
+  description: string;
+  onLogin: () => void;
+}
+
+export default function FeatureGateModal({
+  feature,
+  description,
+  onLogin,
+}: FeatureGateModalProps) {
+  return (
+    <div className="flex-1 flex items-center justify-center bg-bg-secondary">
+      <div className="max-w-sm text-center px-6">
+        <h3 className="text-lg font-semibold text-text-primary">{feature}</h3>
+        <p className="text-sm text-text-secondary mt-2 leading-relaxed">
+          {description}
+        </p>
+        <div className="mt-6">
+          <Button size="lg" onClick={onLogin}>
+            Log in
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/auth/LoginModal.tsx b/app/components/auth/LoginModal.tsx
new file mode 100644
index 0000000..37c5b6d
--- /dev/null
+++ b/app/components/auth/LoginModal.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { GoogleLogin, CredentialResponse } from "@react-oauth/google";
+import Modal from "@/app/components/Modal";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { GoogleAuthResponse } from "@/app/lib/types/auth";
+import { useToast } from "@/app/components/Toast";
+import { apiFetch } from "@/app/lib/apiClient";
+
+interface LoginModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function LoginModal({ open, onClose }: LoginModalProps) {
+  const router = useRouter();
+  const { loginWithGoogle } = useAuth();
+  const toast = useToast();
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+
+  const handleGoogleSuccess = async (
+    credentialResponse: CredentialResponse,
+  ) => {
+    const token = credentialResponse.credential;
+    if (!token) {
+      toast.error("No credential received from Google.");
+      return;
+    }
+
+    setIsLoggingIn(true);
+
+    try {
+      const res = await apiFetch<GoogleAuthResponse>("/api/auth/google", "", {
+        method: "POST",
+        body: JSON.stringify({ token }),
+      });
+
+      const { access_token, user, google_profile } = res.data;
+      loginWithGoogle(access_token, user, google_profile);
+      onClose();
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to connect to server.",
+      );
+    } finally {
+      setIsLoggingIn(false);
+    }
+  };
+
+  return (
+    <Modal open={open} onClose={onClose} maxWidth="max-w-md">
+      <div className="px-6 pb-6 text-center">
+        <h2 className="text-2xl font-medium text-text-primary">
+          Log in or connect
+        </h2>
+        <p className="text-base text-text-secondary mt-2">
+          Sign in to access all features including evaluations, configurations,
+          and more.
+        </p>
+      </div>
+
+      <div className="px-6 pb-8 space-y-4">
+        <div className="flex justify-center">
+          {isLoggingIn ? (
+            <div className="w-full flex items-center justify-center py-3.5 rounded-full border border-border text-sm text-text-secondary">
+              Signing in...
+            </div>
+          ) : (
+            <GoogleLogin
+              type="standard"
+              onSuccess={handleGoogleSuccess}
+              onError={() => toast.error("Google login failed.")}
+              width="400"
+              shape="pill"
+              text="continue_with"
+              size="large"
+              logo_alignment="center"
+            />
+          )}
+        </div>
+
+        <p className="text-center text-[13px] text-text-secondary">
+          Want to use an X-API key instead?{" "}
+          <button
+            onClick={() => {
+              onClose();
+              router.push("/keystore");
+            }}
+            className="text-accent-primary hover:underline font-medium cursor-pointer"
+          >
+            Go to Keystore
+          </button>
+        </p>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/auth/ProtectedPage.tsx b/app/components/auth/ProtectedPage.tsx
new file mode 100644
index 0000000..73b5c1c
--- /dev/null
+++ b/app/components/auth/ProtectedPage.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useState, ReactNode } from "react";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { FeatureGateModal, LoginModal } from "@/app/components/auth";
+
+interface ProtectedPageProps {
+  feature: string;
+  description: string;
+  children: ReactNode;
+}
+
+export default function ProtectedPage({
+  feature,
+  description,
+  children,
+}: ProtectedPageProps) {
+  const { isAuthenticated } = useAuth();
+  const [showLoginModal, setShowLoginModal] = useState(false);
+
+  if (!isAuthenticated) {
+    return (
+      <>
+        <FeatureGateModal
+          feature={feature}
+          description={description}
+          onLogin={() => setShowLoginModal(true)}
+        />
+        <LoginModal
+          open={showLoginModal}
+          onClose={() => setShowLoginModal(false)}
+        />
+      </>
+    );
+  }
+
+  return <>{children}</>;
+}
diff --git a/app/components/auth/index.ts b/app/components/auth/index.ts
new file mode 100644
index 0000000..366a852
--- /dev/null
+++ b/app/components/auth/index.ts
@@ -0,0 +1,3 @@
+export { default as LoginModal } from "./LoginModal";
+export { default as FeatureGateModal } from "./FeatureGateModal";
+export { default as ProtectedPage } from "./ProtectedPage";
diff --git a/app/components/document/DocumentListing.tsx b/app/components/document/DocumentListing.tsx
index 0b77130..edfe30a 100644
--- a/app/components/document/DocumentListing.tsx
+++ b/app/components/document/DocumentListing.tsx
@@ -1,14 +1,14 @@
 "use client";
 
-import { APIKey } from "@/app/lib/types/credentials";
 import { formatDate } from "@/app/components/utils";
 import { Document } from "@/app/lib/types/document";
+import { useAuth } from "@/app/lib/context/AuthContext";
 import {
   RefreshIcon,
-  KeyIcon,
   DocumentFileIcon,
   TrashIcon,
 } from "@/app/components/icons";
+import { Button } from "@/app/components";
 
 interface DocumentListingProps {
   documents: Document[];
@@ -19,7 +19,6 @@ interface DocumentListingProps {
   isLoading: boolean;
   isLoadingMore: boolean;
   error: string | null;
-  apiKey: APIKey | null;
   scrollRef: React.RefObject<HTMLDivElement | null>;
 }
 
@@ -32,9 +31,9 @@ export function DocumentListing({
   isLoading,
   isLoadingMore,
   error,
-  apiKey,
   scrollRef,
 }: DocumentListingProps) {
+  const { isAuthenticated } = useAuth();
   return (
     <div className="h-full flex flex-col">
       <div className="px-4 py-2.5 border-b bg-[hsl(0,0%,100%)] border-[hsl(0,0%,85%)]">
@@ -42,12 +41,9 @@ export function DocumentListing({
           <h2 className="text-lg font-semibold text-[hsl(330,3%,19%)]">
             Your Documents
           </h2>
-          <button
-            onClick={onUploadNew}
-            className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover cursor-pointer"
-          >
+          <Button size="sm" onClick={onUploadNew}>
             + Upload
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -60,21 +56,12 @@ export function DocumentListing({
             <RefreshIcon className="w-12 h-12 mx-auto mb-4 animate-spin" />
             <p className="text-sm">Loading documents...</p>
           </div>
-        ) : !apiKey ? (
+        ) : !isAuthenticated ? (
           <div className="text-center py-12 text-[hsl(330,3%,49%)]">
-            <KeyIcon className="mx-auto mb-4" />
             <p className="font-medium mb-2 text-[hsl(330,3%,19%)]">
-              No API key found
+              Login required
             </p>
-            <p className="text-sm mb-4">
-              Please add an API key in the Keystore
-            </p>
-            <a
-              href="/keystore"
-              className="inline-block px-6 py-2 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white"
-            >
-              Go to Keystore
-            </a>
+            <p className="text-sm">Please log in to manage documents</p>
           </div>
         ) : error ? (
           <div className="border rounded-lg p-6 bg-[hsl(8,86%,95%)] border-[hsl(8,86%,80%)]">
@@ -91,12 +78,7 @@ export function DocumentListing({
             <p className="text-sm mb-4">
               Upload your first document to get started
             </p>
-            <button
-              onClick={onUploadNew}
-              className="px-6 py-2 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover"
-            >
-              Upload Your First Document
-            </button>
+            <Button onClick={onUploadNew}>Upload Your First Document</Button>
           </div>
         ) : (
           <div className="space-y-2">
diff --git a/app/components/document/DocumentPreview.tsx b/app/components/document/DocumentPreview.tsx
index d13f2e3..408ee6e 100644
--- a/app/components/document/DocumentPreview.tsx
+++ b/app/components/document/DocumentPreview.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import Image from "next/image";
 import { formatDate } from "@/app/components/utils";
 import { Document } from "@/app/lib/types/document";
 import {
@@ -111,7 +112,7 @@ export function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
                 href={document.signed_url || document.object_store_url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="shrink-0 px-4 py-1.5 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover"
+                className="shrink-0 px-4 py-1.5 text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover rounded-full"
               >
                 Download
               </a>
@@ -121,7 +122,7 @@ export function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
                 download={document.fname}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="shrink-0 px-4 py-1.5 rounded-md text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover"
+                className="shrink-0 px-4 py-1.5 text-sm font-medium transition-colors bg-[#171717] text-white hover:bg-accent-hover rounded-full"
               >
                 Download
               </a>
@@ -148,14 +149,17 @@ export function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
                     <p className="text-sm">Failed to load image preview</p>
                   </div>
                 ) : (
-                  <div className="flex items-center justify-center p-6 bg-[repeating-conic-gradient(hsl(0,0%,92%)_0%_25%,transparent_0%_50%)] bg-size-[16px_16px]">
-                    <img
-                      src={document.signed_url}
-                      alt={document.fname}
-                      className="max-w-full h-auto rounded shadow-sm"
-                      onError={() => setImageLoadError(true)}
-                    />
-                  </div>
+                  <Image
+                    src={document.signed_url}
+                    alt={document.fname}
+                    width={800}
+                    height={600}
+                    className="max-w-full h-auto rounded"
+                    unoptimized
+                    onError={() => {
+                      setImageLoadError(true);
+                    }}
+                  />
                 )
               ) : mimeType === "application/pdf" ? (
                 <iframe
diff --git a/app/components/evaluations/DatasetsTab.tsx b/app/components/evaluations/DatasetsTab.tsx
index f25ae5e..1e1f2f4 100644
--- a/app/components/evaluations/DatasetsTab.tsx
+++ b/app/components/evaluations/DatasetsTab.tsx
@@ -2,13 +2,12 @@
 
 import { useState, useEffect, useRef } from "react";
 import { colors } from "@/app/lib/colors";
-import { APIKey } from "@/app/lib/types/credentials";
-import { Dataset } from "@/app/(main)/datasets/page";
+import { Dataset } from "@/app/lib/types/dataset";
 import { useToast } from "@/app/components/Toast";
+import { useAuth } from "@/app/lib/context/AuthContext";
 import { apiFetch } from "@/app/lib/apiClient";
 import EvalDatasetDescription from "./EvalDatasetDescription";
 import Loader from "@/app/components/Loader";
-
 export interface DatasetsTabProps {
   leftPanelWidth: number;
   datasetName: string;
@@ -25,7 +24,7 @@ export interface DatasetsTabProps {
   resetForm: () => void;
   storedDatasets: Dataset[];
   isDatasetsLoading: boolean;
-  activeKey: APIKey;
+  apiKey: string;
   loadStoredDatasets: () => void;
   toast: ReturnType<typeof useToast>;
 }
@@ -46,10 +45,11 @@ export default function DatasetsTab({
   resetForm,
   storedDatasets,
   isDatasetsLoading,
-  activeKey,
+  apiKey,
   loadStoredDatasets,
   toast,
 }: DatasetsTabProps) {
+  const { isAuthenticated } = useAuth();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [deletingId, setDeletingId] = useState<number | null>(null);
@@ -72,18 +72,19 @@ export default function DatasetsTab({
   }, [showDuplicationInfo]);
 
   const handleDeleteDataset = async (datasetId: number) => {
-    if (!activeKey?.key) return;
+    if (!isAuthenticated) return;
 
     setDeletingId(datasetId);
     try {
-      await apiFetch(`/api/evaluations/datasets/${datasetId}`, activeKey.key, {
+      await apiFetch(`/api/evaluations/datasets/${datasetId}`, apiKey, {
         method: "DELETE",
       });
       toast.success("Dataset deleted");
       loadStoredDatasets();
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      toast.error(err.message || "Failed to delete dataset");
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to delete dataset",
+      );
     } finally {
       setDeletingId(null);
     }
@@ -99,7 +100,7 @@ export default function DatasetsTab({
   } | null>(null);
 
   const handleViewDataset = async (datasetId: number, datasetName: string) => {
-    if (!activeKey?.key) return;
+    if (!isAuthenticated) return;
 
     setViewingId(datasetId);
     try {
@@ -109,7 +110,7 @@ export default function DatasetsTab({
         csv_content?: string;
       }>(
         `/api/evaluations/datasets/${datasetId}?include_signed_url=true&fetch_content=true`,
-        activeKey.key,
+        apiKey,
       );
       const signedUrl = data?.data?.signed_url || data?.signed_url;
       const csvText = data?.csv_content;
@@ -485,7 +486,7 @@ export default function DatasetsTab({
 
         {/* Bottom Action Bar */}
         <div
-          className="flex-shrink-0 border-t px-4 py-3 flex items-center justify-end gap-3"
+          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,
diff --git a/app/components/evaluations/EvaluationsTab.tsx b/app/components/evaluations/EvaluationsTab.tsx
index 9a57448..3fce988 100644
--- a/app/components/evaluations/EvaluationsTab.tsx
+++ b/app/components/evaluations/EvaluationsTab.tsx
@@ -1,21 +1,21 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import { apiFetch } from "@/app/lib/apiClient";
 import { colors } from "@/app/lib/colors";
-import { Dataset } from "@/app/(main)/datasets/page";
+import { Dataset } from "@/app/lib/types/dataset";
 import { EvalJob, AssistantConfig } from "@/app/components/types";
 import ConfigSelector from "@/app/components/ConfigSelector";
 import Loader from "@/app/components/Loader";
 import EvalRunCard from "./EvalRunCard";
 import EvalDatasetDescription from "./EvalDatasetDescription";
-import { APIKey } from "@/app/lib/types/credentials";
-import { apiFetch } from "@/app/lib/apiClient";
+import { useAuth } from "@/app/lib/context/AuthContext";
 
 type Tab = "datasets" | "evaluations";
 
 export interface EvaluationsTabProps {
   leftPanelWidth: number;
-  activeKey: APIKey;
+  apiKey: string;
   storedDatasets: Dataset[];
   selectedDatasetId: string;
   setSelectedDatasetId: (id: string) => void;
@@ -31,7 +31,7 @@ export interface EvaluationsTabProps {
 
 export default function EvaluationsTab({
   leftPanelWidth,
-  activeKey,
+  apiKey,
   storedDatasets,
   selectedDatasetId,
   setSelectedDatasetId,
@@ -62,12 +62,10 @@ export default function EvaluationsTab({
     selectedConfigVersion &&
     !isEvaluating;
 
-  // Fetch evaluation jobs
+  const { isAuthenticated } = useAuth();
+
   const fetchEvaluations = useCallback(async () => {
-    if (!activeKey?.key) {
-      setError("Please select an API key first");
-      return;
-    }
+    if (!isAuthenticated) return;
 
     setIsLoading(true);
     setError(null);
@@ -75,7 +73,7 @@ export default function EvaluationsTab({
     try {
       const data = await apiFetch<EvalJob[] | { data: EvalJob[] }>(
         "/api/evaluations",
-        activeKey.key,
+        apiKey,
       );
       setEvalJobs(Array.isArray(data) ? data : data.data || []);
     } catch (err: unknown) {
@@ -85,18 +83,17 @@ export default function EvaluationsTab({
     } finally {
       setIsLoading(false);
     }
-  }, [activeKey]);
+  }, [apiKey, isAuthenticated]);
 
-  // Fetch assistant config
   const fetchAssistantConfig = useCallback(
     async (assistantId: string) => {
-      if (!activeKey?.key) return;
+      if (!isAuthenticated) return;
 
       try {
         const result = await apiFetch<{
           success: boolean;
           data?: AssistantConfig;
-        }>(`/api/assistant/${assistantId}`, activeKey.key);
+        }>(`/api/assistant/${assistantId}`, apiKey);
         if (result.success && result.data) {
           setAssistantConfigs((prev) =>
             new Map(prev).set(assistantId, result.data!),
@@ -109,7 +106,7 @@ export default function EvaluationsTab({
         );
       }
     },
-    [activeKey],
+    [apiKey, isAuthenticated],
   );
 
   useEffect(() => {
@@ -121,8 +118,8 @@ export default function EvaluationsTab({
   }, [evalJobs, assistantConfigs, fetchAssistantConfig]);
 
   useEffect(() => {
-    if (activeKey?.key) fetchEvaluations();
-  }, [activeKey, fetchEvaluations]);
+    if (isAuthenticated) fetchEvaluations();
+  }, [isAuthenticated, fetchEvaluations]);
 
   return (
     <div className="flex-1 flex overflow-hidden">
diff --git a/app/components/icons/index.tsx b/app/components/icons/index.tsx
index 086c50e..b8d3dfe 100644
--- a/app/components/icons/index.tsx
+++ b/app/components/icons/index.tsx
@@ -32,6 +32,7 @@ export { default as CloudUploadIcon } from "./document/CloudUploadIcon";
 export { default as ClipboardIcon } from "./sidebar/ClipboardIcon";
 export { default as BookOpenIcon } from "./sidebar/BookOpenIcon";
 export { default as SlidersIcon } from "./sidebar/SlidersIcon";
+export { default as LogoutIcon } from "./sidebar/LogoutIcon";
 
 // Prompt Editor Icons
 export { default as ChevronRightIcon } from "./prompt-editor/ChevronRightIcon";
diff --git a/app/components/icons/sidebar/LogoutIcon.tsx b/app/components/icons/sidebar/LogoutIcon.tsx
new file mode 100644
index 0000000..3a053d6
--- /dev/null
+++ b/app/components/icons/sidebar/LogoutIcon.tsx
@@ -0,0 +1,21 @@
+export default function LogoutIcon({
+  className = "w-5 h-5",
+}: {
+  className?: string;
+}) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/providers/Providers.tsx b/app/components/providers/Providers.tsx
new file mode 100644
index 0000000..da3507a
--- /dev/null
+++ b/app/components/providers/Providers.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { ToastProvider } from "@/app/components/Toast";
+import { AuthProvider } from "@/app/lib/context/AuthContext";
+import { AppProvider } from "@/app/lib/context/AppContext";
+
+const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || "";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
+      <ToastProvider>
+        <AuthProvider>
+          <AppProvider>{children}</AppProvider>
+        </AuthProvider>
+      </ToastProvider>
+    </GoogleOAuthProvider>
+  );
+}
diff --git a/app/components/providers/index.ts b/app/components/providers/index.ts
new file mode 100644
index 0000000..1220b47
--- /dev/null
+++ b/app/components/providers/index.ts
@@ -0,0 +1 @@
+export { default as Providers } from "./Providers";
diff --git a/app/components/settings/SettingsSidebar.tsx b/app/components/settings/SettingsSidebar.tsx
new file mode 100644
index 0000000..e2cc889
--- /dev/null
+++ b/app/components/settings/SettingsSidebar.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import Image from "next/image";
+import { ArrowLeftIcon, KeyIcon, SlidersIcon } from "@/app/components/icons";
+import { SETTINGS_NAV } from "@/app/lib/navConfig";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { Branding, UserMenuPopover } from "@/app/components/user-menu";
+
+const iconMap: Record<string, React.ReactNode> = {
+  key: <KeyIcon className="w-[18px] h-[18px]" />,
+  sliders: <SlidersIcon className="w-[18px] h-[18px]" />,
+};
+
+export default function SettingsSidebar() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { currentUser, googleProfile, isAuthenticated, logout } = useAuth();
+  const [showUserMenu, setShowUserMenu] = useState(false);
+  const userMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!showUserMenu) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        userMenuRef.current &&
+        !userMenuRef.current.contains(e.target as Node)
+      ) {
+        setShowUserMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showUserMenu]);
+
+  const displayName =
+    googleProfile?.name || currentUser?.full_name || currentUser?.email || "";
+  const initials = (currentUser?.full_name || currentUser?.email || "U")
+    .charAt(0)
+    .toUpperCase();
+
+  return (
+    <aside className="w-60 h-full border-r border-border bg-bg-secondary flex flex-col shrink-0">
+      <Branding />
+
+      <div className="px-3 pt-3 pb-1">
+        <button
+          onClick={() => router.push("/evaluations")}
+          className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-[14px] font-medium text-text-secondary hover:text-text-primary hover:bg-neutral-100 transition-all duration-150 w-full"
+        >
+          <ArrowLeftIcon className="w-4 h-4" />
+          Dashboard
+        </button>
+      </div>
+
+      <div className="mx-4 my-2 h-px bg-border" />
+
+      <nav className="flex-1 overflow-y-auto px-3 pt-1 pb-4">
+        {SETTINGS_NAV.map((section) => (
+          <div key={section.label} className="mb-5">
+            <p className="px-3 mb-1.5 text-[11px] font-medium text-text-secondary uppercase tracking-wider">
+              {section.label}
+            </p>
+            <div className="space-y-0.5">
+              {section.items.map((item) => {
+                const isActive = pathname === item.route;
+                return (
+                  <button
+                    key={item.route}
+                    onClick={() => router.push(item.route)}
+                    className={`w-full text-left px-3 py-2 rounded-lg text-[14px] flex items-center gap-2.5 transition-all duration-150 border ${
+                      isActive
+                        ? "bg-neutral-100 text-text-primary font-semibold border-border"
+                        : "bg-transparent text-black font-medium border-transparent hover:bg-neutral-100"
+                    }`}
+                  >
+                    {item.icon && (
+                      <span className={isActive ? "opacity-100" : "opacity-70"}>
+                        {iconMap[item.icon]}
+                      </span>
+                    )}
+                    {item.name}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </nav>
+
+      {isAuthenticated && (currentUser || googleProfile) && (
+        <div
+          className="px-3 pb-3 pt-1 border-t border-border relative"
+          ref={userMenuRef}
+        >
+          {showUserMenu && (
+            <UserMenuPopover
+              currentUser={currentUser}
+              googleProfile={googleProfile}
+              onClose={() => setShowUserMenu(false)}
+              onLogout={logout}
+            />
+          )}
+
+          <button
+            onClick={() => setShowUserMenu((prev) => !prev)}
+            className="w-full flex items-center gap-3 px-2 py-2 rounded-lg cursor-pointer hover:bg-neutral-100 transition-colors"
+          >
+            {googleProfile?.picture ? (
+              <Image
+                src={googleProfile.picture}
+                alt={googleProfile.name}
+                width={32}
+                height={32}
+                className="rounded-full shrink-0"
+                referrerPolicy="no-referrer"
+              />
+            ) : (
+              <div className="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center shrink-0">
+                <span className="text-xs font-semibold text-white">
+                  {initials}
+                </span>
+              </div>
+            )}
+            <div className="flex-1 min-w-0 text-left">
+              <p className="text-sm font-medium text-text-primary truncate">
+                {displayName}
+              </p>
+              <p className="text-[11px] text-text-secondary truncate">
+                {currentUser?.email}
+              </p>
+            </div>
+          </button>
+        </div>
+      )}
+    </aside>
+  );
+}
diff --git a/app/components/settings/credentials/CredentialForm.tsx b/app/components/settings/credentials/CredentialForm.tsx
index f9417a6..39a5d74 100644
--- a/app/components/settings/credentials/CredentialForm.tsx
+++ b/app/components/settings/credentials/CredentialForm.tsx
@@ -227,7 +227,7 @@ export default function CredentialForm({
               <button
                 onClick={onDelete}
                 disabled={isSaving || isDeleting}
-                className={`ml-auto px-4 py-2 rounded-full text-sm font-medium border transition-colors bg-transparent border-[#ef444440] text-[#ef4444] hover:bg-[#ef444415] hover:border-[#ef4444] ${isDeleting ? "opacity-70" : ""}`}
+                className={`ml-auto px-4 py-2 rounded-full text-sm font-medium border transition-colors bg-transparent border-[#ef444440] text-[#ef4444] hover:bg-[#ef444415] hover:border-[#ef4444] disabled:cursor-not-allowed ${isDeleting ? "opacity-70" : ""}`}
               >
                 {isDeleting ? "Removing…" : "Remove"}
               </button>
diff --git a/app/components/settings/onboarding/AddUserModal.tsx b/app/components/settings/onboarding/AddUserModal.tsx
index 55c00af..72fdda0 100644
--- a/app/components/settings/onboarding/AddUserModal.tsx
+++ b/app/components/settings/onboarding/AddUserModal.tsx
@@ -160,7 +160,7 @@ export default function AddUserModal({
               {userRows.length > 1 && (
                 <button
                   onClick={() => removeRow(index)}
-                  className="mt-2 p-1 text-text-secondary hover:text-red-500 transition-colors"
+                  className="mt-2 p-1 text-text-secondary hover:text-red-500 transition-colors cursor-pointer"
                 >
                   &times;
                 </button>
diff --git a/app/components/settings/onboarding/OrganizationList.tsx b/app/components/settings/onboarding/OrganizationList.tsx
index b1ab9bf..d4e2759 100644
--- a/app/components/settings/onboarding/OrganizationList.tsx
+++ b/app/components/settings/onboarding/OrganizationList.tsx
@@ -25,7 +25,9 @@ export default function OrganizationList({
           </p>
         </div>
         {currentUser?.is_superuser && (
-          <Button onClick={onNewOrg}>+ New Organization</Button>
+          <Button size="sm" onClick={onNewOrg}>
+            + New Organization
+          </Button>
         )}
       </div>
 
diff --git a/app/components/settings/onboarding/ProjectList.tsx b/app/components/settings/onboarding/ProjectList.tsx
index 71ce2ac..6b47d8c 100644
--- a/app/components/settings/onboarding/ProjectList.tsx
+++ b/app/components/settings/onboarding/ProjectList.tsx
@@ -51,7 +51,7 @@ export default function ProjectList({
     <div>
       <button
         onClick={onBack}
-        className="text-sm text-text-secondary hover:text-text-primary mb-6 flex items-center gap-1 transition-colors"
+        className="text-sm text-text-secondary hover:text-text-primary mb-4 flex items-center gap-1 transition-colors cursor-pointer"
       >
         <ArrowLeftIcon className="w-3.5 h-3.5" /> Back to organizations
       </button>
@@ -105,7 +105,7 @@ export default function ProjectList({
               </button>
               <div className="flex items-center gap-2 shrink-0 ml-3">
                 <span
-                  className={`text-[10px] px-2 py-0.5 rounded-full font-medium ${
+                  className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full font-medium ${
                     project.is_active
                       ? "bg-green-50 text-green-700 border border-green-200"
                       : "bg-neutral-100 text-text-secondary border border-border"
@@ -125,7 +125,9 @@ export default function ProjectList({
                     <EditIcon className="w-4.5 h-4.5" />
                   </button>
                 )}
-                <ChevronRightIcon className="w-4 h-4 text-text-secondary" />
+                <button onClick={() => onSelectProject(project)}>
+                  <ChevronRightIcon className="w-4 h-4 text-text-secondary" />
+                </button>
               </div>
             </div>
           ))}
diff --git a/app/components/settings/onboarding/UserList.tsx b/app/components/settings/onboarding/UserList.tsx
index 419468b..3bffccc 100644
--- a/app/components/settings/onboarding/UserList.tsx
+++ b/app/components/settings/onboarding/UserList.tsx
@@ -91,9 +91,12 @@ export default function UserList({
 
   return (
     <div>
-      <Button variant="ghost" size="sm" onClick={onBack}>
+      <button
+        onClick={onBack}
+        className="text-sm text-text-secondary hover:text-text-primary mb-4 flex items-center gap-1 transition-colors cursor-pointer"
+      >
         <ArrowLeftIcon className="w-3.5 h-3.5" /> Back to projects
-      </Button>
+      </button>
 
       <div className="flex items-center justify-between mb-4">
         <div>
@@ -140,7 +143,7 @@ export default function UserList({
               </div>
               <div className="flex items-center gap-2">
                 <span
-                  className={`inline-flex items-center gap-1.5 text-xs px-3 py-1 rounded-full font-medium ${
+                  className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full font-medium ${
                     user.is_active
                       ? "bg-green-50 text-green-700 border border-green-200"
                       : "bg-neutral-100 text-text-secondary border border-border"
@@ -153,10 +156,10 @@ export default function UserList({
                   <button
                     onClick={() => handleRemoveUser(user.user_id)}
                     disabled={removingId === user.user_id}
-                    className="inline-flex items-center gap-1.5 text-xs px-3 py-1 rounded-full font-medium border border-red-200 bg-red-50 text-red-600 hover:bg-red-100 transition-colors cursor-pointer disabled:opacity-50"
+                    className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 font-medium rounded-lg border border-red bg-white text-red-600 hover:bg-red-100 transition-colors cursor-pointer disabled:opacity-50"
                   >
                     <TrashIcon className="w-3.5 h-3.5" />
-                    {removingId === user.user_id ? "Deleting..." : "Delete"}
+                    {removingId === user.user_id ? "Removing..." : "Remove"}
                   </button>
                 )}
               </div>
diff --git a/app/components/speech-to-text/AudioPlayer.tsx b/app/components/speech-to-text/AudioPlayer.tsx
new file mode 100644
index 0000000..4a5347d
--- /dev/null
+++ b/app/components/speech-to-text/AudioPlayer.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { colors } from "@/app/lib/colors";
+import WaveformVisualizer from "./WaveformVisualizer";
+
+interface AudioPlayerProps {
+  audioBase64: string;
+  mediaType: string;
+  isPlaying: boolean;
+  onPlayToggle: () => void;
+}
+
+export default function AudioPlayer({
+  audioBase64,
+  mediaType,
+  isPlaying,
+  onPlayToggle,
+}: AudioPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+
+  const audioSrc = `data:${mediaType};base64,${audioBase64}`;
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const handleLoadedMetadata = () => setDuration(audio.duration);
+    const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
+    const handleEnded = () => onPlayToggle();
+
+    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("ended", handleEnded);
+
+    return () => {
+      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("ended", handleEnded);
+    };
+  }, [onPlayToggle]);
+
+  useEffect(() => {
+    if (!audioRef.current) return;
+    if (isPlaying) {
+      audioRef.current.play().catch(console.error);
+    } else {
+      audioRef.current.pause();
+    }
+  }, [isPlaying]);
+
+  const formatTime = (time: number) => {
+    const mins = Math.floor(time / 60);
+    const secs = Math.floor(time % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+
+  return (
+    <div className="space-y-1.5">
+      <audio ref={audioRef} src={audioSrc} preload="metadata" />
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onPlayToggle}
+          className="w-8 h-8 flex items-center justify-center rounded-full flex-shrink-0"
+          style={{
+            backgroundColor: isPlaying
+              ? colors.accent.primary
+              : colors.bg.secondary,
+            color: isPlaying ? "#fff" : colors.text.primary,
+          }}
+        >
+          {isPlaying ? (
+            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+              <rect x="6" y="4" width="4" height="16" />
+              <rect x="14" y="4" width="4" height="16" />
+            </svg>
+          ) : (
+            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          )}
+        </button>
+
+        {/* Waveform Visualizer */}
+        <div className="flex-1 min-w-0">
+          {/* eslint-disable react-hooks/refs -- accessing ref in render for waveform display */}
+          <WaveformVisualizer
+            audioElement={audioRef.current}
+            isPlaying={isPlaying}
+            height={32}
+          />
+          {/* eslint-enable react-hooks/refs */}
+        </div>
+
+        <span
+          className="text-xs tabular-nums flex-shrink-0"
+          style={{ color: colors.text.secondary }}
+        >
+          {isPlaying ? formatTime(currentTime) : formatTime(duration)}
+        </span>
+      </div>
+
+      {/* Progress bar */}
+      <div
+        className="h-0.5 rounded-full overflow-hidden mt-1"
+        style={{ backgroundColor: colors.border }}
+      >
+        <div
+          className="h-full rounded-full"
+          style={{
+            width: duration > 0 ? `${(currentTime / duration) * 100}%` : "0%",
+            backgroundColor: colors.accent.primary,
+            transition: "width 0.1s linear",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/AudioPlayerFromUrl.tsx b/app/components/speech-to-text/AudioPlayerFromUrl.tsx
new file mode 100644
index 0000000..9e54e2e
--- /dev/null
+++ b/app/components/speech-to-text/AudioPlayerFromUrl.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { colors } from "@/app/lib/colors";
+
+interface AudioPlayerFromUrlProps {
+  signedUrl: string;
+  isPlaying: boolean;
+  onPlayToggle: () => void;
+  sampleName?: string;
+}
+
+export default function AudioPlayerFromUrl({
+  signedUrl,
+  isPlaying,
+  onPlayToggle,
+  sampleName,
+}: AudioPlayerFromUrlProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const handleLoadedMetadata = () => setDuration(audio.duration);
+    const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
+    const handleEnded = () => onPlayToggle();
+
+    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("ended", handleEnded);
+
+    return () => {
+      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("ended", handleEnded);
+    };
+  }, [onPlayToggle]);
+
+  useEffect(() => {
+    if (!audioRef.current) return;
+    if (isPlaying) {
+      audioRef.current.play().catch(console.error);
+    } else {
+      audioRef.current.pause();
+    }
+  }, [isPlaying]);
+
+  return (
+    <div className="w-full">
+      <audio ref={audioRef} src={signedUrl} preload="metadata" />
+
+      <div className="flex items-center gap-3">
+        <button
+          onClick={onPlayToggle}
+          className="w-6 h-6 flex items-center justify-center rounded-full flex-shrink-0 border-2"
+          style={{
+            borderColor: colors.accent.primary,
+            backgroundColor: "transparent",
+            color: colors.accent.primary,
+          }}
+        >
+          {isPlaying ? (
+            <svg
+              className="w-2.5 h-2.5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <rect x="7" y="5" width="3" height="14" />
+              <rect x="14" y="5" width="3" height="14" />
+            </svg>
+          ) : (
+            <svg
+              className="w-2.5 h-2.5 ml-0.5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          )}
+        </button>
+
+        {sampleName && (
+          <div
+            className="flex-1 font-medium"
+            style={{ color: colors.text.primary }}
+          >
+            {sampleName}
+          </div>
+        )}
+      </div>
+
+      {/* Progress bar */}
+      <div
+        className="h-0.5 rounded-full overflow-hidden mt-1.5"
+        style={{ backgroundColor: colors.border }}
+      >
+        <div
+          className="h-full rounded-full"
+          style={{
+            width: duration > 0 ? `${(currentTime / duration) * 100}%` : "0%",
+            backgroundColor: colors.accent.primary,
+            transition: "width 0.05s ease-out",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/DatasetDescription.tsx b/app/components/speech-to-text/DatasetDescription.tsx
new file mode 100644
index 0000000..c678f88
--- /dev/null
+++ b/app/components/speech-to-text/DatasetDescription.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+import { colors } from "@/app/lib/colors";
+
+const DESCRIPTION_CHAR_LIMIT = 100;
+
+export default function DatasetDescription({
+  description,
+}: {
+  description: string;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const isLong = description.length > DESCRIPTION_CHAR_LIMIT;
+
+  return (
+    <div
+      className="mt-2 text-xs leading-relaxed break-words overflow-hidden"
+      style={{ color: colors.text.secondary }}
+    >
+      <span>
+        {isLong && !expanded
+          ? description.slice(0, DESCRIPTION_CHAR_LIMIT).trimEnd() + "..."
+          : description}
+      </span>
+      {isLong && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setExpanded(!expanded);
+          }}
+          className="mt-1 block text-xs font-medium"
+          style={{ color: colors.text.primary }}
+        >
+          {expanded ? "Show less" : "Read more"}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/DatasetsTab.tsx b/app/components/speech-to-text/DatasetsTab.tsx
new file mode 100644
index 0000000..fba902c
--- /dev/null
+++ b/app/components/speech-to-text/DatasetsTab.tsx
@@ -0,0 +1,995 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { colors } from "@/app/lib/colors";
+import {
+  AudioFile,
+  Dataset,
+  Language,
+  STTSample,
+} from "@/app/lib/types/speechToText";
+import { APIKey } from "@/app/lib/types/credentials";
+import { useToast } from "@/app/components/Toast";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { apiFetch } from "@/app/lib/apiClient";
+import Loader from "@/app/components/Loader";
+import AudioPlayer from "./AudioPlayer";
+import AudioPlayerFromUrl from "./AudioPlayerFromUrl";
+import DatasetDescription from "./DatasetDescription";
+
+export interface DatasetsTabProps {
+  leftPanelWidth: number;
+  datasetName: string;
+  setDatasetName: (name: string) => void;
+  datasetDescription: string;
+  setDatasetDescription: (desc: string) => void;
+  datasetLanguageId: number;
+  setDatasetLanguageId: (id: number) => void;
+  audioFiles: AudioFile[];
+  setAudioFiles: React.Dispatch<React.SetStateAction<AudioFile[]>>;
+  playingFileId: string | null;
+  setPlayingFileId: (id: string | null) => void;
+  handleAudioFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  triggerAudioUpload: () => void;
+  removeAudioFile: (id: string) => void;
+  updateGroundTruth: (id: string, groundTruth: string) => void;
+  updateFileLanguage: (id: string, languageId: number) => void;
+  formatFileSize: (bytes: number) => string;
+  isCreating: boolean;
+  handleCreateDataset: () => void;
+  datasets: Dataset[];
+  isLoadingDatasets: boolean;
+  loadDatasets: () => void;
+  apiKeys: APIKey[];
+  languages: Language[];
+  toast: ReturnType<typeof useToast>;
+}
+
+export default function DatasetsTab({
+  leftPanelWidth,
+  datasetName,
+  setDatasetName,
+  datasetDescription,
+  setDatasetDescription,
+  datasetLanguageId,
+  setDatasetLanguageId,
+  audioFiles,
+  setAudioFiles,
+  playingFileId,
+  setPlayingFileId,
+  handleAudioFileSelect,
+  triggerAudioUpload,
+  removeAudioFile,
+  updateGroundTruth,
+  updateFileLanguage,
+  formatFileSize,
+  isCreating,
+  handleCreateDataset,
+  datasets,
+  isLoadingDatasets,
+  apiKeys,
+  languages,
+  toast,
+}: DatasetsTabProps) {
+  const { isAuthenticated } = useAuth();
+  const [showLanguageInfo, setShowLanguageInfo] = useState(false);
+  const [languageInfoPos, setLanguageInfoPos] = useState({ top: 0, left: 0 });
+  const [viewingId, setViewingId] = useState<number | null>(null);
+  const [viewModalData, setViewModalData] = useState<{
+    name: string;
+    datasetId: number;
+    samples: STTSample[];
+  } | null>(null);
+  const [viewPlayingId, setViewPlayingId] = useState<number | null>(null);
+  const [savingSampleId, setSavingSampleId] = useState<number | null>(null);
+
+  const handleViewDataset = async (datasetId: number, datasetName: string) => {
+    if (!isAuthenticated) return;
+    setViewingId(datasetId);
+    try {
+      const data = await apiFetch<{
+        data?: { samples?: STTSample[] };
+        samples?: STTSample[];
+      }>(
+        `/api/evaluations/stt/datasets/${datasetId}?include_samples=true&include_signed_url=true&sample_limit=100&sample_offset=0`,
+        apiKeys[0]?.key ?? "",
+      );
+      const samples = data?.data?.samples || data?.samples || [];
+      if (samples.length === 0) {
+        toast.error("No samples found in this dataset");
+        return;
+      }
+      setViewModalData({ name: datasetName, datasetId, samples });
+    } catch (err: unknown) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to view dataset",
+      );
+    } finally {
+      setViewingId(null);
+    }
+  };
+
+  const handleUpdateSample = async (
+    sampleId: number,
+    field: "ground_truth" | "language_id",
+    value: string | number,
+  ) => {
+    if (!viewModalData || !isAuthenticated) return;
+    setSavingSampleId(sampleId);
+    try {
+      await apiFetch<STTSample>(
+        `/api/evaluations/stt/samples/${sampleId}`,
+        apiKeys[0]?.key ?? "",
+        {
+          method: "PATCH",
+          body: JSON.stringify({ [field]: value }),
+        },
+      );
+      setViewModalData((prev) =>
+        prev
+          ? {
+              ...prev,
+              samples: prev.samples.map((s) =>
+                s.id === sampleId ? { ...s, [field]: value } : s,
+              ),
+            }
+          : null,
+      );
+    } catch (err: unknown) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to update sample",
+      );
+    } finally {
+      setSavingSampleId(null);
+    }
+  };
+
+  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]);
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Left Panel - Create Dataset Form */}
+      <div
+        className="flex-shrink-0 border-r flex flex-col overflow-hidden"
+        style={{
+          width: `${leftPanelWidth}px`,
+          backgroundColor: colors.bg.primary,
+          borderColor: colors.border,
+        }}
+      >
+        <div className="flex-1 overflow-auto p-4 space-y-4">
+          {/* Page Title */}
+          <div>
+            <h2
+              className="text-base font-semibold"
+              style={{ color: colors.text.primary }}
+            >
+              Create New Dataset
+            </h2>
+            <p
+              className="text-xs mt-0.5"
+              style={{ color: colors.text.secondary }}
+            >
+              Add audio samples that will be transcribed during evaluation
+            </p>
+          </div>
+
+          {/* Name */}
+          <div>
+            <label
+              className="block text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
+              Name *
+            </label>
+            <input
+              type="text"
+              value={datasetName}
+              onChange={(e) => setDatasetName(e.target.value)}
+              placeholder="e.g., English Podcast Dataset"
+              className="w-full px-3 py-2 border rounded-md text-sm"
+              style={{
+                backgroundColor: colors.bg.primary,
+                borderColor: colors.border,
+                color: colors.text.primary,
+              }}
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label
+              className="block text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
+              Description
+            </label>
+            <input
+              type="text"
+              value={datasetDescription}
+              onChange={(e) => setDatasetDescription(e.target.value)}
+              placeholder="Optional description"
+              className="w-full px-3 py-2 border rounded-md text-sm"
+              style={{
+                backgroundColor: colors.bg.primary,
+                borderColor: colors.border,
+                color: colors.text.primary,
+              }}
+            />
+          </div>
+
+          {/* Language */}
+          <div>
+            <label
+              className="text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
+              <span className="inline-flex items-center gap-1">
+                Language *
+                <button
+                  type="button"
+                  aria-label="Show language information"
+                  className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer shrink-0"
+                  style={{
+                    backgroundColor: colors.bg.primary,
+                    border: `1px solid ${colors.border}`,
+                    color: colors.text.secondary,
+                    padding: 0,
+                    lineHeight: 1,
+                  }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    setLanguageInfoPos({
+                      top: rect.bottom + 4,
+                      left: rect.left,
+                    });
+                    setShowLanguageInfo(!showLanguageInfo);
+                  }}
+                >
+                  i
+                </button>
+                {showLanguageInfo && (
+                  <div
+                    className="fixed z-50 rounded-lg shadow-lg border text-xs p-3"
+                    style={{
+                      backgroundColor: colors.bg.primary,
+                      borderColor: colors.border,
+                      width: "280px",
+                      top: languageInfoPos.top,
+                      left: languageInfoPos.left,
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div
+                      className="font-semibold mb-1"
+                      style={{ color: colors.text.primary }}
+                    >
+                      Default Language
+                    </div>
+                    <p
+                      style={{
+                        color: colors.text.secondary,
+                        lineHeight: "1.5",
+                      }}
+                    >
+                      This is the default language applied to all samples in the
+                      dataset. You can override the language for individual
+                      samples in the audio files section below.
+                    </p>
+                  </div>
+                )}
+              </span>
+            </label>
+            <select
+              value={datasetLanguageId}
+              onChange={(e) => {
+                const newId = Number(e.target.value);
+                setDatasetLanguageId(newId);
+                setAudioFiles((prev) =>
+                  prev.map((f) => ({ ...f, languageId: newId })),
+                );
+              }}
+              className="w-full px-3 py-2 border rounded-md text-sm"
+              style={{
+                backgroundColor: colors.bg.primary,
+                borderColor: colors.border,
+                color: colors.text.primary,
+              }}
+            >
+              {languages.map((lang) => (
+                <option key={lang.id} value={lang.id}>
+                  {lang.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Audio Samples */}
+          <div>
+            <div className="flex items-center justify-between mb-1.5">
+              <label
+                className="text-xs font-medium"
+                style={{ color: colors.text.secondary }}
+              >
+                Audio Samples *
+              </label>
+            </div>
+
+            <input
+              id="audio-upload"
+              type="file"
+              accept=".mp3,.wav,.m4a,.ogg,.flac,.webm"
+              multiple
+              onChange={handleAudioFileSelect}
+              className="hidden"
+            />
+
+            {audioFiles.length === 0 ? (
+              <div
+                onClick={isAuthenticated ? triggerAudioUpload : undefined}
+                className="border-2 border-dashed rounded-lg p-6 text-center transition-colors"
+                style={{
+                  borderColor: colors.border,
+                  backgroundColor: colors.bg.primary,
+                  cursor: isAuthenticated ? "pointer" : "not-allowed",
+                  opacity: isAuthenticated ? 1 : 0.5,
+                }}
+                onMouseEnter={(e) =>
+                  isAuthenticated &&
+                  (e.currentTarget.style.backgroundColor = colors.bg.secondary)
+                }
+                onMouseLeave={(e) =>
+                  isAuthenticated &&
+                  (e.currentTarget.style.backgroundColor = colors.bg.primary)
+                }
+              >
+                <svg
+                  className="w-8 h-8 mx-auto mb-2"
+                  style={{ color: colors.text.secondary }}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={1.5}
+                    d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
+                  />
+                </svg>
+                <p
+                  className="text-xs font-medium mb-1"
+                  style={{ color: colors.text.primary }}
+                >
+                  {isAuthenticated
+                    ? "Click to upload audio samples"
+                    : "Add an API key to upload"}
+                </p>
+                <p className="text-xs" style={{ color: colors.text.secondary }}>
+                  MP3, WAV, M4A, OGG, FLAC, WebM
+                </p>
+              </div>
+            ) : (
+              <div>
+                <div
+                  className="space-y-3"
+                  style={{ maxHeight: "400px", overflow: "auto" }}
+                >
+                  {audioFiles.map((audioFile, idx) => (
+                    <div
+                      key={audioFile.id}
+                      className="rounded-lg overflow-hidden"
+                      style={{
+                        backgroundColor: colors.bg.primary,
+                        boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
+                      }}
+                    >
+                      <div className="p-4">
+                        {/* Header: number, filename, status, remove */}
+                        <div className="flex items-center justify-between mb-3">
+                          <div className="flex items-center gap-2 min-w-0 flex-1">
+                            <span
+                              className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] flex-shrink-0 font-medium"
+                              style={{
+                                backgroundColor: colors.bg.secondary,
+                                color: colors.text.secondary,
+                              }}
+                            >
+                              {idx + 1}
+                            </span>
+                            <span
+                              className="text-sm font-medium truncate"
+                              style={{ color: colors.text.primary }}
+                            >
+                              {audioFile.name}
+                            </span>
+                            <span
+                              className="text-xs flex-shrink-0"
+                              style={{ color: colors.text.secondary }}
+                            >
+                              {formatFileSize(audioFile.size)}
+                            </span>
+                            {audioFile.fileId ? (
+                              <svg
+                                className="w-3.5 h-3.5 flex-shrink-0"
+                                style={{ color: colors.status.success }}
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  strokeWidth={2}
+                                  d="M5 13l4 4L19 7"
+                                />
+                              </svg>
+                            ) : (
+                              <div
+                                className="w-3 h-3 border-2 border-t-transparent rounded-full animate-spin flex-shrink-0"
+                                style={{
+                                  borderColor: colors.accent.primary,
+                                  borderTopColor: "transparent",
+                                }}
+                              />
+                            )}
+                          </div>
+                          <button
+                            onClick={() => removeAudioFile(audioFile.id)}
+                            className="p-1 rounded flex-shrink-0"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            <svg
+                              className="w-3.5 h-3.5"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M6 18L18 6M6 6l12 12"
+                              />
+                            </svg>
+                          </button>
+                        </div>
+
+                        {/* Audio Player */}
+                        <AudioPlayer
+                          audioBase64={audioFile.base64}
+                          mediaType={audioFile.mediaType}
+                          isPlaying={playingFileId === audioFile.id}
+                          onPlayToggle={() =>
+                            setPlayingFileId(
+                              playingFileId === audioFile.id
+                                ? null
+                                : audioFile.id,
+                            )
+                          }
+                        />
+
+                        {/* Language + Ground Truth */}
+                        <div className="mt-3 flex items-start gap-3">
+                          <div
+                            className="flex-shrink-0"
+                            style={{ width: "120px" }}
+                          >
+                            <label
+                              className="block text-[10px] font-medium mb-1 uppercase tracking-wide"
+                              style={{ color: colors.text.secondary }}
+                            >
+                              Language
+                            </label>
+                            <select
+                              value={audioFile.languageId}
+                              onChange={(e) =>
+                                updateFileLanguage(
+                                  audioFile.id,
+                                  Number(e.target.value),
+                                )
+                              }
+                              className="w-full px-2 py-1.5 border rounded-md text-xs"
+                              style={{
+                                backgroundColor: colors.bg.primary,
+                                borderColor: colors.border,
+                                color: colors.text.primary,
+                              }}
+                            >
+                              {languages.map((lang) => (
+                                <option key={lang.id} value={lang.id}>
+                                  {lang.name}
+                                </option>
+                              ))}
+                            </select>
+                          </div>
+                          <div className="flex-1">
+                            <label
+                              className="block text-[10px] font-medium mb-1 uppercase tracking-wide"
+                              style={{ color: colors.text.secondary }}
+                            >
+                              Ground Truth
+                            </label>
+                            <textarea
+                              value={audioFile.groundTruth}
+                              onChange={(e) =>
+                                updateGroundTruth(audioFile.id, e.target.value)
+                              }
+                              placeholder={
+                                audioFile.fileId
+                                  ? "Expected transcription..."
+                                  : "Uploading..."
+                              }
+                              disabled={!audioFile.fileId}
+                              rows={2}
+                              className="w-full px-2 py-1.5 border rounded-md text-xs"
+                              style={{
+                                backgroundColor: audioFile.fileId
+                                  ? colors.bg.primary
+                                  : colors.bg.secondary,
+                                borderColor: colors.border,
+                                color: audioFile.fileId
+                                  ? colors.text.primary
+                                  : colors.text.secondary,
+                                cursor: audioFile.fileId
+                                  ? "text"
+                                  : "not-allowed",
+                                opacity: audioFile.fileId ? 1 : 0.6,
+                                resize: "vertical",
+                              }}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Upload more - below scrollable area */}
+                <button
+                  onClick={isAuthenticated ? triggerAudioUpload : undefined}
+                  className="flex items-center gap-1 text-xs font-medium mt-2"
+                  style={{
+                    color: isAuthenticated
+                      ? colors.accent.primary
+                      : colors.text.secondary,
+                    cursor: isAuthenticated ? "pointer" : "not-allowed",
+                  }}
+                >
+                  <svg
+                    className="w-3.5 h-3.5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 4v16m8-8H4"
+                    />
+                  </svg>
+                  Add more samples
+                  <span style={{ color: colors.text.secondary }}>
+                    ({audioFiles.filter((f) => f.fileId).length}/
+                    {audioFiles.length} uploaded)
+                  </span>
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Bottom Action Bar */}
+        <div
+          className="flex-shrink-0 border-t px-4 py-4 flex items-center justify-end gap-3"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
+          <button
+            onClick={() => {
+              setDatasetName("");
+              setDatasetDescription("");
+              setDatasetLanguageId(1);
+              setAudioFiles([]);
+              setPlayingFileId(null);
+            }}
+            disabled={isCreating}
+            className="px-4 py-2 rounded-lg text-sm font-medium"
+            style={{ color: colors.text.secondary }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleCreateDataset}
+            disabled={
+              isCreating || !datasetName.trim() || audioFiles.length === 0
+            }
+            className="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium"
+            style={{
+              backgroundColor:
+                isCreating || !datasetName.trim() || audioFiles.length === 0
+                  ? colors.bg.secondary
+                  : colors.accent.primary,
+              color:
+                isCreating || !datasetName.trim() || audioFiles.length === 0
+                  ? colors.text.secondary
+                  : "#fff",
+              cursor:
+                isCreating || !datasetName.trim() || audioFiles.length === 0
+                  ? "not-allowed"
+                  : "pointer",
+            }}
+          >
+            {isCreating ? (
+              <>
+                <div
+                  className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
+                  style={{
+                    borderColor: colors.text.secondary,
+                    borderTopColor: "transparent",
+                  }}
+                />
+                Creating...
+              </>
+            ) : (
+              "Create Dataset"
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Right Panel - Dataset List */}
+      <div
+        className="flex-1 flex flex-col overflow-hidden"
+        style={{ backgroundColor: colors.bg.secondary }}
+      >
+        <div className="flex-1 overflow-auto p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3
+              className="text-base font-semibold"
+              style={{ color: colors.text.primary }}
+            >
+              Datasets
+            </h3>
+          </div>
+
+          {isLoadingDatasets ? (
+            <div className="p-16">
+              <Loader size="md" message="Loading datasets..." />
+            </div>
+          ) : 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 }}
+              >
+                No datasets yet
+              </p>
+              <p className="text-xs" style={{ color: colors.text.secondary }}>
+                Create your first dataset using the form on the left
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {datasets.map((dataset) => (
+                <div
+                  key={dataset.id}
+                  className="rounded-lg overflow-hidden"
+                  style={{
+                    backgroundColor: colors.bg.primary,
+                    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+                    borderLeft: "3px solid #DCCFC3",
+                  }}
+                >
+                  <div className="px-5 py-4">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="min-w-0 flex-1">
+                        <div
+                          className="text-sm font-semibold truncate"
+                          style={{ color: colors.text.primary }}
+                        >
+                          {dataset.name}
+                        </div>
+                        {dataset.description && (
+                          <DatasetDescription
+                            description={dataset.description}
+                          />
+                        )}
+                        {dataset.dataset_metadata?.sample_count !==
+                          undefined && (
+                          <div
+                            className="mt-2 text-xs"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            {dataset.dataset_metadata.sample_count} samples
+                          </div>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <button
+                          onClick={() =>
+                            handleViewDataset(dataset.id, dataset.name)
+                          }
+                          disabled={viewingId === dataset.id}
+                          className="px-3 py-1.5 rounded-lg text-xs font-medium border"
+                          style={{
+                            backgroundColor: "transparent",
+                            borderColor: colors.border,
+                            color: colors.text.primary,
+                            opacity: viewingId === dataset.id ? 0.5 : 1,
+                          }}
+                        >
+                          {viewingId === dataset.id ? "Loading..." : "View"}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* View Dataset Modal */}
+      {viewModalData && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center"
+          style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
+          onClick={() => {
+            setViewModalData(null);
+            setViewPlayingId(null);
+          }}
+        >
+          <div
+            className="rounded-lg shadow-xl flex flex-col"
+            style={{
+              backgroundColor: colors.bg.primary,
+              width: "90vw",
+              maxWidth: "900px",
+              maxHeight: "85vh",
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Modal Header */}
+            <div
+              className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0"
+              style={{ borderColor: colors.border }}
+            >
+              <div>
+                <h3
+                  className="text-sm font-semibold"
+                  style={{ color: colors.text.primary }}
+                >
+                  {viewModalData.name}
+                </h3>
+                <p
+                  className="text-xs mt-0.5"
+                  style={{ color: colors.text.secondary }}
+                >
+                  {viewModalData.samples.length} audio samples
+                </p>
+              </div>
+              <button
+                onClick={() => {
+                  setViewModalData(null);
+                  setViewPlayingId(null);
+                }}
+                className="p-1.5 rounded"
+                style={{ color: colors.text.secondary }}
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            {/* Modal Body - Samples */}
+            <div className="flex-1 overflow-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr
+                    style={{
+                      backgroundColor: colors.bg.secondary,
+                      borderBottom: `1px solid ${colors.border}`,
+                    }}
+                  >
+                    <th
+                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
+                      style={{
+                        color: colors.text.secondary,
+                        backgroundColor: colors.bg.secondary,
+                        width: "40px",
+                      }}
+                    ></th>
+                    <th
+                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
+                      style={{
+                        color: colors.text.secondary,
+                        backgroundColor: colors.bg.secondary,
+                      }}
+                    >
+                      Sample
+                    </th>
+                    <th
+                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
+                      style={{
+                        color: colors.text.secondary,
+                        backgroundColor: colors.bg.secondary,
+                        width: "120px",
+                      }}
+                    >
+                      Language
+                    </th>
+                    <th
+                      className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
+                      style={{
+                        color: colors.text.secondary,
+                        backgroundColor: colors.bg.secondary,
+                      }}
+                    >
+                      Ground Truth
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {viewModalData.samples.map((sample, idx) => (
+                    <tr
+                      key={sample.id}
+                      style={{ borderBottom: `1px solid ${colors.border}` }}
+                    >
+                      <td
+                        className="px-4 py-3 text-xs align-top"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        {idx + 1}
+                      </td>
+                      <td className="px-4 py-3 align-top">
+                        <div className="space-y-1.5">
+                          {sample.sample_metadata?.original_filename && (
+                            <div
+                              className="text-xs font-medium truncate"
+                              style={{
+                                color: colors.text.primary,
+                                maxWidth: "280px",
+                              }}
+                            >
+                              {sample.sample_metadata.original_filename}
+                            </div>
+                          )}
+                          {sample.signed_url ? (
+                            <AudioPlayerFromUrl
+                              signedUrl={sample.signed_url}
+                              isPlaying={viewPlayingId === sample.id}
+                              onPlayToggle={() =>
+                                setViewPlayingId(
+                                  viewPlayingId === sample.id
+                                    ? null
+                                    : sample.id,
+                                )
+                              }
+                            />
+                          ) : (
+                            <span
+                              className="text-xs"
+                              style={{ color: colors.text.secondary }}
+                            >
+                              No audio
+                            </span>
+                          )}
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 align-top">
+                        <select
+                          value={sample.language_id ?? ""}
+                          onChange={(e) =>
+                            handleUpdateSample(
+                              sample.id,
+                              "language_id",
+                              Number(e.target.value),
+                            )
+                          }
+                          disabled={savingSampleId === sample.id}
+                          className="w-full px-2 py-1.5 border rounded-md text-xs"
+                          style={{
+                            backgroundColor: colors.bg.primary,
+                            borderColor: colors.border,
+                            color: colors.text.primary,
+                            opacity: savingSampleId === sample.id ? 0.5 : 1,
+                          }}
+                        >
+                          {languages.map((lang) => (
+                            <option key={lang.id} value={lang.id}>
+                              {lang.name}
+                            </option>
+                          ))}
+                        </select>
+                      </td>
+                      <td className="px-4 py-3 align-top">
+                        <textarea
+                          value={sample.ground_truth || ""}
+                          onChange={(e) => {
+                            const newVal = e.target.value;
+                            setViewModalData((prev) =>
+                              prev
+                                ? {
+                                    ...prev,
+                                    samples: prev.samples.map((s) =>
+                                      s.id === sample.id
+                                        ? { ...s, ground_truth: newVal }
+                                        : s,
+                                    ),
+                                  }
+                                : null,
+                            );
+                          }}
+                          onBlur={(e) =>
+                            handleUpdateSample(
+                              sample.id,
+                              "ground_truth",
+                              e.target.value,
+                            )
+                          }
+                          placeholder="Enter ground truth..."
+                          disabled={savingSampleId === sample.id}
+                          rows={3}
+                          className="w-full px-2 py-1.5 border rounded-md text-xs"
+                          style={{
+                            backgroundColor: colors.bg.primary,
+                            borderColor: colors.border,
+                            color: colors.text.primary,
+                            opacity: savingSampleId === sample.id ? 0.5 : 1,
+                            resize: "vertical",
+                          }}
+                        />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/EvaluationsTab.tsx b/app/components/speech-to-text/EvaluationsTab.tsx
new file mode 100644
index 0000000..81dbebc
--- /dev/null
+++ b/app/components/speech-to-text/EvaluationsTab.tsx
@@ -0,0 +1,1346 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { colors } from "@/app/lib/colors";
+import { Tab, 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 "./AudioPlayerFromUrl";
+
+export interface EvaluationsTabProps {
+  leftPanelWidth: number;
+  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;
+  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;
+  apiKeys: APIKey[];
+  toast: ReturnType<typeof import("@/app/components/Toast").useToast>;
+  setActiveTab: (tab: Tab) => void;
+}
+
+export default function EvaluationsTab({
+  leftPanelWidth,
+  evaluationName,
+  setEvaluationName,
+  datasets,
+  isLoadingDatasets,
+  selectedDatasetId,
+  setSelectedDatasetId,
+  selectedDataset,
+  selectedModel,
+  setSelectedModel,
+  isRunning,
+  handleRunEvaluation,
+  runs,
+  isLoadingRuns,
+  loadRuns,
+  selectedRunId,
+  setSelectedRunId,
+  results,
+  setResults,
+  isLoadingResults,
+  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,
+    comment?: string,
+  ) => {
+    if (!isAuthenticated) return;
+
+    try {
+      const payload: { is_correct?: boolean | null; comment?: string } = {};
+      if (isCorrect !== undefined) payload.is_correct = isCorrect;
+      if (comment !== undefined) payload.comment = comment;
+
+      await apiFetch<STTResult>(
+        `/api/evaluations/stt/results/${resultId}`,
+        apiKeys[0]?.key ?? "",
+        {
+          method: "PATCH",
+          body: JSON.stringify(payload),
+        },
+      );
+
+      // Update local state
+      setResults((prev) =>
+        prev.map((r) =>
+          r.id === resultId
+            ? {
+                ...r,
+                ...(isCorrect !== undefined ? { is_correct: isCorrect } : {}),
+                ...(comment !== undefined && { comment }),
+              }
+            : r,
+        ),
+      );
+    } catch (error) {
+      console.error("Failed to update feedback:", error);
+      toast.error("Failed to update feedback");
+    }
+  };
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Left 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,
+          }}
+        >
+          <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>
+        </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"
+                  style={{ color: colors.text.secondary }}
+                >
+                  <svg
+                    className={`w-4 h-4 ${isLoadingRuns ? "animate-spin" : ""}`}
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                    />
+                  </svg>
+                </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"
+                          style={{
+                            borderLeftColor: 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"
+                                  style={{ color: colors.text.primary }}
+                                >
+                                  {run.run_name}
+                                </div>
+                                {/* Error message */}
+                                {run.error_message && (
+                                  <div
+                                    className="mt-2 text-xs break-words overflow-hidden"
+                                    style={{ color: "hsl(8, 86%, 40%)" }}
+                                  >
+                                    {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/text-to-speech/AudioPlayerFromUrl.tsx b/app/components/text-to-speech/AudioPlayerFromUrl.tsx
new file mode 100644
index 0000000..4fe076e
--- /dev/null
+++ b/app/components/text-to-speech/AudioPlayerFromUrl.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { colors } from "@/app/lib/colors";
+
+interface AudioPlayerFromUrlProps {
+  signedUrl: string;
+  isPlaying: boolean;
+  onPlayToggle: () => void;
+  sampleLabel?: string;
+  durationSeconds?: number | null;
+  sizeBytes?: number | null;
+}
+
+export default function AudioPlayerFromUrl({
+  signedUrl,
+  isPlaying,
+  onPlayToggle,
+  sampleLabel,
+  durationSeconds,
+  sizeBytes,
+}: AudioPlayerFromUrlProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const handleLoadedMetadata = () => setDuration(audio.duration);
+    const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
+    const handleEnded = () => onPlayToggle();
+
+    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("ended", handleEnded);
+
+    return () => {
+      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("ended", handleEnded);
+    };
+  }, [onPlayToggle]);
+
+  useEffect(() => {
+    if (!audioRef.current) return;
+    if (isPlaying) {
+      audioRef.current.play().catch(console.error);
+    } else {
+      audioRef.current.pause();
+    }
+  }, [isPlaying]);
+
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  return (
+    <div className="w-full">
+      <audio ref={audioRef} src={signedUrl} preload="metadata" />
+
+      <div className="flex items-center gap-3">
+        <button
+          onClick={onPlayToggle}
+          className="w-6 h-6 flex items-center justify-center rounded-full flex-shrink-0 border-2"
+          style={{
+            borderColor: colors.accent.primary,
+            backgroundColor: "transparent",
+            color: colors.accent.primary,
+          }}
+        >
+          {isPlaying ? (
+            <svg
+              className="w-2.5 h-2.5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <rect x="7" y="5" width="3" height="14" />
+              <rect x="14" y="5" width="3" height="14" />
+            </svg>
+          ) : (
+            <svg
+              className="w-2.5 h-2.5 ml-0.5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          )}
+        </button>
+
+        {sampleLabel && (
+          <span
+            className="text-sm font-medium"
+            style={{ color: colors.text.primary }}
+          >
+            {sampleLabel}
+          </span>
+        )}
+      </div>
+
+      {/* Progress bar */}
+      <div
+        className="h-1 rounded-full overflow-hidden mt-2"
+        style={{ backgroundColor: colors.bg.secondary }}
+      >
+        <div
+          className="h-full rounded-full"
+          style={{
+            width: duration > 0 ? `${(currentTime / duration) * 100}%` : "0%",
+            backgroundColor: colors.accent.primary,
+            transition: "width 0.05s ease-out",
+          }}
+        />
+      </div>
+
+      {/* Meta info */}
+      {(durationSeconds != null || sizeBytes != null) && (
+        <div className="flex items-center gap-3 mt-1.5">
+          {durationSeconds != null && (
+            <span
+              className="text-xs tabular-nums"
+              style={{ color: colors.text.secondary }}
+            >
+              {durationSeconds >= 60
+                ? `${Math.floor(durationSeconds / 60)}m ${Math.round(durationSeconds % 60)}s`
+                : `${Math.round(durationSeconds)}s`}
+            </span>
+          )}
+          {sizeBytes != null && (
+            <span
+              className="text-xs tabular-nums"
+              style={{ color: colors.text.secondary }}
+            >
+              {formatSize(sizeBytes)}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/text-to-speech/DatasetDescription.tsx b/app/components/text-to-speech/DatasetDescription.tsx
new file mode 100644
index 0000000..17d26e8
--- /dev/null
+++ b/app/components/text-to-speech/DatasetDescription.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+import { colors } from "@/app/lib/colors";
+
+const DESCRIPTION_CHAR_LIMIT = 100;
+
+export default function TTSDatasetDescription({
+  description,
+}: {
+  description: string;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const isLong = description.length > DESCRIPTION_CHAR_LIMIT;
+
+  return (
+    <div
+      className="mt-2 text-xs leading-relaxed break-words overflow-hidden"
+      style={{ color: colors.text.secondary }}
+    >
+      <span>
+        {isLong && !expanded
+          ? description.slice(0, DESCRIPTION_CHAR_LIMIT).trimEnd() + "..."
+          : description}
+      </span>
+      {isLong && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setExpanded(!expanded);
+          }}
+          className="mt-1 block text-xs font-medium"
+          style={{ color: colors.text.primary }}
+        >
+          {expanded ? "Show less" : "Read more"}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/text-to-speech/DatasetsTab.tsx b/app/components/text-to-speech/DatasetsTab.tsx
new file mode 100644
index 0000000..1eb2c57
--- /dev/null
+++ b/app/components/text-to-speech/DatasetsTab.tsx
@@ -0,0 +1,692 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { colors } from "@/app/lib/colors";
+import {
+  TextSample,
+  TTSDataset,
+  TTSDatasetDetailResponse,
+} 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";
+
+export interface DatasetsTabProps {
+  leftPanelWidth: number;
+  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;
+  apiKeys: APIKey[];
+  datasets: TTSDataset[];
+  isLoadingDatasets: boolean;
+  toast: ReturnType<typeof useToast>;
+}
+
+export default function DatasetsTab({
+  leftPanelWidth,
+  datasetName,
+  setDatasetName,
+  datasetDescription,
+  setDatasetDescription,
+  datasetLanguageId,
+  setDatasetLanguageId,
+  languages,
+  textSamples,
+  addTextSample,
+  removeTextSample,
+  updateSampleText,
+  isCreating,
+  handleCreateDataset,
+  resetForm,
+  apiKeys,
+  datasets,
+  isLoadingDatasets,
+  toast,
+}: 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 handleViewDataset = async (datasetId: number, datasetName: string) => {
+    if (!isAuthenticated) return;
+    setViewingId(datasetId);
+    try {
+      const data = await apiFetch<TTSDatasetDetailResponse>(
+        `/api/evaluations/tts/datasets/${datasetId}?include_signed_url=true&fetch_content=true`,
+        apiKeys[0]?.key ?? "",
+      );
+      const csvText = data?.csv_content;
+      if (!csvText) {
+        toast.error("No data available for this dataset");
+        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);
+
+      setViewModalData({ name: datasetName, headers, rows });
+    } catch (err: unknown) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to view dataset",
+      );
+    } finally {
+      setViewingId(null);
+    }
+  };
+
+  const handleDownloadFromModal = () => {
+    if (!viewModalData) return;
+    const csvLines = [viewModalData.headers.join(",")];
+    viewModalData.rows.forEach((row) => {
+      csvLines.push(
+        row
+          .map((cell) =>
+            cell.includes(",") || cell.includes('"') || cell.includes("\n")
+              ? `"${cell.replace(/"/g, '""')}"`
+              : cell,
+          )
+          .join(","),
+      );
+    });
+    const blob = new Blob([csvLines.join("\n")], {
+      type: "text/csv;charset=utf-8;",
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${viewModalData.name}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  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 overflow-auto p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3
+              className="text-base font-semibold"
+              style={{ color: colors.text.primary }}
+            >
+              Datasets
+            </h3>
+          </div>
+
+          {isLoadingDatasets ? (
+            <div className="p-16">
+              <Loader size="md" message="Loading datasets..." />
+            </div>
+          ) : 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 }}
+              >
+                No datasets yet
+              </p>
+              <p className="text-xs" style={{ color: colors.text.secondary }}>
+                Create your first dataset using the form on the left
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {datasets.map((dataset) => (
+                <div
+                  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>
+              ))}
+            </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>
+
+            {/* 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>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/text-to-speech/EvaluationsTab.tsx b/app/components/text-to-speech/EvaluationsTab.tsx
new file mode 100644
index 0000000..b4a1cce
--- /dev/null
+++ b/app/components/text-to-speech/EvaluationsTab.tsx
@@ -0,0 +1,1277 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { colors } from "@/app/lib/colors";
+import {
+  TTSTab,
+  TTSDataset,
+  TTSRun,
+  TTSResult,
+  TTSScore,
+  TTSFeedbackPayload,
+} from "@/app/lib/types/textToSpeech";
+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 AudioPlayerFromUrl from "./AudioPlayerFromUrl";
+import { useToast } from "@/app/components/Toast";
+
+export interface EvaluationsTabProps {
+  leftPanelWidth: number;
+  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;
+  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;
+  apiKeys: APIKey[];
+  toast: ReturnType<typeof useToast>;
+  setActiveTab: (tab: TTSTab) => void;
+}
+
+export default function EvaluationsTab({
+  leftPanelWidth,
+  evaluationName,
+  setEvaluationName,
+  datasets,
+  isLoadingDatasets,
+  selectedDatasetId,
+  setSelectedDatasetId,
+  selectedDataset,
+  selectedModel,
+  setSelectedModel,
+  isRunning,
+  handleRunEvaluation,
+  runs,
+  isLoadingRuns,
+  loadRuns,
+  selectedRunId,
+  setSelectedRunId,
+  results,
+  setResults,
+  isLoadingResults,
+  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,
+    comment?: string,
+    score?: TTSScore,
+  ) => {
+    if (!isAuthenticated) return;
+
+    try {
+      const payload: TTSFeedbackPayload = {};
+      if (isCorrect !== undefined) payload.is_correct = isCorrect;
+      if (comment !== undefined) payload.comment = comment;
+      if (score !== undefined) payload.score = score;
+
+      await apiFetch<TTSResult>(
+        `/api/evaluations/tts/results/${resultId}`,
+        apiKeys[0]?.key ?? "",
+        {
+          method: "PATCH",
+          body: JSON.stringify(payload),
+        },
+      );
+
+      setResults((prev) =>
+        prev.map((r) =>
+          r.id === resultId
+            ? {
+                ...r,
+                ...(isCorrect !== undefined ? { is_correct: isCorrect } : {}),
+                ...(comment !== undefined && { comment }),
+                ...(score !== undefined && {
+                  score: { ...(r.score || {}), ...score },
+                }),
+              }
+            : r,
+        ),
+      );
+    } catch (error) {
+      console.error("Failed to update feedback:", error);
+      toast.error("Failed to update feedback");
+    }
+  };
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Left 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,
+          }}
+        >
+          <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>
+        </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"
+                  style={{ color: colors.text.secondary }}
+                >
+                  <svg
+                    className={`w-4 h-4 ${isLoadingRuns ? "animate-spin" : ""}`}
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                    />
+                  </svg>
+                </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"
+                          style={{
+                            backgroundColor: colors.bg.primary,
+                            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+                            borderLeft: `3px solid ${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"
+                                  style={{ color: colors.text.primary }}
+                                >
+                                  {run.run_name}
+                                </div>
+                                {/* Error message */}
+                                {run.error_message && (
+                                  <div
+                                    className="mt-2 text-xs break-words overflow-hidden"
+                                    style={{ color: "hsl(8, 86%, 40%)" }}
+                                  >
+                                    {run.error_message}
+                                  </div>
+                                )}
+                              </div>
+                              <span
+                                className="px-2.5 py-1 rounded text-xs font-semibold uppercase tracking-wide flex-shrink-0"
+                                style={{
+                                  backgroundColor: statusColor.bg,
+                                  color: 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/user-menu/Branding.tsx b/app/components/user-menu/Branding.tsx
new file mode 100644
index 0000000..19353d4
--- /dev/null
+++ b/app/components/user-menu/Branding.tsx
@@ -0,0 +1,12 @@
+const Branding = () => {
+  return (
+    <div className="px-5 py-[13px] border-b border-border">
+      <h2 className="text-sm font-semibold text-text-primary tracking-tight">
+        Kaapi Konsole
+      </h2>
+      <p className="text-xs mt-0.5 text-text-secondary">Tech4Dev</p>
+    </div>
+  );
+};
+
+export default Branding;
diff --git a/app/components/user-menu/UserMenuPopover.tsx b/app/components/user-menu/UserMenuPopover.tsx
new file mode 100644
index 0000000..a2fca5d
--- /dev/null
+++ b/app/components/user-menu/UserMenuPopover.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { GearIcon, LogoutIcon } from "@/app/components/icons";
+import { User, GoogleProfile } from "@/app/lib/types/auth";
+
+interface UserMenuPopoverProps {
+  currentUser: User | null;
+  googleProfile: GoogleProfile | null;
+  onClose: () => void;
+  onLogout: () => void;
+}
+
+export default function UserMenuPopover({
+  currentUser,
+  googleProfile,
+  onClose,
+  onLogout,
+}: UserMenuPopoverProps) {
+  const router = useRouter();
+
+  const displayName =
+    googleProfile?.name || currentUser?.full_name || currentUser?.email || "";
+  const initials = (currentUser?.full_name || currentUser?.email || "U")
+    .charAt(0)
+    .toUpperCase();
+
+  return (
+    <div className="absolute bottom-full left-3 right-3 mb-2 bg-white rounded-xl border border-border shadow-lg py-2 z-50">
+      <div className="px-4 py-3 flex items-center gap-3">
+        {googleProfile?.picture ? (
+          <Image
+            src={googleProfile.picture}
+            alt={googleProfile.name}
+            width={36}
+            height={36}
+            className="rounded-full shrink-0"
+            referrerPolicy="no-referrer"
+          />
+        ) : (
+          <div className="w-9 h-9 rounded-full bg-green-600 flex items-center justify-center shrink-0">
+            <span className="text-sm font-semibold text-white">{initials}</span>
+          </div>
+        )}
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-text-primary truncate">
+            {displayName}
+          </p>
+          <p className="text-xs text-text-secondary truncate">
+            {currentUser?.email}
+          </p>
+        </div>
+      </div>
+
+      <div className="h-px bg-border mx-2" />
+
+      {currentUser?.is_superuser && (
+        <button
+          onClick={() => {
+            onClose();
+            router.push("/settings/credentials");
+          }}
+          className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-text-primary hover:bg-neutral-50 transition-colors cursor-pointer"
+        >
+          <GearIcon className="w-5 h-5 text-text-secondary" />
+          Settings
+        </button>
+      )}
+
+      <button
+        onClick={() => {
+          onClose();
+          onLogout();
+        }}
+        className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-text-primary hover:bg-neutral-50 transition-colors cursor-pointer"
+      >
+        <LogoutIcon className="w-5 h-5 text-text-secondary" />
+        Log out
+      </button>
+    </div>
+  );
+}
diff --git a/app/components/user-menu/index.ts b/app/components/user-menu/index.ts
new file mode 100644
index 0000000..611d249
--- /dev/null
+++ b/app/components/user-menu/index.ts
@@ -0,0 +1,2 @@
+export { default as UserMenuPopover } from "./UserMenuPopover";
+export { default as Branding } from "./Branding";
diff --git a/app/hooks/useConfigs.ts b/app/hooks/useConfigs.ts
index 5613802..2e9e5c0 100644
--- a/app/hooks/useConfigs.ts
+++ b/app/hooks/useConfigs.ts
@@ -69,15 +69,15 @@ export function useConfigs(options?: { pageSize?: number }): UseConfigsResult {
   const [error, setError] = useState<string | null>(null);
   const [isCached, setIsCached] = useState<boolean>(false);
   const [totalKnownCount, setTotalKnownCount] = useState<number>(0);
-  const { activeKey, isHydrated } = useAuth();
-  const apiKey = activeKey?.key;
+  const { activeKey, isHydrated, isAuthenticated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
 
   const fetchConfigs = useCallback(
     async (force: boolean = false) => {
       if (!isHydrated) return;
 
-      if (!apiKey) {
-        setError("No API key found. Please add an API key in the Keystore.");
+      if (!isAuthenticated) {
+        setError("Please log in to continue.");
         setIsLoading(false);
         return;
       }
@@ -239,7 +239,7 @@ export function useConfigs(options?: { pageSize?: number }): UseConfigsResult {
         return;
       }
 
-      if (!apiKey) return;
+      if (!isAuthenticated) return;
 
       const loadPromise = (async () => {
         const versionsData = await apiFetch<{
@@ -288,7 +288,7 @@ export function useConfigs(options?: { pageSize?: number }): UseConfigsResult {
       const existing = pendingSingleVersionLoads.get(key);
       if (existing) return existing;
 
-      if (!apiKey) return null;
+      if (!isAuthenticated) return null;
 
       const configSource = configs.find((c) => c.config_id === config_id);
       // Fall back to the lightweight allConfigMeta when the config hasn't been detail-fetched yet
@@ -364,8 +364,8 @@ export function useConfigs(options?: { pageSize?: number }): UseConfigsResult {
   const loadMoreConfigs = useCallback(async () => {
     if (!configState.allConfigMeta || configState.allConfigMeta.length === 0)
       return;
-    const apiKey = activeKey?.key;
-    if (!apiKey) return;
+    const localApiKey = activeKey?.key ?? "";
+    if (!isAuthenticated) return;
 
     const loadedIds = new Set(
       (configState.inMemoryCache?.configs ?? configs).map((c) => c.config_id),
@@ -384,7 +384,11 @@ export function useConfigs(options?: { pageSize?: number }): UseConfigsResult {
 
     configState.pendingLoadMore = (async () => {
       const { newVersions, newVersionCounts, newConfigMeta } =
-        await fetchNextConfigBatch(apiKey, loadedIds, pageSize ?? PAGE_SIZE);
+        await fetchNextConfigBatch(
+          localApiKey,
+          loadedIds,
+          pageSize ?? PAGE_SIZE,
+        );
 
       setConfigs((prev) => {
         const merged = [...prev, ...newVersions];
diff --git a/app/hooks/usePaginatedList.ts b/app/hooks/usePaginatedList.ts
index 21f64d0..dc038f2 100644
--- a/app/hooks/usePaginatedList.ts
+++ b/app/hooks/usePaginatedList.ts
@@ -49,8 +49,8 @@ export function usePaginatedList<T>(options: {
     limit = DEFAULT_PAGE_LIMIT,
     extraParams,
   } = options;
-  const { activeKey, isHydrated } = useAuth();
-  const apiKey = activeKey?.key;
+  const { activeKey, isHydrated, isAuthenticated } = useAuth();
+  const apiKey = activeKey?.key ?? "";
 
   const [items, setItems] = useState<T[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -63,8 +63,8 @@ export function usePaginatedList<T>(options: {
 
   const fetchPage = useCallback(
     async (skip: number, replace: boolean) => {
-      if (!apiKey) {
-        setError("No API key found. Please add an API key in the Keystore.");
+      if (!isAuthenticated) {
+        setError("Please log in to continue.");
         return;
       }
 
@@ -91,13 +91,13 @@ export function usePaginatedList<T>(options: {
       setHasMore(data.metadata?.has_more ?? false);
       skipRef.current = skip + newItems.length;
     },
-    [apiKey, endpoint, query, limit, extraParams],
+    [apiKey, isAuthenticated, endpoint, query, limit, extraParams],
   );
 
   useEffect(() => {
     if (!isHydrated) return;
-    if (!apiKey) {
-      setError("No API key found. Please add an API key in the Keystore.");
+    if (!isAuthenticated) {
+      setError("Please log in to continue.");
       setIsLoading(false);
       return;
     }
@@ -121,7 +121,7 @@ export function usePaginatedList<T>(options: {
     return () => {
       cancelled = true;
     };
-  }, [fetchPage, isHydrated, apiKey]);
+  }, [fetchPage, isHydrated, apiKey, isAuthenticated]);
 
   const loadMore = useCallback(() => {
     if (loadingMoreRef.current || !hasMore || isLoading) return;
diff --git a/app/layout.tsx b/app/layout.tsx
index 3396066..77bc11b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,7 @@
 import type { Metadata } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
-import { ToastProvider } from "@/app/components/Toast";
-import { AuthProvider } from "@/app/lib/context/AuthContext";
-import { AppProvider } from "@/app/lib/context/AppContext";
+import { Providers } from "@/app/components/providers";
 
 const inter = Inter({
   variable: "--font-sans",
@@ -32,11 +30,7 @@ export default function RootLayout({
       <body
         className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}
       >
-        <ToastProvider>
-          <AuthProvider>
-            <AppProvider>{children}</AppProvider>
-          </AuthProvider>
-        </ToastProvider>
+        <Providers>{children}</Providers>
       </body>
     </html>
   );
diff --git a/app/lib/apiClient.ts b/app/lib/apiClient.ts
index c0970a7..8a7ff47 100644
--- a/app/lib/apiClient.ts
+++ b/app/lib/apiClient.ts
@@ -1,12 +1,15 @@
 import { NextRequest } from "next/server";
+import { AUTH_EXPIRED_EVENT } from "@/app/lib/constants";
 
 const BACKEND_URL = process.env.BACKEND_URL || "http://localhost:8000";
 export type UploadPhase = "uploading" | "processing" | "done";
 
+/** Coalesces concurrent refresh calls into a single request. */
+let refreshPromise: Promise<boolean> | null = null;
+
 /**
- * Passthrough proxy helper for Next.js route handlers.
- * Extracts X-API-KEY from the incoming request and forwards it to the backend.
- * Returns raw { status, data } so the route handler can relay the exact HTTP status.
+ * Forwards a request to the backend, relaying auth headers (X-API-KEY, Cookie).
+ * Returns raw { status, data, headers } so the route handler can relay the response.
  */
 export async function apiClient(
   request: NextRequest | Request,
@@ -14,23 +17,65 @@ export async function apiClient(
   options: RequestInit = {},
 ) {
   const apiKey = request.headers.get("X-API-KEY") || "";
+  const cookie = request.headers.get("Cookie") || "";
   const headers = new Headers(options.headers);
-  // Don't set Content-Type for FormData (browser sets it with boundary)
   if (!(options.body instanceof FormData) && !headers.has("Content-Type")) {
     headers.set("Content-Type", "application/json");
   }
   headers.set("X-API-KEY", apiKey);
+  if (cookie) headers.set("Cookie", cookie);
 
   const response = await fetch(`${BACKEND_URL}${endpoint}`, {
     ...options,
     headers,
+    credentials: "include",
   });
 
-  // 204 No Content has no body
   const text = response.status === 204 ? "" : await response.text();
   const data = text ? JSON.parse(text) : null;
 
-  return { status: response.status, data };
+  return { status: response.status, data, headers: response.headers };
+}
+
+/** Parse an error body into a readable message string. */
+function extractErrorMessage(
+  body: Record<string, unknown>,
+  fallback: string,
+): string {
+  const msg =
+    (body.error as string) ||
+    (body.message as string) ||
+    (body.detail as string) ||
+    "";
+  return msg || fallback;
+}
+
+/** Dispatch the auth-expired event (client-side only). */
+function dispatchAuthExpired() {
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent(AUTH_EXPIRED_EVENT));
+  }
+}
+
+/** Attempt a silent token refresh. Returns true if new cookies were set. */
+async function tryRefreshToken(): Promise<boolean> {
+  if (refreshPromise) return refreshPromise;
+
+  refreshPromise = (async () => {
+    try {
+      const res = await fetch("/api/v1/auth/refresh", {
+        method: "POST",
+        credentials: "include",
+      });
+      return res.ok;
+    } catch {
+      return false;
+    }
+  })().finally(() => {
+    refreshPromise = null;
+  });
+
+  return refreshPromise;
 }
 
 /**
@@ -112,27 +157,70 @@ export function uploadWithProgress<T>(
 
 /**
  * Client-side fetch helper for Next.js route handlers (/api/*).
- * Attaches the X-API-KEY header and throws on non-OK responses.
- * Use this in "use client" pages instead of raw fetch calls.
+ *
+ * - Attaches X-API-KEY header and `credentials: "include"` for cookie auth.
+ * - On **403 "revoked"**: forces immediate logout (no refresh).
+ * - On **401**: tries a silent token refresh, retries once, then logs out.
+ * - All other errors are thrown as-is.
  */
 export async function apiFetch<T>(
   url: string,
   apiKey: string,
   options: RequestInit = {},
 ): Promise<T> {
-  const headers = new Headers(options.headers);
-  if (!(options.body instanceof FormData)) {
-    headers.set("Content-Type", "application/json");
+  const buildHeaders = () => {
+    const headers = new Headers(options.headers);
+    if (!(options.body instanceof FormData)) {
+      headers.set("Content-Type", "application/json");
+    }
+    headers.set("X-API-KEY", apiKey);
+    return headers;
+  };
+
+  const doFetch = () =>
+    fetch(url, { ...options, headers: buildHeaders(), credentials: "include" });
+
+  const res = await doFetch();
+
+  // Response OK → return parsed JSON
+  if (res.ok) return (await res.json()) as T;
+
+  const body = (await res.json().catch(() => ({}))) as Record<string, unknown>;
+  const message = extractErrorMessage(body, `Request failed: ${res.status}`);
+
+  // 403 with "revoked" → force logout, no refresh attempt
+  if (res.status === 403 && message.toLowerCase().includes("revoked")) {
+    dispatchAuthExpired();
+    throw new Error(message.trim() || "Access revoked. Please log in again.");
   }
-  headers.set("X-API-KEY", apiKey);
-  const res = await fetch(url, {
-    ...options,
-    headers,
-  });
-  const data = await res.json();
-  if (!res.ok)
+
+  // Non-401 errors → throw immediately
+  if (res.status !== 401) {
+    throw new Error(message);
+  }
+
+  // Auth endpoints (login, register, etc.) — never auto-refresh, just throw
+  if (url.startsWith("/api/auth/")) {
+    throw new Error(message);
+  }
+
+  // 401 → attempt silent token refresh, then retry once
+  const refreshed = await tryRefreshToken();
+
+  if (refreshed) {
+    const retry = await doFetch();
+    if (retry.ok) return (await retry.json()) as T;
+
+    const retryBody = (await retry.json().catch(() => ({}))) as Record<
+      string,
+      unknown
+    >;
     throw new Error(
-      data.error || data.message || `Request failed: ${res.status}`,
+      extractErrorMessage(retryBody, `Request failed: ${retry.status}`),
     );
-  return data as T;
+  }
+
+  // Refresh failed → both tokens expired, force logout
+  dispatchAuthExpired();
+  throw new Error("Session expired. Please log in again.");
 }
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 967ff50..274db8d 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -4,8 +4,18 @@
 
 import { ConfigBlob } from "@/app/lib/types/promptEditor";
 
+// localStorage keys
+export const STORAGE_KEYS = {
+  API_KEYS: "kaapi_api_keys",
+  SESSION: "kaapi_session",
+  CONFIGS_CACHE: "kaapi_configs_cache",
+  COLLECTION_CACHE: "collection_job_cache",
+  DOCUMENT_SIZES: "document_file_sizes",
+  SIDEBAR_MENUS: "sidebar-expanded-menus",
+} as const;
+
 /** localStorage key for the config cache */
-export const CACHE_KEY = "kaapi_configs_cache";
+export const CACHE_KEY = STORAGE_KEYS.CONFIGS_CACHE;
 
 /** Cache is considered stale after 5 minutes */
 export const CACHE_MAX_AGE_MS = 5 * 60 * 1000;
@@ -22,6 +32,9 @@ export const MAX_DOCUMENT_SIZE_BYTES = MAX_DOCUMENT_SIZE_MB * 1024 * 1024;
 /** Custom event dispatched when background validation invalidates the in-memory cache */
 export const CACHE_INVALIDATED_EVENT = "kaapi:config-cache-invalidated";
 
+/** Dispatched when the user's session is no longer valid (expired or revoked). */
+export const AUTH_EXPIRED_EVENT = "kaapi:auth-expired";
+
 export const PROVIDES_OPTIONS = [
   { value: "openai", label: "OpenAI" },
   { value: "anthropic", label: "Anthropic" },
diff --git a/app/lib/context/AuthContext.tsx b/app/lib/context/AuthContext.tsx
index c977f09..1bf4131 100644
--- a/app/lib/context/AuthContext.tsx
+++ b/app/lib/context/AuthContext.tsx
@@ -8,27 +8,16 @@ import {
   useEffect,
 } from "react";
 import { APIKey } from "@/app/lib/types/credentials";
+import {
+  User,
+  GoogleProfile,
+  Session,
+  AuthContextValue,
+} from "@/app/lib/types/auth";
 import { apiFetch } from "@/app/lib/apiClient";
-
-const STORAGE_KEY = "kaapi_api_keys";
-
-export interface User {
-  id: number;
-  email: string;
-  full_name: string;
-  is_active: boolean;
-  is_superuser: boolean;
-}
-
-interface AuthContextValue {
-  apiKeys: APIKey[];
-  activeKey: APIKey | null;
-  isHydrated: boolean;
-  currentUser: User | null;
-  addKey: (key: APIKey) => void;
-  removeKey: (id: string) => void;
-  setKeys: (keys: APIKey[]) => void;
-}
+import { AUTH_EXPIRED_EVENT, STORAGE_KEYS } from "@/app/lib/constants";
+import { clearAllStorage } from "@/app/lib/utils";
+export type { User, GoogleProfile, Session } from "@/app/lib/types/auth";
 
 const AuthContext = createContext<AuthContextValue | null>(null);
 
@@ -36,44 +25,75 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [apiKeys, setApiKeys] = useState<APIKey[]>([]);
   const [isHydrated, setIsHydrated] = useState(false);
   const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [session, setSession] = useState<Session | null>(null);
 
-  // Initialize from localStorage after hydration to avoid SSR mismatch.
+  // Initialize from localStorage after hydration
   useEffect(() => {
     try {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored) setApiKeys(JSON.parse(stored));
+      const storedKeys = localStorage.getItem(STORAGE_KEYS.API_KEYS);
+      if (storedKeys) setApiKeys(JSON.parse(storedKeys));
+
+      const storedSession = localStorage.getItem(STORAGE_KEYS.SESSION);
+      if (storedSession) {
+        const parsed = JSON.parse(storedSession) as Session;
+        setSession(parsed);
+        if (parsed.user) setCurrentUser(parsed.user);
+      }
     } catch {
       /* ignore malformed data */
     }
     setIsHydrated(true);
   }, []);
 
+  // Always fetch the latest user profile on hydration.
   useEffect(() => {
-    const apiKey = apiKeys[0]?.key;
-    if (!apiKey || !isHydrated) return;
+    if (!isHydrated) return;
+    const hasApiKey = !!apiKeys[0]?.key;
+    const hasSession = !!session;
+    if (!hasApiKey && !hasSession) return;
 
     let cancelled = false;
 
     (async () => {
       try {
-        const data = await apiFetch<User>("/api/users/me", apiKey);
-        if (!cancelled) setCurrentUser(data);
+        const res = await apiFetch<{ success: boolean; data: User } | User>(
+          "/api/users/me",
+          apiKeys[0]?.key ?? "",
+        );
+        const userData =
+          "success" in res && res.data ? res.data : (res as User);
+        if (!cancelled) {
+          setCurrentUser(userData);
+          const storedRaw = localStorage.getItem(STORAGE_KEYS.SESSION);
+          if (storedRaw) {
+            try {
+              const stored = JSON.parse(storedRaw);
+              stored.user = userData;
+              localStorage.setItem(
+                STORAGE_KEYS.SESSION,
+                JSON.stringify(stored),
+              );
+            } catch {
+              /* ignore */
+            }
+          }
+        }
       } catch {
-        // silently ignore — user info is non-critical
+        // silently ignore
       }
     })();
 
     return () => {
       cancelled = true;
     };
-  }, [apiKeys, isHydrated]);
+  }, [apiKeys, session, isHydrated]);
 
   const persist = useCallback((keys: APIKey[]) => {
     setApiKeys(keys);
     if (keys.length > 0) {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(keys));
+      localStorage.setItem(STORAGE_KEYS.API_KEYS, JSON.stringify(keys));
     } else {
-      localStorage.removeItem(STORAGE_KEY);
+      localStorage.removeItem(STORAGE_KEYS.API_KEYS);
     }
   }, []);
 
@@ -87,16 +107,61 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   );
   const setKeys = useCallback((keys: APIKey[]) => persist(keys), [persist]);
 
+  const loginWithGoogle = useCallback(
+    (accessToken: string, user?: User, googleProfile?: GoogleProfile) => {
+      const newSession: Session = {
+        accessToken,
+        user: user ?? null,
+        googleProfile: googleProfile ?? null,
+      };
+      setSession(newSession);
+      localStorage.setItem(STORAGE_KEYS.SESSION, JSON.stringify(newSession));
+
+      if (user) setCurrentUser(user);
+    },
+    [],
+  );
+
+  const logout = useCallback(async () => {
+    try {
+      await fetch("/api/auth/logout", {
+        method: "POST",
+        credentials: "include",
+      });
+    } catch {
+      // Clear local state even if the backend call fails
+    }
+    setSession(null);
+    setCurrentUser(null);
+    clearAllStorage();
+    setApiKeys([]);
+  }, [persist]);
+
+  // logout when both access + refresh tokens are expired
+  useEffect(() => {
+    const handleExpired = () => logout();
+    window.addEventListener(AUTH_EXPIRED_EVENT, handleExpired);
+    return () => window.removeEventListener(AUTH_EXPIRED_EVENT, handleExpired);
+  }, [logout]);
+
+  const activeKey = apiKeys[0] ?? null;
+  const isAuthenticated = !!activeKey || !!session;
+
   return (
     <AuthContext.Provider
       value={{
         apiKeys,
-        activeKey: apiKeys[0] ?? null,
+        activeKey,
         isHydrated,
         currentUser,
+        googleProfile: session?.googleProfile ?? null,
+        session,
+        isAuthenticated,
         addKey,
         removeKey,
         setKeys,
+        loginWithGoogle,
+        logout,
       }}
     >
       {children}
diff --git a/app/lib/navConfig.ts b/app/lib/navConfig.ts
new file mode 100644
index 0000000..57e999a
--- /dev/null
+++ b/app/lib/navConfig.ts
@@ -0,0 +1,46 @@
+import { NavItemConfig, SettingsNavSection } from "@/app/lib/types/nav";
+
+export const SETTINGS_NAV: SettingsNavSection[] = [
+  {
+    label: "Settings",
+    items: [
+      { name: "Credentials", route: "/settings/credentials", icon: "key" },
+      { name: "Onboarding", route: "/settings/onboarding", icon: "sliders" },
+    ],
+  },
+];
+
+export const NAV_ITEMS: NavItemConfig[] = [
+  {
+    name: "Evaluations",
+    icon: "clipboard",
+    submenu: [
+      { name: "Text", route: "/evaluations" },
+      { name: "Speech-to-Text", route: "/speech-to-text" },
+      { name: "Text-to-Speech", route: "/text-to-speech" },
+    ],
+    gateDescription:
+      "Log in to compare model response quality across different configs.",
+  },
+  {
+    name: "Documents",
+    route: "/document",
+    icon: "document",
+    gateDescription: "Log in to upload and manage your documents.",
+  },
+  {
+    name: "Knowledge Base",
+    route: "/knowledge-base",
+    icon: "book",
+    gateDescription: "Log in to manage your knowledge bases for RAG.",
+  },
+  {
+    name: "Configurations",
+    icon: "gear",
+    submenu: [
+      { name: "Library", route: "/configurations" },
+      { name: "Prompt Editor", route: "/configurations/prompt-editor" },
+    ],
+    gateDescription: "Log in to manage prompts and model configurations.",
+  },
+];
diff --git a/app/lib/types/auth.ts b/app/lib/types/auth.ts
new file mode 100644
index 0000000..0c8f8cf
--- /dev/null
+++ b/app/lib/types/auth.ts
@@ -0,0 +1,70 @@
+import { APIKey } from "./credentials";
+
+export interface User {
+  id: number;
+  email: string;
+  full_name: string;
+  is_active: boolean;
+  is_superuser: boolean;
+}
+
+export interface GoogleProfile {
+  email?: string;
+  name?: string;
+  picture?: string;
+  given_name?: string;
+  family_name?: string;
+  [key: string]: unknown;
+}
+
+export interface Project {
+  id: number;
+  name: string;
+}
+
+export interface GoogleAuthResponse {
+  success: boolean;
+  data: {
+    access_token: string;
+    token_type: string;
+    user: User;
+    google_profile: GoogleProfile;
+    requires_project_selection: boolean;
+    available_projects: Project[];
+  };
+  error?: string;
+}
+
+export interface AuthTokenResponse {
+  success: boolean;
+  data: {
+    access_token: string;
+    token_type: string;
+  };
+  error?: string;
+}
+
+export interface Session {
+  accessToken: string;
+  user: User | null;
+  googleProfile: GoogleProfile | null;
+}
+
+export interface AuthContextValue {
+  apiKeys: APIKey[];
+  activeKey: APIKey | null;
+  isHydrated: boolean;
+  currentUser: User | null;
+  googleProfile: GoogleProfile | null;
+  session: Session | null;
+  isAuthenticated: boolean;
+  addKey: (key: APIKey) => void;
+  removeKey: (id: string) => void;
+  setKeys: (keys: APIKey[]) => void;
+  loginWithGoogle: (
+    accessToken: string,
+    user?: User,
+    googleProfile?: GoogleProfile,
+  ) => void;
+  logout: () => Promise<void>;
+}
diff --git a/app/lib/types/dataset.ts b/app/lib/types/dataset.ts
new file mode 100644
index 0000000..0018781
--- /dev/null
+++ b/app/lib/types/dataset.ts
@@ -0,0 +1,10 @@
+export interface Dataset {
+  dataset_id: number;
+  dataset_name: string;
+  description?: string;
+  total_items: number;
+  original_items: number;
+  duplication_factor: number;
+  langfuse_dataset_id: string;
+  object_store_url: string;
+}
diff --git a/app/lib/types/knowledgeBase.ts b/app/lib/types/knowledgeBase.ts
new file mode 100644
index 0000000..81810f5
--- /dev/null
+++ b/app/lib/types/knowledgeBase.ts
@@ -0,0 +1,39 @@
+import { Document } from "./document";
+
+export interface Collection {
+  id: string;
+  name?: string;
+  description?: string;
+  knowledge_base_id?: string;
+  inserted_at: string;
+  updated_at: string;
+  status?: string;
+  job_id?: string;
+  documents?: Document[];
+}
+
+export interface JobStatusData {
+  status?: string | null;
+  collection?: { id?: string; knowledge_base_id?: string };
+  collection_id?: string | null;
+}
+
+export interface CollectionResponse {
+  data?: Collection[] | Collection;
+}
+
+export interface DocumentResponse {
+  data?: Document[];
+}
+
+export interface CreateCollectionResponse {
+  data?: { job_id?: string };
+}
+
+export interface DeleteCollectionResponse {
+  data?: { job_id?: string };
+}
+
+export interface DocumentDetailResponse {
+  data?: Document;
+}
diff --git a/app/lib/types/nav.ts b/app/lib/types/nav.ts
new file mode 100644
index 0000000..e17d3ec
--- /dev/null
+++ b/app/lib/types/nav.ts
@@ -0,0 +1,53 @@
+import React from "react";
+
+export interface NavSubItem {
+  name: string;
+  route: string;
+}
+
+export interface NavItemConfig {
+  name: string;
+  icon: string;
+  route?: string;
+  submenu?: NavSubItem[];
+  gateDescription?: string;
+  superuserOnly?: boolean;
+}
+
+export interface SubMenuItem {
+  name: string;
+  route?: string;
+  comingSoon?: boolean;
+  submenu?: SubMenuItem[];
+}
+
+export interface MenuItem {
+  name: string;
+  route?: string;
+  icon: React.ReactNode;
+  submenu?: SubMenuItem[];
+  gateDescription?: string;
+}
+
+export interface SidebarProps {
+  collapsed: boolean;
+  activeRoute?: string;
+}
+
+export interface GatePopoverProps {
+  name: string;
+  description: string;
+  anchorRect: DOMRect;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+  onLogin: () => void;
+}
+
+export interface SettingsNavItem extends NavSubItem {
+  icon?: string;
+}
+
+export interface SettingsNavSection {
+  label: string;
+  items: SettingsNavItem[];
+}
diff --git a/app/lib/types/speechToText.ts b/app/lib/types/speechToText.ts
new file mode 100644
index 0000000..c28d76f
--- /dev/null
+++ b/app/lib/types/speechToText.ts
@@ -0,0 +1,148 @@
+export type Tab = "datasets" | "evaluations";
+
+export interface AudioFile {
+  id: string;
+  file: File;
+  name: string;
+  size: number;
+  base64: string;
+  mediaType: string;
+  groundTruth: string;
+  languageId: number;
+  fileId?: string;
+}
+
+export interface DatasetMetadata {
+  sample_count?: number;
+  [key: string]: string | number | boolean | undefined;
+}
+
+export interface Dataset {
+  id: number;
+  name: string;
+  description?: string;
+  type: string;
+  language_id: number | null;
+  object_store_url: string | null;
+  dataset_metadata: DatasetMetadata;
+  organization_id: number;
+  project_id: number;
+  inserted_at: string;
+  updated_at: string;
+}
+
+export interface STTScore {
+  wip: number;
+  wer: number;
+  cer: number;
+  lenient_wer: number;
+  [key: string]: number;
+}
+
+export interface STTRun {
+  id: number;
+  run_name: string;
+  dataset_name: string;
+  dataset_id: number;
+  type: string;
+  language_id: number | null;
+  models: string[] | null;
+  status: string;
+  total_items: number;
+  score: STTScore | null;
+  error_message: string | null;
+  organization_id: number;
+  project_id: number;
+  inserted_at: string;
+  updated_at: string;
+}
+
+export interface STTSampleMetadata {
+  original_filename?: string;
+  [key: string]: string | number | boolean | undefined;
+}
+
+export interface STTSample {
+  id: number;
+  text: string;
+  ground_truth: string;
+  language_id: number;
+  file_id?: string;
+  signed_url?: string;
+  sample_metadata?: STTSampleMetadata;
+}
+
+export interface STTResultRaw {
+  id: number;
+  transcription: string | null;
+  provider: string;
+  status: string;
+  score: STTScore | null;
+  is_correct: boolean | null;
+  comment: string | null;
+  error_message: string | null;
+  stt_sample_id: number;
+  evaluation_run_id: number;
+  organization_id: number;
+  project_id: number;
+  inserted_at: string;
+  updated_at: string;
+  sample?: STTSample;
+}
+
+export interface STTResult extends STTResultRaw {
+  sampleName?: string;
+  groundTruth?: string;
+  fileId?: string;
+  signedUrl?: string;
+}
+
+export interface Language {
+  id: number;
+  code: string;
+  name: string;
+}
+
+export const DEFAULT_LANGUAGES: Language[] = [
+  { id: 1, code: "en", name: "English" },
+  { id: 2, code: "hi", name: "Hindi" },
+];
+
+export interface RawLanguage {
+  id: number;
+  locale?: string;
+  code?: string;
+  label?: string;
+  name?: string;
+  is_active?: boolean;
+}
+
+export interface LanguagesResponse {
+  data?: { data?: RawLanguage[] } | RawLanguage[];
+  languages?: RawLanguage[];
+}
+
+export interface DatasetsResponse {
+  datasets?: Dataset[];
+  data?: Dataset[];
+}
+
+export interface RunsResponse {
+  runs?: STTRun[];
+  data?: STTRun[];
+}
+
+export interface RunDetailResponse {
+  results?: STTResultRaw[];
+  data?: STTResultRaw[] | { results?: STTResultRaw[] };
+}
+
+export interface CreateDatasetResponse {
+  id: number;
+  name: string;
+}
+
+export interface CreateRunResponse {
+  id: number;
+  run_name: string;
+}
diff --git a/app/lib/types/textToSpeech.ts b/app/lib/types/textToSpeech.ts
new file mode 100644
index 0000000..78ff2d3
--- /dev/null
+++ b/app/lib/types/textToSpeech.ts
@@ -0,0 +1,117 @@
+export type TTSTab = "datasets" | "evaluations";
+
+export interface TextSample {
+  id: string;
+  text: string;
+}
+
+export interface TTSDatasetMetadata {
+  sample_count?: number;
+  [key: string]: string | number | boolean | undefined;
+}
+
+export interface TTSDataset {
+  id: number;
+  name: string;
+  description?: string;
+  type: string;
+  object_store_url: string | null;
+  dataset_metadata: TTSDatasetMetadata;
+  organization_id: number;
+  project_id: number;
+  inserted_at: string;
+  updated_at: string;
+}
+
+export interface TTSRunMetadata {
+  voice_name?: string;
+  style_prompt?: string;
+  [key: string]: string | number | boolean | undefined;
+}
+
+export interface TTSScore {
+  "Speech Naturalness"?: string | null;
+  speech_naturalness?: string;
+  "Pronunciation Accuracy"?: string | null;
+  pronunciation_accuracy?: string;
+  [key: string]: string | number | boolean | null | undefined;
+}
+
+export interface TTSRun {
+  id: number;
+  run_name: string;
+  dataset_name: string;
+  dataset_id: number;
+  type: string;
+  models: string[] | null;
+  status: string;
+  total_items: number;
+  score: TTSScore | null;
+  error_message: string | null;
+  run_metadata: TTSRunMetadata | null;
+  organization_id: number;
+  project_id: number;
+  inserted_at: string;
+  updated_at: string;
+}
+
+export interface TTSResultRaw {
+  id: number;
+  sample_text: string;
+  object_store_url: string | null;
+  duration_seconds: number | null;
+  size_bytes: number | null;
+  provider: string;
+  status: string;
+  score: TTSScore | null;
+  is_correct: boolean | null;
+  comment: string | null;
+  error_message: string | null;
+  evaluation_run_id: number;
+  organization_id: number;
+  project_id: number;
+  inserted_at: string;
+  updated_at: string;
+  signed_url?: string;
+  sample?: { signed_url?: string };
+}
+
+export interface TTSResult extends Omit<TTSResultRaw, "sample"> {
+  signedUrl?: string;
+}
+
+// API response types
+export interface TTSDatasetsResponse {
+  datasets?: TTSDataset[];
+  data?: TTSDataset[];
+}
+
+export interface TTSRunsResponse {
+  runs?: TTSRun[];
+  data?: TTSRun[];
+}
+
+export interface TTSRunDetailResponse {
+  results?: TTSResultRaw[];
+  data?: TTSResultRaw[] | { results?: TTSResultRaw[] };
+}
+
+export interface TTSDatasetDetailResponse {
+  csv_content?: string;
+}
+
+export interface TTSCreateDatasetResponse {
+  id: number;
+  name: string;
+}
+
+export interface TTSCreateRunResponse {
+  id: number;
+  run_name: string;
+}
+
+export interface TTSFeedbackPayload {
+  is_correct?: boolean | null;
+  comment?: string;
+  score?: TTSScore;
+}
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 417f572..f3435ff 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -9,6 +9,7 @@ import {
 } from "@/app/lib/types/configs";
 import { SavedConfig, ConfigGroup } from "./types/configs";
 import { isGpt5Model } from "@/app/lib/models";
+import { STORAGE_KEYS } from "@/app/lib/constants";
 
 export function timeAgo(dateStr: string): string {
   const date =
@@ -56,6 +57,11 @@ export const formatRelativeTime = (timestamp: string | number): string => {
   return new Date(date).toLocaleDateString();
 };
 
+/** Clear all app-related localStorage */
+export function clearAllStorage() {
+  Object.values(STORAGE_KEYS).forEach((key) => localStorage.removeItem(key));
+}
+
 export const invalidateConfigCache = (): void => {
   clearConfigCache();
 };
@@ -64,7 +70,7 @@ export const invalidateConfigCache = (): void => {
 export const getApiKey = (): string | null => {
   if (typeof window === "undefined") return null;
   try {
-    const stored = localStorage.getItem("kaapi_api_keys");
+    const stored = localStorage.getItem(STORAGE_KEYS.API_KEYS);
     if (stored) {
       const keys = JSON.parse(stored);
       return keys.length > 0 ? keys[0].key : null;
diff --git a/next.config.ts b/next.config.ts
index e9ffa30..5a2c26e 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,14 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+      },
+    ],
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 48bbccf..3aa4d57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "kaapi-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@react-oauth/google": "^0.13.4",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
         "next": "^16.0.7",
@@ -1250,6 +1251,16 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@react-oauth/google": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.13.4.tgz",
+      "integrity": "sha512-hGKyNEH+/PK8M0sFEuo3MAEk0txtHpgs94tDQit+s2LXg7b6z53NtzHfqDvoB2X8O6lGB+FRg80hY//X6hfD+w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
diff --git a/package.json b/package.json
index 38e2ba0..e65d7f7 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@react-oauth/google": "^0.13.4",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "next": "^16.0.7",
diff --git a/test.json b/test.json
deleted file mode 100644
index 5696b11..0000000
--- a/test.json
+++ /dev/null
@@ -1,73 +0,0 @@
-{
-  "cosine_similarity": {
-    "avg": 0.5687263700870495,
-    "std": 0.10842963051331153,
-    "total_pairs": 16,
-    "per_item_scores": [
-      {
-        "trace_id": "eb20f767-4ede-47fe-a63f-5852b9eb68ed",
-        "cosine_similarity": 0.6871883188105149
-      },
-      {
-        "trace_id": "7565f0c2-25f5-403f-8315-fb363420ca49",
-        "cosine_similarity": 0.46126594344912164
-      },
-      {
-        "trace_id": "20f42513-4cf9-40e4-930a-8470ff1a22a7",
-        "cosine_similarity": 0.6446542965396557
-      },
-      {
-        "trace_id": "f692593b-81c3-4f9b-bb46-6dbe2b1c766c",
-        "cosine_similarity": 0.46120519725439024
-      },
-      {
-        "trace_id": "9dc021cc-d78f-4c34-b659-1dfb1a736517",
-        "cosine_similarity": 0.6650813181568475
-      },
-      {
-        "trace_id": "85279581-2c33-407d-8ee3-294a2f385044",
-        "cosine_similarity": 0.46124023257743163
-      },
-      {
-        "trace_id": "3897ce10-041b-4205-ab52-923ca643dd57",
-        "cosine_similarity": 0.6618396771024554
-      },
-      {
-        "trace_id": "b060b217-dcf8-4173-813c-081c407f684c",
-        "cosine_similarity": 0.6984795184310869
-      },
-      {
-        "trace_id": "967fc160-5591-4be2-925a-7804256b7673",
-        "cosine_similarity": 0.7057062301313111
-      },
-      {
-        "trace_id": "7ac1a6e7-eb96-40b4-9765-80470de9675a",
-        "cosine_similarity": 0.6578021199890051
-      },
-      {
-        "trace_id": "4c72858e-15c0-4b70-96ec-b615361d30b4",
-        "cosine_similarity": 0.6888293517053641
-      },
-      {
-        "trace_id": "c309dbb2-f40c-4334-b9ec-8e773e2bb048",
-        "cosine_similarity": 0.46126594344912164
-      },
-      {
-        "trace_id": "b15c2a6f-884e-4e23-aeb4-b3391a20e6fb",
-        "cosine_similarity": 0.46126594344912164
-      },
-      {
-        "trace_id": "a995898f-4042-45b7-b864-e3dde8c44b34",
-        "cosine_similarity": 0.46126594344912164
-      },
-      {
-        "trace_id": "91b2c87d-d5ac-47a3-8736-df791fcbc5bd",
-        "cosine_similarity": 0.46126594344912164
-      },
-      {
-        "trace_id": "00dd9a33-dc59-48e7-8f50-ff6f6eb7237f",
-        "cosine_similarity": 0.46126594344912164
-      }
-    ]
-  }
-}