diff --git a/frontend/common/src/styles/global.css b/frontend/common/src/styles/global.css
index ce58adb..4475bff 100644
--- a/frontend/common/src/styles/global.css
+++ b/frontend/common/src/styles/global.css
@@ -37,34 +37,33 @@
   }
 
   .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
 
     --radius: 0.5rem;
   }
diff --git a/frontend/web/src/index.tsx b/frontend/web/src/index.tsx
index c01b666..8d55175 100644
--- a/frontend/web/src/index.tsx
+++ b/frontend/web/src/index.tsx
@@ -27,15 +27,15 @@ const App = () => {
   };
 
   return (
-    <div className="min-h-screen bg-slate-950 text-slate-50">
+    <div className="min-h-screen bg-background text-foreground dark">
       <div className="container mx-auto py-10 px-4">
         <header className="mb-10">
           <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-500 inline-block text-transparent bg-clip-text">shadcn/ui Components Demo</h1>
-          <p className="text-slate-400">A showcase of UI components from the common package</p>
+          <p className="text-muted-foreground">A showcase of UI components from the common package</p>
         </header>
         
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <Card className="border border-slate-800 bg-slate-900">
+          <Card className="border-border bg-card">
             <CardHeader>
               <CardTitle>Button Component</CardTitle>
               <CardDescription>Various button variants from shadcn/ui</CardDescription>
@@ -69,7 +69,7 @@ const App = () => {
             </CardContent>
           </Card>
 
-          <Card className="border border-slate-800 bg-slate-900">
+          <Card className="border-border bg-card">
             <CardHeader>
               <CardTitle>Input Component</CardTitle>
               <CardDescription>Text input with various states</CardDescription>
@@ -83,7 +83,7 @@ const App = () => {
                   onChange={(e) => setInputValue(e.target.value)}
                 />
                 {inputValue && (
-                  <p className="text-sm mt-1 text-slate-400">You typed: {inputValue}</p>
+                  <p className="text-sm mt-1 text-muted-foreground">You typed: {inputValue}</p>
                 )}
               </div>
               <div>
@@ -95,7 +95,7 @@ const App = () => {
                 <div className="relative">
                   <Input placeholder="Search..." />
                   <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-slate-400">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-muted-foreground">
                       <circle cx="11" cy="11" r="8"></circle>
                       <path d="m21 21-4.3-4.3"></path>
                     </svg>
@@ -105,7 +105,7 @@ const App = () => {
             </CardContent>
           </Card>
 
-          <Card className="border border-slate-800 bg-slate-900">
+          <Card className="border-border bg-card">
             <CardHeader>
               <CardTitle>Switch Component</CardTitle>
               <CardDescription>Toggle switch with controlled state</CardDescription>
@@ -118,7 +118,7 @@ const App = () => {
                   onCheckedChange={setSwitchState}
                 />
               </div>
-              <p className="text-sm text-slate-400">
+              <p className="text-sm text-muted-foreground">
                 Current theme: <span className="font-medium">{switchState ? 'Dark' : 'Light'}</span>
               </p>
               <div className="flex items-center justify-between">
@@ -127,18 +127,18 @@ const App = () => {
               </div>
             </CardContent>
             <CardFooter>
-              <p className="text-xs text-slate-500">Click the switch to toggle its state</p>
+              <p className="text-xs text-muted-foreground">Click the switch to toggle its state</p>
             </CardFooter>
           </Card>
 
-          <Card className="border border-slate-800 bg-slate-900">
+          <Card className="border-border bg-card">
             <CardHeader>
               <CardTitle>Card Component</CardTitle>
               <CardDescription>Card with header, content, and footer sections</CardDescription>
             </CardHeader>
             <CardContent>
-              <p className="text-slate-300">Cards are versatile containers that group related content and actions.</p>
-              <div className="mt-4 p-3 bg-slate-800 rounded-md">
+              <p className="text-card-foreground">Cards are versatile containers that group related content and actions.</p>
+              <div className="mt-4 p-3 bg-muted rounded-md">
                 <code className="text-xs text-pink-400">
                   {'<Card>'}<br/>
                   {'  <CardHeader>'}<br/>
@@ -151,14 +151,14 @@ const App = () => {
                 </code>
               </div>
             </CardContent>
-            <CardFooter className="flex justify-between border-t border-slate-800 pt-4">
+            <CardFooter className="flex justify-between border-t border-border pt-4">
               <Button variant="outline" size="sm">Cancel</Button>
               <Button size="sm">Save</Button>
             </CardFooter>
           </Card>
         </div>
 
-        <footer className="mt-12 text-center text-slate-500 text-sm">
+        <footer className="mt-12 text-center text-muted-foreground text-sm">
           <p>Built with shadcn/ui components from the RA-Aid common package</p>
         </footer>
       </div>