diff --git a/css/index.css b/css/index.css
index 17ada12d4..2a3cdc60f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -97,6 +97,8 @@ a img:hover{
 /* new theme */
 
 .dropdown { 
+
+  background-color: rgb(0 0 0 / 50%);
   @apply
   lg:text-lg
   px-6
@@ -104,7 +106,6 @@ a img:hover{
   lg:mr-5
   my-3
   shadow
-  bg-white
   border-black
   capitalize 
   leading-6 
@@ -115,17 +116,18 @@ a img:hover{
   w-full 
   items-start
   rounded 
-  transition 
-  hover:first:text-gray-500 
-  hover:border-stone-200 
-  hover:bg-stone-100 
+  transition  
+  hover:border-stone-700 
+  /* hover:bg-stone-100  */
   p-2 
   text-left
+  text-white
 }
 
 .dropdown a{
   @apply
   px-0
+  text-white
 }
 
 .subtitle {
@@ -380,12 +382,12 @@ background-color:#5596f5 !important;
   }
 
 
-button:hover :is(:where(a)) {
+/* button:hover :is(:where(a)) {
   color: #5e5e5e;
-}
+} */
 
 button :is(:where(p)) {
-  color: #3d3b39;
+  color: #ddd;
   font-weight: 400;
 }
 
diff --git a/static/images/new_logo_tft.png b/static/images/new_logo_tft.png
index ba2214584..b07c72c6e 100644
Binary files a/static/images/new_logo_tft.png and b/static/images/new_logo_tft.png differ
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
index 67128d5c4..8074a0261 100644
--- a/templates/partials/footer.html
+++ b/templates/partials/footer.html
@@ -9,7 +9,7 @@
             <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
                 <div class="xl:flex xl:gap-4">
                     <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
-                        <img class="w-16 h-auto sm:w-15" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
+                        <img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
                         <p class="text-gray-200 text-base font-light leading-6">
                             {{section.description}}
                         </p>
diff --git a/templates/partials/header.html b/templates/partials/header.html
index 83733497f..4bcaf364c 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -4,10 +4,10 @@
 <header id="header-container">
     <div class="z-20 bg-black2 absolute w-full">
         <div class="relative z-50">
-        <div class="mx-auto flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
+        <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
             <div>
                 <a href="{{get_url(path='/')}}" class="flex">
-                    <img class="lg:w-36 h-auto w-24" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
+                    <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
                 </a>
             </div>
             <div class="-mr-2 -my-2 lg:hidden">
@@ -123,7 +123,7 @@
 
 <nav>
     <div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
-        <div class="bg-black">
+        <div style="background-color: rgba(57 57 57);">
             <div id="menu" class="mx-8 lg:mx-10 xl:mx-10 px-6 sm:p-6 md:p-8">
                 {{header_menu | safe }}
             </div>