From 01d4813c73f303acc32f23e4c35bd57499d090de Mon Sep 17 00:00:00 2001
From: Ritik Khatri <khatri.ritik16@gmail.com>
Date: Sat, 25 Oct 2025 17:00:02 +0530
Subject: [PATCH 1/5] feat: add theme switcher and theme provider to
 speaker-recognition-ui

---
 extras/speaker-recognition/webui/src/App.tsx  | 31 ++++++++++---------
 .../webui/src/components/ThemeSwitcher.tsx    | 12 +++++++
 .../webui/src/components/layout/Layout.tsx    |  3 ++
 .../webui/src/styles/components.css           | 13 ++++++++
 4 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 extras/speaker-recognition/webui/src/components/ThemeSwitcher.tsx

diff --git a/extras/speaker-recognition/webui/src/App.tsx b/extras/speaker-recognition/webui/src/App.tsx
index 9d4650b5..1bfd1f60 100644
--- a/extras/speaker-recognition/webui/src/App.tsx
+++ b/extras/speaker-recognition/webui/src/App.tsx
@@ -9,24 +9,27 @@ import Inference from './pages/Inference'
 import InferLive from './pages/InferLive'
 import InferLiveSimplified from './pages/InferLiveSimplified'
 import './App.css'
+import { ThemeProvider } from './contexts/ThemeContext'
 
 function App() {
   return (
     <UserProvider>
-      <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
-        <Layout>
-          <Routes>
-            <Route path="/" element={<AudioViewer />} />
-            <Route path="/audio" element={<AudioViewer />} />
-            <Route path="/annotation" element={<Annotation />} />
-            <Route path="/enrollment" element={<Enrollment />} />
-            <Route path="/speakers" element={<Speakers />} />
-            <Route path="/inference" element={<Inference />} />
-            <Route path="/infer-live" element={<InferLive />} />
-            <Route path="/infer-live-simple" element={<InferLiveSimplified />} />
-          </Routes>
-        </Layout>
-      </Router>
+      <ThemeProvider>
+        <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+          <Layout>
+            <Routes>
+              <Route path="/" element={<AudioViewer />} />
+              <Route path="/audio" element={<AudioViewer />} />
+              <Route path="/annotation" element={<Annotation />} />
+              <Route path="/enrollment" element={<Enrollment />} />
+              <Route path="/speakers" element={<Speakers />} />
+              <Route path="/inference" element={<Inference />} />
+              <Route path="/infer-live" element={<InferLive />} />
+              <Route path="/infer-live-simple" element={<InferLiveSimplified />} />
+            </Routes>
+          </Layout>
+        </Router>
+      </ThemeProvider>
     </UserProvider>
   )
 }
diff --git a/extras/speaker-recognition/webui/src/components/ThemeSwitcher.tsx b/extras/speaker-recognition/webui/src/components/ThemeSwitcher.tsx
new file mode 100644
index 00000000..a8d42b2d
--- /dev/null
+++ b/extras/speaker-recognition/webui/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,12 @@
+import { useTheme } from "../contexts/ThemeContext";
+import { Moon, Sun } from 'lucide-react';
+
+export const ThemeSwitcher = () => {
+    const { isDark, toggleTheme } = useTheme();
+    return <button
+        onClick={toggleTheme}
+        className="px-3 py-1 rounded-md bg-gray-200 hover:bg-gray-300 transition-colors"
+    >
+        {isDark ? <Moon /> : <Sun />}
+    </button>;
+}
\ No newline at end of file
diff --git a/extras/speaker-recognition/webui/src/components/layout/Layout.tsx b/extras/speaker-recognition/webui/src/components/layout/Layout.tsx
index 29c8d681..4dd01fb5 100644
--- a/extras/speaker-recognition/webui/src/components/layout/Layout.tsx
+++ b/extras/speaker-recognition/webui/src/components/layout/Layout.tsx
@@ -3,6 +3,7 @@ import { Link, useLocation } from 'react-router-dom'
 import { Mic, Music, FileText, Users, Brain, User, Radio, Wifi } from 'lucide-react'
 import UserSelector from '../UserSelector'
 import ConnectionStatus from '../ConnectionStatus'
