diff --git a/app/globals.css b/app/globals.css
index 58a807453..0c84c08ec 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -104,6 +104,7 @@
   --max-width-text-block: 49.5rem;
   --mobile-site-header-height: 70.047px;
   --max-width-navigation: 89.5rem;
+  --main-menu-mobile-height: 75px;
 }
 
 * {
diff --git a/components/Header/HeaderLink/headerLink.module.css b/components/Header/HeaderLink/headerLink.module.css
new file mode 100644
index 000000000..7049d4857
--- /dev/null
+++ b/components/Header/HeaderLink/headerLink.module.css
@@ -0,0 +1,6 @@
+.topLink {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  font-size: var(--typography-Caption-Regular-fontSize);
+}
diff --git a/components/Header/HeaderLink/index.tsx b/components/Header/HeaderLink/index.tsx
new file mode 100644
index 000000000..9b2195ebb
--- /dev/null
+++ b/components/Header/HeaderLink/index.tsx
@@ -0,0 +1,13 @@
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./headerLink.module.css"
+
+import { HeaderLinkProps } from "@/types/components/header/headerLink"
+
+export default function HeaderLink({ children, ...props }: HeaderLinkProps) {
+  return (
+    <Link color="burgundy" className={styles.topLink} {...props}>
+      {children}
+    </Link>
+  )
+}
diff --git a/components/Header/MainMenu/MainMenuButton/menuButton.module.css b/components/Header/MainMenu/MainMenuButton/menuButton.module.css
index 9746f1808..1d999b3ad 100644
--- a/components/Header/MainMenu/MainMenuButton/menuButton.module.css
+++ b/components/Header/MainMenu/MainMenuButton/menuButton.module.css
@@ -2,6 +2,7 @@
   display: flex;
   gap: var(--Spacing-x1);
   align-items: center;
+  width: 100%;
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
   border-width: 0;
diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx
new file mode 100644
index 000000000..616cd10bb
--- /dev/null
+++ b/components/Header/MainMenu/MobileMenu/index.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { Dialog, Modal } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import useDropdownStore from "@/stores/main-menu"
+
+import { GiftIcon, SearchIcon, ServiceIcon } from "@/components/Icons"
+import LanguageSwitcher from "@/components/LanguageSwitcher"
+
+import HeaderLink from "../../HeaderLink"
+import NavigationMenu from "../NavigationMenu"
+
+import styles from "./mobileMenu.module.css"
+
+import { MobileMenuProps } from "@/types/components/header/mobileMenu"
+
+export default function MobileMenu({
+  mainNavigation,
+  languageUrls,
+}: MobileMenuProps) {
+  const intl = useIntl()
+  const { isHamburgerMenuOpen, toggleHamburgerMenu } = useDropdownStore()
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`${styles.hamburger} ${isHamburgerMenuOpen ? styles.isExpanded : ""}`}
+        aria-pressed="false"
+        aria-label={intl.formatMessage({ id: "Menu" })}
+        onClick={toggleHamburgerMenu}
+      >
+        <span className={styles.bar}></span>
+      </button>
+      <Modal
+        className={styles.modal}
+        isOpen={isHamburgerMenuOpen}
+        onOpenChange={toggleHamburgerMenu}
+      >
+        <Dialog
+          className={styles.dialog}
+          aria-label={intl.formatMessage({ id: "Menu" })}
+        >
+          <NavigationMenu variant="mobile" items={mainNavigation} />
+          <footer className={styles.footer}>
+            <HeaderLink href="#">
+              <SearchIcon width={20} height={20} color="burgundy" />
+              {intl.formatMessage({ id: "Find booking" })}
+            </HeaderLink>
+            <HeaderLink href="#">
+              <GiftIcon width={20} height={20} color="burgundy" />
+              {intl.formatMessage({ id: "Join Scandic Friends" })}
+            </HeaderLink>
+            <HeaderLink href="#">
+              <ServiceIcon width={20} height={20} color="burgundy" />
+              {intl.formatMessage({ id: "Customer service" })}
+            </HeaderLink>
+            <LanguageSwitcher urls={languageUrls} />
+          </footer>
+        </Dialog>
+      </Modal>
+    </>
+  )
+}
diff --git a/components/Header/MainMenu/MobileMenu/mobileMenu.module.css b/components/Header/MainMenu/MobileMenu/mobileMenu.module.css
new file mode 100644
index 000000000..a36886e21
--- /dev/null
+++ b/components/Header/MainMenu/MobileMenu/mobileMenu.module.css
@@ -0,0 +1,109 @@
+@keyframes slide-in {
+  from {
+    right: -100vw;
+  }
+
+  to {
+    right: 0;
+  }
+}
+
+.hamburger {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  justify-self: flex-start;
+  padding: 11px 8px 16px;
+  user-select: none;
+}
+
+.bar,
+.bar::after,
+.bar::before {
+  background: var(--Base-Text-High-contrast);
+  border-radius: 2.3px;
+  display: inline-block;
+  height: 3px;
+  position: relative;
+  transition: all 0.2s;
+  width: 32px;
+}
+
+.bar::after,
+.bar::before {
+  content: "";
+  left: 0;
+  position: absolute;
+  transform-origin: 2.286px center;
+}
+
+.bar::after {
+  top: -8px;
+}
+
+.bar::before {
+  top: 8px;
+}
+
+.isExpanded .bar {
+  background: transparent;
+}
+
+.isExpanded .bar::after,
+.isExpanded .bar::before {
+  top: 0;
+  transform-origin: 50% 50%;
+  width: 32px;
+}
+
+.isExpanded .bar::after {
+  transform: rotate(-45deg);
+}
+
+.isExpanded .bar::before {
+  transform: rotate(45deg);
+}
+
+@media screen and (min-width: 768px) {
+  .hamburger {
+    display: none;
+  }
+}
+
+.overlay {
+  position: absolute;
+  top: var(--main-menu-mobile-height);
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.modal {
+  position: fixed;
+  right: auto;
+  top: var(--main-menu-mobile-height);
+  bottom: 0;
+  width: 100%;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
+.modal[data-entering] {
+  animation: slide-in 0.3s;
+}
+.modal[data-exiting] {
+  animation: slide-in 0.3s reverse;
+}
+
+.dialog {
+  height: 100%;
+  overflow-y: auto;
+  display: grid;
+  align-content: space-between;
+}
+
+.footer {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+  display: grid;
+  gap: var(--Spacing-x2);
+}
diff --git a/components/Header/MainMenu/MyPagesMenu/index.tsx b/components/Header/MainMenu/MyPagesMenu/index.tsx
index 6407cf382..42cd370ab 100644
--- a/components/Header/MainMenu/MyPagesMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenu/index.tsx
@@ -35,7 +35,9 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
     <div className={styles.myPagesMenu}>
       <MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        <span className={styles.userName}>
+          {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        </span>
         <ChevronDownIcon
           className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
           color="red"
@@ -98,9 +100,15 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
       </nav>
     </div>
   ) : (
-    <Link href={myPages[lang]} className={styles.link}>
+    <Link
+      href={myPages[lang]}
+      className={styles.loginLink}
+      aria-label={intl.formatMessage({ id: "Log in/Join" })}
+    >
       <Avatar />
-      {intl.formatMessage({ id: "Log in/Join" })}
+      <span className={styles.userName}>
+        {intl.formatMessage({ id: "Log in/Join" })}
+      </span>
     </Link>
   )
 }
diff --git a/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css b/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
index 459fb6d9f..8d6b2fe1c 100644
--- a/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
+++ b/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
@@ -2,11 +2,8 @@
   position: relative;
 }
 
