diff --git a/content/header/index.md b/content/header/index.md
index cbe555396..96e9d970f 100644
--- a/content/header/index.md
+++ b/content/header/index.md
@@ -3,7 +3,7 @@ title: "Header"
 insert_anchor_links: "left"
 template: "partials/header.html"
 extra:
-  logoPath: "images/new_logo_tft.png"
+  logoPath: "images/new_logo_tft_light.png"
 
 ---
 
diff --git a/static/images/new_logo_tft_dark.png b/static/images/new_logo_tft_dark.png
new file mode 100644
index 000000000..e8268afd8
Binary files /dev/null and b/static/images/new_logo_tft_dark.png differ
diff --git a/static/images/new_logo_tft.png b/static/images/new_logo_tft_light.png
similarity index 100%
rename from static/images/new_logo_tft.png
rename to static/images/new_logo_tft_light.png
diff --git a/templates/partials/header.html b/templates/partials/header.html
index 6c65f2730..039df8676 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -11,13 +11,13 @@
                 </a>
             </div>
             <div class="-mr-2 -my-2 lg:hidden">
-                <button id="hamburger-btn" type="button" class="bg-black1 inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
+                <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
                     <!-- Heroicon name: menu -->
                     <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                     </svg>
                 </button>
-            <button id="close-hamburger-btn" type="button" class="bg-black1 hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
+            <button id="close-hamburger-btn" type="button" class="hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
                 <!-- Heroicon name: x -->
                 <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -36,7 +36,7 @@
                     {% set current = get_url(path=link_path[1]) ~ "/" %}
                     {% if header_label is containing("http") %}
                         {% if header_label is not containing("threefold") %}
-                        <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-white focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
+                        <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide  focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
                             {{link_label}}
                         </a>
                         {% endif %}
@@ -45,14 +45,14 @@
                             {{link_label}}
                           </a>
                       {% else %}
-                        <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-white focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
+                        <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal  focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
                           {{link_label}}
                         </a>
                       {% endif %}
                 {% else %}
                     <div class="relative">
                         {% set button_id = header_label ~ "-menu-btn" | slugify %}
-                    <button type="button" id="{{button_id}}" class="bg-black1 nav_btn py-3  text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
+                    <button type="button" id="{{button_id}}" class="nav_btn py-3   group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
                         <span>{{ header_label }}</span>
                         <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                     </button>
@@ -65,9 +65,9 @@
 
             <div class="hidden md:inline-block md:order-last">
                 <div class="inline-flex">
-                  {# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
+                 <!-- <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
                     <li class="ml-4">
-                      <a href="https://t.me/threefoldnews" target="_blank" class="text-white">
+                      <a href="https://t.me/threefoldnews" target="_blank" class="">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           width="18"
@@ -87,7 +87,7 @@
                       <a
                         href="javascript:;"
                         onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
-                        class="text-white"
+                        class=""
                       >
                         <svg
                           aria-hidden="true"
@@ -106,9 +106,9 @@
                         </svg>
                       </a>
                     </li> 
-                  </ul> #}
-                  <button class="theme-toggle">
-                    <label clas="text-white" for="darkModeSwitch">Dark Mode:</label>
+                  </ul>  -->
+                  <button class="theme-toggle px-2 mx-2">
+                    <label clas="" for="darkModeSwitch">Dark Mode:</label>
                     <input type="checkbox" id="darkModeSwitch">
                   </button>
                   
@@ -171,13 +171,13 @@
                                     </a>
                                     {% endif %}
                                 {% else %}
-                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
+                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
                                     {{link_label}}
                                 </a>
                                 {% endif %}
                             {% else %}
                                 {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
-                                    <button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
+                                    <button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus: transition ease-in-out duration-150">
                                         {{ header_label }}
                                         <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                                     </button>
@@ -202,7 +202,7 @@
                       </div> #}
 
                       <div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
-                        <a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
+                        <a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
                       </div>
                     </nav>                    
                 </div>