diff --git a/app.vue b/app.vue
index 03c259e..3ca81ac 100644
--- a/app.vue
+++ b/app.vue
@@ -60,7 +60,7 @@ useHead({
 </script>
 
 <template>
-  <div>
+  <div class="bg-[#F1F2F4]">
     <NuxtLayout>
       <NuxtLoadingIndicator />
       <NuxtPage />
diff --git a/components/category/card.vue b/components/category/card.vue
index 8e23dfb..be774a5 100644
--- a/components/category/card.vue
+++ b/components/category/card.vue
@@ -33,7 +33,7 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
 
 <template>
   <div
-    class="text-white px-5 py-3 rounded hover:underline randbgcolor hover:scale-[1.05] transition-all duration-500"
+    class="text-[#F1F2F4] px-5 py-3 rounded hover:underline randbgcolor hover:scale-[1.05] transition-all duration-500"
   >
     <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-xl font-extrabold">
       <h1>#{{ title }}</h1>
diff --git a/components/footer/connect.vue b/components/footer/connect.vue
index 1ce02e2..77540c2 100644
--- a/components/footer/connect.vue
+++ b/components/footer/connect.vue
@@ -10,7 +10,7 @@
 
     <a
       href="mailto: alasadnurriyad4@gmail.com"
-      class="block text-center w-full bg-sky-700 p-2 rounded-lg text-white mt-3 text-sm"
+      class="block text-center w-full bg-sky-700 p-2 rounded-lg text-[#F1F2F4] mt-3 text-sm"
     >
       Sent Mail
     </a>
diff --git a/layouts/default.vue b/layouts/default.vue
index 6304e30..4f40348 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-white z-10">
+    <header class="fixed w-full bg-[#F1F2F4] z-10">
       <MainHeader />
     </header>
     <main>
diff --git a/pages/blogs/index.vue b/pages/blogs/index.vue
index 0554b88..554f8b5 100644
--- a/pages/blogs/index.vue
+++ b/pages/blogs/index.vue
@@ -78,7 +78,7 @@ useHead({
         v-model="searchTest"
         placeholder="Search"
         type="text"
-        class="block w-full  rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+        class="block w-full bg-[#F1F2F4]  rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
       >
     </div>