diff --git a/src/components/navigation/menu-language-item/menu-language-item.scss b/src/components/navigation/menu-language-item/menu-language-item.scss
index c380d25f58b9d171b293a503fb4e2eef5ed199ed..06f5c9e03c0e8bd5c20c0d0c7e234e5157ed8b09 100644
--- a/src/components/navigation/menu-language-item/menu-language-item.scss
+++ b/src/components/navigation/menu-language-item/menu-language-item.scss
@@ -14,6 +14,28 @@ a {
   text-decoration: none;
   text-transform: uppercase;
 
+  @include breakpoint($wide) {
+    @include font-size(15px, 20px);
+    color: var(--brand-main-light);
+    font-weight: 700;
+    padding: 0 40px 32px;
+
+    &:hover {
+      background-color: var(--grayscale-background-box);
+      color: var(--brand-main);
+    }
+  }
+  @include breakpoint($extrawide) {
+    @include font-size(15px, 20px);
+    color: var(--brand-main-light);
+    font-weight: 700;
+    padding: 0 32px 22px;
+  }
+  @include breakpoint($overwide) {
+    @include font-size(18px, 22px);
+    padding: 0 40px 32px;
+  }
+
   &:focus {
     outline: solid 2px var(--additional-yellow);
     outline-offset: 2px;
@@ -21,17 +43,27 @@ a {
 
   &.is-active {
     .hy-menu-language-item__label {
-      border-bottom-color: var(--additional-orange);
+      color: var(--grayscale-black);
+      font-weight: 700;
+      border-bottom: 2px solid var(--additional-orange);
+
+      @include breakpoint($wide) {
+        border-bottom: 3px solid var(--grayscale-black);
+        padding-bottom: 6px;
+      }
+      @include breakpoint($extrawide) {
+        border-bottom: 3px solid var(--grayscale-black);
+        padding-bottom: 6px;
+      }
+      @include breakpoint($overwide) {
+        padding-bottom: 8px;
+      }
     }
   }
 
   &:not(.is-mobile) {
-    @include font-size(16px, 20px);
-    margin: 0 0 5px;
-  }
-
-  .hy-menu-language-item__label {
-    border-bottom: 2px solid transparent;
-    padding-bottom: 5px;
+    //@include font-size(16px, 20px);
+    margin: 0;
+    // margin: 0 0 5px;
   }
 }
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 4656338280035fd0215a51dac0121a2ed42c73ee..fe8ead0f1322806d0b363ced535859a518b52e62 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -46,6 +46,21 @@
     .menu--language__toggle__caret {
       transform: rotate(180deg);
     }
+    background-color: var(--grayscale-background-box);
+    @include breakpoint($wide) {
+      margin-bottom: -28px;
+      margin-top: -26px;
+      padding: 26px 8px 28px;
+    }
+    @include breakpoint($extrawide) {
+      margin-bottom: -38px;
+      margin-top: -26px;
+      padding: 26px 8px 38px;
+    }
+    @include breakpoint($overwide) {
+      margin-bottom: -50px;
+      padding: 26px 12px 50px;
+    }
   }
 
   > * {
@@ -71,6 +86,17 @@
   top: 40px;
   visibility: hidden;
 
+  @include breakpoint($wide) {
+    padding: 32px 0 0;
+    top: 70px;
+  }
+  @include breakpoint($extrawide) {
+    top: 80px;
+  }
+  @include breakpoint($overwide) {
+    top: 90px;
+  }
+
   &.is-open {
     visibility: visible;
     z-index: 100;
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 52c6fd7f5b837ff007e477da3b36d04b050b1300..ca8371473832fbd83595851e7bd94b9a314fdbc5 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -43,6 +43,7 @@ export class MenuLanguage {
 
   render() {
     const black = 'var(--brand-main-nearly-black)';
+    const menuLanguageContainerClass = ['menu--language'].join(' ');
 
     return this.isMobile ? (
       <Host class={'menu--language'}>
@@ -60,7 +61,7 @@ export class MenuLanguage {
         })}
       </Host>
     ) : (
-      <Host class={'menu--language'}>
+      <Host class={menuLanguageContainerClass}>
         <button
           onClick={() => this.languageMenuToggle()}
           class={{
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index 0138078e25c99efae0ac807ba038eaa6efd6c574..b84677bdc159f5b61815e64bdc07583702f782c6 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -120,7 +120,7 @@
     min-height: 35px;
   }
 
-  @include breakpoint($medium) {
+  @include breakpoint($wide) {
     .menu--language {
       display: none;
       visibility: hidden;
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 53542c52aaf83f04708bf97e1cbe531eae1935cd..68fbb8699e8be45c2fe86072f96fb39fb3431a77 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -90,7 +90,7 @@ export class SiteHeader {
 
   applySizeClasses(size: number) {
     // Set the menu-type based on the width of the browser.
-    if (size < 1200 && size > 960) {
+    if (size <= 1200 && size > 960) {
       this.menuType = MenuType.tablet;
     } else if (size <= 960) {
       this.menuType = MenuType.mobile;