diff --git a/app/(main)/configurations/prompt-editor/page.tsx b/app/(main)/configurations/prompt-editor/page.tsx
index 0967ade5..e5bbaf28 100644
--- a/app/(main)/configurations/prompt-editor/page.tsx
+++ b/app/(main)/configurations/prompt-editor/page.tsx
@@ -1,5 +1,6 @@
 /**
- * Prompt WYSIWYG Editor: Manage prompts and configs with versioning, caching, and URL-based navigation support.
+ * Prompt WYSIWYG Editor: Manage prompts and configs with versioning, caching,
+ * and URL-based navigation support.
  */
 
 "use client";
@@ -14,28 +15,19 @@ import HistorySidebar from "@/app/components/prompt-editor/HistorySidebar";
 import PromptEditorPane from "@/app/components/prompt-editor/PromptEditorPane";
 import ConfigEditorPane from "@/app/components/prompt-editor/ConfigEditorPane";
 import DiffView from "@/app/components/prompt-editor/DiffView";
-import { useToast } from "@/app/components/Toast";
 import { Loader } from "@/app/components";
 import { useApp } from "@/app/lib/context/AppContext";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useConfigs } from "@/app/hooks";
-import {
-  SavedConfig,
-  ConfigCreate,
-  ConfigVersionCreate,
-  ConfigVersionItems,
-} from "@/app/lib/types/configs";
-import { invalidateConfigCache } from "@/app/lib/utils";
+import { useConfigPersistence } from "@/app/hooks/useConfigPersistence";
+import { SavedConfig, ConfigVersionItems } from "@/app/lib/types/configs";
 import { configState } from "@/app/lib/store/configStore";
