diff --git a/src/app/App.tsx b/src/app/App.tsx
index e785ca7..d5593d9 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -10,6 +10,8 @@ import Image from "next/image";
 import Transcript from "./components/Transcript";
 import Events from "./components/Events";
 import BottomToolbar from "./components/BottomToolbar";
+import { ThemeToggle } from "./components/ThemeToggle";
+import { ThemeProvider } from "./components/ThemeProvider";
 
 // Types
 import { AgentConfig, SessionStatus } from "@/app/types";
@@ -26,6 +28,15 @@ import { createRealtimeConnection } from "./lib/realtimeConnection";
 import { allAgentSets, defaultAgentSetKey } from "@/app/agentConfigs";
 
 function App() {
+  return (
+    <ThemeProvider>
+      <AppContent />
+      <ThemeToggle />
+    </ThemeProvider>
+  );
+}
+
+function AppContent() {
   const searchParams = useSearchParams();
 
   const { transcriptItems, addTranscriptMessage, addTranscriptBreadcrumb } =
@@ -404,8 +415,8 @@ function App() {
   const agentSetKey = searchParams.get("agentConfig") || "default";
 
   return (
-    <div className="text-base flex flex-col h-screen bg-gray-100 text-gray-800 relative">
-      <div className="p-5 text-lg font-semibold flex justify-between items-center">
+    <div className="text-base flex flex-col h-screen bg-background dark:bg-[#1a1a1a] text-foreground dark:text-white relative">
+      <div className="p-5 text-lg font-semibold flex justify-between items-center bg-background dark:bg-[#202020] panel">
         <div className="flex items-center">
           <div onClick={() => window.location.reload()} style={{ cursor: 'pointer' }}>
             <Image
@@ -413,11 +424,11 @@ function App() {
               alt="OpenAI Logo"
               width={20}
               height={20}
-              className="mr-2"
+              className="mr-2 dark:invert"
             />
           </div>
           <div>
-            Realtime API <span className="text-gray-500">Agents</span>
+            Realtime API <span className="text-muted dark:text-muted">Agents</span>
           </div>
         </div>
         <div className="flex items-center">
@@ -428,7 +439,7 @@ function App() {
             <select
               value={agentSetKey}
               onChange={handleAgentChange}
-              className="appearance-none border border-gray-300 rounded-lg text-base px-2 py-1 pr-8 cursor-pointer font-normal focus:outline-none"
+              className="appearance-none border border-[#acacac] dark:border-[#404040] rounded-lg text-base px-2 py-1 pr-8 cursor-pointer font-normal focus:outline-none bg-[#2a2a2a]/5 dark:bg-[#2a2a2a]/20"
             >
               {Object.keys(allAgentSets).map((agentKey) => (
                 <option key={agentKey} value={agentKey}>
@@ -456,7 +467,7 @@ function App() {
                 <select
                   value={selectedAgentName}
                   onChange={handleSelectedAgentChange}
-                  className="appearance-none border border-gray-300 rounded-lg text-base px-2 py-1 pr-8 cursor-pointer font-normal focus:outline-none"
+                  className="appearance-none border border-[#acacac] dark:border-[#404040] rounded-lg text-base px-2 py-1 pr-8 cursor-pointer font-normal focus:outline-none bg-[#2a2a2a]/5 dark:bg-[#2a2a2a]/20"
                 >
                   {selectedAgentConfigSet?.map(agent => (
                     <option key={agent.name} value={agent.name}>
@@ -483,7 +494,7 @@ function App() {
         </div>
       </div>
 
-      <div className="flex flex-1 gap-2 px-2 overflow-hidden relative">
+      <div className="flex flex-1 gap-4 px-4 py-4 overflow-hidden relative">
         <Transcript
           userText={userText}
           setUserText={setUserText}
diff --git a/src/app/components/BottomToolbar.tsx b/src/app/components/BottomToolbar.tsx
index c398f35..ee55a6f 100644
--- a/src/app/components/BottomToolbar.tsx
+++ b/src/app/components/BottomToolbar.tsx
@@ -38,19 +38,13 @@ function BottomToolbar({
   }
 
   function getConnectionButtonClasses() {
-    const baseClasses = "text-white text-base p-2 w-36 rounded-full h-full";
+    const baseClasses = "text-white text-base p-2 w-36 rounded-lg h-full transition-all duration-200 disconnect-btn";
     const cursorClass = isConnecting ? "cursor-not-allowed" : "cursor-pointer";
-
-    if (isConnected) {
-      // Connected -> label "Disconnect" -> red
-      return `bg-red-600 hover:bg-red-700 ${cursorClass} ${baseClasses}`;
-    }
-    // Disconnected or connecting -> label is either "Connect" or "Connecting" -> black
-    return `bg-black hover:bg-gray-900 ${cursorClass} ${baseClasses}`;
+    return `${cursorClass} ${baseClasses}`;
   }
 
   return (
-    <div className="p-4 flex flex-row items-center justify-center gap-x-8">
+    <div className="p-4 flex flex-row items-center justify-center gap-x-8 bg-background dark:bg-[#202020] panel border-t border-border dark:border-panel-border">
       <button
         onClick={onToggleConnection}
         className={getConnectionButtonClasses()}
@@ -66,9 +60,9 @@ function BottomToolbar({
           checked={isPTTActive}
           onChange={e => setIsPTTActive(e.target.checked)}
           disabled={!isConnected}
-          className="w-4 h-4"
+          className="w-4 h-4 accent-primary dark:accent-primary cursor-pointer"
         />
-        <label htmlFor="push-to-talk" className="flex items-center cursor-pointer">
+        <label htmlFor="push-to-talk" className="flex items-center cursor-pointer text-foreground dark:text-foreground/90">
           Push to talk
         </label>
         <button
@@ -77,11 +71,13 @@ function BottomToolbar({
           onTouchStart={handleTalkButtonDown}
           onTouchEnd={handleTalkButtonUp}
           disabled={!isPTTActive}
-          className={
-            (isPTTUserSpeaking ? "bg-gray-300" : "bg-gray-200") +
-            " py-1 px-4 cursor-pointer rounded-full" +
-            (!isPTTActive ? " bg-gray-100 text-gray-400" : "")
-          }
+          className={`
+            py-1 px-4 rounded-lg transition-all duration-200
+            ${isPTTUserSpeaking 
+              ? 'bg-primary/20 dark:bg-primary/30' 
+              : 'bg-surface dark:bg-surface hover:bg-surface/90 dark:hover:bg-surface/90'}
+            ${!isPTTActive ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+          `}
         >
           Talk
         </button>
@@ -94,9 +90,9 @@ function BottomToolbar({
           checked={isAudioPlaybackEnabled}
           onChange={e => setIsAudioPlaybackEnabled(e.target.checked)}
           disabled={!isConnected}
-          className="w-4 h-4"
+          className="w-4 h-4 accent-primary dark:accent-primary cursor-pointer"
         />
-        <label htmlFor="audio-playback" className="flex items-center cursor-pointer">
+        <label htmlFor="audio-playback" className="flex items-center cursor-pointer text-foreground dark:text-foreground/90">
           Audio playback
         </label>
       </div>
@@ -107,9 +103,9 @@ function BottomToolbar({
           type="checkbox"
           checked={isEventsPaneExpanded}
           onChange={e => setIsEventsPaneExpanded(e.target.checked)}
-          className="w-4 h-4"
+          className="w-4 h-4 accent-primary dark:accent-primary cursor-pointer"
         />
-        <label htmlFor="logs" className="flex items-center cursor-pointer">
+        <label htmlFor="logs" className="flex items-center cursor-pointer text-foreground dark:text-foreground/90">
           Logs
         </label>
       </div>
diff --git a/src/app/components/Events.tsx b/src/app/components/Events.tsx
index 22a1a34..7994e4e 100644
--- a/src/app/components/Events.tsx
+++ b/src/app/components/Events.tsx
@@ -15,9 +15,9 @@ function Events({ isExpanded }: EventsProps) {
   const { loggedEvents, toggleExpand } = useEvent();
 
   const getDirectionArrow = (direction: string) => {
-    if (direction === "client") return { symbol: "▲", color: "#7f5af0" };
-    if (direction === "server") return { symbol: "▼", color: "#2cb67d" };
-    return { symbol: "•", color: "#555" };
+    if (direction === "client") return { symbol: "▲", color: "var(--primary)" };
+    if (direction === "server") return { symbol: "▼", color: "var(--accent)" };
+    return { symbol: "•", color: "var(--muted)" };
   };
 
   useEffect(() => {
@@ -33,15 +33,16 @@ function Events({ isExpanded }: EventsProps) {
 
   return (
     <div
-      className={
-        (isExpanded ? "w-1/2 overflow-auto" : "w-0 overflow-hidden opacity-0") +
-        " transition-all rounded-xl duration-200 ease-in-out flex flex-col bg-white"
-      }
+      className={`
+        ${isExpanded ? "w-1/2 overflow-auto" : "w-0 overflow-hidden opacity-0"}
+        transition-all rounded-lg duration-200 ease-in-out flex flex-col 
+        bg-background dark:bg-[#202020] border border-border dark:border-panel-border panel
+      `}
       ref={eventLogsContainerRef}
     >
       {isExpanded && (
         <div>
-          <div className="font-semibold px-6 py-4 sticky top-0 z-10 text-base border-b bg-white">
+          <div className="font-semibold px-6 py-4 sticky top-0 z-10 text-base border-divider bg-[#2a2a2a]/5  dark:bg-[#2a2a2a] text-foreground dark:text-foreground/90">
             Logs
           </div>
           <div>
@@ -54,7 +55,7 @@ function Events({ isExpanded }: EventsProps) {
               return (
                 <div
                   key={log.id}
-                  className="border-t border-gray-200 py-2 px-6 font-mono"
+                  className="border-t-[0.5px] border-t-gray-400  dark:border-t-gray-500 border-panel-border/50 py-2 px-6 font-mono hover:bg-surface/50 dark:hover:bg-surface/20 transition-colors duration-200"
                 >
                   <div
                     onClick={() => toggleExpand(log.id)}
@@ -65,25 +66,27 @@ function Events({ isExpanded }: EventsProps) {
                         style={{ color: arrowInfo.color }}
                         className="ml-1 mr-2"
                       >
-                      {arrowInfo.symbol}
+                        {arrowInfo.symbol}
                       </span>
                       <span
-                        className={
-                          "flex-1 text-sm " +
-                          (isError ? "text-red-600" : "text-gray-800")
-                        }
+                        className={`
+                          flex-1 text-sm
+                          ${isError 
+                            ? "text-red-600 dark:text-red-400" 
+                            : "text-foreground dark:text-foreground/90"}
+                        `}
                       >
                         {log.eventName}
                       </span>
                     </div>
-                    <div className="text-gray-500 ml-1 text-xs whitespace-nowrap">
+                    <div className="text-muted dark:text-muted ml-1 text-xs whitespace-nowrap">
                       {log.timestamp}
                     </div>
                   </div>
 
                   {log.expanded && log.eventData && (
-                    <div className="text-gray-800 text-left">
-                      <pre className="border-l-2 ml-1 border-gray-200 whitespace-pre-wrap break-words font-mono text-xs mb-2 mt-2 pl-2">
+                    <div className="text-foreground dark:text-foreground/90 text-left">
+                      <pre className="border-l-2 ml-1 border-panel-border whitespace-pre-wrap break-words font-mono text-xs mb-2 mt-2 pl-2">
                         {JSON.stringify(log.eventData, null, 2)}
                       </pre>
                     </div>
diff --git a/src/app/components/ThemeProvider.tsx b/src/app/components/ThemeProvider.tsx
new file mode 100644
index 0000000..e603546
--- /dev/null
+++ b/src/app/components/ThemeProvider.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'blue' | 'green' | 'purple' | 'default';
+type Mode = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  mode: Mode;
+  setTheme: (theme: Theme) => void;
+  setMode: (mode: Mode) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>('default');
+  const [mode, setMode] = useState<Mode>('light');
+
+  useEffect(() => {
+    // Load saved preferences
+    const savedTheme = localStorage.getItem('theme') as Theme;
+    const savedMode = localStorage.getItem('mode') as Mode;
+    
+    if (savedTheme) setTheme(savedTheme);
+    if (savedMode) setMode(savedMode);
+  }, []);
+
+  useEffect(() => {
+    // Update document classes and data attributes
+    const root = document.documentElement;
+    
+    // Update dark mode class
+    if (mode === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+
+    // Update theme
+    if (theme !== 'default') {
+      root.setAttribute('data-theme', `${theme}-${mode}`);
+    } else {
+      root.removeAttribute('data-theme');
+    }
+
+    // Apply background color transition
+    document.body.style.transition = 'background-color 0.3s ease';
+
+    // Save preferences
+    localStorage.setItem('theme', theme);
+    localStorage.setItem('mode', mode);
+  }, [theme, mode]);
+
+  const value = {
+    theme,
+    mode,
+    setTheme: (newTheme: Theme) => setTheme(newTheme),
+    setMode: (newMode: Mode) => setMode(newMode),
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
\ No newline at end of file
diff --git a/src/app/components/ThemeToggle.tsx b/src/app/components/ThemeToggle.tsx
new file mode 100644
index 0000000..8f40f1c
--- /dev/null
+++ b/src/app/components/ThemeToggle.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useTheme } from './ThemeProvider';
+
+export function ThemeToggle() {
+  const { theme, mode, setTheme, setMode } = useTheme();
+  const [showThemeSelector, setShowThemeSelector] = useState(false);
+
+  const themes = [
+    { id: 'default', name: 'Default' },
+    { id: 'blue', name: 'Blue' },
+    { id: 'green', name: 'Green' },
+    { id: 'purple', name: 'Purple' },
+  ];
+
+  return (
+    <>
+      <div className="theme-toggle flex gap-2">
+        {/* Mode Toggle */}
+        <button
+          onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
+          className="p-2 rounded-lg bg-primary/10 hover:bg-primary/20 transition-colors dark:bg-primary/20 dark:hover:bg-primary/30"
+          aria-label="Toggle dark mode"
+        >
+          {mode === 'light' ? (
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="5"></circle>
+              <line x1="12" y1="1" x2="12" y2="3"></line>
+              <line x1="12" y1="21" x2="12" y2="23"></line>
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+              <line x1="1" y1="12" x2="3" y2="12"></line>
+              <line x1="21" y1="12" x2="23" y2="12"></line>
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+            </svg>
+          )}
+        </button>
+
+        {/* Theme Selector Toggle */}
+        <button
+          onClick={() => setShowThemeSelector(!showThemeSelector)}
+          className="p-2 rounded-lg bg-primary/10 hover:bg-primary/20 transition-colors dark:bg-primary/20 dark:hover:bg-primary/30"
+          aria-label="Select theme"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <circle cx="12" cy="12" r="4"></circle>
+            <line x1="12" y1="2" x2="12" y2="4"></line>
+            <line x1="12" y1="20" x2="12" y2="22"></line>
+            <line x1="2" y1="12" x2="4" y2="12"></line>
+            <line x1="20" y1="12" x2="22" y2="12"></line>
+          </svg>
+        </button>
+      </div>
+
+      {/* Theme Selector Dropdown */}
+      {showThemeSelector && (
+        <div className="theme-selector dark:border-primary/20 dark:bg-background/95 backdrop-blur-sm">
+          {themes.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => {
+                setTheme(t.id as any);
+                setShowThemeSelector(false);
+              }}
+              className={`block w-full text-left px-4 py-2 rounded hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors ${
+                theme === t.id ? 'text-primary dark:text-primary/90' : ''
+              }`}
+            >
+              {t.name}
+            </button>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/app/components/Transcript.tsx b/src/app/components/Transcript.tsx
index bf64c67..c178c6f 100644
--- a/src/app/components/Transcript.tsx
+++ b/src/app/components/Transcript.tsx
@@ -48,7 +48,6 @@ function Transcript({
     setPrevLogs(transcriptItems);
   }, [transcriptItems]);
 
-  // Autofocus on text box input on load
   useEffect(() => {
     if (canSend && inputRef.current) {
       inputRef.current.focus();
@@ -67,11 +66,11 @@ function Transcript({
   };
 
   return (
-    <div className="flex flex-col flex-1 bg-white min-h-0 rounded-xl">
+    <div className="flex flex-col flex-1 bg-background dark:bg-[#202020] min-h-0 rounded-lg border border-border dark:border-panel-border panel">
       <div className="relative flex-1 min-h-0">
         <button
           onClick={handleCopyTranscript}
-          className={`absolute w-20 top-3 right-2 mr-1 z-10 text-sm px-3 py-2 rounded-full bg-gray-200 hover:bg-gray-300`}
+          className="absolute w-20 top-3 right-2 mr-1 z-10 text-sm px-3 py-2 rounded-lg bg-surface dark:bg-surface hover:bg-surface/90 dark:hover:bg-surface/90 text-foreground dark:text-foreground/90 transition-all duration-200"
         >
           {justCopied ? "Copied!" : "Copy"}
         </button>
@@ -91,15 +90,19 @@ function Transcript({
               const isUser = role === "user";
               const baseContainer = "flex justify-end flex-col";
               const containerClasses = `${baseContainer} ${isUser ? "items-end" : "items-start"}`;
-              const bubbleBase = `max-w-lg p-3 rounded-xl ${isUser ? "bg-gray-900 text-gray-100" : "bg-gray-100 text-black"}`;
+              const bubbleBase = `max-w-lg p-3 rounded-lg transition-all duration-200 shadow-md ${
+                isUser
+                  ? "bg-[#4a4a4a] dark:bg-accent/20 text-white dark:text-white border border-[#2a2a2a] dark:border-accent/20"
+                  : "bg-[#4a2a2a]/10 bg-accent/20 text-foreground dark:text-foreground border border-[#C4C4C4] dark:border-[#404040]"
+              }`;
               const isBracketedMessage = title.startsWith("[") && title.endsWith("]");
-              const messageStyle = isBracketedMessage ? "italic text-gray-400" : "";
+              const messageStyle = isBracketedMessage ? "italic text-muted dark:text-muted" : "";
               const displayTitle = isBracketedMessage ? title.slice(1, -1) : title;
 
               return (
                 <div key={itemId} className={containerClasses}>
                   <div className={bubbleBase}>
-                    <div className={`text-xs ${isUser ? "text-gray-400" : "text-gray-500"} font-mono`}>
+                    <div className="text-xs text-muted/5 dark:text-muted font-mono">
                       {timestamp}
                     </div>
                     <div className={`whitespace-pre-wrap ${messageStyle}`}>
@@ -112,18 +115,18 @@ function Transcript({
               return (
                 <div
                   key={itemId}
-                  className="flex flex-col justify-start items-start text-gray-500 text-sm"
+                  className="flex flex-col justify-start items-start text-muted dark:text-muted text-sm"
                 >
                   <span className="text-xs font-mono">{timestamp}</span>
                   <div
-                    className={`whitespace-pre-wrap flex items-center font-mono text-sm text-gray-800 ${
+                    className={`whitespace-pre-wrap flex items-center font-mono text-sm text-foreground dark:text-foreground/90 ${
                       data ? "cursor-pointer" : ""
                     }`}
                     onClick={() => data && toggleTranscriptItemExpand(itemId)}
                   >
                     {data && (
                       <span
-                        className={`text-gray-400 mr-1 transform transition-transform duration-200 select-none font-mono ${
+                        className={`text-muted dark:text-muted mr-1 transform transition-transform duration-200 select-none font-mono ${
                           expanded ? "rotate-90" : "rotate-0"
                         }`}
                       >
@@ -133,8 +136,8 @@ function Transcript({
                     {title}
                   </div>
                   {expanded && data && (
-                    <div className="text-gray-800 text-left">
-                      <pre className="border-l-2 ml-1 border-gray-200 whitespace-pre-wrap break-words font-mono text-xs mb-2 mt-2 pl-2">
+                    <div className="text-foreground dark:text-foreground/90 text-left">
+                      <pre className="border-l-2 ml-1 border-[#2a2a2a] dark:border-[#404040] whitespace-pre-wrap break-words font-mono text-xs mb-2 mt-2 pl-2">
                         {JSON.stringify(data, null, 2)}
                       </pre>
                     </div>
@@ -142,11 +145,10 @@ function Transcript({
                 </div>
               );
             } else {
-              // Fallback if type is neither MESSAGE nor BREADCRUMB
               return (
                 <div
                   key={itemId}
-                  className="flex justify-center text-gray-500 text-sm italic font-mono"
+                  className="flex justify-center text-muted dark:text-muted text-sm italic font-mono"
                 >
                   Unknown item type: {type}{" "}
                   <span className="ml-2 text-xs">{timestamp}</span>
@@ -157,7 +159,7 @@ function Transcript({
         </div>
       </div>
 
-      <div className="p-4 flex items-center gap-x-2 flex-shrink-0 border-t border-gray-200">
+      <div className="p-4 flex items-center gap-x-2 flex-shrink-0 border-t border-[#acacac] dark:border-[#404040] bg-surface dark:bg-surface">
         <input
           ref={inputRef}
           type="text"
@@ -168,15 +170,21 @@ function Transcript({
               onSendMessage();
             }
           }}
-          className="flex-1 px-4 py-2 focus:outline-none"
+          className="flex-1 px-4 py-2 focus:outline-none bg-[#6a6a6a]/10 dark:bg-[#2a2a2a]/20 text-foreground dark:text-foreground rounded-lg border border-[#ACACAC] dark:border-[#404040] focus:border-[#404040] transition-colors duration-200"
           placeholder="Type a message..."
         />
         <button
           onClick={onSendMessage}
           disabled={!canSend || !userText.trim()}
-          className="bg-gray-900 text-white rounded-full px-2 py-2 disabled:opacity-50"
+          className="bg-primary dark:bg-primary/20 text-white rounded-lg p-2 disabled:opacity-50 transition-all duration-200 hover:bg-primary/90 dark:hover:bg-primary/30"
         >
-          <Image src="arrow.svg" alt="Send" width={24} height={24} />
+          <Image 
+            src="arrow.svg" 
+            alt="Send" 
+            width={24} 
+            height={24} 
+            className="dark:invert"
+          />
         </button>
       </div>
     </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 30f9f4b..8f32dd2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,21 +2,191 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Default Light Theme */
 :root {
   --background: #fafafa;
   --foreground: #171717;
+  --primary: #2563eb;
+  --secondary: #4f46e5;
+  --accent: #0ea5e9;
+  --muted: #6b7280;
+  --border: #6b7280;
+  --divider: #282828;
+  --disconnect: #dc2626;
+  --disconnect-hover: #b91c1c;
+  --surface: #f1f5f9;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+/* Default Dark Theme */
+/* Default Dark Theme */
+.dark {
+  --background: #1a1a1a;
+  --foreground: #fffff;
+  --primary: #60a5fa;
+  --secondary: #818cf8;
+  --accent: #38bdf8;
+  --muted: #9ca3af;
+  --border: #2a2a2a;
+  --panel-bg: #202020;
+  --panel-border: #303030;
+  --panel-border-light: #6a2a2a;
+  --panel-border-dark: #404040;
+  --disconnect: #dc2626;
+  --disconnect-hover: #b91c1c;
+  --surface: #242424;
+  --divider: #282828;
+}
+
+/* Material Design Shadows and Transitions */
+.dark .panel {
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* Custom shadows for dark mode */
+.dark .shadow-md {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
+              0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Custom shadows for light mode */
+.shadow-md {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
+              0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Smooth transitions */
+* {
+  transition: background-color 0.1s ease-in-out,
+              color 0.1s ease-in-out,
+              border-color 0.1s ease-in-out,
+              box-shadow 0.1s ease-in-out;
+}
+
+/* Disconnect button styles */
+.disconnect-btn {
+  background: var(--disconnect);
+  border: 1px solid var(--border);
+}
+
+.disconnect-btn:hover {
+  background: var(--disconnect-hover);
+}
+/* Blue Theme - Light */
+[data-theme="blue-light"] {
+  --background: #f0f9ff;
+  --foreground: #0c4a6e;
+  --primary: #0284c7;
+  --secondary: #0369a1;
+  --accent: #0ea5e9;
+  --muted: #64748b;
+}
+
+/* Green Theme - Light */
+[data-theme="green-light"] {
+  --background: #f0fdf4;
+  --foreground: #14532d;
+  --primary: #16a34a;
+  --secondary: #15803d;
+  --accent: #22c55e;
+  --muted: #64748b;
+}
+
+/* Purple Theme - Light */
+[data-theme="purple-light"] {
+  --background: #faf5ff;
+  --foreground: #581c87;
+  --primary: #9333ea;
+  --secondary: #7e22ce;
+  --accent: #a855f7;
+  --muted: #64748b;
+}
+
+/* Dark Theme Variants */
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+  --primary: #60a5fa;
+  --secondary: #818cf8;
+  --accent: #38bdf8;
+  --muted: #9ca3af;
+}
+
+/* Blue Theme - Dark */
+.dark[data-theme="blue-dark"] {
+  --background: #0c4a6e;
+  --foreground: #e0f2fe;
+  --primary: #38bdf8;
+  --secondary: #0ea5e9;
+  --accent: #7dd3fc;
+  --muted: #94a3b8;
+}
+
+/* Green Theme - Dark */
+.dark[data-theme="green-dark"] {
+  --background: #14532d;
+  --foreground: #dcfce7;
+  --primary: #4ade80;
+  --secondary: #22c55e;
+  --accent: #86efac;
+  --muted: #94a3b8;
+}
+
+/* Purple Theme - Dark */
+.dark[data-theme="purple-dark"] {
+  --background: #581c87;
+  --foreground: #f3e8ff;
+  --primary: #c084fc;
+  --secondary: #a855f7;
+  --accent: #d8b4fe;
+  --muted: #94a3b8;
+}
+
+@layer base {
+  body {
+    @apply text-foreground bg-background transition-colors duration-100;
+  }
+
+  /* Improved dark mode transitions */
+  * {
+    @apply transition-[background-color,color,border-color,box-shadow] duration-100;
   }
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  min-height: 100vh;
+  margin: 0;
+}
+
+/* Dark mode scrollbar */
+.dark ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.dark ::-webkit-scrollbar-track {
+  background: var(--background);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: var(--primary);
+  border-radius: 5px;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: var(--accent);
+}
+
+/* Responsive Design Adjustments */
+@layer utilities {
+  .theme-toggle {
+    @apply fixed bottom-4 right-4 md:bottom-8 md:right-8;
+  }
+  
+  .theme-selector {
+    @apply fixed bottom-16 right-4 md:bottom-20 md:right-8 bg-background border border-muted rounded-lg p-2 shadow-lg;
+  }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index acb7c79..d4086be 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,19 +1,47 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { ThemeProvider } from "./components/ThemeProvider";
+import { ThemeToggle } from "./components/ThemeToggle";
 
 export const metadata: Metadata = {
   title: "Realtime API Agents",
   description: "A demo app from OpenAI.",
 };
 
+function ThemeScript() {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+          (function() {
+            const mode = localStorage.getItem('mode') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+            const theme = localStorage.getItem('theme') || 'default';
+            
+            if (mode === 'dark') document.documentElement.classList.add('dark');
+            if (theme !== 'default') document.documentElement.setAttribute('data-theme', theme + '-' + mode);
+          })();
+        `,
+      }}
+    />
+  );
+}
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={`antialiased`}>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <ThemeScript />
+      </head>
+      <body className="antialiased">
+        <ThemeProvider>
+          {children}
+          <ThemeToggle />
+        </ThemeProvider>
+      </body>
     </html>
   );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 109807b..32ace5d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,11 +6,16 @@ export default {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        primary: "var(--primary)",
+        secondary: "var(--secondary)",
+        accent: "var(--accent)",
+        muted: "var(--muted)",
       },
     },
   },