diff --git a/src/features/common/components/bars/ribbon/ribbon.component.tsx b/src/features/common/components/bars/ribbon/ribbon.component.tsx
index 4827cb2f..d4954b89 100644
--- a/src/features/common/components/bars/ribbon/ribbon.component.tsx
+++ b/src/features/common/components/bars/ribbon/ribbon.component.tsx
@@ -1,129 +1,21 @@
 "use client";
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React from "react";
 import { LayoutDictionaryModel } from "@/features/localization/models/layout-dictionary.model";
 import styles from "./ribbon.module.scss";
 import { BoxComponent } from "@/features/common/components/box/box.component";
-import { savePreferredLanguage } from "@/features/localization/services/ui-language.utils";
 import Link from "next/link";
-import {
-  getSanitizedThemePickerCodeValue,
-  isLightThemePreference,
-  isSystemThemePreference,
-} from "@/features/themes/services/theme.utils";
-import { RibbonPickerComponent } from "@/features/common/components/bars/ribbon/ribbon-picker/ribbon-picker.component";
-import { LightIconComponent } from "@/features/common/components/bars/ribbon/assets/light-icon.component";
-import { DarkIconComponent } from "@/features/common/components/bars/ribbon/assets/dark-icon.component";
-import { ThemeModel } from "@/features/common/models/theme.model";
-import { useAppStore } from "@/features/common/services/app.store";
-import { SystemIconComponent } from "@/features/common/components/bars/ribbon/assets/system-icon.component";
-import {
-  ThemeCookieValues,
-  ThemePickerCodeValues,
-} from "@/features/common/values/theme.values";
-import { savePreferredThemeInCookie } from "@/features/themes/services/theme.client.utils";
 
 interface RibbonComponentProps {
-  themeCode: ThemeCookieValues;
-  languageCode: string;
   dictionary: LayoutDictionaryModel["ribbon"];
 }
 
 export const RibbonComponent: React.FC<RibbonComponentProps> = ({
-  themeCode,
-  languageCode,
   dictionary,
 }) => {
-  const theme$ = useAppStore((state) => state.theme$);
-
-  const sanitizedThemePickerCodeValue = useMemo(() => {
-    return getSanitizedThemePickerCodeValue(themeCode);
-  }, [themeCode]);
-
-  const [currentTheme, setCurrentTheme] = useState<ThemeModel>(
-    dictionary.themePicker.options.filter((element) =>
-      isSystemThemePreference(themeCode)
-        ? isSystemThemePreference(element.code)
-        : element.code === sanitizedThemePickerCodeValue,
-    )[0],
-  );
-
-  const themeOptions = useMemo(
-    () =>
-      dictionary.themePicker.options.map((option) => {
-        return {
-          code: option.code,
-          full: {
-            ...option,
-            label: option.label,
-            icon: isSystemThemePreference(option.code) ? (
-              <SystemIconComponent />
-            ) : isLightThemePreference(option.code) ? (
-              <LightIconComponent />
-            ) : (
-              <DarkIconComponent />
-            ),
-          },
-          compact: {
-            ...option,
-            label: null,
-            icon: isSystemThemePreference(option.code) ? (
-              <SystemIconComponent />
-            ) : isLightThemePreference(option.code) ? (
-              <LightIconComponent />
-            ) : (
-              <DarkIconComponent />
-            ),
-          },
-        };
-      }),
-    [dictionary.themePicker.options],
-  );
-
-  const handleThemeSelection = useCallback(
-    async (value: ThemePickerCodeValues) => {
-      const themePreference = await savePreferredThemeInCookie(
-        value,
-        languageCode,
-      );
-
-      if (themePreference) {
-        setCurrentTheme(themePreference);
-      }
-    },
-    [languageCode],
-  );
-
-  const handleLanguageSelection = useCallback(async (value: string) => {
-    await savePreferredLanguage(value);
-  }, []);
-
-  useEffect(() => {
-    if (theme$) {
-      setCurrentTheme(
-        dictionary.themePicker.options.filter((element) =>
-          isSystemThemePreference(themeCode)
-            ? isSystemThemePreference(element.code)
-            : element.code === sanitizedThemePickerCodeValue,
-        )[0],
-      );
-    }
-  }, [
-    dictionary.themePicker.options,
-    sanitizedThemePickerCodeValue,
-    theme$,
-    themeCode,
-  ]);
 
   return (
-    <>
-      <BoxComponent
-        contentAs="section"
-        containerClassName={styles.container}
-        wrapperClassName={styles.wrapper}
-        contentClassName={styles.content}
-        aria-label="Page options"
-      >
+    
         <div className={styles.cta}>
           <span className={styles.cta__title}>{dictionary.cta.title}</span>
           <Link
@@ -156,30 +48,5 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
             </div>
           </Link>
         </div>
-        <div className={styles.actions}>
-          <RibbonPickerComponent<ThemePickerCodeValues>
-            label={null}
-            compactLabel={null}
-            icon={
-              isSystemThemePreference(currentTheme.code) ? (
-                <SystemIconComponent />
-              ) : isLightThemePreference(currentTheme.code) ? (
-                <LightIconComponent />
-              ) : (
-                <DarkIconComponent />
-              )
-            }
-            languageCode={languageCode}
-            selectedOptionCode={currentTheme.code}
-            handleSelection={handleThemeSelection}
-            options={themeOptions}
-            aria={{
-              buttonLabel: dictionary.themePicker.button.ariaLabel,
-              listLabel: dictionary.themePicker.list.ariaLabel,
-            }}
-          />
-        </div>
-      </BoxComponent>
-    </>
   );
 };
