diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index 57b082e7227fc81650db891d4a421166285cf92d..bd48a445ee98afbff10423269b9abb4e5006d79a 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -3218,17 +3218,6 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
   min-height: 63px;
 }
 
-@media (min-width: 1200px) {
-
-.navbar-background {
-    background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%)
-}
-    .navbar-background:hover {
-      background: black;
-      transition: all 400ms ease-out;
-    }
-  }
-
 .main-menu-grid {
   max-width: none;
   grid-template-areas:
@@ -4525,6 +4514,11 @@ a.icon-link:hover span{
   width: 100%;
 }
 
+.hover\:bg-black:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .hover\:no-underline:hover{
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
@@ -5068,6 +5062,10 @@ a.icon-link:hover span{
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+
+  .xl\:duration-200{
+    transition-duration: 200ms;
+  }
 }
 
 @media (min-width: 1366px){
diff --git a/main/styleguide/source/_patterns/organisms/header.mustache b/main/styleguide/source/_patterns/organisms/header.mustache
index e839225f27fa4454fcff3c8aceee0447a67614f6..2989f2a8e3693247e40c7698394d3d77c97b3b7f 100644
--- a/main/styleguide/source/_patterns/organisms/header.mustache
+++ b/main/styleguide/source/_patterns/organisms/header.mustache
@@ -1,6 +1,6 @@
 <!-- Navbar -->
 <nav
-  class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full">
+  class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full xl:duration-200 hover:bg-black">
   <!-- Logo -->
   <a href="" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-4">
     <img src="../../images/logo-full-black.svg" alt="">
diff --git a/main/styleguide/source/css/organisms/navbar.pcss b/main/styleguide/source/css/organisms/navbar.pcss
index c84f0e268984505fafa9805a6963f511bd24131e..3bdba1c7ca0943e8c4ca5960f50db639707155a0 100644
--- a/main/styleguide/source/css/organisms/navbar.pcss
+++ b/main/styleguide/source/css/organisms/navbar.pcss
@@ -38,13 +38,6 @@
 
 .navbar-background {
   min-height: 63px;
-  @screen xl {
-    background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
-    &:hover {
-      background: black;
-      transition: all 400ms ease-out;
-    }
-  }
 }
 .main-menu-grid {
   max-width: none;
diff --git a/main/templates/main/includes/layout/header.html b/main/templates/main/includes/layout/header.html
index 6031998d9efef94de94146c79fa5043c0c347279..8955d2a5e4355fae6cd33b12d39564920f34fc0a 100644
--- a/main/templates/main/includes/layout/header.html
+++ b/main/templates/main/includes/layout/header.html
@@ -1,7 +1,7 @@
 {% load static wagtailcore_tags %}
 
 <!-- Navbar -->
-<nav class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full">
+<nav class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full xl:duration-200 hover:bg-black">
   <!-- Logo -->
   <a href="/" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-4">
     <img src="{% static "shared/img/logo-full-black.svg" %}" alt="">