diff --git a/frontend/styles.css b/frontend/styles.css
index 36e38075..f1e98c43 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -4,6 +4,10 @@
 @import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap");
 
 @layer base {
+  [x-cloak] {
+    display: none !important;
+  }
+
   body {
     color: white;
     @apply font-cairo;
diff --git a/static/css/styles.css b/static/css/styles.css
index 73d8dca6..11ed7740 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -16,7 +16,7 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: currentColor;
+  border-color: #e5e7eb;
   /* 2 */
 }
 
@@ -582,6 +582,10 @@ select {
   outline: 1px auto -webkit-focus-ring-color;
 }
 
+[x-cloak] {
+  display: none !important;
+}
+
 body {
   color: white;
   font-family: 'Cairo', sans-serif;
@@ -1339,18 +1343,6 @@ input[type=file] {
   transform-origin: top right;
 }
 
-.scale-95 {
-  --tw-scale-x: .95;
-  --tw-scale-y: .95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.scale-100 {
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1529,6 +1521,11 @@ input[type=file] {
   border-color: rgb(49 74 87 / var(--tw-divide-opacity));
 }
 
+.divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-divide-opacity));
+}
+
 .divide-opacity-20 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 0.2;
 }
@@ -1618,6 +1615,11 @@ input[type=file] {
   border-color: rgb(49 74 87 / var(--tw-border-opacity));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
 .border-charcoal {
   --tw-border-opacity: 1;
   border-color: rgb(23 42 52 / var(--tw-border-opacity));
@@ -1642,25 +1644,48 @@ input[type=file] {
   background-color: rgb(90 213 153 / 0.1);
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-charcoal\/60 {
   background-color: rgb(23 42 52 / 0.6);
 }
 
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
 .bg-slate {
   --tw-bg-opacity: 1;
   background-color: rgb(49 74 87 / var(--tw-bg-opacity));
 }
 
-.bg-transparent {
-  background-color: transparent;
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
+
+.bg-opacity-30 {
+  --tw-bg-opacity: 0.3;
 }
 
 .bg-opacity-25 {
   --tw-bg-opacity: 0.25;
 }
 
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
+.bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
 }
 
 .bg-gradient-to-r {
@@ -2030,6 +2055,16 @@ input[type=file] {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-orange {
   --tw-text-opacity: 1;
   color: rgb(255 159 0 / var(--tw-text-opacity));
@@ -2049,6 +2084,21 @@ input[type=file] {
   color: rgb(49 74 87 / var(--tw-text-opacity));
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
 .text-gold {
   --tw-text-opacity: 1;
   color: rgb(244 202 31 / var(--tw-text-opacity));
@@ -2068,12 +2118,19 @@ input[type=file] {
   color: rgb(255 255 255 / 0.6);
 }
 
-.opacity-0 {
-  opacity: 0;
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
-.opacity-100 {
-  opacity: 1;
+.placeholder-gray-500::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-gray-500::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-placeholder-opacity));
 }
 
 .shadow {
@@ -2108,22 +2165,6 @@ input[type=file] {
   transition-duration: 150ms;
 }
 
-.duration-300 {
-  transition-duration: 300ms;
-}
-
-.duration-200 {
-  transition-duration: 200ms;
-}
-
-.ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-.ease-in {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-
 .last\:border-0:last-child {
   border-width: 0px;
 }
@@ -2133,11 +2174,26 @@ input[type=file] {
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-orange:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
diff --git a/tailwind.config.js b/tailwind.config.js
index bf8acaf3..a8f37631 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
       current: 'currentColor',
       white: colors.white,
       emerald: colors.emerald,
+      gray: colors.gray,
       indigo: colors.indigo,
       yellow: colors.yellow,
       red: colors.red,
diff --git a/templates/forum/forum_list.html b/templates/forum/forum_list.html
index d2cdbf1e..9e592fe6 100644
--- a/templates/forum/forum_list.html
+++ b/templates/forum/forum_list.html
@@ -12,7 +12,7 @@
     {% if node.level == root_level %}
     {% if node.obj.is_category %}
     <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border bg-charcoal border-1 border-slate forumlist rounded">
-      <div class="p-0 py-3 px-6 mb-0 bg-gray-200 border-b-1 border-gray-300 text-gray-900">
+      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-gray-300 text-gray-900">
         <div class="flex m-0 px-3 py-2 border-b border-slate">
           <div class="pl-0 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-full forum-name-col">
             <h3 class="m-0 mb-3 h5"><a href="{% url 'forum:forum' node.obj.slug node.obj.id %}" class="text-gray-900">{{ node.obj.name }}</a></h3>
@@ -30,7 +30,7 @@
     {% with node.previous_sibling.obj as previous_sibling %}
     {% if previous_sibling and previous_sibling.is_category or not previous_sibling in forum_contents.visible_forums or not previous_sibling %}
     <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border bg-charcoal border-1 border-slate forumlist">
-      <div class="p-0 py-3 px-6 mb-0 bg-gray-200 border-b-1 border-slate text-gray-900">
+      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-slate text-gray-900">
         <div class="flex m-0 px-3 py-2 border-b border-slate">
           <div class="pl-0 w-3/4 forum-name-col">
             <h3 class="m-0 mb-3 h5 text-gray-900">{% trans "Forums" %}</h3>
@@ -198,7 +198,7 @@
     {% endrecurseforumcontents %}
     {% else %}
     <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border border-1 border-gray-300 forumlist">
-      <div class="p-0 py-3 px-6 mb-0 bg-gray-200 border-b-1 border-gray-300 text-gray-900">
+      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-gray-300 text-gray-900">
         <div class="flex flex-wrap  m-0 px-3 py-2">
           <div class="pl-0 md:w-2/3 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-3/4 forum-name-col">
             <h3 class="m-0 mb-3 h5 text-gray-900">{% trans "Forums" %}</h3>
diff --git a/templates/homepage.html b/templates/homepage.html
index 4c2e62a9..5d5210d5 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -16,7 +16,7 @@
         <p class="mt-3 md:mb-11 max-w-md mx-auto text-base text-gray-500 text-lg md:mt-5 md:text-xl md:max-w-3xl">Experience C++ libraries created by experts to be reliable, skillfully designed, and well-tested.</p>
         <div class="mt-5 max-w-md md:flex justify-center md:justify-between md:mt-8 space-y-3 md:space-y-0">
           <a href="#" class="flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-4"><img class="mt-1 pr-2" src="{% static 'img/icons/icon-download-orng.svg' %}" alt="Downloads" /> Download Latest </a>
-          <a href="#" class="flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
+          <a href="#" class="flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Version Details > </a>
         </div>
       </div>
     </div>
@@ -63,7 +63,7 @@
             <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-base md:px-10"> Download </a>
           </div>
           <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-base md:px-10"> Version Details > </a>
+            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-base md:px-10"> Version Details > </a>
           </div>
         </div>
       </div>
diff --git a/templates/includes/_header.html b/templates/includes/_header.html
index 3e76079f..21e451b3 100644
--- a/templates/includes/_header.html
+++ b/templates/includes/_header.html
@@ -2,7 +2,7 @@
 {% load account socialaccount %}
 
 
-<div class="relative bg-gray-50">
+<div class="relative">
   <div class="relative pb-11 md:pb-6">
     <div>
       <div class="hidden md:block mx-auto px-3 sm:px-6 bg-charcoal">
@@ -66,7 +66,7 @@
                 <span class="inline-block ml-2 text-sm uppercase text-orange"> 1.79.0 Releases on 9-8-22<small> > </small></span>
               </div>
               <button type="button"
-                    class="absolute top-0 right-0 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none"
+                    class="absolute top-0 right-0 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-white focus:outline-none"
                     aria-controls="mobile-menu" @click="isOpen = !isOpen" aria-expanded="false"
                     x-bind:aria-expanded="open.toString()">
                 <svg x-description="Icon when menu is open." x-state:on="Menu open" x-state:off="Menu opened" class="hidden h-6 w-6"
@@ -81,7 +81,7 @@
               <a href="{% url 'home' %}"><img class="inline w-auto h-[30px]" src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}" alt="Boost"></a>
             </div>
             <button type="button"
-                    class="float-right inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none"
+                    class="float-right inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-white focus:outline-none"
                     aria-controls="mobile-menu" @click="isOpen = !isOpen" aria-expanded="false"
                     x-bind:aria-expanded="open.toString()">
               <span class="sr-only">Open main menu</span>
@@ -113,15 +113,15 @@
               <a href="{% url 'donate' %}" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Donate</a>
             </div>
             <div class="px-2 pt-2 pb-3 absolute bottom-10 left-0 text-sm">
-              <a href="{% url 'boost-about' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a>
+              <a href="{% url 'boost-about' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">About</a>
 
-              <a href="{% url 'support' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Support</a>
+              <a href="{% url 'support' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Support</a>
 
-              <a href="{% url 'resources' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Resources</a>
+              <a href="{% url 'resources' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Resources</a>
 
-              <a href="{% url 'account_signup' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Sign Up</a>
+              <a href="{% url 'account_signup' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Sign Up</a>
 
-              <a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Log In </a>
+              <a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Log In </a>
             </div>
           </div>
       </div>
diff --git a/templates/libraries/includes/search_command_palatte.html b/templates/libraries/includes/search_command_palatte.html
index fea2bf64..d4bafbb1 100644
--- a/templates/libraries/includes/search_command_palatte.html
+++ b/templates/libraries/includes/search_command_palatte.html
@@ -6,10 +6,10 @@
      x-transition
      x-cloak
 >
-  <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
+  <div class="fixed inset-0 bg-black bg-opacity-70 transition-opacity"></div>
 
-  <div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
-    <div class="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-20 overflow-hidden rounded-xl bg-black shadow-2xl transition-all">
+  <div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20" x-on:click="showSearch = false">
+    <div class="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-20 overflow-hidden rounded-xl bg-charcoal shadow-2xl transition-all">
       <div class="relative">
         <!-- Heroicon name: outline/magnifying-glass -->
         <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
diff --git a/templates/libraries/list.html b/templates/libraries/list.html
index d0a9201e..c47a56b1 100644
--- a/templates/libraries/list.html
+++ b/templates/libraries/list.html
@@ -29,10 +29,10 @@
         {% csrf_token %}
         <div>
           <label for="id_categories" hidden="true">Categories:</label>
-          <select  onchange="this.form.submit()"
-                   name="categories"
-                   class="mb-3 md:mb-0 w-full md:w-auto cursor-pointer block sm:inline-block text-sm uppercase rounded-md bg-black text-orange border border-slate pl-5 pr-11 py-2"
-                   id="id_categories"
+          <select onchange="this.form.submit()"
+                  name="categories"
+                  class="mb-3 md:mb-0 w-full md:w-auto cursor-pointer block sm:inline-block text-sm uppercase rounded-md bg-black text-orange border border-slate pl-5 pr-11 py-2"
+                  id="id_categories"
           >
             <option>Filter by category</option>
             {% for c in categories %}
@@ -42,6 +42,7 @@
         </div>
       </form>
     </div>
+    <!-- command palatte for search -->
     {% include "libraries/includes/search_command_palatte.html" %}
   </div>
 
diff --git a/templates/socialaccount/snippets/provider_list.html b/templates/socialaccount/snippets/provider_list.html
index 15715f3e..21361062 100644
--- a/templates/socialaccount/snippets/provider_list.html
+++ b/templates/socialaccount/snippets/provider_list.html
@@ -6,7 +6,7 @@
 {% if provider.id == "openid" %}
 {% for brand in provider.get_brands %}
   <a title="{{brand.name}}"
-     class="block px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10 {{provider.id}} {{brand.id}}"
+     class="block px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10 {{provider.id}} {{brand.id}}"
      href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
      >{{brand.name}}</a>
 {% endfor %}
diff --git a/templates/versions/_past_version_list_item.html b/templates/versions/_past_version_list_item.html
index b9828c2a..a03cac56 100644
--- a/templates/versions/_past_version_list_item.html
+++ b/templates/versions/_past_version_list_item.html
@@ -10,8 +10,8 @@
         <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Download </a>
       </div>
       <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-        <a href="{% url 'version-detail' v.pk %}" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
+        <a href="{% url 'version-detail' v.pk %}" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Version Details > </a>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>