diff --git a/src/components/PromptCard.astro b/src/components/PromptCard.astro
index 5e71f61..b6ea91f 100644
--- a/src/components/PromptCard.astro
+++ b/src/components/PromptCard.astro
@@ -1,12 +1,10 @@
 ---
 // PromptCard.astro
-import "../styles/global.css";
-
 const { title, description } = Astro.props;
 ---
 
-<div class="border rounded p-4 bg-white shadow-sm">
+<div class="border rounded p-4 shadow-sm">
   <h3 class="text-lg font-semibold">{title}</h3>
 
-  <p class="text-sm text-gray-600 mt-1">{description}</p>
+  <p class="text-sm text-gray-300 mt-1">{description}</p>
 </div>
diff --git a/src/components/PromptList.astro b/src/components/PromptList.astro
index b1b118c..7d3b062 100644
--- a/src/components/PromptList.astro
+++ b/src/components/PromptList.astro
@@ -1,6 +1,5 @@
 ---
 // PromptList.astro
-import "../styles/global.css";
 import PromptCard from './PromptCard.astro';
 ---
 
diff --git a/src/components/SearchBar.astro b/src/components/SearchBar.astro
index 48efe42..51591e7 100644
--- a/src/components/SearchBar.astro
+++ b/src/components/SearchBar.astro
@@ -1,9 +1,8 @@
 ---
 // SearchBar.astro
-import "../styles/global.css";
 ---
 
-<div class="border-b p-4 bg-white">
+<div class="border-b p-4">
   <input
     type="text"
     placeholder="Search prompts..."
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index 01e19c7..772371b 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -1,20 +1,19 @@
 ---
 // Sidebar.astro
-import "../styles/global.css";
 ---
 
-<aside class="w-64 bg-white border-r h-full p-4">
+<aside class="w-64 border-r h-full p-4 text-gray-100">
   <h2 class="text-lg font-semibold mb-4">Prompt Types</h2>
 
   <ul class="space-y-2">
     <li>
-      <button class="w-full text-left px-3 py-2 rounded hover:bg-gray-100">
+      <button class="w-full text-left text-gray-900 px-3 py-2 rounded bg-gray-300 hover:bg-gray-100">
         System
       </button>
     </li>
 
     <li>
-      <button class="w-full text-left px-3 py-2 rounded hover:bg-gray-100">
+      <button class="w-full text-left text-gray-900 px-3 py-2 rounded bg-gray-300 hover:bg-gray-100">
         Task
       </button>
     </li>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index a7162ca..13106ab 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -10,16 +10,9 @@ const { children } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Prompt Catalog</title>
-    <!-- <link href="/css/tailwind.css" rel="stylesheet" /> -->
-
-    <script type="module">
-      import Alpine from 'alpinejs'
-      window.Alpine = Alpine
-      Alpine.start()
-    </script>
   </head>
 
-  <body class="font-sans antialiased bg-gray-50">
-    {children}
+  <body class="font-sans antialiased bg-gray-500 text-gray-100">
+    <slot />
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d35f0d7..9a43fb2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,4 @@
 ---
-import "../styles/global.css";
 import MainLayout from '../layouts/MainLayout.astro';
 import Sidebar from '../components/Sidebar.astro';
 import SearchBar from '../components/SearchBar.astro';
@@ -7,7 +6,7 @@ import PromptList from '../components/PromptList.astro';
 ---
 
 <MainLayout>
-  <div class="flex h-screen bg-gray-50 text-gray-900">
+  <div class="flex h-screen bg-gray-800 text-gray-100">
     <Sidebar />
 
     <div class="flex-1 flex flex-col overflow-hidden">
