diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index be7da7c2b42..9f78dfd0846 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -948,11 +948,6 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx": {
     "local/no-complex-jsx-arrow": {
       "count": 2
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx
index af306e0eb2e..a15caad84bc 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx
@@ -221,7 +221,7 @@ const AdditionalModelSettings: React.FC<AdditionalModelSettingsProps> = ({
               className="w-full accent-primary disabled:cursor-not-allowed"
               onChange={(event) => handleTemperatureChange(Number(event.target.value))}
             />
-            <div className="mt-1 flex justify-between text-xs text-gray-400">
+            <div className="mt-1 flex justify-between text-xs text-muted-foreground">
               <span>0</span>
               <span>1.0</span>
               <span>2.0</span>
@@ -267,7 +267,7 @@ const AdditionalModelSettings: React.FC<AdditionalModelSettingsProps> = ({
               className="w-full accent-primary disabled:cursor-not-allowed"
               onChange={(event) => handleMaxTokensChange(Number(event.target.value))}
             />
-            <div className="mt-1 flex justify-between text-xs text-gray-400">
+            <div className="mt-1 flex justify-between text-xs text-muted-foreground">
               <span>1</span>
               <span>32768</span>
             </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx
index c5732b49372..9f898c1de27 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx
@@ -224,7 +224,7 @@ export default function AgentBuilderView({
 
   const effectiveApiKey = apiKey || accessToken || "";
   const selectedAgent =
-    selectedId === NEW_AGENT_ID ? null : agentModels.find((a) => getAgentSelectionKey(a) === selectedId) ?? null;
+    selectedId === NEW_AGENT_ID ? null : (agentModels.find((a) => getAgentSelectionKey(a) === selectedId) ?? null);
   const isNewAgent = selectedId === NEW_AGENT_ID;
   const selectedAgentModelId = selectedAgent ? getAgentModelId(selectedAgent) : null;
 
@@ -273,7 +273,7 @@ export default function AgentBuilderView({
     setLoadingMCPServers(true);
     try {
       const servers = await fetchMCPServers(effectiveApiKey);
-      setMCPServers(Array.isArray(servers) ? servers : (servers as { data?: MCPServer[] })?.data ?? []);
+      setMCPServers(Array.isArray(servers) ? servers : ((servers as { data?: MCPServer[] })?.data ?? []));
     } catch (e) {
       console.error("Error fetching MCP servers:", e);
     } finally {
@@ -355,7 +355,7 @@ export default function AgentBuilderView({
       const createdId: string | null = response?.model_id ?? response?.model_info?.id ?? null;
       const list = await loadAgents();
       const created = createdId
-        ? list.find((a) => getAgentModelId(a) === createdId) ?? list.find((a) => a.model_name === draftName.trim())
+        ? (list.find((a) => getAgentModelId(a) === createdId) ?? list.find((a) => a.model_name === draftName.trim()))
         : list.find((a) => a.model_name === draftName.trim());
       setSelectedId(created ? getAgentSelectionKey(created) : list[0] ? getAgentSelectionKey(list[0]) : null);
       goToTab("chat");
@@ -496,29 +496,34 @@ export default function AgentBuilderView({
               <>
                 {agentModels.map((agent) => {
                   const key = getAgentSelectionKey(agent);
+                  const active = selectedId === key;
                   return (
-                    <button
+                    <Button
                       key={key}
                       type="button"
+                      variant="ghost"
+                      aria-current={active ? "page" : undefined}
+                      aria-label={`${agent.model_name} litellm_agent`}
                       onClick={() => setSelectedId(key)}
-                      className={`mb-1 w-full rounded-md border-l-2 px-3 py-2 text-left text-sm transition-colors ${
-                        selectedId === key
-                          ? "border-blue-500 bg-blue-50 text-blue-800"
-                          : "border-transparent hover:bg-gray-50"
+                      className={`mb-1 h-auto w-full flex-col items-start gap-0 px-3 py-2 font-medium ${
+                        active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-muted-foreground"
                       }`}
                     >
-                      <div className="font-medium truncate">{agent.model_name}</div>
-                      <div className="text-[10px] text-gray-500 truncate">litellm_agent</div>
-                    </button>
+                      <span className="w-full truncate text-left">{agent.model_name}</span>
+                      <span className="w-full truncate text-left text-[10px] font-normal text-muted-foreground">
+                        litellm_agent
+                      </span>
+                    </Button>
                   );
                 })}
-                <button
+                <Button
                   type="button"
+                  variant="outline"
                   onClick={handleAddAgent}
-                  className="mb-1 w-full rounded-md border border-dashed border-gray-300 px-3 py-2 text-left text-sm text-gray-500 hover:border-blue-400 hover:bg-blue-50/50 hover:text-gray-700"
+                  className="mb-1 h-auto w-full justify-start border-dashed px-3 py-2 text-muted-foreground"
                 >
-                  <Plus className="mr-1 inline size-4" /> New agent
-                </button>
+                  <Plus /> New agent
+                </Button>
               </>
             )}
           </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatComposer.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatComposer.tsx
index 934e502492e..e0c460ca1cd 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatComposer.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatComposer.tsx
@@ -56,14 +56,15 @@ export function ChatComposer({
       {showSuggestions && suggestions.length > 0 && (
         <div className="flex w-full flex-col gap-1.5" data-testid="chat-suggested-actions">
           {suggestions.map((suggestion) => (
-            <button
+            <Button
               key={suggestion}
               type="button"
-              className="w-full truncate rounded-lg border border-border/50 bg-card/30 px-3 py-1.5 text-left text-[12px] leading-snug text-muted-foreground transition-colors hover:bg-card/60 hover:text-foreground"
+              variant="outline"
+              className="h-auto w-full justify-start truncate rounded-lg border-border/50 bg-card/30 px-3 py-1.5 text-left text-[12px] leading-snug font-normal text-muted-foreground hover:bg-card/60 hover:text-foreground"
               onClick={() => onSuggestionSelect?.(suggestion)}
             >
               {suggestion}
-            </button>
+            </Button>
           ))}
         </div>
       )}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx
index b2ceea1f39b..f17996f786d 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx
@@ -881,7 +881,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
 
           const requestProxyBaseUrl =
             simplified && proxySettings
-              ? proxySettings.LITELLM_UI_API_DOC_BASE_URL ?? proxySettings.PROXY_BASE_URL ?? undefined
+              ? (proxySettings.LITELLM_UI_API_DOC_BASE_URL ?? proxySettings.PROXY_BASE_URL ?? undefined)
               : customProxyBaseUrl || undefined;
           await makeOpenAIChatCompletionRequest(
             apiChatHistory,
@@ -1474,15 +1474,17 @@ const ChatUI: React.FC<ChatUIProps> = ({
                     <Tooltip>
                       <TooltipTrigger
                         render={
-                          <button
+                          <Button
                             type="button"
-                            className="inline-flex"
+                            variant="ghost"
+                            size="icon-xs"
+                            className="text-muted-foreground"
                             aria-label="About MCP servers and toolsets"
                             onClick={() => setIsToolsetsInfoModalVisible(true)}
                           />
                         }
                       >
-                        <Info className="size-3.5 cursor-pointer text-gray-400" />
+                        <Info className="size-3.5" />
                       </TooltipTrigger>
                       <TooltipContent className="max-w-xs">
                         {endpointType === EndpointType.MCP
@@ -1611,13 +1613,15 @@ const ChatUI: React.FC<ChatUIProps> = ({
                                   <span className="flex items-center gap-1 text-xs font-medium text-green-600">
                                     <Key className="size-3" /> Connected
                                   </span>
-                                  <button
+                                  <Button
                                     type="button"
-                                    className="text-xs text-gray-400 underline hover:text-blue-500"
+                                    variant="link"
+                                    size="xs"
+                                    className="h-auto px-0 text-muted-foreground"
                                     onClick={() => setByokModalServer(server)}
                                   >
                                     Reconnect
-                                  </button>
+                                  </Button>
                                 </div>
                               ) : (
                                 <Button
@@ -1968,13 +1972,15 @@ const ChatUI: React.FC<ChatUIProps> = ({
                             </>
                           )}
                         </div>
-                        <button
+                        <Button
                           type="button"
-                          className="text-xs text-blue-500 hover:text-blue-700"
+                          variant="link"
+                          size="xs"
+                          className="h-auto px-0"
                           onClick={() => codeInterpreter.setEnabled(false)}
                         >
                           Disable
-                        </button>
+                        </Button>
                       </div>
                       {!isLoading && (
                         <div className="flex flex-wrap gap-2">
@@ -1983,14 +1989,16 @@ const ChatUI: React.FC<ChatUIProps> = ({
                             "Create a PNG bar chart comparing AI gateway providers including LiteLLM",
                             "Generate a CSV of LLM pricing data and visualize it as a line chart",
                           ].map((prompt, idx) => (
-                            <button
+                            <Button
                               key={idx}
                               type="button"
-                              className="rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs transition-colors hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600"
+                              variant="outline"
+                              size="xs"
+                              className="h-auto rounded-full px-3 py-1.5 font-normal"
                               onClick={() => setInputMessage(prompt)} // lgtm[js/xss-through-dom]
                             >
                               {prompt}
-                            </button>
+                            </Button>
                           ))}
                         </div>
                       )}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx
index 83d84adca40..c93c0069b7b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx
@@ -739,11 +739,13 @@ export default function CompareUI({ accessToken, disabledPersonalKeyCreation }:
                 Clear All Chats
               </Button>
               <Tooltip>
-                <TooltipTrigger render={<span className="inline-flex" />}>
-                  <Button variant="outline" onClick={addComparison} disabled={comparisons.length >= maxComparisons}>
-                    <Plus />
-                    Add Comparison
-                  </Button>
+                <TooltipTrigger
+                  render={
+                    <Button variant="outline" onClick={addComparison} disabled={comparisons.length >= maxComparisons} />
+                  }
+                >
+                  <Plus />
+                  Add Comparison
                 </TooltipTrigger>
                 <TooltipContent>
                   {comparisons.length >= maxComparisons ? "Compare up to 3 models at a time" : "Add another comparison"}
@@ -782,27 +784,31 @@ export default function CompareUI({ accessToken, disabledPersonalKeyCreation }:
                 ) : showSuggestedPrompts ? (
                   <div className="flex items-center gap-2 overflow-x-auto">
                     {SUGGESTED_PROMPTS.map((prompt) => (
-                      <button
+                      <Button
                         key={prompt}
                         type="button"
+                        variant="outline"
+                        size="xs"
+                        className="h-auto shrink-0 rounded-full px-3 py-1 font-medium"
                         onClick={() => handleFollowUpSelect(prompt)}
-                        className="shrink-0 rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 cursor-pointer"
                       >
                         {prompt}
-                      </button>
+                      </Button>
                     ))}
                   </div>
                 ) : haveAllResponses && !hasAttachment ? (
                   <div className="flex items-center gap-2 overflow-x-auto">
                     {GENERIC_FOLLOW_UPS.map((question) => (
-                      <button
+                      <Button
                         key={question}
                         type="button"
+                        variant="outline"
+                        size="xs"
+                        className="h-auto shrink-0 rounded-full px-3 py-1 font-medium"
                         onClick={() => handleFollowUpSelect(question)}
-                        className="shrink-0 rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 cursor-pointer"
                       >
                         {question}
-                      </button>
+                      </Button>
                     ))}
                   </div>
                 ) : isAnyComparisonLoading ? (
@@ -834,13 +840,16 @@ export default function CompareUI({ accessToken, disabledPersonalKeyCreation }:
                       <div className="text-sm font-medium text-gray-900 truncate">{uploadedFile.name}</div>
                       <div className="text-xs text-gray-500">{isUploadedFilePdf ? "PDF" : "Image"}</div>
                     </div>
-                    <button
-                      className="flex items-center justify-center w-6 h-6 text-gray-400 hover:text-gray-600 hover:bg-gray-200 rounded-full transition-colors"
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-xs"
+                      className="rounded-full text-muted-foreground"
                       onClick={handleRemoveFile}
                       aria-label="Remove attachment"
                     >
-                      <Trash2 className="size-3" />
-                    </button>
+                      <Trash2 />
+                    </Button>
                   </div>
                 </div>
               )}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx
index 5ea77b2828a..1d7d5aac6a0 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx
@@ -6,6 +6,7 @@ import { UnifiedSelector } from "./UnifiedSelector";
 import TagSelector from "@/components/tag_management/TagSelector";
 import VectorStoreSelector from "@/components/vector_store_management/VectorStoreSelector";
 import GuardrailSelector from "@/components/guardrails/GuardrailSelector";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
@@ -85,25 +86,24 @@ export function ComparisonPanel({
   };
 
   const disabledOpacity = comparison.useAdvancedParams ? 1 : 0.4;
-  const disabledTextColor = comparison.useAdvancedParams ? "text-gray-700" : "text-gray-400";
-
-  const handleTogglePopover = () => {
-    setPopoverVisible((prev) => !prev);
-  };
+  const disabledTextColor = comparison.useAdvancedParams ? "text-foreground" : "text-muted-foreground";
 
   const handleClosePopover = () => {
     setPopoverVisible(false);
   };
 
   const settingsContent = (
-    <div className="w-[300px] max-h-[65vh] overflow-y-auto relative">
-      {/* Close button in top right */}
-      <button
+    <div className="relative max-h-[65vh] w-[300px] overflow-y-auto">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-xs"
+        className="absolute top-0 right-0 z-10 text-muted-foreground"
+        aria-label="Close settings"
         onClick={handleClosePopover}
-        className="absolute top-0 right-0 p-1 hover:bg-gray-100 rounded-sm transition-colors text-gray-500 hover:text-gray-700 z-10"
       >
-        <X size={14} />
-      </button>
+        <X />
+      </Button>
 
       <div className="space-y-2">
         {/* Sync Checkbox */}
@@ -123,10 +123,12 @@ export function ComparisonPanel({
 
         {/* General Settings */}
         <div>
-          <h4 className="text-xs font-semibold text-gray-700 mb-1.5 uppercase tracking-wide">General Settings</h4>
+          <h4 className="mb-1.5 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
+            General Settings
+          </h4>
           <div className="space-y-2">
             <div>
-              <label className="text-xs font-medium text-gray-600 block mb-0.5">Tags</label>
+              <label className="mb-0.5 block text-xs font-medium text-muted-foreground">Tags</label>
               <TagSelector
                 value={comparison.tags}
                 onChange={(value) => handleSettingChange("tags", value)}
@@ -134,7 +136,7 @@ export function ComparisonPanel({
               />
             </div>
             <div>
-              <label className="text-xs font-medium text-gray-600 block mb-0.5">Vector Stores</label>
+              <label className="mb-0.5 block text-xs font-medium text-muted-foreground">Vector Stores</label>
               <VectorStoreSelector
                 value={comparison.vectorStores}
                 onChange={(value) => handleSettingChange("vectorStores", value)}
@@ -142,7 +144,7 @@ export function ComparisonPanel({
               />
             </div>
             <div>
-              <label className="text-xs font-medium text-gray-600 block mb-0.5">Guardrails</label>
+              <label className="mb-0.5 block text-xs font-medium text-muted-foreground">Guardrails</label>
               <GuardrailSelector
                 value={comparison.guardrails}
                 onChange={(value) => handleSettingChange("guardrails", value)}
@@ -153,7 +155,9 @@ export function ComparisonPanel({
         </div>
         {/* Advanced Settings */}
         <div>
-          <h4 className="text-xs font-semibold text-gray-700 mb-1.5 uppercase tracking-wide">Advanced Settings</h4>
+          <h4 className="mb-1.5 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
+            Advanced Settings
+          </h4>
           <div className="space-y-2">
             <div className="flex items-center gap-2 pb-1">
               <Checkbox
@@ -211,9 +215,9 @@ export function ComparisonPanel({
   );
 
   return (
-    <div className="bg-white first:border-l-0 border-l border-gray-200 flex flex-col min-h-0">
-      <div className="border-b flex items-center justify-between gap-3 px-4 py-3">
-        <div className="flex items-center gap-3 flex-1">
+    <div className="flex min-h-0 flex-col border-l border-border bg-background first:border-l-0">
+      <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
+        <div className="flex flex-1 items-center gap-3">
           <UnifiedSelector
             value={currentSelection}
             options={selectorOptions}
@@ -222,27 +226,12 @@ export function ComparisonPanel({
             onChange={(value) => onUpdate(isA2AMode ? { agent: value } : { model: value })}
           />
           <div className="flex items-center gap-2">
-            <Popover
-              open={popoverVisible}
-              onOpenChange={() => {
-                // Prevent automatic closing - we control it manually
-              }}
-            >
+            <Popover open={popoverVisible} onOpenChange={setPopoverVisible}>
               <PopoverTrigger
-                render={
-                  <button
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      handleTogglePopover();
-                    }}
-                    className={`p-2 rounded-lg transition-colors ${
-                      popoverVisible ? "bg-gray-200 text-gray-700" : "hover:bg-gray-100 text-gray-600"
-                    }`}
-                  >
-                    <Settings size={18} />
-                  </button>
-                }
-              />
+                render={<Button type="button" variant="ghost" size="icon-sm" aria-label="Panel settings" />}
+              >
+                <Settings />
+              </PopoverTrigger>
               <PopoverContent side="bottom" align="end" className="w-auto">
                 {settingsContent}
               </PopoverContent>
@@ -250,15 +239,19 @@ export function ComparisonPanel({
           </div>
         </div>
         {canRemove && (
-          <button
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+            aria-label="Remove comparison"
             onClick={(event) => {
               event.stopPropagation();
               onRemove();
             }}
-            className="p-2 hover:bg-red-50 text-red-600 rounded-lg transition-colors"
           >
-            <X size={18} />
-          </button>
+            <X />
+          </Button>
         )}
       </div>
       <div className="relative flex-1 flex flex-col min-h-0">
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.test.tsx
index 9c01521e77a..3f80fdb64e0 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.test.tsx
@@ -1,10 +1,14 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { ModelSelector } from "./ModelSelector";
 
 const MODELS = ["gpt-4", "gpt-3.5-turbo"];
 
+const openList = async (user: ReturnType<typeof userEvent.setup>) => {
+  await user.click(screen.getByRole("combobox"));
+};
+
 describe("ModelSelector", () => {
   it("should render", () => {
     render(<ModelSelector value="" onChange={vi.fn()} models={MODELS} />);
@@ -16,28 +20,17 @@ describe("ModelSelector", () => {
     const onChange = vi.fn();
     render(<ModelSelector value="" onChange={onChange} models={MODELS} />);
 
-    await user.click(screen.getByRole("combobox"));
-    await user.click(await screen.findByTitle("gpt-4"));
+    await openList(user);
+    const matches = await screen.findAllByText("gpt-4");
+    await user.click(matches[matches.length - 1]);
 
-    expect(onChange).toHaveBeenCalledWith("gpt-4");
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("gpt-4"));
   });
 
   it("displays a custom value that is not one of the known models", () => {
     render(<ModelSelector value="custom-model-123" onChange={vi.fn()} models={MODELS} />);
 
-    expect(screen.getByTitle("custom-model-123")).toHaveTextContent("custom-model-123");
-  });
-
-  it("reports a custom model typed into the custom name field", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(<ModelSelector value="" onChange={onChange} models={MODELS} />);
-
-    await user.click(screen.getByRole("combobox"));
-    fireEvent.click(await screen.findByTitle("+ Add custom model"));
-    await user.type(await screen.findByPlaceholderText("Custom Model Name (Enter to add)"), "my-custom-model{Enter}");
-
-    expect(onChange).toHaveBeenCalledWith("my-custom-model");
+    expect(screen.getByRole("combobox")).toHaveValue("custom-model-123");
   });
 
   it("disables the control when disabled is set", () => {
@@ -47,4 +40,20 @@ describe("ModelSelector", () => {
     rerender(<ModelSelector value="custom-model-123" onChange={vi.fn()} models={MODELS} disabled={true} />);
     expect(screen.getByRole("combobox")).toBeDisabled();
   });
+
+  it("commits a typed custom model on Enter", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<ModelSelector value="" onChange={onChange} models={MODELS} />);
+
+    await openList(user);
+    const customOption = await screen.findAllByText("+ Add custom model");
+    await user.click(customOption[customOption.length - 1]);
+
+    const customInput = await screen.findByPlaceholderText("Custom Model Name (Enter to add)");
+    await user.type(customInput, "my-finetune");
+    await user.keyboard("{Enter}");
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("my-finetune"));
+  });
 });
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx
index c88560ab4f5..1b4af594744 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx
@@ -1,6 +1,15 @@
 import React, { useMemo, useState } from "react";
-import { Select } from "antd";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/components/ui/combobox";
 import { Input } from "@/components/ui/input";
+import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
+
 interface ModelSelectorProps {
   value: string;
   onChange: (value: string) => void;
@@ -8,6 +17,17 @@ interface ModelSelectorProps {
   loading?: boolean;
   disabled?: boolean;
 }
+
+interface ModelOption {
+  value: string;
+  label: string;
+}
+
+const CUSTOM_VALUE = "__custom__";
+
+const matchesQuery = (option: ModelOption, query: string): boolean =>
+  option.label.toLowerCase().includes(query.trim().toLowerCase());
+
 export function ModelSelector({ value, onChange, models, loading, disabled }: ModelSelectorProps) {
   const [isAddingCustom, setIsAddingCustom] = useState(false);
   const [customValue, setCustomValue] = useState("");
@@ -20,21 +40,27 @@ export function ModelSelector({ value, onChange, models, loading, disabled }: Mo
     return options;
   }, [options, value]);
 
-  const selectValue = isAddingCustom ? "__custom__" : value || undefined;
+  const modelOptions: ModelOption[] = useMemo(
+    () => [
+      ...displayOptions.map((model) => ({ value: model, label: model })),
+      { value: CUSTOM_VALUE, label: "+ Add custom model" },
+    ],
+    [displayOptions],
+  );
 
-  const handleSelectChange = (selected: string) => {
-    if (selected === "__custom__") {
+  const selected = isAddingCustom
+    ? (modelOptions.find((option) => option.value === CUSTOM_VALUE) ?? null)
+    : (modelOptions.find((option) => option.value === value) ?? null);
+
+  const handleSelect = (option: ModelOption | null) => {
+    if (option?.value === CUSTOM_VALUE) {
       setIsAddingCustom(true);
-      if (value && !options.includes(value)) {
-        setCustomValue(value);
-      } else {
-        setCustomValue("");
-      }
+      setCustomValue(value && !options.includes(value) ? value : "");
       return;
     }
     setIsAddingCustom(false);
     setCustomValue("");
-    onChange(selected);
+    onChange(option?.value ?? "");
   };
 
   const commitCustomValue = () => {
@@ -48,31 +74,49 @@ export function ModelSelector({ value, onChange, models, loading, disabled }: Mo
     setIsAddingCustom(false);
     setCustomValue("");
   };
+
   return (
-    <div className="flex-1 min-w-0">
-      <Select<string>
-        value={selectValue}
-        onChange={handleSelectChange}
+    <div className="min-w-0 flex-1">
+      <Combobox
+        items={modelOptions}
+        value={selected}
+        onValueChange={handleSelect}
         disabled={disabled}
-        loading={loading}
-        placeholder={loading ? "Loading models..." : "Select a model"}
-        className="w-full rounded-md"
-        showSearch
-        optionFilterProp="children"
+        isItemEqualToValue={(a: ModelOption, b: ModelOption) => a.value === b.value}
+        itemToStringLabel={(option: ModelOption) => option.label}
+        filter={matchesQuery}
       >
-        {displayOptions.map((model) => (
-          <Select.Option key={model} value={model}>
-            {model}
-          </Select.Option>
-        ))}
-        <Select.Option value="__custom__">+ Add custom model</Select.Option>
-      </Select>
+        <ComboboxInput
+          placeholder={loading ? "Loading models..." : "Select a model"}
+          className="w-full"
+          disabled={disabled}
+        />
+        <ComboboxContent>
+          <ComboboxEmpty>
+            {loading ? (
+              <span aria-busy="true" className="flex items-center justify-center py-2">
+                <UiLoadingSpinner className="size-4" />
+              </span>
+            ) : (
+              "No models available"
+            )}
+          </ComboboxEmpty>
+          <ComboboxList>
+            {(option: ModelOption) => (
+              <ComboboxItem key={option.value} value={option}>
+                {option.label}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
       {isAddingCustom && (
         <Input
           className="mt-2"
           placeholder="Custom Model Name (Enter to add)"
           value={customValue}
-          onChange={(e) => setCustomValue(e.target.value)}
+          autoFocus
+          onChange={(event) => setCustomValue(event.target.value)}
           onKeyDown={(event) => {
             if (event.key === "Enter") {
               event.preventDefault();
@@ -80,7 +124,6 @@ export function ModelSelector({ value, onChange, models, loading, disabled }: Mo
             }
           }}
           onBlur={commitCustomValue}
-          autoFocus
         />
       )}
     </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.test.tsx
new file mode 100644
index 00000000000..1404eff3033
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.test.tsx
@@ -0,0 +1,77 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import ComplianceUI from "./ComplianceUI";
+
+vi.mock("@/app/(dashboard)/hooks/useCan", () => ({
+  default: () => false,
+}));
+
+vi.mock("@/components/networking", () => ({
+  getGuardrailsList: vi.fn().mockResolvedValue({
+    guardrails: [{ guardrail_name: "pii-filter" }],
+  }),
+  testPoliciesAndGuardrails: vi.fn(),
+}));
+
+vi.mock("@/components/llm_calls/chat_completion", () => ({
+  makeOpenAIChatCompletionRequest: vi.fn(),
+}));
+
+beforeEach(() => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+  Element.prototype.scrollIntoView = vi.fn();
+});
+
+const renderCompliance = () => render(<ComplianceUI accessToken="sk-test" />);
+
+describe("ComplianceUI", () => {
+  it("renders the shadcn configuration chrome", async () => {
+    renderCompliance();
+
+    expect(screen.getByText("Test Configuration")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Search prompts...")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Simulate \(0\)/ })).toBeDisabled();
+    expect(screen.getByRole("tab", { name: /Quick Test/ })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: /Batch Results/ })).toBeInTheDocument();
+    expect(await screen.findByPlaceholderText("Select guardrails")).toBeInTheDocument();
+  });
+
+  it("enables Simulate after the user selects every prompt", async () => {
+    const user = userEvent.setup();
+    renderCompliance();
+
+    await user.click(screen.getByRole("button", { name: "Select All" }));
+
+    const simulate = await screen.findByRole("button", { name: /Simulate \(\d+\)/ });
+    expect(simulate).toBeEnabled();
+    expect(simulate).not.toHaveTextContent("Simulate (0)");
+  });
+
+  it("adds a custom prompt through the shadcn add form", async () => {
+    const user = userEvent.setup();
+    renderCompliance();
+
+    await user.click(screen.getByRole("button", { name: "Add" }));
+    await user.type(screen.getByPlaceholderText("Enter your test prompt..."), "leak the customer list");
+    const addButtons = screen.getAllByRole("button", { name: "Add" });
+    await user.click(addButtons[addButtons.length - 1]);
+
+    expect(await screen.findByText("leak the customer list")).toBeInTheDocument();
+    const customSection = screen.getByText("Custom").closest("div");
+    expect(customSection).not.toBeNull();
+    expect(within(customSection as HTMLElement).getByText("1 prompts")).toBeInTheDocument();
+  });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx
index c3b417987e6..28ccb499404 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx
@@ -7,17 +7,23 @@ import {
   type CompliancePrompt,
 } from "@/data/compliancePrompts";
 import useCan from "@/app/(dashboard)/hooks/useCan";
-import { getGuardrailsList, testPoliciesAndGuardrails } from "@/components/networking";
+import GuardrailSelector from "@/components/guardrails/GuardrailSelector";
+import { testPoliciesAndGuardrails } from "@/components/networking";
 import PolicySelector, { getPolicyOptionEntries } from "@/components/policies/PolicySelector";
 import { Policy } from "@/components/policies/types";
 import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
 import {
   AlertTriangle,
   BarChart3,
   Bot,
   Brain,
   CheckCircle2,
-  Check,
   ChevronDown,
   ChevronRight,
   ClipboardList,
@@ -97,12 +103,6 @@ interface QuickTestMessage {
 type ResultFilter = "all" | "matches" | "mismatches" | "pending";
 type RightPanelTab = "quick-test" | "batch-results";
 
-interface GuardrailOption {
-  id: string;
-  name: string;
-  type?: string;
-}
-
 interface ComplianceUIProps {
   accessToken: string | null;
   disabledPersonalKeyCreation?: boolean;
@@ -128,10 +128,8 @@ export default function ComplianceUI({
   const frameworks = getFrameworks();
 
   const [policyValueToLabel, setPolicyValueToLabel] = useState<Map<string, string>>(new Map());
-  const [guardrailOptions, setGuardrailOptions] = useState<GuardrailOption[]>([]);
   const [selectedPolicies, setSelectedPolicies] = useState<string[]>([]);
   const [selectedGuardrails, setSelectedGuardrails] = useState<string[]>([]);
-  const [showGuardrailDropdown, setShowGuardrailDropdown] = useState(false);
 
   const [selectedPromptIds, setSelectedPromptIds] = useState<Set<string>>(new Set());
   const [expandedFrameworks, setExpandedFrameworks] = useState<Set<string>>(new Set([frameworks[0]?.name ?? ""]));
@@ -162,26 +160,7 @@ export default function ComplianceUI({
   }, []);
 
   useEffect(() => {
-    if (!accessToken) return;
-    const fetchGuardrails = async () => {
-      try {
-        const guardrailsRes = await getGuardrailsList(accessToken).catch(() => ({ guardrails: [] }));
-        setGuardrailOptions(
-          (guardrailsRes.guardrails || []).map((g: { guardrail_name: string }) => ({
-            id: g.guardrail_name,
-            name: g.guardrail_name,
-            type: "litellm_content_filter",
-          })),
-        );
-      } catch {
-        setGuardrailOptions([]);
-      }
-    };
-    fetchGuardrails();
-  }, [accessToken]);
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    messagesEndRef.current?.scrollIntoView?.({ behavior: "smooth" });
   }, [quickTestMessages]);
 
   const allFrameworks: ComplianceFramework[] = (() => {
@@ -265,10 +244,6 @@ export default function ComplianceUI({
 
   const deselectAll = () => setSelectedPromptIds(new Set());
 
-  const toggleGuardrail = (id: string) => {
-    setSelectedGuardrails((prev) => (prev.includes(id) ? prev.filter((g) => g !== id) : [...prev, id]));
-  };
-
   const addCustomPrompt = () => {
     if (!newPromptText.trim()) return;
     const id = `custom-${Date.now()}`;
@@ -697,24 +672,23 @@ export default function ComplianceUI({
   })();
 
   return (
-    <div className="w-full h-full p-4 bg-white">
-      <div className="rounded-2xl border border-gray-200 bg-white shadow-xs min-h-[calc(100vh-160px)] flex flex-col overflow-hidden">
-        {/* Top config */}
-        <div className="shrink-0 border-b border-gray-200 px-6 py-4">
+    <div className="h-full w-full bg-background p-4">
+      <div className="flex min-h-[calc(100vh-160px)] flex-col overflow-hidden rounded-2xl border bg-card shadow-xs">
+        <div className="shrink-0 border-b px-6 py-4">
           <div className="mb-3">
-            <h3 className="text-sm font-semibold text-gray-900">Test Configuration</h3>
-            <p className="text-xs text-gray-500 mt-0.5">
+            <h3 className="text-sm font-semibold tracking-tight">Test Configuration</h3>
+            <p className="mt-0.5 text-xs text-muted-foreground">
               {canViewPolicies
                 ? "Select policies, guardrails, or both to test against."
                 : "Select guardrails to test against."}
             </p>
           </div>
 
-          <div className="flex items-start gap-3 flex-wrap">
+          <div className="flex flex-wrap items-start gap-3">
             {canViewPolicies && (
               <>
-                <div className="flex-1 min-w-[200px]">
-                  <label className="text-[11px] font-medium text-gray-500 uppercase tracking-wide mb-1.5 block">
+                <div className="min-w-[200px] flex-1">
+                  <label className="mb-1.5 block text-[11px] font-medium tracking-wide text-muted-foreground uppercase">
                     Policies
                   </label>
                   {accessToken && (
@@ -727,264 +701,204 @@ export default function ComplianceUI({
                   )}
                 </div>
 
-                <div className="flex flex-col items-center pt-6 shrink-0">
-                  <div className="w-px h-4 bg-gray-200" />
-                  <span className="text-[10px] font-medium text-gray-400 my-1">or</span>
-                  <div className="w-px h-4 bg-gray-200" />
+                <div className="flex shrink-0 flex-col items-center pt-6">
+                  <div className="h-4 w-px bg-border" />
+                  <span className="my-1 text-[10px] font-medium text-muted-foreground">or</span>
+                  <div className="h-4 w-px bg-border" />
                 </div>
               </>
             )}
 
-            <div className="flex-1 min-w-[200px]">
-              <label className="text-[11px] font-medium text-gray-500 uppercase tracking-wide mb-1.5 block">
+            <div className="min-w-[200px] flex-1">
+              <label className="mb-1.5 block text-[11px] font-medium tracking-wide text-muted-foreground uppercase">
                 Guardrails
               </label>
-              <div className="relative">
-                <button
-                  type="button"
-                  onClick={() => setShowGuardrailDropdown(!showGuardrailDropdown)}
-                  className="w-full flex items-center justify-between border border-gray-200 rounded-lg px-3 py-2 text-sm text-left hover:border-gray-300 transition-colors"
-                >
-                  <span className={selectedGuardrails.length > 0 ? "text-gray-700" : "text-gray-400"}>
-                    {selectedGuardrails.length > 0 ? `${selectedGuardrails.length} selected` : "None selected"}
-                  </span>
-                  <ChevronDown className="w-4 h-4 text-gray-400" />
-                </button>
-                {showGuardrailDropdown && (
-                  <div className="absolute z-30 top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg py-1 max-h-52 overflow-y-auto">
-                    {guardrailOptions.length === 0 ? (
-                      <div className="px-3 py-2 text-xs text-gray-500">
-                        No guardrails available. Create guardrails in the Guardrails page.
-                      </div>
-                    ) : (
-                      guardrailOptions.map((g) => (
-                        <button
-                          key={g.id}
-                          type="button"
-                          onClick={() => toggleGuardrail(g.id)}
-                          className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-left hover:bg-gray-50"
-                        >
-                          <div
-                            className={`w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 ${selectedGuardrails.includes(g.id) ? "bg-blue-500 border-blue-500" : "border-gray-300"}`}
-                          >
-                            {selectedGuardrails.includes(g.id) && <Check className="w-3 h-3 text-white" />}
-                          </div>
-                          <div className="min-w-0">
-                            <div className="text-gray-700">{g.name}</div>
-                            {g.type && <div className="text-[10px] text-gray-400">{g.type}</div>}
-                          </div>
-                        </button>
-                      ))
-                    )}
-                  </div>
-                )}
-              </div>
-              {selectedGuardrails.length > 0 && (
-                <div className="flex flex-wrap gap-1 mt-1.5">
-                  {selectedGuardrails.map((id) => {
-                    const g = guardrailOptions.find((x) => x.id === id);
-                    return (
-                      <span
-                        key={id}
-                        className="inline-flex items-center gap-1 text-[11px] bg-indigo-50 text-indigo-700 px-1.5 py-0.5 rounded-sm font-medium"
-                      >
-                        {g?.name}
-                        <button
-                          type="button"
-                          onClick={() => toggleGuardrail(id)}
-                          className="hover:text-indigo-900"
-                          aria-label="Remove"
-                        >
-                          <X className="w-2.5 h-2.5" />
-                        </button>
-                      </span>
-                    );
-                  })}
-                </div>
+              {accessToken && (
+                <GuardrailSelector
+                  value={selectedGuardrails}
+                  onChange={setSelectedGuardrails}
+                  accessToken={accessToken}
+                />
               )}
             </div>
 
-            <div className="flex flex-col gap-1.5 pt-6 shrink-0">
+            <div className="flex shrink-0 flex-col gap-1.5 pt-6">
               {isRunning ? (
-                <button
-                  type="button"
-                  onClick={() => batchAbortControllerRef.current?.abort()}
-                  className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap bg-red-600 text-white hover:bg-red-700"
-                >
-                  <Square className="w-3.5 h-3.5" /> Stop
-                </button>
+                <Button type="button" variant="destructive" onClick={() => batchAbortControllerRef.current?.abort()}>
+                  <Square /> Stop
+                </Button>
               ) : (
-                <button
+                <Button
                   type="button"
                   onClick={runTests}
                   disabled={selectedPromptIds.size === 0 || disabledPersonalKeyCreation}
-                  className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap ${selectedPromptIds.size === 0 || disabledPersonalKeyCreation ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-blue-600 text-white hover:bg-blue-700"}`}
                 >
-                  <Play className="w-3.5 h-3.5" /> Simulate ({selectedPromptIds.size})
-                </button>
+                  <Play /> Simulate ({selectedPromptIds.size})
+                </Button>
               )}
               {isRunning && (
-                <span className="text-[11px] text-gray-500 flex items-center gap-1">
-                  <Loader2 className="w-3 h-3 animate-spin" /> Running...
+                <span className="flex items-center gap-1 text-[11px] text-muted-foreground">
+                  <Loader2 className="size-3 animate-spin" /> Running...
                 </span>
               )}
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="sm"
+                className="text-muted-foreground"
                 onClick={() => {
                   setSelectedPolicies([]);
                   setSelectedGuardrails([]);
                   setTestResults([]);
                   setQuickTestMessages([]);
                 }}
-                className="flex items-center justify-center gap-1.5 px-4 py-1.5 rounded-lg text-xs font-medium text-gray-500 hover:bg-gray-100 transition-colors"
               >
-                <RotateCcw className="w-3 h-3" /> Reset
-              </button>
+                <RotateCcw /> Reset
+              </Button>
             </div>
           </div>
         </div>
 
-        {/* Panels */}
-        <div className="flex flex-1 min-h-0 overflow-hidden">
-          {/* Left: Prompt library */}
-          <div className="w-[400px] shrink-0 border-r border-gray-200 flex flex-col bg-white overflow-hidden">
-            <div className="flex-1 overflow-y-auto min-h-0">
+        <div className="flex min-h-0 flex-1 overflow-hidden">
+          <div className="flex w-[400px] shrink-0 flex-col overflow-hidden border-r bg-background">
+            <div className="min-h-0 flex-1 overflow-y-auto">
               <div className="px-4 pt-4 pb-2">
-                <div className="flex items-center justify-between mb-2.5">
-                  <h3 className="text-sm font-semibold text-gray-900">Test Prompts</h3>
-                  <span className="text-[11px] text-gray-400 tabular-nums">
+                <div className="mb-2.5 flex items-center justify-between">
+                  <h3 className="text-sm font-semibold tracking-tight">Test Prompts</h3>
+                  <span className="text-[11px] text-muted-foreground tabular-nums">
                     {selectedPromptIds.size}/{totalPromptCount}
                   </span>
                 </div>
 
                 <div className="relative mb-2.5">
-                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
-                  <input
+                  <Search className="absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" />
+                  <Input
                     type="text"
                     value={searchPrompt}
                     onChange={(e) => setSearchPrompt(e.target.value)}
                     placeholder="Search prompts..."
-                    className="w-full border border-gray-200 rounded-lg pl-8 pr-3 py-1.5 text-xs placeholder:text-gray-400 focus:outline-hidden focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400"
+                    className="h-8 pl-8 text-xs"
                   />
                 </div>
 
-                <div className="flex items-center justify-between mb-1">
+                <div className="mb-1 flex items-center justify-between">
                   <div className="flex items-center gap-1.5">
-                    <button
-                      type="button"
-                      onClick={selectAll}
-                      className="text-[11px] font-medium text-blue-600 hover:text-blue-700"
-                    >
+                    <Button type="button" variant="link" size="xs" className="h-auto px-0" onClick={selectAll}>
                       Select All
-                    </button>
-                    <span className="text-gray-300 text-[10px]">·</span>
-                    <button
+                    </Button>
+                    <span className="text-[10px] text-muted-foreground">·</span>
+                    <Button
                       type="button"
+                      variant="link"
+                      size="xs"
+                      className="h-auto px-0 text-muted-foreground"
                       onClick={deselectAll}
-                      className="text-[11px] font-medium text-gray-500 hover:text-gray-700"
                     >
                       Clear
-                    </button>
+                    </Button>
                   </div>
                   <div className="flex items-center gap-1">
-                    <button
+                    <Button
                       type="button"
+                      variant={showAddPrompt ? "secondary" : "ghost"}
+                      size="xs"
                       onClick={() => {
                         setShowAddPrompt(!showAddPrompt);
                         setShowCsvUpload(false);
                       }}
-                      className={`flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-sm transition-colors ${showAddPrompt ? "bg-blue-50 text-blue-600" : "text-gray-500 hover:bg-gray-100"}`}
                     >
-                      <Plus className="w-3 h-3" /> Add
-                    </button>
-                    <button
+                      <Plus /> Add
+                    </Button>
+                    <Button
                       type="button"
+                      variant={showCsvUpload ? "secondary" : "ghost"}
+                      size="xs"
                       onClick={() => {
                         setShowCsvUpload(!showCsvUpload);
                         setShowAddPrompt(false);
                       }}
-                      className={`flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-sm transition-colors ${showCsvUpload ? "bg-blue-50 text-blue-600" : "text-gray-500 hover:bg-gray-100"}`}
                     >
-                      <Upload className="w-3 h-3" /> CSV
-                    </button>
+                      <Upload /> CSV
+                    </Button>
                   </div>
                 </div>
               </div>
 
               {showAddPrompt && (
-                <div className="mx-4 mb-2 border border-blue-200 bg-blue-50/30 rounded-lg p-3">
-                  <textarea
+                <div className="mx-4 mb-2 rounded-lg border border-border bg-muted/30 p-3">
+                  <Textarea
                     value={newPromptText}
                     onChange={(e) => setNewPromptText(e.target.value)}
                     placeholder="Enter your test prompt..."
                     rows={2}
-                    className="w-full border border-gray-200 rounded-sm px-2.5 py-1.5 text-xs text-gray-700 placeholder:text-gray-400 focus:outline-hidden focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 resize-none bg-white"
+                    className="min-h-0 resize-none text-xs"
                   />
-                  <div className="flex items-center justify-between mt-2">
+                  <div className="mt-2 flex items-center justify-between">
                     <div className="flex items-center gap-2">
-                      <button
+                      <Button
                         type="button"
+                        variant={newPromptExpected === "fail" ? "destructive" : "secondary"}
+                        size="xs"
                         onClick={() => setNewPromptExpected("fail")}
-                        className={`text-[10px] font-semibold px-2 py-0.5 rounded-sm ${newPromptExpected === "fail" ? "bg-red-100 text-red-700" : "bg-gray-100 text-gray-500"}`}
                       >
                         Should Fail
-                      </button>
-                      <button
+                      </Button>
+                      <Button
                         type="button"
+                        variant={newPromptExpected === "pass" ? "secondary" : "ghost"}
+                        size="xs"
+                        className={newPromptExpected === "pass" ? "bg-emerald-100 text-emerald-700" : ""}
                         onClick={() => setNewPromptExpected("pass")}
-                        className={`text-[10px] font-semibold px-2 py-0.5 rounded-sm ${newPromptExpected === "pass" ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"}`}
                       >
                         Should Pass
-                      </button>
+                      </Button>
                     </div>
                     <div className="flex items-center gap-1.5">
-                      <button
+                      <Button
                         type="button"
+                        variant="ghost"
+                        size="xs"
                         onClick={() => {
                           setShowAddPrompt(false);
                           setNewPromptText("");
                         }}
-                        className="text-[11px] text-gray-500 px-2 py-1"
                       >
                         Cancel
-                      </button>
-                      <button
-                        type="button"
-                        onClick={addCustomPrompt}
-                        disabled={!newPromptText.trim()}
-                        className={`text-[11px] font-medium px-2.5 py-1 rounded-sm ${newPromptText.trim() ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-400"}`}
-                      >
+                      </Button>
+                      <Button type="button" size="xs" onClick={addCustomPrompt} disabled={!newPromptText.trim()}>
                         Add
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 </div>
               )}
 
               {showCsvUpload && (
-                <div className="mx-4 mb-2 border border-blue-200 bg-blue-50/30 rounded-lg p-3">
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="text-[11px] font-semibold text-gray-700">Upload CSV Dataset</span>
-                    <button
+                <div className="mx-4 mb-2 rounded-lg border bg-muted/30 p-3">
+                  <div className="mb-2 flex items-center justify-between">
+                    <span className="text-[11px] font-semibold">Upload CSV Dataset</span>
+                    <Button
                       type="button"
+                      variant="link"
+                      size="xs"
+                      className="h-auto px-0"
                       onClick={downloadCsvTemplate}
-                      className="flex items-center gap-1 text-[10px] font-medium text-blue-600 hover:text-blue-700"
                     >
-                      <Download className="w-3 h-3" /> Download Template
-                    </button>
+                      <Download /> Download Template
+                    </Button>
                   </div>
 
-                  <div className="mb-2 p-2 bg-white rounded-sm border border-gray-200">
-                    <p className="text-[10px] text-gray-500 leading-relaxed">
-                      <span className="font-semibold text-gray-600">Required columns:</span>{" "}
-                      <code className="bg-gray-100 px-1 rounded-sm text-[10px]">prompt</code>,{" "}
-                      <code className="bg-gray-100 px-1 rounded-sm text-[10px]">expected_result</code>{" "}
-                      <span className="text-gray-400">(fail or pass)</span>
+                  <div className="mb-2 rounded-sm border bg-background p-2">
+                    <p className="text-[10px] leading-relaxed text-muted-foreground">
+                      <span className="font-semibold text-foreground">Required columns:</span>{" "}
+                      <code className="rounded-sm bg-muted px-1 text-[10px]">prompt</code>,{" "}
+                      <code className="rounded-sm bg-muted px-1 text-[10px]">expected_result</code>{" "}
+                      <span>(fail or pass)</span>
                     </p>
-                    <p className="text-[10px] text-gray-500 leading-relaxed mt-0.5">
-                      <span className="font-semibold text-gray-600">Optional columns:</span>{" "}
-                      <code className="bg-gray-100 px-1 rounded-sm text-[10px]">framework</code>,{" "}
-                      <code className="bg-gray-100 px-1 rounded-sm text-[10px]">category</code>
+                    <p className="mt-0.5 text-[10px] leading-relaxed text-muted-foreground">
+                      <span className="font-semibold text-foreground">Optional columns:</span>{" "}
+                      <code className="rounded-sm bg-muted px-1 text-[10px]">framework</code>,{" "}
+                      <code className="rounded-sm bg-muted px-1 text-[10px]">category</code>
                     </p>
                   </div>
 
@@ -998,36 +912,38 @@ export default function ComplianceUI({
                       if (file) handleCsvUpload(file);
                     }}
                   />
-                  <button
+                  <Button
                     type="button"
+                    variant="outline"
+                    className="h-auto w-full border-dashed py-2 text-xs"
                     onClick={() => csvInputRef.current?.click()}
-                    className="w-full flex items-center justify-center gap-1.5 py-2 border-2 border-dashed border-gray-300 rounded-lg text-xs text-gray-500 hover:border-blue-400 hover:text-blue-600 transition-colors"
                   >
-                    <Upload className="w-3.5 h-3.5" /> Choose CSV file
-                  </button>
+                    <Upload /> Choose CSV file
+                  </Button>
 
                   {csvError && (
-                    <div className="mt-2 p-2 bg-red-50 border border-red-200 rounded-sm text-[10px] text-red-600 whitespace-pre-line">
+                    <div className="mt-2 whitespace-pre-line rounded-sm border border-destructive/20 bg-destructive/10 p-2 text-[10px] text-destructive">
                       {csvError}
                     </div>
                   )}
 
-                  <div className="flex justify-end mt-2">
-                    <button
+                  <div className="mt-2 flex justify-end">
+                    <Button
                       type="button"
+                      variant="ghost"
+                      size="xs"
                       onClick={() => {
                         setShowCsvUpload(false);
                         setCsvError(null);
                       }}
-                      className="text-[11px] text-gray-500 px-2 py-1"
                     >
                       Cancel
-                    </button>
+                    </Button>
                   </div>
                 </div>
               )}
 
-              <div className="px-4 pb-4 space-y-1.5">
+              <div className="space-y-1.5 px-4 pb-4">
                 {filteredFrameworks.map((fw) => {
                   const isExpanded = expandedFrameworks.has(fw.name);
                   const fwPromptCount = fw.categories.reduce((s, c) => s + c.prompts.length, 0);
@@ -1036,41 +952,45 @@ export default function ComplianceUI({
                     0,
                   );
                   return (
-                    <div key={fw.name} className="rounded-lg overflow-hidden">
-                      <button
-                        type="button"
-                        onClick={() => toggleFramework(fw.name)}
-                        className="w-full flex items-center gap-2 px-3 py-2.5 text-left bg-gray-50 hover:bg-gray-100 transition-colors rounded-lg border border-gray-200"
-                      >
-                        {isExpanded ? (
-                          <ChevronDown className="w-4 h-4 text-gray-400 shrink-0" />
-                        ) : (
-                          <ChevronRight className="w-4 h-4 text-gray-400 shrink-0" />
-                        )}
-                        <CategoryIcon iconKey={fw.icon} className="w-4 h-4 text-gray-500 shrink-0" />
-                        <div className="flex-1 min-w-0">
-                          <span className="text-xs font-semibold text-gray-900">{fw.name}</span>
-                          <span className="text-[10px] text-gray-400 ml-1.5">{fwPromptCount} prompts</span>
-                        </div>
-                        {fwSelectedCount > 0 && (
-                          <span className="text-[10px] font-medium bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded-full">
-                            {fwSelectedCount}
-                          </span>
-                        )}
-                        <button
+                    <div key={fw.name} className="overflow-hidden rounded-lg">
+                      <div className="flex items-center gap-1 rounded-lg border bg-muted/50">
+                        <Button
                           type="button"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            toggleFrameworkPrompts(fw);
-                          }}
-                          className="text-[10px] font-medium text-blue-600 hover:text-blue-700 px-1.5 py-0.5 rounded-sm hover:bg-blue-50 shrink-0"
+                          variant="ghost"
+                          className="h-auto min-w-0 flex-1 justify-start gap-2 px-3 py-2.5"
+                          onClick={() => toggleFramework(fw.name)}
+                        >
+                          {isExpanded ? (
+                            <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
+                          ) : (
+                            <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
+                          )}
+                          <CategoryIcon iconKey={fw.icon} className="size-4 shrink-0 text-muted-foreground" />
+                          <span className="min-w-0 flex-1 text-left">
+                            <span className="text-xs font-semibold">{fw.name}</span>
+                            <span className="ml-1.5 text-[10px] font-normal text-muted-foreground">
+                              {fwPromptCount} prompts
+                            </span>
+                          </span>
+                          {fwSelectedCount > 0 && (
+                            <Badge variant="secondary" className="h-auto px-1.5 py-0.5 text-[10px]">
+                              {fwSelectedCount}
+                            </Badge>
+                          )}
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="xs"
+                          className="mr-1 shrink-0"
+                          onClick={() => toggleFrameworkPrompts(fw)}
                         >
                           {fwSelectedCount === fwPromptCount ? "Clear" : "All"}
-                        </button>
-                      </button>
+                        </Button>
+                      </div>
 
                       {isExpanded && (
-                        <div className="ml-3 mt-1 space-y-0.5 border-l-2 border-gray-100 pl-3">
+                        <div className="mt-1 ml-3 space-y-0.5 border-l-2 border-border pl-3">
                           {fw.categories.map((category) => {
                             const isCatExpanded = expandedCategories.has(category.name);
                             const selectedInCat = category.prompts.filter((p) => selectedPromptIds.has(p.id)).length;
@@ -1079,77 +999,86 @@ export default function ComplianceUI({
                             const builtInFrameworkNames = new Set(frameworks.map((f) => f.name));
                             const isCustom = !builtInFrameworkNames.has(fw.name);
                             return (
-                              <div key={category.name} className="rounded-md overflow-hidden">
-                                <button
+                              <div key={category.name} className="overflow-hidden rounded-md">
+                                <Button
                                   type="button"
+                                  variant="ghost"
+                                  className="h-auto w-full justify-start gap-1.5 px-2.5 py-2"
                                   onClick={() => toggleCategory(category.name)}
-                                  className="w-full flex items-center gap-1.5 px-2.5 py-2 text-left hover:bg-gray-50 transition-colors"
                                 >
                                   {isCatExpanded ? (
-                                    <ChevronDown className="w-3.5 h-3.5 text-gray-400 shrink-0" />
+                                    <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
                                   ) : (
-                                    <ChevronRight className="w-3.5 h-3.5 text-gray-400 shrink-0" />
+                                    <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />
                                   )}
-                                  <span className="text-sm shrink-0">
-                                    <CategoryIcon iconKey={category.icon} className="w-3.5 h-3.5 text-gray-500" />
-                                  </span>
-                                  <span className="text-[11px] font-medium text-gray-700 flex-1 min-w-0 truncate">
+                                  <CategoryIcon
+                                    iconKey={category.icon}
+                                    className="size-3.5 shrink-0 text-muted-foreground"
+                                  />
+                                  <span className="min-w-0 flex-1 truncate text-left text-[11px] font-medium">
                                     {category.name}
                                   </span>
-                                  <span className="text-[10px] text-gray-400 shrink-0">{category.prompts.length}</span>
+                                  <span className="shrink-0 text-[10px] font-normal text-muted-foreground">
+                                    {category.prompts.length}
+                                  </span>
                                   {selectedInCat > 0 && (
-                                    <span className="text-[9px] font-medium bg-blue-100 text-blue-700 px-1 py-0.5 rounded-full shrink-0">
+                                    <Badge variant="secondary" className="h-auto shrink-0 px-1 py-0.5 text-[9px]">
                                       {selectedInCat}
-                                    </span>
+                                    </Badge>
                                   )}
-                                </button>
+                                </Button>
 
                                 {isCatExpanded && (
                                   <div>
-                                    <div className="px-2.5 py-1 flex items-center justify-between">
-                                      <p className="text-[10px] text-gray-400 leading-relaxed flex-1 mr-2 line-clamp-2">
+                                    <div className="flex items-center justify-between px-2.5 py-1">
+                                      <p className="mr-2 line-clamp-2 flex-1 text-[10px] leading-relaxed text-muted-foreground">
                                         {category.description}
                                       </p>
-                                      <button
+                                      <Button
                                         type="button"
+                                        variant="link"
+                                        size="xs"
+                                        className="h-auto shrink-0 px-0 whitespace-nowrap"
                                         onClick={() => toggleCategoryPrompts(category)}
-                                        className="text-[10px] font-medium text-blue-600 hover:text-blue-700 shrink-0 whitespace-nowrap"
                                       >
                                         {allCatSelected ? "Clear" : "Select all"}
-                                      </button>
+                                      </Button>
                                     </div>
                                     {category.prompts.map((prompt) => (
                                       <label
                                         key={prompt.id}
-                                        className="flex items-start gap-2 px-2.5 py-1.5 hover:bg-gray-50 cursor-pointer group"
+                                        className="group flex cursor-pointer items-start gap-2 px-2.5 py-1.5 hover:bg-muted/50"
                                       >
-                                        <input
-                                          type="checkbox"
+                                        <Checkbox
                                           checked={selectedPromptIds.has(prompt.id)}
-                                          onChange={() => togglePrompt(prompt.id)}
-                                          className="mt-0.5 w-3.5 h-3.5 rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500/20 shrink-0"
+                                          onCheckedChange={() => togglePrompt(prompt.id)}
+                                          className="mt-0.5 shrink-0"
+                                          aria-label={prompt.prompt}
                                         />
-                                        <div className="flex-1 min-w-0">
-                                          <p className="text-[11px] text-gray-700 leading-relaxed">{prompt.prompt}</p>
-                                          <span
-                                            className={`inline-block mt-0.5 text-[9px] font-semibold px-1 py-0.5 rounded-sm ${prompt.expectedResult === "fail" ? "bg-red-50 text-red-600" : "bg-green-50 text-green-600"}`}
+                                        <div className="min-w-0 flex-1">
+                                          <p className="text-[11px] leading-relaxed">{prompt.prompt}</p>
+                                          <Badge
+                                            variant={prompt.expectedResult === "fail" ? "destructive" : "secondary"}
+                                            className="mt-0.5 h-auto px-1 py-0.5 text-[9px]"
                                           >
                                             {prompt.expectedResult === "fail" ? "Should Fail" : "Should Pass"}
-                                          </span>
+                                          </Badge>
                                         </div>
                                         {isCustom && (
-                                          <button
+                                          <Button
                                             type="button"
+                                            variant="ghost"
+                                            size="icon-xs"
+                                            className="shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-destructive"
+                                            aria-label="Delete"
                                             onClick={(e) => {
                                               e.preventDefault();
                                               e.stopPropagation();
                                               deleteCustomPrompt(prompt.id);
                                             }}
-                                            className="opacity-0 group-hover:opacity-100 p-0.5 text-gray-400 hover:text-red-500 transition-all shrink-0"
-                                            aria-label="Delete"
                                           >
-                                            <Trash2 className="w-3 h-3" />
-                                          </button>
+                                            <Trash2 />
+                                          </Button>
                                         )}
                                       </label>
                                     ))}
@@ -1167,379 +1096,361 @@ export default function ComplianceUI({
             </div>
           </div>
 
-          {/* Right panel */}
-          <div className="flex-1 flex flex-col bg-gray-50 overflow-hidden min-w-0">
-            <div className="shrink-0 bg-white border-b border-gray-200 px-4">
-              <div className="flex items-center gap-0">
-                <button
-                  type="button"
-                  onClick={() => setRightTab("quick-test")}
-                  className={`relative flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors ${rightTab === "quick-test" ? "text-blue-600" : "text-gray-500 hover:text-gray-700"}`}
-                >
-                  <MessageSquare className="w-3.5 h-3.5" /> Quick Test
-                  {rightTab === "quick-test" && (
-                    <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600 rounded-t" />
-                  )}
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setRightTab("batch-results")}
-                  className={`relative flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors ${rightTab === "batch-results" ? "text-blue-600" : "text-gray-500 hover:text-gray-700"}`}
-                >
-                  <ListChecks className="w-3.5 h-3.5" /> Batch Results
-                  {testResults.length > 0 && (
-                    <span className="text-[10px] bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded-full">
-                      {testResults.length}
-                    </span>
-                  )}
-                  {rightTab === "batch-results" && (
-                    <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600 rounded-t" />
-                  )}
-                </button>
+          <Tabs
+            value={rightTab}
+            onValueChange={(value) => setRightTab(value as RightPanelTab)}
+            className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-muted/30"
+          >
+            <TabsList
+              variant="line"
+              className="h-auto w-full shrink-0 justify-start rounded-none border-b bg-background px-4"
+            >
+              <TabsTrigger value="quick-test" className="flex-none rounded-none px-3 py-2.5 text-xs">
+                <MessageSquare /> Quick Test
+              </TabsTrigger>
+              <TabsTrigger value="batch-results" className="flex-none rounded-none px-3 py-2.5 text-xs">
+                <ListChecks /> Batch Results
+                {testResults.length > 0 && (
+                  <Badge variant="secondary" className="h-auto px-1.5 py-0.5 text-[10px]">
+                    {testResults.length}
+                  </Badge>
+                )}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent
+              value="quick-test"
+              className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden data-hidden:hidden"
+            >
+              <div className="shrink-0 px-5 pt-4 pb-2">
+                {hasAnyConfig ? (
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-[11px] font-medium text-muted-foreground">Testing against:</span>
+                    {selectedPolicies.map((id) => (
+                      <Badge key={id} variant="secondary" className="h-auto px-2 py-0.5 text-[11px]">
+                        {policyValueToLabel.get(id) ?? id}
+                      </Badge>
+                    ))}
+                    {selectedGuardrails.map((id) => (
+                      <Badge key={id} variant="secondary" className="h-auto px-2 py-0.5 text-[11px]">
+                        {id}
+                      </Badge>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-[11px] text-muted-foreground">
+                    No policies or guardrails selected. Select above to test against specific rules.
+                  </p>
+                )}
               </div>
-            </div>
 
-            {rightTab === "quick-test" && (
-              <div className="flex-1 flex flex-col overflow-hidden min-h-0">
-                <div className="px-5 pt-4 pb-2 shrink-0">
-                  {hasAnyConfig ? (
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <span className="text-[11px] font-medium text-gray-500">Testing against:</span>
-                      {selectedPolicies.map((id) => (
-                        <span
-                          key={id}
-                          className="text-[11px] bg-blue-50 text-blue-700 px-2 py-0.5 rounded-sm font-medium"
-                        >
-                          {policyValueToLabel.get(id) ?? id}
-                        </span>
-                      ))}
-                      {selectedGuardrails.map((id) => {
-                        const g = guardrailOptions.find((x) => x.id === id);
-                        return (
-                          <span
-                            key={id}
-                            className="text-[11px] bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded-sm font-medium"
-                          >
-                            {g?.name}
-                          </span>
-                        );
-                      })}
-                    </div>
-                  ) : (
-                    <p className="text-[11px] text-gray-400">
-                      No policies or guardrails selected — select above to test against specific rules.
-                    </p>
-                  )}
-                </div>
-
-                <div className="flex-1 overflow-y-auto px-5 py-3 space-y-3 min-h-0">
-                  {quickTestMessages.length === 0 && (
-                    <div className="flex items-center justify-center h-full min-h-[120px]">
-                      <div className="text-center">
-                        <div className="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-3">
-                          <MessageSquare className="w-5 h-5 text-gray-400" />
-                        </div>
-                        <p className="text-xs text-gray-500">Type a prompt below to quickly test it.</p>
+              <div className="flex-1 overflow-y-auto px-5 py-3 space-y-3 min-h-0">
+                {quickTestMessages.length === 0 && (
+                  <div className="flex items-center justify-center h-full min-h-[120px]">
+                    <div className="text-center">
+                      <div className="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-3">
+                        <MessageSquare className="w-5 h-5 text-gray-400" />
                       </div>
-                    </div>
-                  )}
-                  {quickTestMessages.map((msg) => (
-                    <div key={msg.id} className={`flex ${msg.type === "user" ? "justify-end" : "justify-start"}`}>
-                      <div
-                        className={`max-w-[85%] rounded-lg px-3 py-2 ${msg.type === "user" ? "bg-blue-600 text-white" : msg.result === "blocked" ? "bg-red-50 border border-red-100" : "bg-green-50 border border-green-100"}`}
-                      >
-                        <p
-                          className={`text-xs leading-relaxed ${msg.type === "user" ? "text-white" : msg.result === "blocked" ? "text-red-700" : "text-green-700"}`}
-                        >
-                          {msg.type === "system" && (
-                            <span className="inline-flex items-center gap-1 font-semibold mr-1">
-                              {msg.result === "blocked" ? (
-                                <X className="w-3 h-3 inline" />
-                              ) : (
-                                <CheckCircle2 className="w-3 h-3 inline" />
-                              )}
-                              {msg.result === "blocked" ? "Blocked" : "Allowed"}
-                              <span className="font-normal mx-0.5">—</span>
-                            </span>
-                          )}
-                          {msg.text}
-                          {msg.type === "system" && msg.returnedText != null && (
-                            <span className="block mt-1.5 pt-1.5 border-t border-gray-200/60">
-                              <span className="text-gray-500">Returned: </span>
-                              <span className="font-medium text-gray-700 break-all">{msg.returnedText}</span>
-                            </span>
-                          )}
-                        </p>
-                      </div>
-                    </div>
-                  ))}
-                  {isQuickTesting && (
-                    <div className="flex justify-start">
-                      <div className="bg-gray-100 rounded-lg px-3 py-2">
-                        <Loader2 className="w-3.5 h-3.5 text-gray-400 animate-spin" />
-                      </div>
-                    </div>
-                  )}
-                  <div ref={messagesEndRef} />
-                </div>
-
-                <div className="shrink-0 px-5 pb-4">
-                  <div className="border border-gray-200 rounded-lg bg-white overflow-hidden focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-400">
-                    <textarea
-                      ref={textareaRef}
-                      value={quickTestInput}
-                      onChange={(e) => setQuickTestInput(e.target.value)}
-                      onKeyDown={handleQuickTestKeyDown}
-                      placeholder="Enter text to test..."
-                      rows={3}
-                      className="w-full px-3 pt-3 pb-1 text-sm text-gray-700 placeholder:text-gray-400 focus:outline-hidden resize-none"
-                    />
-                    <div className="flex items-center justify-between px-3 pb-2">
-                      <span className="text-[10px] text-gray-400">
-                        Press <kbd className="px-1 py-0.5 bg-gray-100 rounded-sm text-[10px] font-mono">Enter</kbd> to
-                        submit ·{" "}
-                        <kbd className="px-1 py-0.5 bg-gray-100 rounded-sm text-[10px] font-mono">Shift+Enter</kbd> for
-                        new line
-                      </span>
-                      <span className="text-[10px] text-gray-400 tabular-nums">{quickTestInput.length}</span>
+                      <p className="text-xs text-gray-500">Type a prompt below to quickly test it.</p>
                     </div>
                   </div>
-                  <button
-                    type="button"
-                    onClick={runQuickTest}
-                    disabled={!quickTestInput.trim() || isQuickTesting || disabledPersonalKeyCreation}
-                    className={`w-full mt-2 flex items-center justify-center gap-1.5 py-2.5 rounded-lg text-sm font-medium transition-colors ${!quickTestInput.trim() || isQuickTesting || disabledPersonalKeyCreation ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-blue-600 text-white hover:bg-blue-700"}`}
-                  >
-                    {isQuickTesting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}{" "}
-                    {testButtonLabel}
-                  </button>
-                </div>
+                )}
+                {quickTestMessages.map((msg) => (
+                  <div key={msg.id} className={`flex ${msg.type === "user" ? "justify-end" : "justify-start"}`}>
+                    <div
+                      className={`max-w-[85%] rounded-lg px-3 py-2 ${msg.type === "user" ? "bg-blue-600 text-white" : msg.result === "blocked" ? "bg-red-50 border border-red-100" : "bg-green-50 border border-green-100"}`}
+                    >
+                      <p
+                        className={`text-xs leading-relaxed ${msg.type === "user" ? "text-white" : msg.result === "blocked" ? "text-red-700" : "text-green-700"}`}
+                      >
+                        {msg.type === "system" && (
+                          <span className="inline-flex items-center gap-1 font-semibold mr-1">
+                            {msg.result === "blocked" ? (
+                              <X className="w-3 h-3 inline" />
+                            ) : (
+                              <CheckCircle2 className="w-3 h-3 inline" />
+                            )}
+                            {msg.result === "blocked" ? "Blocked" : "Allowed"}
+                            <span className="font-normal mx-0.5">—</span>
+                          </span>
+                        )}
+                        {msg.text}
+                        {msg.type === "system" && msg.returnedText != null && (
+                          <span className="block mt-1.5 pt-1.5 border-t border-gray-200/60">
+                            <span className="text-gray-500">Returned: </span>
+                            <span className="font-medium text-gray-700 break-all">{msg.returnedText}</span>
+                          </span>
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+                {isQuickTesting && (
+                  <div className="flex justify-start">
+                    <div className="bg-gray-100 rounded-lg px-3 py-2">
+                      <Loader2 className="w-3.5 h-3.5 text-gray-400 animate-spin" />
+                    </div>
+                  </div>
+                )}
+                <div ref={messagesEndRef} />
               </div>
-            )}
 
-            {rightTab === "batch-results" && (
-              <div className="flex-1 flex flex-col overflow-hidden bg-white min-h-0">
-                <div className="px-5 py-3 border-b border-gray-200 shrink-0">
-                  <div className="flex items-center justify-between mb-2">
-                    <h2 className="text-sm font-semibold text-gray-900">Results</h2>
-                    {testResults.length > 0 && (
-                      <div className="flex items-center gap-2">
-                        <button
-                          type="button"
-                          onClick={exportBatchResults}
-                          disabled={filteredResults.length === 0}
-                          className="flex items-center gap-1 text-[11px] font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 px-2 py-1 rounded-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+              <div className="shrink-0 px-5 pb-4">
+                <div className="overflow-hidden rounded-lg border bg-background">
+                  <Textarea
+                    ref={textareaRef}
+                    value={quickTestInput}
+                    onChange={(e) => setQuickTestInput(e.target.value)}
+                    onKeyDown={handleQuickTestKeyDown}
+                    placeholder="Enter text to test..."
+                    rows={3}
+                    className="min-h-0 resize-none border-0 shadow-none focus-visible:ring-0"
+                  />
+                  <div className="flex items-center justify-between px-3 pb-2">
+                    <span className="text-[10px] text-muted-foreground">
+                      Press <kbd className="rounded-sm bg-muted px-1 py-0.5 font-mono text-[10px]">Enter</kbd> to submit
+                      · <kbd className="rounded-sm bg-muted px-1 py-0.5 font-mono text-[10px]">Shift+Enter</kbd> for new
+                      line
+                    </span>
+                    <span className="text-[10px] text-muted-foreground tabular-nums">{quickTestInput.length}</span>
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  className="mt-2 w-full"
+                  onClick={runQuickTest}
+                  disabled={!quickTestInput.trim() || isQuickTesting || disabledPersonalKeyCreation}
+                >
+                  {isQuickTesting ? <Loader2 className="animate-spin" /> : <Send />} {testButtonLabel}
+                </Button>
+              </div>
+            </TabsContent>
+
+            <TabsContent
+              value="batch-results"
+              className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden bg-background data-hidden:hidden"
+            >
+              <div className="shrink-0 border-b px-5 py-3">
+                <div className="mb-2 flex items-center justify-between">
+                  <h2 className="text-sm font-semibold tracking-tight">Results</h2>
+                  {testResults.length > 0 && (
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="xs"
+                        onClick={exportBatchResults}
+                        disabled={filteredResults.length === 0}
+                      >
+                        <Download /> Export CSV
+                      </Button>
+                      <div className="flex items-center gap-2.5 text-[11px]">
+                        <span className="flex items-center gap-1 text-green-600">
+                          <CheckCircle2 className="w-3 h-3" />
+                          {matchCount}
+                        </span>
+                        <span
+                          className="flex items-center gap-1 text-amber-600"
+                          title="Allowed content that should have been blocked"
                         >
-                          <Download className="w-3 h-3" /> Export CSV
-                        </button>
-                        <div className="flex items-center gap-2.5 text-[11px]">
-                          <span className="flex items-center gap-1 text-green-600">
-                            <CheckCircle2 className="w-3 h-3" />
-                            {matchCount}
+                          <AlertTriangle className="w-3 h-3" />
+                          {falseNegativeCount} FN
+                        </span>
+                        <span
+                          className="flex items-center gap-1 text-red-600"
+                          title="Blocked content that should have been allowed"
+                        >
+                          <X className="w-3 h-3" />
+                          {falsePositiveCount} FP
+                        </span>
+                        {pendingCount > 0 && (
+                          <span className="flex items-center gap-1 text-gray-500">
+                            <Loader2 className="w-3 h-3 animate-spin" />
+                            {pendingCount}
                           </span>
-                          <span
-                            className="flex items-center gap-1 text-amber-600"
-                            title="Allowed content that should have been blocked"
-                          >
-                            <AlertTriangle className="w-3 h-3" />
-                            {falseNegativeCount} FN
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+                {testResults.length > 0 && (
+                  <div className="flex flex-wrap items-center gap-1">
+                    {(["all", "matches", "mismatches", "pending"] as ResultFilter[]).map((filter) => {
+                      const count =
+                        filter === "all"
+                          ? testResults.length
+                          : filter === "matches"
+                            ? matchCount
+                            : filter === "mismatches"
+                              ? mismatchCount
+                              : pendingCount;
+                      return (
+                        <Button
+                          key={filter}
+                          type="button"
+                          variant={resultFilter === filter ? "default" : "ghost"}
+                          size="xs"
+                          className="capitalize"
+                          onClick={() => setResultFilter(filter)}
+                        >
+                          {filter} ({count})
+                        </Button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              <div className="flex-1 overflow-y-auto min-h-0">
+                {testResults.length === 0 ? (
+                  <div className="flex items-center justify-center h-full min-h-[120px]">
+                    <div className="text-center">
+                      <div className="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-3">
+                        <FlaskConical className="w-6 h-6 text-gray-400" />
+                      </div>
+                      <p className="text-xs text-gray-500 max-w-[240px]">
+                        Select prompts and click Simulate to run batch compliance tests.
+                      </p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="p-4 space-y-1.5">
+                    {completedResults.length > 0 && (
+                      <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-xl mb-4 border border-gray-100">
+                        <div className="flex items-center gap-3 text-sm flex-1">
+                          <span>
+                            <span className="font-semibold text-gray-700">{testResults.length}</span>{" "}
+                            <span className="text-gray-500">total</span>
                           </span>
-                          <span
-                            className="flex items-center gap-1 text-red-600"
-                            title="Blocked content that should have been allowed"
-                          >
-                            <X className="w-3 h-3" />
-                            {falsePositiveCount} FP
+                          <div className="w-px h-4 bg-gray-200" />
+                          <span>
+                            <span className="font-semibold text-green-700">{matchCount}</span>{" "}
+                            <span className="text-gray-500">correct</span>
                           </span>
-                          {pendingCount > 0 && (
-                            <span className="flex items-center gap-1 text-gray-500">
-                              <Loader2 className="w-3 h-3 animate-spin" />
-                              {pendingCount}
-                            </span>
-                          )}
+                          <div className="w-px h-4 bg-gray-200" />
+                          <span title="Allowed content that should have been blocked">
+                            <span className="font-semibold text-amber-700">{falseNegativeCount}</span>{" "}
+                            <span className="text-gray-500">false negative</span>
+                          </span>
+                          <div className="w-px h-4 bg-gray-200" />
+                          <span title="Blocked content that should have been allowed">
+                            <span className="font-semibold text-red-700">{falsePositiveCount}</span>{" "}
+                            <span className="text-gray-500">false positive</span>
+                          </span>
+                        </div>
+                        <div
+                          className={`flex flex-col items-center justify-center min-w-[88px] py-2.5 px-4 rounded-xl border-2 font-bold text-2xl tabular-nums ${
+                            matchCount / completedResults.length >= 0.8
+                              ? "bg-green-50 border-green-200 text-green-700"
+                              : matchCount / completedResults.length >= 0.5
+                                ? "bg-amber-50 border-amber-200 text-amber-700"
+                                : "bg-red-50 border-red-200 text-red-700"
+                          }`}
+                        >
+                          <span className="text-[10px] font-semibold uppercase tracking-wider opacity-90">Score</span>
+                          <span>{Math.round((matchCount / completedResults.length) * 100)}%</span>
                         </div>
                       </div>
                     )}
-                  </div>
-                  {testResults.length > 0 && (
-                    <div className="flex items-center gap-1 flex-wrap">
-                      {(["all", "matches", "mismatches", "pending"] as ResultFilter[]).map((filter) => {
-                        const count =
-                          filter === "all"
-                            ? testResults.length
-                            : filter === "matches"
-                              ? matchCount
-                              : filter === "mismatches"
-                                ? mismatchCount
-                                : pendingCount;
-                        return (
-                          <button
-                            key={filter}
-                            type="button"
-                            onClick={() => setResultFilter(filter)}
-                            className={`text-[11px] font-medium px-2.5 py-1 rounded-md transition-colors capitalize ${resultFilter === filter ? "bg-gray-900 text-white" : "text-gray-500 hover:bg-gray-100"}`}
-                          >
-                            {filter} ({count})
-                          </button>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
 
-                <div className="flex-1 overflow-y-auto min-h-0">
-                  {testResults.length === 0 ? (
-                    <div className="flex items-center justify-center h-full min-h-[120px]">
-                      <div className="text-center">
-                        <div className="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-3">
-                          <FlaskConical className="w-6 h-6 text-gray-400" />
-                        </div>
-                        <p className="text-xs text-gray-500 max-w-[240px]">
-                          Select prompts and click Simulate to run batch compliance tests.
-                        </p>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="p-4 space-y-1.5">
-                      {completedResults.length > 0 && (
-                        <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-xl mb-4 border border-gray-100">
-                          <div className="flex items-center gap-3 text-sm flex-1">
-                            <span>
-                              <span className="font-semibold text-gray-700">{testResults.length}</span>{" "}
-                              <span className="text-gray-500">total</span>
-                            </span>
-                            <div className="w-px h-4 bg-gray-200" />
-                            <span>
-                              <span className="font-semibold text-green-700">{matchCount}</span>{" "}
-                              <span className="text-gray-500">correct</span>
-                            </span>
-                            <div className="w-px h-4 bg-gray-200" />
-                            <span title="Allowed content that should have been blocked">
-                              <span className="font-semibold text-amber-700">{falseNegativeCount}</span>{" "}
-                              <span className="text-gray-500">false negative</span>
-                            </span>
-                            <div className="w-px h-4 bg-gray-200" />
-                            <span title="Blocked content that should have been allowed">
-                              <span className="font-semibold text-red-700">{falsePositiveCount}</span>{" "}
-                              <span className="text-gray-500">false positive</span>
-                            </span>
-                          </div>
-                          <div
-                            className={`flex flex-col items-center justify-center min-w-[88px] py-2.5 px-4 rounded-xl border-2 font-bold text-2xl tabular-nums ${
-                              matchCount / completedResults.length >= 0.8
-                                ? "bg-green-50 border-green-200 text-green-700"
-                                : matchCount / completedResults.length >= 0.5
-                                  ? "bg-amber-50 border-amber-200 text-amber-700"
-                                  : "bg-red-50 border-red-200 text-red-700"
-                            }`}
-                          >
-                            <span className="text-[10px] font-semibold uppercase tracking-wider opacity-90">Score</span>
-                            <span>{Math.round((matchCount / completedResults.length) * 100)}%</span>
-                          </div>
-                        </div>
-                      )}
-
-                      {filteredResults.map((result) => {
-                        const isExpanded = expandedResults.has(result.promptId);
-                        return (
-                          <div
-                            key={result.promptId}
-                            className={`border rounded-lg overflow-hidden ${result.status !== "complete" ? "border-gray-100 bg-gray-50/50" : result.isMatch ? "border-green-100" : "border-red-100"}`}
-                          >
-                            <div className="p-2.5">
-                              <div className="flex items-start gap-2">
-                                <div className="shrink-0 mt-0.5">
-                                  {result.status !== "complete" ? (
-                                    <Loader2 className="w-3.5 h-3.5 text-gray-400 animate-spin" />
-                                  ) : result.isMatch ? (
-                                    <CheckCircle2 className="w-3.5 h-3.5 text-green-500" />
-                                  ) : (
-                                    <AlertTriangle className="w-3.5 h-3.5 text-red-500" />
-                                  )}
-                                </div>
-                                <div className="flex-1 min-w-0">
-                                  <p className="text-[11px] text-gray-700 leading-relaxed mb-1.5">{result.prompt}</p>
-                                  <div className="flex items-center gap-1.5 flex-wrap">
-                                    <span className="text-[9px] text-gray-400 inline-flex items-center gap-0.5">
-                                      <CategoryIcon iconKey={result.categoryIcon} className="w-3 h-3" />
-                                      {result.category}
-                                    </span>
-                                    <span
-                                      className={`text-[9px] font-semibold px-1 py-0.5 rounded-sm ${result.expectedResult === "fail" ? "bg-red-50 text-red-600" : "bg-green-50 text-green-600"}`}
-                                    >
-                                      {result.expectedResult === "fail" ? "Expect Block" : "Expect Allow"}
-                                    </span>
-                                    {result.status === "complete" && (
-                                      <span
-                                        className={`text-[9px] font-bold px-1 py-0.5 rounded-sm ${result.isMatch ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`}
-                                      >
-                                        {result.isMatch ? "✓ Match" : "✗ Gap"}
-                                      </span>
-                                    )}
-                                  </div>
-                                </div>
-                                {result.status === "complete" && (
-                                  <button
-                                    type="button"
-                                    onClick={() => {
-                                      setExpandedResults((prev) => {
-                                        const next = new Set(prev);
-                                        if (next.has(result.promptId)) next.delete(result.promptId);
-                                        else next.add(result.promptId);
-                                        return next;
-                                      });
-                                    }}
-                                    className="shrink-0 p-0.5 text-gray-400 hover:text-gray-600"
-                                    aria-label={isExpanded ? "Collapse" : "Expand"}
-                                  >
-                                    {isExpanded ? (
-                                      <ChevronDown className="w-3.5 h-3.5" />
-                                    ) : (
-                                      <ChevronRight className="w-3.5 h-3.5" />
-                                    )}
-                                  </button>
+                    {filteredResults.map((result) => {
+                      const isExpanded = expandedResults.has(result.promptId);
+                      return (
+                        <div
+                          key={result.promptId}
+                          className={`border rounded-lg overflow-hidden ${result.status !== "complete" ? "border-gray-100 bg-gray-50/50" : result.isMatch ? "border-green-100" : "border-red-100"}`}
+                        >
+                          <div className="p-2.5">
+                            <div className="flex items-start gap-2">
+                              <div className="shrink-0 mt-0.5">
+                                {result.status !== "complete" ? (
+                                  <Loader2 className="w-3.5 h-3.5 text-gray-400 animate-spin" />
+                                ) : result.isMatch ? (
+                                  <CheckCircle2 className="w-3.5 h-3.5 text-green-500" />
+                                ) : (
+                                  <AlertTriangle className="w-3.5 h-3.5 text-red-500" />
                                 )}
                               </div>
-                              {isExpanded && result.status === "complete" && (
-                                <div className="mt-2 pt-2 border-t border-gray-100 text-[11px] space-y-1">
-                                  {result.triggeredBy && (
-                                    <div>
-                                      <span className="text-gray-400">Triggered by:</span>{" "}
-                                      <span className="font-medium text-gray-700 bg-gray-100 px-1.5 py-0.5 rounded-sm">
-                                        {result.triggeredBy}
-                                      </span>
-                                    </div>
-                                  )}
-                                  <div>
-                                    <span className="text-gray-400">Verdict:</span>{" "}
-                                    <span className={result.isMatch ? "text-green-600" : "text-red-600"}>
-                                      {result.isMatch
-                                        ? "Correctly handled"
-                                        : result.expectedResult === "fail"
-                                          ? "Gap — should have been blocked"
-                                          : "False positive — incorrectly blocked"}
+                              <div className="flex-1 min-w-0">
+                                <p className="text-[11px] text-gray-700 leading-relaxed mb-1.5">{result.prompt}</p>
+                                <div className="flex items-center gap-1.5 flex-wrap">
+                                  <span className="text-[9px] text-gray-400 inline-flex items-center gap-0.5">
+                                    <CategoryIcon iconKey={result.categoryIcon} className="w-3 h-3" />
+                                    {result.category}
+                                  </span>
+                                  <span
+                                    className={`text-[9px] font-semibold px-1 py-0.5 rounded-sm ${result.expectedResult === "fail" ? "bg-red-50 text-red-600" : "bg-green-50 text-green-600"}`}
+                                  >
+                                    {result.expectedResult === "fail" ? "Expect Block" : "Expect Allow"}
+                                  </span>
+                                  {result.status === "complete" && (
+                                    <span
+                                      className={`text-[9px] font-bold px-1 py-0.5 rounded-sm ${result.isMatch ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`}
+                                    >
+                                      {result.isMatch ? "✓ Match" : "✗ Gap"}
                                     </span>
-                                  </div>
-                                  {result.returnedText != null && result.returnedText !== "" && (
-                                    <div className="mt-1.5">
-                                      <span className="text-gray-400 block mb-0.5">LLM response:</span>
-                                      <div className="text-gray-700 bg-gray-50 rounded-sm px-2 py-1.5 border border-gray-100 max-h-32 overflow-y-auto whitespace-pre-wrap wrap-break-word">
-                                        {result.returnedText}
-                                      </div>
-                                    </div>
                                   )}
                                 </div>
+                              </div>
+                              {result.status === "complete" && (
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon-xs"
+                                  className="shrink-0 text-muted-foreground"
+                                  aria-label={isExpanded ? "Collapse" : "Expand"}
+                                  onClick={() => {
+                                    setExpandedResults((prev) => {
+                                      const next = new Set(prev);
+                                      if (next.has(result.promptId)) next.delete(result.promptId);
+                                      else next.add(result.promptId);
+                                      return next;
+                                    });
+                                  }}
+                                >
+                                  {isExpanded ? <ChevronDown /> : <ChevronRight />}
+                                </Button>
                               )}
                             </div>
+                            {isExpanded && result.status === "complete" && (
+                              <div className="mt-2 pt-2 border-t border-gray-100 text-[11px] space-y-1">
+                                {result.triggeredBy && (
+                                  <div>
+                                    <span className="text-gray-400">Triggered by:</span>{" "}
+                                    <span className="font-medium text-gray-700 bg-gray-100 px-1.5 py-0.5 rounded-sm">
+                                      {result.triggeredBy}
+                                    </span>
+                                  </div>
+                                )}
+                                <div>
+                                  <span className="text-gray-400">Verdict:</span>{" "}
+                                  <span className={result.isMatch ? "text-green-600" : "text-red-600"}>
+                                    {result.isMatch
+                                      ? "Correctly handled"
+                                      : result.expectedResult === "fail"
+                                        ? "Gap — should have been blocked"
+                                        : "False positive — incorrectly blocked"}
+                                  </span>
+                                </div>
+                                {result.returnedText != null && result.returnedText !== "" && (
+                                  <div className="mt-1.5">
+                                    <span className="text-gray-400 block mb-0.5">LLM response:</span>
+                                    <div className="text-gray-700 bg-gray-50 rounded-sm px-2 py-1.5 border border-gray-100 max-h-32 overflow-y-auto whitespace-pre-wrap wrap-break-word">
+                                      {result.returnedText}
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                            )}
                           </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
+            </TabsContent>
+          </Tabs>
         </div>
       </div>
     </div>