-import { apiFetch } from "@/app/lib/apiClient";
-import { isGpt5Model } from "@/app/lib/models";
 import { DEFAULT_CONFIG } from "@/app/lib/constants";
 
 function PromptEditorContent() {
-  const toast = useToast();
   const searchParams = useSearchParams();
   const { sidebarCollapsed } = useApp();
-  const { activeKey, isAuthenticated } = useAuth();
+  const { activeKey } = useAuth();
   const urlConfigId = searchParams.get("config");
   const urlVersion = searchParams.get("version");
   const showHistory = searchParams.get("history") === "true";
@@ -43,6 +35,7 @@ function PromptEditorContent() {
   const urlDatasetId = searchParams.get("dataset");
   const urlExperimentName = searchParams.get("experiment");
   const fromEvaluations = searchParams.get("from") === "evaluations";
+
   const {
     configs: savedConfigs,
     isLoading,
@@ -52,13 +45,14 @@ function PromptEditorContent() {
     versionItemsMap: hookVersionItemsMap,
     allConfigMeta,
   } = useConfigs({ pageSize: 0 });
-  const [isSaving, setIsSaving] = useState<boolean>(false);
+
   const initialLoadComplete = !isLoading;
   const editorInitialized = React.useRef(false);
   const [editorReady, setEditorReady] = useState<boolean>(!urlConfigId);
   const [stableVersionItemsMap, setStableVersionItemsMap] = useState<
     Record<string, ConfigVersionItems[]>
   >({});
+
   const [currentContent, setCurrentContent] = useState<string>(
     "You are a helpful AI assistant.\nYou provide clear and concise answers.\nYou are polite and professional.",
   );
@@ -82,6 +76,11 @@ function PromptEditorContent() {
   );
   const [compareWith, setCompareWith] = useState<SavedConfig | null>(null);
 
+  const { isSaving, saveConfig, renameConfig } = useConfigPersistence({
+    allConfigMeta,
+    refetchConfigs,
+  });
+
   useEffect(() => {
     if (Object.keys(hookVersionItemsMap).length > 0) {
       setStableVersionItemsMap((prev) => ({ ...prev, ...hookVersionItemsMap }));
@@ -120,53 +119,47 @@ function PromptEditorContent() {
       setCurrentConfigVersion(config.version);
       setTools(config.tools || []);
       setExpandedConfigs((prev) =>
-        prev.has(currentConfigParentId)
+        prev.has(config.config_id)
           ? prev
-          : new Set([...prev, currentConfigParentId]),
+          : new Set([...prev, config.config_id]),
       );
       if (selectInHistory) setSelectedVersion(config);
     },
     [],
   );
 
+  const resetEditor = React.useCallback(() => {
+    setCurrentContent("");
+    setCurrentConfigBlob(DEFAULT_CONFIG);
+    setProvider("openai");
+    setTemperature(0.7);
+    setSelectedConfigId("");
+    setCurrentConfigName("");
+    setCurrentConfigParentId("");
+    setCurrentConfigVersion(0);
+    setTools([]);
+  }, []);
+
   const handleLoadConfig = React.useCallback(
     (config: SavedConfig | null) => {
       if (!config) {
-        // Reset to new config
-        setCurrentContent("");
-        setCurrentConfigBlob(DEFAULT_CONFIG);
-        setProvider("openai");
-        setTemperature(0.7);
-        setSelectedConfigId("");
-        setCurrentConfigName("");
-        setCurrentConfigParentId("");
-        setCurrentConfigVersion(0);
-        setTools([]);
+        resetEditor();
         return;
       }
       loadVersionsForConfig(config.config_id);
       applyConfig(config);
     },
-    [applyConfig, loadVersionsForConfig, DEFAULT_CONFIG],
+    [applyConfig, loadVersionsForConfig, resetEditor],
   );
 
-  // Initialize editor from URL params — runs once, on first load completion
+  // Initialize editor from URL params — runs once
   useEffect(() => {
     if (!initialLoadComplete) return;
     if (editorInitialized.current) return;
     editorInitialized.current = true;
 
-    // If new config is requested, reset to defaults
     if (isNewConfig) {
-      setCurrentContent("");
-      setCurrentConfigBlob(DEFAULT_CONFIG);
-      setProvider("openai");
-      setTemperature(0.7);
-      setSelectedConfigId("");
-      setCurrentConfigName("");
-      setCurrentConfigParentId("");
-      setCurrentConfigVersion(0);
-      setTools([]);
+      resetEditor();
       setEditorReady(true);
       return;
     }
@@ -178,17 +171,14 @@ function PromptEditorContent() {
 
     (async () => {
       await loadVersionsForConfig(urlConfigId);
-
       const items = configState.versionItemsCache[urlConfigId] ?? [];
       if (items.length === 0) {
         setEditorReady(true);
         return;
       }
-
       const versionNum = urlVersion
         ? parseInt(urlVersion)
         : items.reduce((a, b) => (b.version > a.version ? b : a)).version;
-
       const config = await loadSingleVersion(urlConfigId, versionNum);
       if (config) applyConfig(config, showHistory);
       setEditorReady(true);
@@ -202,29 +192,27 @@ function PromptEditorContent() {
     loadVersionsForConfig,
     loadSingleVersion,
     applyConfig,
-    DEFAULT_CONFIG,
+    resetEditor,
   ]);
 
-  // Re-populate version items when missing (e.g. after background cache revalidation wipes versionItemsCache)
+  // Re-populate version items when missing (e.g. after background cache wipe)
   useEffect(() => {
     if (currentConfigParentId && !versionItemsMap[currentConfigParentId]) {
       loadVersionsForConfig(currentConfigParentId);
     }
   }, [currentConfigParentId, versionItemsMap, loadVersionsForConfig]);
 
+  // Track unsaved changes by diffing against the loaded config
   useEffect(() => {
     if (!selectedConfigId) {
       setHasUnsavedChanges(true);
       return;
     }
-
     const selectedConfig = savedConfigs.find((c) => c.id === selectedConfigId);
     if (!selectedConfig) {
       setHasUnsavedChanges(true);
       return;
     }
-
-    // Compare current state with selected config
     const promptChanged = currentContent !== selectedConfig.promptContent;
     const configChanged = hasConfigChanges(currentConfigBlob, {
       completion: {
@@ -238,7 +226,6 @@ function PromptEditorContent() {
         },
       },
     });
-
     setHasUnsavedChanges(promptChanged || configChanged);
   }, [
     selectedConfigId,
@@ -250,176 +237,24 @@ function PromptEditorContent() {
     savedConfigs,
   ]);
 
-  const handleSaveConfig = async () => {
-    if (!currentConfigName.trim()) {
-      toast.error("Please enter a configuration name");
-      return;
-    }
-
-    const apiKey = activeKey?.key ?? "";
-    if (!isAuthenticated) {
-      toast.error("Please log in to save configurations.");
-      return;
-    }
-
-    setIsSaving(true);
-
-    try {
-      const tools = currentConfigBlob.completion.params.tools || [];
-
-      const allKnowledgeBaseIds: string[] = [];
-      let maxNumResults = 20;
-
-      tools.forEach((tool) => {
-        allKnowledgeBaseIds.push(...tool.knowledge_base_ids);
-        // Use max_num_results from first tool (could be made configurable)
-        if (allKnowledgeBaseIds.length === tool.knowledge_base_ids.length) {
-          maxNumResults = tool.max_num_results;
-        }
-      });
-
-      const model = currentConfigBlob.completion.params.model;
-      const gpt5 = isGpt5Model(model);
-
-      const configBlob: ConfigBlob = {
-        completion: {
-          provider: currentConfigBlob.completion.provider,
-          type: currentConfigBlob.completion.type || "text",
-          params: {
-            model,
-            instructions: currentContent,
-            ...(!gpt5 && {
-              temperature: currentConfigBlob.completion.params.temperature,
-            }),
-            ...(allKnowledgeBaseIds.length > 0 && {
-              knowledge_base_ids: allKnowledgeBaseIds,
-              ...(!gpt5 && { max_num_results: maxNumResults }),
-            }),
-          },
-        },
-        ...(currentConfigBlob.input_guardrails?.length && {
-          input_guardrails: currentConfigBlob.input_guardrails,
-        }),
-        ...(currentConfigBlob.output_guardrails?.length && {
-          output_guardrails: currentConfigBlob.output_guardrails,
-        }),
-      };
-
-      const existingConfigMeta = allConfigMeta.find(
-        (m) => m.name === currentConfigName.trim(),
-      );
-
-      if (existingConfigMeta) {
-        const versionCreate: ConfigVersionCreate = {
-          config_blob: configBlob,
-          commit_message: commitMessage.trim() || `Updated prompt and config`,
-        };
-
-        const data = await apiFetch<{ success: boolean; error?: string }>(
-          `/api/configs/${existingConfigMeta.id}/versions`,
-          apiKey,
-          {
-            method: "POST",
-            body: JSON.stringify(versionCreate),
-          },
-        );
-
-        if (!data.success) {
-          toast.error(
-            `Failed to create version: ${data.error || "Unknown error"}`,
-          );
-          return;
-        }
-
-        toast.success(
-          `Configuration "${currentConfigName}" updated! New version created.`,
-        );
-      } else {
-        const configCreate: ConfigCreate = {
-          name: currentConfigName.trim(),
-          description: `${provider} configuration with prompt`,
-          config_blob: configBlob,
-          commit_message: commitMessage.trim() || "Initial version",
-        };
-
-        const data = await apiFetch<{
-          success: boolean;
-          data?: unknown;
-          error?: string;
-        }>("/api/configs", apiKey, {
-          method: "POST",
-          body: JSON.stringify(configCreate),
-        });
-
-        if (!data.success || !data.data) {
-          toast.error(
-            `Failed to create config: ${data.error || "Unknown error"}`,
-          );
-          return;
-        }
-
-        toast.success(
-          `Configuration "${currentConfigName}" created successfully!`,
-        );
-      }
-
-      invalidateConfigCache();
-      await refetchConfigs(true);
-
+  const handleSave = async () => {
+    const ok = await saveConfig({
+      currentConfigName,
+      currentConfigBlob,
+      currentContent,
+      commitMessage,
+      provider,
+    });
+    if (ok) {
       setHasUnsavedChanges(false);
       setCommitMessage("");
-    } catch (e) {
-      console.error("Failed to save config:", e);
-      toast.error("Failed to save configuration. Please try again.");
-    } finally {
-      setIsSaving(false);
     }
   };
 
-  const handleRenameConfig = async (
-    configId: string,
-    newName: string,
-  ): Promise<boolean> => {
-    const apiKey = activeKey?.key ?? "";
-    if (!isAuthenticated) {
-      toast.error("Please log in to rename configurations.");
-      return false;
-    }
-    const trimmed = newName.trim();
-    if (!trimmed) {
-      toast.error("Name cannot be empty.");
-      return false;
-    }
-    if (trimmed === currentConfigName) return true;
-
-    const conflict = allConfigMeta.find(
-      (m) => m.name === trimmed && m.id !== configId,
-    );
-    if (conflict) {
-      toast.error(`A configuration named "${trimmed}" already exists.`);
-      return false;
-    }
-
-    try {
-      const data = await apiFetch<{ success: boolean; error?: string }>(
-        `/api/configs/${configId}`,
-        apiKey,
-        { method: "PATCH", body: JSON.stringify({ name: trimmed }) },
-      );
-      if (!data.success) {
-        toast.error(`Failed to rename: ${data.error || "Unknown error"}`);
-        return false;
-      }
-      setCurrentConfigName(trimmed);
-      invalidateConfigCache();
-      await refetchConfigs(true);
-      toast.success(`Renamed to "${trimmed}"`);
-      return true;
-    } catch (e) {
-      console.error("Failed to rename config:", e);
-      toast.error("Failed to rename configuration.");
-      return false;
-    }
+  const handleRename = async (configId: string, newName: string) => {
+    const ok = await renameConfig(configId, newName, currentConfigName);
+    if (ok) setCurrentConfigName(newName.trim());
+    return ok;
   };
 
   return (
@@ -458,9 +293,7 @@ function PromptEditorContent() {
                     setSelectedVersion(version);
                     setCompareWith(null);
                   }}
-                  onLoadVersion={(version) => {
-                    handleLoadConfig(version);
-                  }}
+                  onLoadVersion={handleLoadConfig}
                   onBackToEditor={() => {
                     setSelectedVersion(null);
                     setCompareWith(null);
@@ -501,13 +334,7 @@ function PromptEditorContent() {
                 ) : (
                   <div className="flex-1 flex flex-col overflow-hidden">
                     <div className="flex flex-1 overflow-hidden">
-                      <div
-                        className="flex min-w-0"
-                        style={{
-                          flex: "1 1 0%",
-                          transition: "flex 0.2s ease-in-out",
-                        }}
-                      >
+                      <div className="flex flex-1 min-w-0 transition-[flex] duration-200 ease-in-out">
                         <PromptEditorPane
                           currentContent={currentContent}
                           onContentChange={setCurrentContent}
@@ -522,7 +349,7 @@ function PromptEditorContent() {
                         savedConfigs={savedConfigs}
                         selectedConfigId={selectedConfigId}
                         boundConfigId={currentConfigParentId}
-                        onRenameConfig={handleRenameConfig}
+                        onRenameConfig={handleRename}
                         onLoadConfig={handleLoadConfig}
                         allConfigMeta={allConfigMeta}
                         loadVersionsForConfig={loadVersionsForConfig}
@@ -530,7 +357,7 @@ function PromptEditorContent() {
                         loadSingleVersion={loadSingleVersion}
                         commitMessage={commitMessage}
                         onCommitMessageChange={setCommitMessage}
-                        onSave={handleSaveConfig}
+                        onSave={handleSave}
                         isSaving={isSaving}
                         apiKey={activeKey?.key ?? ""}
                       />
diff --git a/app/(main)/datasets/page.tsx b/app/(main)/datasets/page.tsx
index 1234bc11..7da82d9c 100644
--- a/app/(main)/datasets/page.tsx
+++ b/app/(main)/datasets/page.tsx
@@ -1,45 +1,46 @@
 /**
- * Datasets.tsx - Dataset Management Interface
- *
- * Allows users to upload CSV datasets and manage them via backend API
+ * Datasets - Dataset Management Interface
+ * Allows users to upload CSV datasets and manage them via backend API.
  */
 
 "use client";
 
-import { useState, useEffect } from "react";
-
+import { useState, useEffect, useCallback } from "react";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import { apiFetch } from "@/app/lib/apiClient";
 import Sidebar from "@/app/components/Sidebar";
-import PageHeader from "@/app/components/PageHeader";
+import { PageHeader } from "@/app/components";
 import { useToast } from "@/app/components/Toast";
+import DatasetListing from "@/app/components/datasets/DatasetListing";
+import UploadDatasetModal from "@/app/components/datasets/UploadDatasetModal";
+import DeleteDatasetModal from "@/app/components/datasets/DeleteDatasetModal";
 import { Dataset } from "@/app/lib/types/dataset";
 
 export const DATASETS_STORAGE_KEY = "kaapi_datasets";
 
+const ITEMS_PER_PAGE = 10;
+
 export default function Datasets() {
   const toast = useToast();
   const { sidebarCollapsed } = useApp();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { activeKey: apiKey, isAuthenticated } = useAuth();
+
   const [datasets, setDatasets] = useState<Dataset[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [datasetName, setDatasetName] = useState("");
   const [duplicationFactor, setDuplicationFactor] = useState("1");
   const [isUploading, setIsUploading] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const { activeKey: apiKey, isAuthenticated } = useAuth();
-  const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 10;
 
-  useEffect(() => {
-    if (isAuthenticated) {
-      fetchDatasets();
-    }
-  }, [apiKey, isAuthenticated]);
+  const [datasetToDelete, setDatasetToDelete] = useState<Dataset | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
 
-  const fetchDatasets = async () => {
+  const fetchDatasets = useCallback(async () => {
     if (!isAuthenticated) {
       setError("Please log in to continue.");
       return;
@@ -53,55 +54,50 @@ export default function Datasets() {
         "/api/evaluations/datasets",
         apiKey?.key ?? "",
       );
-      const datasetList = Array.isArray(data) ? data : data.data || [];
-      setDatasets(datasetList);
+      const list = Array.isArray(data) ? data : data.data || [];
+      setDatasets(list);
     } catch (err: unknown) {
       console.error("Failed to fetch datasets:", err);
       setError(err instanceof Error ? err.message : "Failed to fetch datasets");
     } finally {
       setIsLoading(false);
     }
+  }, [apiKey, isAuthenticated]);
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      fetchDatasets();
+    }
+  }, [fetchDatasets, isAuthenticated]);
+
+  const resetUploadForm = () => {
+    setSelectedFile(null);
+    setDatasetName("");
+    setDuplicationFactor("1");
   };
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (!file) return;
-
     if (!file.name.endsWith(".csv")) {
       toast.error("Please select a CSV file");
       event.target.value = "";
       return;
     }
-
     setSelectedFile(file);
-    // Auto-fill dataset name from filename (without extension)
-    const nameFromFile = file.name.replace(/\.csv$/i, "");
-    setDatasetName(nameFromFile);
+    setDatasetName(file.name.replace(/\.csv$/i, ""));
   };
 
   const handleUpload = async () => {
-    if (!selectedFile) {
-      toast.error("Please select a file first");
-      return;
-    }
-
-    if (!datasetName.trim()) {
-      toast.error("Please enter a dataset name");
-      return;
-    }
-
-    if (!isAuthenticated) {
-      toast.error("Please log in to continue.");
-      return;
-    }
+    if (!selectedFile) return toast.error("Please select a file first");
+    if (!datasetName.trim()) return toast.error("Please enter a dataset name");
+    if (!isAuthenticated) return toast.error("Please log in to continue.");
 
     setIsUploading(true);
-
     try {
       const formData = new FormData();
       formData.append("file", selectedFile);
       formData.append("dataset_name", datasetName.trim());
-
       formData.append("duplication_factor", duplicationFactor || "1");
 
       await apiFetch<Dataset>("/api/evaluations/datasets", apiKey?.key ?? "", {
@@ -110,58 +106,58 @@ export default function Datasets() {
       });
       await fetchDatasets();
 
-      setSelectedFile(null);
-      setDatasetName("");
-      setDuplicationFactor("1");
-      setIsModalOpen(false);
-
+      resetUploadForm();
+      setIsUploadOpen(false);
       toast.success("Dataset uploaded successfully!");
-    } catch (error) {
-      console.error("Upload error:", error);
+    } catch (e) {
+      console.error("Upload error:", e);
       toast.error(
-        `Failed to upload dataset: ${error instanceof Error ? error.message : "Unknown error"}`,
+        `Failed to upload dataset: ${e instanceof Error ? e.message : "Unknown error"}`,
       );
     } finally {
       setIsUploading(false);
     }
   };
 
-  const handleDeleteDataset = async (datasetId: number) => {
+  const handleRequestDelete = (datasetId: number) => {
     if (!isAuthenticated) {
       toast.error("Please log in to continue");
       return;
     }
+    const target = datasets.find((d) => d.dataset_id === datasetId);
+    if (target) setDatasetToDelete(target);
+  };
 
-    // Using browser confirm for now - could be replaced with a custom modal later
-    if (!confirm("Are you sure you want to delete this dataset?")) {
-      return;
-    }
-
+  const handleConfirmDelete = async () => {
+    if (!datasetToDelete) return;
+    setIsDeleting(true);
     try {
       await apiFetch(
-        `/api/evaluations/datasets/${datasetId}`,
+        `/api/evaluations/datasets/${datasetToDelete.dataset_id}`,
         apiKey?.key ?? "",
-        {
-          method: "DELETE",
-        },
+        { method: "DELETE" },
       );
-
       await fetchDatasets();
       toast.success("Dataset deleted successfully");
-    } catch (error) {
-      console.error("Delete error:", error);
+      setDatasetToDelete(null);
+    } catch (e) {
+      console.error("Delete error:", e);
       toast.error(
-        `Failed to delete dataset: ${error instanceof Error ? error.message : "Unknown error"}`,
+        `Failed to delete dataset: ${e instanceof Error ? e.message : "Unknown error"}`,
       );
+    } finally {
+      setIsDeleting(false);
     }
   };
 
-  const indexOfLastItem = currentPage * itemsPerPage;
-  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-  const currentDatasets = datasets.slice(indexOfFirstItem, indexOfLastItem);
-  const totalPages = Math.ceil(datasets.length / itemsPerPage);
+  const totalPages = Math.ceil(datasets.length / ITEMS_PER_PAGE);
+  const start = (currentPage - 1) * ITEMS_PER_PAGE;
+  const currentDatasets = datasets.slice(start, start + ITEMS_PER_PAGE);
 
-  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+  const closeUpload = () => {
+    setIsUploadOpen(false);
+    resetUploadForm();
+  };
 
   return (
     <div className="w-full h-screen flex flex-col bg-bg-secondary">
@@ -178,752 +174,40 @@ export default function Datasets() {
             <div className="max-w-6xl mx-auto space-y-6">
               <DatasetListing
                 datasets={currentDatasets}
-                onDelete={handleDeleteDataset}
-                onUploadNew={() => setIsModalOpen(true)}
+                onDelete={handleRequestDelete}
+                onUploadNew={() => setIsUploadOpen(true)}
                 isLoading={isLoading}
                 error={error}
                 isAuthenticated={isAuthenticated}
                 totalPages={totalPages}
                 currentPage={currentPage}
-                onPageChange={paginate}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {isModalOpen && (
-        <UploadDatasetModal
-          selectedFile={selectedFile}
-          datasetName={datasetName}
-          duplicationFactor={duplicationFactor}
-          isUploading={isUploading}
-          onFileSelect={handleFileSelect}
-          onDatasetNameChange={setDatasetName}
-          onDuplicationFactorChange={setDuplicationFactor}
-          onUpload={handleUpload}
-          onClose={() => {
-            setIsModalOpen(false);
-            setSelectedFile(null);
-            setDatasetName("");
-            setDuplicationFactor("1");
-          }}
-        />
-      )}
-    </div>
-  );
-}
-
-// ============ DATASET LISTING COMPONENT ============
-interface DatasetListingProps {
-  datasets: Dataset[];
-  onDelete: (datasetId: number) => void;
-  onUploadNew: () => void;
-  isLoading: boolean;
-  error: string | null;
-  isAuthenticated: boolean;
-  totalPages: number;
-  currentPage: number;
-  onPageChange: (page: number) => void;
-}
-
-function DatasetListing({
-  datasets,
-  onDelete,
-  onUploadNew,
-  isLoading,
-  error,
-  isAuthenticated,
-  totalPages,
-  currentPage,
-  onPageChange,
-}: DatasetListingProps) {
-  return (
-    <>
-      {/* Datasets List Card */}
-      <div
-        className="border rounded-lg p-6"
-        style={{
-          backgroundColor: "hsl(0, 0%, 100%)",
-          borderColor: "hsl(0, 0%, 85%)",
-        }}
-      >
-        {/* Header with Upload Button */}
-        <div className="flex items-center justify-between mb-4">
-          <h2
-            className="text-lg font-semibold"
-            style={{ color: "hsl(330, 3%, 19%)" }}
-          >
-            Your Datasets
-          </h2>
-          <button
-            onClick={onUploadNew}
-            className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
-            style={{
-              backgroundColor: "#171717",
-              color: "hsl(0, 0%, 100%)",
-            }}
-            onMouseEnter={(e) =>
-              (e.currentTarget.style.backgroundColor = "#404040")
-            }
-            onMouseLeave={(e) =>
-              (e.currentTarget.style.backgroundColor = "#171717")
-            }
-          >
-            + Upload New Dataset
-          </button>
-        </div>
-
-        {/* Loading State */}
-        {isLoading && datasets.length === 0 ? (
-          <div
-            className="text-center py-12"
-            style={{ color: "hsl(330, 3%, 49%)" }}
-          >
-            <svg
-              className="w-12 h-12 mx-auto mb-4 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>
-            <p className="text-sm">Loading datasets...</p>
-          </div>
-        ) : !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
-            className="border rounded-lg p-6"
-            style={{
-              backgroundColor: "hsl(8, 86%, 95%)",
-              borderColor: "hsl(8, 86%, 80%)",
-            }}
-          >
-            <p
-              className="text-sm font-medium"
-              style={{ color: "hsl(8, 86%, 40%)" }}
-            >
-              Error: {error}
-            </p>
-          </div>
-        ) : datasets.length === 0 ? (
-          <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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                onPageChange={setCurrentPage}
               />
-            </svg>
-            <p
-              className="font-medium mb-2"
-              style={{ color: "hsl(330, 3%, 19%)" }}
-            >
-              No datasets found
-            </p>
-            <p className="text-sm mb-4">
-              Upload your first CSV dataset to get started with evaluations
-            </p>
-            <button
-              onClick={onUploadNew}
-              className="px-6 py-2 rounded-md text-sm font-medium transition-colors"
-              style={{
-                backgroundColor: "#171717",
-                color: "hsl(0, 0%, 100%)",
-              }}
-              onMouseEnter={(e) =>
-                (e.currentTarget.style.backgroundColor = "#404040")
-              }
-              onMouseLeave={(e) =>
-                (e.currentTarget.style.backgroundColor = "#171717")
-              }
-            >
-              Upload Your First Dataset
-            </button>
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {datasets.map((dataset) => (
-              <div
-                key={dataset.dataset_id}
-                className="border rounded-lg p-4"
-                style={{
-                  backgroundColor: "hsl(0, 0%, 96.5%)",
-                  borderColor: "hsl(0, 0%, 85%)",
-                }}
-              >
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-3 mb-2">
-                      <svg
-                        className="w-6 h-6 flex-shrink-0"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                        style={{ color: "#171717" }}
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                        />
-                      </svg>
-                      <h3
-                        className="text-lg font-semibold"
-                        style={{ color: "hsl(330, 3%, 19%)" }}
-                      >
-                        {dataset.dataset_name}
-                      </h3>
-                    </div>
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
-                      <div>
-                        <div
-                          className="text-xs uppercase font-semibold mb-1"
-                          style={{ color: "hsl(330, 3%, 49%)" }}
-                        >
-                          Dataset ID
-                        </div>
-                        <div
-                          className="text-sm font-medium"
-                          style={{ color: "hsl(330, 3%, 19%)" }}
-                        >
-                          {dataset.dataset_id}
-                        </div>
-                      </div>
-                      <div>
-                        <div
-                          className="text-xs uppercase font-semibold mb-1"
-                          style={{ color: "hsl(330, 3%, 49%)" }}
-                        >
-                          Total Items
-                        </div>
-                        <div
-                          className="text-sm font-medium"
-                          style={{ color: "hsl(330, 3%, 19%)" }}
-                        >
-                          {dataset.total_items}
-                        </div>
-                      </div>
-                      <div>
-                        <div
-                          className="text-xs uppercase font-semibold mb-1"
-                          style={{ color: "hsl(330, 3%, 49%)" }}
-                        >
-                          Original Items
-                        </div>
-                        <div
-                          className="text-sm font-medium"
-                          style={{ color: "hsl(330, 3%, 19%)" }}
-                        >
-                          {dataset.original_items}
-                        </div>
-                      </div>
-                      <div>
-                        <div
-                          className="text-xs uppercase font-semibold mb-1"
-                          style={{ color: "hsl(330, 3%, 49%)" }}
-                        >
-                          Duplication Factor
-                        </div>
-                        <div
-                          className="text-sm font-medium"
-                          style={{ color: "hsl(330, 3%, 19%)" }}
-                        >
-                          ×{dataset.duplication_factor}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-2 ml-4">
-                    <button
-                      onClick={() => onDelete(dataset.dataset_id)}
-                      className="p-2 rounded-md transition-colors"
-                      style={{
-                        borderWidth: "1px",
-                        borderColor: "hsl(8, 86%, 80%)",
-                        backgroundColor: "hsl(0, 0%, 100%)",
-                        color: "hsl(8, 86%, 40%)",
-                      }}
-                      onMouseEnter={(e) => {
-                        e.currentTarget.style.backgroundColor =
-                          "hsl(8, 86%, 95%)";
-                      }}
-                      onMouseLeave={(e) => {
-                        e.currentTarget.style.backgroundColor =
-                          "hsl(0, 0%, 100%)";
-                      }}
-                      title="Delete Dataset"
-                    >
-                      <svg
-                        className="w-5 h-5"
-                        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>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Pagination */}
-        {!isLoading &&
-          !error &&
-          isAuthenticated &&
-          datasets.length > 0 &&
-          totalPages > 1 && (
-            <div
-              className="flex items-center justify-between mt-6 pt-4 border-t"
-              style={{ borderColor: "hsl(0, 0%, 85%)" }}
-            >
-              <p className="text-sm" style={{ color: "hsl(330, 3%, 49%)" }}>
-                Page {currentPage} of {totalPages}
-              </p>
-              <div className="flex gap-2">
-                <button
-                  onClick={() => onPageChange(currentPage - 1)}
-                  disabled={currentPage === 1}
-                  className="px-3 py-1 rounded-md text-sm font-medium transition-colors"
-                  style={{
-                    backgroundColor:
-                      currentPage === 1
-                        ? "hsl(0, 0%, 95%)"
-                        : "hsl(0, 0%, 100%)",
-                    color:
-                      currentPage === 1
-                        ? "hsl(330, 3%, 70%)"
-                        : "hsl(330, 3%, 19%)",
-                    borderWidth: "1px",
-                    borderColor: "hsl(0, 0%, 85%)",
-                    cursor: currentPage === 1 ? "not-allowed" : "pointer",
-                  }}
-                >
-                  Previous
-                </button>
-                <button
-                  onClick={() => onPageChange(currentPage + 1)}
-                  disabled={currentPage === totalPages}
-                  className="px-3 py-1 rounded-md text-sm font-medium transition-colors"
-                  style={{
-                    backgroundColor:
-                      currentPage === totalPages
-                        ? "hsl(0, 0%, 95%)"
-                        : "hsl(0, 0%, 100%)",
-                    color:
-                      currentPage === totalPages
-                        ? "hsl(330, 3%, 70%)"
-                        : "hsl(330, 3%, 19%)",
-                    borderWidth: "1px",
-                    borderColor: "hsl(0, 0%, 85%)",
-                    cursor:
-                      currentPage === totalPages ? "not-allowed" : "pointer",
-                  }}
-                >
-                  Next
-                </button>
-              </div>
             </div>
-          )}
-      </div>
-
-      {/* Info Card */}
-      <div
-        className="border rounded-lg p-6"
-        style={{
-          backgroundColor: "hsl(202, 100%, 95%)",
-          borderColor: "hsl(202, 100%, 80%)",
-        }}
-      >
-        <div className="flex gap-3">
-          <svg
-            className="w-5 h-5 flex-shrink-0 mt-0.5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            style={{ color: "hsl(202, 100%, 35%)" }}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <div>
-            <p
-              className="text-sm font-medium"
-              style={{ color: "hsl(202, 100%, 25%)" }}
-            >
-              Storage Note
-            </p>
-            <p
-              className="text-sm mt-1"
-              style={{ color: "hsl(202, 100%, 30%)" }}
-            >
-              Datasets are stored on the server and synced with Langfuse for
-              evaluation tracking.
-            </p>
           </div>
         </div>
       </div>
-    </>
-  );
-}
 
-// ============ UPLOAD DATASET MODAL ============
-export interface UploadDatasetModalProps {
-  selectedFile: File | null;
-  datasetName: string;
-  duplicationFactor: string;
-  isUploading: boolean;
-  onFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onDatasetNameChange: (value: string) => void;
-  onDuplicationFactorChange: (value: string) => void;
-  onUpload: () => void;
-  onClose: () => void;
-}
-
-export function UploadDatasetModal({
-  selectedFile,
-  datasetName,
-  duplicationFactor,
-  isUploading,
-  onFileSelect,
-  onDatasetNameChange,
-  onDuplicationFactorChange,
-  onUpload,
-  onClose,
-}: UploadDatasetModalProps) {
-  // Handle backdrop click
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  // Handle escape key
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleEscape);
-    return () => window.removeEventListener("keydown", handleEscape);
-  }, [onClose]);
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-modalBackdrop"
-      style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
-      onClick={handleBackdropClick}
-    >
-      <div
-        className="border rounded-lg shadow-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-modalContent"
-        style={{
-          backgroundColor: "hsl(0, 0%, 100%)",
-          borderColor: "hsl(0, 0%, 85%)",
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Modal Header */}
-        <div
-          className="border-b px-6 py-4 flex items-center justify-between"
-          style={{ borderColor: "hsl(0, 0%, 85%)" }}
-        >
-          <h2
-            className="text-lg font-semibold"
-            style={{ color: "hsl(330, 3%, 19%)" }}
-          >
-            Upload New Dataset
-          </h2>
-          <button
-            onClick={onClose}
-            className="p-1 rounded-md transition-colors"
-            style={{ color: "hsl(330, 3%, 49%)" }}
-            onMouseEnter={(e) =>
-              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
-            }
-            onMouseLeave={(e) =>
-              (e.currentTarget.style.backgroundColor = "transparent")
-            }
-          >
-            <svg
-              className="w-6 h-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-
-        {/* Modal Body */}
-        <div className="p-6">
-          <p className="text-sm mb-6" style={{ color: "hsl(330, 3%, 49%)" }}>
-            Upload a CSV file containing your QnA dataset. The file will be
-            stored in your browser&apos;s local storage.
-          </p>
-
-          {/* File Selection Area */}
-          <div
-            className="border-2 border-dashed rounded-lg p-12 text-center transition-colors"
-            style={{
-              borderColor: "hsl(0, 0%, 85%)",
-            }}
-          >
-            <div className="space-y-4">
-              <div style={{ color: "hsl(330, 3%, 49%)" }}>
-                <svg
-                  className="mx-auto h-12 w-12"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                  />
-                </svg>
-              </div>
-              <div>
-                <label
-                  htmlFor="dataset-file-upload"
-                  className="px-6 py-2 rounded-md transition-colors inline-block text-sm font-medium"
-                  style={{
-                    backgroundColor: isUploading
-                      ? "hsl(0, 0%, 95%)"
-                      : "#171717",
-                    color: isUploading
-                      ? "hsl(330, 3%, 49%)"
-                      : "hsl(0, 0%, 100%)",
-                    cursor: isUploading ? "not-allowed" : "pointer",
-                  }}
-                >
-                  Choose CSV File
-                </label>
-                <input
-                  id="dataset-file-upload"
-                  type="file"
-                  accept=".csv"
-                  onChange={onFileSelect}
-                  disabled={isUploading}
-                  className="hidden"
-                />
-              </div>
-              {selectedFile && (
-                <div className="text-sm" style={{ color: "hsl(330, 3%, 49%)" }}>
-                  Selected:{" "}
-                  <span
-                    className="font-medium"
-                    style={{ color: "hsl(330, 3%, 19%)" }}
-                  >
-                    {selectedFile.name}
-                  </span>
-                  <span className="ml-2">
-                    ({Math.round(selectedFile.size / 1024)} KB)
-                  </span>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Dataset Name Field */}
-          {selectedFile && (
-            <>
-              <div className="mt-6">
-                <label
-                  className="block text-sm font-medium mb-2"
-                  style={{ color: "hsl(330, 3%, 19%)" }}
-                >
-                  Dataset Name{" "}
-                  <span style={{ color: "hsl(8, 86%, 40%)" }}>*</span>
-                </label>
-                <input
-                  type="text"
-                  value={datasetName}
-                  onChange={(e) => onDatasetNameChange(e.target.value)}
-                  placeholder="Enter dataset name"
-                  disabled={isUploading}
-                  className="w-full px-4 py-2 rounded-md border text-sm focus:outline-none focus:ring-2"
-                  style={{
-                    borderColor: datasetName ? "#171717" : "hsl(0, 0%, 85%)",
-                    backgroundColor: isUploading
-                      ? "hsl(0, 0%, 97%)"
-                      : "hsl(0, 0%, 100%)",
-                    color: "hsl(330, 3%, 19%)",
-                  }}
-                />
-              </div>
-
-              <div className="mt-4">
-                <label
-                  className="block text-sm font-medium mb-2"
-                  style={{ color: "hsl(330, 3%, 19%)" }}
-                >
-                  Duplication Factor (Optional)
-                </label>
-                <input
-                  type="number"
-                  value={duplicationFactor}
-                  onChange={(e) => onDuplicationFactorChange(e.target.value)}
-                  placeholder="1"
-                  min="1"
-                  disabled={isUploading}
-                  className="w-full px-4 py-2 rounded-md border text-sm focus:outline-none focus:ring-2"
-                  style={{
-                    borderColor: "hsl(0, 0%, 85%)",
-                    backgroundColor: isUploading
-                      ? "hsl(0, 0%, 97%)"
-                      : "hsl(0, 0%, 100%)",
-                    color: "hsl(330, 3%, 19%)",
-                  }}
-                />
-                <p
-                  className="text-xs mt-1"
-                  style={{ color: "hsl(330, 3%, 49%)" }}
-                >
-                  Number of times to duplicate the dataset rows (leave empty or
-                  1 for no duplication)
-                </p>
-              </div>
-            </>
-          )}
-
-          {/* Sample CSV Format */}
-          <div
-            className="mt-6 border rounded-lg p-3"
-            style={{
-              backgroundColor: "hsl(202, 100%, 95%)",
-              borderColor: "hsl(202, 100%, 80%)",
-            }}
-          >
-            <div className="flex gap-2">
-              <svg
-                className="w-4 h-4 flex-shrink-0 mt-0.5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                style={{ color: "hsl(202, 100%, 35%)" }}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <div>
-                <p
-                  className="text-xs font-medium mb-1"
-                  style={{ color: "hsl(202, 100%, 25%)" }}
-                >
-                  Expected CSV Format:
-                </p>
-                <pre
-                  className="text-xs font-mono"
-                  style={{ color: "hsl(202, 100%, 30%)" }}
-                >
-                  {`question,answer
-"What is X?","Answer Y"`}
-                </pre>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Modal Footer */}
-        <div
-          className="border-t px-6 py-4 flex items-center justify-end gap-3"
-          style={{ borderColor: "hsl(0, 0%, 85%)" }}
-        >
-          <button
-            onClick={onClose}
-            className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
-            style={{
-              borderWidth: "1px",
-              borderColor: "hsl(0, 0%, 85%)",
-              backgroundColor: "hsl(0, 0%, 100%)",
-              color: "hsl(330, 3%, 19%)",
-            }}
-            onMouseEnter={(e) =>
-              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
-            }
-            onMouseLeave={(e) =>
-              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 100%)")
-            }
-          >
-            Cancel
-          </button>
-          <button
-            onClick={onUpload}
-            disabled={!selectedFile || !datasetName.trim() || isUploading}
-            className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
-            style={{
-              backgroundColor:
-                !selectedFile || !datasetName.trim() || isUploading
-                  ? "hsl(0, 0%, 95%)"
-                  : "#171717",
-              color:
-                !selectedFile || !datasetName.trim() || isUploading
-                  ? "hsl(330, 3%, 49%)"
-                  : "hsl(0, 0%, 100%)",
-              cursor:
-                !selectedFile || !datasetName.trim() || isUploading
-                  ? "not-allowed"
-                  : "pointer",
-            }}
-            onMouseEnter={(e) => {
-              if (selectedFile && datasetName.trim() && !isUploading) {
-                e.currentTarget.style.backgroundColor = "#404040";
-              }
-            }}
-            onMouseLeave={(e) => {
-              if (selectedFile && datasetName.trim() && !isUploading) {
-                e.currentTarget.style.backgroundColor = "#171717";
-              }
-            }}
-          >
-            {isUploading ? "Uploading..." : "Upload Dataset"}
-          </button>
-        </div>
-      </div>
+      <UploadDatasetModal
+        open={isUploadOpen}
+        selectedFile={selectedFile}
+        datasetName={datasetName}
+        duplicationFactor={duplicationFactor}
+        isUploading={isUploading}
+        onFileSelect={handleFileSelect}
+        onDatasetNameChange={setDatasetName}
+        onDuplicationFactorChange={setDuplicationFactor}
+        onUpload={handleUpload}
+        onClose={closeUpload}
+      />
+
+      <DeleteDatasetModal
+        open={!!datasetToDelete}
+        datasetName={datasetToDelete?.dataset_name}
+        isDeleting={isDeleting}
+        onClose={() => setDatasetToDelete(null)}
+        onConfirm={handleConfirmDelete}
+      />
     </div>
   );
 }
diff --git a/app/(main)/evaluations/page.tsx b/app/(main)/evaluations/page.tsx
index 0fff1a05..c76d5573 100644
--- a/app/(main)/evaluations/page.tsx
+++ b/app/(main)/evaluations/page.tsx
@@ -9,7 +9,6 @@
 
 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/lib/types/dataset";
 import Sidebar from "@/app/components/Sidebar";
@@ -248,10 +247,7 @@ function SimplifiedEvalContent() {
   };
 
   return (
-    <div
-      className="w-full h-screen flex flex-col"
-      style={{ backgroundColor: colors.bg.secondary }}
-    >
+    <div className="w-full h-screen flex flex-col bg-bg-secondary">
       <div className="flex flex-1 overflow-hidden">
         <Sidebar collapsed={sidebarCollapsed} activeRoute="/evaluations" />
 
diff --git a/app/(main)/speech-to-text/page.tsx b/app/(main)/speech-to-text/page.tsx
index bb2a50d1..23cde3ac 100644
--- a/app/(main)/speech-to-text/page.tsx
+++ b/app/(main)/speech-to-text/page.tsx
@@ -7,8 +7,7 @@
 
 "use client";
 
-import { useState, useEffect } from "react";
-import { colors } from "@/app/lib/colors";
+import { useEffect, useState } from "react";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import TabNavigation from "@/app/components/TabNavigation";
@@ -19,19 +18,9 @@ import { apiFetch } from "@/app/lib/apiClient";
 import ErrorModal from "@/app/components/ErrorModal";
 import DatasetsTab from "@/app/components/speech-to-text/DatasetsTab";
 import EvaluationsTab from "@/app/components/speech-to-text/EvaluationsTab";
+import { useSttData } from "@/app/hooks/useSttData";
 import {
   AudioFile,
-  Dataset,
-  STTRun,
-  STTResult,
-  STTResultRaw,
-  Language,
-  DEFAULT_LANGUAGES,
-  RawLanguage,
-  LanguagesResponse,
-  DatasetsResponse,
-  RunsResponse,
-  RunDetailResponse,
   CreateDatasetResponse,
   CreateRunResponse,
 } from "@/app/lib/types/speechToText";
@@ -44,141 +33,43 @@ export default function SpeechToTextPage() {
   const { sidebarCollapsed } = useApp();
   const [leftPanelWidth] = useState(450);
   const { apiKeys, isAuthenticated } = useAuth();
-  const [languages, setLanguages] = useState<Language[]>([]);
+
+  const {
+    languages,
+    datasets,
+    runs,
+    results,
+    selectedRunId,
+    setSelectedRunId,
+    setResults,
+    isLoadingDatasets,
+    isLoadingRuns,
+    isLoadingResults,
+    loadDatasets,
+    loadRuns,
+    loadResults,
+  } = useSttData(activeTab);
+
   const [datasetName, setDatasetName] = useState("");
   const [datasetDescription, setDatasetDescription] = useState("");
   const [datasetLanguageId, setDatasetLanguageId] = useState<number>(1);
   const [audioFiles, setAudioFiles] = useState<AudioFile[]>([]);
   const [playingFileId, setPlayingFileId] = useState<string | null>(null);
   const [isCreating, setIsCreating] = useState(false);
-  const [datasets, setDatasets] = useState<Dataset[]>([]);
-  const [isLoadingDatasets, setIsLoadingDatasets] = useState(true);
   const [evaluationName, setEvaluationName] = useState("");
   const [selectedDatasetId, setSelectedDatasetId] = useState<number | null>(
     null,
   );
   const [selectedModel, setSelectedModel] = useState("gemini-2.5-pro");
   const [isRunning, setIsRunning] = useState(false);
-  const [runs, setRuns] = useState<STTRun[]>([]);
-  const [isLoadingRuns, setIsLoadingRuns] = useState(true);
-  const [selectedRunId, setSelectedRunId] = useState<number | null>(null);
-  const [results, setResults] = useState<STTResult[]>([]);
-  const [isLoadingResults, setIsLoadingResults] = useState(false);
   const [errorModalOpen, setErrorModalOpen] = useState(false);
   const [errorModalMessage, setErrorModalMessage] = useState("");
 
-  const loadLanguages = async () => {
-    if (!isAuthenticated) return;
-
-    try {
-      const data = await apiFetch<RawLanguage[] | LanguagesResponse>(
-        "/api/languages",
-        apiKeys[0]?.key ?? "",
-      );
-
-      let rawList: RawLanguage[] = [];
-      if (Array.isArray(data)) {
-        rawList = 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;
-      } else if (data.languages && Array.isArray(data.languages)) {
-        rawList = data.languages;
-      }
-
-      const languagesList: Language[] = rawList
-        .filter((l) => l.is_active !== false)
-        .map((l) => ({
-          id: l.id,
-          code: l.locale || l.code || "",
-          name: l.label || l.name || "",
-        }));
-
-      if (languagesList.length > 0) {
-        setLanguages(languagesList);
-        // Default dataset language to first available if not already set
-        if (languagesList[0]?.id) {
-          setDatasetLanguageId(languagesList[0].id);
-        }
-      } else {
-        setLanguages(DEFAULT_LANGUAGES);
-      }
-    } catch (error) {
-      console.error("Failed to load languages:", error);
-      setLanguages(DEFAULT_LANGUAGES);
-    }
-  };
-
-  const loadDatasets = async () => {
-    if (!isAuthenticated) return;
-
-    setIsLoadingDatasets(true);
-    try {
-      const data = await apiFetch<Dataset[] | DatasetsResponse>(
-        "/api/evaluations/stt/datasets",
-        apiKeys[0]?.key ?? "",
-      );
-
-      let datasetsList: Dataset[] = [];
-      if (Array.isArray(data)) {
-        datasetsList = data;
-      } else if (data.datasets && Array.isArray(data.datasets)) {
-        datasetsList = data.datasets;
-      } else if (data.data && Array.isArray(data.data)) {
-        datasetsList = data.data;
-      }
-
-      setDatasets(datasetsList);
-    } catch (error) {
-      console.error("Failed to load datasets:", error);
-      toast.error("Failed to load datasets");
-      setDatasets([]);
-    } finally {
-      setIsLoadingDatasets(false);
-    }
-  };
-
-  const loadRuns = async () => {
-    if (!isAuthenticated) return;
-
-    setIsLoadingRuns(true);
-    try {
-      const data = await apiFetch<STTRun[] | RunsResponse>(
-        "/api/evaluations/stt/runs",
-        apiKeys[0]?.key ?? "",
-      );
-
-      let runsList: STTRun[] = [];
-      if (Array.isArray(data)) {
-        runsList = data;
-      } else if (data.runs && Array.isArray(data.runs)) {
-        runsList = data.runs;
-      } else if (data.data && Array.isArray(data.data)) {
-        runsList = data.data;
-      }
-
-      setRuns(runsList);
-    } catch (error) {
-      console.error("Failed to load runs:", error);
-      toast.error("Failed to load evaluation runs");
-      setRuns([]);
-    } finally {
-      setIsLoadingRuns(false);
-    }
-  };
-
   useEffect(() => {
-    loadLanguages();
-    loadDatasets();
-    if (activeTab === "evaluations") {
-      loadRuns();
+    if (languages.length > 0 && languages[0]?.id) {
+      setDatasetLanguageId(languages[0].id);
     }
-  }, [apiKeys, activeTab]);
+  }, [languages]);
 
   const handleAudioFileSelect = async (
     event: React.ChangeEvent<HTMLInputElement>,
@@ -347,7 +238,7 @@ export default function SpeechToTextPage() {
 
       setDatasetName("");
       setDatasetDescription("");
-      setDatasetLanguageId(1);
+      setDatasetLanguageId(languages[0]?.id ?? 1);
       setAudioFiles([]);
 
       await loadDatasets();
@@ -394,7 +285,6 @@ export default function SpeechToTextPage() {
       );
 
       setSelectedModel("gemini-2.5-pro");
-
       setEvaluationName("");
       setSelectedDatasetId(null);
 
@@ -418,70 +308,10 @@ export default function SpeechToTextPage() {
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
 
-  const loadResults = async (runId: number) => {
-    if (!isAuthenticated) return;
-
-    setIsLoadingResults(true);
-    try {
-      const runData = await apiFetch<STTResultRaw[] | RunDetailResponse>(
-        `/api/evaluations/stt/runs/${runId}?include_results=true&include_signed_url=true`,
-        apiKeys[0]?.key ?? "",
-      );
-
-      let rawResults: STTResultRaw[] = [];
-      if (Array.isArray(runData)) {
-        rawResults = runData;
-      } else if (runData.results && Array.isArray(runData.results)) {
-        rawResults = runData.results;
-      } else if (runData.data && Array.isArray(runData.data)) {
-        rawResults = runData.data as STTResultRaw[];
-      } else if (
-        runData.data &&
-        !Array.isArray(runData.data) &&
-        runData.data.results &&
-        Array.isArray(runData.data.results)
-      ) {
-        rawResults = runData.data.results;
-      }
-
-      const resultsList: STTResult[] = rawResults.map((result) => {
-        const sample = result.sample;
-
-        const sampleName =
-          sample?.sample_metadata?.original_filename ||
-          `Sample ${result.stt_sample_id}`;
-
-        const groundTruth = sample?.ground_truth || "";
-        const signedUrl = sample?.signed_url || "";
-        const fileId = sample?.file_id;
-
-        return {
-          ...result,
-          sampleName,
-          groundTruth,
-          fileId,
-          signedUrl,
-        };
-      });
-
-      setResults(resultsList);
-      setSelectedRunId(runId);
-    } catch (error) {
-      console.error("Failed to load results:", error);
-      toast.error("Failed to load evaluation results");
-      setResults([]);
-    } finally {
-      setIsLoadingResults(false);
-    }
-  };
-
   const selectedDataset = datasets.find((d) => d.id === selectedDatasetId);
 
   return (
-    <div
-      className="w-full h-screen flex flex-col"
-      style={{ backgroundColor: colors.bg.secondary }}
-    >
+    <div className="w-full h-screen flex flex-col bg-bg-secondary">
       <div className="flex flex-1 overflow-hidden">
         <Sidebar collapsed={sidebarCollapsed} activeRoute="/speech-to-text" />
 
@@ -501,21 +331,12 @@ export default function SpeechToTextPage() {
           />
 
           {!isAuthenticated ? (
-            <div
-              className="flex-1 flex items-center justify-center"
-              style={{ backgroundColor: colors.bg.secondary }}
-            >
+            <div className="flex-1 flex items-center justify-center bg-bg-secondary">
               <div className="text-center">
-                <p
-                  className="text-sm font-medium mb-1"
-                  style={{ color: colors.text.primary }}
-                >
+                <p className="text-sm font-medium mb-1 text-text-primary">
                   Authentication required
                 </p>
-                <p
-                  className="text-xs mb-4"
-                  style={{ color: colors.text.secondary }}
-                >
+                <p className="text-xs mb-4 text-text-secondary">
                   Please sign in to start creating datasets and running
                   evaluations
                 </p>
diff --git a/app/(main)/text-to-speech/page.tsx b/app/(main)/text-to-speech/page.tsx
index d3645b8b..4b4c384e 100644
--- a/app/(main)/text-to-speech/page.tsx
+++ b/app/(main)/text-to-speech/page.tsx
@@ -8,7 +8,6 @@
 "use client";
 
 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";
@@ -70,7 +69,6 @@ export default function TextToSpeechPage() {
   const [errorModalOpen, setErrorModalOpen] = useState(false);
   const [errorModalMessage, setErrorModalMessage] = useState("");
 
-  // Load languages
   const loadLanguages = async () => {
     if (!isAuthenticated) return;
 
@@ -358,10 +356,7 @@ export default function TextToSpeechPage() {
   const selectedDataset = datasets.find((d) => d.id === selectedDatasetId);
 
   return (
-    <div
-      className="w-full h-screen flex flex-col"
-      style={{ backgroundColor: colors.bg.secondary }}
-    >
+    <div className="w-full h-screen flex flex-col bg-bg-secondary">
       <div className="flex flex-1 overflow-hidden">
         <Sidebar collapsed={sidebarCollapsed} activeRoute="/text-to-speech" />
 
@@ -381,11 +376,8 @@ export default function TextToSpeechPage() {
           />
 
           {!isAuthenticated ? (
-            <div
-              className="flex-1 flex items-center justify-center"
-              style={{ backgroundColor: colors.bg.secondary }}
-            >
-              <p className="text-sm" style={{ color: colors.text.secondary }}>
+            <div className="flex-1 flex items-center justify-center bg-bg-secondary">
+              <p className="text-sm text-text-secondary">
                 Please sign in to start creating datasets and running
                 evaluations.
               </p>
diff --git a/app/components/ComingSoon.tsx b/app/components/ComingSoon.tsx
index f309174d..7cc95cb8 100644
--- a/app/components/ComingSoon.tsx
+++ b/app/components/ComingSoon.tsx
@@ -1,12 +1,11 @@
 /**
  * ComingSoon - Reusable component for features under construction
- * Features a coffee brewing theme to match Kaapi branding
  */
 
 "use client";
 
 import { useRouter } from "next/navigation";
-import { colors } from "@/app/lib/colors";
+import { Button } from "@/app/components";
 
 interface ComingSoonProps {
   featureName: string;
@@ -20,96 +19,47 @@ export default function ComingSoon({
   const router = useRouter();
 
   return (
-    <div
-      className="w-full h-screen flex flex-col"
-      style={{ backgroundColor: colors.bg.secondary }}
-    >
+    <div className="w-full h-screen flex flex-col bg-bg-secondary">
       <div className="flex-1 flex items-center justify-center p-6">
         <div className="max-w-md w-full text-center">
-          {/* Coffee Cup Animation */}
           <div className="mb-8 relative inline-block">
-            <div
-              className="text-8xl animate-bounce"
-              style={{
-                animationDuration: "2s",
-                animationIterationCount: "infinite",
-              }}
-            >
+            <div className="text-8xl animate-bounce [animation-duration:2s]">
               ☕
             </div>
-            {/* Steam animation */}
-            <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-4">
-              <div
-                className="text-3xl opacity-60"
-                style={{
-                  animation: "steam 3s ease-in-out infinite",
-                }}
-              >
+            <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-4">
+              <div className="text-3xl opacity-60 animate-[steam_3s_ease-in-out_infinite]">
                 ～
               </div>
             </div>
           </div>
 
-          {/* Main Message */}
-          <h1
-            className="text-3xl font-bold mb-4"
-            style={{
-              color: colors.text.primary,
-              letterSpacing: "-0.02em",
-            }}
-          >
+          <h1 className="text-3xl font-bold mb-4 text-text-primary tracking-[-0.02em]">
             {featureName}
           </h1>
 
-          <div className="inline-block px-4 py-2 rounded-full mb-6 bg-[#fef3c7] border border-[#fde68a]">
-            <p className="text-sm font-semibold text-[#92400e]">
+          <div className="inline-block px-4 py-2 rounded-full mb-6 bg-status-warning-bg border border-status-warning-border">
+            <p className="text-sm font-semibold text-status-warning-text">
               🚧 Being Brewed
             </p>
           </div>
 
-          <p className="text-lg mb-8" style={{ color: colors.text.secondary }}>
+          <p className="text-lg mb-8 text-text-secondary">
             {description ||
               "This feature is currently being crafted with care. Check back soon for something amazing!"}
           </p>
 
-          {/* Fun fact */}
-          <div
-            className="border rounded-lg p-4 mb-8"
-            style={{
-              backgroundColor: colors.bg.primary,
-              borderColor: colors.border,
-            }}
-          >
-            <p
-              className="text-xs font-semibold mb-1"
-              style={{ color: colors.text.primary }}
-            >
+          <div className="border border-border rounded-lg p-4 mb-8 bg-bg-primary">
+            <p className="text-xs font-semibold mb-1 text-text-primary">
               ☕ Kaapi Fact
             </p>
-            <p className="text-sm" style={{ color: colors.text.secondary }}>
+            <p className="text-sm text-text-secondary">
               Great features, like great coffee, take time to brew.
             </p>
           </div>
 
-          {/* Back button */}
-          <button
-            onClick={() => router.back()}
-            className="px-6 py-3 rounded-md text-sm font-medium"
-            style={{
-              backgroundColor: colors.accent.primary,
-              color: colors.bg.primary,
-              border: "none",
-              transition: "all 0.15s ease",
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = colors.accent.hover;
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.backgroundColor = colors.accent.primary;
-            }}
-          >
+          <Button variant="primary" size="md" onClick={() => router.back()}>
             ← Go Back
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/app/components/chat/ChatEmptyState.tsx b/app/components/chat/ChatEmptyState.tsx
index 1c33662d..32ecb257 100644
--- a/app/components/chat/ChatEmptyState.tsx
+++ b/app/components/chat/ChatEmptyState.tsx
@@ -48,7 +48,7 @@ export default function ChatEmptyState({
                 key={s}
                 type="button"
                 onClick={() => onSuggestion(s)}
-                className="text-left text-sm text-text-primary px-4 py-3 rounded-xl border border-border bg-bg-primary hover:bg-neutral-50 transition-colors cursor-pointer"
+                className="text-left text-sm text-text-primary px-4 py-3 rounded-xl bg-bg-primary shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)] hover:shadow-[0_4px_12px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-shadow cursor-pointer"
               >
                 {s}
               </button>
diff --git a/app/components/datasets/DatasetCard.tsx b/app/components/datasets/DatasetCard.tsx
new file mode 100644
index 00000000..bab34ebd
--- /dev/null
+++ b/app/components/datasets/DatasetCard.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { DocumentFileIcon, TrashIcon } from "@/app/components/icons";
+import { Dataset } from "@/app/lib/types/dataset";
+
+interface DatasetCardProps {
+  dataset: Dataset;
+  onDelete: (datasetId: number) => void;
+}
+
+export default function DatasetCard({ dataset, onDelete }: DatasetCardProps) {
+  return (
+    <div className="rounded-lg p-4 bg-bg-primary shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)] hover:shadow-[0_4px_12px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-shadow">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-3 mb-2">
+            <DocumentFileIcon className="w-6 h-6 shrink-0 text-text-primary" />
+            <h3 className="text-lg font-semibold text-text-primary truncate">
+              {dataset.dataset_name}
+            </h3>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
+            <Stat label="Dataset ID" value={String(dataset.dataset_id)} />
+            <Stat label="Total Items" value={String(dataset.total_items)} />
+            <Stat
+              label="Original Items"
+              value={String(dataset.original_items)}
+            />
+            <Stat
+              label="Duplication Factor"
+              value={`×${dataset.duplication_factor}`}
+            />
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={() => onDelete(dataset.dataset_id)}
+          className="p-2 rounded-md border border-status-error-border bg-bg-primary text-status-error-text hover:bg-status-error-bg transition-colors shrink-0 cursor-pointer"
+          title="Delete Dataset"
+          aria-label="Delete Dataset"
+        >
+          <TrashIcon />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div className="text-xs uppercase font-semibold mb-1 text-text-secondary">
+        {label}
+      </div>
+      <div className="text-sm font-medium text-text-primary truncate">
+        {value}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/datasets/DatasetListing.tsx b/app/components/datasets/DatasetListing.tsx
new file mode 100644
index 00000000..43b95e9f
--- /dev/null
+++ b/app/components/datasets/DatasetListing.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { Button } from "@/app/components";
+import { DocumentFileIcon, PlusIcon, InfoIcon } from "@/app/components/icons";
+import { Dataset } from "@/app/lib/types/dataset";
+import DatasetCard from "./DatasetCard";
+import DatasetListingSkeleton from "./DatasetListingSkeleton";
+
+interface DatasetListingProps {
+  datasets: Dataset[];
+  onDelete: (datasetId: number) => void;
+  onUploadNew: () => void;
+  isLoading: boolean;
+  error: string | null;
+  isAuthenticated: boolean;
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+}
+
+export default function DatasetListing({
+  datasets,
+  onDelete,
+  onUploadNew,
+  isLoading,
+  error,
+  isAuthenticated,
+  totalPages,
+  currentPage,
+  onPageChange,
+}: DatasetListingProps) {
+  return (
+    <>
+      <div className="rounded-lg p-6 bg-bg-primary shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)]">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-base font-semibold text-text-primary">
+            Your Datasets
+          </h2>
+          <Button variant="primary" size="sm" onClick={onUploadNew}>
+            <PlusIcon className="w-4 h-4" />
+            Upload New Dataset
+          </Button>
+        </div>
+
+        {isLoading && datasets.length === 0 ? (
+          <DatasetListingSkeleton />
+        ) : !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 className="rounded-lg p-6 bg-status-error-bg border border-status-error-border">
+            <p className="text-sm font-medium text-status-error-text">
+              Error: {error}
+            </p>
+          </div>
+        ) : datasets.length === 0 ? (
+          <EmptyState onUploadNew={onUploadNew} />
+        ) : (
+          <div className="space-y-3">
+            {datasets.map((dataset) => (
+              <DatasetCard
+                key={dataset.dataset_id}
+                dataset={dataset}
+                onDelete={onDelete}
+              />
+            ))}
+          </div>
+        )}
+
+        {!isLoading &&
+          !error &&
+          isAuthenticated &&
+          datasets.length > 0 &&
+          totalPages > 1 && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={onPageChange}
+            />
+          )}
+      </div>
+
+      <div className="rounded-lg p-5 bg-accent-primary/5 border border-accent-primary/20">
+        <div className="flex gap-3">
+          <InfoIcon className="w-5 h-5 shrink-0 mt-0.5 text-accent-primary" />
+          <div>
+            <p className="text-sm font-semibold text-text-primary">
+              Storage Note
+            </p>
+            <p className="text-sm mt-1 text-text-secondary">
+              Datasets are stored on the server and synced with Langfuse for
+              evaluation tracking.
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function EmptyState({ onUploadNew }: { onUploadNew: () => void }) {
+  return (
+    <div className="text-center py-12">
+      <div className="mx-auto mb-4 inline-flex items-center justify-center w-14 h-14 rounded-full bg-accent-primary/10">
+        <DocumentFileIcon className="w-7 h-7 text-accent-primary" />
+      </div>
+      <p className="text-base font-semibold text-text-primary mb-1">
+        No datasets found
+      </p>
+      <p className="text-sm text-text-secondary mb-5">
+        Upload your first CSV dataset to get started with evaluations.
+      </p>
+      <Button variant="primary" size="md" onClick={onUploadNew}>
+        <PlusIcon className="w-4 h-4" />
+        Upload Your First Dataset
+      </Button>
+    </div>
+  );
+}
+
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between mt-6 pt-4 border-t border-border">
+      <p className="text-sm text-text-secondary">
+        Page {currentPage} of {totalPages}
+      </p>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/datasets/DatasetListingSkeleton.tsx b/app/components/datasets/DatasetListingSkeleton.tsx
new file mode 100644
index 00000000..d7dc7d84
--- /dev/null
+++ b/app/components/datasets/DatasetListingSkeleton.tsx
@@ -0,0 +1,36 @@
+interface DatasetListingSkeletonProps {
+  count?: number;
+}
+
+export default function DatasetListingSkeleton({
+  count = 4,
+}: DatasetListingSkeletonProps) {
+  return (
+    <div className="space-y-3 animate-pulse">
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          className="rounded-lg p-4 bg-bg-primary shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)]"
+        >
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-6 h-6 rounded bg-neutral-200 shrink-0" />
+                <div className="h-5 w-48 max-w-full bg-neutral-200 rounded" />
+              </div>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
+                {[0, 1, 2, 3].map((j) => (
+                  <div key={j}>
+                    <div className="h-3 w-20 bg-neutral-100 rounded mb-2" />
+                    <div className="h-4 w-12 bg-neutral-200 rounded" />
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="w-9 h-9 rounded-md bg-neutral-100 shrink-0" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/datasets/DeleteDatasetModal.tsx b/app/components/datasets/DeleteDatasetModal.tsx
new file mode 100644
index 00000000..823ee78b
--- /dev/null
+++ b/app/components/datasets/DeleteDatasetModal.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { Button, Modal } from "@/app/components";
+
+interface DeleteDatasetModalProps {
+  open: boolean;
+  datasetName?: string;
+  isDeleting?: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function DeleteDatasetModal({
+  open,
+  datasetName,
+  isDeleting = false,
+  onClose,
+  onConfirm,
+}: DeleteDatasetModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={isDeleting ? () => {} : onClose}
+      title="Delete Dataset"
+      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{" "}
+          {datasetName ? (
+            <span className="font-medium text-text-primary">{datasetName}</span>
+          ) : (
+            "this dataset"
+          )}
+          ? This action cannot be undone.
+        </p>
+        <div className="flex justify-end gap-3">
+          <Button variant="outline" onClick={onClose} disabled={isDeleting}>
+            Cancel
+          </Button>
+          <Button variant="danger" onClick={onConfirm} disabled={isDeleting}>
+            {isDeleting ? "Deleting…" : "Delete"}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/datasets/UploadDatasetModal.tsx b/app/components/datasets/UploadDatasetModal.tsx
new file mode 100644
index 00000000..cd172232
--- /dev/null
+++ b/app/components/datasets/UploadDatasetModal.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { useRef } from "react";
+import { Button, Field, Modal } from "@/app/components";
+import { CloudUploadIcon, InfoIcon } from "@/app/components/icons";
+
+export interface UploadDatasetModalProps {
+  open: boolean;
+  selectedFile: File | null;
+  datasetName: string;
+  duplicationFactor: string;
+  isUploading: boolean;
+  onFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onDatasetNameChange: (value: string) => void;
+  onDuplicationFactorChange: (value: string) => void;
+  onUpload: () => void;
+  onClose: () => void;
+}
+
+export default function UploadDatasetModal({
+  open,
+  selectedFile,
+  datasetName,
+  duplicationFactor,
+  isUploading,
+  onFileSelect,
+  onDatasetNameChange,
+  onDuplicationFactorChange,
+  onUpload,
+  onClose,
+}: UploadDatasetModalProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const isDisabled = !selectedFile || !datasetName.trim() || isUploading;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Upload New Dataset"
+      maxWidth="max-w-2xl"
+      maxHeight="max-h-[90vh]"
+    >
+      <div className="p-6">
+        <p className="text-sm mb-6 text-text-secondary">
+          Upload a CSV file containing your QnA dataset.
+        </p>
+
+        <div className="border-2 border-dashed rounded-lg p-12 text-center transition-colors border-border">
+          <div className="space-y-4">
+            <div className="text-text-secondary">
+              <CloudUploadIcon className="mx-auto" />
+            </div>
+            <input
+              ref={fileInputRef}
+              id="dataset-file-upload"
+              type="file"
+              accept=".csv"
+              onChange={onFileSelect}
+              disabled={isUploading}
+              className="hidden"
+            />
+            <Button
+              variant="primary"
+              size="md"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={isUploading}
+            >
+              Choose CSV File
+            </Button>
+            {selectedFile && (
+              <div className="text-sm text-text-secondary">
+                Selected:{" "}
+                <span className="font-medium text-text-primary">
+                  {selectedFile.name}
+                </span>
+                <span className="ml-2">
+                  ({Math.round(selectedFile.size / 1024)} KB)
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {selectedFile && (
+          <>
+            <div className="mt-6">
+              <Field
+                label="Dataset Name *"
+                value={datasetName}
+                onChange={onDatasetNameChange}
+                placeholder="Enter dataset name"
+                disabled={isUploading}
+              />
+            </div>
+
+            <div className="mt-4">
+              <Field
+                label="Duplication Factor (Optional)"
+                type="number"
+                value={duplicationFactor}
+                onChange={onDuplicationFactorChange}
+                placeholder="1"
+                disabled={isUploading}
+              />
+              <p className="text-xs mt-1 text-text-secondary">
+                Number of times to duplicate the dataset rows (leave empty or 1
+                for no duplication).
+              </p>
+            </div>
+          </>
+        )}
+
+        <div className="mt-6 rounded-md p-3 bg-accent-primary/5 border border-accent-primary/20">
+          <div className="flex gap-2">
+            <InfoIcon className="w-4 h-4 shrink-0 mt-0.5 text-accent-primary" />
+            <div>
+              <p className="text-xs font-medium mb-1 text-text-primary">
+                Expected CSV Format:
+              </p>
+              <pre className="text-xs font-mono text-text-secondary">
+                {`question,answer
+"What is X?","Answer Y"`}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t border-border px-6 py-4 flex items-center justify-end gap-3 shrink-0">
+        <Button variant="outline" onClick={onClose} disabled={isUploading}>
+          Cancel
+        </Button>
+        <Button variant="primary" onClick={onUpload} disabled={isDisabled}>
+          {isUploading ? "Uploading..." : "Upload Dataset"}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/evaluations/EvalDatasetDescription.tsx b/app/components/evaluations/EvalDatasetDescription.tsx
index b0b99a04..af44c506 100644
--- a/app/components/evaluations/EvalDatasetDescription.tsx
+++ b/app/components/evaluations/EvalDatasetDescription.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { colors } from "@/app/lib/colors";
 
 const EVAL_DESCRIPTION_CHAR_LIMIT = 100;
 
@@ -14,10 +13,7 @@ export default function EvalDatasetDescription({
   const isLong = description.length > EVAL_DESCRIPTION_CHAR_LIMIT;
 
   return (
-    <div
-      className="mt-2 text-xs leading-relaxed wrap-break-word overflow-hidden"
-      style={{ color: colors.text.secondary }}
-    >
+    <div className="mt-2 text-xs leading-relaxed wrap-break-word overflow-hidden text-text-secondary">
       <span>
         {isLong && !expanded
           ? description.slice(0, EVAL_DESCRIPTION_CHAR_LIMIT).trimEnd() + "..."
@@ -29,8 +25,7 @@ export default function EvalDatasetDescription({
             e.stopPropagation();
             setExpanded(!expanded);
           }}
-          className="mt-1 block text-xs font-medium"
-          style={{ color: colors.text.primary }}
+          className="mt-1 block text-xs font-medium text-text-primary cursor-pointer"
         >
           {expanded ? "Show less" : "Read more"}
         </button>
diff --git a/app/components/prompt-editor/ConfigDiffPane.tsx b/app/components/prompt-editor/ConfigDiffPane.tsx
index 09018ef9..3903a533 100644
--- a/app/components/prompt-editor/ConfigDiffPane.tsx
+++ b/app/components/prompt-editor/ConfigDiffPane.tsx
@@ -1,4 +1,4 @@
-import { colors } from "@/app/lib/colors";
+import { VersionPill } from "@/app/components";
 import { SavedConfig } from "@/app/lib/types/configs";
 
 interface ConfigDiffPaneProps {
@@ -17,10 +17,8 @@ export default function ConfigDiffPane({
   selectedCommit,
   compareWith,
 }: ConfigDiffPaneProps) {
-  // Build config diffs
   const configDiffs: ConfigDiff[] = [];
 
-  // Compare provider
   if (compareWith.provider !== selectedCommit.provider) {
     configDiffs.push({
       field: "Provider",
@@ -30,7 +28,6 @@ export default function ConfigDiffPane({
     });
   }
 
-  // Compare model
   if (compareWith.modelName !== selectedCommit.modelName) {
     configDiffs.push({
       field: "Model",
@@ -40,7 +37,6 @@ export default function ConfigDiffPane({
     });
   }
 
-  // Compare temperature
   if (compareWith.temperature !== selectedCommit.temperature) {
     configDiffs.push({
       field: "Temperature",
@@ -50,7 +46,6 @@ export default function ConfigDiffPane({
     });
   }
 
-  // Compare tools
   const oldTools = compareWith.tools || [];
   const newTools = selectedCommit.tools || [];
   if (JSON.stringify(oldTools) !== JSON.stringify(newTools)) {
@@ -67,18 +62,14 @@ export default function ConfigDiffPane({
   const renderValue = (value: unknown): string => {
     if (Array.isArray(value)) {
       if (value.length === 0) return "[]";
-      return (
-        value
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          .map((_idx: any) => {
-            const tool = _idx;
-            if (tool.type === "file_search") {
-              return `File Search (${tool.knowledge_base_ids?.[0] || "no store"})`;
-            }
-            return JSON.stringify(tool);
-          })
-          .join(", ")
-      );
+      return value
+        .map((tool) => {
+          if (tool && typeof tool === "object" && tool.type === "file_search") {
+            return `File Search (${tool.knowledge_base_ids?.[0] || "no store"})`;
+          }
+          return JSON.stringify(tool);
+        })
+        .join(", ");
     }
     if (typeof value === "object") {
       return JSON.stringify(value, null, 2);
@@ -88,38 +79,23 @@ export default function ConfigDiffPane({
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
-      <div
-        className="px-4 py-3 border-b"
-        style={{
-          backgroundColor: colors.bg.primary,
-          borderColor: colors.border,
-        }}
-      >
-        <h3
-          className="text-sm font-semibold"
-          style={{ color: colors.text.primary }}
-        >
+      <div className="px-4 py-3 border-b border-border bg-bg-primary">
+        <h3 className="text-sm font-semibold text-text-primary">
           Configuration Changes
         </h3>
-        <div className="text-xs mt-1" style={{ color: colors.text.secondary }}>
-          Comparing v{compareWith.version} → v{selectedCommit.version}
+        <div className="text-xs mt-1 text-text-secondary inline-flex items-center gap-1.5">
+          Comparing <VersionPill version={compareWith.version} size="sm" /> →
+          <VersionPill
+            version={selectedCommit.version}
+            size="sm"
+            tone="accent"
+          />
         </div>
       </div>
-      <div
-        className="flex-1 p-4 overflow-auto"
-        style={{
-          backgroundColor: colors.bg.secondary,
-        }}
-      >
+      <div className="flex-1 p-4 overflow-auto bg-bg-secondary">
         {!hasChanges ? (
-          <div
-            className="border-2 border-dashed rounded-lg p-6 text-center"
-            style={{
-              borderColor: colors.border,
-              backgroundColor: colors.bg.primary,
-            }}
-          >
-            <p className="text-sm" style={{ color: colors.text.secondary }}>
+          <div className="border-2 border-dashed border-border rounded-lg p-6 text-center bg-bg-primary">
+            <p className="text-sm text-text-secondary">
               No configuration changes
             </p>
           </div>
@@ -128,50 +104,25 @@ export default function ConfigDiffPane({
             {configDiffs.map((diff, idx) => (
               <div
                 key={idx}
-                className="border rounded-lg p-3"
-                style={{
-                  backgroundColor: colors.bg.primary,
-                  borderColor: colors.border,
-                }}
+                className="rounded-lg p-3 bg-bg-primary shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)]"
               >
-                <div
-                  className="text-xs font-semibold mb-2"
-                  style={{ color: colors.text.secondary }}
-                >
+                <div className="text-xs font-semibold mb-2 text-text-secondary">
                   {diff.field}
                 </div>
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <div
-                      className="text-xs mb-1"
-                      style={{ color: colors.text.secondary }}
-                    >
+                    <div className="text-xs mb-1 text-text-secondary">
                       Before (v{compareWith.version})
                     </div>
-                    <div
-                      className="p-2 rounded text-sm font-mono break-all"
-                      style={{
-                        backgroundColor: "#fee2e2",
-                        color: colors.status.error,
-                      }}
-                    >
+                    <div className="p-2 rounded text-sm font-mono break-all bg-status-error-bg text-status-error-text">
                       {renderValue(diff.oldValue)}
                     </div>
                   </div>
                   <div>
-                    <div
-                      className="text-xs mb-1"
-                      style={{ color: colors.text.secondary }}
-                    >
+                    <div className="text-xs mb-1 text-text-secondary">
                       After (v{selectedCommit.version})
                     </div>
-                    <div
-                      className="p-2 rounded text-sm font-mono break-all"
-                      style={{
-                        backgroundColor: "#dcfce7",
-                        color: "#15803d",
-                      }}
-                    >
+                    <div className="p-2 rounded text-sm font-mono break-all bg-status-success-bg text-status-success-text">
                       {renderValue(diff.newValue)}
                     </div>
                   </div>
diff --git a/app/components/prompt-editor/ConfigEditorPane.tsx b/app/components/prompt-editor/ConfigEditorPane.tsx
index c48496b9..66c0808b 100644
--- a/app/components/prompt-editor/ConfigEditorPane.tsx
+++ b/app/components/prompt-editor/ConfigEditorPane.tsx
@@ -7,19 +7,14 @@ import {
   ConfigVersionItems,
   CompletionConfig,
 } from "@/app/lib/types/configs";
-import { formatRelativeTime } from "@/app/lib/utils";
 import { MODEL_OPTIONS, isGpt5Model } from "@/app/lib/models";
-import {
-  ChevronDownIcon,
-  CheckIcon,
-  PlusIcon,
-  SpinnerIcon,
-  InfoIcon,
-} from "@/app/components/icons";
 import { PROVIDER_TYPES, PROVIDES_OPTIONS } from "@/app/lib/constants";
 import GuardrailsSection from "./GuardrailsSection";
 import SaveConfigModal from "./SaveConfigModal";
-import { Button, Field, VersionPill } from "@/app/components";
+import LoadConfigDropdown from "./LoadConfigDropdown";
+import ConfigNameSection from "./ConfigNameSection";
+import ToolsSection from "./ToolsSection";
+import { Button } from "@/app/components";
 
 const inputClass =
   "w-full px-3 py-2 rounded-md text-sm focus:outline-none border border-border bg-bg-primary text-text-primary";
@@ -71,6 +66,8 @@ export default function ConfigEditorPane({
   const [guardrailsQueryString, setGuardrailsQueryString] = useState<
     string | null
   >(null);
+  const [showSaveModal, setShowSaveModal] = useState(false);
+  const wasSavingRef = useRef(false);
 
   useEffect(() => {
     guardrailsFetch<{ data?: { organization_id: number; project_id: number } }>(
@@ -89,17 +86,6 @@ export default function ConfigEditorPane({
       .catch(() => {});
   }, [apiKey]);
 
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [expandedConfigId, setExpandedConfigId] = useState<string | null>(null);
-  const [loadingVersionsFor, setLoadingVersionsFor] = useState<Set<string>>(
-    new Set(),
-  );
-  const [isRenaming, setIsRenaming] = useState(false);
-  const [renameDraft, setRenameDraft] = useState("");
-  const [isApplyingRename, setIsApplyingRename] = useState(false);
-  const [showSaveModal, setShowSaveModal] = useState(false);
-  const wasSavingRef = useRef(false);
-
   // Close the save modal when a save just completed successfully.
   useEffect(() => {
     if (wasSavingRef.current && !isSaving && commitMessage === "") {
@@ -108,88 +94,13 @@ export default function ConfigEditorPane({
     wasSavingRef.current = isSaving;
   }, [isSaving, commitMessage]);
 
-  const isBoundToSavedConfig = !!boundConfigId;
-
-  const handleStartRename = () => {
-    setRenameDraft(configName);
-    setIsRenaming(true);
-  };
-
-  const handleCancelRename = () => {
-    setIsRenaming(false);
-    setRenameDraft("");
-  };
-
-  const handleApplyRename = async () => {
-    if (!boundConfigId || !onRenameConfig) return;
-    const trimmed = renameDraft.trim();
-    if (!trimmed || trimmed === configName) {
-      handleCancelRename();
-      return;
-    }
-    setIsApplyingRename(true);
-    const ok = await onRenameConfig(boundConfigId, trimmed);
-    setIsApplyingRename(false);
-    if (ok) {
-      setIsRenaming(false);
-      setRenameDraft("");
-    }
-  };
-
-  const handleOpenLoadDropdown = () => {
-    if (!isDropdownOpen) {
-      if (selectedConfigId) {
-        const selected = savedConfigs.find((c) => c.id === selectedConfigId);
-        if (selected) {
-          setExpandedConfigId(selected.config_id);
-          if (!versionItemsMap[selected.config_id] && loadVersionsForConfig) {
-            setLoadingVersionsFor((prev) =>
-              new Set(prev).add(selected.config_id),
-            );
-            loadVersionsForConfig(selected.config_id).finally(() => {
-              setLoadingVersionsFor((prev) => {
-                const s = new Set(prev);
-                s.delete(selected.config_id);
-                return s;
-              });
-            });
-          }
-        }
-      }
-    }
-    setIsDropdownOpen((prev) => !prev);
-  };
-
-  const handleToggleGroup = (config_id: string) => {
-    if (expandedConfigId === config_id) {
-      setExpandedConfigId(null);
-      return;
-    }
-    setExpandedConfigId(config_id);
-    if (
-      !versionItemsMap[config_id] &&
-      !loadingVersionsFor.has(config_id) &&
-      loadVersionsForConfig
-    ) {
-      setLoadingVersionsFor((prev) => new Set(prev).add(config_id));
-      loadVersionsForConfig(config_id).finally(() => {
-        setLoadingVersionsFor((prev) => {
-          const s = new Set(prev);
-          s.delete(config_id);
-          return s;
-        });
-      });
-    }
-  };
-  const [showTooltip, setShowTooltip] = useState<number | null>(null);
-
   const provider = configBlob.completion.provider;
   const params = configBlob.completion.params;
   const isGpt5 = isGpt5Model(params.model);
   const tools = (params.tools || []) as Tool[];
 
   const selectedConfig = savedConfigs.find((c) => c.id === selectedConfigId);
-
+  const isBoundToSavedConfig = !!boundConfigId;
   const existingConfigForHint = configName.trim()
     ? allConfigMeta.find((m) => m.name === configName.trim())
     : undefined;
@@ -212,10 +123,7 @@ export default function ConfigEditorPane({
   const handleTypeChange = (newType: "text" | "stt" | "tts") => {
     onConfigChange({
       ...configBlob,
-      completion: {
-        ...configBlob.completion,
-        type: newType,
-      },
+      completion: { ...configBlob.completion, type: newType },
     });
   };
 
@@ -295,459 +203,150 @@ export default function ConfigEditorPane({
         </h3>
       </div>
 
-      {
-        <div className="flex-1 overflow-auto p-4">
-          <div className="space-y-4">
-            <div className="relative">
-              <label className="block text-xs font-semibold mb-2 text-text-primary">
-                Load Configuration
-              </label>
-              <button
-                onClick={handleOpenLoadDropdown}
-                className={`w-full px-3 py-2.5 rounded-md text-left flex items-center justify-between transition-colors bg-bg-primary text-text-primary border ${
-                  selectedConfig ? "border-accent-primary" : "border-border"
-                }`}
-              >
-                {selectedConfig ? (
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span
-                        className="font-medium text-sm truncate"
-                        title={selectedConfig.name}
-                      >
-                        {selectedConfig.name}
-                      </span>
-                      <VersionPill
-                        version={selectedConfig.version}
-                        size="sm"
-                        className="shrink-0"
-                      />
-                    </div>
-                    <div className="text-xs mt-0.5 text-text-secondary truncate">
-                      {selectedConfig.provider}/{selectedConfig.modelName} •{" "}
-                      {selectedConfig.type}
-                    </div>
-                  </div>
-                ) : (
-                  <span className="text-sm text-text-secondary whitespace-nowrap truncate">
-                    + New Configuration
-                  </span>
-                )}
-                <ChevronDownIcon
-                  className="w-4 h-4 shrink-0 ml-2 transition-transform text-text-secondary"
-                  style={{
-                    transform: isDropdownOpen
-                      ? "rotate(180deg)"
-                      : "rotate(0deg)",
-                  }}
-                />
-              </button>
-
-              {isDropdownOpen && (
-                <div className="absolute z-50 w-full mt-1 rounded-md shadow-lg max-h-64 overflow-auto bg-bg-primary border border-border">
-                  <button
-                    onClick={() => {
-                      onLoadConfig(null);
-                      setIsDropdownOpen(false);
-                    }}
-                    className={`w-full px-3 py-2.5 text-left flex items-center gap-2 transition-colors border-b border-border ${
-                      !selectedConfigId
-                        ? "bg-bg-secondary"
-                        : "bg-bg-primary hover:bg-bg-secondary"
-                    }`}
-                  >
-                    <PlusIcon className="w-4 h-4 text-accent-primary" />
-                    <span className="text-sm font-medium text-text-primary">
-                      New Configuration
-                    </span>
-                  </button>
-
-                  {allConfigMeta.map((meta) => {
-                    const isExpanded = expandedConfigId === meta.id;
-                    const isLoadingGroup = loadingVersionsFor.has(meta.id);
-                    const items = versionItemsMap[meta.id] ?? [];
-                    return (
-                      <div key={meta.id}>
-                        <button
-                          className="w-full px-3 py-2 text-left flex items-center justify-between sticky top-0 transition-colors bg-bg-secondary text-text-secondary"
-                          onClick={() => handleToggleGroup(meta.id)}
-                        >
-                          <span className="text-xs font-medium">
-                            {meta.name}
-                            {items.length > 0 && (
-                              <span className="ml-1 font-normal">
-                                ({items.length})
-                              </span>
-                            )}
-                          </span>
-                          <span className="flex items-center gap-1">
-                            {isLoadingGroup && (
-                              <SpinnerIcon className="w-3 h-3" />
-                            )}
-                            <ChevronDownIcon
-                              className="w-3.5 h-3.5"
-                              style={{
-                                transform: isExpanded
-                                  ? "rotate(180deg)"
-                                  : "rotate(0deg)",
-                                transition: "transform 0.15s",
-                              }}
-                            />
-                          </span>
-                        </button>
-                        {isExpanded &&
-                          !isLoadingGroup &&
-                          items.map((item) => {
-                            const isSelected =
-                              selectedConfig?.config_id === meta.id &&
-                              selectedConfig?.version === item.version;
-                            return (
-                              <button
-                                key={item.id}
-                                onClick={async () => {
-                                  const full = savedConfigs.find(
-                                    (c) =>
-                                      c.config_id === item.config_id &&
-                                      c.version === item.version,
-                                  );
-                                  const config =
-                                    full ??
-                                    (loadSingleVersion
-                                      ? await loadSingleVersion(
-                                          item.config_id,
-                                          item.version,
-                                        )
-                                      : null);
-                                  if (config) {
-                                    onLoadConfig(config);
-                                    setIsDropdownOpen(false);
-                                  }
-                                }}
-                                className={`w-full px-4 py-2 text-left flex items-center justify-between transition-colors ${
-                                  isSelected
-                                    ? "bg-bg-secondary"
-                                    : "bg-bg-primary hover:bg-bg-secondary"
-                                }`}
-                              >
-                                <div className="flex-1 min-w-0">
-                                  <div className="flex items-center gap-2">
-                                    <VersionPill
-                                      version={item.version}
-                                      size="sm"
-                                    />
-                                    <span className="text-sm truncate text-text-primary">
-                                      {item.commit_message || "No message"}
-                                    </span>
-                                  </div>
-                                  <div className="text-xs mt-0.5 text-text-secondary">
-                                    {formatRelativeTime(item.inserted_at)}
-                                  </div>
-                                </div>
-                                {isSelected && (
-                                  <CheckIcon className="w-4 h-4 shrink-0 text-status-success" />
-                                )}
-                              </button>
-                            );
-                          })}
-                        {isExpanded && isLoadingGroup && (
-                          <div className="px-4 py-3 text-xs text-text-secondary">
-                            Loading versions…
-                          </div>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-
-              {isDropdownOpen && (
-                <div
-                  className="fixed inset-0 z-40"
-                  onClick={() => setIsDropdownOpen(false)}
-                />
-              )}
-            </div>
-
-            {isBoundToSavedConfig && !isRenaming && (
-              <div>
-                <label className="block text-xs font-medium text-text-secondary mb-1">
-                  Configuration Name
-                </label>
-                <div className="flex items-center gap-2">
-                  <div className="flex-1 px-3 py-2 rounded-lg border border-border bg-bg-secondary text-text-primary text-sm truncate">
-                    {configName || "Untitled"}
-                  </div>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleStartRename}
-                    title="Rename this configuration (does not create a new version)"
-                  >
-                    Rename
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            {isBoundToSavedConfig && isRenaming && (
-              <div className="space-y-2">
-                <Field
-                  label="New Configuration Name"
-                  value={renameDraft}
-                  onChange={setRenameDraft}
-                  placeholder="New name"
-                  autoFocus
-                  disabled={isApplyingRename}
-                />
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="primary"
-                    size="sm"
-                    onClick={handleApplyRename}
-                    disabled={
-                      isApplyingRename ||
-                      !renameDraft.trim() ||
-                      renameDraft.trim() === configName
-                    }
-                  >
-                    {isApplyingRename ? "Renaming…" : "Apply rename"}
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleCancelRename}
-                    disabled={isApplyingRename}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-                <p className="text-xs text-text-secondary">
-                  ✏️ Renames the configuration metadata only — no new version is
-                  created.
-                </p>
-              </div>
-            )}
+      <div className="flex-1 overflow-auto p-4">
+        <div className="space-y-4">
+          <LoadConfigDropdown
+            selectedConfig={selectedConfig}
+            selectedConfigId={selectedConfigId}
+            savedConfigs={savedConfigs}
+            allConfigMeta={allConfigMeta}
+            versionItemsMap={versionItemsMap}
+            loadVersionsForConfig={loadVersionsForConfig}
+            loadSingleVersion={loadSingleVersion}
+            onLoadConfig={onLoadConfig}
+          />
+
+          <ConfigNameSection
+            configName={configName}
+            onConfigNameChange={onConfigNameChange}
+            boundConfigId={boundConfigId}
+            onRenameConfig={onRenameConfig}
+            allConfigMeta={allConfigMeta}
+          />
+
+          <div>
+            <label className="block text-xs font-semibold mb-2 text-text-primary">
+              Provider
+            </label>
+            <select
+              value={provider}
+              onChange={(e) => handleProviderChange(e.target.value)}
+              className={inputClass}
+            >
+              {PROVIDES_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
 
-            {!isBoundToSavedConfig && (
-              <div>
-                <Field
-                  label="Configuration Name *"
-                  value={configName}
-                  onChange={onConfigNameChange}
-                  placeholder="e.g., my-config"
-                />
-                {configName.trim() && (
-                  <p
-                    className="text-xs mt-1.5 text-text-secondary truncate"
-                    title={
-                      existingConfigForHint
-                        ? `Will create a new version for "${configName}"`
-                        : `Will create a new config "${configName}"`
-                    }
-                  >
-                    {existingConfigForHint
-                      ? `💡 Will create a new version for "${configName}"`
-                      : `✨ Will create a new config "${configName}"`}
-                  </p>
-                )}
-              </div>
-            )}
+          <div>
+            <label className="block text-xs font-semibold mb-2 text-text-primary">
+              Type
+            </label>
+            <select
+              value={configBlob.completion.type || "text"}
+              onChange={(e) =>
+                handleTypeChange(e.target.value as "text" | "stt" | "tts")
+              }
+              className={inputClass}
+            >
+              {PROVIDER_TYPES.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+            <p className="text-xs mt-1.5 text-text-secondary">
+              Standard text-based LLM completion
+            </p>
+          </div>
 
-            <div>
-              <label className="block text-xs font-semibold mb-2 text-text-primary">
-                Provider
-              </label>
-              <select
-                value={provider}
-                onChange={(e) => handleProviderChange(e.target.value)}
-                className={inputClass}
-              >
-                {PROVIDES_OPTIONS.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
-            </div>
+          <div>
+            <label className="block text-xs font-semibold mb-2 text-text-primary">
+              Model
+            </label>
+            <select
+              value={params.model}
+              onChange={(e) => handleModelChange(e.target.value)}
+              className={inputClass}
+            >
+              {(
+                MODEL_OPTIONS[provider as keyof typeof MODEL_OPTIONS] ??
+                MODEL_OPTIONS.openai
+              ).map((model) => (
+                <option key={model.value} value={model.value}>
+                  {model.label}
+                </option>
+              ))}
+            </select>
+          </div>
 
+          {!isGpt5 && (
             <div>
               <label className="block text-xs font-semibold mb-2 text-text-primary">
-                Type
+                Temperature: {(params.temperature ?? 0.7).toFixed(2)}
               </label>
-              <select
-                value={configBlob.completion.type || "text"}
+              <input
+                type="range"
+                min="0"
+                max="2"
+                step="0.01"
+                value={params.temperature ?? 0.7}
                 onChange={(e) =>
-                  handleTypeChange(e.target.value as "text" | "stt" | "tts")
+                  handleTemperatureChange(parseFloat(e.target.value))
                 }
-                className={inputClass}
-              >
-                {PROVIDER_TYPES.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
-              <p className="text-xs mt-1.5 text-text-secondary">
-                Standard text-based LLM completion
-              </p>
-            </div>
-
-            <div>
-              <label className="block text-xs font-semibold mb-2 text-text-primary">
-                Model
-              </label>
-              <select
-                value={params.model}
-                onChange={(e) => handleModelChange(e.target.value)}
-                className={inputClass}
-              >
-                {(
-                  MODEL_OPTIONS[provider as keyof typeof MODEL_OPTIONS] ??
-                  MODEL_OPTIONS.openai
-                ).map((model) => (
-                  <option key={model.value} value={model.value}>
-                    {model.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            {!isGpt5 && (
-              <div>
-                <label className="block text-xs font-semibold mb-2 text-text-primary">
-                  Temperature: {(params.temperature ?? 0.7).toFixed(2)}
-                </label>
-                <input
-                  type="range"
-                  min="0"
-                  max="2"
-                  step="0.01"
-                  value={params.temperature ?? 0.7}
-                  onChange={(e) =>
-                    handleTemperatureChange(parseFloat(e.target.value))
-                  }
-                  className="w-full accent-accent-primary"
-                />
-                <div className="flex justify-between text-xs mt-1 text-text-secondary">
-                  <span>0</span>
-                  <span>2</span>
-                </div>
+                className="w-full accent-accent-primary"
+              />
+              <div className="flex justify-between text-xs mt-1 text-text-secondary">
+                <span>0</span>
+                <span>2</span>
               </div>
-            )}
-
-            <div>
-              <div className="flex justify-between items-center mb-2">
-                <label className="text-xs font-semibold text-text-primary">
-                  Tools
-                </label>
-                <button
-                  onClick={handleAddTool}
-                  className="px-2 py-1 rounded text-xs font-medium bg-accent-primary text-bg-primary"
-                >
-                  + Add Tool
-                </button>
-              </div>
-              {tools.map((tool, index) => (
-                <div
-                  key={index}
-                  className="p-3 rounded mb-2 border border-border bg-bg-secondary"
-                >
-                  <div className="flex justify-between items-center mb-2">
-                    <span className="text-xs font-semibold text-text-primary">
-                      File Search
-                    </span>
-                    <button
-                      onClick={() => handleRemoveTool(index)}
-                      className="text-xs bg-transparent border-0 text-status-error cursor-pointer"
-                    >
-                      Remove
-                    </button>
-                  </div>
-                  <div className="mb-3">
-                    <Field
-                      label="Knowledge Base ID"
-                      value={tool.knowledge_base_ids[0] || ""}
-                      onChange={(v) =>
-                        handleUpdateTool(index, "knowledge_base_ids", [v])
-                      }
-                      placeholder="vs_abc123"
-                    />
-                  </div>
-
-                  {!isGpt5 && (
-                    <div>
-                      <div className="flex items-center gap-1 mb-1">
-                        <label className="text-xs font-medium text-text-secondary">
-                          Max Results
-                        </label>
-                        <div
-                          className="relative inline-flex items-center justify-center cursor-help w-3.5 h-3.5"
-                          onMouseEnter={() => setShowTooltip(index)}
-                          onMouseLeave={() => setShowTooltip(null)}
-                        >
-                          <InfoIcon className="w-3.5 h-3.5 text-text-secondary" />
-                          {showTooltip === index && (
-                            <div className="absolute left-full ml-2 px-2 py-1.5 rounded text-xs z-50 bg-text-primary text-bg-primary top-1/2 transform -translate-y-1/2 shadow-lg whitespace-nowrap line-height-1.4">
-                              Controls how many matching results are returned
-                              <br />
-                              from the search
-                              <div className="absolute right-full top-[50%] transform -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-text-primary" />
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                      <input
-                        type="number"
-                        value={tool.max_num_results}
-                        onChange={(e) =>
-                          handleUpdateTool(
-                            index,
-                            "max_num_results",
-                            parseInt(e.target.value) || 20,
-                          )
-                        }
-                        className="w-full px-3 py-2 rounded-lg border border-border bg-white text-text-primary text-sm placeholder:text-neutral-400 focus:outline-none focus:ring-accent-primary/20 focus:border-accent-primary transition-colors"
-                      />
-                    </div>
-                  )}
-                </div>
-              ))}
             </div>
-
-            <GuardrailsSection
-              label="Input Guardrails"
-              guardrails={configBlob.input_guardrails ?? []}
-              onChange={(refs) =>
-                onConfigChange({ ...configBlob, input_guardrails: refs })
-              }
-              apiKey={apiKey}
-              queryString={guardrailsQueryString}
-              stage="input"
-            />
-
-            <GuardrailsSection
-              label="Output Guardrails"
-              guardrails={configBlob.output_guardrails ?? []}
-              onChange={(refs) =>
-                onConfigChange({ ...configBlob, output_guardrails: refs })
-              }
-              apiKey={apiKey}
-              queryString={guardrailsQueryString}
-              stage="output"
-            />
-
-            <Button
-              variant="primary"
-              size="md"
-              fullWidth
-              onClick={() => setShowSaveModal(true)}
-              disabled={saveDisabled}
-            >
-              {isSaving ? "Saving..." : "Save Configuration"}
-            </Button>
-          </div>
+          )}
+
+          <ToolsSection
+            tools={tools}
+            isGpt5={isGpt5}
+            onAddTool={handleAddTool}
+            onRemoveTool={handleRemoveTool}
+            onUpdateTool={handleUpdateTool}
+          />
+
+          <GuardrailsSection
+            label="Input Guardrails"
+            guardrails={configBlob.input_guardrails ?? []}
+            onChange={(refs) =>
+              onConfigChange({ ...configBlob, input_guardrails: refs })
+            }
+            apiKey={apiKey}
+            queryString={guardrailsQueryString}
+            stage="input"
+          />
+
+          <GuardrailsSection
+            label="Output Guardrails"
+            guardrails={configBlob.output_guardrails ?? []}
+            onChange={(refs) =>
+              onConfigChange({ ...configBlob, output_guardrails: refs })
+            }
+            apiKey={apiKey}
+            queryString={guardrailsQueryString}
+            stage="output"
+          />
+
+          <Button
+            variant="primary"
+            size="md"
+            fullWidth
+            onClick={() => setShowSaveModal(true)}
+            disabled={saveDisabled}
+          >
+            {isSaving ? "Saving..." : "Save Configuration"}
+          </Button>
         </div>
-      }
+      </div>
 
       <SaveConfigModal
         open={showSaveModal}
diff --git a/app/components/prompt-editor/ConfigNameSection.tsx b/app/components/prompt-editor/ConfigNameSection.tsx
new file mode 100644
index 00000000..6164fad9
--- /dev/null
+++ b/app/components/prompt-editor/ConfigNameSection.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Field } from "@/app/components";
+import { ConfigPublic } from "@/app/lib/types/configs";
+
+interface ConfigNameSectionProps {
+  configName: string;
+  onConfigNameChange: (name: string) => void;
+  /**
+   * The parent config_id this version belongs to. When set, the name is
+   * locked behind an explicit Rename action that doesn't create a version.
+   */
+  boundConfigId?: string;
+  /** Renames the config metadata only — does not create a new version. */
+  onRenameConfig?: (configId: string, newName: string) => Promise<boolean>;
+  allConfigMeta: ConfigPublic[];
+}
+
+export default function ConfigNameSection({
+  configName,
+  onConfigNameChange,
+  boundConfigId,
+  onRenameConfig,
+  allConfigMeta,
+}: ConfigNameSectionProps) {
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renameDraft, setRenameDraft] = useState("");
+  const [isApplyingRename, setIsApplyingRename] = useState(false);
+
+  const isBound = !!boundConfigId;
+
+  const existingConfigForHint = configName.trim()
+    ? allConfigMeta.find((m) => m.name === configName.trim())
+    : undefined;
+
+  const handleStartRename = () => {
+    setRenameDraft(configName);
+    setIsRenaming(true);
+  };
+
+  const handleCancelRename = () => {
+    setIsRenaming(false);
+    setRenameDraft("");
+  };
+
+  const handleApplyRename = async () => {
+    if (!boundConfigId || !onRenameConfig) return;
+    const trimmed = renameDraft.trim();
+    if (!trimmed || trimmed === configName) {
+      handleCancelRename();
+      return;
+    }
+    setIsApplyingRename(true);
+    const ok = await onRenameConfig(boundConfigId, trimmed);
+    setIsApplyingRename(false);
+    if (ok) {
+      setIsRenaming(false);
+      setRenameDraft("");
+    }
+  };
+
+  if (isBound && !isRenaming) {
+    return (
+      <div>
+        <label className="block text-xs font-medium text-text-secondary mb-1">
+          Configuration Name
+        </label>
+        <div className="flex items-center gap-2">
+          <div className="flex-1 px-3 py-2 rounded-lg border border-border bg-bg-secondary text-text-primary text-sm truncate">
+            {configName || "Untitled"}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleStartRename}
+            title="Rename this configuration (does not create a new version)"
+          >
+            Rename
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (isBound && isRenaming) {
+    return (
+      <div className="space-y-2">
+        <Field
+          label="New Configuration Name"
+          value={renameDraft}
+          onChange={setRenameDraft}
+          placeholder="New name"
+          autoFocus
+          disabled={isApplyingRename}
+        />
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={handleApplyRename}
+            disabled={
+              isApplyingRename ||
+              !renameDraft.trim() ||
+              renameDraft.trim() === configName
+            }
+          >
+            {isApplyingRename ? "Renaming…" : "Apply rename"}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleCancelRename}
+            disabled={isApplyingRename}
+          >
+            Cancel
+          </Button>
+        </div>
+        <p className="text-xs text-text-secondary">
+          ✏️ Renames the configuration metadata only — no new version is
+          created.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Field
+        label="Configuration Name *"
+        value={configName}
+        onChange={onConfigNameChange}
+        placeholder="e.g., my-config"
+      />
+      {configName.trim() && (
+        <p
+          className="text-xs mt-1.5 text-text-secondary truncate"
+          title={
+            existingConfigForHint
+              ? `Will create a new version for "${configName}"`
+              : `Will create a new config "${configName}"`
+          }
+        >
+          {existingConfigForHint
+            ? `💡 Will create a new version for "${configName}"`
+            : `✨ Will create a new config "${configName}"`}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/prompt-editor/LoadConfigDropdown.tsx b/app/components/prompt-editor/LoadConfigDropdown.tsx
new file mode 100644
index 00000000..a157022e
--- /dev/null
+++ b/app/components/prompt-editor/LoadConfigDropdown.tsx
@@ -0,0 +1,233 @@
+"use client";
+
+import { useState } from "react";
+import { VersionPill } from "@/app/components";
+import {
+  ChevronDownIcon,
+  CheckIcon,
+  PlusIcon,
+  SpinnerIcon,
+} from "@/app/components/icons";
+import {
+  ConfigPublic,
+  SavedConfig,
+  ConfigVersionItems,
+} from "@/app/lib/types/configs";
+import { formatRelativeTime } from "@/app/lib/utils";
+
+interface LoadConfigDropdownProps {
+  selectedConfig?: SavedConfig;
+  selectedConfigId: string;
+  savedConfigs: SavedConfig[];
+  allConfigMeta: ConfigPublic[];
+  versionItemsMap: Record<string, ConfigVersionItems[]>;
+  loadVersionsForConfig?: (config_id: string) => Promise<void>;
+  loadSingleVersion?: (
+    config_id: string,
+    version: number,
+  ) => Promise<SavedConfig | null>;
+  onLoadConfig: (config: SavedConfig | null) => void;
+}
+
+export default function LoadConfigDropdown({
+  selectedConfig,
+  selectedConfigId,
+  savedConfigs,
+  allConfigMeta,
+  versionItemsMap,
+  loadVersionsForConfig,
+  loadSingleVersion,
+  onLoadConfig,
+}: LoadConfigDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [expandedConfigId, setExpandedConfigId] = useState<string | null>(null);
+  const [loadingVersionsFor, setLoadingVersionsFor] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const ensureVersionsLoaded = (configId: string) => {
+    if (
+      !versionItemsMap[configId] &&
+      !loadingVersionsFor.has(configId) &&
+      loadVersionsForConfig
+    ) {
+      setLoadingVersionsFor((prev) => new Set(prev).add(configId));
+      loadVersionsForConfig(configId).finally(() => {
+        setLoadingVersionsFor((prev) => {
+          const s = new Set(prev);
+          s.delete(configId);
+          return s;
+        });
+      });
+    }
+  };
+
+  const handleOpen = () => {
+    if (!isOpen && selectedConfig) {
+      setExpandedConfigId(selectedConfig.config_id);
+      ensureVersionsLoaded(selectedConfig.config_id);
+    }
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleToggleGroup = (config_id: string) => {
+    if (expandedConfigId === config_id) {
+      setExpandedConfigId(null);
+      return;
+    }
+    setExpandedConfigId(config_id);
+    ensureVersionsLoaded(config_id);
+  };
+
+  const handleSelectVersion = async (item: ConfigVersionItems) => {
+    const full = savedConfigs.find(
+      (c) => c.config_id === item.config_id && c.version === item.version,
+    );
+    const config =
+      full ??
+      (loadSingleVersion
+        ? await loadSingleVersion(item.config_id, item.version)
+        : null);
+    if (config) {
+      onLoadConfig(config);
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div className="relative">
+      <label className="block text-xs font-semibold mb-2 text-text-primary">
+        Load Configuration
+      </label>
+      <button
+        onClick={handleOpen}
+        className={`w-full px-3 py-2.5 rounded-md text-left flex items-center justify-between transition-colors bg-bg-primary text-text-primary border ${
+          selectedConfig ? "border-accent-primary" : "border-border"
+        }`}
+      >
+        {selectedConfig ? (
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span
+                className="font-medium text-sm truncate"
+                title={selectedConfig.name}
+              >
+                {selectedConfig.name}
+              </span>
+              <VersionPill
+                version={selectedConfig.version}
+                size="sm"
+                className="shrink-0"
+              />
+            </div>
+            <div className="text-xs mt-0.5 text-text-secondary truncate">
+              {selectedConfig.provider}/{selectedConfig.modelName} •{" "}
+              {selectedConfig.type}
+            </div>
+          </div>
+        ) : (
+          <span className="text-sm text-text-secondary whitespace-nowrap truncate">
+            + New Configuration
+          </span>
+        )}
+        <ChevronDownIcon
+          className={`w-4 h-4 shrink-0 ml-2 transition-transform text-text-secondary ${
+            isOpen ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-50 w-full mt-1 rounded-md shadow-lg max-h-64 overflow-auto bg-bg-primary border border-border">
+          <button
+            onClick={() => {
+              onLoadConfig(null);
+              setIsOpen(false);
+            }}
+            className={`w-full px-3 py-2.5 text-left flex items-center gap-2 transition-colors border-b border-border ${
+              !selectedConfigId
+                ? "bg-bg-secondary"
+                : "bg-bg-primary hover:bg-bg-secondary"
+            }`}
+          >
+            <PlusIcon className="w-4 h-4 text-accent-primary" />
+            <span className="text-sm font-medium text-text-primary">
+              New Configuration
+            </span>
+          </button>
+
+          {allConfigMeta.map((meta) => {
+            const isExpanded = expandedConfigId === meta.id;
+            const isLoadingGroup = loadingVersionsFor.has(meta.id);
+            const items = versionItemsMap[meta.id] ?? [];
+            return (
+              <div key={meta.id}>
+                <button
+                  className="w-full px-3 py-2 text-left flex items-center justify-between sticky top-0 transition-colors bg-bg-secondary text-text-secondary"
+                  onClick={() => handleToggleGroup(meta.id)}
+                >
+                  <span className="text-xs font-medium">
+                    {meta.name}
+                    {items.length > 0 && (
+                      <span className="ml-1 font-normal">({items.length})</span>
+                    )}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    {isLoadingGroup && <SpinnerIcon className="w-3 h-3" />}
+                    <ChevronDownIcon
+                      className={`w-3.5 h-3.5 transition-transform ${
+                        isExpanded ? "rotate-180" : ""
+                      }`}
+                    />
+                  </span>
+                </button>
+                {isExpanded &&
+                  !isLoadingGroup &&
+                  items.map((item) => {
+                    const isSelected =
+                      selectedConfig?.config_id === meta.id &&
+                      selectedConfig?.version === item.version;
+                    return (
+                      <button
+                        key={item.id}
+                        onClick={() => handleSelectVersion(item)}
+                        className={`w-full px-4 py-2 text-left flex items-center justify-between transition-colors ${
+                          isSelected
+                            ? "bg-bg-secondary"
+                            : "bg-bg-primary hover:bg-bg-secondary"
+                        }`}
+                      >
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <VersionPill version={item.version} size="sm" />
+                            <span className="text-sm truncate text-text-primary">
+                              {item.commit_message || "No message"}
+                            </span>
+                          </div>
+                          <div className="text-xs mt-0.5 text-text-secondary">
+                            {formatRelativeTime(item.inserted_at)}
+                          </div>
+                        </div>
+                        {isSelected && (
+                          <CheckIcon className="w-4 h-4 shrink-0 text-status-success" />
+                        )}
+                      </button>
+                    );
+                  })}
+                {isExpanded && isLoadingGroup && (
+                  <div className="px-4 py-3 text-xs text-text-secondary">
+                    Loading versions…
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {isOpen && (
+        <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
+      )}
+    </div>
+  );
+}
diff --git a/app/components/prompt-editor/PromptDiffPane.tsx b/app/components/prompt-editor/PromptDiffPane.tsx
index a89f1b83..cdbce7b9 100644
--- a/app/components/prompt-editor/PromptDiffPane.tsx
+++ b/app/components/prompt-editor/PromptDiffPane.tsx
@@ -1,4 +1,4 @@
-import { colors } from "@/app/lib/colors";
+import { VersionPill } from "@/app/components";
 import { SavedConfig } from "@/app/lib/types/configs";
 
 interface PromptDiffPaneProps {
@@ -12,7 +12,6 @@ interface DiffLine {
   lineNumber: number;
 }
 
-// Simple diff utility - matches SimplifiedConfigEditor implementation
 function generateDiff(
   text1: string,
   text2: string,
@@ -28,19 +27,15 @@ function generateDiff(
     const line2 = lines2[i] !== undefined ? lines2[i] : null;
 
     if (line1 === null && line2 !== null) {
-      // Line only exists in text2 (added)
       left.push({ type: "same", content: "", lineNumber: i + 1 });
       right.push({ type: "added", content: line2, lineNumber: i + 1 });
     } else if (line1 !== null && line2 === null) {
-      // Line only exists in text1 (removed)
       left.push({ type: "removed", content: line1, lineNumber: i + 1 });
       right.push({ type: "same", content: "", lineNumber: i + 1 });
     } else if (line1 !== line2) {
-      // Lines are different
       left.push({ type: "removed", content: line1 || "", lineNumber: i + 1 });
       right.push({ type: "added", content: line2 || "", lineNumber: i + 1 });
     } else {
-      // Lines are the same
       left.push({ type: "same", content: line1 || "", lineNumber: i + 1 });
       right.push({ type: "same", content: line2 || "", lineNumber: i + 1 });
     }
@@ -63,124 +58,47 @@ export default function PromptDiffPane({
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
-      <div
-        className="px-4 py-3 border-b"
-        style={{
-          backgroundColor: colors.bg.primary,
-          borderColor: colors.border,
-        }}
-      >
-        <h3
-          className="text-sm font-semibold"
-          style={{ color: colors.text.primary }}
-        >
+      <div className="px-4 py-3 border-b border-border bg-bg-primary">
+        <h3 className="text-sm font-semibold text-text-primary">
           Prompt Changes
         </h3>
-        <div className="text-xs mt-1" style={{ color: colors.text.secondary }}>
-          Side-by-side comparison: v{compareWith.version} ↔ v
-          {selectedCommit.version}
+        <div className="text-xs mt-1 text-text-secondary inline-flex items-center gap-1.5">
+          Side-by-side comparison:{" "}
+          <VersionPill version={compareWith.version} size="sm" /> ↔
+          <VersionPill
+            version={selectedCommit.version}
+            size="sm"
+            tone="accent"
+          />
         </div>
       </div>
 
       {!hasChanges ? (
         <div className="flex-1 flex items-center justify-center">
-          <p className="text-sm" style={{ color: colors.text.secondary }}>
-            No prompt changes
-          </p>
+          <p className="text-sm text-text-secondary">No prompt changes</p>
         </div>
       ) : (
         <div className="flex-1 flex flex-col overflow-hidden">
-          {/* Column Headers */}
-          <div
-            className="grid grid-cols-2 border-b"
-            style={{
-              borderColor: colors.border,
-              backgroundColor: colors.bg.secondary,
-            }}
-          >
-            <div
-              className="px-3 py-2 text-xs font-semibold"
-              style={{ color: colors.text.primary }}
-            >
+          <div className="grid grid-cols-2 border-b border-border bg-bg-secondary">
+            <div className="px-3 py-2 text-xs font-semibold text-text-primary">
               v{compareWith.version} (Before)
             </div>
-            <div
-              className="px-3 py-2 text-xs font-semibold border-l"
-              style={{ color: colors.text.primary, borderColor: colors.border }}
-            >
+            <div className="px-3 py-2 text-xs font-semibold border-l border-border text-text-primary">
               v{selectedCommit.version} (After)
             </div>
           </div>
 
-          {/* Side-by-Side Diff */}
           <div className="flex-1 overflow-auto">
-            <div
-              className="grid grid-cols-2"
-              style={{
-                fontFamily:
-                  "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-                fontSize: "12px",
-              }}
-            >
-              {/* Left Panel */}
-              <div style={{ backgroundColor: colors.bg.primary }}>
+            <div className="grid grid-cols-2 font-mono text-xs">
+              <div className="bg-bg-primary">
                 {left.map((line, idx) => (
-                  <div
-                    key={idx}
-                    className="px-3 py-1"
-                    style={{
-                      backgroundColor:
-                        line.type === "removed"
-                          ? "#fee2e2"
-                          : line.type === "added"
-                            ? "transparent"
-                            : colors.bg.primary,
-                      color:
-                        line.type === "removed"
-                          ? colors.status.error
-                          : colors.text.primary,
-                      minHeight: "24px",
-                      lineHeight: "1.5",
-                      whiteSpace: "pre-wrap",
-                      wordBreak: "break-word",
-                    }}
-                  >
-                    {line.type === "removed" && "- "}
-                    {line.content || "\u00A0"}
-                  </div>
+                  <DiffLineRow key={idx} line={line} side="left" />
                 ))}
               </div>
 
-              {/* Right Panel */}
-              <div
-                className="border-l"
-                style={{
-                  borderColor: colors.border,
-                  backgroundColor: colors.bg.primary,
-                }}
-              >
+              <div className="border-l border-border bg-bg-primary">
                 {right.map((line, idx) => (
-                  <div
-                    key={idx}
-                    className="px-3 py-1"
-                    style={{
-                      backgroundColor:
-                        line.type === "added"
-                          ? "#dcfce7"
-                          : line.type === "removed"
-                            ? "transparent"
-                            : colors.bg.primary,
-                      color:
-                        line.type === "added" ? "#15803d" : colors.text.primary,
-                      minHeight: "24px",
-                      lineHeight: "1.5",
-                      whiteSpace: "pre-wrap",
-                      wordBreak: "break-word",
-                    }}
-                  >
-                    {line.type === "added" && "+ "}
-                    {line.content || "\u00A0"}
-                  </div>
+                  <DiffLineRow key={idx} line={line} side="right" />
                 ))}
               </div>
             </div>
@@ -190,3 +108,36 @@ export default function PromptDiffPane({
     </div>
   );
 }
+
+function DiffLineRow({
+  line,
+  side,
+}: {
+  line: DiffLine;
+  side: "left" | "right";
+}) {
+  const tone =
+    side === "left"
+      ? line.type === "removed"
+        ? "bg-status-error-bg text-status-error-text"
+        : "text-text-primary"
+      : line.type === "added"
+        ? "bg-status-success-bg text-status-success-text"
+        : "text-text-primary";
+
+  const prefix =
+    side === "left" && line.type === "removed"
+      ? "- "
+      : side === "right" && line.type === "added"
+        ? "+ "
+        : "";
+
+  return (
+    <div
+      className={`px-3 py-1 min-h-6 leading-relaxed whitespace-pre-wrap wrap-break-word ${tone}`}
+    >
+      {prefix}
+      {line.content || " "}
+    </div>
+  );
+}
diff --git a/app/components/prompt-editor/ToolsSection.tsx b/app/components/prompt-editor/ToolsSection.tsx
new file mode 100644
index 00000000..b98233b4
--- /dev/null
+++ b/app/components/prompt-editor/ToolsSection.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { Field } from "@/app/components";
+import { InfoIcon } from "@/app/components/icons";
+import { Tool } from "@/app/lib/types/promptEditor";
+
+interface ToolsSectionProps {
+  tools: Tool[];
+  isGpt5: boolean;
+  onAddTool: () => void;
+  onRemoveTool: (index: number) => void;
+  onUpdateTool: <K extends keyof Tool>(
+    index: number,
+    field: K,
+    value: Tool[K],
+  ) => void;
+}
+
+export default function ToolsSection({
+  tools,
+  isGpt5,
+  onAddTool,
+  onRemoveTool,
+  onUpdateTool,
+}: ToolsSectionProps) {
+  const [showTooltip, setShowTooltip] = useState<number | null>(null);
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-2">
+        <label className="text-xs font-semibold text-text-primary">Tools</label>
+        <button
+          onClick={onAddTool}
+          className="px-2 py-1 rounded text-xs font-medium bg-accent-primary text-bg-primary cursor-pointer"
+        >
+          + Add Tool
+        </button>
+      </div>
+      {tools.map((tool, index) => (
+        <div
+          key={index}
+          className="p-3 rounded mb-2 border border-border bg-bg-secondary"
+        >
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-xs font-semibold text-text-primary">
+              File Search
+            </span>
+            <button
+              onClick={() => onRemoveTool(index)}
+              className="text-xs bg-transparent border-0 text-status-error cursor-pointer"
+            >
+              Remove
+            </button>
+          </div>
+          <div className="mb-3">
+            <Field
+              label="Knowledge Base ID"
+              value={tool.knowledge_base_ids[0] || ""}
+              onChange={(v) => onUpdateTool(index, "knowledge_base_ids", [v])}
+              placeholder="vs_abc123"
+            />
+          </div>
+
+          {!isGpt5 && (
+            <div>
+              <div className="flex items-center gap-1 mb-1">
+                <label className="text-xs font-medium text-text-secondary">
+                  Max Results
+                </label>
+                <div
+                  className="relative inline-flex items-center justify-center cursor-help w-3.5 h-3.5"
+                  onMouseEnter={() => setShowTooltip(index)}
+                  onMouseLeave={() => setShowTooltip(null)}
+                >
+                  <InfoIcon className="w-3.5 h-3.5 text-text-secondary" />
+                  {showTooltip === index && (
+                    <div className="absolute left-full ml-2 px-2 py-1.5 rounded text-xs z-50 bg-text-primary text-bg-primary top-1/2 -translate-y-1/2 shadow-lg whitespace-nowrap leading-snug">
+                      Controls how many matching results are returned
+                      <br />
+                      from the search
+                      <div className="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-text-primary" />
+                    </div>
+                  )}
+                </div>
+              </div>
+              <input
+                type="number"
+                value={tool.max_num_results}
+                onChange={(e) =>
+                  onUpdateTool(
+                    index,
+                    "max_num_results",
+                    parseInt(e.target.value) || 20,
+                  )
+                }
+                className="w-full px-3 py-2 rounded-lg border border-border bg-bg-primary text-text-primary text-sm placeholder:text-neutral-400 focus:outline-none focus:ring-accent-primary/20 focus:border-accent-primary transition-colors"
+              />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/AudioPlayer.tsx b/app/components/speech-to-text/AudioPlayer.tsx
index 4a5347d8..f902490b 100644
--- a/app/components/speech-to-text/AudioPlayer.tsx
+++ b/app/components/speech-to-text/AudioPlayer.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
-import { colors } from "@/app/lib/colors";
 import WaveformVisualizer from "./WaveformVisualizer";
 
 interface AudioPlayerProps {
@@ -57,6 +56,8 @@ export default function AudioPlayer({
     return `${mins}:${secs.toString().padStart(2, "0")}`;
   };
 
+  const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0;
+
   return (
     <div className="space-y-1.5">
       <audio ref={audioRef} src={audioSrc} preload="metadata" />
@@ -64,13 +65,11 @@ export default function AudioPlayer({
       <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,
-          }}
+          className={`w-8 h-8 flex items-center justify-center rounded-full shrink-0 cursor-pointer ${
+            isPlaying
+              ? "bg-accent-primary text-white"
+              : "bg-bg-secondary text-text-primary"
+          }`}
         >
           {isPlaying ? (
             <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
@@ -84,7 +83,6 @@ export default function AudioPlayer({
           )}
         </button>
 
-        {/* Waveform Visualizer */}
         <div className="flex-1 min-w-0">
           {/* eslint-disable react-hooks/refs -- accessing ref in render for waveform display */}
           <WaveformVisualizer
@@ -95,26 +93,15 @@ export default function AudioPlayer({
           {/* eslint-enable react-hooks/refs */}
         </div>
 
-        <span
-          className="text-xs tabular-nums flex-shrink-0"
-          style={{ color: colors.text.secondary }}
-        >
+        <span className="text-xs tabular-nums shrink-0 text-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-0.5 rounded-full overflow-hidden mt-1 bg-border">
         <div
-          className="h-full rounded-full"
-          style={{
-            width: duration > 0 ? `${(currentTime / duration) * 100}%` : "0%",
-            backgroundColor: colors.accent.primary,
-            transition: "width 0.1s linear",
-          }}
+          className="h-full rounded-full bg-accent-primary transition-[width] duration-100 ease-linear"
+          style={{ width: `${progressPercent}%` }}
         />
       </div>
     </div>
diff --git a/app/components/speech-to-text/AudioPlayerFromUrl.tsx b/app/components/speech-to-text/AudioPlayerFromUrl.tsx
index 9e54e2e0..e2b14fd0 100644
--- a/app/components/speech-to-text/AudioPlayerFromUrl.tsx
+++ b/app/components/speech-to-text/AudioPlayerFromUrl.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
-import { colors } from "@/app/lib/colors";
 
 interface AudioPlayerFromUrlProps {
   signedUrl: string;
@@ -48,6 +47,8 @@ export default function AudioPlayerFromUrl({
     }
   }, [isPlaying]);
 
+  const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0;
+
   return (
     <div className="w-full">
       <audio ref={audioRef} src={signedUrl} preload="metadata" />
@@ -55,12 +56,7 @@ export default function AudioPlayerFromUrl({
       <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,
-          }}
+          className="w-6 h-6 flex items-center justify-center rounded-full shrink-0 border-2 border-accent-primary bg-transparent text-accent-primary cursor-pointer"
         >
           {isPlaying ? (
             <svg
@@ -83,27 +79,16 @@ export default function AudioPlayerFromUrl({
         </button>
 
         {sampleName && (
-          <div
-            className="flex-1 font-medium"
-            style={{ color: colors.text.primary }}
-          >
+          <div className="flex-1 font-medium text-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-0.5 rounded-full overflow-hidden mt-1.5 bg-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",
-          }}
+          className="h-full rounded-full bg-accent-primary transition-[width] duration-75 ease-out"
+          style={{ width: `${progressPercent}%` }}
         />
       </div>
     </div>
diff --git a/app/components/speech-to-text/DatasetDescription.tsx b/app/components/speech-to-text/DatasetDescription.tsx
index c678f880..9e62a2b7 100644
--- a/app/components/speech-to-text/DatasetDescription.tsx
+++ b/app/components/speech-to-text/DatasetDescription.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { colors } from "@/app/lib/colors";
 
 const DESCRIPTION_CHAR_LIMIT = 100;
 
@@ -14,10 +13,7 @@ export default function DatasetDescription({
   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 }}
-    >
+    <div className="mt-2 text-xs leading-relaxed wrap-break-word overflow-hidden text-text-secondary">
       <span>
         {isLong && !expanded
           ? description.slice(0, DESCRIPTION_CHAR_LIMIT).trimEnd() + "..."
@@ -29,8 +25,7 @@ export default function DatasetDescription({
             e.stopPropagation();
             setExpanded(!expanded);
           }}
-          className="mt-1 block text-xs font-medium"
-          style={{ color: colors.text.primary }}
+          className="mt-1 block text-xs font-medium text-text-primary cursor-pointer"
         >
           {expanded ? "Show less" : "Read more"}
         </button>
diff --git a/app/components/speech-to-text/TranscriptionDiffViewer.tsx b/app/components/speech-to-text/TranscriptionDiffViewer.tsx
index 69473d93..b54bc240 100644
--- a/app/components/speech-to-text/TranscriptionDiffViewer.tsx
+++ b/app/components/speech-to-text/TranscriptionDiffViewer.tsx
@@ -6,7 +6,6 @@
  */
 
 import { useMemo } from "react";
-import { colors } from "@/app/lib/colors";
 
 export interface DiffSegment {
   type: "match" | "substitution" | "deletion" | "insertion";
@@ -21,7 +20,12 @@ interface TranscriptionDiffViewerProps {
   compact?: boolean;
 }
 
-// Simple word-level diff algorithm
+// Tailwind classes for the diff highlight palette. Kept as constants so the
+// reference and hypothesis rows stay in sync.
+const SUBSTITUTION_BG = "bg-status-warning-bg text-status-warning-text";
+const DELETION_BG = "bg-status-error-bg text-status-error-text";
+const INSERTION_BG = "bg-status-success-bg text-status-success-text";
+
 export function computeWordDiff(
   reference: string,
   hypothesis: string,
@@ -35,23 +39,15 @@ export function computeWordDiff(
     .split(/\s+/)
     .filter((w) => w.length > 0);
 
-  if (refWords.length === 0 && hypWords.length === 0) {
-    return [];
-  }
-
-  if (refWords.length === 0) {
+  if (refWords.length === 0 && hypWords.length === 0) return [];
+  if (refWords.length === 0)
     return hypWords.map((w) => ({ type: "insertion", hypothesis: w }));
-  }
-
-  if (hypWords.length === 0) {
+  if (hypWords.length === 0)
     return refWords.map((w) => ({ type: "deletion", reference: w }));
-  }
 
-  // Use dynamic programming for optimal alignment (Levenshtein-style)
   const m = refWords.length;
   const n = hypWords.length;
 
-  // Build cost matrix
   const dp: number[][] = Array(m + 1)
     .fill(null)
     .map(() => Array(n + 1).fill(0));
@@ -89,7 +85,6 @@ export function computeWordDiff(
     }
   }
 
-  // Backtrack to get alignment
   const segments: DiffSegment[] = [];
   let i = m,
     j = n;
@@ -150,88 +145,56 @@ export default function TranscriptionDiffViewer({
 
   if (!groundTruth && !hypothesis) {
     return (
-      <div className="text-sm italic" style={{ color: colors.text.secondary }}>
+      <div className="text-sm italic text-text-secondary">
         No text to compare
       </div>
     );
   }
 
+  const rowPad = compact ? "p-2" : "p-3";
+
   return (
     <div className={compact ? "space-y-2" : "space-y-4"}>
-      {/* Legend */}
       {showLegend && (
-        <div
-          className="flex items-center gap-4 text-xs"
-          style={{ color: colors.text.secondary }}
-        >
-          <div className="flex items-center gap-1.5">
-            <span
-              className="inline-block w-3 h-3 rounded"
-              style={{ backgroundColor: "#fef3c7" }}
-            />
-            <span>Substitution ({stats.substitutions})</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <span
-              className="inline-block w-3 h-3 rounded"
-              style={{ backgroundColor: "#fee2e2" }}
-            />
-            <span>Deletion ({stats.deletions})</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <span
-              className="inline-block w-3 h-3 rounded"
-              style={{ backgroundColor: "#dcfce7" }}
-            />
-            <span>Insertion ({stats.insertions})</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <span className="text-xs" style={{ color: colors.text.secondary }}>
-              Correct: {stats.matches}
-            </span>
-          </div>
+        <div className="flex items-center gap-4 text-xs text-text-secondary flex-wrap">
+          <LegendChip
+            color="bg-status-warning-bg"
+            label={`Substitution (${stats.substitutions})`}
+          />
+          <LegendChip
+            color="bg-status-error-bg"
+            label={`Deletion (${stats.deletions})`}
+          />
+          <LegendChip
+            color="bg-status-success-bg"
+            label={`Insertion (${stats.insertions})`}
+          />
+          <span>Correct: {stats.matches}</span>
         </div>
       )}
 
-      {/* Ground Truth Row */}
       <div>
-        <div
-          className="text-xs font-medium mb-1.5"
-          style={{ color: colors.text.secondary }}
-        >
+        <div className="text-xs font-medium mb-1.5 text-text-secondary">
           Ground Truth
         </div>
         <div
-          className={`${compact ? "p-2" : "p-3"} rounded-md font-mono text-sm leading-relaxed`}
-          style={{ backgroundColor: colors.bg.secondary }}
+          className={`${rowPad} rounded-md font-mono text-sm leading-relaxed bg-bg-secondary`}
         >
           {diffSegments.map((seg, idx) => {
-            if (seg.type === "insertion") {
-              // Insertions don't appear in ground truth
-              return null;
-            }
-
+            if (seg.type === "insertion") return null;
             const word = seg.reference || "";
-            let bgColor = "transparent";
-            let textDecoration = "none";
-
-            if (seg.type === "substitution") {
-              bgColor = "#fef3c7"; // yellow
-            } else if (seg.type === "deletion") {
-              bgColor = "#fee2e2"; // red
-              textDecoration = "line-through";
-            }
+
+            const tone =
+              seg.type === "substitution"
+                ? SUBSTITUTION_BG
+                : seg.type === "deletion"
+                  ? `${DELETION_BG} line-through`
+                  : "text-text-primary";
 
             return (
               <span key={idx}>
                 <span
-                  className="px-0.5 rounded"
-                  style={{
-                    backgroundColor: bgColor,
-                    textDecoration,
-                    color:
-                      seg.type === "deletion" ? "#dc2626" : colors.text.primary,
-                  }}
+                  className={`px-0.5 rounded ${tone}`}
                   title={
                     seg.type === "substitution"
                       ? `→ "${seg.hypothesis}"`
@@ -249,29 +212,19 @@ export default function TranscriptionDiffViewer({
         </div>
       </div>
 
-      {/* Hypothesis Row */}
       <div>
-        <div
-          className="text-xs font-medium mb-1.5"
-          style={{ color: colors.text.secondary }}
-        >
+        <div className="text-xs font-medium mb-1.5 text-text-secondary">
           Hypothesis (Transcription)
         </div>
         <div
-          className={`${compact ? "p-2" : "p-3"} rounded-md font-mono text-sm leading-relaxed`}
-          style={{ backgroundColor: colors.bg.secondary }}
+          className={`${rowPad} rounded-md font-mono text-sm leading-relaxed bg-bg-secondary`}
         >
           {diffSegments.map((seg, idx) => {
             if (seg.type === "deletion") {
-              // Deletions don't appear in hypothesis, but show placeholder
               return (
                 <span key={idx}>
                   <span
-                    className="px-1 mx-0.5 rounded text-xs"
-                    style={{
-                      backgroundColor: "#fee2e2",
-                      color: "#dc2626",
-                    }}
+                    className={`px-1 mx-0.5 rounded text-xs ${DELETION_BG}`}
                     title={`Missing: "${seg.reference}"`}
                   >
                     ___
@@ -281,26 +234,17 @@ export default function TranscriptionDiffViewer({
             }
 
             const word = seg.hypothesis || seg.reference || "";
-            let bgColor = "transparent";
-
-            if (seg.type === "substitution") {
-              bgColor = "#fef3c7"; // yellow
-            } else if (seg.type === "insertion") {
-              bgColor = "#dcfce7"; // green
-            }
+            const tone =
+              seg.type === "substitution"
+                ? SUBSTITUTION_BG
+                : seg.type === "insertion"
+                  ? `${INSERTION_BG} font-medium`
+                  : "text-text-primary";
 
             return (
               <span key={idx}>
                 <span
-                  className="px-0.5 rounded"
-                  style={{
-                    backgroundColor: bgColor,
-                    color:
-                      seg.type === "insertion"
-                        ? "#16a34a"
-                        : colors.text.primary,
-                    fontWeight: seg.type === "insertion" ? 500 : "normal",
-                  }}
+                  className={`px-0.5 rounded ${tone}`}
                   title={
                     seg.type === "substitution"
                       ? `Was: "${seg.reference}"`
@@ -317,27 +261,17 @@ export default function TranscriptionDiffViewer({
         </div>
       </div>
 
-      {/* Inline comparison view */}
       {!compact && (
         <div>
-          <div
-            className="text-xs font-medium mb-1.5"
-            style={{ color: colors.text.secondary }}
-          >
+          <div className="text-xs font-medium mb-1.5 text-text-secondary">
             Inline Comparison
           </div>
-          <div
-            className="p-3 rounded-md font-mono text-sm leading-loose border"
-            style={{
-              backgroundColor: colors.bg.primary,
-              borderColor: colors.border,
-            }}
-          >
+          <div className="p-3 rounded-md font-mono text-sm leading-loose border border-border bg-bg-primary">
             {diffSegments.map((seg, idx) => {
               if (seg.type === "match") {
                 return (
                   <span key={idx}>
-                    <span style={{ color: colors.text.primary }}>
+                    <span className="text-text-primary">
                       {seg.reference}
                     </span>{" "}
                   </span>
@@ -348,22 +282,12 @@ export default function TranscriptionDiffViewer({
                 return (
                   <span key={idx}>
                     <span
-                      className="px-1 rounded"
-                      style={{
-                        backgroundColor: "#fef3c7",
-                        textDecoration: "line-through",
-                        color: "#92400e",
-                      }}
+                      className={`px-1 rounded line-through ${SUBSTITUTION_BG}`}
                     >
                       {seg.reference}
                     </span>
                     <span
-                      className="px-1 rounded ml-0.5"
-                      style={{
-                        backgroundColor: "#fef3c7",
-                        color: "#92400e",
-                        fontWeight: 500,
-                      }}
+                      className={`px-1 rounded ml-0.5 font-medium ${SUBSTITUTION_BG}`}
                     >
                       {seg.hypothesis}
                     </span>{" "}
@@ -375,12 +299,7 @@ export default function TranscriptionDiffViewer({
                 return (
                   <span key={idx}>
                     <span
-                      className="px-1 rounded"
-                      style={{
-                        backgroundColor: "#fee2e2",
-                        textDecoration: "line-through",
-                        color: "#dc2626",
-                      }}
+                      className={`px-1 rounded line-through ${DELETION_BG}`}
                     >
                       {seg.reference}
                     </span>{" "}
@@ -392,12 +311,7 @@ export default function TranscriptionDiffViewer({
                 return (
                   <span key={idx}>
                     <span
-                      className="px-1 rounded"
-                      style={{
-                        backgroundColor: "#dcfce7",
-                        color: "#16a34a",
-                        fontWeight: 500,
-                      }}
+                      className={`px-1 rounded font-medium ${INSERTION_BG}`}
                     >
                       +{seg.hypothesis}
                     </span>{" "}
@@ -413,3 +327,12 @@ export default function TranscriptionDiffViewer({
     </div>
   );
 }
+
+function LegendChip({ color, label }: { color: string; label: string }) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={`inline-block w-3 h-3 rounded ${color}`} />
+      <span>{label}</span>
+    </div>
+  );
+}
diff --git a/app/components/speech-to-text/WaveformVisualizer.tsx b/app/components/speech-to-text/WaveformVisualizer.tsx
index 96500483..391594d6 100644
--- a/app/components/speech-to-text/WaveformVisualizer.tsx
+++ b/app/components/speech-to-text/WaveformVisualizer.tsx
@@ -1,12 +1,11 @@
 /**
  * WaveformVisualizer Component
  *
- * Real-time audio waveform visualization using Web Audio API
- * Shows animated frequency bars when playing, static bars when paused
+ * Real-time audio waveform visualization using Web Audio API.
+ * Shows animated frequency bars when playing, static bars when paused.
  */
 
 import { useRef, useEffect, useCallback } from "react";
-import { colors } from "@/app/lib/colors";
 
 interface WaveformVisualizerProps {
   audioElement: HTMLAudioElement | null;
@@ -15,6 +14,21 @@ interface WaveformVisualizerProps {
   height?: number;
 }
 
+// Canvas requires literal color strings, so we resolve theme tokens from CSS
+// variables at draw time. This keeps the waveform in sync with theme changes.
+function readThemeColors<K extends string>(
+  entries: Record<K, string>,
+): Record<K, string> {
+  const result = { ...entries };
+  if (typeof window === "undefined") return result;
+  const styles = getComputedStyle(document.documentElement);
+  (Object.keys(entries) as K[]).forEach((name) => {
+    const value = styles.getPropertyValue(name).trim();
+    if (value) result[name] = value;
+  });
+  return result;
+}
+
 export default function WaveformVisualizer({
   audioElement,
   isPlaying,
@@ -28,7 +42,6 @@ export default function WaveformVisualizer({
   const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
   const isInitialized = useRef(false);
 
-  // Initialize audio context and analyser
   const initAudioContext = useCallback(() => {
     if (!audioElement || isInitialized.current) return;
 
@@ -38,7 +51,7 @@ export default function WaveformVisualizer({
         window.AudioContext || (window as any).webkitAudioContext;
       const audioContext = new AudioContextClass();
       const analyser = audioContext.createAnalyser();
-      analyser.fftSize = 64; // Higher = more frequency bins, smoother visualization
+      analyser.fftSize = 64;
 
       const source = audioContext.createMediaElementSource(audioElement);
       source.connect(analyser);
@@ -53,7 +66,6 @@ export default function WaveformVisualizer({
     }
   }, [audioElement]);
 
-  // Draw waveform visualization
   const drawWaveform = useCallback(() => {
     if (!canvasRef.current) return;
 
@@ -61,20 +73,28 @@ export default function WaveformVisualizer({
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
+    const {
+      "--color-border": borderColor,
+      "--color-accent-primary": accentPrimary,
+      "--color-accent-hover": accentHover,
+    } = readThemeColors({
+      "--color-border": "#e5e5e5",
+      "--color-accent-primary": "#1f4496",
+      "--color-accent-hover": "#173574",
+    });
+
     if (!isPlaying || !analyserRef.current) {
-      // Draw static bars when not playing - nice wave pattern
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       const barCount = 40;
       const barWidth = canvas.width / barCount;
       const gap = 2;
 
       for (let i = 0; i < barCount; i++) {
-        // Create a nice wave pattern using sine wave
         const wavePhase = (i / barCount) * Math.PI * 2;
-        const waveHeight = Math.sin(wavePhase) * 0.5 + 0.5; // Normalize to 0-1
+        const waveHeight = Math.sin(wavePhase) * 0.5 + 0.5;
         const barHeight = 3 + waveHeight * (canvas.height * 0.6);
 
-        ctx.fillStyle = colors.border;
+        ctx.fillStyle = borderColor;
         ctx.fillRect(
           i * barWidth + gap / 2,
           (canvas.height - barHeight) / 2,
@@ -111,10 +131,9 @@ export default function WaveformVisualizer({
         const x = i * barWidth + gap / 2;
         const y = (canvas.height - barHeight) / 2;
 
-        // Gradient from accent to hover
         const gradient = ctx.createLinearGradient(0, y, 0, y + barHeight);
-        gradient.addColorStop(0, colors.accent.primary);
-        gradient.addColorStop(1, colors.accent.hover);
+        gradient.addColorStop(0, accentPrimary);
+        gradient.addColorStop(1, accentHover);
         ctx.fillStyle = gradient;
         ctx.fillRect(x, y, barWidth - gap, barHeight);
       }
@@ -123,21 +142,18 @@ export default function WaveformVisualizer({
     draw();
   }, [isPlaying]);
 
-  // Initialize on first play
   useEffect(() => {
     if (isPlaying && !isInitialized.current) {
       initAudioContext();
     }
   }, [isPlaying, initAudioContext]);
 
-  // Resume audio context if suspended
   useEffect(() => {
     if (isPlaying && audioContextRef.current?.state === "suspended") {
       audioContextRef.current.resume();
     }
   }, [isPlaying]);
 
-  // Draw waveform when play state changes
   useEffect(() => {
     drawWaveform();
 
@@ -154,6 +170,7 @@ export default function WaveformVisualizer({
       ref={canvasRef}
       width={width}
       height={height}
+      // Canvas needs an intrinsic height; CSS scales the bitmap to container width.
       style={{ width: "100%", height: `${height}px` }}
     />
   );
diff --git a/app/components/text-to-speech/AudioPlayerFromUrl.tsx b/app/components/text-to-speech/AudioPlayerFromUrl.tsx
index 4fe076e6..f2f9efdd 100644
--- a/app/components/text-to-speech/AudioPlayerFromUrl.tsx
+++ b/app/components/text-to-speech/AudioPlayerFromUrl.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
-import { colors } from "@/app/lib/colors";
 
 interface AudioPlayerFromUrlProps {
   signedUrl: string;
@@ -58,6 +57,8 @@ export default function AudioPlayerFromUrl({
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
 
+  const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0;
+
   return (
     <div className="w-full">
       <audio ref={audioRef} src={signedUrl} preload="metadata" />
@@ -65,12 +66,7 @@ export default function AudioPlayerFromUrl({
       <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,
-          }}
+          className="w-6 h-6 flex items-center justify-center rounded-full shrink-0 border-2 border-accent-primary bg-transparent text-accent-primary cursor-pointer"
         >
           {isPlaying ? (
             <svg
@@ -93,48 +89,30 @@ export default function AudioPlayerFromUrl({
         </button>
 
         {sampleLabel && (
-          <span
-            className="text-sm font-medium"
-            style={{ color: colors.text.primary }}
-          >
+          <span className="text-sm font-medium text-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-1 rounded-full overflow-hidden mt-2 bg-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",
-          }}
+          className="h-full rounded-full bg-accent-primary transition-[width] duration-75 ease-out"
+          style={{ width: `${progressPercent}%` }}
         />
       </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 }}
-            >
+            <span className="text-xs tabular-nums text-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 }}
-            >
+            <span className="text-xs tabular-nums text-text-secondary">
               {formatSize(sizeBytes)}
             </span>
           )}
diff --git a/app/components/text-to-speech/DatasetDescription.tsx b/app/components/text-to-speech/DatasetDescription.tsx
index 20cb432e..9d97004e 100644
--- a/app/components/text-to-speech/DatasetDescription.tsx
+++ b/app/components/text-to-speech/DatasetDescription.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { colors } from "@/app/lib/colors";
 
 const DESCRIPTION_CHAR_LIMIT = 100;
 
@@ -14,10 +13,7 @@ export default function TTSDatasetDescription({
   const isLong = description.length > DESCRIPTION_CHAR_LIMIT;
 
   return (
-    <div
-      className="mt-2 text-xs leading-relaxed wrap-break-word overflow-hidden"
-      style={{ color: colors.text.secondary }}
-    >
+    <div className="mt-2 text-xs leading-relaxed wrap-break-word overflow-hidden text-text-secondary">
       <span>
         {isLong && !expanded
           ? description.slice(0, DESCRIPTION_CHAR_LIMIT).trimEnd() + "..."
@@ -29,8 +25,7 @@ export default function TTSDatasetDescription({
             e.stopPropagation();
             setExpanded(!expanded);
           }}
-          className="mt-1 block text-xs font-medium"
-          style={{ color: colors.text.primary }}
+          className="mt-1 block text-xs font-medium text-text-primary cursor-pointer"
         >
           {expanded ? "Show less" : "Read more"}
         </button>
diff --git a/app/hooks/useConfigPersistence.ts b/app/hooks/useConfigPersistence.ts
new file mode 100644
index 00000000..6dc5f3e0
--- /dev/null
+++ b/app/hooks/useConfigPersistence.ts
@@ -0,0 +1,226 @@
+import { useState } from "react";
+import { useToast } from "@/app/components/Toast";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { apiFetch } from "@/app/lib/apiClient";
+import { invalidateConfigCache } from "@/app/lib/utils";
+import { isGpt5Model } from "@/app/lib/models";
+import {
+  ConfigCreate,
+  ConfigVersionCreate,
+  ConfigPublic,
+} from "@/app/lib/types/configs";
+import { ConfigBlob } from "@/app/lib/types/promptEditor";
+
+interface UseConfigPersistenceArgs {
+  allConfigMeta: ConfigPublic[];
+  refetchConfigs: (force?: boolean) => Promise<void>;
+}
+
+interface SaveArgs {
+  currentConfigName: string;
+  currentConfigBlob: ConfigBlob;
+  currentContent: string;
+  commitMessage: string;
+  provider: string;
+}
+
+interface UseConfigPersistenceResult {
+  isSaving: boolean;
+  saveConfig: (args: SaveArgs) => Promise<boolean>;
+  renameConfig: (
+    configId: string,
+    newName: string,
+    currentName: string,
+  ) => Promise<boolean>;
+}
+
+/**
+ * Owns the network plumbing for creating/versioning/renaming configs.
+ * Returns a `saveConfig` that creates either a new config or a new version
+ * of an existing config (matched by name), and a `renameConfig` that PATCHes
+ * the metadata only (no version row).
+ */
+export function useConfigPersistence({
+  allConfigMeta,
+  refetchConfigs,
+}: UseConfigPersistenceArgs): UseConfigPersistenceResult {
+  const toast = useToast();
+  const { activeKey, isAuthenticated } = useAuth();
+  const [isSaving, setIsSaving] = useState(false);
+
+  const saveConfig = async (args: SaveArgs): Promise<boolean> => {
+    const {
+      currentConfigName,
+      currentConfigBlob,
+      currentContent,
+      commitMessage,
+      provider,
+    } = args;
+
+    if (!currentConfigName.trim()) {
+      toast.error("Please enter a configuration name");
+      return false;
+    }
+
+    const apiKey = activeKey?.key ?? "";
+    if (!isAuthenticated) {
+      toast.error("Please log in to save configurations.");
+      return false;
+    }
+
+    setIsSaving(true);
+
+    try {
+      const tools = currentConfigBlob.completion.params.tools || [];
+      const allKnowledgeBaseIds: string[] = [];
+      let maxNumResults = 20;
+
+      tools.forEach((tool) => {
+        allKnowledgeBaseIds.push(...tool.knowledge_base_ids);
+        if (allKnowledgeBaseIds.length === tool.knowledge_base_ids.length) {
+          maxNumResults = tool.max_num_results;
+        }
+      });
+
+      const model = currentConfigBlob.completion.params.model;
+      const gpt5 = isGpt5Model(model);
+
+      const configBlob: ConfigBlob = {
+        completion: {
+          provider: currentConfigBlob.completion.provider,
+          type: currentConfigBlob.completion.type || "text",
+          params: {
+            model,
+            instructions: currentContent,
+            ...(!gpt5 && {
+              temperature: currentConfigBlob.completion.params.temperature,
+            }),
+            ...(allKnowledgeBaseIds.length > 0 && {
+              knowledge_base_ids: allKnowledgeBaseIds,
+              ...(!gpt5 && { max_num_results: maxNumResults }),
+            }),
+          },
+        },
+        ...(currentConfigBlob.input_guardrails?.length && {
+          input_guardrails: currentConfigBlob.input_guardrails,
+        }),
+        ...(currentConfigBlob.output_guardrails?.length && {
+          output_guardrails: currentConfigBlob.output_guardrails,
+        }),
+      };
+
+      const existingConfigMeta = allConfigMeta.find(
+        (m) => m.name === currentConfigName.trim(),
+      );
+
+      if (existingConfigMeta) {
+        const versionCreate: ConfigVersionCreate = {
+          config_blob: configBlob,
+          commit_message: commitMessage.trim() || `Updated prompt and config`,
+        };
+
+        const data = await apiFetch<{ success: boolean; error?: string }>(
+          `/api/configs/${existingConfigMeta.id}/versions`,
+          apiKey,
+          { method: "POST", body: JSON.stringify(versionCreate) },
+        );
+
+        if (!data.success) {
+          toast.error(
+            `Failed to create version: ${data.error || "Unknown error"}`,
+          );
+          return false;
+        }
+
+        toast.success(
+          `Configuration "${currentConfigName}" updated! New version created.`,
+        );
+      } else {
+        const configCreate: ConfigCreate = {
+          name: currentConfigName.trim(),
+          description: `${provider} configuration with prompt`,
+          config_blob: configBlob,
+          commit_message: commitMessage.trim() || "Initial version",
+        };
+
+        const data = await apiFetch<{
+          success: boolean;
+          data?: unknown;
+          error?: string;
+        }>("/api/configs", apiKey, {
+          method: "POST",
+          body: JSON.stringify(configCreate),
+        });
+
+        if (!data.success || !data.data) {
+          toast.error(
+            `Failed to create config: ${data.error || "Unknown error"}`,
+          );
+          return false;
+        }
+
+        toast.success(
+          `Configuration "${currentConfigName}" created successfully!`,
+        );
+      }
+
+      invalidateConfigCache();
+      await refetchConfigs(true);
+      return true;
+    } catch (e) {
+      console.error("Failed to save config:", e);
+      toast.error("Failed to save configuration. Please try again.");
+      return false;
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const renameConfig = async (
+    configId: string,
+    newName: string,
+    currentName: string,
+  ): Promise<boolean> => {
+    const apiKey = activeKey?.key ?? "";
+    if (!isAuthenticated) {
+      toast.error("Please log in to rename configurations.");
+      return false;
+    }
+    const trimmed = newName.trim();
+    if (!trimmed) {
+      toast.error("Name cannot be empty.");
+      return false;
+    }
+    if (trimmed === currentName) return true;
+
+    const conflict = allConfigMeta.find(
+      (m) => m.name === trimmed && m.id !== configId,
+    );
+    if (conflict) {
+      toast.error(`A configuration named "${trimmed}" already exists.`);
+      return false;
+    }
+
+    try {
+      const data = await apiFetch<{ success: boolean; error?: string }>(
+        `/api/configs/${configId}`,
+        apiKey,
+        { method: "PATCH", body: JSON.stringify({ name: trimmed }) },
+      );
+      if (!data.success) {
+        toast.error(`Failed to rename: ${data.error || "Unknown error"}`);
+        return false;
+      }
+      invalidateConfigCache();
+      await refetchConfigs(true);
+      toast.success(`Renamed to "${trimmed}"`);
+      return true;
+    } catch (e) {
+      console.error("Failed to rename config:", e);
+      toast.error("Failed to rename configuration.");
+      return false;
+    }
+  };
+
+  return { isSaving, saveConfig, renameConfig };
+}
diff --git a/app/hooks/useSttData.ts b/app/hooks/useSttData.ts
new file mode 100644
index 00000000..304777bf
--- /dev/null
+++ b/app/hooks/useSttData.ts
@@ -0,0 +1,215 @@
+import { useCallback, useEffect, useState } from "react";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useToast } from "@/app/components/Toast";
+import { apiFetch } from "@/app/lib/apiClient";
+import {
+  Dataset,
+  STTRun,
+  STTResult,
+  STTResultRaw,
+  Language,
+  DEFAULT_LANGUAGES,
+  RawLanguage,
+  LanguagesResponse,
+  DatasetsResponse,
+  RunsResponse,
+  RunDetailResponse,
+} from "@/app/lib/types/speechToText";
+
+interface UseSttDataResult {
+  languages: Language[];
+  datasets: Dataset[];
+  runs: STTRun[];
+  results: STTResult[];
+  selectedRunId: number | null;
+  setSelectedRunId: (id: number | null) => void;
+  setResults: React.Dispatch<React.SetStateAction<STTResult[]>>;
+  isLoadingDatasets: boolean;
+  isLoadingRuns: boolean;
+  isLoadingResults: boolean;
+  loadDatasets: () => Promise<void>;
+  loadRuns: () => Promise<void>;
+  loadResults: (runId: number) => Promise<void>;
+}
+
+/**
+ * Owns the read-side state for the speech-to-text page: the list of
+ * languages, datasets, runs, and the currently-loaded results, plus the
+ * loaders that populate them. The page passes the active tab so we only
+ * fetch runs when it's relevant.
+ */
+export function useSttData(
+  activeTab: "datasets" | "evaluations",
+): UseSttDataResult {
+  const toast = useToast();
+  const { apiKeys, isAuthenticated } = useAuth();
+  const apiKey = apiKeys[0]?.key ?? "";
+
+  const [languages, setLanguages] = useState<Language[]>([]);
+  const [datasets, setDatasets] = useState<Dataset[]>([]);
+  const [runs, setRuns] = useState<STTRun[]>([]);
+  const [results, setResults] = useState<STTResult[]>([]);
+  const [selectedRunId, setSelectedRunId] = useState<number | null>(null);
+  const [isLoadingDatasets, setIsLoadingDatasets] = useState(true);
+  const [isLoadingRuns, setIsLoadingRuns] = useState(true);
+  const [isLoadingResults, setIsLoadingResults] = useState(false);
+
+  const loadLanguages = useCallback(async () => {
+    if (!isAuthenticated) return;
+    try {
+      const data = await apiFetch<RawLanguage[] | LanguagesResponse>(
+        "/api/languages",
+        apiKey,
+      );
+
+      let rawList: RawLanguage[] = [];
+      if (Array.isArray(data)) {
+        rawList = 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;
+      } else if (data.languages && Array.isArray(data.languages)) {
+        rawList = data.languages;
+      }
+
+      const list: Language[] = rawList
+        .filter((l) => l.is_active !== false)
+        .map((l) => ({
+          id: l.id,
+          code: l.locale || l.code || "",
+          name: l.label || l.name || "",
+        }));
+
+      setLanguages(list.length > 0 ? list : DEFAULT_LANGUAGES);
+    } catch (error) {
+      console.error("Failed to load languages:", error);
+      setLanguages(DEFAULT_LANGUAGES);
+    }
+  }, [apiKey, isAuthenticated]);
+
+  const loadDatasets = useCallback(async () => {
+    if (!isAuthenticated) return;
+    setIsLoadingDatasets(true);
+    try {
+      const data = await apiFetch<Dataset[] | DatasetsResponse>(
+        "/api/evaluations/stt/datasets",
+        apiKey,
+      );
+      let list: Dataset[] = [];
+      if (Array.isArray(data)) list = data;
+      else if (data.datasets && Array.isArray(data.datasets))
+        list = data.datasets;
+      else if (data.data && Array.isArray(data.data)) list = data.data;
+      setDatasets(list);
+    } catch (error) {
+      console.error("Failed to load datasets:", error);
+      toast.error("Failed to load datasets");
+      setDatasets([]);
+    } finally {
+      setIsLoadingDatasets(false);
+    }
+  }, [apiKey, isAuthenticated, toast]);
+
+  const loadRuns = useCallback(async () => {
+    if (!isAuthenticated) return;
+    setIsLoadingRuns(true);
+    try {
+      const data = await apiFetch<STTRun[] | RunsResponse>(
+        "/api/evaluations/stt/runs",
+        apiKey,
+      );
+      let list: STTRun[] = [];
+      if (Array.isArray(data)) list = data;
+      else if (data.runs && Array.isArray(data.runs)) list = data.runs;
+      else if (data.data && Array.isArray(data.data)) list = data.data;
+      setRuns(list);
+    } catch (error) {
+      console.error("Failed to load runs:", error);
+      toast.error("Failed to load evaluation runs");
+      setRuns([]);
+    } finally {
+      setIsLoadingRuns(false);
+    }
+  }, [apiKey, isAuthenticated, toast]);
+
+  const loadResults = useCallback(
+    async (runId: number) => {
+      if (!isAuthenticated) return;
+      setIsLoadingResults(true);
+      try {
+        const runData = await apiFetch<STTResultRaw[] | RunDetailResponse>(
+          `/api/evaluations/stt/runs/${runId}?include_results=true&include_signed_url=true`,
+          apiKey,
+        );
+
+        let rawResults: STTResultRaw[] = [];
+        if (Array.isArray(runData)) {
+          rawResults = runData;
+        } else if (runData.results && Array.isArray(runData.results)) {
+          rawResults = runData.results;
+        } else if (runData.data && Array.isArray(runData.data)) {
+          rawResults = runData.data as STTResultRaw[];
+        } else if (
+          runData.data &&
+          !Array.isArray(runData.data) &&
+          runData.data.results &&
+          Array.isArray(runData.data.results)
+        ) {
+          rawResults = runData.data.results;
+        }
+
+        const list: STTResult[] = rawResults.map((result) => {
+          const sample = result.sample;
+          return {
+            ...result,
+            sampleName:
+              sample?.sample_metadata?.original_filename ||
+              `Sample ${result.stt_sample_id}`,
+            groundTruth: sample?.ground_truth || "",
+            fileId: sample?.file_id,
+            signedUrl: sample?.signed_url || "",
+          };
+        });
+
+        setResults(list);
+        setSelectedRunId(runId);
+      } catch (error) {
+        console.error("Failed to load results:", error);
+        toast.error("Failed to load evaluation results");
+        setResults([]);
+      } finally {
+        setIsLoadingResults(false);
+      }
+    },
+    [apiKey, isAuthenticated, toast],
+  );
+
+  useEffect(() => {
+    loadLanguages();
+    loadDatasets();
+    if (activeTab === "evaluations") {
+      loadRuns();
+    }
+  }, [apiKey, activeTab, loadLanguages, loadDatasets, loadRuns]);
+
+  return {
+    languages,
+    datasets,
+    runs,
+    results,
+    selectedRunId,
+    setSelectedRunId,
+    setResults,
+    isLoadingDatasets,
+    isLoadingRuns,
+    isLoadingResults,
+    loadDatasets,
+    loadRuns,
+    loadResults,
+  };
+}
diff --git a/app/lib/colors.ts b/app/lib/colors.ts
deleted file mode 100644
index 09534f63..00000000
--- a/app/lib/colors.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Centralized color configuration
- * Modify these values to change the entire app's color scheme
- */
-
-export const colors = {
-  // Backgrounds
-  bg: {
-    primary: "#ffffff",
-    secondary: "#fafafa",
-  },
-
-  // Text
-  text: {
-    primary: "#171717",
-    secondary: "#737373",
-  },
-
-  // Borders
-  border: "#e5e5e5",
-
-  // Accent (used for primary actions, active states)
-  accent: {
-    primary: "#1f4496",
-    hover: "#173574",
-  },
-
-  // Status colors
-  status: {
-    success: "#16a34a",
-    error: "#dc2626",
-    warning: "#f59e0b",
-  },
-} as const;
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 7f91f1a5..fc657e97 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -48,9 +48,11 @@ const eslintConfig = defineConfig([
       "max-depth": ["warn", 4],
       "max-statements": ["warn", 20],
 
-      // LOC-related — TODO: enable later
-      // "max-lines": ["warn", { max: 500, skipBlankLines: true, skipComments: true }],
-      // "max-lines-per-function": ["warn", { max: 75, skipBlankLines: true, skipComments: true }],
+      "max-lines": [
+        "error",
+        { max: 500, skipBlankLines: true, skipComments: true },
+      ],
+      // "max-lines-per-function": ["error", { max: 75, skipBlankLines: true, skipComments: true }],
     },
   },
 ]);