diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1a5f1c9..74865d2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,5 +11,11 @@
     "**/.svn/**",
     "**/.nuxt/**"
   ],
-  "cSpell.words": ["cloudinary", "Namecheap", "Nuxt", "Tailwindcss"]
+  "cSpell.words": [
+    "cloudinary",
+    "Namecheap",
+    "Nuxt",
+    "spacegrotesk",
+    "Tailwindcss"
+  ]
 }
diff --git a/app.vue b/app.vue
index 94d9559..1c5794f 100644
--- a/app.vue
+++ b/app.vue
@@ -60,7 +60,7 @@ useHead({
 </script>
 
 <template>
-  <div class="bg-[#F1F2F4] dark:text-zinc-300   dark:bg-[#151818]">
+  <div class="bg-[#F1F2F4] dark:text-zinc-300   dark:bg-slate-950">
     <NuxtLayout>
       <NuxtLoadingIndicator />
       <NuxtPage />
diff --git a/components/blog/Header.vue b/components/blog/Header.vue
index fe75d2c..5b5959e 100644
--- a/components/blog/Header.vue
+++ b/components/blog/Header.vue
@@ -41,7 +41,7 @@ withDefaults(defineProps<Props>(), {
         <div class="flex items-center gap-2 flex-wrap my-5">
           <LogoTag />
           <template v-for="tag in tags" :key="tag">
-            <span class="bg-gray-200 dark:bg-zinc-700 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
+            <span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
           </template>
         </div>
       </div>
diff --git a/components/blog/Toc.vue b/components/blog/Toc.vue
index 6cf2a1a..5a3690c 100644
--- a/components/blog/Toc.vue
+++ b/components/blog/Toc.vue
@@ -7,7 +7,7 @@ const links = articles?.body?.toc?.links || []
 
 <template>
   <div class="lg:col-span-3 sticky top-28 h-96  hidden lg:block  justify-self-end">
-    <div class="border dark:border-gray-800 p-3 rounded-md min-w-[200px]">
+    <div class="border dark:border-gray-800 p-3 rounded-md min-w-[200px] dark:bg-slate-900">
       <h1 class="text-sm font-bold mb-3 border-b dark:border-gray-800 pb-2">
         Table Of Content
       </h1>
diff --git a/components/category/topic.vue b/components/category/topic.vue
index ee0028a..ff228d1 100644
--- a/components/category/topic.vue
+++ b/components/category/topic.vue
@@ -17,7 +17,7 @@ const category = computed(() => {
 
 <template>
   <div class="container mx-auto">
-    <div class="p-6 my-4 mx-3 rounded-md bg-gray-200 dark:bg-gray-800">
+    <div class="p-6 my-4 mx-3 rounded-md bg-gray-200 dark:bg-slate-900">
       <h1 class="text-black dark:text-white font-semibold leading-tight text-xl md:text-2xl">
         #{{ category }}
       </h1>
diff --git a/components/footer/devloper.vue b/components/footer/devloper.vue
index cc82948..c5ce349 100644
--- a/components/footer/devloper.vue
+++ b/components/footer/devloper.vue
@@ -11,7 +11,7 @@
       <NuxtLink
         to="https://github.com/nurRiyad"
         target="_blank"
-        class="p-2 bg-gray-300 text-gray-800 rounded-md"
+        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
         aria-label="Github"
       >
         <Icon name="fa:github" size="1em" />
@@ -19,7 +19,7 @@
       <NuxtLink
         to="https://www.linkedin.com/in/nur-riyad/"
         target="_blank"
-        class="p-2 bg-gray-300 text-gray-800 rounded-md"
+        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
         aria-label="LinkedIn"
       >
         <Icon name="fa:linkedin-square" size="1em" />
@@ -27,7 +27,7 @@
       <NuxtLink
         to="https://twitter.com/qdnvubp"
         target="_blank"
-        class="p-2 bg-gray-300 text-gray-800 rounded-md"
+        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
         aria-label="Twitter"
       >
         <Icon name="fa:twitter-square" size="1em" />
@@ -35,7 +35,7 @@
       <NuxtLink
         to="https://stackoverflow.com/users/16781395/nur-riyad"
         target="_blank"
-        class="p-2 bg-gray-300 text-gray-800 rounded-md"
+        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
         aria-label="StackOverflow"
       >
         <Icon name="fa:stack-overflow" size="1em" />
diff --git a/components/main/footer.vue b/components/main/footer.vue
index 9c92c76..bc489a5 100644
--- a/components/main/footer.vue
+++ b/components/main/footer.vue
@@ -5,7 +5,7 @@ const path = computed(() => route.fullPath.replace('/', ''))
 </script>
 
 <template>
-  <div class="py-5 border-t dark:border-gray-800  mt-5 text-zinc-700 dark:text-zinc-300  ">
+  <div class="py-5 border-t dark:border-gray-800  mt-5 text-zinc-700 dark:text-zinc-300">
     <div class="px-6 container max-w-5xl mx-auto">
       <div class="grid grid-cols-1 md:grid-cols-3">
         <FooterSite v-if="path === 'about'" />
diff --git a/components/main/header.vue b/components/main/header.vue
index 1e95761..33177e3 100644
--- a/components/main/header.vue
+++ b/components/main/header.vue
@@ -37,20 +37,21 @@ function onClick(val: string) {
         </li>
         <li>
           <ClientOnly>
-            <button
-              v-if="colorMode.value === 'dark'"
-              name="dark-mode" title="Dark"
-              class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
-              @click="onClick('light')"
-            >
-              <Icon name="icon-park:moon" size="20" />
-            </button>
             <button
               v-if="colorMode.value === 'light'"
               name="light-mode"
               title="Light"
               class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
               @click="onClick('dark')"
+            >
+              <Icon name="icon-park:moon" size="20" />
+            </button>
+            <button
+              v-if="colorMode.value === 'dark'"
+              name="dark-mode"
+              title="Dark"
+              class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
+              @click="onClick('light')"
             >
               <Icon name="noto:sun" size="20" />
             </button>
diff --git a/layouts/default.vue b/layouts/default.vue
index 63ffd5a..ab47ed2 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="gd-container font-spacegrotesk">
-    <header class="fixed w-full bg-[#F1F2F4] dark:bg-[#151818] z-10">
+    <header class="fixed w-full bg-[#F1F2F4] dark:bg-slate-950 z-10">
       <MainHeader />
     </header>
     <main>
diff --git a/pages/about.vue b/pages/about.vue
index 7737004..3509eb0 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -16,7 +16,7 @@ defineOgImage()
               <NuxtLink
                 to="https://github.com/nurRiyad"
                 target="_blank"
-                class="p-2 bg-gray-300 text-gray-800 rounded-md"
+                class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="Github"
               >
                 <Icon name="fa:github" size="1em" />
@@ -24,7 +24,7 @@ defineOgImage()
               <NuxtLink
                 to="https://www.linkedin.com/in/nur-riyad/"
                 target="_blank"
-                class="p-2 bg-gray-300 text-gray-800 rounded-md"
+                class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="LinkedIn"
               >
                 <Icon name="fa:linkedin-square" size="1em" />
@@ -32,7 +32,7 @@ defineOgImage()
               <NuxtLink
                 to="https://twitter.com/qdnvubp"
                 target="_blank"
-                class="p-2 bg-gray-300 text-gray-800 rounded-md"
+                class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="Twitter"
               >
                 <Icon name="fa:twitter-square" size="1em" />
@@ -40,14 +40,14 @@ defineOgImage()
               <NuxtLink
                 to="https://stackoverflow.com/users/16781395/nur-riyad"
                 target="_blank"
-                class="p-2 bg-gray-300 text-gray-800 rounded-md"
+                class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                 aria-label="StackOverflow"
               >
                 <Icon name="fa:stack-overflow" size="1em" />
               </NuxtLink>
             </div>
           </div>
-          <div class="sm:hidden block col-span-3 pb-5">
+          <div class="sm:hidden block col-span-3 pb-5 dark:bg-slate-700 dark:text-[#F1F2F4]">
             <NuxtImg
               src="/riyad.jpg"
               width="125"
diff --git a/pages/blogs/index.vue b/pages/blogs/index.vue
index db108c8..812ba99 100644
--- a/pages/blogs/index.vue
+++ b/pages/blogs/index.vue
@@ -80,7 +80,7 @@ defineOgImage()
         v-model="searchTest"
         placeholder="Search"
         type="text"
-        class="block w-full bg-[#F1F2F4] dark:bg-zinc-800 dark:placeholder-zinc-500 text-zinc-300  rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+        class="block w-full bg-[#F1F2F4] dark:bg-slate-900 dark:placeholder-zinc-500 text-zinc-300  rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
       >
     </div>