diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 1f60fa2..1186d1e 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,5 @@
 <footer class="mt-auto pt-4">
-  <hr class="my-4 h-0.5 border-t-0 bg-slate-50 dark:bg-zinc-600" />
+  <hr class="my-4 h-0.5 border-t-0 bg-slate-300 dark:bg-zinc-600" />
   <div class="mb-4">
     <p class="text-center text-sm text-gray-500 dark:text-gray-400">
       © 2023 Altuğ Bakan
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 12f3765..2de4054 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -69,5 +69,5 @@ const { className } = Astro.props;
       </button>
     </section>
   </div>
-  <hr class="my-4 h-0.5 border-t-0 bg-slate-50 dark:bg-zinc-600" />
+  <hr class="my-4 h-0.5 border-t-0 bg-slate-300 dark:bg-zinc-600" />
 </nav>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 048ddaa..d333eff 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -9,15 +9,9 @@ interface Props {
 const { title } = Astro.props;
 ---
 
-<style>
-  html.dark {
-    @apply bg-zinc-900 from-zinc-900 to-zinc-800 text-white;
-  }
-</style>
-
 <html
   lang="en"
-  class="bg-slate-100 bg-gradient-to-br from-slate-100 to-slate-200 text-black dark:text-white"
+  class="bg-slate-100 bg-gradient-to-br from-slate-100 to-slate-200 text-black"
 >
   <head>
     <meta charset="UTF-8" />
@@ -50,6 +44,12 @@ const { title } = Astro.props;
     <meta property="twitter:description" content="My personal website" />
     <meta property="twitter:image" content="https://alt.ug/images/meta.png" />
 
+    <style is:global>
+      html.dark {
+        @apply bg-zinc-900 from-zinc-900 to-zinc-800 text-white;
+      }
+    </style>
+
     <script is:inline>
       let theme = localStorage.getItem("theme");
 