+import { ThemeSwitcher } from '../ThemeSwitcher'
 
 interface LayoutProps {
   children: React.ReactNode
@@ -35,6 +36,8 @@ export default function Layout({ children }: LayoutProps) {
             </div>
             <div className="flex items-center space-x-4">
               <ConnectionStatus />
+              <div className="border-l border-gray-300 h-6"></div>
+                <ThemeSwitcher />
               <div className="border-l border-gray-300 h-6"></div>
               <UserSelector />
             </div>
diff --git a/extras/speaker-recognition/webui/src/styles/components.css b/extras/speaker-recognition/webui/src/styles/components.css
index 3fbd648b..bb6e5a03 100644
--- a/extras/speaker-recognition/webui/src/styles/components.css
+++ b/extras/speaker-recognition/webui/src/styles/components.css
@@ -2,6 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --bg: #fff;
+  --text: #222;
+}
+[data-theme="dark"] {
+  --bg: #222;
+  --text: #fff;
+}
+body {
+  background: var(--bg);
+  color: var(--text);
+}
+
 @layer components {
   /* Card/Container styles */
   .card {

From 3e0c38571918efbbd58afc8897bd41619e425456 Mon Sep 17 00:00:00 2001
From: Ritik Khatri <khatri.ritik16@gmail.com>
Date: Sat, 25 Oct 2025 22:49:46 +0530
Subject: [PATCH 2/5] feat: speaker recognition web ui theme styling throughout

---
 .../src/components/AudioRecordingControls.tsx |  10 +-
 .../webui/src/components/ConnectionStatus.tsx |   2 +-
 .../webui/src/components/FileUploader.tsx     |  12 +-
 .../src/components/ProcessingModeSelector.tsx |  66 +++---
 .../src/components/SpeakerResultsDisplay.tsx  |   6 +-
 .../webui/src/components/ThemeSwitcher.tsx    |   4 +-
 .../webui/src/components/UserSelector.tsx     |  30 +--
 .../webui/src/components/layout/Layout.tsx    |  20 +-
 .../webui/src/pages/Annotation.tsx            | 114 +++++-----
 .../webui/src/pages/AudioViewer.tsx           |  52 ++---
 .../webui/src/pages/Enrollment.tsx            |  98 ++++-----
 .../webui/src/pages/InferLive.tsx             |  50 ++---
 .../webui/src/pages/InferLiveSimplified.tsx   |  74 +++----
 .../webui/src/pages/Inference.tsx             |  76 +++----
 .../webui/src/pages/Speakers.tsx              | 200 +++++++++---------
 .../webui/src/styles/components.css           |  46 +++-
 .../webui/tailwind.config.js                  |   1 +
 17 files changed, 443 insertions(+), 418 deletions(-)

diff --git a/extras/speaker-recognition/webui/src/components/AudioRecordingControls.tsx b/extras/speaker-recognition/webui/src/components/AudioRecordingControls.tsx
index 2e2e1022..4130f62d 100644
--- a/extras/speaker-recognition/webui/src/components/AudioRecordingControls.tsx
+++ b/extras/speaker-recognition/webui/src/components/AudioRecordingControls.tsx
@@ -129,14 +129,14 @@ export const AudioRecordingControls: React.FC<AudioRecordingControlsProps> = ({
 
   return (
     <div className={`border rounded-lg p-4 ${className}`}>
-      <h4 className="font-medium mb-3">🎤 Record Audio</h4>
+      <h4 className="mb-3 heading-sm">🎤 Record Audio</h4>
       
       {/* Recording Status */}
       <div className="text-center space-y-4">
         {/* Status Indicator */}
         <div className={`flex items-center justify-center space-x-2 font-medium ${getStatusColor()}`}>
           {getStatusIcon()}
-          <span>{getStatusText()}</span>
+          <span className='text-primary'>{getStatusText()}</span>
         </div>
 
         {/* Recording Controls */}
@@ -171,7 +171,7 @@ export const AudioRecordingControls: React.FC<AudioRecordingControlsProps> = ({
         </div>
 
         {/* Browser Compatibility Info */}
-        <div className="text-sm text-gray-500 space-y-1">
+        <div className="text-sm text-primary space-y-1">
           <p>Record audio for speaker identification</p>
           <p className="text-xs">
             {location.protocol !== 'https:' && location.hostname !== 'localhost' 
@@ -200,11 +200,11 @@ export const AudioRecordingControls: React.FC<AudioRecordingControlsProps> = ({
             
             <div className="grid grid-cols-2 gap-4 text-sm">
               <div className="text-center">
-                <div className="text-gray-500">Duration</div>
+                <div className="text-primary">Duration</div>
                 <div className="font-medium">{formatDuration(processedAudio.buffer.duration * 1000)}</div>
               </div>
               <div className="text-center">
-                <div className="text-gray-500">Sample Rate</div>
+                <div className="text-primary">Sample Rate</div>
                 <div className="font-medium">{(processedAudio.buffer.sampleRate / 1000).toFixed(1)} kHz</div>
               </div>
             </div>
diff --git a/extras/speaker-recognition/webui/src/components/ConnectionStatus.tsx b/extras/speaker-recognition/webui/src/components/ConnectionStatus.tsx
index 7960e664..8242f5dc 100644
--- a/extras/speaker-recognition/webui/src/components/ConnectionStatus.tsx
+++ b/extras/speaker-recognition/webui/src/components/ConnectionStatus.tsx
@@ -102,7 +102,7 @@ export default function ConnectionStatus() {
       onClick={() => checkBackendConnection()}
     >
       <Circle className={`h-3 w-3 ${getStatusColor()} ${status.status === 'connected' ? 'fill-current' : ''}`} />
-      <span className="text-gray-600">{getStatusText()}</span>
+      <span className="text-gray-500 dark:text-gray-400">{getStatusText()}</span>
     </div>
   )
 }
diff --git a/extras/speaker-recognition/webui/src/components/FileUploader.tsx b/extras/speaker-recognition/webui/src/components/FileUploader.tsx
index 26299ba0..f236c147 100644
--- a/extras/speaker-recognition/webui/src/components/FileUploader.tsx
+++ b/extras/speaker-recognition/webui/src/components/FileUploader.tsx
@@ -127,14 +127,14 @@ export default function FileUploader({
           </div>
           
           <div>
-            <p className={`text-lg font-medium ${disabled ? 'text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}>
+            <p className={`text-lg font-medium ${disabled ? 'text-primary-disabled' : 'text-primary'}`}>
               {isDragOver ? 'Drop files here' : (title || 'Upload Audio Files')}
             </p>
-            <p className={`text-sm ${disabled ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'}`}>
+            <p className={`text-sm ${disabled ? 'text-muted-disabled' : 'text-muted'}`}>
               Drag and drop or click to select files
             </p>
             {accept.includes('audio') && (
-              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+              <p className="text-xs text-primary-disabled mt-1">
                 Supported: WAV, FLAC, MP3, M4A, OGG
               </p>
             )}
@@ -149,7 +149,7 @@ export default function FileUploader({
       {/* Selected Files List */}
       {selectedFiles.length > 0 && (
         <div className="mt-4 space-y-2">
-          <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">Selected Files:</h4>
+          <h4 className="text-sm font-medium text-primary">Selected Files:</h4>
           <div className="space-y-2">
             {selectedFiles.map((file, index) => (
               <div
@@ -159,8 +159,8 @@ export default function FileUploader({
                 <div className="flex items-center space-x-3">
                   <FileAudio className="h-5 w-5 text-blue-500" />
                   <div>
-                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{file.name}</p>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">{formatFileSize(file.size)}</p>
+                    <p className="text-sm font-medium text-primary">{file.name}</p>
+                    <p className="text-xs text-muted">{formatFileSize(file.size)}</p>
                   </div>
                 </div>
                 <button
diff --git a/extras/speaker-recognition/webui/src/components/ProcessingModeSelector.tsx b/extras/speaker-recognition/webui/src/components/ProcessingModeSelector.tsx
index df1ff021..0c884061 100644
--- a/extras/speaker-recognition/webui/src/components/ProcessingModeSelector.tsx
+++ b/extras/speaker-recognition/webui/src/components/ProcessingModeSelector.tsx
@@ -111,7 +111,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
       <div className={`space-y-3 ${className}`}>
         {/* Mode Selection Dropdown */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          <label className="input-label mb-1">
             Processing Mode
           </label>
           <select
@@ -152,7 +152,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
         {showSettings && (
           <>
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <label className="input-label mb-1">
                 Confidence Threshold: {confidenceThreshold.toFixed(2)}
               </label>
               <input
@@ -165,7 +165,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                 className="w-full"
                 disabled={isProcessing}
               />
-              <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+              <div className="flex justify-between text-xs text-muted mt-1">
                 <span>Less Strict</span>
                 <span>More Strict</span>
               </div>
@@ -173,7 +173,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
 
             {/* Min Speakers */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <label className="input-label mb-1">
                 Min Speakers: {minSpeakers}
               </label>
               <input
@@ -193,7 +193,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                 className="w-full"
                 disabled={isProcessing}
               />
-              <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+              <div className="flex justify-between text-xs text-muted mt-1">
                 <span>1</span>
                 <span>8</span>
               </div>
@@ -201,7 +201,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
 
             {/* Max Speakers */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <label className="input-label mb-1">
                 Max Speakers: {maxSpeakers}
               </label>
               <input
@@ -221,7 +221,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                 className="w-full"
                 disabled={isProcessing}
               />
-              <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+              <div className="flex justify-between text-xs text-muted mt-1">
                 <span>1</span>
                 <span>8</span>
               </div>
@@ -230,7 +230,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
             {/* Collar Parameter */}
             {onCollarChange && (
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                <label className="input-label mb-1">
                   Segment Collar: {collar.toFixed(1)}s
                 </label>
                 <input
@@ -243,11 +243,11 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                   className="w-full"
                   disabled={isProcessing}
                 />
-                <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <div className="flex justify-between text-xs text-muted mt-1">
                   <span>0s</span>
                   <span>5s</span>
                 </div>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <p className="text-xs text-muted mt-1">
                   Merges segments separated by gaps shorter than this value
                 </p>
               </div>
@@ -256,7 +256,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
             {/* Min Duration Off Parameter */}
             {onMinDurationOffChange && (
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                <label className="input-label mb-1">
                   Min Silence Duration: {minDurationOff.toFixed(1)}s
                 </label>
                 <input
@@ -269,11 +269,11 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                   className="w-full"
                   disabled={isProcessing}
                 />
-                <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <div className="flex justify-between text-xs text-muted mt-1">
                   <span>0s</span>
                   <span>3s</span>
                 </div>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <p className="text-xs text-muted mt-1">
                   Minimum silence before treating as segment boundary
                 </p>
               </div>
@@ -298,15 +298,15 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
     <div className={`space-y-6 ${className}`}>
       {/* Settings Panel */}
       {showSettings && (
-        <div className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+        <div className="card p-4">
           <div className="flex items-center space-x-2 mb-3">
             <Settings className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-            <h4 className="font-medium text-gray-900 dark:text-gray-100">Processing Settings</h4>
+            <h4 className="font-medium text-primary">Processing Settings</h4>
           </div>
           
           <div className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 mb-1">
+              <label className="input-label dark:text-gray-300 mb-1">
                 Confidence Threshold: {confidenceThreshold.toFixed(2)}
               </label>
               <input
@@ -319,7 +319,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                 className="w-full"
                 disabled={isProcessing}
               />
-              <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+              <div className="flex justify-between text-xs text-muted mt-1">
                 <span>Less Strict</span>
                 <span>More Strict</span>
               </div>
@@ -327,7 +327,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
 
             {/* Min Speakers */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <label className="input-label mb-1">
                 Min Speakers: {minSpeakers}
               </label>
               <input
@@ -347,7 +347,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                 className="w-full"
                 disabled={isProcessing}
               />
-              <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+              <div className="flex justify-between text-xs text-muted mt-1">
                 <span>1</span>
                 <span>8</span>
               </div>
@@ -355,7 +355,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
 
             {/* Max Speakers */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <label className="input-label mb-1">
                 Max Speakers: {maxSpeakers}
               </label>
               <input
@@ -375,7 +375,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                 className="w-full"
                 disabled={isProcessing}
               />
-              <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+              <div className="flex justify-between text-xs text-muted mt-1">
                 <span>1</span>
                 <span>8</span>
               </div>
@@ -384,7 +384,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
             {/* Collar Parameter */}
             {onCollarChange && (
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 dark:text-gray-300 mb-1">
+                <label className="input-label mb-1">
                   Segment Collar: {collar.toFixed(1)}s
                 </label>
                 <input
@@ -397,11 +397,11 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                   className="w-full"
                   disabled={isProcessing}
                 />
-                <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <div className="flex justify-between text-xs text-muted mt-1">
                   <span>0s</span>
                   <span>5s</span>
                 </div>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <p className="text-xs text-muted mt-1">
                   Merges segments separated by gaps shorter than this value
                 </p>
               </div>
@@ -410,7 +410,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
             {/* Min Duration Off Parameter */}
             {onMinDurationOffChange && (
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                <label className="input-label mb-1">
                   Min Silence Duration: {minDurationOff.toFixed(1)}s
                 </label>
                 <input
@@ -423,11 +423,11 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                   className="w-full"
                   disabled={isProcessing}
                 />
-                <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <div className="flex justify-between text-xs text-muted mt-1">
                   <span>0s</span>
                   <span>3s</span>
                 </div>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <p className="text-xs text-muted mt-1">
                   Minimum silence before treating as segment boundary
                 </p>
               </div>
@@ -455,8 +455,8 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
               <div className="flex items-start space-x-3">
                 <span className="text-2xl">{config.icon}</span>
                 <div className="flex-1">
-                  <h5 className="font-medium text-gray-900 dark:text-gray-100">{config.name}</h5>
-                  <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">{config.description}</p>
+                  <h5 className="heading-sm">{config.name}</h5>
+                  <p className="text-sm text-secondary mt-1">{config.description}</p>
                   
                   {/* Requirements */}
                   {config.requirements && (
@@ -471,7 +471,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
                   <div className="mt-2">
                     <div className="flex flex-wrap gap-1">
                       {config.features.slice(0, 2).map((feature, index) => (
-                        <span key={index} className="text-xs text-gray-500 dark:text-gray-400">
+                        <span key={index} className="text-xs text-muted">
                           • {feature}
                         </span>
                       ))}
@@ -495,8 +495,8 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
           <div className="flex items-start space-x-3">
             <span className="text-2xl">🔄</span>
             <div className="flex-1">
-              <h5 className="font-medium text-gray-900 dark:text-gray-100">Hybrid: Deepgram Transcription + Internal Diarization</h5>
-              <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">Best of both: High-quality transcription with accurate speaker segmentation</p>
+              <h5 className="heading-sm">Hybrid: Deepgram Transcription + Internal Diarization</h5>
+              <p className="text-sm text-secondary mt-1">Best of both: High-quality transcription with accurate speaker segmentation</p>
               
               <div className="mt-2">
                 <span className="inline-flex items-center px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800">
@@ -507,7 +507,7 @@ export const ProcessingModeSelector: React.FC<ProcessingModeSelectorProps> = ({
               <div className="mt-2">
                 <div className="flex flex-wrap gap-1">
                   {PROCESSING_MODES[2].features.map((feature, index) => (
-                    <span key={index} className="text-xs text-gray-500 dark:text-gray-400">
+                    <span key={index} className="text-xs text-muted">
                       • {feature}
                     </span>
                   ))}
diff --git a/extras/speaker-recognition/webui/src/components/SpeakerResultsDisplay.tsx b/extras/speaker-recognition/webui/src/components/SpeakerResultsDisplay.tsx
index 556dec03..bf5236c2 100644
--- a/extras/speaker-recognition/webui/src/components/SpeakerResultsDisplay.tsx
+++ b/extras/speaker-recognition/webui/src/components/SpeakerResultsDisplay.tsx
@@ -262,11 +262,11 @@ export const SpeakerResultsDisplay: React.FC<SpeakerResultsDisplayProps> = ({
   if (displaySegments.length === 0) {
     return (
       <div className={`text-center py-8 ${className}`}>
-        <Users className="h-12 w-12 text-gray-300 mx-auto mb-2" />
-        <h3 className="text-lg font-medium text-gray-900 mb-2">
+        <Users className="h-12 w-12 text-primary mx-auto mb-2" />
+        <h3 className="heading-sm mb-2">
           {isLiveMode ? 'No Live Transcription Yet' : 'No Results'}
         </h3>
-        <p className="text-gray-500">
+        <p className="text-muted">
           {isLiveMode 
             ? 'Start speaking to see live transcription and speaker identification'
             : 'Process audio to see speaker identification results'}
diff --git a/extras/speaker-recognition/webui/src/components/ThemeSwitcher.tsx b/extras/speaker-recognition/webui/src/components/ThemeSwitcher.tsx
index a8d42b2d..3dfaad39 100644
--- a/extras/speaker-recognition/webui/src/components/ThemeSwitcher.tsx
+++ b/extras/speaker-recognition/webui/src/components/ThemeSwitcher.tsx
@@ -5,8 +5,8 @@ export const ThemeSwitcher = () => {
     const { isDark, toggleTheme } = useTheme();
     return <button
         onClick={toggleTheme}
-        className="px-3 py-1 rounded-md bg-gray-200 hover:bg-gray-300 transition-colors"
+        className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-300"
     >
-        {isDark ? <Moon /> : <Sun />}
+        {isDark ? <Moon className="" /> : <Sun className="" />}
     </button>;
 }
\ No newline at end of file
diff --git a/extras/speaker-recognition/webui/src/components/UserSelector.tsx b/extras/speaker-recognition/webui/src/components/UserSelector.tsx
index ece819bb..52727a9d 100644
--- a/extras/speaker-recognition/webui/src/components/UserSelector.tsx
+++ b/extras/speaker-recognition/webui/src/components/UserSelector.tsx
@@ -37,7 +37,7 @@ export default function UserSelector() {
 
   if (isLoading) {
     return (
-      <div className="flex items-center space-x-2 text-gray-500">
+      <div className="flex items-center space-x-2 text-muted">
         <User className="h-5 w-5" />
         <span>Loading...</span>
       </div>
@@ -49,42 +49,42 @@ export default function UserSelector() {
       {/* Current User Display / Dropdown Trigger */}
       <button
         onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-        className="flex items-center space-x-2 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
+        className="flex items-center space-x-2 px-3 py-2 card-secondary hover-bg rounded-md transition-colors"
       >
-        <User className="h-5 w-5 text-gray-600" />
-        <span className="text-sm font-medium text-gray-900">
+        <User className="h-5 w-5 text-secondary" />
+        <span className="text-sm font-medium text-primary">
           {user ? user.username : 'Select User'}
         </span>
-        <ChevronDown className="h-4 w-4 text-gray-500" />
+        <ChevronDown className="h-4 w-4 text-muted" />
       </button>
 
       {/* Dropdown Menu */}
       {isDropdownOpen && (
-        <div className="absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg border z-50">
+        <div className="absolute right-0 mt-2 w-64 card shadow-lg z-50">
           <div className="py-2">
             {/* Existing Users */}
             {users.length > 0 && (
               <>
-                <div className="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide">
+                <div className="px-3 py-1 text-xs font-medium text-muted uppercase tracking-wide">
                   Select User
                 </div>
                 {users.map((u) => (
                   <button
                     key={u.id}
                     onClick={() => handleSelectUser(u.username)}
-                    className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-100 transition-colors ${
-                      user?.id === u.id ? 'bg-blue-50 text-blue-900' : 'text-gray-700'
+                    className={`w-full text-left px-3 py-2 text-sm transition-colors hover-bg ${
+                      user?.id === u.id ? 'bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100' : 'text-secondary'
                     }`}
                   >
                     <div className="flex items-center justify-between">
                       <span>{u.username}</span>
                       {user?.id === u.id && (
-                        <span className="text-xs text-blue-600">Current</span>
+                        <span className="text-xs text-blue-600 dark:text-blue-300">Current</span>
                       )}
                     </div>
                   </button>
                 ))}
-                <div className="border-t my-2"></div>
+                <div className="border-t my-2 border-gray-200 dark:border-gray-700"></div>
               </>
             )}
 
@@ -92,7 +92,7 @@ export default function UserSelector() {
             {!isCreating ? (
               <button
                 onClick={() => setIsCreating(true)}
-                className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors flex items-center space-x-2"
+                className="w-full text-left px-3 py-2 text-sm transition-colors flex items-center space-x-2 text-secondary hover-bg"
               >
                 <Plus className="h-4 w-4" />
                 <span>Create New User</span>
@@ -105,7 +105,7 @@ export default function UserSelector() {
                     value={newUsername}
                     onChange={(e) => setNewUsername(e.target.value)}
                     placeholder="Username"
-                    className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="input-primary"
                     autoFocus
                     disabled={isSubmitting}
                   />
@@ -113,7 +113,7 @@ export default function UserSelector() {
                     <button
                       type="submit"
                       disabled={!newUsername.trim() || isSubmitting}
-                      className="flex-1 px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                      className="flex-1 px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 disabled:opacity-50 disabled:cursor-not-allowed"
                     >
                       {isSubmitting ? 'Creating...' : 'Create'}
                     </button>
@@ -123,7 +123,7 @@ export default function UserSelector() {
                         setIsCreating(false)
                         setNewUsername('')
                       }}
-                      className="flex-1 px-2 py-1 text-xs bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
+                      className="btn-secondary"
                       disabled={isSubmitting}
                     >
                       Cancel
diff --git a/extras/speaker-recognition/webui/src/components/layout/Layout.tsx b/extras/speaker-recognition/webui/src/components/layout/Layout.tsx
index 4dd01fb5..93eb4578 100644
--- a/extras/speaker-recognition/webui/src/components/layout/Layout.tsx
+++ b/extras/speaker-recognition/webui/src/components/layout/Layout.tsx
@@ -23,22 +23,22 @@ export default function Layout({ children }: LayoutProps) {
   ]
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       {/* Header */}
-      <header className="bg-white shadow-sm border-b border-gray-200">
+      <header className="card shadow-sm border-b">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             <div className="flex items-center space-x-4">
-              <Mic className="h-8 w-8 text-blue-600" />
-              <h1 className="text-xl font-semibold text-gray-900">
+              <Mic className="h-8 w-8 text-blue-600 dark:text-blue-400" />
+              <h1 className="heading-md">
                 Speaker Recognition System
               </h1>
             </div>
             <div className="flex items-center space-x-4">
               <ConnectionStatus />
-              <div className="border-l border-gray-300 h-6"></div>
+              <div className="border-l border-gray-300 h-6 dark:border-gray-600"></div>
                 <ThemeSwitcher />
-              <div className="border-l border-gray-300 h-6"></div>
+              <div className="border-l border-gray-300 h-6 dark:border-gray-600"></div>
               <UserSelector />
             </div>
           </div>
@@ -57,8 +57,8 @@ export default function Layout({ children }: LayoutProps) {
                       to={path}
                       className={`flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                         location.pathname === path
-                          ? 'bg-blue-100 text-blue-900'
-                          : 'text-gray-700 hover:bg-gray-100'
+                          ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100'
+                          : 'input-label hover-bg'
                       }`}
                     >
                       <Icon className="h-5 w-5" />
@@ -80,9 +80,9 @@ export default function Layout({ children }: LayoutProps) {
       </div>
 
       {/* Footer */}
-      <footer className="bg-white border-t border-gray-200 mt-auto">
+      <footer className="card border-t mt-auto">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <div className="text-center text-sm text-gray-500">
+          <div className="text-center text-sm text-muted">
             🎤 Speaker Recognition System v0.1.0 | Built with React and PyTorch
           </div>
         </div>
diff --git a/extras/speaker-recognition/webui/src/pages/Annotation.tsx b/extras/speaker-recognition/webui/src/pages/Annotation.tsx
index fb04c0ca..bb5512cb 100644
--- a/extras/speaker-recognition/webui/src/pages/Annotation.tsx
+++ b/extras/speaker-recognition/webui/src/pages/Annotation.tsx
@@ -764,7 +764,7 @@ export default function Annotation() {
   if (!user) {
     return (
       <div className="text-center py-12">
-        <p className="text-gray-500 dark:text-gray-400">Please select a user to continue.</p>
+        <p className="text-muted">Please select a user to continue.</p>
       </div>
     )
   }
@@ -772,23 +772,23 @@ export default function Annotation() {
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">📝 Annotation Tool</h1>
+        <h1 className="text-2xl font-bold text-primary">📝 Annotation Tool</h1>
         {hasUnsavedChanges && (
-          <div className="flex items-center space-x-2 text-amber-600">
+          <div className="flex items-center space-x-2 text-amber-600 dark:text-amber-400">
             <AlertCircle className="h-5 w-5" />
             <span className="text-sm font-medium">Unsaved changes</span>
           </div>
         )}
       </div>
 
-      <p className="text-gray-600 dark:text-gray-300">
+      <p className="text-secondary">
         Upload audio files and create speaker annotations with timeline visualization.
       </p>
 
       {/* File Upload */}
       <div className="grid md:grid-cols-2 gap-6">
         <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6">
-          <h3 className="text-lg font-medium mb-4">📁 Upload Audio File</h3>
+          <h3 className="text-lg font-medium mb-4 text-primary">📁 Upload Audio File</h3>
           <FileUploader
             onUpload={handleFileUpload}
             accept=".wav,.flac,.mp3,.m4a,.ogg"
@@ -798,8 +798,8 @@ export default function Annotation() {
         </div>
 
         {/* Import JSON */}
-        <div className="border-2 border-dashed border-blue-300 dark:border-blue-600 rounded-lg p-6">
-          <h3 className="text-lg font-medium mb-4">📄 Import Deepgram JSON</h3>
+        <div className="card-2 p-6">
+          <h3 className="text-lg font-medium mb-4 text-primary">📄 Import Deepgram JSON</h3>
           <FileUploader
             onUpload={handleDeepgramUpload}
             accept=".json"
@@ -808,14 +808,14 @@ export default function Annotation() {
             title="Upload Transcript JSON"
           />
           {!audioData && (
-            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Upload audio file first</p>
+            <p className="text-sm text-muted mt-2">Upload audio file first</p>
           )}
         </div>
       </div>
 
       {/* Processing Mode Selector - Full Width Section */}
       <div className="border-2 border-dashed border-green-300 dark:border-green-600 rounded-lg p-6">
-        <h3 className="text-xl font-medium mb-4 text-gray-900 dark:text-gray-100">🎯 Speaker Processing Modes</h3>
+        <h3 className="text-xl font-medium mb-4 text-primary">🎯 Speaker Processing Modes</h3>
         
         {audioData ? (
           <ProcessingModeSelector
@@ -848,7 +848,7 @@ export default function Annotation() {
             compact={true}
           />
         ) : (
-          <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          <div className="text-center py-12 text-muted">
             <p className="text-lg">Upload audio file first to enable processing modes</p>
           </div>
         )}
@@ -856,8 +856,8 @@ export default function Annotation() {
 
       {isLoading && (
         <div className="text-center py-8">
-          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-          <p className="mt-2 text-gray-600">Processing audio file...</p>
+          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 dark:border-blue-400"></div>
+          <p className="mt-2 text-secondary">Processing audio file...</p>
         </div>
       )}
 
@@ -865,8 +865,8 @@ export default function Annotation() {
         <>
           {/* Audio Information */}
           <div className="card-secondary p-4">
-            <h3 className="text-lg font-medium mb-2">🎵 {audioData.file.name}</h3>
-            <div className="grid grid-cols-3 gap-4 text-sm">
+            <h3 className="mb-2 heading-sm">🎵 {audioData.file.name}</h3>
+            <div className="grid grid-cols-3 gap-4 text-sm text-secondary">
               <div>Duration: {formatDuration(audioData.buffer.duration * 1000)}</div>
               <div>Sample Rate: {(audioData.buffer.sampleRate / 1000).toFixed(1)} kHz</div>
               <div>Segments: {segments.length}</div>
@@ -876,10 +876,10 @@ export default function Annotation() {
           {/* Waveform with segments */}
           <div className="space-y-4">
             <div className="flex items-center justify-between">
-              <h3 className="text-lg font-medium">📊 Timeline</h3>
+              <h3 className="heading-sm">📊 Timeline</h3>
               <button
                 onClick={addManualSegment}
-                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+                className="px-4 py-2 btn-2"
               >
                 Add Segment
               </button>
@@ -908,11 +908,11 @@ export default function Annotation() {
 
           {/* Segments List */}
           <div className="space-y-4">
-            <h3 className="text-lg font-medium">🗣️ Speaker Segments</h3>
+            <h3 className="heading-sm">🗣️ Speaker Segments</h3>
             
             {/* Filter Controls */}
             {segments.length > 0 && (
-              <div className="flex flex-wrap items-center gap-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border">
+              <div className="flex flex-wrap items-center gap-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border dark:border-gray-700">
                 {/* Speaker Filter */}
                 <div className="relative speaker-filter-dropdown">
                   <button
@@ -922,7 +922,7 @@ export default function Annotation() {
                     <Filter className="h-4 w-4" />
                     <span className="text-sm">Filter Speakers</span>
                     {selectedSpeakers.size > 0 && (
-                      <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                      <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900 dark:text-blue-200">
                         {selectedSpeakers.size}
                       </span>
                     )}
@@ -957,7 +957,7 @@ export default function Annotation() {
                               className="rounded"
                             />
                             <span className="text-sm">{speaker}</span>
-                            <span className="text-xs text-gray-500">({count})</span>
+                            <span className="text-xs text-muted">({count})</span>
                           </label>
                         ))}
                       </div>
@@ -967,7 +967,7 @@ export default function Annotation() {
                             e.stopPropagation()
                             selectAllSpeakers()
                           }}
-                          className="flex-1 px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded hover:bg-blue-200"
+                          className="flex-1 px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800"
                         >
                           Select All
                         </button>
@@ -976,7 +976,7 @@ export default function Annotation() {
                             e.stopPropagation()
                             clearAllSpeakers()
                           }}
-                          className="flex-1 px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded hover:bg-gray-200"
+                          className="flex-1 px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
                         >
                           Clear All
                         </button>
@@ -1061,7 +1061,7 @@ export default function Annotation() {
                     step="0.1"
                     min={minDuration}
                   />
-                  <span className="text-sm text-gray-500">
+                  <span className="text-sm text-muted">
                     ({filteredSegments.length} segments)
                   </span>
                 </div>
@@ -1070,7 +1070,7 @@ export default function Annotation() {
                 {hasActiveFilters && (
                   <button
                     onClick={clearAllFilters}
-                    className="flex items-center space-x-1 px-2 py-1 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded transition-colors"
+                    className="flex items-center space-x-1 px-2 py-1 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-50 dark:text-blue-400 dark:hover:text-blue-300 dark:hover:bg-blue-900 rounded transition-colors"
                   >
                     <X className="h-3 w-3" />
                     <span>Clear Filters</span>
@@ -1099,20 +1099,20 @@ export default function Annotation() {
 
           {/* Speaker Management */}
           <div className="card-secondary p-4">
-            <h3 className="text-lg font-medium mb-4">👥 Manage Speakers</h3>
+            <h3 className="text-lg font-medium mb-4 dark:text-gray-100">👥 Manage Speakers</h3>
             <div className="flex space-x-2">
               <input
                 type="text"
                 value={newSpeakerName}
                 onChange={(e) => setNewSpeakerName(e.target.value)}
                 placeholder="New speaker name"
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-md"
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-md dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
                 onKeyPress={(e) => e.key === 'Enter' && addSpeaker()}
               />
               <button
                 onClick={addSpeaker}
                 disabled={!newSpeakerName.trim()}
-                className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50"
+                className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 dark:bg-green-700 dark:hover:bg-green-800"
               >
                 Add Speaker
               </button>
@@ -1123,8 +1123,8 @@ export default function Annotation() {
                   key={index}
                   className={`px-3 py-1 rounded-full text-sm ${
                     speaker.id 
-                      ? 'bg-green-100 text-green-800' 
-                      : 'bg-blue-100 text-blue-800'
+                      ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' 
+                      : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
                   }`}
                   title={speaker.id ? 'Enrolled speaker' : 'Temporary label'}
                 >
@@ -1137,7 +1137,7 @@ export default function Annotation() {
           {/* Speaker Segments Summary */}
           {segments.length > 0 && (
             <div className="card-secondary p-4">
-              <h3 className="text-lg font-medium mb-4">📊 Speaker Segments Summary</h3>
+              <h3 className="text-lg font-medium mb-4 dark:text-gray-100">📊 Speaker Segments Summary</h3>
               <div className="space-y-2">
                 {Array.from(new Set(segments.map(s => s.speakerLabel).filter(Boolean))).map(speakerLabel => {
                   const speakerSegments = segments.filter(s => s.speakerLabel === speakerLabel)
@@ -1149,12 +1149,12 @@ export default function Annotation() {
                       <div className="flex items-center space-x-2">
                         <span className={`px-2 py-1 rounded-full text-xs ${
                           speaker?.id 
-                            ? 'bg-green-100 text-green-800' 
-                            : 'bg-blue-100 text-blue-800'
+                            ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' 
+                            : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
                         }`}>
                           {speakerLabel}
                         </span>
-                        <span className="text-sm text-gray-600">
+                        <span className="text-sm text-secondary">
                           {speakerSegments.length} segments • {formatDuration(totalDuration * 1000)}
                         </span>
                       </div>
@@ -1162,7 +1162,7 @@ export default function Annotation() {
                         <button
                           onClick={() => enrollSpeaker(speakerLabel!, speaker?.id)}
                           disabled={enrollingSpeaker === speakerLabel}
-                          className="flex items-center space-x-1 px-3 py-1 text-sm bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
+                          className="flex items-center space-x-1 px-3 py-1 text-sm bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 dark:bg-green-700 dark:hover:bg-green-800"
                         >
                           <UserPlus className="h-3 w-3" />
                           <span>
@@ -1175,7 +1175,7 @@ export default function Annotation() {
                         </button>
                         <button
                           onClick={() => exportSpeakerSegments(speakerLabel!)}
-                          className="flex items-center space-x-1 px-2 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
+                          className="flex items-center space-x-1 px-2 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
                         >
                           <Download className="h-3 w-3" />
                           <span>Export</span>
@@ -1212,14 +1212,14 @@ export default function Annotation() {
           </div>
 
           {/* Save and Export Actions */}
-          <div className="flex justify-end space-x-3 pt-6 border-t">
+          <div className="flex justify-end space-x-3 pt-6 border-t dark:border-gray-700">
             {deepgramResponse && (
               <button
                 onClick={() => setShowJsonOutput(!showJsonOutput)}
                 className={`flex items-center space-x-2 px-4 py-2 rounded-md ${
                   showJsonOutput 
-                    ? 'bg-blue-600 text-white hover:bg-blue-700' 
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800' 
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600'
                 }`}
               >
                 <span>📄</span>
@@ -1229,7 +1229,7 @@ export default function Annotation() {
             <button
               onClick={saveAnnotations}
               disabled={!hasUnsavedChanges || segments.length === 0}
-              className="flex items-center space-x-2 px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="flex items-center space-x-2 px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-green-700 dark:hover:bg-green-800"
             >
               <Save className="h-4 w-4" />
               <span>Save Annotations</span>
@@ -1237,7 +1237,7 @@ export default function Annotation() {
             <button
               onClick={exportAnnotations}
               disabled={segments.length === 0}
-              className="flex items-center space-x-2 px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="flex items-center space-x-2 px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-blue-700 dark:hover:bg-blue-800"
             >
               <Download className="h-4 w-4" />
               <span>Export JSON</span>
@@ -1251,7 +1251,7 @@ export default function Annotation() {
                 <h4 className="font-medium text-primary">🔍 Debug Output</h4>
                 <button
                   onClick={() => setShowJsonOutput(!showJsonOutput)}
-                  className="flex items-center space-x-2 px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
+                  className="flex items-center space-x-2 px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
                 >
                   <span>{showJsonOutput ? 'Hide' : 'Show'} JSON</span>
                 </button>
@@ -1321,9 +1321,9 @@ function SegmentEditor({
 
   const getLabelIcon = (label: string) => {
     switch (label) {
-      case 'CORRECT': return <CheckCircle className="h-4 w-4 text-green-500" />
-      case 'INCORRECT': return <XCircle className="h-4 w-4 text-red-500" />
-      default: return <AlertCircle className="h-4 w-4 text-yellow-500" />
+      case 'CORRECT': return <CheckCircle className="h-4 w-4 text-green-500 dark:text-green-400" />
+      case 'INCORRECT': return <XCircle className="h-4 w-4 text-red-500 dark:text-red-400" />
+      default: return <AlertCircle className="h-4 w-4 text-yellow-500 dark:text-yellow-400" />
     }
   }
 
@@ -1348,7 +1348,7 @@ function SegmentEditor({
     <div
       className={`border rounded-lg p-4 cursor-pointer transition-colors ${
         isSelected 
-          ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' 
+          ? 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-900' 
           : getLabelColor(segment.label)
       }`}
       onClick={onSelect}
@@ -1422,7 +1422,7 @@ function SegmentEditor({
             </div>
             
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Label</label>
+              <label className="input-label mb-1">Label</label>
               <select
                 value={segment.label}
                 onChange={(e) => onUpdate({ label: e.target.value as any })}
@@ -1436,30 +1436,30 @@ function SegmentEditor({
           </div>
 
           <div>
-            <label className="block text-sm font-medium mb-1">Transcription</label>
+            <label className="block text-sm font-medium mb-1 dark:text-gray-300">Transcription</label>
             <textarea
               value={segment.transcription || ''}
               onChange={(e) => onUpdate({ transcription: e.target.value })}
               placeholder="Enter transcription..."
-              className="w-full px-2 py-1 border border-gray-300 rounded text-sm"
+              className="w-full px-2 py-1 border border-gray-300 rounded text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
               rows={2}
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium mb-1">Notes</label>
+            <label className="block text-sm font-medium mb-1 text-secondary">Notes</label>
             <input
               type="text"
               value={segment.notes || ''}
               onChange={(e) => onUpdate({ notes: e.target.value })}
               placeholder="Optional notes..."
-              className="w-full px-2 py-1 border border-gray-300 rounded text-sm"
+              className="w-full px-2 py-1 border border-gray-300 rounded text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
             />
           </div>
 
           <div className="grid grid-cols-3 gap-3">
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Start (s)</label>
+              <label className="input-label mb-1">Start (s)</label>
               <input
                 type="number"
                 step="0.1"
@@ -1476,7 +1476,7 @@ function SegmentEditor({
             </div>
             
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">End (s)</label>
+              <label className="input-label mb-1">End (s)</label>
               <input
                 type="number"
                 step="0.1"
@@ -1493,7 +1493,7 @@ function SegmentEditor({
             </div>
             
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <label className="input-label mb-1">
                 Confidence {segment.confidence && `(${getConfidenceLabel(segment.confidence)})`}
               </label>
               <input
@@ -1506,11 +1506,11 @@ function SegmentEditor({
                 className={`w-full px-2 py-1 border rounded text-sm ${
                   segment.confidence 
                     ? segment.confidence >= 0.7 
-                      ? 'border-green-300 bg-green-50' 
+                      ? 'border-green-300 bg-green-50 dark:border-green-700 dark:bg-green-900' 
                       : segment.confidence >= 0.4 
-                        ? 'border-yellow-300 bg-yellow-50'
-                        : 'border-red-300 bg-red-50'
-                    : 'border-gray-300'
+                        ? 'border-yellow-300 bg-yellow-50 dark:border-yellow-700 dark:bg-yellow-900'
+                        : 'border-red-300 bg-red-50 dark:border-red-700 dark:bg-red-900'
+                    : 'border-gray-300 dark:border-gray-600'
                 }`}
               />
             </div>
diff --git a/extras/speaker-recognition/webui/src/pages/AudioViewer.tsx b/extras/speaker-recognition/webui/src/pages/AudioViewer.tsx
index d763a9b0..9f1aef64 100644
--- a/extras/speaker-recognition/webui/src/pages/AudioViewer.tsx
+++ b/extras/speaker-recognition/webui/src/pages/AudioViewer.tsx
@@ -182,7 +182,7 @@ export default function AudioViewer() {
   if (!user) {
     return (
       <div className="text-center py-12">
-        <p className="text-gray-500 dark:text-gray-400">Please select a user to continue.</p>
+        <p className="text-muted">Please select a user to continue.</p>
       </div>
     )
   }
@@ -190,19 +190,19 @@ export default function AudioViewer() {
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">🎵 Audio Viewer</h1>
+        <h1 className="heading-lg">🎵 Audio Viewer</h1>
         {audioData && (
           <div className="flex space-x-2">
             <button
               onClick={() => togglePlayback()}
-              className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+              className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
             >
               {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
               <span>{isPlaying ? 'Stop' : 'Play All'}</span>
             </button>
             <button
               onClick={exportFullAudio}
-              className="flex items-center space-x-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700"
+              className="flex items-center space-x-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800"
             >
               <Download className="h-4 w-4" />
               <span>Export</span>
@@ -211,12 +211,12 @@ export default function AudioViewer() {
         )}
       </div>
 
-      <p className="text-gray-600 dark:text-gray-300">
+      <p className="text-secondary">
         Upload and explore audio files with interactive visualization and segment selection.
       </p>
 
       {/* File Upload */}
-      <div className="border-2 border-dashed border-gray-300 rounded-lg p-6">
+      <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 dark:border-gray-600">
         <FileUploader
           onUpload={handleFileUpload}
           accept=".wav,.flac,.mp3,.m4a,.ogg"
@@ -225,8 +225,8 @@ export default function AudioViewer() {
         />
         {isLoading && (
           <div className="text-center mt-4">
-            <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-            <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">Processing audio file...</p>
+            <div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 dark:border-blue-400"></div>
+            <p className="mt-2 text-sm text-secondary">Processing audio file...</p>
           </div>
         )}
       </div>
@@ -235,27 +235,27 @@ export default function AudioViewer() {
         <>
           {/* Audio Information */}
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-            <div className="bg-gray-50 rounded-lg p-4">
-              <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Duration</div>
-              <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            <div className="card-secondary p-4">
+              <div className="text-sm font-medium text-muted">Duration</div>
+              <div className="heading-lg">
                 {formatDuration(audioData.buffer.duration)}
               </div>
             </div>
-            <div className="bg-gray-50 rounded-lg p-4">
-              <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Sample Rate</div>
-              <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            <div className="card-secondary p-4">
+              <div className="text-sm font-medium text-muted">Sample Rate</div>
+              <div className="heading-lg">
                 {(audioData.buffer.sampleRate / 1000).toFixed(1)} kHz
               </div>
             </div>
-            <div className="bg-gray-50 rounded-lg p-4">
-              <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Channels</div>
-              <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            <div className="card-secondary p-4">
+              <div className="text-sm font-medium text-muted">Channels</div>
+              <div className="heading-lg">
                 {audioData.buffer.numberOfChannels}
               </div>
             </div>
-            <div className="bg-gray-50 rounded-lg p-4">
-              <div className="text-sm font-medium text-gray-500 dark:text-gray-400">SNR</div>
-              <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            <div className="card-secondary p-4">
+              <div className="text-sm font-medium text-muted">SNR</div>
+              <div className="heading-lg">
                 {audioData.snr.toFixed(1)} dB
               </div>
             </div>
@@ -264,15 +264,15 @@ export default function AudioViewer() {
           {/* Waveform Visualization */}
           <div className="space-y-4">
             <div className="flex items-center justify-between">
-              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Waveform</h3>
+              <h3 className="heading-sm">Waveform</h3>
               <label className="flex items-center space-x-2">
                 <input
                   type="checkbox"
                   checked={showSpectrogram}
                   onChange={(e) => setShowSpectrogram(e.target.checked)}
-                  className="rounded border-gray-300"
+                  className="rounded border-gray-300 dark:border-gray-600"
                 />
-                <span className="text-sm text-gray-700 dark:text-gray-300">Show Spectrogram</span>
+                <span className="text-sm input-label">Show Spectrogram</span>
               </label>
             </div>
             
@@ -287,9 +287,9 @@ export default function AudioViewer() {
           </div>
 
           {/* Click Instructions */}
-          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-            <h4 className="font-medium text-blue-800 mb-2">Interactive Playback</h4>
-            <p className="text-sm text-blue-700">
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 dark:bg-blue-900 dark:border-blue-800">
+            <h4 className="font-medium text-blue-800 dark:text-blue-200 mb-2">Interactive Playback</h4>
+            <p className="text-sm text-blue-700 dark:text-blue-300">
               Click anywhere on the waveform to play from that position. Click the "Play All" button to play from the beginning.
             </p>
           </div>
diff --git a/extras/speaker-recognition/webui/src/pages/Enrollment.tsx b/extras/speaker-recognition/webui/src/pages/Enrollment.tsx
index df732c55..7fac6080 100644
--- a/extras/speaker-recognition/webui/src/pages/Enrollment.tsx
+++ b/extras/speaker-recognition/webui/src/pages/Enrollment.tsx
@@ -457,10 +457,10 @@ export default function Enrollment() {
 
   const getQualityColor = useCallback((quality: string) => {
     switch (quality) {
-      case 'excellent': return 'text-green-600 bg-green-100'
-      case 'good': return 'text-blue-600 bg-blue-100'
-      case 'fair': return 'text-yellow-600 bg-yellow-100'
-      default: return 'text-red-600 bg-red-100'
+      case 'excellent': return 'text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-200'
+      case 'good': return 'text-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-200'
+      case 'fair': return 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-200'
+      default: return 'text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-200'
     }
   }, [])
 
@@ -477,7 +477,7 @@ export default function Enrollment() {
   if (!user) {
     return (
       <div className="text-center py-12">
-        <p className="text-gray-500 dark:text-gray-400">Please select a user to continue.</p>
+        <p className="text-muted">Please select a user to continue.</p>
       </div>
     )
   }
@@ -485,7 +485,7 @@ export default function Enrollment() {
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">🎙️ Speaker Enrollment</h1>
+        <h1 className="heading-lg">🎙️ Speaker Enrollment</h1>
         {!currentSession && (
           <button
             onClick={() => {
@@ -494,35 +494,35 @@ export default function Enrollment() {
                 createNewSession(name.trim())
               }
             }}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
           >
             New Enrollment
           </button>
         )}
       </div>
 
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
-        <p className="text-blue-800 text-sm">
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4 dark:bg-blue-900 dark:border-blue-800">
+        <p className="text-blue-800 text-sm dark:text-blue-200">
           <span className="font-medium">💾 Audio Storage:</span> All enrollment audio files are automatically saved for future reference and reprocessing.
         </p>
       </div>
       
-      <p className="text-gray-600 dark:text-gray-300">
+      <p className="text-secondary">
         Enroll new speakers by uploading audio files or recording directly in your browser.
       </p>
 
       {/* Current Session */}
       {currentSession && (
-        <div className="bg-white border rounded-lg p-6">
+        <div className="card p-6">
           <div className="flex items-center justify-between mb-6">
             <div>
-              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">{currentSession.speakerName}</h2>
+              <h2 className="heading-md">{currentSession.speakerName}</h2>
               <div className="flex items-center space-x-4 mt-2">
                 <span className={`inline-flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium ${getQualityColor(currentSession.quality)}`}>
                   {getQualityIcon(currentSession.quality)}
                   <span>{currentSession.quality.charAt(0).toUpperCase() + currentSession.quality.slice(1)}</span>
                 </span>
-                <span className="text-sm text-gray-500 dark:text-gray-400">
+                <span className="text-sm text-muted">
                   {currentSession.audioFiles.length} samples • {formatDuration(currentSession.totalDuration)}
                 </span>
               </div>
@@ -530,14 +530,14 @@ export default function Enrollment() {
             <div className="flex space-x-2">
               <button
                 onClick={() => setCurrentSession(null)}
-                className="px-3 py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100"
+                className="px-3 py-1 text-secondary hover:text-primary"
               >
                 Cancel
               </button>
               <button
                 onClick={submitEnrollment}
                 disabled={isSubmitting || currentSession.audioFiles.length === 0}
-                className="flex items-center space-x-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50"
+                className="flex items-center space-x-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 dark:bg-green-700 dark:hover:bg-green-800"
               >
                 <Save className="h-4 w-4" />
                 <span>{isSubmitting ? 'Submitting...' : 'Submit Enrollment'}</span>
@@ -547,33 +547,33 @@ export default function Enrollment() {
 
           {/* Recording Section */}
           <div className="grid md:grid-cols-2 gap-6 mb-6">
-            <div className="border rounded-lg p-4">
-              <h3 className="text-lg font-medium mb-4">🎤 Record Audio</h3>
+            <div className="card p-4">
+              <h3 className="heading-sm mb-4">🎤 Record Audio</h3>
               <div className="text-center space-y-4">
                 {!isRecording ? (
                   <button
                     onClick={startRecording}
-                    className="flex items-center space-x-2 px-6 py-3 bg-red-600 text-white rounded-md hover:bg-red-700 mx-auto"
+                    className="flex items-center space-x-2 px-6 py-3 bg-red-600 text-white rounded-md hover:bg-red-700 mx-auto dark:bg-red-700 dark:hover:bg-red-800"
                   >
                     <Mic className="h-5 w-5" />
                     <span>Start Recording</span>
                   </button>
                 ) : (
                   <div className="space-y-3">
-                    <div className="flex items-center justify-center space-x-2 text-red-600">
+                    <div className="flex items-center justify-center space-x-2 text-red-600 dark:text-red-400">
                       <div className="w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
                       <span className="font-medium">Recording... {formatDuration(recordingTime)}</span>
                     </div>
                     <button
                       onClick={stopRecording}
-                      className="flex items-center space-x-2 px-6 py-3 bg-gray-600 text-white rounded-md hover:bg-gray-700 mx-auto"
+                      className="flex items-center space-x-2 px-6 py-3 bg-gray-600 text-white rounded-md hover:bg-gray-700 mx-auto dark:bg-gray-700 dark:hover:bg-gray-800"
                     >
                       <MicOff className="h-5 w-5" />
                       <span>Stop Recording</span>
                     </button>
                   </div>
                 )}
-                <div className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
+                <div className="text-sm text-muted space-y-1">
                   <p>Speak clearly for 10-30 seconds</p>
                   <p className="text-xs">
                     {location.protocol !== 'https:' && location.hostname !== 'localhost' 
@@ -585,8 +585,8 @@ export default function Enrollment() {
             </div>
 
             {/* File Upload Section */}
-            <div className="border rounded-lg p-4">
-              <h3 className="text-lg font-medium mb-4">📁 Upload Audio</h3>
+            <div className="card p-4">
+              <h3 className="heading-sm mb-4">📁 Upload Audio</h3>
               <FileUploader
                 onUpload={handleFileUpload}
                 accept=".wav"
@@ -599,8 +599,8 @@ export default function Enrollment() {
           {currentSession.audioFiles.length > 0 && (
             <div className="space-y-4">
               <div className="flex items-center justify-between">
-                <h3 className="text-lg font-medium">Audio Samples</h3>
-                <span className="text-sm text-green-600 bg-green-100 px-2 py-1 rounded-full">
+                <h3 className="heading-sm">Audio Samples</h3>
+                <span className="text-sm text-green-600 bg-green-100 px-2 py-1 rounded-full dark:bg-green-900 dark:text-green-200">
                   💾 Files will be saved during enrollment
                 </span>
               </div>
@@ -608,20 +608,20 @@ export default function Enrollment() {
                 {currentSession.audioFiles.map((audio) => (
                   <div
                     key={audio.id}
-                    className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
+                    className="flex items-center justify-between p-4 card-secondary rounded-lg"
                   >
                     <div className="flex items-center space-x-4">
                       <div>
-                        <p className="font-medium text-gray-900 dark:text-gray-100">{audio.name}</p>
-                        <div className="flex items-center space-x-3 text-sm text-gray-500 dark:text-gray-400">
+                        <p className="font-medium text-primary">{audio.name}</p>
+                        <div className="flex items-center space-x-3 text-sm text-muted">
                           <span>{formatDuration(audio.duration)}</span>
                           <span>SNR: {audio.snr.toFixed(1)} dB</span>
                           <span className={`inline-flex items-center space-x-1 px-2 py-1 rounded-full text-xs ${getQualityColor(audio.quality)}`}>
                             {getQualityIcon(audio.quality)}
                             <span>{audio.quality}</span>
                           </span>
-                          <span className="text-blue-600">({audio.source})</span>
-                          <span className="text-green-600">• will be saved</span>
+                          <span className="text-blue-600 dark:text-blue-400">({audio.source})</span>
+                          <span className="text-green-600 dark:text-green-400">• will be saved</span>
                         </div>
                       </div>
                     </div>
@@ -630,15 +630,15 @@ export default function Enrollment() {
                         onClick={() => playingAudioId === audio.id ? stopAudio() : playAudio(audio)}
                         className={`p-2 rounded ${
                           playingAudioId === audio.id
-                            ? 'bg-red-100 text-red-700 hover:bg-red-200'
-                            : 'bg-blue-100 text-blue-700 hover:bg-blue-200'
+                            ? 'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900 dark:text-red-200 dark:hover:bg-red-800'
+                            : 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800'
                         }`}
                       >
                         {playingAudioId === audio.id ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                       </button>
                       <button
                         onClick={() => removeAudio(audio.id)}
-                        className="p-2 bg-red-100 text-red-700 rounded hover:bg-red-200"
+                        className="p-2 bg-red-100 text-red-700 rounded hover:bg-red-200 dark:bg-red-900 dark:text-red-200 dark:hover:bg-red-800"
                       >
                         <Trash2 className="h-4 w-4" />
                       </button>
@@ -651,9 +651,9 @@ export default function Enrollment() {
 
 
           {/* Quality Guidelines */}
-          <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-            <h4 className="font-medium text-blue-800 mb-2">Quality Guidelines</h4>
-            <ul className="text-sm text-blue-700 space-y-1">
+          <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg dark:bg-blue-900 dark:border-blue-800">
+            <h4 className="font-medium text-blue-800 dark:text-blue-200 mb-2">Quality Guidelines</h4>
+            <ul className="text-sm text-blue-700 dark:text-blue-300 space-y-1">
               <li>• Excellent: 60+ seconds, 5+ samples, 30+ dB SNR</li>
               <li>• Good: 30+ seconds, 3+ samples, 20+ dB SNR</li>
               <li>• Fair: 15+ seconds, 2+ samples, 15+ dB SNR</li>
@@ -667,16 +667,16 @@ export default function Enrollment() {
       {/* Previous Sessions */}
       {sessions.length > 0 && !currentSession && (
         <div className="space-y-4">
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Previous Enrollments</h2>
+          <h2 className="heading-md">Previous Enrollments</h2>
           <div className="space-y-3">
             {sessions.map((session) => (
               <div
                 key={session.id}
-                className="flex items-center justify-between p-4 bg-gray-50 rounded-lg"
+                className="flex items-center justify-between p-4 card-secondary rounded-lg"
               >
                 <div>
-                  <p className="font-medium text-gray-900 dark:text-gray-100">{session.speakerName}</p>
-                  <div className="flex items-center space-x-3 text-sm text-gray-500 dark:text-gray-400">
+                  <p className="font-medium text-primary">{session.speakerName}</p>
+                  <div className="flex items-center space-x-3 text-sm text-muted">
                     <span>{session.audioFiles.length} samples</span>
                     <span>{formatDuration(session.totalDuration)}</span>
                     <span className={`inline-flex items-center space-x-1 px-2 py-1 rounded-full text-xs ${getQualityColor(session.quality)}`}>
@@ -684,10 +684,10 @@ export default function Enrollment() {
                       <span>{session.quality}</span>
                     </span>
                     <span className={`px-2 py-1 rounded-full text-xs ${
-                      session.status === 'completed' ? 'bg-green-100 text-green-800' :
-                      session.status === 'processing' ? 'bg-blue-100 text-blue-800' :
-                      session.status === 'failed' ? 'bg-red-100 text-red-800' :
-                      'bg-gray-100 text-gray-800'
+                      session.status === 'completed' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
+                      session.status === 'processing' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
+                      session.status === 'failed' ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' :
+                      'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
                     }`}>
                       {session.status}
                     </span>
@@ -696,7 +696,7 @@ export default function Enrollment() {
                 <button
                   onClick={() => setCurrentSession(session)}
                   disabled={session.status === 'processing'}
-                  className="px-3 py-1 text-blue-600 hover:text-blue-800 disabled:opacity-50"
+                  className="px-3 py-1 text-blue-600 hover:text-blue-800 disabled:opacity-50 dark:text-blue-400 dark:hover:text-blue-300"
                 >
                   {session.status === 'draft' ? 'Continue' : 'View'}
                 </button>
@@ -709,9 +709,9 @@ export default function Enrollment() {
       {/* Empty State */}
       {sessions.length === 0 && !currentSession && (
         <div className="text-center py-12">
-          <Mic className="h-16 w-16 text-gray-300 mx-auto mb-4" />
-          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">No Enrollments Yet</h3>
-          <p className="text-gray-500 dark:text-gray-400 mb-4">Start by creating a new speaker enrollment session.</p>
+          <Mic className="h-16 w-16 text-gray-300 dark:text-gray-500 mx-auto mb-4" />
+          <h3 className="heading-sm mb-2">No Enrollments Yet</h3>
+          <p className="text-muted mb-4">Start by creating a new speaker enrollment session.</p>
           <button
             onClick={() => {
               const name = prompt('Enter speaker name:')
@@ -719,7 +719,7 @@ export default function Enrollment() {
                 createNewSession(name.trim())
               }
             }}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
           >
             Create First Enrollment
           </button>
diff --git a/extras/speaker-recognition/webui/src/pages/InferLive.tsx b/extras/speaker-recognition/webui/src/pages/InferLive.tsx
index ebb73c26..b6185cd1 100644
--- a/extras/speaker-recognition/webui/src/pages/InferLive.tsx
+++ b/extras/speaker-recognition/webui/src/pages/InferLive.tsx
@@ -1,6 +1,6 @@
 /**
  * InferLive Page - Refactored to use shared components
- * Real-time transcription and speaker identification with dramatically reduced complexity
+ * Real-time transcription and speaker identification with dramatically reduced code complexity
  */
 
 import React, { useEffect, useRef } from 'react'
@@ -160,9 +160,9 @@ export default function InferLive() {
   if (!user) {
     return (
       <div className="text-center py-12">
-        <Users className="h-16 w-16 text-gray-300 mx-auto mb-4" />
-        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">User Required</h3>
-        <p className="text-gray-500">Please select a user to access live inference.</p>
+        <Users className="h-16 w-16 text-muted mx-auto mb-4" />
+        <h3 className="heading-sm mb-2">User Required</h3>
+        <p className="text-muted">Please select a user to access live inference.</p>
       </div>
     )
   }
@@ -172,9 +172,9 @@ export default function InferLive() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">🎙️ Live Inference (Complex)</h1>
-          <p className="text-gray-600">Real-time transcription and speaker identification</p>
-          <p className="text-sm text-gray-500">Direct Deepgram streaming with client-side processing and multiple service coordination</p>
+          <h1 className="heading-lg">🎙️ Live Inference (Complex)</h1>
+          <p className="text-secondary">Real-time transcription and speaker identification</p>
+          <p className="text-sm text-muted">Direct Deepgram streaming with client-side processing and multiple service coordination</p>
         </div>
       </div>
 
@@ -199,20 +199,20 @@ export default function InferLive() {
 
       {/* Session Stats */}
       {deepgram.isStreaming && (
-        <div className="bg-white border rounded-lg p-4">
+        <div className="card p-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-6">
               <div className="flex items-center space-x-2">
-                <Clock className="h-4 w-4 text-gray-500" />
-                <span className="text-sm text-gray-900 dark:text-gray-100">{formatDuration(deepgram.stats.sessionDuration)}</span>
+                <Clock className="h-4 w-4 text-muted" />
+                <span className="text-sm text-primary">{formatDuration(deepgram.stats.sessionDuration)}</span>
               </div>
               <div className="flex items-center space-x-2">
-                <Volume2 className="h-4 w-4 text-gray-500" />
-                <span className="text-sm text-gray-900 dark:text-gray-100">{deepgram.stats.totalWords} words</span>
+                <Volume2 className="h-4 w-4 text-muted" />
+                <span className="text-sm text-primary">{deepgram.stats.totalWords} words</span>
               </div>
               <div className="flex items-center space-x-2">
-                <Users className="h-4 w-4 text-gray-500" />
-                <span className="text-sm text-gray-900 dark:text-gray-100">{deepgram.stats.identifiedSpeakers.size} speakers</span>
+                <Users className="h-4 w-4 text-muted" />
+                <span className="text-sm text-primary">{deepgram.stats.identifiedSpeakers.size} speakers</span>
               </div>
             </div>
           </div>
@@ -221,12 +221,12 @@ export default function InferLive() {
 
       {/* Connection Error */}
       {deepgram.connectionStatus === 'error' && (
-        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 dark:bg-red-900 dark:border-red-800">
           <div className="flex items-center space-x-2">
-            <div className="text-red-600">❌</div>
+            <div className="text-red-600 dark:text-red-400">❌</div>
             <div>
-              <h4 className="text-red-800 font-medium">Connection Error</h4>
-              <p className="text-red-600 text-sm">Failed to connect to Deepgram. Please check your API key and internet connection.</p>
+              <h4 className="text-red-800 dark:text-red-200 font-medium">Connection Error</h4>
+              <p className="text-sm text-red-600 dark:text-red-400">Failed to connect to Deepgram. Please check your API key and internet connection.</p>
             </div>
           </div>
         </div>
@@ -234,15 +234,15 @@ export default function InferLive() {
 
       {/* Recording Status */}
       {deepgram.isStreaming && (
-        <div className="bg-white border rounded-lg p-4">
+        <div className="card p-4">
           <div className="flex items-center space-x-4">
             <div className="flex items-center space-x-2">
               <div className="w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
-              <span className="text-sm font-medium text-gray-900 dark:text-gray-100">Recording</span>
+              <span className="text-sm font-medium text-primary">Recording</span>
             </div>
             <div className="flex items-center space-x-2">
-              <Mic className="h-4 w-4 text-gray-500" />
-              <span className="text-sm text-gray-600">
+              <Mic className="h-4 w-4 text-muted" />
+              <span className="text-sm text-secondary">
                 Status: {deepgram.connectionStatus === 'connected' ? '✅ Connected' : deepgram.connectionStatus}
               </span>
             </div>
@@ -257,8 +257,8 @@ export default function InferLive() {
           disabled={!deepgram.apiKey || deepgram.connectionStatus === 'connecting'}
           className={`flex items-center space-x-2 px-8 py-4 rounded-lg font-medium text-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${
             deepgram.isStreaming
-              ? 'bg-red-600 text-white hover:bg-red-700'
-              : 'bg-blue-600 text-white hover:bg-blue-700'
+              ? 'bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800'
+              : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800'
           }`}
         >
           <Mic className="h-6 w-6" />
@@ -287,7 +287,7 @@ export default function InferLive() {
         <div className="flex justify-center">
           <button
             onClick={deepgram.clearTranscripts}
-            className="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+            className="px-4 py-2 border rounded-md transition-colors text-secondary hover-bg"
           >
             Clear Transcripts
           </button>
diff --git a/extras/speaker-recognition/webui/src/pages/InferLiveSimplified.tsx b/extras/speaker-recognition/webui/src/pages/InferLiveSimplified.tsx
index fe0197e3..62bcc277 100644
--- a/extras/speaker-recognition/webui/src/pages/InferLiveSimplified.tsx
+++ b/extras/speaker-recognition/webui/src/pages/InferLiveSimplified.tsx
@@ -204,13 +204,13 @@ export default function InferLiveSimplified() {
   const getConnectionStatusIcon = () => {
     switch (speakerWS.connectionStatus) {
       case 'connected':
-        return <Wifi className="h-4 w-4 text-green-600" />
+        return <Wifi className="h-4 w-4 text-green-600 dark:text-green-400" />
       case 'connecting':
-        return <Wifi className="h-4 w-4 text-yellow-600 animate-pulse" />
+        return <Wifi className="h-4 w-4 text-yellow-600 dark:text-yellow-400 animate-pulse" />
       case 'error':
-        return <WifiOff className="h-4 w-4 text-red-600" />
+        return <WifiOff className="h-4 w-4 text-red-600 dark:text-red-400" />
       default:
-        return <WifiOff className="h-4 w-4 text-gray-400" />
+        return <WifiOff className="h-4 w-4 text-gray-400 dark:text-gray-500" />
     }
   }
 
@@ -230,9 +230,9 @@ export default function InferLiveSimplified() {
   if (!user) {
     return (
       <div className="text-center py-12">
-        <Users className="h-16 w-16 text-gray-300 mx-auto mb-4" />
-        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">User Required</h3>
-        <p className="text-gray-500">Please select a user to access live inference.</p>
+        <Users className="h-16 w-16 text-muted mx-auto mb-4" />
+        <h3 className="heading-sm mb-2">User Required</h3>
+        <p className="text-muted">Please select a user to access live inference.</p>
       </div>
     )
   }
@@ -242,9 +242,9 @@ export default function InferLiveSimplified() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">🎙️ Live Inference</h1>
-          <p className="text-gray-600">Real-time transcription with server-side processing</p>
-          <p className="text-sm text-gray-500">Server handles audio processing, VAD, and speaker identification</p>
+          <h1 className="heading-lg">🎙️ Live Inference</h1>
+          <p className="text-secondary">Real-time transcription with server-side processing</p>
+          <p className="text-sm text-muted">Server handles audio processing, VAD, and speaker identification</p>
         </div>
       </div>
 
@@ -264,19 +264,19 @@ export default function InferLiveSimplified() {
       />
 
       {/* Connection Status */}
-      <div className="bg-white border rounded-lg p-4">
+      <div className="card p-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-4">
             <div className="flex items-center space-x-2">
               {getConnectionStatusIcon()}
-              <span className="text-sm text-gray-900 dark:text-gray-100">
+              <span className="text-sm text-primary">
                 Status: {getConnectionStatusText()}
               </span>
             </div>
             {speakerWS.isStreaming && (
               <div className="flex items-center space-x-2">
                 <div className="w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
-                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">Recording</span>
+                <span className="text-sm font-medium text-primary">Recording</span>
               </div>
             )}
           </div>
@@ -285,31 +285,31 @@ export default function InferLiveSimplified() {
 
       {/* Session Stats */}
       {speakerWS.isStreaming && (
-        <div className="bg-white border rounded-lg p-4">
+        <div className="card p-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-6">
               <div className="flex items-center space-x-2">
-                <Clock className="h-4 w-4 text-gray-500" />
-                <span className="text-sm text-gray-900 dark:text-gray-100">
+                <Clock className="h-4 w-4 text-muted" />
+                <span className="text-sm text-primary">
                   {formatDuration(speakerWS.stats.sessionDuration)}
                 </span>
               </div>
               <div className="flex items-center space-x-2">
-                <Volume2 className="h-4 w-4 text-gray-500" />
-                <span className="text-sm text-gray-900 dark:text-gray-100">
+                <Volume2 className="h-4 w-4 text-muted" />
+                <span className="text-sm text-primary">
                   {speakerWS.stats.totalSegments} segments
                 </span>
               </div>
               <div className="flex items-center space-x-2">
-                <Users className="h-4 w-4 text-gray-500" />
-                <span className="text-sm text-gray-900 dark:text-gray-100">
+                <Users className="h-4 w-4 text-muted" />
+                <span className="text-sm text-primary">
                   {speakerWS.stats.identifiedSpeakers.size} speakers
                 </span>
               </div>
               {speakerWS.stats.averageConfidence > 0 && (
                 <div className="flex items-center space-x-2">
-                  <span className="text-sm text-gray-500">Avg Confidence:</span>
-                  <span className="text-sm text-gray-900 dark:text-gray-100">
+                  <span className="text-sm text-muted">Avg Confidence:</span>
+                  <span className="text-sm text-primary">
                     {(speakerWS.stats.averageConfidence * 100).toFixed(1)}%
                   </span>
                 </div>
@@ -326,8 +326,8 @@ export default function InferLiveSimplified() {
           disabled={!deepgramSession.deepgramApiKey || speakerWS.connectionStatus === 'connecting'}
           className={`flex items-center space-x-2 px-8 py-4 rounded-lg font-medium text-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${
             speakerWS.isStreaming
-              ? 'bg-red-600 text-white hover:bg-red-700'
-              : 'bg-blue-600 text-white hover:bg-blue-700'
+              ? 'bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800'
+              : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800'
           }`}
         >
           <Mic className="h-6 w-6" />
@@ -341,48 +341,48 @@ export default function InferLiveSimplified() {
       </div>
 
       {/* Live Results */}
-      <div className="bg-white border rounded-lg">
-        <div className="p-4 border-b">
-          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Live Transcription</h3>
-          <p className="text-sm text-gray-500">Utterance boundaries detected using server-side VAD processing</p>
+      <div className="card">
+        <div className="p-4 border-b dark:border-gray-700">
+          <h3 className="heading-sm">Live Transcription</h3>
+          <p className="text-sm text-muted">Utterance boundaries detected using server-side VAD processing</p>
         </div>
         <div className="p-4 space-y-4 max-h-96 overflow-y-auto">
           {speakerWS.transcriptSegments.length === 0 ? (
-            <div className="text-center py-8 text-gray-500">
+            <div className="text-center py-8 text-muted">
               {speakerWS.isStreaming ? 'Listening for speech...' : 'Start streaming to see transcription results'}
             </div>
           ) : (
             speakerWS.transcriptSegments.map((segment) => (
               <div key={segment.id} className={`border-l-4 pl-4 ${
-                segment.status === 'interim' ? 'border-yellow-400 opacity-70' : 'border-blue-500'
+                segment.status === 'interim' ? 'border-yellow-400 opacity-70 dark:border-yellow-500' : 'border-blue-500 dark:border-blue-400'
               }`}>
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
-                    <div className="flex items-center space-x-2 text-sm text-gray-500 mb-1">
+                    <div className="text-sm text-muted mb-1">
                       <span>
                         {segment.speaker_name || 'Unknown Speaker'}
                       </span>
                       {segment.status === 'interim' && (
-                        <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full animate-pulse">
+                        <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full dark:bg-yellow-900 dark:text-yellow-200 animate-pulse">
                           Speaking...
                         </span>
                       )}
                       {segment.status === 'identified' && segment.confidence > 0 && (
-                        <span className="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full">
+                        <span className="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full dark:bg-green-900 dark:text-green-200">
                           {(segment.confidence * 100).toFixed(1)}%
                         </span>
                       )}
                       {segment.duration > 0 && (
-                        <span className="text-xs text-gray-400">
+                        <span className="text-xs text-muted">
                           {segment.duration.toFixed(1)}s
                         </span>
                       )}
                     </div>
-                    <p className={`${segment.status === 'interim' ? 'text-gray-600 italic' : 'text-gray-900'} dark:text-gray-100`}>
+                    <p className={`${segment.status === 'interim' ? 'text-secondary italic' : 'text-primary'}`}>
                       {segment.text}
                     </p>
                   </div>
-                  <div className="text-xs text-gray-400 ml-4">
+                  <div className="text-xs text-muted ml-4">
                     {new Date(segment.timestamp).toLocaleTimeString()}
                   </div>
                 </div>
@@ -397,7 +397,7 @@ export default function InferLiveSimplified() {
         <div className="flex justify-center">
           <button
             onClick={speakerWS.clearTranscripts}
-            className="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+            className="px-4 py-2 border rounded-md transition-colors text-secondary hover-bg"
           >
             Clear Transcripts
           </button>
diff --git a/extras/speaker-recognition/webui/src/pages/Inference.tsx b/extras/speaker-recognition/webui/src/pages/Inference.tsx
index dd9b9f0c..1b17f2e5 100644
--- a/extras/speaker-recognition/webui/src/pages/Inference.tsx
+++ b/extras/speaker-recognition/webui/src/pages/Inference.tsx
@@ -86,9 +86,9 @@ export default function Inference() {
   if (!user) {
     return (
       <div className="text-center py-12">
-        <Users className="h-16 w-16 text-gray-300 mx-auto mb-4" />
-        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">User Required</h3>
-        <p className="text-gray-500 dark:text-gray-400">Please select a user to access inference features.</p>
+        <Users className="h-16 w-16 text-muted mx-auto mb-4" />
+        <h3 className="heading-sm mb-2">User Required</h3>
+        <p className="text-muted">Please select a user to access inference features.</p>
       </div>
     )
   }
@@ -97,8 +97,8 @@ export default function Inference() {
     <div className="max-w-4xl mx-auto space-y-8">
       {/* Header */}
       <div>
-        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">🎯 Speaker Inference</h1>
-        <p className="text-gray-600 mt-2">
+        <h1 className="heading-lg">🎯 Speaker Inference</h1>
+        <p className="text-secondary mt-2">
           Upload audio files or record live audio for speaker identification and transcription
         </p>
       </div>
@@ -106,10 +106,10 @@ export default function Inference() {
       {/* Audio Input Section */}
       <div className="grid md:grid-cols-2 gap-6">
         {/* File Upload */}
-        <div className="border rounded-lg p-6">
+        <div className="card p-6">
           <div className="flex items-center space-x-2 mb-4">
-            <Upload className="h-5 w-5 text-gray-600" />
-            <h4 className="font-medium text-gray-900 dark:text-gray-100">Upload Audio File</h4>
+            <Upload className="h-5 w-5 text-secondary" />
+            <h4 className="font-medium text-primary">Upload Audio File</h4>
           </div>
           <FileUploader
             onUpload={handleFileUpload}
@@ -117,7 +117,7 @@ export default function Inference() {
             multiple={false}
             disabled={speakerProcessing.isProcessing || recording.recordingState.isRecording}
           />
-          <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
+          <p className="text-sm text-muted mt-2">
             WAV files recommended for best compatibility
           </p>
         </div>
@@ -132,25 +132,25 @@ export default function Inference() {
 
       {/* Audio Visualization */}
       {audioForProcessing && (
-        <div className="bg-white border rounded-lg p-6">
-          <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-4">🎵 {audioForProcessing.filename}</h4>
+        <div className="card p-6">
+          <h4 className="font-medium text-primary mb-4">🎵 {audioForProcessing.filename}</h4>
           
           {/* Audio Info */}
           <div className="grid grid-cols-3 gap-4 text-sm mb-4">
             <div>
-              <span className="text-gray-500 dark:text-gray-400">Duration:</span>
+              <span className="text-muted">Duration:</span>
               <span className="ml-2 font-medium">
                 {(audioForProcessing.buffer.duration / 60).toFixed(1)} min
               </span>
             </div>
             <div>
-              <span className="text-gray-500 dark:text-gray-400">Sample Rate:</span>
+              <span className="text-muted">Sample Rate:</span>
               <span className="ml-2 font-medium">
                 {(audioForProcessing.buffer.sampleRate / 1000).toFixed(1)} kHz
               </span>
             </div>
             <div>
-              <span className="text-gray-500 dark:text-gray-400">Channels:</span>
+              <span className="text-muted">Channels:</span>
               <span className="ml-2 font-medium">{audioForProcessing.buffer.channels}</span>
             </div>
           </div>
@@ -164,14 +164,14 @@ export default function Inference() {
 
           {/* Audio Quality Info */}
           {audioForProcessing.quality && (
-            <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
+            <div className="mt-4 p-3 card-secondary rounded-lg">
               <div className="flex items-center justify-between text-sm">
-                <span className="text-gray-600">Audio Quality:</span>
+                <span className="text-secondary">Audio Quality:</span>
                 <span className={`font-medium ${
-                  audioForProcessing.quality.level === 'excellent' ? 'text-green-600' :
-                  audioForProcessing.quality.level === 'good' ? 'text-blue-600' :
-                  audioForProcessing.quality.level === 'fair' ? 'text-yellow-600' :
-                  'text-red-600'
+                  audioForProcessing.quality.level === 'excellent' ? 'text-green-600 dark:text-green-400' :
+                  audioForProcessing.quality.level === 'good' ? 'text-blue-600 dark:text-blue-400' :
+                  audioForProcessing.quality.level === 'fair' ? 'text-yellow-600 dark:text-yellow-400' :
+                  'text-red-600 dark:text-red-400'
                 }`}>
                   {audioForProcessing.quality.level.charAt(0).toUpperCase() + audioForProcessing.quality.level.slice(1)}
                   ({audioForProcessing.quality.snr.toFixed(1)} dB SNR)
@@ -206,10 +206,10 @@ export default function Inference() {
 
       {/* Processing Progress */}
       {speakerProcessing.processingProgress && (
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 dark:bg-blue-900 dark:border-blue-800">
           <div className="flex items-center space-x-2">
             <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
-            <span className="text-blue-800 font-medium">{speakerProcessing.processingProgress}</span>
+            <span className="text-blue-800 dark:text-blue-200 font-medium">{speakerProcessing.processingProgress}</span>
           </div>
         </div>
       )}
@@ -219,7 +219,7 @@ export default function Inference() {
         {/* Results History */}
         {speakerProcessing.results.length > 0 && (
           <div className="space-y-4">
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">📊 Processing History</h2>
+            <h2 className="heading-md">📊 Processing History</h2>
             
             <div className="space-y-3">
               {speakerProcessing.results.map((result) => (
@@ -227,25 +227,25 @@ export default function Inference() {
                   key={result.id}
                   className={`border rounded-lg p-4 cursor-pointer transition-colors ${
                     speakerProcessing.selectedResult?.id === result.id 
-                      ? 'border-blue-500 bg-blue-50' 
-                      : 'border-gray-200 hover:border-gray-300'
+                      ? 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-900' 
+                      : 'border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600'
                   }`}
                   onClick={() => speakerProcessing.selectResult(result)}
                 >
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="font-medium text-gray-900 dark:text-gray-100">{result.filename}</h3>
-                      <div className="flex items-center space-x-4 mt-1 text-sm text-gray-500">
+                      <h3 className="font-medium text-primary">{result.filename}</h3>
+                      <div className="flex items-center space-x-4 mt-1 text-sm text-muted">
                         <span>{(result.duration / 60).toFixed(1)} min</span>
                         <span>{new Date(result.created_at).toLocaleString()}</span>
                         <span className={`px-2 py-1 rounded-full text-xs font-medium ${
-                          result.status === 'completed' ? 'bg-green-100 text-green-800' :
-                          result.status === 'processing' ? 'bg-blue-100 text-blue-800' :
-                          'bg-red-100 text-red-800'
+                          result.status === 'completed' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
+                          result.status === 'processing' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
+                          'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
                         }`}>
                           {result.status}
                         </span>
-                        <span className="px-2 py-1 rounded-full text-xs bg-purple-100 text-purple-800">
+                        <span className="px-2 py-1 rounded-full text-xs bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                           {result.mode}
                         </span>
                       </div>
@@ -254,8 +254,8 @@ export default function Inference() {
                     {result.status === 'completed' && (
                       <div className="flex items-center space-x-4">
                         <div className="text-right text-sm">
-                          <div className="text-gray-900 dark:text-gray-100 font-medium">{result.speakers.length} segments</div>
-                          <div className="text-gray-500">
+                          <div className="text-primary font-medium">{result.speakers.length} segments</div>
+                          <div className="text-muted">
                             {result.confidence_summary.high_confidence} high conf.
                           </div>
                         </div>
@@ -264,7 +264,7 @@ export default function Inference() {
                             e.stopPropagation()
                             speakerProcessing.exportResult(result)
                           }}
-                          className="p-2 text-green-600 hover:text-green-800 border border-green-200 rounded"
+                          className="p-2 text-green-600 hover:text-green-800 border border-green-200 rounded dark:text-green-400 dark:hover:text-green-300 dark:border-green-700"
                           title="Export Results"
                         >
                           <Upload className="h-4 w-4" />
@@ -286,16 +286,16 @@ export default function Inference() {
             showExport={true}
             showStats={true}
             onExport={speakerProcessing.exportResult}
-            className="bg-white border rounded-lg p-6"
+            className="card p-6"
           />
         )}
 
         {/* No results message */}
         {speakerProcessing.results.length === 0 && !speakerProcessing.isProcessing && (
           <div className="text-center py-12">
-            <Users className="h-12 w-12 text-gray-300 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">No Results Yet</h3>
-            <p className="text-gray-500">
+            <Users className="h-12 w-12 text-muted mx-auto mb-4" />
+            <h3 className="heading-sm mb-2">No Results Yet</h3>
+            <p className="text-muted">
               Upload an audio file or record audio to start speaker identification
             </p>
           </div>
diff --git a/extras/speaker-recognition/webui/src/pages/Speakers.tsx b/extras/speaker-recognition/webui/src/pages/Speakers.tsx
index cce46dff..9f468079 100644
--- a/extras/speaker-recognition/webui/src/pages/Speakers.tsx
+++ b/extras/speaker-recognition/webui/src/pages/Speakers.tsx
@@ -253,10 +253,10 @@ export default function Speakers() {
   }, [importFile, importMergeStrategy, user, loadSpeakers])
 
   const getQualityColor = useCallback((quality: number) => {
-    if (quality >= 25) return 'text-green-600 bg-green-100'
-    if (quality >= 20) return 'text-blue-600 bg-blue-100'
-    if (quality >= 15) return 'text-yellow-600 bg-yellow-100'
-    return 'text-red-600 bg-red-100'
+    if (quality >= 25) return 'text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-200'
+    if (quality >= 20) return 'text-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-200'
+    if (quality >= 15) return 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-200'
+    return 'text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-200'
   }, [])
 
   const getQualityLabel = useCallback((quality: number) => {
@@ -268,10 +268,10 @@ export default function Speakers() {
 
   const getStatusColor = useCallback((status: string) => {
     switch (status) {
-      case 'completed': return 'text-green-600 bg-green-100'
-      case 'pending': return 'text-yellow-600 bg-yellow-100'
-      case 'failed': return 'text-red-600 bg-red-100'
-      default: return 'text-gray-600 bg-gray-100'
+      case 'completed': return 'text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-200'
+      case 'pending': return 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-200'
+      case 'failed': return 'text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-200'
+      default: return 'text-gray-600 bg-gray-100 dark:bg-gray-700 dark:text-gray-200'
     }
   }, [])
 
@@ -286,7 +286,7 @@ export default function Speakers() {
   if (!user) {
     return (
       <div className="text-center py-12">
-        <p className="text-gray-500 dark:text-gray-400">Please select a user to continue.</p>
+        <p className="text-muted">Please select a user to continue.</p>
       </div>
     )
   }
@@ -294,7 +294,7 @@ export default function Speakers() {
   if (isLoading) {
     return (
       <div className="text-center py-12">
-        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 dark:border-blue-400"></div>
         <p className="mt-2 text-gray-600 dark:text-gray-300">Loading speakers...</p>
       </div>
     )
@@ -303,11 +303,11 @@ export default function Speakers() {
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">👥 Speaker Management</h1>
+        <h1 className="heading-lg">👥 Speaker Management</h1>
         <div className="flex space-x-2">
           <button
             onClick={exportAllSpeakers}
-            className="flex items-center space-x-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700"
+            className="flex items-center space-x-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800"
             title="Export all speakers to JSON"
           >
             <Download className="h-4 w-4" />
@@ -315,7 +315,7 @@ export default function Speakers() {
           </button>
           <label
             htmlFor="import-file"
-            className="flex items-center space-x-2 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 cursor-pointer"
+            className="flex items-center space-x-2 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 cursor-pointer"
             title="Import speakers from JSON"
           >
             <Upload className="h-4 w-4" />
@@ -331,7 +331,7 @@ export default function Speakers() {
           />
           <button
             onClick={loadSpeakers}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
           >
             Refresh
           </button>
@@ -343,14 +343,14 @@ export default function Speakers() {
       </p>
 
       {/* Tab Navigation */}
-      <div className="border-b border-gray-200">
+      <div className="border-b border-gray-200 dark:border-gray-700">
         <nav className="-mb-px flex space-x-8">
           <button
             onClick={() => setActiveTab('speakers')}
             className={`py-2 px-1 border-b-2 font-medium text-sm ${
               activeTab === 'speakers'
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'
+                ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+                : 'border-transparent text-muted hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'
             }`}
           >
             👥 Speakers List
@@ -359,8 +359,8 @@ export default function Speakers() {
             onClick={() => setActiveTab('analysis')}
             className={`py-2 px-1 border-b-2 font-medium text-sm ${
               activeTab === 'analysis'
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'
+                ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+                : 'border-transparent text-muted hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'
             }`}
           >
             📊 Embedding Analysis
@@ -374,27 +374,27 @@ export default function Speakers() {
           {/* Statistics Cards */}
           {stats && (
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-          <div className="bg-white border rounded-lg p-4">
-            <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Speakers</div>
-            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.total_speakers}</div>
+          <div className="p-4 card">
+            <div className="text-sm font-medium text-muted">Total Speakers</div>
+            <div className="heading-lg">{stats.total_speakers}</div>
           </div>
-          <div className="bg-white border rounded-lg p-4">
-            <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Audio Samples</div>
-            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.total_audio_samples}</div>
+          <div className="p-4 card">
+            <div className="text-sm font-medium text-muted">Audio Samples</div>
+            <div className="heading-lg">{stats.total_audio_samples}</div>
           </div>
-          <div className="bg-white border rounded-lg p-4">
-            <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Duration</div>
-            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{formatDuration(stats.total_duration)}</div>
+          <div className="p-4 card">
+            <div className="text-sm font-medium text-muted">Total Duration</div>
+            <div className="heading-lg">{formatDuration(stats.total_duration)}</div>
           </div>
-          <div className="bg-white border rounded-lg p-4">
-            <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Avg Quality</div>
-            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.average_quality.toFixed(1)} dB</div>
+          <div className="p-4 card">
+            <div className="text-sm font-medium text-muted">Avg Quality</div>
+            <div className="heading-lg">{stats.average_quality.toFixed(1)} dB</div>
           </div>
         </div>
       )}
 
       {/* Filters and Search */}
-      <div className="bg-white border rounded-lg p-4">
+      <div className="bg-white border rounded-lg p-4 dark:bg-gray-800 dark:border-gray-700">
         <div className="grid md:grid-cols-4 gap-4">
           <div>
             <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Search</label>
@@ -405,17 +405,17 @@ export default function Speakers() {
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
                 placeholder="Search speakers..."
-                className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md"
+                className="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
               />
             </div>
           </div>
           
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
             <select
               value={statusFilter}
               onChange={(e) => setStatusFilter(e.target.value as any)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
             >
               <option value="all">All Statuses</option>
               <option value="completed">Completed</option>
@@ -425,11 +425,11 @@ export default function Speakers() {
           </div>
           
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sort By</label>
             <select
               value={sortBy}
               onChange={(e) => setSortBy(e.target.value as any)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
             >
               <option value="name">Name</option>
               <option value="created_at">Created Date</option>
@@ -440,11 +440,11 @@ export default function Speakers() {
           </div>
           
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Order</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Order</label>
             <select
               value={sortOrder}
               onChange={(e) => setSortOrder(e.target.value as any)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
             >
               <option value="asc">Ascending</option>
               <option value="desc">Descending</option>
@@ -455,47 +455,47 @@ export default function Speakers() {
 
       {/* Speakers List */}
       {filteredAndSortedSpeakers().length > 0 ? (
-        <div className="bg-white border rounded-lg overflow-hidden">
+        <div className="bg-white border rounded-lg overflow-hidden dark:bg-gray-800 dark:border-gray-700">
           <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
               <thead className="bg-gray-50 dark:bg-gray-700">
                 <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                     Speaker
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                     Status
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                     Audio Count
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                     Duration
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                     Quality
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                     Created
                   </th>
-                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <th className="px-6 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider">
                     Actions
                   </th>
                 </tr>
               </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
+              <tbody className="bg-white divide-y divide-gray-200 dark:divide-gray-700">
                 {filteredAndSortedSpeakers().map((speaker) => (
-                  <tr key={speaker.id} className="hover:bg-gray-50">
+                  <tr key={speaker.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                     <td className="px-6 py-4 whitespace-nowrap">
                       <div className="flex items-center">
                         <div className="flex-shrink-0 h-10 w-10">
-                          <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
-                            <User className="h-5 w-5 text-blue-600" />
+                          <div className="h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
+                            <User className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                           </div>
                         </div>
                         <div className="ml-4">
-                          <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{speaker.name}</div>
-                          <div className="text-sm text-gray-500">ID: {speaker.id}</div>
+                          <div className="text-sm font-medium text-primary">{speaker.name}</div>
+                          <div className="text-sm text-muted">ID: {speaker.id}</div>
                         </div>
                       </div>
                     </td>
@@ -505,10 +505,10 @@ export default function Speakers() {
                         <span>{speaker.enrollment_status}</span>
                       </span>
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-primary">
                       {speaker.audio_sample_count || 0} samples
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-primary">
                       {speaker.total_audio_duration ? formatDuration(speaker.total_audio_duration) : 'N/A'}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
@@ -517,31 +517,31 @@ export default function Speakers() {
                           {speaker.average_quality.toFixed(1)} dB ({getQualityLabel(speaker.average_quality)})
                         </span>
                       ) : (
-                        <span className="text-gray-500 text-xs">N/A</span>
+                        <span className="text-xs text-muted">N/A</span>
                       )}
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                       {speaker.created_at ? new Date(speaker.created_at).toLocaleDateString() : 'N/A'}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <div className="flex justify-end space-x-2">
                         <button
                           onClick={() => setSelectedSpeaker(speaker)}
-                          className="p-1 text-blue-600 hover:text-blue-800"
+                          className="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                           title="View Details"
                         >
                           <Eye className="h-4 w-4" />
                         </button>
                         <button
                           onClick={() => exportSpeakerData(speaker)}
-                          className="p-1 text-green-600 hover:text-green-800"
+                          className="p-1 text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300"
                           title="Export Data"
                         >
                           <Download className="h-4 w-4" />
                         </button>
                         <button
                           onClick={() => setShowDeleteConfirm(speaker.id)}
-                          className="p-1 text-red-600 hover:text-red-800"
+                          className="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
                           title="Delete Speaker"
                         >
                           <Trash2 className="h-4 w-4" />
@@ -556,9 +556,9 @@ export default function Speakers() {
         </div>
       ) : (
         <div className="text-center py-12">
-          <User className="h-16 w-16 text-gray-300 mx-auto mb-4" />
-          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">No Speakers Found</h3>
-          <p className="text-gray-500">
+          <User className="h-16 w-16 text-gray-300 dark:text-gray-500 mx-auto mb-4" />
+          <h3 className="heading-sm mb-2">No Speakers Found</h3>
+          <p className="text-muted">
             {speakers.length === 0 
               ? "No speakers have been enrolled yet." 
               : "No speakers match your current filters."}
@@ -568,14 +568,14 @@ export default function Speakers() {
 
       {/* Speaker Details Modal */}
       {selectedSpeaker && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto">
-            <div className="p-6 border-b">
+        <div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto dark:bg-gray-800">
+            <div className="p-6 border-b dark:border-gray-700">
               <div className="flex items-center justify-between">
-                <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Speaker Details</h2>
+                <h2 className="text-xl font-semibold text-primary">Speaker Details</h2>
                 <button
                   onClick={() => setSelectedSpeaker(null)}
-                  className="text-gray-400 hover:text-gray-600"
+                  className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
                 >
                   ×
                 </button>
@@ -584,41 +584,41 @@ export default function Speakers() {
             <div className="p-6 space-y-6">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-500">Name</label>
-                  <p className="text-gray-900 dark:text-gray-100">{selectedSpeaker.name}</p>
+                  <label className="block text-sm font-medium text-muted">Name</label>
+                  <p className="text-primary">{selectedSpeaker.name}</p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-500">Status</label>
+                  <label className="block text-sm font-medium text-muted">Status</label>
                   <span className={`inline-flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(selectedSpeaker.enrollment_status)}`}>
                     {getStatusIcon(selectedSpeaker.enrollment_status)}
                     <span>{selectedSpeaker.enrollment_status}</span>
                   </span>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-500">Audio Samples</label>
-                  <p className="text-gray-900 dark:text-gray-100">{selectedSpeaker.audio_sample_count || 0}</p>
+                  <label className="block text-sm font-medium text-muted">Audio Samples</label>
+                  <p className="text-primary">{selectedSpeaker.audio_sample_count || 0}</p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-500">Total Duration</label>
-                  <p className="text-gray-900 dark:text-gray-100">{formatDuration(selectedSpeaker.total_audio_duration || 0)}</p>
+                  <label className="block text-sm font-medium text-muted">Total Duration</label>
+                  <p className="text-primary">{formatDuration(selectedSpeaker.total_audio_duration || 0)}</p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-500">Average Quality</label>
+                  <label className="block text-sm font-medium text-muted">Average Quality</label>
                   <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getQualityColor(selectedSpeaker.average_quality)}`}>
                     {selectedSpeaker.average_quality.toFixed(1)} dB ({getQualityLabel(selectedSpeaker.average_quality)})
                   </span>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-500">Created</label>
-                  <p className="text-gray-900 dark:text-gray-100">{new Date(selectedSpeaker.created_at).toLocaleString()}</p>
+                  <label className="block text-sm font-medium text-muted">Created</label>
+                  <p className="text-primary">{new Date(selectedSpeaker.created_at).toLocaleString()}</p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-500">Last Updated</label>
-                  <p className="text-gray-900 dark:text-gray-100">{new Date(selectedSpeaker.updated_at).toLocaleString()}</p>
+                  <label className="block text-sm font-medium text-muted">Last Updated</label>
+                  <p className="text-primary">{new Date(selectedSpeaker.updated_at).toLocaleString()}</p>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-500">Last Enrollment</label>
-                  <p className="text-gray-900 dark:text-gray-100">{new Date(selectedSpeaker.last_enrollment).toLocaleString()}</p>
+                  <label className="block text-sm font-medium text-muted">Last Enrollment</label>
+                  <p className="text-primary">{new Date(selectedSpeaker.last_enrollment).toLocaleString()}</p>
                 </div>
               </div>
             </div>
@@ -638,23 +638,23 @@ export default function Speakers() {
 
       {/* Delete Confirmation Modal */}
       {showDeleteConfirm && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-lg max-w-md w-full">
+        <div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-lg max-w-md w-full dark:bg-gray-800">
             <div className="p-6">
-              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Delete Speaker</h3>
-              <p className="text-gray-600 mb-6">
+              <h3 className="heading-sm mb-4">Delete Speaker</h3>
+              <p className="text-gray-600 dark:text-gray-300 mb-6">
                 Are you sure you want to delete this speaker? This action cannot be undone and will remove all associated audio data.
               </p>
               <div className="flex justify-end space-x-3">
                 <button
                   onClick={() => setShowDeleteConfirm(null)}
-                  className="px-4 py-2 text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50"
+                  className="px-4 py-2 text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
                 >
                   Cancel
                 </button>
                 <button
                   onClick={() => deleteSpeaker(showDeleteConfirm)}
-                  className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
+                  className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800"
                 >
                   Delete
                 </button>
@@ -666,17 +666,17 @@ export default function Speakers() {
 
       {/* Import Dialog Modal */}
       {showImportDialog && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-lg max-w-lg w-full">
+        <div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-lg max-w-lg w-full dark:bg-gray-800">
             <div className="p-6">
               <div className="flex items-center justify-between mb-4">
-                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Import Speakers</h3>
+                <h3 className="heading-sm">Import Speakers</h3>
                 <button
                   onClick={() => {
                     setShowImportDialog(false)
                     setImportFile(null)
                   }}
-                  className="text-gray-400 hover:text-gray-600"
+                  className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
                 >
                   ×
                 </button>
@@ -684,19 +684,19 @@ export default function Speakers() {
               
               {importFile && (
                 <div className="mb-6">
-                  <div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
-                    <FileJson className="h-8 w-8 text-blue-600" />
+                  <div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
+                    <FileJson className="h-8 w-8 text-blue-600 dark:text-blue-400" />
                     <div>
-                      <p className="font-medium text-gray-900 dark:text-gray-100">{importFile.name}</p>
-                      <p className="text-sm text-gray-500">{(importFile.size / 1024).toFixed(1)} KB</p>
+                      <p className="font-medium text-primary">{importFile.name}</p>
+                      <p className="text-sm text-muted">{(importFile.size / 1024).toFixed(1)} KB</p>
                     </div>
                   </div>
                 </div>
               )}
 
               <div className="mb-6">
-                <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">Conflict Resolution</h4>
-                <p className="text-sm text-gray-600 mb-3">
+                <h4 className="text-sm font-medium text-primary mb-3">Conflict Resolution</h4>
+                <p className="text-sm text-secondary mb-3">
                   How should existing speakers be handled?
                 </p>
                 <div className="space-y-2">
@@ -733,7 +733,7 @@ export default function Speakers() {
                     setShowImportDialog(false)
                     setImportFile(null)
                   }}
-                  className="px-4 py-2 text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50"
+                  className="px-4 py-2 text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
                   disabled={importLoading}
                 >
                   Cancel
diff --git a/extras/speaker-recognition/webui/src/styles/components.css b/extras/speaker-recognition/webui/src/styles/components.css
index bb6e5a03..ab7155d7 100644
--- a/extras/speaker-recognition/webui/src/styles/components.css
+++ b/extras/speaker-recognition/webui/src/styles/components.css
@@ -18,51 +18,75 @@ body {
 @layer components {
   /* Card/Container styles */
   .card {
-    @apply bg-white border border-gray-200 rounded-lg;
+    @apply bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700;
+  }
+
+  .card-2 {
+    @apply border-2 border-dashed border-blue-300 dark:border-blue-600 rounded-lg ;
   }
   
   .card-secondary {
-    @apply bg-gray-50 rounded-lg;
+    @apply bg-gray-50 rounded-lg dark:bg-gray-700;
   }
   
   /* Text styles */
   .text-primary {
-    @apply text-gray-900;
+    @apply text-gray-900 dark:text-gray-100;
+  }
+
+  .text-primary-disabled {
+    @apply text-gray-400 dark:text-gray-500;
   }
   
   .text-secondary {
-    @apply text-gray-600;
+    @apply text-gray-600 dark:text-gray-300;
   }
   
   .text-muted {
-    @apply text-gray-500;
+    @apply text-gray-500 dark:text-gray-400;
+  }
+
+  .text-muted-disabled {
+    @apply text-gray-300 dark:text-gray-600;
   }
   
   /* Heading styles */
   .heading-lg {
-    @apply text-2xl font-bold text-gray-900;
+    @apply text-2xl font-bold text-gray-900 dark:text-gray-100;
   }
   
   .heading-md {
-    @apply text-xl font-semibold text-gray-900;
+    @apply text-xl font-semibold text-gray-900 dark:text-gray-100;
   }
   
   .heading-sm {
-    @apply text-lg font-medium text-gray-900;
+    @apply text-lg font-medium text-gray-900 dark:text-gray-100;
   }
   
   /* Form elements */
   .input-label {
-    @apply block text-sm font-medium text-gray-700;
+    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
+  }
+
+  .input-primary {
+    @apply w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100;
   }
   
   /* Interactive elements */
   .hover-bg {
-    @apply hover:bg-gray-100;
+    @apply hover:bg-gray-100 dark:hover:bg-gray-700;
+  }
+
+  .btn-secondary {
+    @apply flex-1 px-2 py-1 text-xs bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-200 rounded hover:bg-gray-400 dark:hover:bg-gray-800;
+  }
+
+  .btn-2 {
+    @apply  bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800
   }
   
   /* Table headers */
   .table-header {
-    @apply text-xs font-medium text-gray-500 uppercase tracking-wider;
+    @apply text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400;
   }
 }
\ No newline at end of file
diff --git a/extras/speaker-recognition/webui/tailwind.config.js b/extras/speaker-recognition/webui/tailwind.config.js
index 89a305e0..d3208282 100644
--- a/extras/speaker-recognition/webui/tailwind.config.js
+++ b/extras/speaker-recognition/webui/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",

From f5dd96eb20ebfd1d27c6726c4637eb1eff85861f Mon Sep 17 00:00:00 2001
From: Ritik Khatri <khatri.ritik16@gmail.com>
Date: Sun, 26 Oct 2025 01:37:46 +0530
Subject: [PATCH 3/5] fix: Dynamically configure Nginx web UI port in setup for
 speaker recognition

---
 .../speaker-recognition/nginx.conf.template   |  2 +-
 extras/speaker-recognition/setup.sh           | 49 +++++++++++--------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/extras/speaker-recognition/nginx.conf.template b/extras/speaker-recognition/nginx.conf.template
index 91626e23..38a8604a 100644
--- a/extras/speaker-recognition/nginx.conf.template
+++ b/extras/speaker-recognition/nginx.conf.template
@@ -46,7 +46,7 @@ http {
     }
     
     upstream web_ui {
-        server web-ui:5175;
+        server web-ui:WEB_UI_PORT_PLACEHOLDER;
     }
     
     # HTTPS Server
diff --git a/extras/speaker-recognition/setup.sh b/extras/speaker-recognition/setup.sh
index ce633036..b2ef9eff 100755
--- a/extras/speaker-recognition/setup.sh
+++ b/extras/speaker-recognition/setup.sh
@@ -141,6 +141,20 @@ if [ -n "$DEEPGRAM_API_KEY" ]; then
     echo "✅ Deepgram API key configured from command line"
 fi
 
+# Determine WEB_UI_PORT and HTTPS setting
+if [ "$HTTPS_MODE" = "https" ]; then
+    WEB_UI_PORT=5175
+    REACT_UI_HTTPS=true
+else
+    WEB_UI_PORT=5174
+    REACT_UI_HTTPS=false
+fi
+
+# Update .env file
+sed -i "s|REACT_UI_HTTPS=.*|REACT_UI_HTTPS=$REACT_UI_HTTPS|" .env
+sed -i "s|REACT_UI_PORT=.*|REACT_UI_PORT=$WEB_UI_PORT|" .env
+
+# Generate SSL certificates (only for HTTPS mode)
 if [ "$HTTPS_MODE" = "https" ]; then
     # Get SERVER_IP if not already set (from command line)
     if [ -z "$SERVER_IP" ]; then
@@ -152,11 +166,6 @@ if [ "$HTTPS_MODE" = "https" ]; then
         SERVER_IP=${SERVER_IP:-localhost}
     fi
     
-    # Update .env for HTTPS mode
-    sed -i "s|REACT_UI_HTTPS=.*|REACT_UI_HTTPS=true|" .env
-    sed -i "s|REACT_UI_PORT=.*|REACT_UI_PORT=5175|" .env
-    
-    # Generate SSL certificates
     echo ""
     echo "📄 Generating SSL certificates..."
     if [ -f "ssl/generate-ssl.sh" ]; then
@@ -165,16 +174,20 @@ if [ "$HTTPS_MODE" = "https" ]; then
     else
         echo "⚠️  ssl/generate-ssl.sh not found, SSL setup skipped"
     fi
-    
-    # Create nginx.conf from template
-    echo "📄 Creating nginx configuration..."
-    if [ -f "nginx.conf.template" ]; then
-        sed "s/TAILSCALE_IP/$SERVER_IP/g" nginx.conf.template > nginx.conf
-        echo "✅ nginx.conf created for: $SERVER_IP"
-    else
-        echo "⚠️  nginx.conf.template not found, nginx config skipped"
-    fi
-    
+fi
+
+# Create nginx.conf from template
+echo "📄 Creating nginx configuration..."
+if [ -f "nginx.conf.template" ]; then
+    # Use SERVER_IP if set, otherwise default to localhost for nginx.conf generation
+    NGINX_SERVER_IP=${SERVER_IP:-localhost}
+    sed "s/TAILSCALE_IP/$NGINX_SERVER_IP/g" nginx.conf.template | sed "s/WEB_UI_PORT_PLACEHOLDER/$WEB_UI_PORT/g" > nginx.conf
+    echo "✅ nginx.conf created for: $NGINX_SERVER_IP"
+else
+    echo "⚠️  nginx.conf.template not found, nginx config skipped"
+fi
+
+if [ "$HTTPS_MODE" = "https" ]; then
     echo ""
     echo "✅ Speaker Recognition configured (HTTPS mode)!"
     echo "📁 Configuration saved to .env"
@@ -186,16 +199,12 @@ if [ "$HTTPS_MODE" = "https" ]; then
     echo "📱 Service API: https://localhost:8444/api/"
     echo "💡 Accept SSL certificate in browser"
 else
-    # HTTP Configuration
-    sed -i "s|REACT_UI_HTTPS=.*|REACT_UI_HTTPS=false|" .env
-    sed -i "s|REACT_UI_PORT=.*|REACT_UI_PORT=5174|" .env
-    
     echo ""
     echo "✅ Speaker Recognition configured (HTTP mode)!"
     echo "📁 Configuration saved to .env"
     echo ""
     echo "🚀 To start: docker compose up --build -d speaker-service web-ui"
     echo "📱 Service API: http://localhost:8085"
-    echo "📱 Web Interface: http://localhost:5174"
+    echo "📱 Web Interface: http://localhost:$WEB_UI_PORT"
     echo "⚠️  Note: Microphone access may not work over HTTP on remote connections"
 fi
\ No newline at end of file

From f05817f60af7f01e415018366d5bdd5e54e98003 Mon Sep 17 00:00:00 2001
From: Ritik Khatri <khatri.ritik16@gmail.com>
Date: Sun, 26 Oct 2025 01:38:32 +0530
Subject: [PATCH 4/5] fix: null check when getting speaker details

---
 .../speaker-recognition/webui/src/pages/Speakers.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/extras/speaker-recognition/webui/src/pages/Speakers.tsx b/extras/speaker-recognition/webui/src/pages/Speakers.tsx
index 9f468079..6de381e9 100644
--- a/extras/speaker-recognition/webui/src/pages/Speakers.tsx
+++ b/extras/speaker-recognition/webui/src/pages/Speakers.tsx
@@ -602,12 +602,12 @@ export default function Speakers() {
                   <label className="block text-sm font-medium text-muted">Total Duration</label>
                   <p className="text-primary">{formatDuration(selectedSpeaker.total_audio_duration || 0)}</p>
                 </div>
-                <div>
-                  <label className="block text-sm font-medium text-muted">Average Quality</label>
-                  <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getQualityColor(selectedSpeaker.average_quality)}`}>
-                    {selectedSpeaker.average_quality.toFixed(1)} dB ({getQualityLabel(selectedSpeaker.average_quality)})
-                  </span>
-                </div>
+                    <div>
+                      <label className="block text-sm font-medium text-muted">Average Quality</label>
+                      {selectedSpeaker.average_quality ? <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getQualityColor(selectedSpeaker.average_quality)}`}>
+                        {selectedSpeaker.average_quality.toFixed(1)} dB ({getQualityLabel(selectedSpeaker.average_quality)})
+                      </span> : <span className="text-sm text-muted">N/A</span>}
+                    </div>
                 <div>
                   <label className="block text-sm font-medium text-muted">Created</label>
                   <p className="text-primary">{new Date(selectedSpeaker.created_at).toLocaleString()}</p>

From fd521e447dc95281b110ed40486d2e1a0de1e121 Mon Sep 17 00:00:00 2001
From: Ritik Khatri <khatri.ritik16@gmail.com>
Date: Sun, 26 Oct 2025 01:47:44 +0530
Subject: [PATCH 5/5] fix: minor ui change in speaker-recognition

---
 extras/speaker-recognition/webui/src/pages/Speakers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extras/speaker-recognition/webui/src/pages/Speakers.tsx b/extras/speaker-recognition/webui/src/pages/Speakers.tsx
index 6de381e9..506e8862 100644
--- a/extras/speaker-recognition/webui/src/pages/Speakers.tsx
+++ b/extras/speaker-recognition/webui/src/pages/Speakers.tsx
@@ -483,7 +483,7 @@ export default function Speakers() {
                   </th>
                 </tr>
               </thead>
-              <tbody className="bg-white divide-y divide-gray-200 dark:divide-gray-700">
+              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                 {filteredAndSortedSpeakers().map((speaker) => (
                   <tr key={speaker.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                     <td className="px-6 py-4 whitespace-nowrap">