Update UI to use new theme tokens

src/components/ModelInfo.tsx

@@ -28,37 +28,37 @@ const ModelInfo = () => {
   const { models, modelInfo, selectedQuantization, isFetching } = useModel()
 
   const ModelInfoSkeleton = () => (
-    <div className="bg-linear-to-r from-blue-50 to-indigo-50 px-3 py-3 rounded-lg border border-blue-200 space-y-3 animate-pulse w-4/5">
+    <div className="bg-gradient-to-r from-secondary to-accent px-3 py-3 rounded-lg border border-border space-y-3 animate-pulse w-4/5">
       <div className="flex items-center space-x-2">
-        <Bot className="w-4 h-4 text-blue-300" />
-        <div className="h-4 bg-gray-300 rounded-sm flex-1"></div>
-        <div className="w-4 h-4 bg-gray-300 rounded-full"></div>
+        <Bot className="w-4 h-4 text-primary/60" />
+        <div className="h-4 bg-muted rounded-sm flex-1"></div>
+        <div className="w-4 h-4 bg-muted rounded-full"></div>
       </div>
 
       <div className="flex items-center space-x-2 ml-6">
-        <div className="h-3 bg-gray-200 rounded-sm w-32"></div>
+        <div className="h-3 bg-muted/80 rounded-sm w-32"></div>
       </div>
 
       <div className="grid grid-cols-2 gap-2 text-xs">
         <div className="flex items-center space-x-1">
-          <Heart className="w-3 h-3 text-red-300" />
-          <div className="h-3 bg-gray-200 rounded-sm w-8"></div>
+          <Heart className="w-3 h-3 text-destructive/60" />
+          <div className="h-3 bg-muted/80 rounded-sm w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
-          <Download className="w-3 h-3 text-green-300" />
-          <div className="h-3 bg-gray-200 rounded-sm w-8"></div>
+          <Download className="w-3 h-3 text-chart-2/60" />
+          <div className="h-3 bg-muted/80 rounded-sm w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
-          <Cpu className="w-3 h-3 text-purple-300" />
-          <div className="h-3 bg-gray-200 rounded-sm w-8"></div>
+          <Cpu className="w-3 h-3 text-chart-4/60" />
+          <div className="h-3 bg-muted/80 rounded-sm w-8"></div>
         </div>
         <div className="flex items-center space-x-1">
-          <DatabaseIcon className="w-3 h-3 text-purple-300" />
-          <div className="h-3 bg-gray-200 rounded-sm w-12"></div>
+          <DatabaseIcon className="w-3 h-3 text-chart-4/60" />
+          <div className="h-3 bg-muted/80 rounded-sm w-12"></div>
         </div>
       </div>
-      <hr className="border-gray-200" />
-      <div className="h-8 bg-gray-200 rounded-sm w-full"></div>
+      <hr className="border-border" />
+      <div className="h-8 bg-muted/80 rounded-sm w-full"></div>
     </div>
   )
 
@@ -67,7 +67,7 @@ const ModelInfo = () => {
   }
 
   return (
-    <div className="relative bg-linear-to-r from-blue-50 to-indigo-50 px-3 py-3 rounded-lg border border-blue-200 space-y-3  h-full w-4/5">
+    <div className="relative bg-gradient-to-r from-secondary to-accent px-3 py-3 rounded-lg border border-border space-y-3  h-full w-4/5">
       {/* Model Name Row */}
       <div className="flex justify-center items-center space-x-2">
         {/* Compatibility Status */}
@@ -76,7 +76,7 @@ const ModelInfo = () => {
             {modelInfo.isCompatible ? (
               <CheckCircle className="w-4 h-4 text-green-500" />
             ) : (
-              <XCircle className="w-4 h-4 text-red-500" />
+              <XCircle className="w-4 h-4 text-destructive" />
             )}
           </div>
         )}
@@ -85,7 +85,7 @@ const ModelInfo = () => {
             href={`https://huggingface.co/${modelInfo.name}`}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-sm font-medium text-gray-700 hover:underline block truncate"
+            className="text-sm font-medium text-foreground/80 hover:underline block truncate"
             title={modelInfo.name}
           >
             <ExternalLink className="w-3 h-3 inline-block mr-1" />
@@ -97,7 +97,7 @@ const ModelInfo = () => {
               href={`https://huggingface.co/${modelInfo.baseId}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs text-gray-500 hover:underline block truncate mt-1"
+              className="text-xs text-muted-foreground hover:underline block truncate mt-1"
               title={`Base model: ${modelInfo.baseId}`}
             >
               <ExternalLink className="w-3 h-3 inline-block mr-1" />(
@@ -108,10 +108,10 @@ const ModelInfo = () => {
       </div>
 
       {/* Stats Grid */}
-      <div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
+      <div className="grid grid-cols-2 gap-2 text-xs text-muted-foreground">
         {modelInfo.likes > 0 && (
           <div className="flex items-center space-x-1">
-            <Heart className="w-3 h-3 text-red-500" />
+            <Heart className="w-3 h-3 text-destructive" />
             <span>{formatNumber(modelInfo.likes)}</span>
           </div>
         )}
@@ -157,8 +157,8 @@ const ModelInfo = () => {
 
       {/* Incompatibility Message */}
       {modelInfo.isCompatible === false && modelInfo.incompatibilityReason && (
-        <div className="bg-red-50 border border-red-200 rounded-md px-2 py-2">
-          <p className="text-xs text-red-700 whitespace-break-spaces">
+        <div className="bg-destructive/10 border border-destructive/20 rounded-md px-2 py-2">
+          <p className="text-xs text-destructive whitespace-break-spaces">
             {modelInfo.incompatibilityReason}
           </p>
         </div>

src/components/pipelines/FeatureExtraction.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { Plus, Trash2, Loader2, X, Eye, EyeOff } from 'lucide-react'
+import { Plus, Eraser, Loader2, X, Eye, EyeOff } from 'lucide-react'
 import {
   EmbeddingExample,
   FeatureExtractionWorkerInput,
@@ -241,7 +241,7 @@ function FeatureExtraction() {
   const busy = status !== 'ready' || isExtracting
 
   return (
-    <div className="flex flex-col h-full max-h-[88vh] w-full p-4">
+    <div className="flex flex-col max-h-[calc(100dvh-148px)] w-full p-4">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-2">
         <h1 className="text-xl sm:text-2xl font-bold">
           Feature Extraction (Embeddings)
@@ -273,7 +273,7 @@ function FeatureExtraction() {
             className="p-2 bg-red-100 hover:bg-red-200 rounded-lg transition-colors"
             title="Clear All Examples"
           >
-            <Trash2 className="w-4 h-4" />
+            <Eraser className="w-4 h-4" />
           </button>
         </div>
       </div>

src/components/pipelines/FeatureExtractionConfig.tsx

@@ -6,13 +6,13 @@ const FeatureExtractionConfig = () => {
 
   return (
     <div className="space-y-4">
-      <h3 className="text-lg font-semibold text-gray-900">
+      <h3 className="text-lg font-semibold text-foreground">
         Feature Extraction Settings
       </h3>
 
       <div className="space-y-3">
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
+          <label className="block text-sm font-medium text-foreground/80 mb-1">
             Pooling Strategy
           </label>
           <select
@@ -23,13 +23,13 @@ const FeatureExtractionConfig = () => {
                 pooling: e.target.value as 'mean' | 'cls' | 'max'
               }))
             }
-            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+            className="w-full px-3 py-2 border border-input rounded-md shadow-xs focus:outline-hidden focus:ring-2 focus:ring-ring focus:border-ring text-sm"
           >
             <option value="mean">Mean Pooling</option>
             <option value="cls">CLS Token</option>
             <option value="max">Max Pooling</option>
           </select>
-          <p className="text-xs text-gray-500 mt-1">
+          <p className="text-xs text-muted-foreground mt-1">
             How to aggregate token embeddings into sentence embeddings
           </p>
         </div>
@@ -45,20 +45,20 @@ const FeatureExtractionConfig = () => {
                   normalize: e.target.checked
                 }))
               }
-              className="rounded border-gray-300 text-blue-600 shadow-xs focus:border-blue-300 focus:ring-3 focus:ring-blue-200 focus:ring-opacity-50"
+              className="rounded border-input text-primary shadow-xs focus:border-ring focus:ring-3 focus:ring-ring/20"
             />
-            <span className="text-sm font-medium text-gray-700">
+            <span className="text-sm font-medium text-foreground/80">
               Normalize Embeddings
             </span>
           </label>
-          <p className="text-xs text-gray-500 mt-1 ml-6">
+          <p className="text-xs text-muted-foreground mt-1 ml-6">
             L2 normalize embeddings for better similarity calculations
           </p>
         </div>
       </div>
 
-      <div className="pt-2 border-t border-gray-200">
-        <div className="text-xs text-gray-500">
+      <div className="pt-2 border-t border-border">
+        <div className="text-xs text-muted-foreground">
           <p className="mb-1">
             <strong>Mean Pooling:</strong> Average all token embeddings
           </p>

src/components/pipelines/ImageClassification.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
 import {
   Upload,
-  Trash2,
+  Eraser,
   Loader2,
   X,
   Eye,
@@ -185,7 +185,7 @@ function ImageClassification() {
   const busy = status !== 'ready' || isClassifying
 
   return (
-    <div className="flex flex-col h-full max-h-[88vh] w-full p-4">
+    <div className="flex flex-col h-full max-h-[calc(100dvh-148px)]  w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">Image Classification</h1>
         <div className="flex gap-2">
@@ -213,7 +213,7 @@ function ImageClassification() {
             className="p-2 bg-red-100 hover:bg-red-200 rounded-lg transition-colors"
             title="Clear All Images"
           >
-            <Trash2 className="w-4 h-4" />
+            <Eraser className="w-4 h-4" />
           </button>
         </div>
       </div>

src/components/pipelines/ImageClassificationConfig.tsx

@@ -6,13 +6,13 @@ const ImageClassificationConfig = () => {
 
   return (
     <div className="space-y-4">
-      <h3 className="text-lg font-semibold text-gray-900">
+      <h3 className="text-lg font-semibold text-foreground">
         Image Classification Settings
       </h3>
 
       <div className="space-y-3">
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
+          <label className="block text-sm font-medium text-foreground/80 mb-1">
             Top K Predictions: {topK}
           </label>
           <input
@@ -22,21 +22,21 @@ const ImageClassificationConfig = () => {
             step="1"
             value={topK}
             onChange={(e) => setTopK(parseInt(e.target.value))}
-            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+            className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer"
           />
-          <div className="flex justify-between text-xs text-gray-400 mt-1">
+          <div className="flex justify-between text-xs text-muted-foreground/60 mt-1">
             <span>1</span>
             <span>5</span>
             <span>10</span>
           </div>
-          <p className="text-xs text-gray-500 mt-1">
+          <p className="text-xs text-muted-foreground mt-1">
             Number of top predictions to return for each image
           </p>
         </div>
 
-        <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
-          <h4 className="text-sm font-medium text-yellow-800 mb-2">💡 Tips</h4>
-          <div className="text-xs text-yellow-700 space-y-1">
+        <div className="p-3 bg-chart-4/10 border border-chart-4/20 rounded-lg">
+          <h4 className="text-sm font-medium text-chart-4 mb-2">💡 Tips</h4>
+          <div className="text-xs text-chart-4/80 space-y-1">
             <p>• Use Top K = 3-5 for most cases</p>
             <p>• Smaller images process faster</p>
             <p>• Try quantized models for speed</p>

src/components/pipelines/TextClassification.tsx

@@ -80,7 +80,7 @@ function TextClassification() {
   }
 
   return (
-    <div className="flex flex-col h-full max-h-[88vh] w-full p-4">
+    <div className="flex flex-col h-full max-h-[calc(100dvh-148px)]  w-full p-4">
       <h1 className="text-2xl font-bold mb-4 shrink-0">Text Classification</h1>
 
       <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0">

src/components/pipelines/TextGeneration.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { Send, Trash2, Loader2, X } from 'lucide-react'
+import { Send, Eraser, Loader2, X } from 'lucide-react'
 import {
   ChatMessage,
   TextGenerationWorkerInput,
@@ -153,7 +153,7 @@ function TextGeneration() {
   const hasChatTemplate = modelInfo?.hasChatTemplate
 
   return (
-    <div className="flex flex-col min-h-[70vh] h-full max-h-[88vh] w-full p-4">
+    <div className="flex flex-col min-h-[30dvh] max-h-[calc(100dvh-148px)] w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">
           Text Generation {hasChatTemplate ? '(Chat)' : ''}
@@ -164,7 +164,7 @@ function TextGeneration() {
             className="p-2 bg-red-100 hover:bg-red-200 rounded-lg transition-colors"
             title={hasChatTemplate ? 'Clear Chat' : 'Clear Text'}
           >
-            <Trash2 className="w-4 h-4" />
+            <Eraser className="w-4 h-4" />
           </button>
           {isGenerating && (
             <button

src/components/pipelines/TextGenerationConfig.tsx

@@ -1,4 +1,5 @@
-import { Switch } from '@headlessui/react'
+import { Switch } from '@/components/ui/switch'
+import { Slider } from '@/components/ui/slider'
 import {
   useTextGeneration,
   GenerationConfigState
@@ -19,89 +20,80 @@ function TextGenerationConfig() {
 
   return (
     <div className="space-y-4">
-      <h3 className="text-lg font-semibold text-gray-900">
+      <h3 className="text-lg font-semibold text-foreground">
         Text Generation Settings
       </h3>
 
       <div className="space-y-3">
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
+          <label className="block text-sm font-medium text-foreground/80 mb-1">
             Temperature: {config.temperature}
           </label>
-          <input
-            type="range"
-            min="0.1"
-            max="2.0"
-            step="0.1"
-            value={config.temperature}
-            onChange={(e) =>
-              handleConfigChange('temperature', parseFloat(e.target.value))
+          <Slider
+            defaultValue={[config.temperature]}
+            min={0.1}
+            max={2}
+            step={0.1}
+            onValueChange={(value) =>
+              handleConfigChange('temperature', value[0])
             }
-            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+            className="w-full rounded-lg"
           />
-          <p className="text-xs text-gray-500 mt-1">
+
+          <p className="text-xs text-muted-foreground mt-1">
             Controls randomness in generation (lower = more focused, higher =
             more creative)
           </p>
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
+          <label className="block text-sm font-medium text-foreground/80 mb-1">
             Max Tokens: {config.maxTokens}
           </label>
-          <input
-            type="range"
-            min="10"
-            max="500"
-            step="10"
-            value={config.maxTokens}
-            onChange={(e) =>
-              handleConfigChange('maxTokens', parseInt(e.target.value))
-            }
-            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+          <Slider
+            defaultValue={[config.maxTokens]}
+            min={10}
+            max={500}
+            step={10}
+            onValueChange={(value) => handleConfigChange('maxTokens', value[0])}
+            className="w-full rounded-lg"
           />
-          <p className="text-xs text-gray-500 mt-1">
+          <p className="text-xs text-muted-foreground mt-1">
             Maximum number of tokens to generate in the response
           </p>
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
+          <label className="block text-sm font-medium text-foreground/80 mb-1">
             Top-p: {config.topP}
           </label>
-          <input
-            type="range"
-            min="0.1"
-            max="1.0"
-            step="0.1"
-            value={config.topP}
-            onChange={(e) =>
-              handleConfigChange('topP', parseFloat(e.target.value))
-            }
-            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+          <Slider
+            defaultValue={[config.maxTokens]}
+            min={0.1}
+            max={1}
+            step={0.1}
+            onValueChange={(value) => handleConfigChange('topP', value[0])}
+            className="w-full rounded-lg"
           />
-          <p className="text-xs text-gray-500 mt-1">
+          <p className="text-xs text-muted-foreground mt-1">
             Nucleus sampling - considers tokens with cumulative probability up
             to this value
           </p>
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
+          <label className="block text-sm font-medium text-foreground/80 mb-1">
             Top-k: {config.topK}
           </label>
-          <input
-            type="range"
-            min="1"
-            max="100"
-            step="1"
-            value={config.topK}
-            onChange={(e) =>
-              handleConfigChange('topK', parseInt(e.target.value))
-            }
-            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+          <Slider
+            defaultValue={[config.topK]}
+            min={1}
+            max={100}
+            step={1}
+            onValueChange={(value) => handleConfigChange('topK', value[0])}
+            className="w-full rounded-lg"
           />
-          <p className="text-xs text-gray-500 mt-1">
+          <p className="text-xs text-muted-foreground mt-1">
             Only consider the top K most likely tokens at each step
           </p>
         </div>
@@ -109,37 +101,32 @@ function TextGenerationConfig() {
         <div className="flex items-center">
           <Switch
             checked={config.doSample}
-            onChange={(checked) => handleConfigChange('doSample', checked)}
-            className={`${config.doSample ? 'bg-blue-600' : 'bg-gray-200'}
-              relative inline-flex h-6 w-11 items-center rounded-full`}
-          >
-            <span
-              className={`${config.doSample ? 'translate-x-6' : 'translate-x-1'}
-                inline-block h-4 w-4 transform rounded-full bg-white transition`}
-            />
-          </Switch>
-          <label className="ml-3 text-sm font-medium text-gray-700">
+            onCheckedChange={(checked) =>
+              handleConfigChange('doSample', checked)
+            }
+          />
+          <label className="ml-3 text-sm font-medium text-foreground/80">
             Do Sample
           </label>
         </div>
-        <p className="text-xs text-gray-500 mt-1">
+        <p className="text-xs text-muted-foreground mt-1">
           Enable sampling-based generation (disable for deterministic output)
         </p>
 
         {/* System Message for Chat */}
         {modelInfo?.hasChatTemplate && (
-          <div className="pt-2 border-t border-gray-200">
-            <h4 className="text-sm font-semibold text-gray-800 mb-2">
+          <div className="pt-2 border-t border-border">
+            <h4 className="text-sm font-semibold text-foreground mb-2">
               System Message
             </h4>
             <textarea
               value={messages.find((m) => m.role === 'system')?.content || ''}
               onChange={(e) => updateSystemMessage(e.target.value)}
-              className="w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-hidden focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+              className="w-full p-2 border border-input rounded-md text-sm focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-ring"
               rows={4}
               placeholder="e.g., You are a helpful assistant."
             />
-            <p className="text-xs text-gray-500 mt-1">
+            <p className="text-xs text-muted-foreground mt-1">
               Initial instructions that guide the model's behavior throughout
               the conversation
             </p>
@@ -147,8 +134,8 @@ function TextGenerationConfig() {
         )}
       </div>
 
-      <div className="pt-2 border-t border-gray-200">
-        <div className="text-xs text-gray-500">
+      <div className="pt-2 border-t border-border">
+        <div className="text-xs text-muted-foreground">
           <p className="mb-1">
             <strong>Temperature:</strong> Higher values make output more random,
             lower values more focused

src/components/pipelines/ZeroShotClassification.tsx

@@ -81,7 +81,7 @@ function ZeroShotClassification() {
   const busy: boolean = status !== 'ready'
 
   return (
-    <div className="flex flex-col h-full max-h-[88vh] w-full p-4">
+    <div className="flex flex-col h-full max-h-[calc(100dvh-148px)]  w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">Zero-Shot Classification</h1>
       </div>

src/components/pipelines/ZeroShotClassificationConfig.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Plus, Minus, Trash2 } from 'lucide-react'
+import { Plus, Minus, Eraser } from 'lucide-react'
 import { useZeroShotClassification } from '../../contexts/ZeroShotClassificationContext'
+import { Slider } from '@/components/ui/slider'
 
 const ZeroShotClassificationConfig = () => {
   const {
@@ -15,37 +16,36 @@ const ZeroShotClassificationConfig = () => {
 
   return (
     <div className="space-y-4">
-      <h3 className="text-lg font-semibold text-gray-900">
+      <h3 className="text-lg font-semibold text-foreground">
         Zero-Shot Classification Settings
       </h3>
 
       <div className="space-y-3">
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">
+          <label className="block text-sm font-medium text-foreground/80 mb-1">
             Classification Threshold: {config.threshold}
           </label>
-          <input
-            type="range"
-            min="0.1"
-            max="0.95"
-            step="0.01"
-            value={config.threshold}
-            onChange={(e) =>
+          <Slider
+            defaultValue={[config.threshold]}
+            min={0.1}
+            max={0.95}
+            step={0.01}
+            onValueChange={(value) =>
               setConfig((prev) => ({
                 ...prev,
-                threshold: parseFloat(e.target.value)
+                threshold: value[0]
               }))
             }
-            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+            className="w-full rounded-lg"
           />
-          <p className="text-xs text-gray-500 mt-1">
+          <p className="text-xs text-muted-foreground mt-1">
             Minimum confidence score required for classification (lower values
             classify more items)
           </p>
         </div>
 
-        <div className="pt-2 border-t border-gray-200">
-          <h4 className="text-sm font-semibold text-gray-800 mb-3">
+        <div className="pt-2 border-t border-border">
+          <h4 className="text-sm font-semibold text-foreground mb-3">
             Categories
           </h4>
 
@@ -57,9 +57,9 @@ const ZeroShotClassificationConfig = () => {
                   value={section.title}
                   onChange={(e) => updateSectionTitle(index, e.target.value)}
                   disabled={section.title === 'Other'}
-                  className="flex-1 px-2 py-1 text-xs border border-gray-300 rounded-sm focus:outline-hidden focus:ring-1 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+                  className="flex-1 px-2 py-1 text-xs border border-input rounded-sm focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-ring disabled:bg-muted disabled:cursor-not-allowed"
                 />
-                <span className="text-xs text-gray-500 min-w-8">
+                <span className="text-xs text-muted-foreground min-w-8">
                   ({section.items.length})
                 </span>
               </div>
@@ -69,7 +69,7 @@ const ZeroShotClassificationConfig = () => {
           <div className="flex gap-2 mt-3">
             <button
               onClick={addCategory}
-              className="flex items-center gap-1 px-3 py-1 text-xs bg-green-500 hover:bg-green-600 text-white rounded-sm transition-colors"
+              className="cursor-pointer flex items-center gap-1 px-3 py-1 text-xs bg-chart-2 hover:bg-chart-2/80 text-white rounded-sm transition-colors"
               title="Add Category"
             >
               <Plus className="w-3 h-3" />
@@ -78,7 +78,7 @@ const ZeroShotClassificationConfig = () => {
             <button
               onClick={removeCategory}
               disabled={sections.length <= 1}
-              className="flex items-center gap-1 px-3 py-1 text-xs bg-red-500 hover:bg-red-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-sm transition-colors"
+              className="cursor-pointer flex items-center gap-1 px-3 py-1 text-xs bg-destructive hover:bg-destructive/80 disabled:bg-muted disabled:cursor-not-allowed text-white rounded-sm transition-colors"
               title="Remove Category"
             >
               <Minus className="w-3 h-3" />
@@ -86,18 +86,18 @@ const ZeroShotClassificationConfig = () => {
             </button>
             <button
               onClick={clearResults}
-              className="flex items-center gap-1 px-3 py-1 text-xs bg-orange-500 hover:bg-orange-600 text-white rounded-sm transition-colors"
+              className="cursor-pointer flex items-center gap-1 px-3 py-1 text-xs bg-chart-5 hover:bg-chart-5 text-white rounded-sm transition-colors"
               title="Clear Results"
             >
-              <Trash2 className="w-3 h-3" />
+              <Eraser className="w-3 h-3" />
               Clear
             </button>
           </div>
         </div>
       </div>
 
-      <div className="pt-2 border-t border-gray-200">
-        <div className="text-xs text-gray-500">
+      <div className="pt-2 border-t border-border">
+        <div className="text-xs text-muted-foreground">
           <p className="mb-1">
             <strong>Threshold:</strong> Items with confidence scores below this
             threshold will be classified as "Other"