diff --git a/docusaurus.config.js b/docusaurus.config.js
index f4ab67e60..47109a99e 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -528,7 +528,8 @@ const config = {
                         position: 'right',
                     },
                     {
-                        html: `<svg class="githubStars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>`,
+                        label: 'Login',
+                        className: 'loginButton',
                         to: 'https://auth.wcs.api.weaviate.io/auth/realms/SeMI/protocol/openid-connect/auth?client_id=wcs-frontend&scope=openid%20email%20profile&response_type=code&redirect_uri=https%3A%2F%2Fconsole.weaviate.cloud%2Fapi%2Fauth%2Fcallback%2Fkeycloak&state=P3BeeUEpGZNBXSXHycDajZNjrHT_HliA14qrtGovlk8&code_challenge=VZLcWPLzlwCsrvkYzjY3yC9XwUN3KzJqvzXAlzdNYTo&code_challenge_method=S256',
                         position: 'right',
                     },
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 266e05403..35c790ed9 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -357,18 +357,20 @@
   transition: background-color 1s ease-out, border-color 1s ease-out,
     color 1s ease-out;
 
+  &:hover {
+    color: #130c49;
+  }
+
   @media screen and (max-width: 1190px) {
     margin: 0px;
+    width: unset;
   }
 
   @media screen and (max-width: 1150px) {
-    display: none;
-  }
-
-  &:hover {
-    background: #130c49;
-    color: #fff;
-    font-weight: 400;
+    display: block;
+    border: unset;
+    background-color: unset;
+    color: #2b3854;
   }
 }
 
@@ -380,24 +382,44 @@
   align-content: center;
   justify-content: center;
   width: 10.625rem;
-  height: 3.5rem;
-
+  height: 3.125rem;
+  transition: all 0.3s ease;
   border-radius: 0.3125rem;
   background: #130c49;
   color: #ffffff;
+  font-weight: 600;
+
+  &:hover {
+    color: #ffffff !important;
+  }
 
   @media screen and (max-width: 1160px) {
     margin: 0px;
+    width: unset;
   }
 
-  @media screen and (max-width: 999px) {
+  @media screen and (max-width: 996px) {
     display: none;
   }
 
-  &:hover {
-    background: #130c49;
-    color: #fff !important;
+  @media screen and (max-width: 990px) {
+    margin: 0px;
+    width: unset;
+    height: unset;
+    color: var(--ifm-menu-color);
+    flex: 1;
+    line-height: 1.25;
+    padding: var(--ifm-menu-link-padding-vertical)
+      var(--ifm-menu-link-padding-horizontal);
+    display: block;
+    border: unset;
+    background-color: unset;
     font-weight: 400;
+
+    &:hover {
+      background: var(--ifm-menu-color-background-hover);
+      color: var(--ifm-menu-color) !important;
+    }
   }
 }
 
@@ -409,24 +431,44 @@
   align-content: center;
   justify-content: center;
   width: 10.625rem;
-  height: 3.5rem;
-  border: 1px solid #130c49;
+  height: 3.125rem;
+
   border-radius: 0.3125rem;
   color: #130c49;
   background: #ffffff;
+  transition: all 0.3s ease;
+  font-weight: 600;
+  &:hover {
+    color: #130c49;
+  }
 
   @media screen and (max-width: 1160px) {
     margin: 0px;
+    width: unset;
   }
 
   @media screen and (max-width: 999px) {
     display: none;
   }
 
-  &:hover {
-    background: #130c49;
-    color: #fff;
+  @media screen and (max-width: 990px) {
+    margin: 0px;
+    width: unset;
+    height: unset;
+    color: var(--ifm-menu-color);
+    flex: 1;
+    line-height: 1.25;
+    padding: var(--ifm-menu-link-padding-vertical)
+      var(--ifm-menu-link-padding-horizontal);
+    display: block;
+    border: unset;
+    background-color: unset;
     font-weight: 400;
+
+    &:hover {
+      background: var(--ifm-menu-color-background-hover);
+      color: var(--ifm-menu-color) !important;
+    }
   }
 }