From fe6582ccbba0d72d303a4e0fb78d1dfd441e5386 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Fri, 8 Nov 2024 12:12:12 +0100
Subject: [PATCH] fix(SW-812): styling fixes for the header and related
 components

---
 .../(standard)/select-hotel/page.tsx          |  2 +-
 app/globals.css                               |  6 +--
 .../JourneyTable/Pagination/index.tsx         |  8 ++-
 .../Stays/ShowMoreButton/index.tsx            |  2 +-
 .../Breadcrumbs/BreadcrumbsSkeleton.tsx       |  7 ++-
 .../Header/MainMenu/Avatar/avatar.module.css  |  4 +-
 components/Header/MainMenu/Avatar/index.tsx   |  7 ++-
 .../MainMenuButton/menuButton.module.css      |  6 +--
 .../Header/MainMenu/MyPagesMenu/index.tsx     | 10 ++--
 .../MyPagesMenu/myPagesMenu.module.css        |  3 +-
 .../MainMenu/MyPagesMenuContent/index.tsx     |  5 +-
 .../myPagesMenuContent.module.css             |  8 ---
 .../MainMenu/MyPagesMenuWrapper/index.tsx     |  2 +-
 .../myPagesMenuWrapper.module.css             | 10 ++--
 .../NavigationMenu/MegaMenu/index.tsx         | 10 +++-
 .../NavigationMenuItem/index.tsx              | 14 ++++--
 .../navigationMenuItem.module.css             |  7 ++-
 .../navigationMenuList.module.css             |  2 +-
 .../Header/MainMenu/mainMenu.module.css       |  1 +
 components/Header/TopMenu/index.tsx           | 31 +++++++-----
 components/Header/TopMenu/topMenu.module.css  |  1 -
 .../EnterDetails/SectionAccordion/index.tsx   |  2 +-
 .../HotelReservation/ReadMore/index.tsx       |  2 +-
 components/Icons/ChevronDown.tsx              | 12 ++---
 components/Icons/ChevronDownSmall.tsx         | 27 ++++++++++
 components/Icons/ChevronLeft.tsx              | 10 ++--
 components/Icons/ChevronLeftSmall.tsx         | 27 ++++++++++
 components/Icons/ChevronRight.tsx             | 10 ++--
 components/Icons/ChevronUp.tsx                | 27 ++++++++++
 components/Icons/ChevronUpSmall.tsx           | 27 ++++++++++
 components/Icons/get-icon-by-icon-name.ts     | 12 +++++
 components/Icons/index.tsx                    |  4 ++
 .../LanguageSwitcherContainer/index.tsx       |  2 +-
 .../languageSwitcherContent.module.css        |  2 +-
 components/LanguageSwitcher/index.tsx         | 16 +++---
 .../languageSwitcher.module.css               | 49 ++++++++++++-------
 components/LanguageSwitcher/variants.ts       | 11 ++---
 components/LoginButton/index.tsx              |  4 +-
 .../Accordion/AccordionItem/index.tsx         |  7 ++-
 .../TempDesignSystem/Alert/Sidepeek/index.tsx |  2 +-
 .../Form/SelectChevron/index.tsx              |  2 +-
 components/TempDesignSystem/Link/index.tsx    |  2 +
 .../TempDesignSystem/Link/link.module.css     | 32 ++++++++----
 components/TempDesignSystem/Link/variants.ts  |  4 ++
 .../TeaserCard/Sidepeek/index.tsx             |  2 +-
 .../Text/Body/body.module.css                 |  4 +-
 types/components/icon.ts                      |  4 ++
 47 files changed, 315 insertions(+), 134 deletions(-)
 create mode 100644 components/Icons/ChevronDownSmall.tsx
 create mode 100644 components/Icons/ChevronLeftSmall.tsx
 create mode 100644 components/Icons/ChevronUp.tsx
 create mode 100644 components/Icons/ChevronUpSmall.tsx

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
index f3d920fb7..29d16df1a 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -81,7 +81,7 @@ export default async function SelectHotelPage({
             keepSearchParams
           >
             {intl.formatMessage({ id: "Show map" })}
-            <ChevronRightIcon color="burgundy" />
+            <ChevronRightIcon color="burgundy" height={20} width={20} />
           </Link>
         </div>
         <MobileMapButtonContainer city={searchParams.city} />
diff --git a/app/globals.css b/app/globals.css
index 4a8b655c1..3a6b68d69 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -106,14 +106,14 @@
   --max-width-navigation: 89.5rem;
 
   --main-menu-mobile-height: 75px;
-  --main-menu-desktop-height: 118px;
+  --main-menu-desktop-height: 129px;
   --booking-widget-mobile-height: 75px;
   --booking-widget-desktop-height: 77px;
   --hotel-page-map-desktop-width: 23.75rem;
 
   /* Z-INDEX */
-  --header-z-index: 10;
-  --menu-overlay-z-index: 10;
+  --header-z-index: 11;
+  --menu-overlay-z-index: 11;
   --dialog-z-index: 9;
   --sidepeek-z-index: 100;
   --lightbox-z-index: 150;
diff --git a/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Pagination/index.tsx b/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Pagination/index.tsx
index bdbadc7e8..ee1f1bf9a 100644
--- a/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Pagination/index.tsx
+++ b/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Pagination/index.tsx
@@ -41,7 +41,11 @@ export default function Pagination({
           handlePageChange(currentPage - 1)
         }}
       >
-        <ChevronRightIcon className={styles.chevronLeft} />
+        <ChevronRightIcon
+          className={styles.chevronLeft}
+          height={20}
+          width={20}
+        />
       </PaginationButton>
       {[...Array(pageCount)].map((_, idx) => (
         <PaginationButton
@@ -61,7 +65,7 @@ export default function Pagination({
           handlePageChange(currentPage + 1)
         }}
       >
-        <ChevronRightIcon />
+        <ChevronRightIcon height={20} width={20} />
       </PaginationButton>
     </div>
   )
diff --git a/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx b/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx
index e988ef1c8..373d68254 100644
--- a/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx
@@ -24,7 +24,7 @@ export default function ShowMoreButton({
         theme="base"
         intent="text"
       >
-        <ChevronDownIcon />
+        <ChevronDownIcon width={20} height={20} />
         {intl.formatMessage({ id: "Show more" })}
       </Button>
     </div>
diff --git a/components/Breadcrumbs/BreadcrumbsSkeleton.tsx b/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
index 6841c2dba..68004a81e 100644
--- a/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
+++ b/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
@@ -11,7 +11,12 @@ export default function BreadcrumbsSkeleton() {
           <span className={styles.homeLink} color="peach80">
             <HouseIcon color="peach80" />
           </span>
-          <ChevronRightIcon aria-hidden="true" color="peach80" />
+          <ChevronRightIcon
+            aria-hidden="true"
+            color="peach80"
+            height={20}
+            width={20}
+          />
         </li>
 
         <li className={styles.listItem}>
diff --git a/components/Header/MainMenu/Avatar/avatar.module.css b/components/Header/MainMenu/Avatar/avatar.module.css
index 3b217b343..175254b5a 100644
--- a/components/Header/MainMenu/Avatar/avatar.module.css
+++ b/components/Header/MainMenu/Avatar/avatar.module.css
@@ -6,11 +6,9 @@
   border-radius: var(--Corner-radius-Rounded);
   width: 2rem;
   height: 2rem;
-  background-color: var(--Main-Grey-40);
+  background-color: var(--UI-Grey-40);
 }
 
 .initials {
-  font-size: 0.75rem;
-  color: var(--Base-Text-Inverted);
   background-color: var(--Base-Icon-Low-contrast);
 }
diff --git a/components/Header/MainMenu/Avatar/index.tsx b/components/Header/MainMenu/Avatar/index.tsx
index 4ab15108d..d6c9a1740 100644
--- a/components/Header/MainMenu/Avatar/index.tsx
+++ b/components/Header/MainMenu/Avatar/index.tsx
@@ -1,5 +1,6 @@
 import { PersonIcon } from "@/components/Icons"
 import Image from "@/components/Image"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
 import styles from "./avatar.module.css"
 
@@ -13,7 +14,11 @@ export default function Avatar({ image, initials }: AvatarProps) {
     element = <Image src={image.src} alt={image.alt} width={28} height={28} />
   } else if (initials) {
     classNames.push(styles.initials)
-    element = <span>{initials}</span>
+    element = (
+      <Footnote type="label" color="white" textTransform="uppercase" asChild>
+        <span>{initials}</span>
+      </Footnote>
+    )
   }
   return <span className={classNames.join(" ")}>{element}</span>
 }
diff --git a/components/Header/MainMenu/MainMenuButton/menuButton.module.css b/components/Header/MainMenu/MainMenuButton/menuButton.module.css
index 1d999b3ad..25c640d16 100644
--- a/components/Header/MainMenu/MainMenuButton/menuButton.module.css
+++ b/components/Header/MainMenu/MainMenuButton/menuButton.module.css
@@ -1,14 +1,14 @@
 .menuButton {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x-half);
   align-items: center;
   width: 100%;
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
   border-width: 0;
-  padding: 0;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
   cursor: pointer;
   font-family: var(--typography-Body-Bold-fontFamily);
-  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
   font-size: var(--typography-Body-Bold-fontSize);
 }
diff --git a/components/Header/MainMenu/MyPagesMenu/index.tsx b/components/Header/MainMenu/MyPagesMenu/index.tsx
index b0504c582..86f03e0ff 100644
--- a/components/Header/MainMenu/MyPagesMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenu/index.tsx
@@ -5,8 +5,8 @@ import { useIntl } from "react-intl"
 
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownIcon } from "@/components/Icons"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { ChevronDownSmallIcon } from "@/components/Icons"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import { getInitials } from "@/utils/user"
@@ -47,12 +47,12 @@ export default function MyPagesMenu({
         onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
       >
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        <Subtitle type="two" asChild>
+        <Body textTransform="bold" color="textHighContrast" asChild>
           <span>
             {intl.formatMessage({ id: "Hi" })} {user.firstName}!
           </span>
-        </Subtitle>
-        <ChevronDownIcon
+        </Body>
+        <ChevronDownSmallIcon
           className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
           color="red"
         />
diff --git a/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css b/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
index 02d097654..f23cfcd55 100644
--- a/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
+++ b/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
@@ -5,7 +5,6 @@
 @media screen and (min-width: 768px) {
   .myPagesMenu {
     display: block;
-    position: relative;
   }
 
   .chevron {
@@ -18,7 +17,7 @@
 
   .dropdown {
     position: absolute;
-    top: 2.875rem; /* 2.875rem is the height of the main menu + bottom padding */
+    top: calc(3.5rem - 2px); /* 3.5rem is the height of the main menu + bottom padding. */
     right: 0;
     background-color: var(--Base-Surface-Primary-light-Normal);
     border-radius: var(--Corner-radius-Large);
diff --git a/components/Header/MainMenu/MyPagesMenuContent/index.tsx b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
index 789a7d0f4..d5b19194f 100644
--- a/components/Header/MainMenu/MyPagesMenuContent/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
@@ -63,7 +63,8 @@ export default function MyPagesMenuContent({
                     href={link.originalUrl || link.url}
                     onClick={toggleOpenStateFn}
                     variant="menu"
-                    className={`${styles.link} ${menuItem.display_sign_out_link ? styles.smallLink : ""}`}
+                    weight={menuItem.display_sign_out_link ? undefined : "bold"}
+                    className={styles.link}
                   >
                     {link.linkText}
                     <ArrowRightIcon className={styles.arrow} color="burgundy" />
@@ -76,7 +77,7 @@ export default function MyPagesMenuContent({
                     href={logout[lang]}
                     prefetch={false}
                     variant="menu"
-                    className={`${styles.link} ${styles.smallLink}`}
+                    className={styles.link}
                   >
                     {intl.formatMessage({ id: "Log out" })}
                   </Link>
diff --git a/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css b/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
index 5f3cbb025..4d4a1faf8 100644
--- a/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
+++ b/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
@@ -32,14 +32,6 @@
   list-style: none;
 }
 
-.link.smallLink {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Regular-fontWeight);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
-}
-
 .link:not(:hover) .arrow {
   opacity: 0;
 }
diff --git a/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx b/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
index bf9473f32..c4e7fc761 100644
--- a/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
@@ -54,7 +54,7 @@ export default async function MyPagesMenuWrapper() {
           trackingId="loginStartNewTopMenu"
         >
           <Avatar />
-          <span className={styles.userName}>
+          <span className={styles.loginText}>
             {intl.formatMessage({ id: "Log in/Join" })}
           </span>
         </LoginButton>
diff --git a/components/Header/MainMenu/MyPagesMenuWrapper/myPagesMenuWrapper.module.css b/components/Header/MainMenu/MyPagesMenuWrapper/myPagesMenuWrapper.module.css
index 05b89f92b..2fac65c96 100644
--- a/components/Header/MainMenu/MyPagesMenuWrapper/myPagesMenuWrapper.module.css
+++ b/components/Header/MainMenu/MyPagesMenuWrapper/myPagesMenuWrapper.module.css
@@ -4,12 +4,8 @@
   gap: var(--Spacing-x1);
 }
 
-.userName {
-  display: none;
-}
-
-@media screen and (min-width: 768px) {
-  .userName {
-    display: inline;
+@media screen and (max-width: 767px) {
+  .loginText {
+    display: none;
   }
 }
diff --git a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx b/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
index c6f7cd2d4..75bafc972 100644
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
@@ -41,7 +41,7 @@ export default function MegaMenu({
             className={styles.backButton}
             onClick={() => toggleMegaMenu(false)}
           >
-            <ChevronLeftIcon color="red" />
+            <ChevronLeftIcon color="red" height={20} width={20} />
             <Subtitle type="one" color="burgundy" asChild>
               <span>{title}</span>
             </Subtitle>
@@ -55,6 +55,7 @@ export default function MegaMenu({
               href={seeAllLink.link.url}
               color="burgundy"
               variant="icon"
+              weight="bold"
               onClick={handleNavigate}
             >
               {seeAllLink.title}
@@ -65,7 +66,12 @@ export default function MegaMenu({
         <ul className={styles.submenus}>
           {submenu.map((item) => (
             <li key={item.title} className={styles.submenusItem}>
-              <Caption textTransform="uppercase" asChild>
+              <Caption
+                type="label"
+                color="uiTextPlaceholder"
+                textTransform="uppercase"
+                asChild
+              >
                 <span className={styles.submenuTitle}>{item.title}</span>
               </Caption>
               <ul className={styles.submenu}>
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
index c57064b2a..31b163e2b 100644
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
@@ -4,7 +4,7 @@ import { useRef } from "react"
 
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
+import { ChevronDownSmallIcon, ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
@@ -41,9 +41,14 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
       >
         {title}
         {isMobile ? (
-          <ChevronRightIcon className={`${styles.chevron}`} color="red" />
+          <ChevronRightIcon
+            className={`${styles.chevron}`}
+            color="red"
+            height={20}
+            width={20}
+          />
         ) : (
-          <ChevronDownIcon
+          <ChevronDownSmallIcon
             className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
             color="red"
           />
@@ -67,7 +72,8 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
   ) : (
     <Link
       className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
-      color="burgundy"
+      variant="navigation"
+      weight="bold"
       href={link!.url}
     >
       {title}
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
index bff5d36ee..364ac19f9 100644
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
@@ -1,3 +1,7 @@
+.navigationMenuItem {
+  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
+}
+
 .navigationMenuItem.mobile {
   display: flex;
   justify-content: space-between;
@@ -38,8 +42,7 @@
   .dropdown {
     display: none;
     position: absolute;
-    top: var(--main-menu-desktop-height);
-    /* top: var(--Spacing-x5); */
+    top: calc(3.5rem - 2px); /* 3.5rem is the height of the main menu + bottom padding. */
     left: 50%;
     transform: translateX(-50%);
     border-radius: var(--Corner-radius-Large);
diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css b/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css
index 4b36fc1dc..4540f7ae0 100644
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css
@@ -3,7 +3,7 @@
   margin: 0;
   justify-content: space-between;
   align-items: center;
-  gap: var(--Spacing-x4);
+  gap: var(--Spacing-x3);
   display: none;
 }
 
diff --git a/components/Header/MainMenu/mainMenu.module.css b/components/Header/MainMenu/mainMenu.module.css
index 920a57941..67deaffe4 100644
--- a/components/Header/MainMenu/mainMenu.module.css
+++ b/components/Header/MainMenu/mainMenu.module.css
@@ -5,6 +5,7 @@
 }
 
 .nav {
+  position: relative;
   max-width: var(--max-width-navigation);
   margin: 0 auto;
   display: grid;
diff --git a/components/Header/TopMenu/index.tsx b/components/Header/TopMenu/index.tsx
index f6376a9db..325744dca 100644
--- a/components/Header/TopMenu/index.tsx
+++ b/components/Header/TopMenu/index.tsx
@@ -2,6 +2,8 @@ import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import { GiftIcon, SearchIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
 
 import HeaderLink from "../HeaderLink"
@@ -23,20 +25,27 @@ export default async function TopMenu() {
     <div className={styles.topMenu}>
       <div className={styles.content}>
         {header.data.topLink.link ? (
-          <HeaderLink
-            className={styles.topLink}
-            href={header.data.topLink.link.url}
-          >
-            <GiftIcon width={20} height={20} color="burgundy" />
-            {header.data.topLink.title}
-          </HeaderLink>
+          <Caption type="regular" color="textMediumContrast" asChild>
+            <Link
+              href={header.data.topLink.link.url}
+              color="peach80"
+              variant="icon"
+            >
+              <GiftIcon width={20} height={20} />
+              {header.data.topLink.title}
+            </Link>
+          </Caption>
         ) : null}
         <div className={styles.options}>
           <LanguageSwitcher type="desktopHeader" urls={languages.urls} />
-          <HeaderLink href="#">
-            <SearchIcon width={20} height={20} color="burgundy" />
-            {intl.formatMessage({ id: "Find booking" })}
-          </HeaderLink>
+
+          <Caption type="regular" color="textMediumContrast" asChild>
+            <Link href="#" color="peach80" variant="icon">
+              <SearchIcon width={20} height={20} />
+              {intl.formatMessage({ id: "Find booking" })}
+            </Link>
+          </Caption>
+          <HeaderLink href="#"></HeaderLink>
         </div>
       </div>
     </div>
diff --git a/components/Header/TopMenu/topMenu.module.css b/components/Header/TopMenu/topMenu.module.css
index 6d6c99abe..41c610677 100644
--- a/components/Header/TopMenu/topMenu.module.css
+++ b/components/Header/TopMenu/topMenu.module.css
@@ -2,7 +2,6 @@
   display: none;
   background-color: var(--Base-Surface-Subtle-Normal);
   padding: var(--Spacing-x2);
-  border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
 .content {
diff --git a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
index 867a9c392..9ece9b322 100644
--- a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
@@ -100,7 +100,7 @@ export default function SectionAccordion({
               wrapping
             >
               {intl.formatMessage({ id: "Modify" })}{" "}
-              <ChevronDownIcon color="burgundy" />
+              <ChevronDownIcon color="burgundy" width={20} height={20} />
             </Button>
           )}
         </header>
diff --git a/components/HotelReservation/ReadMore/index.tsx b/components/HotelReservation/ReadMore/index.tsx
index a6ef09c06..fbd6be1ae 100644
--- a/components/HotelReservation/ReadMore/index.tsx
+++ b/components/HotelReservation/ReadMore/index.tsx
@@ -23,7 +23,7 @@ export default function ReadMore({ label, hotelId }: ReadMoreProps) {
       className={styles.detailsButton}
     >
       {label}
-      <ChevronRightIcon color="burgundy" />
+      <ChevronRightIcon color="burgundy" height={20} width={20} />
     </Button>
   )
 }
diff --git a/components/Icons/ChevronDown.tsx b/components/Icons/ChevronDown.tsx
index b1370284c..bd330a67e 100644
--- a/components/Icons/ChevronDown.tsx
+++ b/components/Icons/ChevronDown.tsx
@@ -11,16 +11,16 @@ export default function ChevronDownIcon({
   return (
     <svg
       className={classNames}
-      fill="none"
-      height="20"
-      viewBox="0 0 20 20"
-      width="20"
       xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
       {...props}
     >
       <path
-        d="M10.422 11.9374L16.2449 6.1145C16.4254 5.93395 16.6459 5.84193 16.9063 5.83846C17.1668 5.83499 17.3873 5.92353 17.5678 6.10409C17.7484 6.28464 17.8386 6.50513 17.8386 6.76554C17.8386 7.02596 17.7484 7.24645 17.5678 7.427L11.4011 13.6041C11.2553 13.7499 11.1025 13.8523 10.9428 13.9114C10.7831 13.9704 10.6095 13.9999 10.422 13.9999C10.2345 13.9999 10.0609 13.9704 9.90114 13.9114C9.74142 13.8523 9.58864 13.7499 9.44281 13.6041L3.27614 7.43742C3.09558 7.25686 3.00357 7.03464 3.0001 6.77075C2.99663 6.50686 3.08517 6.28464 3.26572 6.10409C3.44628 5.92353 3.66676 5.83325 3.92718 5.83325C4.1876 5.83325 4.40808 5.92353 4.58864 6.10409L10.422 11.9374Z"
-        fill="#4D001B"
+        d="M11.9936 14.436L19.5847 7.43997C19.8278 7.21597 20.1164 7.10597 20.4506 7.10997C20.7848 7.11397 21.0735 7.22797 21.3165 7.45197C21.5596 7.67597 21.6811 7.94197 21.6811 8.24997C21.6811 8.55797 21.5596 8.82397 21.3165 9.04797L13.3738 16.356C13.1742 16.54 12.9571 16.674 12.7228 16.758C12.4884 16.842 12.2453 16.884 11.9936 16.884C11.7419 16.884 11.4988 16.842 11.2644 16.758C11.0301 16.674 10.813 16.54 10.6134 16.356L2.67069 9.03597C2.42763 8.81197 2.30827 8.54797 2.31261 8.24397C2.31695 7.93997 2.44065 7.67597 2.68371 7.45197C2.92676 7.22797 3.21539 7.11597 3.54959 7.11597C3.88379 7.11597 4.17242 7.22797 4.41548 7.45197L11.9936 14.436Z"
+        fill="#26201E"
       />
     </svg>
   )
diff --git a/components/Icons/ChevronDownSmall.tsx b/components/Icons/ChevronDownSmall.tsx
new file mode 100644
index 000000000..4733ab04d
--- /dev/null
+++ b/components/Icons/ChevronDownSmall.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ChevronDownSmallIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M11.6876 15.1482C11.5558 15.1482 11.4313 15.1243 11.3142 15.0766C11.1972 15.0289 11.0909 14.9574 10.9955 14.862L6.2818 10.1483C6.09393 9.96039 6 9.73203 6 9.46317C6 9.19432 6.0954 8.96449 6.2862 8.77369C6.477 8.58289 6.70683 8.48749 6.97569 8.48749C7.24454 8.48749 7.47351 8.58203 7.6626 8.77111L11.685 12.7935L15.7074 8.77111C15.8965 8.58203 16.1255 8.48749 16.3943 8.48749C16.6632 8.48749 16.893 8.58289 17.0838 8.77369C17.2746 8.96449 17.37 9.19432 17.37 9.46317C17.37 9.73203 17.2761 9.96039 17.0882 10.1483L12.3745 14.862C12.2791 14.9574 12.1737 15.0289 12.0584 15.0766C11.943 15.1243 11.8194 15.1482 11.6876 15.1482Z"
+        fill="#26201E"
+      />
+    </svg>
+  )
+}
diff --git a/components/Icons/ChevronLeft.tsx b/components/Icons/ChevronLeft.tsx
index 9676480a0..34a0f4e4e 100644
--- a/components/Icons/ChevronLeft.tsx
+++ b/components/Icons/ChevronLeft.tsx
@@ -12,15 +12,15 @@ export default function ChevronLeftIcon({
     <svg
       className={classNames}
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
       fill="none"
       {...props}
     >
       <path
-        d="M7.75 10.0001L13.5729 15.823C13.7535 16.0036 13.8455 16.2258 13.849 16.4897C13.8524 16.7536 13.7639 16.9758 13.5833 17.1563C13.4028 17.3369 13.1806 17.4272 12.9167 17.4272C12.6528 17.4272 12.4306 17.3369 12.25 17.1563L6.08333 10.9793C5.9375 10.8334 5.83507 10.6807 5.77604 10.5209C5.71701 10.3612 5.6875 10.1876 5.6875 10.0001C5.6875 9.8126 5.71701 9.63899 5.77604 9.47927C5.83507 9.31954 5.9375 9.16677 6.08333 9.02093L12.25 2.85426C12.4306 2.67371 12.651 2.5817 12.9115 2.57822C13.1719 2.57475 13.3924 2.66329 13.5729 2.84385C13.7535 3.0244 13.8438 3.24663 13.8438 3.51051C13.8438 3.7744 13.7535 3.99663 13.5729 4.17718L7.75 10.0001Z"
-        fill="#CD0921"
+        d="M9.45002 12L16.7375 19.2875C16.9709 19.5209 17.0854 19.7959 17.0813 20.1125C17.0771 20.4292 16.9584 20.7042 16.725 20.9375C16.4917 21.1709 16.2167 21.2875 15.9 21.2875C15.5834 21.2875 15.3084 21.1709 15.075 20.9375L7.45002 13.325C7.25836 13.1334 7.11877 12.925 7.03127 12.7C6.94377 12.475 6.90002 12.2417 6.90002 12C6.90002 11.7584 6.94377 11.525 7.03127 11.3C7.11877 11.075 7.25836 10.8667 7.45002 10.675L15.075 3.05004C15.3084 2.8167 15.5854 2.70212 15.9063 2.70629C16.2271 2.71045 16.5042 2.8292 16.7375 3.06254C16.9709 3.29587 17.0875 3.57087 17.0875 3.88754C17.0875 4.2042 16.9709 4.4792 16.7375 4.71254L9.45002 12Z"
+        fill="#26201E"
       />
     </svg>
   )
diff --git a/components/Icons/ChevronLeftSmall.tsx b/components/Icons/ChevronLeftSmall.tsx
new file mode 100644
index 000000000..cfc9f8e9a
--- /dev/null
+++ b/components/Icons/ChevronLeftSmall.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ChevronLeftSmallIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M10.75 12L14.625 15.875C14.8 16.05 14.8875 16.2646 14.8875 16.5187C14.8875 16.7729 14.8 16.9916 14.625 17.175C14.45 17.3583 14.2333 17.4521 13.975 17.4562C13.7166 17.4604 13.4958 17.3708 13.3125 17.1875L8.78745 12.6625C8.69578 12.5708 8.62703 12.4687 8.5812 12.3562C8.53537 12.2437 8.51245 12.125 8.51245 12C8.51245 11.875 8.53537 11.7562 8.5812 11.6437C8.62703 11.5312 8.69578 11.4291 8.78745 11.3375L13.3125 6.81247C13.4958 6.62913 13.7166 6.53955 13.975 6.54372C14.2333 6.54788 14.45 6.64163 14.625 6.82497C14.8 7.0083 14.8875 7.22705 14.8875 7.48122C14.8875 7.73538 14.8 7.94997 14.625 8.12497L10.75 12Z"
+        fill="#26201E"
+      />
+    </svg>
+  )
+}
diff --git a/components/Icons/ChevronRight.tsx b/components/Icons/ChevronRight.tsx
index 98c1a57a5..7cffe81c5 100644
--- a/components/Icons/ChevronRight.tsx
+++ b/components/Icons/ChevronRight.tsx
@@ -12,15 +12,15 @@ export default function ChevronRightIcon({
     <svg
       className={classNames}
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
       fill="none"
       {...props}
     >
       <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"
+        d="M14.5375 12L7.24999 4.71251C7.01665 4.47918 6.90207 4.2021 6.90624 3.88126C6.9104 3.56043 7.02915 3.28335 7.26249 3.05001C7.49582 2.81668 7.7729 2.70001 8.09374 2.70001C8.41457 2.70001 8.69165 2.81668 8.92499 3.05001L16.5375 10.675C16.7292 10.8667 16.8687 11.075 16.9562 11.3C17.0437 11.525 17.0875 11.7583 17.0875 12C17.0875 12.2417 17.0437 12.475 16.9562 12.7C16.8687 12.925 16.7292 13.1333 16.5375 13.325L8.91249 20.95C8.67915 21.1833 8.40415 21.2979 8.08749 21.2938C7.77082 21.2896 7.49582 21.1708 7.26249 20.9375C7.02915 20.7042 6.91249 20.4271 6.91249 20.1063C6.91249 19.7854 7.02915 19.5083 7.26249 19.275L14.5375 12Z"
+        fill="#26201E"
       />
     </svg>
   )
diff --git a/components/Icons/ChevronUp.tsx b/components/Icons/ChevronUp.tsx
new file mode 100644
index 000000000..3542bee8e
--- /dev/null
+++ b/components/Icons/ChevronUp.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ChevronUpIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M12 9.55786L4.40885 16.5539C4.1658 16.7779 3.87717 16.8879 3.54297 16.8839C3.20877 16.8799 2.92014 16.7659 2.67708 16.5419C2.43403 16.3179 2.3125 16.0519 2.3125 15.7439C2.3125 15.4359 2.43403 15.1699 2.67708 14.9459L10.6198 7.63786C10.8194 7.45386 11.0365 7.31986 11.2708 7.23586C11.5052 7.15186 11.7483 7.10986 12 7.10986C12.2517 7.10986 12.4948 7.15186 12.7292 7.23586C12.9635 7.31986 13.1806 7.45386 13.3802 7.63786L21.3229 14.9579C21.566 15.1819 21.6853 15.4459 21.681 15.7499C21.6766 16.0539 21.553 16.3179 21.3099 16.5419C21.0668 16.7659 20.7782 16.8779 20.444 16.8779C20.1098 16.8779 19.8212 16.7659 19.5781 16.5419L12 9.55786Z"
+        fill="#26201E"
+      />
+    </svg>
+  )
+}
diff --git a/components/Icons/ChevronUpSmall.tsx b/components/Icons/ChevronUpSmall.tsx
new file mode 100644
index 000000000..3967e4875
--- /dev/null
+++ b/components/Icons/ChevronUpSmall.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ChevronUpSmallIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M11.685 10.8421L7.6626 14.8645C7.47351 15.0536 7.24454 15.1482 6.97569 15.1482C6.70683 15.1482 6.477 15.0528 6.2862 14.862C6.0954 14.6712 6 14.4413 6 14.1725C6 13.9036 6.09393 13.6753 6.2818 13.4874L10.9955 8.77369C11.0909 8.67829 11.1963 8.60674 11.3116 8.55904C11.427 8.51134 11.5506 8.48749 11.6824 8.48749C11.8142 8.48749 11.9387 8.51134 12.0558 8.55904C12.1728 8.60674 12.2791 8.67829 12.3745 8.77369L17.0882 13.4874C17.2761 13.6753 17.37 13.9036 17.37 14.1725C17.37 14.4413 17.2746 14.6712 17.0838 14.862C16.893 15.0528 16.6632 15.1482 16.3943 15.1482C16.1255 15.1482 15.8965 15.0536 15.7074 14.8645L11.685 10.8421Z"
+        fill="#26201E"
+      />
+    </svg>
+  )
+}
diff --git a/components/Icons/get-icon-by-icon-name.ts b/components/Icons/get-icon-by-icon-name.ts
index f5410421f..08c305f1d 100644
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -19,9 +19,13 @@ import {
   CheckCircleIcon,
   CheckIcon,
   ChevronDownIcon,
+  ChevronDownSmallIcon,
   ChevronLeftIcon,
+  ChevronLeftSmallIcon,
   ChevronRightIcon,
   ChevronRightSmallIcon,
+  ChevronUpIcon,
+  ChevronUpSmallIcon,
   CloseIcon,
   CloseLargeIcon,
   CoffeeAltIcon,
@@ -131,12 +135,20 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return CheckCircleIcon
     case IconName.ChevronDown:
       return ChevronDownIcon
+    case IconName.ChevronDownSmall:
+      return ChevronDownSmallIcon
     case IconName.ChevronLeft:
       return ChevronLeftIcon
+    case IconName.ChevronLeftSmall:
+      return ChevronLeftSmallIcon
     case IconName.ChevronRight:
       return ChevronRightIcon
     case IconName.ChevronRightSmall:
       return ChevronRightSmallIcon
+    case IconName.ChevronUp:
+      return ChevronUpIcon
+    case IconName.ChevronUpSmall:
+      return ChevronUpSmallIcon
     case IconName.Close:
       return CloseIcon
     case IconName.CloseLarge:
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index f7bdb1abb..2a30ffe78 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -19,9 +19,13 @@ export { default as ChairIcon } from "./Chair"
 export { default as CheckIcon } from "./Check"
 export { default as CheckCircleIcon } from "./CheckCircle"
 export { default as ChevronDownIcon } from "./ChevronDown"
+export { default as ChevronDownSmallIcon } from "./ChevronDownSmall"
 export { default as ChevronLeftIcon } from "./ChevronLeft"
+export { default as ChevronLeftSmallIcon } from "./ChevronLeftSmall"
 export { default as ChevronRightIcon } from "./ChevronRight"
 export { default as ChevronRightSmallIcon } from "./ChevronRightSmall"
+export { default as ChevronUpIcon } from "./ChevronUp"
+export { default as ChevronUpSmallIcon } from "./ChevronUpSmall"
 export { default as CityIcon } from "./City"
 export { default as CloseIcon } from "./Close"
 export { default as CloseLargeIcon } from "./CloseLarge"
diff --git a/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx b/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx
index 0eafafa29..c733e3d4c 100644
--- a/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx
+++ b/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx
@@ -34,7 +34,7 @@ export default function LanguageSwitcherContainer({
             className={styles.backButton}
             onClick={() => toggleDropdown(position)}
           >
-            <ChevronLeftIcon color="red" />
+            <ChevronLeftIcon color="red" height={20} width={20} />
             <Subtitle type="one" asChild>
               <span>
                 {intl.formatMessage({
diff --git a/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css b/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
index 24e3febb8..2e240d75a 100644
--- a/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
+++ b/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
@@ -34,7 +34,7 @@
 .link.active,
 .link:hover {
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
-  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
 }
 
 @media screen and (min-width: 768px) {
diff --git a/components/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx
index 02537fc23..1ed809af1 100644
--- a/components/LanguageSwitcher/index.tsx
+++ b/components/LanguageSwitcher/index.tsx
@@ -6,12 +6,12 @@ import { useIntl } from "react-intl"
 import { languages } from "@/constants/languages"
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 
+import Caption from "../TempDesignSystem/Text/Caption"
 import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
 import LanguageSwitcherContent from "./LanguageSwitcherContent"
 import { languageSwitcherVariants } from "./variants"
@@ -41,7 +41,6 @@ export default function LanguageSwitcher({
   const isHeader = !isFooter
 
   const position = isFooter ? "footer" : "header"
-  const color = isFooter ? "pale" : "burgundy"
 
   const dropdownType = {
     footer: DropdownTypeEnum.FooterLanguageSwitcher,
@@ -74,7 +73,7 @@ export default function LanguageSwitcher({
     () => toggleDropdown(dropdownType)
   )
 
-  const classNames = languageSwitcherVariants({ color, position })
+  const classNames = languageSwitcherVariants({ position })
 
   return (
     <div className={classNames} ref={languageSwitcherRef}>
@@ -88,15 +87,14 @@ export default function LanguageSwitcher({
         })}
         onClick={handleClick}
       >
-        <GlobeIcon width={20} height={20} color={color} />
-        <Caption type="regular" color={color}>
-          {languages[currentLanguage]}
+        <GlobeIcon width={20} height={20} />
+        <Caption className={styles.buttonText} type="regular" asChild>
+          <span>{languages[currentLanguage]}</span>
         </Caption>
-        <ChevronDownIcon
+        <ChevronDownSmallIcon
           className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
           width={20}
           height={20}
-          color={color}
         />
       </button>
 
diff --git a/components/LanguageSwitcher/languageSwitcher.module.css b/components/LanguageSwitcher/languageSwitcher.module.css
index 7f3854520..82753e9b5 100644
--- a/components/LanguageSwitcher/languageSwitcher.module.css
+++ b/components/LanguageSwitcher/languageSwitcher.module.css
@@ -1,25 +1,38 @@
 .button {
+  --language-switcher-color: var(--Base-Text-Medium-contrast);
+  --language-switcher-hover-color: var(--Base-Text-High-contrast);
+
   background-color: transparent;
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
   border-width: 0;
   padding: 0;
   cursor: pointer;
   display: grid;
   grid-template-columns: repeat(2, max-content) 1fr;
-  gap: var(--Spacing-x1);
   align-items: center;
   width: 100%;
+  color: var(--language-switcher-color);
 }
 
-.burgundy .button {
-  color: var(--Base-Text-High-contrast);
+.button * {
+  fill: var(--language-switcher-color);
+}
+.button:hover {
+  color: var(--language-switcher-hover-color);
+}
+.button:hover * {
+  fill: var(--language-switcher-hover-color);
 }
 
-.pale .button {
-  color: var(--Primary-Dark-On-Surface-Text);
+.buttonText {
+  color: inherit !important;
+  margin-left: var(--Spacing-x1);
+  margin-right: var(--Spacing-x-quarter);
 }
 
+.footer .button {
+  --language-switcher-color: var(--Primary-Dark-On-Surface-Text);
+  --language-switcher-hover-color: var(--Primary-Dark-On-Surface-Text);
+}
 .chevron {
   justify-self: end;
   transition: transform 0.3s;
@@ -36,19 +49,19 @@
   z-index: var(--menu-overlay-z-index);
 }
 
-.top .dropdown {
+.header .dropdown {
   right: -100vw;
   top: var(--main-menu-mobile-height);
   bottom: 0;
   transition: right 0.3s;
 }
 
-.top .dropdown.isExpanded {
+.header .dropdown.isExpanded {
   display: block;
   right: 0;
 }
 
-.bottom .dropdown {
+.footer .dropdown {
   transition: transform 0.3s;
   width: 100%;
   height: 100vh;
@@ -57,7 +70,7 @@
   transform: translateY(100%);
 }
 
-.bottom .dropdown.isExpanded {
+.footer .dropdown.isExpanded {
   transform: translateY(0);
 }
 
@@ -70,39 +83,37 @@
     position: absolute;
     background-color: var(--Base-Surface-Primary-light-Normal);
     border-radius: var(--Corner-radius-Large);
-    box-shadow: 0px 0px 14px 6px #0000001a;
+    box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
     display: none;
     min-width: 12.5rem;
     z-index: 1;
   }
-  .top .dropdown {
+  .header .dropdown {
     top: 2.25rem;
     bottom: auto;
   }
 
-  .top .dropdown::before {
+  .header .dropdown::before {
     top: -1.25rem;
     transform: rotate(180deg);
   }
 
-  .bottom .dropdown {
+  .footer .dropdown {
     transition: none;
     height: auto;
     left: -100%;
     bottom: 2.25rem;
   }
 
-  .bottom .dropdown.isExpanded {
+  .footer .dropdown.isExpanded {
     display: block;
   }
 
-  .bottom .dropdown::before {
+  .footer .dropdown::before {
     top: 100%;
   }
 
   .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/components/LanguageSwitcher/variants.ts b/components/LanguageSwitcher/variants.ts
index 0fac0e5da..ca9050366 100644
--- a/components/LanguageSwitcher/variants.ts
+++ b/components/LanguageSwitcher/variants.ts
@@ -4,17 +4,12 @@ import styles from "./languageSwitcher.module.css"
 
 export const languageSwitcherVariants = cva(styles.languageSwitcher, {
   variants: {
-    color: {
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-    },
     position: {
-      header: styles.top,
-      footer: styles.bottom,
+      header: styles.header,
+      footer: styles.footer,
     },
     defaultVariants: {
-      color: "burgundy",
-      position: "top",
+      position: "header",
     },
   },
 })
diff --git a/components/LoginButton/index.tsx b/components/LoginButton/index.tsx
index 54ba17b34..f6b163b38 100644
--- a/components/LoginButton/index.tsx
+++ b/components/LoginButton/index.tsx
@@ -18,13 +18,13 @@ export default function LoginButton({
   trackingId,
   children,
   color = "black",
-  variant = "default",
+  variant = "navigation",
 }: PropsWithChildren<{
   className: string
   trackingId: string
   position: TrackingPosition
   color?: LinkProps["color"]
-  variant?: "default" | "signupVerification"
+  variant?: "navigation" | "signupVerification"
 }>) {
   const lang = useLang()
   const pathName = useLazyPathname({ includeSearchParams: true })
diff --git a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
index 013eb746d..be877dd9e 100644
--- a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
+++ b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
@@ -50,7 +50,12 @@ export default function AccordionItem({
         <summary className={styles.summary}>
           {IconComp && <IconComp className={styles.icon} color="burgundy" />}
           <span className={styles.title}>{title}</span>
-          <ChevronDownIcon className={styles.chevron} color="burgundy" />
+          <ChevronDownIcon
+            className={styles.chevron}
+            color="burgundy"
+            width={20}
+            height={20}
+          />
         </summary>
         <div ref={contentRef} className={styles.content}>
           {children}
diff --git a/components/TempDesignSystem/Alert/Sidepeek/index.tsx b/components/TempDesignSystem/Alert/Sidepeek/index.tsx
index db69cf563..d967bd24e 100644
--- a/components/TempDesignSystem/Alert/Sidepeek/index.tsx
+++ b/components/TempDesignSystem/Alert/Sidepeek/index.tsx
@@ -30,7 +30,7 @@ export default function AlertSidepeek({
         wrapping
       >
         {ctaText}
-        <ChevronRightIcon />
+        <ChevronRightIcon height={20} width={20} />
       </Button>
       {sidePeekIsOpen ? (
         <SidePeek
diff --git a/components/TempDesignSystem/Form/SelectChevron/index.tsx b/components/TempDesignSystem/Form/SelectChevron/index.tsx
index 6ee7982fb..2033283d4 100644
--- a/components/TempDesignSystem/Form/SelectChevron/index.tsx
+++ b/components/TempDesignSystem/Form/SelectChevron/index.tsx
@@ -5,7 +5,7 @@ import styles from "./chevron.module.css"
 export default function SelectChevron() {
   return (
     <span aria-hidden="true" className={styles.chevron}>
-      <ChevronDownIcon color="grey80" />
+      <ChevronDownIcon color="grey80" width={20} height={20} />
     </span>
   )
 }
diff --git a/components/TempDesignSystem/Link/index.tsx b/components/TempDesignSystem/Link/index.tsx
index 2c46c8b6f..47c00bba4 100644
--- a/components/TempDesignSystem/Link/index.tsx
+++ b/components/TempDesignSystem/Link/index.tsx
@@ -23,6 +23,7 @@ export default function Link({
   scroll = true,
   prefetch,
   variant,
+  weight,
   trackingId,
   onClick,
   /**
@@ -45,6 +46,7 @@ export default function Link({
     textDecoration,
     color,
     size,
+    weight,
     variant,
   })
 
diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css
index 4e09ffc3e..138c8094e 100644
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -154,20 +154,25 @@
   color: var(--Base-Text-Medium-contrast);
 }
 
-.red {
-  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
-}
-
 .peach80:hover,
 .peach80:active {
   color: var(--Base-Text-High-contrast);
 }
 
+.peach80 *,
+.peach80 * {
+  fill: var(--Base-Text-Medium-contrast);
+}
+
 .peach80:hover *,
 .peach80:active * {
   fill: var(--Base-Text-High-contrast);
 }
 
+.red {
+  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
+}
+
 .white {
   color: var(--Base-Button-Primary-On-Fill-Normal);
 }
@@ -213,6 +218,14 @@
   letter-spacing: var(--typography-Caption-Bold-letterSpacing);
   line-height: var(--typography-Caption-Bold-lineHeight);
 }
+.bold {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: 500
+    /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight) */;
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
+}
 
 .menu {
   display: flex;
@@ -223,11 +236,6 @@
   padding: var(--Spacing-x1);
   gap: var(--Spacing-x-one-and-half);
   color: var(--Base-Text-High-contrast);
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
   border-radius: var(--Corner-radius-Medium);
 }
 
@@ -236,6 +244,12 @@
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 
+.navigation {
+  color: var(--Base-Text-High-contrast);
+  text-decoration: none;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
 .signupVerification {
   background-color: var(--Base-Button-Primary-Fill-Normal);
   color: var(--Base-Button-Inverted-Fill-Normal);
diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts
index 267da008f..61c7f8493 100644
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -26,12 +26,16 @@ export const linkVariants = cva(styles.link, {
       none: styles.noDecoration,
       underline: styles.underline,
     },
+    weight: {
+      bold: styles.bold,
+    },
     variant: {
       breadcrumb: styles.breadcrumb,
       default: styles.default,
       icon: styles.icon,
       underscored: styles.underscored,
       myPageMobileDropdown: styles.myPageMobileDropdown,
+      navigation: styles.navigation,
       menu: styles.menu,
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,
diff --git a/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx b/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
index cc90086ce..84f654639 100644
--- a/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
+++ b/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
@@ -31,7 +31,7 @@ export default function TeaserCardSidepeek({
         wrapping
       >
         {button.call_to_action_text}
-        <ChevronRightIcon />
+        <ChevronRightIcon height={20} width={20} />
       </Button>
       <SidePeek
         title={heading}
diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css
index e9c342d2b..5bdb533c1 100644
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -73,11 +73,11 @@
 }
 
 .textMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
+  color: var(--Base-Text-Medium-contrast);
 }
 
 .textHighContrast {
-  color: var(--UI-Text-High-contrast);
+  color: var(--Base-Text-High-contrast);
 }
 
 .baseTextMediumContrast {
diff --git a/types/components/icon.ts b/types/components/icon.ts
index 290c9ed32..17156dee4 100644
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -22,9 +22,13 @@ export enum IconName {
   Check = "Check",
   CheckCircle = "CheckCircle",
   ChevronDown = "ChevronDown",
+  ChevronDownSmall = "ChevronDownSmall",
   ChevronLeft = "ChevronLeft",
+  ChevronLeftSmall = "ChevronLeftSmall",
   ChevronRight = "ChevronRight",
   ChevronRightSmall = "ChevronRightSmall",
+  ChevronUp = "ChevronUp",
+  ChevronUpSmall = "ChevronUpSmall",
   Close = "Close",
   CloseLarge = "CloseLarge",
   CoffeeAlt = "CoffeeAlt",