diff --git a/src/features/common/components/bars/ribbon/ribbon.module.scss b/src/features/common/components/bars/ribbon/ribbon.module.scss
index 8959d4ef..7436d922 100644
--- a/src/features/common/components/bars/ribbon/ribbon.module.scss
+++ b/src/features/common/components/bars/ribbon/ribbon.module.scss
@@ -1,38 +1,10 @@
 @use "@/libs/theme/styles/variables" as *;
 @use "@/libs/theme/styles/mixins" as *;
 
-.container {
-  @include Container;
-
-  background: var(--color_bg_app_bar);
-  border-bottom: 1px solid;
-  border-image-slice: 1;
-  border-image-source: linear-gradient(
-    135deg,
-    rgb(76, 183, 163) 0%,
-    rgb(63, 89, 228) 50%,
-    rgb(64, 22, 160) 100%
-  );
-}
-
-.wrapper {
-  @include ExtendedGrid;
-  height: $ribbon-height;
-}
-
-.content {
-  position: relative;
-  @include InnerContentFlex;
-  height: 100%;
-  grid-column: 1 / -1;
-  align-items: center;
-  justify-content: space-between;
-
-  color: $neutrals-light-100-snow;
-}
-
 .cta {
   display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 0.75rem;
   line-height: 1.25rem;
   color: $Neutral0;
@@ -88,11 +60,3 @@
   }
 }
 
-.actions {
-  display: flex;
-  gap: 0.5rem;
-
-  @media #{$breakpoint-dimension-md} {
-    gap: 1rem;
-  }
-}
diff --git a/src/features/common/components/headers/header/header.component.tsx b/src/features/common/components/headers/header/header.component.tsx
index 7002824d..7810c630 100644
--- a/src/features/common/components/headers/header/header.component.tsx
+++ b/src/features/common/components/headers/header/header.component.tsx
@@ -25,6 +25,7 @@ import {
 } from "@/features/common/values/theme.values";
 import { ThemeModel } from "@/features/common/models/theme.model";
 import { savePreferredThemeInCookie } from "@/features/themes/services/theme.client.utils";
+import { RibbonComponent } from "../../bars/ribbon/ribbon.component";
 
 interface HeaderComponentProps {
   themeCode: ThemeCookieValues;
@@ -65,7 +66,7 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
           ),
         };
       }),
