diff --git a/src/base.css b/src/base.css
index 830bbc0..6424015 100644
--- a/src/base.css
+++ b/src/base.css
@@ -10,7 +10,7 @@
 
 @layer base {
   body {
-    @apply bg-zinc-50 dark:bg-zinc-900;
+    @apply bg-zinc-50 dark:bg-zinc-900 dark:text-zinc-50;
   }
   h1,
   h2,
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6763243..4efc3e5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -55,7 +55,7 @@ const projects = await getCollection("projects")
   <div class="grid grid-cols-1 md:grid-cols-2 md:gap-4 py-4 pb-8">
     {
       projects.map(({ data: { title, link, repo, description, language } }) => (
-        <div class="flex md:shadow-sm md:bg-white flex-col py-3 md:p-3 h-full space-y-2 md:rounded-md md:border md:border-zinc-200 dark:border-zinc-600">
+        <div class="flex md:shadow-sm md:bg-white dark:md:bg-black flex-col py-3 md:p-3 h-full space-y-2 md:rounded-md md:border md:border-zinc-200 dark:border-zinc-600">
           <div class="flex flex-row items-center justify-between">
             <h3 class="mb-0">
               <a href={repo}>{title}</a>