-.button {
-  font-weight: 600;
-}
-
 .chevron {
+  display: none;
   transition: transform 0.2s;
 }
 
@@ -14,6 +11,12 @@
   transform: rotate(180deg);
 }
 
+.userName {
+  display: none;
+  font-weight: 600;
+  color: var(--Base-Text-High-contrast);
+}
+
 .dropdown {
   position: absolute;
   top: 46px;
@@ -80,6 +83,15 @@
   opacity: 0;
 }
 
-.link:hover .arrow {
-  opacity: 1;
+.loginLink {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .userName,
+  .chevron {
+    display: initial;
+  }
 }
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
index 6d00244ff..4efc44086 100644
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
@@ -2,33 +2,46 @@
 
 import { useState } from "react"
 
-import { ChevronDownIcon } from "@/components/Icons"
+import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 
 import MainMenuButton from "../../MainMenuButton"
+import { navigationMenuItemVariants } from "./variants"
 
 import styles from "./navigationMenuItem.module.css"
 
 import { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
 
-export default function MenuItem({ item }: NavigationMenuItemProps) {
+export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
   const { children, title, href, seeAllLinkText, infoCard } = item
   const [isExpanded, setIsExpanded] = useState(false)
+  const isMobile = variant === "mobile"
 
   function handleButtonClick() {
     setIsExpanded((prev) => !prev)
   }
 
   return children?.length ? (
-    <MainMenuButton onClick={handleButtonClick}>
+    <MainMenuButton
+      onClick={handleButtonClick}
+      className={navigationMenuItemVariants({ variant })}
+    >
       {title}
-      <ChevronDownIcon
-        className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
-        color="red"
-      />
+      {isMobile ? (
+        <ChevronRightIcon className={`${styles.chevron}`} color="red" />
+      ) : (
+        <ChevronDownIcon
+          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+          color="red"
+        />
+      )}
     </MainMenuButton>
   ) : (
-    <Link href={href} color="burgundy">
+    <Link
+      href={href}
+      color="burgundy"
+      className={navigationMenuItemVariants({ variant })}
+    >
       {title}
     </Link>
   )
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
index c743f0649..b509f4e73 100644
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
@@ -1,3 +1,10 @@
+.navigationMenuItem.mobile {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--Spacing-x2) 0;
+  font-size: var(--typography-Subtitle-1-Mobile-fontSize);
+}
+
 .chevron {
   transition: transform 0.2s;
 }
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/variants.ts b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/variants.ts
new file mode 100644
index 000000000..06eead455
--- /dev/null
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/variants.ts
@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./navigationMenuItem.module.css"
+
+export const navigationMenuItemVariants = cva(styles.navigationMenuItem, {
+  variants: {
+    variant: {
+      default: styles.default,
+      mobile: styles.mobile,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
diff --git a/components/Header/MainMenu/NavigationMenu/index.tsx b/components/Header/MainMenu/NavigationMenu/index.tsx
index f5168ab21..08534f56e 100644
--- a/components/Header/MainMenu/NavigationMenu/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/index.tsx
@@ -1,15 +1,19 @@
 import NavigationMenuItem from "./NavigationMenuItem"
+import { navigationMenuVariants } from "./variants"
 
 import styles from "./navigationMenu.module.css"
 
 import { NavigationMenuProps } from "@/types/components/header/navigationMenu"
 
-export default function NavigationMenu({ items }: NavigationMenuProps) {
+export default function NavigationMenu({
+  items,
+  variant,
+}: NavigationMenuProps) {
   return (
-    <ul className={styles.navigationMenu}>
+    <ul className={navigationMenuVariants({ variant })}>
       {items.map((item) => (
-        <li key={item.id}>
-          <NavigationMenuItem item={item} />
+        <li key={item.id} className={styles.item}>
+          <NavigationMenuItem variant={variant} item={item} />
         </li>
       ))}
     </ul>
diff --git a/components/Header/MainMenu/NavigationMenu/navigationMenu.module.css b/components/Header/MainMenu/NavigationMenu/navigationMenu.module.css
index 066aca610..6c554acde 100644
--- a/components/Header/MainMenu/NavigationMenu/navigationMenu.module.css
+++ b/components/Header/MainMenu/NavigationMenu/navigationMenu.module.css
@@ -1,8 +1,26 @@
 .navigationMenu {
   list-style: none;
   margin: 0;
-  display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--Spacing-x4);
+  display: none;
+}
+
+.navigationMenu.mobile {
+  display: grid;
+  width: 100%;
+  gap: 0;
+  justify-content: stretch;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x2);
+}
+
+.navigationMenu.mobile .item {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+@media screen and (min-width: 768px) {
+  .navigationMenu.default {
+    display: flex;
+  }
 }
diff --git a/components/Header/MainMenu/NavigationMenu/variants.ts b/components/Header/MainMenu/NavigationMenu/variants.ts
new file mode 100644
index 000000000..b1c37d49b
--- /dev/null
+++ b/components/Header/MainMenu/NavigationMenu/variants.ts
@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./navigationMenu.module.css"
+
+export const navigationMenuVariants = cva(styles.navigationMenu, {
+  variants: {
+    variant: {
+      default: styles.default,
+      mobile: styles.mobile,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
diff --git a/components/Header/MainMenu/index.tsx b/components/Header/MainMenu/index.tsx
index 288400a4b..db7d448d2 100644
--- a/components/Header/MainMenu/index.tsx
+++ b/components/Header/MainMenu/index.tsx
@@ -6,12 +6,15 @@ import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 
 import { navigationMenuItems } from "../tempHeaderData"
+import MobileMenu from "./MobileMenu"
 import MyPagesMenu from "./MyPagesMenu"
 import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
 
-export default async function MainMenu() {
+import { MainMenuProps } from "@/types/components/header/mainMenu"
+
+export default async function MainMenu({ languageUrls }: MainMenuProps) {
   const intl = await getIntl()
   const myPagesNavigation =
     await serverClient().contentstack.myPages.navigation.get()
@@ -28,13 +31,19 @@ export default async function MainMenu() {
             data-js="scandiclogoimg"
             data-nosvgsrc="/_static/img/scandic-logotype.png"
             itemProp="logo"
-            height={24}
+            height={22}
             src="/_static/img/scandic-logotype.svg"
-            width={113}
+            width={103}
           />
         </Link>
-        <NavigationMenu items={navigationMenuItems} />
-        <MyPagesMenu navigation={myPagesNavigation} user={user} />
+        <div className={styles.menus}>
+          <NavigationMenu items={navigationMenuItems} />
+          <MyPagesMenu navigation={myPagesNavigation} user={user} />
+          <MobileMenu
+            languageUrls={languageUrls}
+            mainNavigation={navigationMenuItems}
+          />
+        </div>
       </nav>
     </div>
   )
diff --git a/components/Header/MainMenu/mainMenu.module.css b/components/Header/MainMenu/mainMenu.module.css
index ddcb33627..26c13c8e3 100644
--- a/components/Header/MainMenu/mainMenu.module.css
+++ b/components/Header/MainMenu/mainMenu.module.css
@@ -7,8 +7,35 @@
 .nav {
   max-width: var(--max-width-navigation);
   margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: max-content 1fr;
   align-items: center;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x2);
+}
+
+.menus {
+  display: flex;
+  justify-self: end;
+  align-items: center;
+  gap: var(--Spacing-x2);
+}
+
+.logoLink {
+  display: inline-flex;
+  width: auto;
+}
+
+.logo {
+  width: 6.4375rem;
+}
+
+@media screen and (min-width: 768px) {
+  .nav {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--Spacing-x3);
+  }
+  .menus {
+    display: contents;
+  }
 }
diff --git a/components/Header/TopMenu/Search/index.tsx b/components/Header/TopMenu/Search/index.tsx
index f0b3316a7..abd840bc0 100644
--- a/components/Header/TopMenu/Search/index.tsx
+++ b/components/Header/TopMenu/Search/index.tsx
@@ -4,15 +4,15 @@ import { useIntl } from "react-intl"
 
 import { SearchIcon } from "@/components/Icons"
 
-import TopMenuButton from "../TopMenuButton"
+import styles from "./search.module.css"
 
 export default function Search() {
   const intl = useIntl()
 
   return (
-    <TopMenuButton>
+    <button type="button" className={styles.button}>
       <SearchIcon width={20} height={20} color="burgundy" />
       {intl.formatMessage({ id: "Find booking" })}
-    </TopMenuButton>
+    </button>
   )
 }
diff --git a/components/Header/TopMenu/Search/search.module.css b/components/Header/TopMenu/Search/search.module.css
index 004e01d19..45d5bb1b1 100644
--- a/components/Header/TopMenu/Search/search.module.css
+++ b/components/Header/TopMenu/Search/search.module.css
@@ -1,9 +1,20 @@
 .button {
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
   border-width: 0;
+  padding: 0;
   cursor: pointer;
   display: flex;
   gap: var(--Spacing-x1);
   align-items: center;
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .button {
+    font-size: var(--typography-Body-Bold-fontSize);
+    font-family: var(--typography-Body-Bold-fontFamily);
+  }
 }
diff --git a/components/Header/TopMenu/TopMenuButton/index.tsx b/components/Header/TopMenu/TopMenuButton/index.tsx
deleted file mode 100644
index 4e42b05e0..000000000
--- a/components/Header/TopMenu/TopMenuButton/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import styles from "./topMenuButton.module.css"
-
-import { TopMenuButtonProps } from "@/types/components/header/topMenuButton"
-
-export default function TopMenuButton({
-  children,
-  ...props
-}: TopMenuButtonProps) {
-  return (
-    <button type="button" className={styles.button} {...props}>
-      {children}
-    </button>
-  )
-}
diff --git a/components/Header/TopMenu/TopMenuButton/topMenuButton.module.css b/components/Header/TopMenu/TopMenuButton/topMenuButton.module.css
deleted file mode 100644
index 004e01d19..000000000
--- a/components/Header/TopMenu/TopMenuButton/topMenuButton.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.button {
-  background-color: transparent;
-  color: var(--Base-Text-High-contrast);
-  border-width: 0;
-  cursor: pointer;
-  display: flex;
-  gap: var(--Spacing-x1);
-  align-items: center;
-}
diff --git a/components/Header/TopMenu/index.tsx b/components/Header/TopMenu/index.tsx
index f1555a5bf..b47a6d36d 100644
--- a/components/Header/TopMenu/index.tsx
+++ b/components/Header/TopMenu/index.tsx
@@ -1,32 +1,29 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import { GiftIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
+import { GiftIcon, SearchIcon } from "@/components/Icons"
+import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { getIntl } from "@/i18n"
 
-import LanguageSwitcher from "./LanguageSwitcher"
-import Search from "./Search"
+import HeaderLink from "../HeaderLink"
 
 import styles from "./topMenu.module.css"
 
-export default async function TopMenu() {
-  const intl = await getIntl()
-  const languages = await serverClient().contentstack.languageSwitcher.get()
+import { TopMenuProps } from "@/types/components/header/topMenu"
 
-  if (!languages) {
-    return null
-  }
+export default async function TopMenu({ languageUrls }: TopMenuProps) {
+  const intl = await getIntl()
 
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
-        <Link variant="icon" color="burgundy" href="#" size="small">
+        <HeaderLink href="#">
           <GiftIcon width={20} height={20} color="burgundy" />
           {intl.formatMessage({ id: "Join Scandic Friends" })}
-        </Link>
+        </HeaderLink>
         <div className={styles.right}>
-          <LanguageSwitcher urls={languages.urls} />
-          <Search />
+          <LanguageSwitcher urls={languageUrls} />
+          <HeaderLink href="#">
+            <SearchIcon width={20} height={20} color="burgundy" />
+            {intl.formatMessage({ id: "Find booking" })}
+          </HeaderLink>
         </div>
       </div>
     </div>
diff --git a/components/Header/TopMenu/topMenu.module.css b/components/Header/TopMenu/topMenu.module.css
index e78f57d92..17a739989 100644
--- a/components/Header/TopMenu/topMenu.module.css
+++ b/components/Header/TopMenu/topMenu.module.css
@@ -1,4 +1,5 @@
 .topMenu {
+  display: none;
   background-color: var(--Base-Surface-Subtle-Normal);
   padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
   border-bottom: 1px solid var(--Base-Border-Subtle);
@@ -17,3 +18,9 @@
   gap: var(--Spacing-x2);
   align-items: center;
 }
+
+@media screen and (min-width: 768px) {
+  .topMenu {
+    display: block;
+  }
+}
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index d6693a52b..d4e01de0f 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -1,13 +1,21 @@
+import { serverClient } from "@/lib/trpc/server"
+
 import MainMenu from "./MainMenu"
 import TopMenu from "./TopMenu"
 
 import styles from "./header.module.css"
 
 export default async function Header() {
+  const languages = await serverClient().contentstack.languageSwitcher.get()
+
+  if (!languages) {
+    return null
+  }
+
   return (
     <header className={styles.header}>
-      <TopMenu />
-      <MainMenu />
+      <TopMenu languageUrls={languages.urls} />
+      <MainMenu languageUrls={languages.urls} />
     </header>
   )
 }
diff --git a/components/Icons/ChevronRight.tsx b/components/Icons/ChevronRight.tsx
index 1b66b90a3..9930ac095 100644
--- a/components/Icons/ChevronRight.tsx
+++ b/components/Icons/ChevronRight.tsx
@@ -11,32 +11,29 @@ export default function ChevronRightIcon({
   return (
     <svg
       className={classNames}
-      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
       height="20"
       viewBox="0 0 20 20"
-      width="20"
-      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
       {...props}
     >
-      <g id="chevron_right_small">
-        <mask
-          id="mask0_4140_3161"
-          style={{ maskType: "alpha" }}
-          maskUnits="userSpaceOnUse"
-          x="0"
-          y="0"
-          width="20"
-          height="20"
-        >
-          <rect id="Bounding box" width="20" height="20" fill="#D9D9D9" />
-        </mask>
-        <g mask="url(#mask0_4140_3161)">
-          <path
-            id="Vector"
-            d="M10.5417 10.0001L7.3125 6.77095C7.16667 6.62512 7.09375 6.4463 7.09375 6.23449C7.09375 6.02269 7.16667 5.84039 7.3125 5.68762C7.45833 5.53484 7.63889 5.45671 7.85417 5.45324C8.06944 5.44977 8.25347 5.52442 8.40625 5.6772L12.1771 9.44803C12.2535 9.52442 12.3108 9.60949 12.349 9.70324C12.3872 9.79699 12.4063 9.89595 12.4063 10.0001C12.4063 10.1043 12.3872 10.2032 12.349 10.297C12.3108 10.3907 12.2535 10.4758 12.1771 10.5522L8.40625 14.323C8.25347 14.4758 8.06944 14.5505 7.85417 14.547C7.63889 14.5435 7.45833 14.4654 7.3125 14.3126C7.16667 14.1598 7.09375 13.9775 7.09375 13.7657C7.09375 13.5539 7.16667 13.3751 7.3125 13.2293L10.5417 10.0001Z"
-            fill="#8F4350"
-          />
-        </g>
+      <mask
+        id="mask0_2291_1656"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2291_1656)">
+        <path
+          d="M12.1042 9.99967L6.28125 4.17676C6.10069 3.9962 6.00868 3.77572 6.00521 3.5153C6.00174 3.25488 6.09028 3.0344 6.27083 2.85384C6.45139 2.67329 6.67188 2.58301 6.93229 2.58301C7.19271 2.58301 7.41319 2.67329 7.59375 2.85384L13.7708 9.02051C13.9167 9.16634 14.0191 9.31912 14.0781 9.47884C14.1372 9.63856 14.1667 9.81217 14.1667 9.99967C14.1667 10.1872 14.1372 10.3608 14.0781 10.5205C14.0191 10.6802 13.9167 10.833 13.7708 10.9788L7.60417 17.1455C7.42361 17.3261 7.20139 17.4181 6.9375 17.4215C6.67361 17.425 6.45139 17.3365 6.27083 17.1559C6.09028 16.9754 6 16.7549 6 16.4945C6 16.234 6.09028 16.0136 6.27083 15.833L12.1042 9.99967Z"
+          fill="#CD0921"
+        />
       </g>
     </svg>
   )
diff --git a/components/Icons/Search.tsx b/components/Icons/Search.tsx
index 3e91f1f5c..aa9f15e52 100644
--- a/components/Icons/Search.tsx
+++ b/components/Icons/Search.tsx
@@ -2,7 +2,7 @@ import { iconVariants } from "./variants"
 
 import type { IconProps } from "@/types/components/icon"
 
-export default function GiftIcon({ className, color, ...props }: IconProps) {
+export default function SearchIcon({ className, color, ...props }: IconProps) {
   const classNames = iconVariants({ className, color })
   return (
     <svg
diff --git a/components/Icons/Service.tsx b/components/Icons/Service.tsx
new file mode 100644
index 000000000..1f91f7cd8
--- /dev/null
+++ b/components/Icons/Service.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ServiceIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_2291_1682"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2291_1682)">
+        <path
+          d="M15.792 18.3337C14.0559 18.3337 12.3406 17.9552 10.6462 17.1982C8.95171 16.4413 7.41005 15.3684 6.02116 13.9795C4.63227 12.5906 3.55935 11.0489 2.80241 9.35449C2.04546 7.66005 1.66699 5.94477 1.66699 4.20866C1.66699 3.95866 1.75033 3.75033 1.91699 3.58366C2.08366 3.41699 2.29199 3.33366 2.54199 3.33366H5.91699C6.11144 3.33366 6.28505 3.39963 6.43783 3.53158C6.5906 3.66352 6.68088 3.81977 6.70866 4.00033L7.25033 6.91699C7.2781 7.13921 7.27116 7.32671 7.22949 7.47949C7.18783 7.63227 7.11144 7.76421 7.00033 7.87533L4.97949 9.91699C5.25727 10.4309 5.58713 10.9274 5.96908 11.4066C6.35102 11.8857 6.77116 12.3475 7.22949 12.792C7.66005 13.2225 8.11144 13.6219 8.58366 13.9899C9.05588 14.358 9.55588 14.6948 10.0837 15.0003L12.042 13.042C12.167 12.917 12.3302 12.8232 12.5316 12.7607C12.733 12.6982 12.9309 12.6809 13.1253 12.7087L16.0003 13.292C16.1948 13.3475 16.3545 13.4482 16.4795 13.5941C16.6045 13.7399 16.667 13.9031 16.667 14.0837V17.4587C16.667 17.7087 16.5837 17.917 16.417 18.0837C16.2503 18.2503 16.042 18.3337 15.792 18.3337ZM4.18783 8.33366L5.56283 6.95866L5.20866 5.00033H3.35449C3.42394 5.56977 3.52116 6.13227 3.64616 6.68783C3.77116 7.24338 3.95171 7.79199 4.18783 8.33366ZM11.6462 15.792C12.1878 16.0281 12.7399 16.2156 13.3024 16.3545C13.8649 16.4934 14.4309 16.5837 15.0003 16.6253V14.792L13.042 14.3962L11.6462 15.792ZM14.167 10.0003C13.0142 10.0003 12.0316 9.59408 11.2191 8.78158C10.4066 7.96908 10.0003 6.98644 10.0003 5.83366C10.0003 4.68088 10.4066 3.69824 11.2191 2.88574C12.0316 2.07324 13.0142 1.66699 14.167 1.66699C15.3198 1.66699 16.3024 2.07324 17.1149 2.88574C17.9274 3.69824 18.3337 4.68088 18.3337 5.83366C18.3337 6.98644 17.9274 7.96908 17.1149 8.78158C16.3024 9.59408 15.3198 10.0003 14.167 10.0003ZM13.7503 8.33366H14.5837V5.00033H13.7503V8.33366ZM14.167 4.16699C14.2781 4.16699 14.3753 4.12533 14.4587 4.04199C14.542 3.95866 14.5837 3.86144 14.5837 3.75033C14.5837 3.63921 14.542 3.54199 14.4587 3.45866C14.3753 3.37533 14.2781 3.33366 14.167 3.33366C14.0559 3.33366 13.9587 3.37533 13.8753 3.45866C13.792 3.54199 13.7503 3.63921 13.7503 3.75033C13.7503 3.86144 13.792 3.95866 13.8753 4.04199C13.9587 4.12533 14.0559 4.16699 14.167 4.16699Z"
+          fill="#4D001B"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/get-icon-by-icon-name.ts b/components/Icons/get-icon-by-icon-name.ts
index 3c7a37d7e..79feb4b0c 100644
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -41,6 +41,7 @@ import {
   RestaurantIcon,
   SaunaIcon,
   SearchIcon,
+  ServiceIcon,
   TshirtWashIcon,
   WarningTriangle,
   WifiIcon,
@@ -128,6 +129,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return SaunaIcon
     case IconName.Search:
       return SearchIcon
+    case IconName.Service:
+      return ServiceIcon
     case IconName.Tripadvisor:
       return TripAdvisorIcon
     case IconName.TshirtWash:
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index 0dbb3b628..31abcd5ca 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -39,6 +39,7 @@ export { default as RestaurantIcon } from "./Restaurant"
 export { default as SaunaIcon } from "./Sauna"
 export { default as ScandicLogoIcon } from "./ScandicLogo"
 export { default as SearchIcon } from "./Search"
+export { default as ServiceIcon } from "./Service"
 export { default as TshirtWashIcon } from "./TshirtWash"
 export { default as WarningTriangle } from "./WarningTriangle"
 export { default as WifiIcon } from "./Wifi"
diff --git a/components/Header/TopMenu/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx
similarity index 93%
rename from components/Header/TopMenu/LanguageSwitcher/index.tsx
rename to components/LanguageSwitcher/index.tsx
index 638a58dba..e5ab88c5e 100644
--- a/components/Header/TopMenu/LanguageSwitcher/index.tsx
+++ b/components/LanguageSwitcher/index.tsx
@@ -8,8 +8,6 @@ import useDropdownStore from "@/stores/main-menu"
 import { CheckIcon, ChevronDownIcon, GlobeIcon } from "@/components/Icons"
 import useLang from "@/hooks/useLang"
 
-import TopMenuButton from "../TopMenuButton"
-
 import styles from "./languageSwitcher.module.css"
 
 import { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
@@ -22,7 +20,11 @@ export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
 
   return (
     <div className={styles.languageSwitcher}>
-      <TopMenuButton onClick={toggleLanguageSwitcher}>
+      <button
+        type="button"
+        className={styles.button}
+        onClick={toggleLanguageSwitcher}
+      >
         <GlobeIcon width={20} height={20} color="burgundy" />
         <span>{languages[currentLanguage]}</span>
         <ChevronDownIcon
@@ -31,7 +33,8 @@ export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
           height={20}
           color="burgundy"
         />
-      </TopMenuButton>
+      </button>
+
       <div
         className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
       >
diff --git a/components/Header/TopMenu/LanguageSwitcher/languageSwitcher.module.css b/components/LanguageSwitcher/languageSwitcher.module.css
similarity index 78%
rename from components/Header/TopMenu/LanguageSwitcher/languageSwitcher.module.css
rename to components/LanguageSwitcher/languageSwitcher.module.css
index ff2301963..1eeeab77b 100644
--- a/components/Header/TopMenu/LanguageSwitcher/languageSwitcher.module.css
+++ b/components/LanguageSwitcher/languageSwitcher.module.css
@@ -5,14 +5,20 @@
 .button {
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
   border-width: 0;
+  padding: 0;
   cursor: pointer;
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, max-content) 1fr;
   gap: var(--Spacing-x1);
   align-items: center;
+  width: 100%;
 }
 
 .chevron {
+  justify-self: end;
   transition: transform 0.2s;
 }
 
@@ -78,3 +84,11 @@
 .link:hover {
   font-weight: 600;
 }
+
+@media screen and (min-width: 768px) {
+  .button {
+    grid-template-columns: repeat(3, max-content);
+    font-size: var(--typography-Body-Bold-fontSize);
+    font-family: var(--typography-Body-Bold-fontFamily);
+  }
+}
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index f4553b9ce..43b927104 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -44,6 +44,7 @@
   "Country code": "Landekode",
   "Credit card deleted successfully": "Kreditkort blev slettet",
   "Current password": "Nuværende kodeord",
+  "Customer service": "Kundeservice",
   "Date of Birth": "Fødselsdato",
   "Day": "Dag",
   "Description": "Beskrivelse",
@@ -94,6 +95,7 @@
   "Members": "Medlemmer",
   "Membership cards": "Medlemskort",
   "Membership ID": "Medlems-id",
+  "Menu": "Menu",
   "Modify": "Ændre",
   "Month": "Måned",
   "My communication preferences": "Mine kommunikationspræferencer",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index b80e56960..8814ff721 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -43,6 +43,7 @@
   "Country code": "Landesvorwahl",
   "Credit card deleted successfully": "Kreditkarte erfolgreich gelöscht",
   "Current password": "Aktuelles Passwort",
+  "Customer service": "Kundendienst",
   "Date of Birth": "Geburtsdatum",
   "Day": "Tag",
   "Description": "Beschreibung",
@@ -92,6 +93,7 @@
   "Members": "Mitglieder",
   "Membership cards": "Mitgliedskarten",
   "Membership ID": "Mitglieds-ID",
+  "Menu": "Menu",
   "Modify": "Ändern",
   "Month": "Monat",
   "My communication preferences": "Meine Kommunikationseinstellungen",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index f86bab933..ea205dd05 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -44,6 +44,7 @@
   "Country code": "Country code",
   "Credit card deleted successfully": "Credit card deleted successfully",
   "Current password": "Current password",
+  "Customer service": "Customer service",
   "Date of Birth": "Date of Birth",
   "Day": "Day",
   "Description": "Description",
@@ -99,6 +100,7 @@
   "Members": "Members",
   "Membership cards": "Membership cards",
   "Membership ID": "Membership ID",
+  "Menu": "Menu",
   "Modify": "Modify",
   "Month": "Month",
   "My communication preferences": "My communication preferences",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index a3dd9cff8..5781dea73 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -44,6 +44,7 @@
   "Country code": "Maatunnus",
   "Credit card deleted successfully": "Luottokortti poistettu onnistuneesti",
   "Current password": "Nykyinen salasana",
+  "Customer service": "Asiakaspalvelu",
   "Date of Birth": "Syntymäaika",
   "Day": "Päivä",
   "Description": "Kuvaus",
@@ -93,6 +94,7 @@
   "Members": "Jäsenet",
   "Membership cards": "Jäsenkortit",
   "Membership ID": "Jäsentunnus",
+  "Menu": "Menu",
   "Modify": "Muokkaa",
   "Month": "Kuukausi",
   "My communication preferences": "Viestintämieltymykseni",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index 8dbf2cb2c..0f38a89b0 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -42,6 +42,7 @@
   "Could not find requested resource": "Kunne ikke finne den forespurte ressursen",
   "Country": "Land",
   "Country code": "Landskode",
+  "Customer service": "Kundeservice",
   "Credit card deleted successfully": "Kredittkort slettet",
   "Current password": "Nåværende passord",
   "Date of Birth": "Fødselsdato",
@@ -94,6 +95,7 @@
   "Members": "Medlemmer",
   "Membership cards": "Medlemskort",
   "Membership ID": "Medlems-ID",
+  "Menu": "Menu",
   "Modify": "Endre",
   "Month": "Måned",
   "My communication preferences": "Mine kommunikasjonspreferanser",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 25eb5acf5..53f38241e 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -44,6 +44,7 @@
   "Country code": "Landskod",
   "Credit card deleted successfully": "Kreditkort har tagits bort",
   "Current password": "Nuvarande lösenord",
+  "Customer service": "Kundservice",
   "Date of Birth": "Födelsedatum",
   "Day": "Dag",
   "Description": "Beskrivning",
@@ -96,6 +97,7 @@
   "Members": "Medlemmar",
   "Membership cards": "Medlemskort",
   "Membership ID": "Medlems-ID",
+  "Menu": "Meny",
   "Modify": "Ändra",
   "Month": "Månad",
   "My communication preferences": "Mina kommunikationspreferenser",
diff --git a/stores/main-menu.ts b/stores/main-menu.ts
index fe9fc50f3..008cce9b7 100644
--- a/stores/main-menu.ts
+++ b/stores/main-menu.ts
@@ -19,13 +19,7 @@ const useDropdownStore = create<DropdownState>((set) => ({
   isMyPagesMenuOpen: false,
   isLanguageSwitcherOpen: false,
   toggleHamburgerMenu: () =>
-    set((state) => {
-      // Close the other dropdown if it's open
-      if (!state.isHamburgerMenuOpen && state.isMyPagesMobileMenuOpen) {
-        set({ isMyPagesMobileMenuOpen: false })
-      }
-      return { isHamburgerMenuOpen: !state.isHamburgerMenuOpen }
-    }),
+    set((state) => ({ isHamburgerMenuOpen: !state.isHamburgerMenuOpen })),
   toggleMyPagesMobileMenu: () =>
     set((state) => {
       // Close the other dropdown if it's open
diff --git a/types/components/header/headerLink.ts b/types/components/header/headerLink.ts
new file mode 100644
index 000000000..671ab6d0e
--- /dev/null
+++ b/types/components/header/headerLink.ts
@@ -0,0 +1,3 @@
+import { LinkProps } from "@/components/TempDesignSystem/Link/link"
+
+export interface HeaderLinkProps extends React.PropsWithChildren<LinkProps> {}
diff --git a/types/components/header/mainMenu.ts b/types/components/header/mainMenu.ts
new file mode 100644
index 000000000..a867be31b
--- /dev/null
+++ b/types/components/header/mainMenu.ts
@@ -0,0 +1,5 @@
+import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+
+export interface MainMenuProps {
+  languageUrls: LanguageSwitcherData
+}
diff --git a/types/components/header/mobileMenu.ts b/types/components/header/mobileMenu.ts
new file mode 100644
index 000000000..79f11a563
--- /dev/null
+++ b/types/components/header/mobileMenu.ts
@@ -0,0 +1,8 @@
+import { MainNavigationItem } from "./mainNavigationItem"
+
+import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+
+export interface MobileMenuProps {
+  languageUrls: LanguageSwitcherData
+  mainNavigation: MainNavigationItem[]
+}
diff --git a/types/components/header/navigationMenu.ts b/types/components/header/navigationMenu.ts
index f429d557d..11642b11f 100644
--- a/types/components/header/navigationMenu.ts
+++ b/types/components/header/navigationMenu.ts
@@ -1,5 +1,10 @@
+import { VariantProps } from "class-variance-authority"
+
+import { navigationMenuVariants } from "@/components/Header/MainMenu/NavigationMenu/variants"
+
 import { MainNavigationItem } from "@/types/components/header/mainNavigationItem"
 
-export interface NavigationMenuProps {
+export interface NavigationMenuProps
+  extends VariantProps<typeof navigationMenuVariants> {
   items: MainNavigationItem[]
 }
diff --git a/types/components/header/navigationMenuItem.ts b/types/components/header/navigationMenuItem.ts
index d53c2313a..942b706c8 100644
--- a/types/components/header/navigationMenuItem.ts
+++ b/types/components/header/navigationMenuItem.ts
@@ -1,5 +1,10 @@
+import { VariantProps } from "class-variance-authority"
+
+import { navigationMenuItemVariants } from "@/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/variants"
+
 import { MainNavigationItem } from "@/types/components/header/mainNavigationItem"
 
-export interface NavigationMenuItemProps {
+export interface NavigationMenuItemProps
+  extends VariantProps<typeof navigationMenuItemVariants> {
   item: MainNavigationItem
 }
diff --git a/types/components/header/topMenu.ts b/types/components/header/topMenu.ts
new file mode 100644
index 000000000..4e20a6e7f
--- /dev/null
+++ b/types/components/header/topMenu.ts
@@ -0,0 +1,5 @@
+import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+
+export interface TopMenuProps {
+  languageUrls: LanguageSwitcherData
+}
diff --git a/types/components/icon.ts b/types/components/icon.ts
index ed0d3da3b..0e705b7e6 100644
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -46,6 +46,7 @@ export enum IconName {
   Restaurant = "Restaurant",
   Sauna = "Sauna",
   Search = "Search",
+  Service = "Service",
   Tripadvisor = "Tripadvisor",
   TshirtWash = "TshirtWash",
   Wifi = "Wifi",