-    [dictionary.ribbon.themePicker.options]
+    [dictionary.ribbon.themePicker.options],
   );
 
   const sanitizedThemePickerCodeValue = useMemo(() => {
@@ -76,22 +77,22 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
     dictionary.ribbon.themePicker.options.filter((element) =>
       isSystemThemePreference(themeCode)
         ? isSystemThemePreference(element.code)
-        : element.code === sanitizedThemePickerCodeValue
-    )[0]
+        : element.code === sanitizedThemePickerCodeValue,
+    )[0],
   );
 
   const handleThemeSelection = useCallback(
     async (value: ThemePickerCodeValues) => {
       const themePreference = await savePreferredThemeInCookie(
         value,
-        languageCode
+        languageCode,
       );
 
       if (themePreference) {
         setCurrentTheme(themePreference);
       }
     },
-    [languageCode]
+    [languageCode],
   );
 
   return (
@@ -102,47 +103,52 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
       contentClassName={styles.content}
       aria-label="Main navigation"
     >
-      <div className={styles.brand}>
-        <SiteBrandComponent
-          path={languagePathPrefix}
-          languageCode={languageCode}
-        />
+      <div className={styles.ribbonContainer}>
+        <RibbonComponent dictionary={dictionary.ribbon} />
       </div>
-      <div className={styles.navContainer}>
-        <div className={styles.navTabs}>
-          <ul className={styles.navList}>
-            {dictionary.header.links.map((link) => {
-              const linkPath =
-                languageCode === DEFAULT_LANGUAGE_CODE || link.isExternal
-                  ? link.path
-                  : createUrlPath([languagePathPrefix, link.path]);
+      <div className={styles.outerNavContainer}>
+        <div className={styles.brand}>
+          <SiteBrandComponent
+            path={languagePathPrefix}
+            languageCode={languageCode}
+          />
+        </div>
+        <div className={styles.navContainer}>
+          <div className={styles.navTabs}>
+            <ul className={styles.navList}>
+              {dictionary.header.links.map((link) => {
+                const linkPath =
+                  languageCode === DEFAULT_LANGUAGE_CODE || link.isExternal
+                    ? link.path
+                    : createUrlPath([languagePathPrefix, link.path]);
 
-              return (
-                <li
-                  className={styles.navList__item}
-                  key={link.label}
-                  data-active={topSegmentPath === link.path}
-                >
-                  <Link
-                    {...(link.isExternal
-                      ? { target: "_blank", rel: "noopener noreferrer" }
-                      : {})}
-                    href={linkPath}
+                return (
+                  <li
+                    className={styles.navList__item}
+                    key={link.label}
+                    data-active={topSegmentPath === link.path}
                   >
-                    {link.label}
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
+                    <Link
+                      {...(link.isExternal
+                        ? { target: "_blank", rel: "noopener noreferrer" }
+                        : {})}
+                      href={linkPath}
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+        <div className={styles.actions}>
+          <ThemePickerComponent
+            options={themeOptions}
+            handleSelection={handleThemeSelection}
+            selectedOptionCode={currentTheme.code}
+          />
         </div>
-      </div>
-      <div className={styles.actions}>
-        <ThemePickerComponent
-          options={themeOptions}
-          handleSelection={handleThemeSelection}
-          selectedOptionCode={currentTheme.code}
-        />
       </div>
     </BoxComponent>
   );
diff --git a/src/features/common/components/headers/header/header.module.scss b/src/features/common/components/headers/header/header.module.scss
index 9a00d9dc..3400faf5 100644
--- a/src/features/common/components/headers/header/header.module.scss
+++ b/src/features/common/components/headers/header/header.module.scss
@@ -32,6 +32,11 @@
 }
 
 .content {
+  display: flex;
+  flex-direction: column;
+}
+
+.outerNavContainer {
   display: flex;
   width: 100%;
   margin: 0 auto;
@@ -49,6 +54,14 @@
   z-index: 100;
 }
 
+.ribbonContainer {
+  margin-top: 0.25rem;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 1rem;
+
+}
+
 .navContainer {
   display: flex;
   justify-content: center;
diff --git a/src/features/common/components/headers/mobile-header/mobile-header.component.tsx b/src/features/common/components/headers/mobile-header/mobile-header.component.tsx
index 32f1080b..c636172f 100644
--- a/src/features/common/components/headers/mobile-header/mobile-header.component.tsx
+++ b/src/features/common/components/headers/mobile-header/mobile-header.component.tsx
@@ -12,6 +12,7 @@ import { sitePaths } from "@/features/seo/site-tree";
 import { createUrlPath, getPathnameSegments } from "@/libs/utils/path.utils";
 import { SiteBrandComponent } from "@/features/common/components/site-brand/site-brand.component";
 import { ThemeCookieValues } from "@/features/common/values/theme.values";
+import { RibbonComponent } from "../../bars/ribbon/ribbon.component";
 
 interface MobileHeaderComponentProps {
   themeCode: ThemeCookieValues;
@@ -78,14 +79,21 @@ export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
 
   return (
     <>
-        <BoxComponent
-          contentAs="nav"
-          containerClassName={styles.container}
-          wrapperClassName={styles.wrapper}
-          contentClassName={styles.content}
-        >
+      <BoxComponent
+        contentAs="nav"
+        containerClassName={styles.container}
+        wrapperClassName={styles.wrapper}
+        contentClassName={styles.content}
+      >
+        <div className={styles.ribbonContainer}>
+          <RibbonComponent dictionary={dictionary.ribbon} />
+        </div>
+        <div className={styles.outerNavContainer}>
           <div className={styles.logo}>
-            <SiteBrandComponent path={languagePathPrefix} languageCode={languageCode}/>
+            <SiteBrandComponent
+              path={languagePathPrefix}
+              languageCode={languageCode}
+            />
           </div>
           <button
             className={styles.burgerIconWrapper}
@@ -102,7 +110,8 @@ export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
               aria-hidden={mobileMenuState === MobileMenuStateValues.CLOSED}
             />
           </button>
-        </BoxComponent>
+        </div>
+      </BoxComponent>
       <section
         className={styles.menu}
         aria-hidden={mobileMenuState === MobileMenuStateValues.CLOSED}
diff --git a/src/features/common/components/headers/mobile-header/mobile-header.module.scss b/src/features/common/components/headers/mobile-header/mobile-header.module.scss
index c5559533..b5e971e4 100644
--- a/src/features/common/components/headers/mobile-header/mobile-header.module.scss
+++ b/src/features/common/components/headers/mobile-header/mobile-header.module.scss
@@ -26,15 +26,19 @@
 
 .content {
   @include InnerContentFlex;
+  display: flex;
+  flex-direction: column;
+  color: $neutrals-light-100-snow;
+}
 
+.outerNavContainer {
+  display: flex;
   height: 100%;
   position: relative;
   grid-column: 1 / -1;
   gap: 1rem;
   align-items: center;
   justify-content: space-between;
-
-  color: $neutrals-light-100-snow;
 }
 
 .logo {
@@ -51,6 +55,12 @@
     display: flex;
   }
 }
+.ribbonContainer {
+  margin-top: 0.25rem;
+  display: flex;
+  padding-bottom: 0.5rem;
+
+}
 
 .burgerIconWrapper {
   appearance: none;
diff --git a/src/features/home/components/home-page/home-page.component.tsx b/src/features/home/components/home-page/home-page.component.tsx
index eb24a20f..6ec77ab5 100644
--- a/src/features/home/components/home-page/home-page.component.tsx
+++ b/src/features/home/components/home-page/home-page.component.tsx
@@ -1,6 +1,6 @@
 import React from "react";
+import styles from "./home-page.module.scss"
 import { HeroComponent } from "@/features/common/components/hero/hero.component";
-import { Auth0CtaComponent } from "@/features/common/components/auth0-cta/auth0-cta.component";
 import {
   getHomeDictionary,
   getJwtDictionary,
@@ -126,6 +126,7 @@ export const HomePageComponent: React.FC<HomePageComponentProps> = ({
           },
         ]}
       />
+      <h1 className={styles.visually_hidden}>{homeDictionary.metadata.title}</h1>
       <HeroComponent
         languageCode={languageCode}
         dictionary={homeDictionary.info}
diff --git a/src/features/home/components/home-page/home-page.module.scss b/src/features/home/components/home-page/home-page.module.scss
index 204049cc..21eb3d36 100644
--- a/src/features/home/components/home-page/home-page.module.scss
+++ b/src/features/home/components/home-page/home-page.module.scss
@@ -1,2 +1,11 @@
-.container {
+.visually_hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0
 }
\ No newline at end of file
diff --git a/src/libs/theme/styles/_variables.scss b/src/libs/theme/styles/_variables.scss
index b42bba6a..75fa4b29 100644
--- a/src/libs/theme/styles/_variables.scss
+++ b/src/libs/theme/styles/_variables.scss
@@ -150,8 +150,8 @@ $gradient-app-card---resting: linear-gradient(
 
 $ribbon-height: 2rem;
 $ribbon-height-mobile: 2rem;
-$navbar-height: 5rem;
-$navbar-height-mobile: 3rem;
+$navbar-height: 6rem;
+$navbar-height-mobile: 4.5rem;
 $main-nav-height: calc($ribbon-height + $navbar-height);
 $main-nav-height-mobile: calc($ribbon-height-mobile + $navbar-height-mobile);