diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1fed015..a9a4977 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -5,6 +5,7 @@ import QueryInput from './components/QueryInput';
 import CouncilMemberCard from './components/CouncilMemberCard';
 import SynthesisPanel from './components/SynthesisPanel';
 import HistoryBrowser from './components/HistoryBrowser';
+import ThemeToggle from './components/ThemeToggle';
 
 export default function App() {
   const {
@@ -83,25 +84,28 @@ export default function App() {
   const councilMembersList = Object.keys(displayResponses);
 
   return (
-    <div className="min-h-screen bg-[#0a0e1a]">
+    <div className="min-h-screen bg-gray-50 dark:bg-[#0a0e1a] transition-colors duration-200">
       {/* Header */}
-      <header className="bg-[#1a2332] shadow-lg border-b border-gray-700">
+      <header className="bg-white dark:bg-[#1a2332] shadow-lg border-b border-gray-200 dark:border-gray-700 transition-colors duration-200">
         <div className="max-w-7xl mx-auto px-4 py-6">
           <div className="flex items-center justify-between">
             <div>
               <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
                 LLM Council
               </h1>
-              <p className="text-sm text-gray-400">
+              <p className="text-sm text-gray-500 dark:text-gray-400">
                 Multi-Model AI Decision Framework
               </p>
             </div>
-            <button
-              onClick={() => setShowHistory(!showHistory)}
-              className="btn-secondary"
-            >
-              {showHistory ? 'Hide History' : 'Show History'}
-            </button>
+            <div className="flex items-center gap-4">
+              <ThemeToggle />
+              <button
+                onClick={() => setShowHistory(!showHistory)}
+                className="btn-secondary"
+              >
+                {showHistory ? 'Hide History' : 'Show History'}
+              </button>
+            </div>
           </div>
         </div>
       </header>
@@ -110,15 +114,15 @@ export default function App() {
       <main className="max-w-7xl mx-auto px-4 py-8">
         {/* Error Display */}
         {error && (
-          <div className="mb-4 p-4 bg-red-900/30 border border-red-700 rounded-lg">
-            <p className="text-red-400">Error: {error}</p>
+          <div className="mb-4 p-4 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-700 rounded-lg">
+            <p className="text-red-700 dark:text-red-400">Error: {error}</p>
           </div>
         )}
 
         {/* Decision ID Display */}
         {displayDecisionId && (
-          <div className="mb-4 p-3 bg-blue-900/30 border border-blue-700 rounded-lg">
-            <p className="text-blue-400 text-sm">
+          <div className="mb-4 p-3 bg-blue-100 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg">
+            <p className="text-blue-700 dark:text-blue-400 text-sm">
               {historicalData ? '📜 Historical ' : ''}Decision ID: <span className="font-mono font-bold">#{displayDecisionId}</span>
               {historicalData && (
                 <button
@@ -158,7 +162,7 @@ export default function App() {
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {/* Council Member Responses - Left Column (2/3) */}
             <div className="lg:col-span-2 space-y-4">
-              <h2 className="text-2xl font-bold text-gray-100">Council Responses</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Council Responses</h2>
               {councilMembersList.map(modelId => (
                 <CouncilMemberCard
                   key={modelId}
@@ -182,14 +186,14 @@ export default function App() {
         {modelsLoading && (
           <div className="text-center py-12">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
-            <p className="mt-4 text-gray-400">Loading models...</p>
+            <p className="mt-4 text-gray-500 dark:text-gray-400">Loading models...</p>
           </div>
         )}
       </main>
 
       {/* Footer */}
-      <footer className="mt-12 py-6 border-t border-gray-700">
-        <div className="max-w-7xl mx-auto px-4 text-center text-sm text-gray-400">
+      <footer className="mt-12 py-6 border-t border-gray-200 dark:border-gray-700 transition-colors duration-200">
+        <div className="max-w-7xl mx-auto px-4 text-center text-sm text-gray-500 dark:text-gray-400">
           <p className="mb-2">Multi-Model AI Decision Framework • LLM Council v1.0.0 • MIT License</p>
           <div className="flex justify-center space-x-4">
             <span>&copy; 2025 Barnaby Jeans</span>
@@ -198,7 +202,7 @@ export default function App() {
               href="https://github.com/bjeans/Multi-AI-Chat"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-blue-400 transition-colors"
+              className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
             >
               GitHub
             </a>
@@ -207,7 +211,7 @@ export default function App() {
               href="https://hub.docker.com/r/bjeans/multi-ai-chat"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-blue-400 transition-colors"
+              className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
             >
               DockerHub
             </a>
diff --git a/frontend/src/components/CouncilMemberCard.jsx b/frontend/src/components/CouncilMemberCard.jsx
index 8a7ffe7..80e8c22 100644
--- a/frontend/src/components/CouncilMemberCard.jsx
+++ b/frontend/src/components/CouncilMemberCard.jsx
@@ -4,15 +4,15 @@ export default function CouncilMemberCard({ modelId, response, isChairman }) {
   const getStatusColor = () => {
     switch (response.status) {
       case 'pending':
-        return 'bg-gray-700 text-gray-400';
+        return 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400';
       case 'streaming':
-        return 'bg-blue-900/30 text-blue-300';
+        return 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300';
       case 'complete':
-        return 'bg-green-900/30 text-green-300';
+        return 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300';
       case 'error':
-        return 'bg-red-900/30 text-red-300';
+        return 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300';
       default:
-        return 'bg-gray-700 text-gray-400';
+        return 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400';
     }
   };
 
@@ -35,11 +35,11 @@ export default function CouncilMemberCard({ modelId, response, isChairman }) {
     <div className="card">
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center space-x-2">
-          <h3 className="font-semibold text-lg text-gray-100 truncate" title={modelId}>
+          <h3 className="font-semibold text-lg text-gray-900 dark:text-gray-100 truncate" title={modelId}>
             {modelId}
           </h3>
           {isChairman && (
-            <span className="px-2 py-1 bg-purple-900/30 text-purple-300 text-xs rounded-full">
+            <span className="px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs rounded-full">
               Chairman
             </span>
           )}
@@ -49,18 +49,18 @@ export default function CouncilMemberCard({ modelId, response, isChairman }) {
         </span>
       </div>
 
-      <div className="bg-[#0f1623] rounded-lg p-3 min-h-[150px] max-h-[400px] overflow-y-auto">
+      <div className="bg-gray-50 dark:bg-[#0f1623] rounded-lg p-3 min-h-[150px] max-h-[400px] overflow-y-auto transition-colors duration-200">
         {response.status === 'error' ? (
-          <p className="text-red-400">{response.error}</p>
+          <p className="text-red-600 dark:text-red-400">{response.error}</p>
         ) : response.text ? (
-          <div className="prose prose-invert prose-sm max-w-none">
+          <div className="prose dark:prose-invert prose-sm max-w-none">
             <ReactMarkdown>{response.text}</ReactMarkdown>
             {response.status === 'streaming' && (
               <span className="inline-block w-2 h-4 bg-blue-500 ml-1 animate-pulse"></span>
             )}
           </div>
         ) : (
-          <p className="text-gray-400 italic">Waiting for response...</p>
+          <p className="text-gray-500 dark:text-gray-400 italic">Waiting for response...</p>
         )}
       </div>
     </div>
diff --git a/frontend/src/components/HistoryBrowser.jsx b/frontend/src/components/HistoryBrowser.jsx
index 36d0435..3441ab8 100644
--- a/frontend/src/components/HistoryBrowser.jsx
+++ b/frontend/src/components/HistoryBrowser.jsx
@@ -31,8 +31,8 @@ export default function HistoryBrowser({ onSelectDecision }) {
   if (loading) {
     return (
       <div className="card">
-        <h3 className="text-xl font-bold mb-4 text-gray-100">Decision History</h3>
-        <p className="text-gray-400">Loading...</p>
+        <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Decision History</h3>
+        <p className="text-gray-500 dark:text-gray-400">Loading...</p>
       </div>
     );
   }
@@ -40,8 +40,8 @@ export default function HistoryBrowser({ onSelectDecision }) {
   if (error) {
     return (
       <div className="card">
-        <h3 className="text-xl font-bold mb-4 text-gray-100">Decision History</h3>
-        <p className="text-red-400">{error}</p>
+        <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Decision History</h3>
+        <p className="text-red-600 dark:text-red-400">{error}</p>
       </div>
     );
   }
@@ -49,34 +49,34 @@ export default function HistoryBrowser({ onSelectDecision }) {
   return (
     <div className="card">
       <div className="flex items-center justify-between mb-4">
-        <h3 className="text-xl font-bold text-gray-100">Decision History</h3>
+        <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">Decision History</h3>
         <button onClick={fetchHistory} className="btn-secondary text-sm">
           Refresh
         </button>
       </div>
 
       {decisions.length === 0 ? (
-        <p className="text-gray-400 italic">No decisions yet. Start research to create one!</p>
+        <p className="text-gray-500 dark:text-gray-400 italic">No decisions yet. Start research to create one!</p>
       ) : (
         <div className="space-y-2 max-h-96 overflow-y-auto">
           {decisions.map(decision => (
             <div
               key={decision.id}
-              className="border border-gray-700 rounded-lg p-3 hover:bg-[#0f1623] cursor-pointer transition-colors"
+              className="border border-gray-200 dark:border-gray-700 rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-[#0f1623] cursor-pointer transition-colors"
               onClick={() => onSelectDecision(decision.id)}
             >
               <div className="flex items-start justify-between">
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-gray-200 truncate" title={decision.query}>
+                  <p className="text-sm font-medium text-gray-800 dark:text-gray-200 truncate" title={decision.query}>
                     {decision.query}
                   </p>
-                  <div className="flex items-center space-x-2 mt-1 text-xs text-gray-400">
+                  <div className="flex items-center space-x-2 mt-1 text-xs text-gray-500 dark:text-gray-400">
                     <span>Chairman: {decision.chairman_model}</span>
                     <span>•</span>
                     <span>{decision.response_count} responses</span>
                   </div>
                 </div>
-                <span className="text-xs text-gray-500 whitespace-nowrap ml-2">
+                <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap ml-2">
                   {formatDate(decision.created_at)}
                 </span>
               </div>
diff --git a/frontend/src/components/QueryInput.jsx b/frontend/src/components/QueryInput.jsx
index ba9a6e2..0320980 100644
--- a/frontend/src/components/QueryInput.jsx
+++ b/frontend/src/components/QueryInput.jsx
@@ -85,7 +85,7 @@ export default function QueryInput({
       <form onSubmit={handleSubmit} className="space-y-6">
         {/* Research Prompt */}
         <div>
-          <label className="block text-sm font-medium mb-3 text-gray-300">
+          <label className="block text-sm font-medium mb-3 text-gray-700 dark:text-gray-300">
             Research Prompt
           </label>
           <textarea
@@ -99,7 +99,7 @@ export default function QueryInput({
 
           {/* Quick Prompts */}
           <div className="flex gap-2 mt-3">
-            <span className="text-xs text-gray-400 self-center mr-1">Quick prompts:</span>
+            <span className="text-xs text-gray-500 dark:text-gray-400 self-center mr-1">Quick prompts:</span>
             {Object.keys(QUICK_PROMPTS).map(prompt => (
               <button
                 key={prompt}
@@ -122,10 +122,10 @@ export default function QueryInput({
         {/* Council Members */}
         <div>
           <div className="flex justify-between items-center mb-3">
-            <label className="block text-sm font-medium text-gray-300">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
               Council Members
             </label>
-            <span className="text-xs text-gray-400">
+            <span className="text-xs text-gray-500 dark:text-gray-400">
               Select 2+ models for best results ({activeSelectedModels.length} selected)
             </span>
           </div>
@@ -145,7 +145,7 @@ export default function QueryInput({
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
               {availableModels.length === 0 ? (
-                <p className="text-gray-500 col-span-full">No models available</p>
+                <p className="text-gray-500 dark:text-gray-400 col-span-full">No models available</p>
               ) : (
                 availableModels.map(model => {
                   const modelId = model.id || model.name;
@@ -167,13 +167,13 @@ export default function QueryInput({
                           disabled={disabled}
                           tabIndex={-1}
                           aria-hidden="true"
-                          className="mt-1 rounded text-blue-600 focus:ring-blue-500 bg-transparent border-gray-600"
+                          className="mt-1 rounded text-blue-600 focus:ring-blue-500 bg-white dark:bg-transparent border-gray-300 dark:border-gray-600"
                         />
                         <div className="flex-1 min-w-0">
-                          <div className="text-sm font-medium text-gray-100 truncate">
+                          <div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
                             {model.name || model.display_name}
                           </div>
-                          <div className="text-xs text-gray-400 mt-1">
+                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                             {getModelProviderLabel(modelId)}
                           </div>
                         </div>
@@ -188,8 +188,8 @@ export default function QueryInput({
 
         {/* Chairman Model */}
         <div>
-          <label className="block text-sm font-medium mb-3 text-gray-300">
-            Chairman Model <span className="text-xs text-gray-400 font-normal">Synthesizes the final answer</span>
+          <label className="block text-sm font-medium mb-3 text-gray-700 dark:text-gray-300">
+            Chairman Model <span className="text-xs text-gray-500 dark:text-gray-400 font-normal">Synthesizes the final answer</span>
           </label>
           <select
             value={chairman}
diff --git a/frontend/src/components/SynthesisPanel.jsx b/frontend/src/components/SynthesisPanel.jsx
index 0292f60..d20b366 100644
--- a/frontend/src/components/SynthesisPanel.jsx
+++ b/frontend/src/components/SynthesisPanel.jsx
@@ -4,8 +4,8 @@ export default function SynthesisPanel({ synthesis }) {
   if (!synthesis) {
     return (
       <div className="card">
-        <h3 className="text-xl font-bold mb-4 text-gray-100">Synthesis</h3>
-        <p className="text-gray-400 italic">
+        <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Synthesis</h3>
+        <p className="text-gray-500 dark:text-gray-400 italic">
           Synthesis will appear here after all council members respond...
         </p>
       </div>
@@ -15,10 +15,10 @@ export default function SynthesisPanel({ synthesis }) {
   if (synthesis.status === 'generating') {
     return (
       <div className="card">
-        <h3 className="text-xl font-bold mb-4 text-gray-100">Synthesis</h3>
+        <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Synthesis</h3>
         <div className="flex items-center space-x-2">
           <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"></div>
-          <p className="text-blue-400">Chairman is synthesizing responses...</p>
+          <p className="text-blue-600 dark:text-blue-400">Chairman is synthesizing responses...</p>
         </div>
       </div>
     );
@@ -27,29 +27,29 @@ export default function SynthesisPanel({ synthesis }) {
   if (synthesis.status === 'error') {
     return (
       <div className="card">
-        <h3 className="text-xl font-bold mb-4 text-gray-100">Synthesis</h3>
-        <p className="text-red-400">{synthesis.error}</p>
+        <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Synthesis</h3>
+        <p className="text-red-600 dark:text-red-400">{synthesis.error}</p>
       </div>
     );
   }
 
   return (
     <div className="card space-y-6">
-      <h3 className="text-xl font-bold text-gray-100">Synthesis</h3>
+      <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">Synthesis</h3>
 
       {/* Consensus Section */}
       {synthesis.consensus && synthesis.consensus.length > 0 && (
         <div>
-          <h4 className="text-lg font-semibold text-green-400 mb-2">
+          <h4 className="text-lg font-semibold text-green-600 dark:text-green-400 mb-2">
             ✓ Consensus
           </h4>
           <ul className="space-y-2">
             {synthesis.consensus.map((item, idx) => (
               <li
                 key={idx}
-                className="bg-green-900/20 border-l-4 border-green-500 p-3 rounded"
+                className="bg-green-100 dark:bg-green-900/20 border-l-4 border-green-500 p-3 rounded"
               >
-                <div className="text-sm text-gray-300 prose prose-invert prose-sm max-w-none">
+                <div className="text-sm prose dark:prose-invert prose-sm max-w-none">
                   <ReactMarkdown>{item}</ReactMarkdown>
                 </div>
               </li>
@@ -61,20 +61,20 @@ export default function SynthesisPanel({ synthesis }) {
       {/* Debates Section */}
       {synthesis.debates && synthesis.debates.length > 0 && (
         <div>
-          <h4 className="text-lg font-semibold text-orange-400 mb-2">
+          <h4 className="text-lg font-semibold text-orange-600 dark:text-orange-400 mb-2">
             ⚡ Debates
           </h4>
           <ul className="space-y-2">
             {synthesis.debates.map((debate, idx) => (
               <li
                 key={idx}
-                className="bg-orange-900/20 border-l-4 border-orange-500 p-3 rounded"
+                className="bg-orange-100 dark:bg-orange-900/20 border-l-4 border-orange-500 p-3 rounded"
               >
-                <div className="font-medium text-sm mb-1 text-gray-200 prose prose-invert prose-sm max-w-none">
+                <div className="font-medium text-sm mb-1 prose dark:prose-invert prose-sm max-w-none">
                   <ReactMarkdown>{debate.topic}</ReactMarkdown>
                 </div>
                 {debate.positions && (
-                  <div className="text-sm text-gray-300 prose prose-invert prose-sm max-w-none">
+                  <div className="text-sm prose dark:prose-invert prose-sm max-w-none">
                     <ReactMarkdown>{debate.positions}</ReactMarkdown>
                   </div>
                 )}
@@ -86,11 +86,11 @@ export default function SynthesisPanel({ synthesis }) {
 
       {/* Chairman's Synthesis */}
       <div>
-        <h4 className="text-lg font-semibold text-purple-400 mb-2">
+        <h4 className="text-lg font-semibold text-purple-600 dark:text-purple-400 mb-2">
           Chairman's Synthesis
         </h4>
-        <div className="bg-purple-900/20 border-l-4 border-purple-500 p-4 rounded">
-          <div className="prose prose-invert prose-sm max-w-none">
+        <div className="bg-purple-100 dark:bg-purple-900/20 border-l-4 border-purple-500 p-4 rounded">
+          <div className="prose dark:prose-invert prose-sm max-w-none">
             <ReactMarkdown>{synthesis.text}</ReactMarkdown>
           </div>
         </div>
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..c546e19
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -0,0 +1,48 @@
+import { useTheme } from '../hooks/useTheme';
+
+export default function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-2 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200"
+      aria-label="Toggle theme"
+      title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {theme === 'dark' ? (
+        // Sun icon for dark mode (to switch to light)
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          />
+        </svg>
+      ) : (
+        // Moon icon for light mode (to switch to dark)
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}
diff --git a/frontend/src/contexts/ThemeContext.jsx b/frontend/src/contexts/ThemeContext.jsx
new file mode 100644
index 0000000..5c4f5c0
--- /dev/null
+++ b/frontend/src/contexts/ThemeContext.jsx
@@ -0,0 +1,51 @@
+import { createContext, useState, useEffect } from 'react';
+
+export const ThemeContext = createContext(undefined);
+
+function getInitialTheme() {
+  if (typeof window === 'undefined') return 'light';
+
+  try {
+    const savedTheme = window.localStorage.getItem('theme');
+    if (savedTheme === 'light' || savedTheme === 'dark') {
+      return savedTheme;
+    }
+  } catch (error) {
+    console.warn('Failed to read theme from localStorage:', error);
+  }
+
+  try {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+  } catch (error) {
+    console.warn('Failed to check system theme preference:', error);
+  }
+
+  return 'light';
+}
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(getInitialTheme);
+
+  useEffect(() => {
+    try {
+      const root = window.document.documentElement;
+      root.classList.remove('light', 'dark');
+      root.classList.add(theme);
+      window.localStorage.setItem('theme', theme);
+    } catch (error) {
+      console.warn('Failed to save theme preference:', error);
+    }
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
diff --git a/frontend/src/hooks/useTheme.js b/frontend/src/hooks/useTheme.js
new file mode 100644
index 0000000..2de9966
--- /dev/null
+++ b/frontend/src/hooks/useTheme.js
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index fce89a2..1115289 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -2,9 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './styles/index.css'
+import { ThemeProvider } from './contexts/ThemeContext'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </React.StrictMode>,
 )
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index f35ef1d..88bef1a 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -4,29 +4,29 @@
 
 @layer base {
   body {
-    @apply bg-[#0a0e1a] text-gray-100;
+    @apply bg-gray-50 dark:bg-[#0a0e1a] text-gray-900 dark:text-gray-100 transition-colors duration-200;
   }
 }
 
 @layer components {
   .btn-primary {
-    @apply px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:bg-gray-600 disabled:cursor-not-allowed font-medium;
+    @apply px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed font-medium;
   }
 
   .btn-secondary {
-    @apply px-4 py-2 bg-gray-700 text-gray-100 rounded-lg hover:bg-gray-600 transition-colors;
+    @apply px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors;
   }
 
   .card {
-    @apply bg-[#1a2332] rounded-lg shadow-lg p-6 border border-gray-700;
+    @apply bg-white dark:bg-[#1a2332] rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700 transition-colors duration-200;
   }
 
   .input-field {
-    @apply w-full px-4 py-3 border border-gray-600 rounded-lg bg-[#0f1623] text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
+    @apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-[#0f1623] text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200;
   }
 
   .model-card {
-    @apply bg-[#0f1623] border border-gray-700 rounded-lg p-4 transition-all hover:border-blue-500 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/50 cursor-pointer;
+    @apply bg-white dark:bg-[#0f1623] border border-gray-200 dark:border-gray-700 rounded-lg p-4 transition-all hover:border-blue-500 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/50 cursor-pointer;
   }
 
   .model-card input[type="checkbox"] {
@@ -34,20 +34,20 @@
   }
 
   .model-card-selected {
-    @apply border-blue-500 bg-[#1a2840];
+    @apply border-blue-500 bg-blue-50 dark:bg-[#1a2840];
   }
 
   .quick-prompt-pill {
-    @apply px-4 py-2 bg-[#0f1623] border border-gray-600 rounded-full text-sm text-gray-300 hover:border-blue-500 hover:text-blue-400 transition-colors cursor-pointer;
+    @apply px-4 py-2 bg-white dark:bg-[#0f1623] border border-gray-300 dark:border-gray-600 rounded-full text-sm text-gray-700 dark:text-gray-300 hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer;
   }
 
   /* Server Group Styles */
   .server-group {
-    @apply bg-[#0f1623] border border-gray-700 rounded-lg mb-4 overflow-hidden;
+    @apply bg-white dark:bg-[#0f1623] border border-gray-200 dark:border-gray-700 rounded-lg mb-4 overflow-hidden transition-colors duration-200;
   }
 
   .server-header {
-    @apply w-full text-left bg-[#1a2332] p-4 cursor-pointer hover:bg-[#1f2938] transition-colors border-0;
+    @apply w-full text-left bg-gray-100 dark:bg-[#1a2332] p-4 cursor-pointer hover:bg-gray-200 dark:hover:bg-[#1f2938] transition-colors border-0;
   }
 
   .server-title {
@@ -59,7 +59,7 @@
   }
 
   .server-host {
-    @apply text-sm font-medium text-gray-100;
+    @apply text-sm font-medium text-gray-900 dark:text-gray-100;
   }
 
   .health-badge {
@@ -67,23 +67,23 @@
   }
 
   .health-badge.healthy {
-    @apply bg-green-900/30 text-green-400 border border-green-700;
+    @apply bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-700;
   }
 
   .health-badge.unhealthy {
-    @apply bg-red-900/30 text-red-400 border border-red-700;
+    @apply bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-700;
   }
 
   .server-stats {
-    @apply flex items-center gap-4 flex-wrap text-xs text-gray-400;
+    @apply flex items-center gap-4 flex-wrap text-xs text-gray-500 dark:text-gray-400;
   }
 
   .server-stats .stat {
-    @apply px-2 py-1 bg-[#0f1623] rounded;
+    @apply px-2 py-1 bg-gray-100 dark:bg-[#0f1623] rounded;
   }
 
   .badge-high {
-    @apply px-2 py-1 bg-blue-900/30 text-blue-400 border border-blue-700 rounded;
+    @apply px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-700 rounded;
   }
 
   .expand-icon {
@@ -96,11 +96,11 @@
 
   /* Server Usage Warnings */
   .server-usage {
-    @apply px-4 py-3 bg-[#1a2332] border-t border-gray-700;
+    @apply px-4 py-3 bg-gray-100 dark:bg-[#1a2332] border-t border-gray-200 dark:border-gray-700;
   }
 
   .usage-summary {
-    @apply text-sm text-gray-300 mb-2;
+    @apply text-sm text-gray-600 dark:text-gray-300 mb-2;
   }
 
   .warning {
@@ -108,15 +108,32 @@
   }
 
   .warning.severity-high {
-    @apply bg-red-900/20 border border-red-700 text-red-300;
+    @apply bg-red-100 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-300;
   }
 
   .warning.severity-medium {
-    @apply bg-yellow-900/20 border border-yellow-700 text-yellow-300;
+    @apply bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300;
   }
 
   .warning.severity-info {
-    @apply bg-blue-900/20 border border-blue-700 text-blue-300;
+    @apply bg-blue-100 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300;
+  }
+
+  /* Warning Items (for SelectionAnalysis) */
+  .warning-item {
+    @apply px-3 py-2 rounded-lg;
+  }
+
+  .warning-item.severity-high {
+    @apply bg-red-100 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-300;
+  }
+
+  .warning-item.severity-medium {
+    @apply bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 text-yellow-700 dark:text-yellow-300;
+  }
+
+  .warning-item.severity-info {
+    @apply bg-blue-100 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300;
   }
 
   /* Models List */
@@ -138,7 +155,7 @@
   }
 
   .model-name {
-    @apply text-sm font-medium text-gray-100 mb-2 flex items-center gap-2 flex-wrap;
+    @apply text-sm font-medium text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-2 flex-wrap;
   }
 
   .badge {
@@ -146,43 +163,43 @@
   }
 
   .badge.latest {
-    @apply bg-purple-900/30 text-purple-400 border border-purple-700;
+    @apply bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 border border-purple-200 dark:border-purple-700;
   }
 
   .badge.size-tiny {
-    @apply bg-green-900/30 text-green-400 border border-green-700;
+    @apply bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-700;
   }
 
   .badge.size-small {
-    @apply bg-blue-900/30 text-blue-400 border border-blue-700;
+    @apply bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-700;
   }
 
   .badge.size-medium {
-    @apply bg-yellow-900/30 text-yellow-400 border border-yellow-700;
+    @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 border border-yellow-200 dark:border-yellow-700;
   }
 
   .badge.size-large {
-    @apply bg-red-900/30 text-red-400 border border-red-700;
+    @apply bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-700;
   }
 
   .badge.duplicate {
-    @apply bg-gray-700 text-gray-300 border border-gray-600;
+    @apply bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600;
   }
 
   .model-meta {
-    @apply flex items-center gap-3 flex-wrap text-xs text-gray-400;
+    @apply flex items-center gap-3 flex-wrap text-xs text-gray-500 dark:text-gray-400;
   }
 
   .provider {
-    @apply px-2 py-0.5 bg-[#1a2332] rounded;
+    @apply px-2 py-0.5 bg-gray-100 dark:bg-[#1a2332] rounded;
   }
 
   .category-badge {
-    @apply px-2 py-0.5 bg-[#1a2332] rounded;
+    @apply px-2 py-0.5 bg-gray-100 dark:bg-[#1a2332] rounded;
   }
 
   .memory {
-    @apply px-2 py-0.5 bg-[#1a2332] rounded;
+    @apply px-2 py-0.5 bg-gray-100 dark:bg-[#1a2332] rounded;
   }
 
   .health {
@@ -190,52 +207,52 @@
   }
 
   .health.healthy {
-    @apply bg-green-900/30 text-green-400;
+    @apply bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400;
   }
 
   .health.unhealthy {
-    @apply bg-red-900/30 text-red-400;
+    @apply bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400;
   }
 
   .recommendation {
-    @apply text-xs text-blue-400 mt-2 flex items-center gap-1;
+    @apply text-xs text-blue-600 dark:text-blue-400 mt-2 flex items-center gap-1;
   }
 
   .details-toggle {
-    @apply text-gray-400 hover:text-gray-200 transition-colors px-2;
+    @apply text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors px-2;
   }
 
   .model-details {
-    @apply mt-3 pt-3 border-t border-gray-700 text-xs space-y-2;
+    @apply mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs space-y-2;
   }
 
   .detail-row {
-    @apply flex justify-between text-gray-400;
+    @apply flex justify-between text-gray-500 dark:text-gray-400;
   }
 
   .detail-row.error {
-    @apply text-red-400;
+    @apply text-red-600 dark:text-red-400;
   }
 
   /* Selection Analysis Styles */
   .selection-analysis {
-    @apply bg-[#0f1623] border rounded-lg p-4 mb-4;
+    @apply bg-white dark:bg-[#0f1623] border rounded-lg p-4 mb-4 transition-colors duration-200;
   }
 
   .selection-analysis.good {
-    @apply border-green-700;
+    @apply border-green-600 dark:border-green-700;
   }
 
   .selection-analysis.has-medium-warnings {
-    @apply border-yellow-700;
+    @apply border-yellow-600 dark:border-yellow-700;
   }
 
   .selection-analysis.has-high-warnings {
-    @apply border-red-700;
+    @apply border-red-600 dark:border-red-700;
   }
 
   .selection-analysis h3 {
-    @apply text-sm font-medium text-gray-100 mb-3;
+    @apply text-sm font-medium text-gray-900 dark:text-gray-100 mb-3;
   }
 
   .summary {
@@ -247,23 +264,23 @@
   }
 
   .summary-item .label {
-    @apply text-xs text-gray-400;
+    @apply text-xs text-gray-500 dark:text-gray-400;
   }
 
   .summary-item .value {
-    @apply text-lg font-semibold text-gray-100;
+    @apply text-lg font-semibold text-gray-900 dark:text-gray-100;
   }
 
   .value.diversity-good {
-    @apply text-green-400;
+    @apply text-green-600 dark:text-green-400;
   }
 
   .value.diversity-fair {
-    @apply text-yellow-400;
+    @apply text-yellow-600 dark:text-yellow-400;
   }
 
   .value.diversity-poor {
-    @apply text-red-400;
+    @apply text-red-600 dark:text-red-400;
   }
 
   .warnings-section,
@@ -273,7 +290,7 @@
 
   .warnings-section h4,
   .recommendations-section h4 {
-    @apply text-sm font-medium text-gray-300 mb-2;
+    @apply text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
   }
 
   .warnings-list,
@@ -281,10 +298,6 @@
     @apply space-y-2;
   }
 
-  .warning-item {
-    @apply px-3 py-2 rounded-lg;
-  }
-
   .warning-message {
     @apply text-sm font-medium mb-1;
   }
@@ -295,18 +308,18 @@
   }
 
   .recommendation-item {
-    @apply px-3 py-2 bg-blue-900/20 border border-blue-700 rounded-lg;
+    @apply px-3 py-2 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg;
   }
 
   .recommendation-action {
-    @apply text-sm text-blue-300 mb-1;
+    @apply text-sm text-blue-800 dark:text-blue-300 mb-1;
   }
 
   .recommendation-reason {
-    @apply text-xs text-blue-400/70;
+    @apply text-xs text-blue-600 dark:text-blue-400/70;
   }
 
   .positive-message {
-    @apply px-3 py-2 bg-green-900/20 border border-green-700 text-green-300 rounded-lg text-sm;
+    @apply px-3 py-2 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-300 rounded-lg text-sm;
   }
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index dca8ba0..9121d4e 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -4,6 +4,7 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {},
   },