diff --git a/public/global.css b/public/global.css
index 9711a13..29f523d 100644
--- a/public/global.css
+++ b/public/global.css
@@ -2,12 +2,16 @@
 :root {
     --c-bg: #101010;
     --c-on-bg: #dedede;
+
+    --c-bg-2: #18181b;
 }
 
 @media (prefers-color-scheme: light) {
     :root {
         --c-bg: #f5f5f5;
         --c-on-bg: #101010;
+        
+        --c-bg-2: white;
     }
 }
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 53df2dd..a942f0b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -34,7 +34,7 @@ import Sidebar from "../components/Sidebar.astro";
             <div class="2xl:grid 2xl:grid-cols-2 2xl:gap-2">
                 <div
                     x-data="{open: true}"
-                    class="shadow-lg p-2 bg-white rounded-md max-w-[50rem] border border-slate-600"
+                    class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-slate-600 dark:border-transparent"
                 >
                     <h2
                         class="text-2xl font-bold py-2 pl-2 cursor-pointer hover:underline sticky top-0 border-b border-b-slate-600"
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 3a2172a..493e101 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -6,6 +6,7 @@ export default {
 			colors: {
 				'c-bg': 'var(--c-bg)',
 				'c-on-bg': 'var(--c-on-bg)',
+				'c-bg-2': 'var(--c-bg-2)',
 			},
 		},
 	},