diff --git a/hot_osm/templates/components/header/header_navigation.html b/hot_osm/templates/components/header/header_navigation.html
index 2354f05..fa036b5 100644
--- a/hot_osm/templates/components/header/header_navigation.html
+++ b/hot_osm/templates/components/header/header_navigation.html
@@ -2,7 +2,7 @@
     <a class="h-10" href="#">{% include "../branded_elements/logo.html" %}</a>
     <div class="relative z-0 flex items-center justify-end">
         <!-- Mobile search icon -->
-        {% include "../search/search_icon.html" with classes="mr-hot-1.2 text-gray-500 lg:hidden" %}
+        {% include "../search/search_icon.html" with classes="mr-hot-1.2 text-hot-dark-grey lg:hidden" %}
         <!-- Mobile menu button -->
         {% include "../mobile/mobile_menu_button.html" %}
     </div>
diff --git a/hot_osm/templates/components/mobile/mobile_menu_button.html b/hot_osm/templates/components/mobile/mobile_menu_button.html
index 91d60b5..1b36936 100644
--- a/hot_osm/templates/components/mobile/mobile_menu_button.html
+++ b/hot_osm/templates/components/mobile/mobile_menu_button.html
@@ -1,6 +1,6 @@
 <button type="button"
         @click="isMenuOpen = !isMenuOpen"
-        class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-500 hover:bg-gray-100  focus:outline-none focus:ring-inset lg:hidden"
+        class="relative inline-flex items-center justify-center rounded-md p-2 text-hot-dark-grey hover:bg-hot-light-grey  focus:outline-none focus:ring-inset lg:hidden"
         aria-controls="mobile-menu"
         aria-expanded="false">
     <span class="sr-only">Open main menu</span>
diff --git a/hot_osm/templates/components/mobile/mobile_navigation.html b/hot_osm/templates/components/mobile/mobile_navigation.html
index 7e5294b..573f7cb 100644
--- a/hot_osm/templates/components/mobile/mobile_navigation.html
+++ b/hot_osm/templates/components/mobile/mobile_navigation.html
@@ -13,7 +13,7 @@
             <li>{% include "../branded_elements/button.html" with text="Start Mapping" classes="my-2 ml-3 mr-4" %}</li>
         </ul>
     </nav>
-    <nav class="border-t border-b border-gray-200 py-2">
+    <nav class="border-t border-b border-hot-dark-grey py-2">
         <ul class="gap-y-0.5 list-none pl-0">
             <li>{% include "../mobile/mobile_menu_link.html" with link="#" text="EN" parent=True classes="px-4" %}</li>
             <li>{% include "../mobile/mobile_menu_link.html" with link="#" text="News" classes="px-4" %}</li>
diff --git a/hot_osm/templates/components/nav/secondary_desktop_nav.html b/hot_osm/templates/components/nav/secondary_desktop_nav.html
index 1857423..c00c667 100644
--- a/hot_osm/templates/components/nav/secondary_desktop_nav.html
+++ b/hot_osm/templates/components/nav/secondary_desktop_nav.html
@@ -3,7 +3,7 @@
         <!-- Social media icons -->
         {% include "../branded_elements/social_icons.html" %}
         <!-- Search, Language, News, Contact Us -->
-        <ul class="font-medium font-barlow text-base-16 items-center gap-x-5 text-hot-black border-gray-100 bg-transparent flex border-0 py-2 "
+        <ul class="font-medium font-barlow text-base-16 items-center gap-x-5 text-hot-black border-hot-dark-grey bg-transparent flex border-0 py-2 "
             role="navigation"
             aria-label="Secondary Menu">
             <li>{% include "../search/search_icon.html" %}</li>
diff --git a/hot_osm/templates/components/search/search_modal.html b/hot_osm/templates/components/search/search_modal.html
index 0dee1d2..227e069 100644
--- a/hot_osm/templates/components/search/search_modal.html
+++ b/hot_osm/templates/components/search/search_modal.html
@@ -9,7 +9,7 @@
          x-transition:leave="ease-in duration-200"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
-         class="fixed inset-0 bg-gray-500 bg-opacity-25 backdrop-blur-sm transition-opacity"></div>
+         class="fixed inset-0 bg-hot-dark-grey bg-opacity-25 backdrop-blur-sm transition-opacity"></div>
     <div class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
         <!-- Command palette, show/hide based on modal state -->
         <div @click.outside="isSearchClicked = false"