diff --git a/ell-studio/src/components/Sidebar.js b/ell-studio/src/components/Sidebar.js
index d6bc1cbf..80ad504d 100644
--- a/ell-studio/src/components/Sidebar.js
+++ b/ell-studio/src/components/Sidebar.js
@@ -12,7 +12,7 @@ const Sidebar = () => {
       to={to}
       className={({ isActive }) => `
         group flex items-center py-3 px-4 rounded-lg transition-all duration-200
-        ${isActive ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground'}
+        ${isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'}
       `}
     >
       <Icon className="w-5 h-5" />
@@ -20,7 +20,7 @@ const Sidebar = () => {
         <span className="ml-3 text-sm font-medium">{label}</span>
       )}
       {!isExpanded && (
-        <div className="fixed left-16 ml-2 px-2 py-1 bg-background text-foreground text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
+        <div className="fixed left-16 ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
           {label}
         </div>
       )}
@@ -31,7 +31,7 @@ const Sidebar = () => {
     <motion.aside 
       initial={false}
       animate={{ width: isExpanded ? 200 : 64 }}
-      className="bg-background h-screen py-6 flex flex-col"
+      className="bg-card border-r border-border h-screen py-6 flex flex-col"
     >
       <div className="flex justify-center items-center mb-8">
         <img src="/gif.gif" alt="ell-studio Logo" className="h-4 invert" />
diff --git a/ell-studio/src/pages/Home.js b/ell-studio/src/pages/Home.js
index 98cb2a17..6436530f 100644
--- a/ell-studio/src/pages/Home.js
+++ b/ell-studio/src/pages/Home.js
@@ -44,58 +44,58 @@ function Home() {
   const memoizedLMPs = useMemo(() => firstLMPs, [firstLMPs]);
 
   if (!memoizedLMPs || !memoizedTraces) {
-    return <div className={`bg-${darkMode ? 'gray-900' : 'gray-100'} min-h-screen flex items-center justify-center`}>
-      <p className={`text-${darkMode ? 'white' : 'black'}`}>Loading...</p>
+    return <div className={`bg-background min-h-screen flex items-center justify-center`}>
+      <p className={`text-foreground`}>Loading...</p>
     </div>;
   }
 
   return (
-    <div className={`bg-${darkMode ? 'gray-900' : 'gray-100'} min-h-screen`}>
+    <div className={`bg-background min-h-screen`}>
       <ResizablePanelGroup direction="horizontal" className="w-full h-screen">
         <ResizablePanel defaultSize={70} minSize={30}>
           <div className="flex flex-col h-full">
-            <div className={`flex items-center justify-between border-b p-2 py-4`}>
-              <span className={`text-xl font-medium text-${darkMode ? 'gray-100' : 'gray-800'} flex items-center`}>
+            <div className="flex items-center justify-between border-b border-border p-4">
+              <span className="text-xl font-medium text-foreground flex items-center">
                 Language Model Programs
               </span>
               <div className="flex items-center">
-                <span className={`mr-4 text-sm text-${darkMode ? 'gray-300' : 'gray-600'}`}>
+                <span className="mr-4 text-sm text-muted-foreground">
                   Total LMPs: {lmps.length}
                 </span>
-                <span className={`text-sm text-${darkMode ? 'gray-300' : 'gray-600'}`}>
+                <span className="text-sm text-muted-foreground">
                   Last Updated: {lmps[0] && lmps[0].versions && lmps[0].versions[0] ? getTimeAgo(lmps[0].versions[0].created_at) : 'N/A'}
                 </span>
               </div>
             </div>
             <div className="w-full h-full">
-            <MemoizedDependencyGraph lmps={memoizedLMPs} traces={memoizedTraces} key={memoizedLMPs.length + memoizedTraces.length}/>
+              <MemoizedDependencyGraph lmps={memoizedLMPs} traces={memoizedTraces} key={memoizedLMPs.length + memoizedTraces.length}/>
             </div>
           </div>
         </ResizablePanel>
         <ResizableHandle withHandle />
         <ResizablePanel defaultSize={30} minSize={20}>
           <ScrollArea className="h-screen">
-            <div className="space-y-2 p-4">
+            <div className="space-y-4 p-4">
               {lmps.map((lmp) => (
                 <Card 
                   key={lmp.name} 
-                  className="cursor-pointer"
+                  className="cursor-pointer hover:bg-accent/50 transition-colors duration-200"
                   onClick={(e) => toggleExpand(lmp.name, e)}
                 >
                   <CardHeader>
                     <div className="flex flex-col space-y-2">
                       <Link 
                         to={`/lmp/${lmp.name}`} 
-                        className={`text-xl font-semibold ${darkMode ? 'text-gray-100 hover:text-blue-300' : 'text-gray-800 hover:text-blue-600'} break-words`}
+                        className="text-xl font-semibold text-foreground hover:text-primary break-words"
                         onClick={(e) => e.stopPropagation()}
                       >
-                    {lmp.name}
+                        {lmp.name}
                       </Link>
                       <div className="flex space-x-2">
-                        <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-200 text-gray-700'}`}>
+                        <span className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground">
                           ID: {truncateId(lmp.lmp_id)}
                         </span>
-                        <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-green-600 text-white' : 'bg-green-100 text-green-800'}`}>
+                        <span className="text-xs px-2 py-1 rounded-full bg-primary text-primary-foreground">
                           Latest
                         </span>
                         <VersionBadge version={lmp.version_number + 1} hash={lmp.lmp_id} />
@@ -103,9 +103,9 @@ function Home() {
                     </div>
                   </CardHeader>
                   <CardContent>
-                  <div className={`bg-${darkMode ? 'gray-700' : 'gray-100'} rounded p-3 mb-4`}>
-                  <code className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
-                    {lmp.source.length > 100 ? `${lmp.source.substring(0, 100)}...` : lmp.source}
+                    <div className="bg-muted rounded p-3 mb-4">
+                      <code className="text-sm text-muted-foreground">
+                        {lmp.source.length > 100 ? `${lmp.source.substring(0, 100)}...` : lmp.source}
                       </code>
                     </div>
                   </CardContent>
diff --git a/ell-studio/src/styles/globals.css b/ell-studio/src/styles/globals.css
index 9418614b..a1cebeff 100644
--- a/ell-studio/src/styles/globals.css
+++ b/ell-studio/src/styles/globals.css
@@ -4,27 +4,49 @@
 
 @layer base {
   :root {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+    --popover: 224 71% 4%;
+    --popover-foreground: 213 31% 91%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+    --secondary: 222.2 47.4% 11.2%;
     --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+    --accent: 216 34% 17%;
     --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
+    --destructive: 0 63% 31%;
     --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+    --ring: 216 34% 17%;
     --radius: 0.5rem;
   }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+    --popover: 224 71% 4%;
+    --popover-foreground: 213 31% 91%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+    --ring: 216 34% 17%;
+  }
 }
 
 @layer base {