diff --git a/src/app/apple-icon.tsx b/src/app/apple-icon.tsx
index f594f156..85294345 100644
--- a/src/app/apple-icon.tsx
+++ b/src/app/apple-icon.tsx
@@ -86,62 +86,62 @@ export default function Icon({ id }: { id: string }) {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 69.9406V0H110.241V69.9406L129.742 96.7209L149.242 69.9406Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 190.06V260H149.242V190.06L129.742 163.279L110.241 190.06Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 190.068L190.322 246.749L222.042 223.609L180.702 167.188L149.242 156.788V190.068Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 69.9413L69.1611 13.2607L37.4408 36.401L78.7811 92.8215L110.241 103.222V69.9413Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7807 92.8243L12.2201 71.2441L0 108.424L66.5606 130.005L98.2809 119.865L78.7807 92.8243Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M161.201 140.141L180.701 167.181L247.261 188.762L259.481 151.581L192.921 130.001L161.201 140.141Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M192.921 130.005L259.481 108.424L247.261 71.2441L180.701 92.8243L161.201 119.865L192.921 130.005Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M66.5606 130.001L0 151.581L12.2201 188.762L78.7807 167.181L98.2809 140.141L66.5606 130.001Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7811 167.188L37.4408 223.609L69.1611 246.749L110.241 190.068V156.788L78.7811 167.188Z"
             fill="#FF4F40"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M180.702 92.8215L222.042 36.401L190.322 13.2607L149.242 69.9413V103.222L180.702 92.8215Z"
             fill="#FF4F40"
           />
diff --git a/src/app/icon.tsx b/src/app/icon.tsx
index 61cc18cc..1b981273 100644
--- a/src/app/icon.tsx
+++ b/src/app/icon.tsx
@@ -66,62 +66,62 @@ export default function Icon({ id }: { id: string }) {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 69.9406V0H110.241V69.9406L129.742 96.7209L149.242 69.9406Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 190.06V260H149.242V190.06L129.742 163.279L110.241 190.06Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 190.068L190.322 246.749L222.042 223.609L180.702 167.188L149.242 156.788V190.068Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 69.9413L69.1611 13.2607L37.4408 36.401L78.7811 92.8215L110.241 103.222V69.9413Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7807 92.8243L12.2201 71.2441L0 108.424L66.5606 130.005L98.2809 119.865L78.7807 92.8243Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M161.201 140.141L180.701 167.181L247.261 188.762L259.481 151.581L192.921 130.001L161.201 140.141Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M192.921 130.005L259.481 108.424L247.261 71.2441L180.701 92.8243L161.201 119.865L192.921 130.005Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M66.5606 130.001L0 151.581L12.2201 188.762L78.7807 167.181L98.2809 140.141L66.5606 130.001Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7811 167.188L37.4408 223.609L69.1611 246.749L110.241 190.068V156.788L78.7811 167.188Z"
             fill="#FF4F40"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M180.702 92.8215L222.042 36.401L190.322 13.2607L149.242 69.9413V103.222L180.702 92.8215Z"
             fill="#FF4F40"
           />
diff --git a/src/features/common/assets/arrow-head-icon.component.tsx b/src/features/common/assets/arrow-head-icon.component.tsx
index a0a25859..0910b453 100644
--- a/src/features/common/assets/arrow-head-icon.component.tsx
+++ b/src/features/common/assets/arrow-head-icon.component.tsx
@@ -12,9 +12,9 @@ export const ArrowHeadIconComponent: React.FC = () => {
       <path
         d="M6 4L10 8L6 12"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );
diff --git a/src/features/common/assets/download-icon.component.tsx b/src/features/common/assets/download-icon.component.tsx
index c7eb7ec2..f401a279 100644
--- a/src/features/common/assets/download-icon.component.tsx
+++ b/src/features/common/assets/download-icon.component.tsx
@@ -12,16 +12,16 @@ export const DownloadIconComponent: React.FC = () => {
       <path
         d="M8 10V2M8 10L11 7M8 10L5 7"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
       <path
         d="M1 11V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V11"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );
diff --git a/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx b/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx
index 7607d241..3961a806 100644
--- a/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx
+++ b/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx
@@ -12,8 +12,8 @@ export const DarkIconComponent: React.FC = () => {
       <path
         d="M14.2252 10.0845C14.54 9.95039 14.8559 10.244 14.7134 10.555C14.3379 11.3742 13.8066 12.1157 13.1463 12.7369C12.2739 13.5575 11.2056 14.1406 10.0435 14.4303C8.88133 14.7201 7.6643 14.7068 6.50878 14.3918C5.35325 14.0767 4.29789 13.4705 3.44363 12.631C2.58937 11.7915 1.9648 10.7469 1.62965 9.59707C1.2945 8.44722 1.25998 7.23061 1.52941 6.06361C1.79883 4.89661 2.36318 3.81825 3.16847 2.9317C3.76901 2.27056 4.48855 1.73258 5.28668 1.34413C5.59577 1.1937 5.88975 1.51373 5.74469 1.82539V1.82539C3.32126 7.032 8.59731 12.4835 13.8804 10.2315L14.2252 10.0845Z"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );
diff --git a/src/features/common/components/bars/ribbon/assets/globe-icon.component.tsx b/src/features/common/components/bars/ribbon/assets/globe-icon.component.tsx
index 7552b6c2..71ee0194 100644
--- a/src/features/common/components/bars/ribbon/assets/globe-icon.component.tsx
+++ b/src/features/common/components/bars/ribbon/assets/globe-icon.component.tsx
@@ -3,10 +3,11 @@ import React from "react";
 export const GlobeIconComponent: React.FC = () => {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
     >
       <path
         fillRule="evenodd"
@@ -15,17 +16,20 @@ export const GlobeIconComponent: React.FC = () => {
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
+        stroke="currentColor"
       ></path>
       <path
         d="M2 12H22"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
+        stroke="currentColor"
       ></path>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx b/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx
index d1f78402..05f3eebe 100644
--- a/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx
+++ b/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx
@@ -16,11 +16,11 @@ export const LightIconComponent: React.FC = () => {
         height="6"
         rx="3"
         stroke="currentColor"
-        stroke-width="1.5"
+        strokeWidth="1.5"
       ></rect>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M8 0.25C7.58579 0.25 7.25 0.585786 7.25 1L7.25391 1.07715C7.29248 1.45517 7.6118 1.75 8 1.75C8.41421 1.75 8.75 1.41421 8.75 1C8.75 0.585786 8.41421 0.25 8 0.25ZM8 14.25C7.58579 14.25 7.25 14.5858 7.25 15L7.25391 15.0771C7.29248 15.4552 7.6118 15.75 8 15.75C8.41421 15.75 8.75 15.4142 8.75 15C8.75 14.5858 8.41421 14.25 8 14.25ZM15.0771 7.25391C15.4552 7.29248 15.75 7.6118 15.75 8C15.75 8.3882 15.4552 8.70752 15.0771 8.74609L15 8.75C14.5858 8.75 14.25 8.41421 14.25 8C14.25 7.58579 14.5858 7.25 15 7.25L15.0771 7.25391ZM1.75 8C1.75 7.6118 1.45517 7.29248 1.07715 7.25391L1 7.25C0.585786 7.25 0.25 7.58579 0.25 8C0.25 8.41421 0.585786 8.75 1 8.75L1.07715 8.74609C1.45517 8.70752 1.75 8.3882 1.75 8Z"
         fill="currentColor"
       ></path>
diff --git a/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx b/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx
index dbc0ed77..17d5c982 100644
--- a/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx
+++ b/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx
@@ -12,7 +12,7 @@ export const SystemIconComponent: React.FC = () => {
       <path
         d="M1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4C2.34315 1 1 2.34315 1 4Z"
         stroke="currentColor"
-        stroke-width="1.5"
+        strokeWidth="1.5"
       ></path>
       <rect
         x="4"
@@ -20,8 +20,8 @@ export const SystemIconComponent: React.FC = () => {
         width="8"
         height="5"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
       ></rect>
       <rect
         x="11.25"
@@ -34,9 +34,9 @@ export const SystemIconComponent: React.FC = () => {
       <path
         d="M4 12H10"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );
diff --git a/src/features/common/components/bars/ribbon/ribbon.component.tsx b/src/features/common/components/bars/ribbon/ribbon.component.tsx
index 3403d15e..4827cb2f 100644
--- a/src/features/common/components/bars/ribbon/ribbon.component.tsx
+++ b/src/features/common/components/bars/ribbon/ribbon.component.tsx
@@ -14,7 +14,6 @@ import {
 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 { GlobeIconComponent } from "@/features/common/components/bars/ribbon/assets/globe-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";
@@ -37,10 +36,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
 }) => {
   const theme$ = useAppStore((state) => state.theme$);
 
-  const currentLanguage = dictionary.languagePicker.options.filter(
-    (element) => element.code === languageCode,
-  )[0];
-
   const sanitizedThemePickerCodeValue = useMemo(() => {
     return getSanitizedThemePickerCodeValue(themeCode);
   }, [themeCode]);
@@ -85,25 +80,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
     [dictionary.themePicker.options],
   );
 
-  const languageOptions = useMemo(
-    () =>
-      dictionary.languagePicker.options.map((option) => {
-        return {
-          code: option.code,
-          full: {
-            ...option,
-            icon: null,
-          },
-          compact: {
-            ...option,
-            label: option.code.toUpperCase(),
-            icon: null,
-          },
-        };
-      }),
-    [dictionary.languagePicker.options],
-  );
-
   const handleThemeSelection = useCallback(
     async (value: ThemePickerCodeValues) => {
       const themePreference = await savePreferredThemeInCookie(
@@ -202,21 +178,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
               listLabel: dictionary.themePicker.list.ariaLabel,
             }}
           />
-          {dictionary.languagePicker.options.length > 1 && (
-            <RibbonPickerComponent
-              icon={<GlobeIconComponent />}
-              label={currentLanguage.label}
-              compactLabel={currentLanguage.code.toUpperCase()}
-              languageCode={languageCode}
-              selectedOptionCode={languageCode}
-              handleSelection={handleLanguageSelection}
-              options={languageOptions}
-              aria={{
-                buttonLabel: dictionary.languagePicker.button.ariaLabel,
-                listLabel: dictionary.languagePicker.list.ariaLabel,
-              }}
-            />
-          )}
         </div>
       </BoxComponent>
     </>
diff --git a/src/features/common/components/footer/footer.component.tsx b/src/features/common/components/footer/footer.component.tsx
index ad06e00d..1c91d81c 100644
--- a/src/features/common/components/footer/footer.component.tsx
+++ b/src/features/common/components/footer/footer.component.tsx
@@ -1,6 +1,12 @@
 "use client";
 
 import React, { MouseEvent, useState } from "react";
+import Select, {
+  SingleValue,
+  OptionsOrGroups,
+  GroupBase,
+  NonceProvider,
+} from "react-select";
 import { FooterIconsComponent } from "./footer-Icons.component";
 import { MonoFont, SecondaryFont } from "@/libs/theme/fonts";
 import Image from "next/image";
@@ -18,6 +24,9 @@ import { SiteBrandComponent } from "@/features/common/components/site-brand/site
 import { Button } from "react-aria-components";
 import { Auth0LogoComponent } from "../../assets/auth0-logo.component";
 import { getBrandDictionary } from "@/features/localization/services/brand-dictionary.service";
+import { savePreferredLanguage } from "@/features/localization/services/ui-language.utils";
+import { UiLanguageModel } from "../../models/ui-language.model";
+import { GlobeIconComponent } from "../bars/ribbon/assets/globe-icon.component";
 
 interface FooterComponentProps {
   languageCode: string;
@@ -28,8 +37,19 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
   languageCode,
   dictionary,
 }) => {
+  const currentLanguage = dictionary.languagePicker.options.filter(
+    (element) => element.value === languageCode
+  )[0];
+
+  const handleChange = (selection: SingleValue<UiLanguageModel>) => {
+    if (!selection) {
+      return;
+    }
+    savePreferredLanguage(selection.value);
+  };
+
   const [modalState, setModalState] = useState<ModalStateValues>(
-    ModalStateValues.CLOSED,
+    ModalStateValues.CLOSED
   );
   const images = getBrandDictionary(languageCode);
 
@@ -64,7 +84,10 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
         contentClassName={styles.content}
       >
         <div className={styles.siteLogo}>
-          <SiteBrandComponent path={languagePathPrefix} languageCode={languageCode} />
+          <SiteBrandComponent
+            path={languagePathPrefix}
+            languageCode={languageCode}
+          />
         </div>
         <div className={styles.resources}>
           <span className={clsx(styles.resources__title, MonoFont.className)}>
@@ -110,7 +133,7 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
                   }}
                   className={clsx(
                     styles.resource__button,
-                    SecondaryFont.className,
+                    SecondaryFont.className
                   )}
                 >
                   {trigger.text}
@@ -158,11 +181,80 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
             target="_blank"
             href="https://auth0.com/"
           >
-            <Auth0LogoComponent title={images.tooltip}/>
+            <Auth0LogoComponent title={images.tooltip} />
           </Link>
           <span className={styles.bottomSection__copyright}>
             {dictionary.copyright}
           </span>
+          {dictionary.languagePicker.options.length > 1 && (
+            <div className={styles.subFooter__languagePicker}>
+              <GlobeIconComponent />
+              <Select
+                aria-label={"Language picker"}
+                className={styles.languageSelect__container}
+                onChange={handleChange}
+                options={
+                  dictionary.languagePicker.options as OptionsOrGroups<
+                    UiLanguageModel,
+                    GroupBase<UiLanguageModel>
+                  >
+                }
+                menuPortalTarget={document.body}
+                classNamePrefix={"language-select"}
+                isSearchable={false}
+                placeholder={currentLanguage.label}
+                value={currentLanguage}
+                styles={{
+                  control: (base, state) => ({
+                    ...base,
+                    fontSize: "0.875rem",
+                    background: "transparent",
+                    border: "none",
+                    borderRadius: "0px",
+                    display: "flex",
+                    alignItems: "center",
+                    cursor: "pointer",
+                    minHeight: "2.5rem",
+                    boxSizing: "border-box",
+                    boxShadow: "none",
+                  }),
+                  input: (base) => ({
+                    ...base,
+                    margin: "0px",
+                  }),
+                  indicatorSeparator: () => ({
+                    display: "none",
+                  }),
+                  indicatorsContainer: (base) => ({
+                    ...base,
+                    height: "20px",
+                    alignSelf: "center",
+                  }),
+                  dropdownIndicator: (base) => ({
+                    ...base,
+                    padding: "0px",
+                    height: "100%",
+                    alignSelf: "center",
+                    color: "inherit",
+                  }),
+                  valueContainer: (base) => ({
+                    ...base,
+                    padding: "0px",
+                  }),
+                  singleValue: (base) => ({
+                    ...base,
+                    color: "unset",
+                  }),
+                  menu: (base) => ({
+                    ...base,
+                    top: "unset",
+                    bottom: "1.75rem",
+                    right: "0",
+                  }),
+                }}
+              />
+            </div>
+          )}
         </div>
       </BoxComponent>
     </footer>
diff --git a/src/features/common/components/footer/footer.module.scss b/src/features/common/components/footer/footer.module.scss
index 83710432..0607c215 100644
--- a/src/features/common/components/footer/footer.module.scss
+++ b/src/features/common/components/footer/footer.module.scss
@@ -267,3 +267,14 @@
 
   color: var(--color_fg_default);
 }
+
+.subFooter__languagePicker {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--color_fg_default);
+
+  &:hover {
+    color: (var(--color_fg_bold));
+  }
+}
diff --git a/src/features/common/models/ui-language.model.ts b/src/features/common/models/ui-language.model.ts
index 2c33f718..0d12bf65 100644
--- a/src/features/common/models/ui-language.model.ts
+++ b/src/features/common/models/ui-language.model.ts
@@ -1,4 +1,4 @@
 export interface UiLanguageModel {
-  code: string;
+  value: string;
   label: string;
 }
diff --git a/src/features/localization/dictionaries/layout/en.tsx b/src/features/localization/dictionaries/layout/en.tsx
index 1bbe8fa3..14da086d 100644
--- a/src/features/localization/dictionaries/layout/en.tsx
+++ b/src/features/localization/dictionaries/layout/en.tsx
@@ -39,20 +39,6 @@ export const enLayoutDictionary: LayoutDictionaryModel = {
         },
       ],
     },
-    languagePicker: {
-      button: {
-        ariaLabel: "Select page language",
-      },
-      list: {
-        ariaLabel: "list of page languages",
-      },
-      options: [
-        {
-          code: "en",
-          label: "English",
-        },
-      ],
-    },
   },
   header: {
     links: [
@@ -162,6 +148,20 @@ export const enLayoutDictionary: LayoutDictionaryModel = {
         },
       ],
     },
+    languagePicker: {
+      button: {
+        ariaLabel: "Select page language",
+      },
+      list: {
+        ariaLabel: "list of page languages",
+      },
+      options: [
+        {
+          value: "en",
+          label: "English",
+        },
+      ],
+    },
   },
   errors: {
     notFound: {
@@ -187,8 +187,8 @@ export const enLayoutDictionary: LayoutDictionaryModel = {
 };
 
 if (withJapanese) {
-  enLayoutDictionary.ribbon.languagePicker.options.push({
+  enLayoutDictionary.footer.languagePicker.options.push({
     label: "日本語",
-    code: "ja",
+    value: "ja",
   });
 }
diff --git a/src/features/localization/dictionaries/layout/ja.tsx b/src/features/localization/dictionaries/layout/ja.tsx
index c24af750..de2f0697 100644
--- a/src/features/localization/dictionaries/layout/ja.tsx
+++ b/src/features/localization/dictionaries/layout/ja.tsx
@@ -39,20 +39,6 @@ export const jaLayoutDictionary: LayoutDictionaryModel = {
         },
       ],
     },
-    languagePicker: {
-      button: {
-        ariaLabel: "ページの言語を選択してください",
-      },
-      list: {
-        ariaLabel: "ページ言語の一覧",
-      },
-      options: [
-        {
-          code: "en",
-          label: "English",
-        },
-      ],
-    },
   },
   header: {
     links: [
@@ -162,6 +148,20 @@ export const jaLayoutDictionary: LayoutDictionaryModel = {
         },
       ],
     },
+    languagePicker: {
+      button: {
+        ariaLabel: "ページの言語を選択してください",
+      },
+      list: {
+        ariaLabel: "ページ言語の一覧",
+      },
+      options: [
+        {
+          value: "en",
+          label: "English",
+        },
+      ],
+    },
   },
   errors: {
     notFound: {
@@ -187,8 +187,8 @@ export const jaLayoutDictionary: LayoutDictionaryModel = {
 };
 
 if (withJapanese) {
-  jaLayoutDictionary.ribbon.languagePicker.options.push({
+  jaLayoutDictionary.footer.languagePicker.options.push({
     label: "日本語",
-    code: "ja",
+    value: "ja",
   });
 }
diff --git a/src/features/localization/models/layout-dictionary.model.ts b/src/features/localization/models/layout-dictionary.model.ts
index df259944..3b57231a 100644
--- a/src/features/localization/models/layout-dictionary.model.ts
+++ b/src/features/localization/models/layout-dictionary.model.ts
@@ -26,7 +26,6 @@ export interface LayoutDictionaryModel {
       };
     };
     themePicker: RibbonPickerModel<ThemeModel>;
-    languagePicker: RibbonPickerModel<UiLanguageModel>;
   };
   header: {
     links: LinkMetadataModel[];
@@ -69,6 +68,7 @@ export interface LayoutDictionaryModel {
         id: string;
       }[];
     };
+    languagePicker: RibbonPickerModel<UiLanguageModel>;
   };
   errors: {
     notFound: {
diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss
index b3c577ce..5b23baa0 100644
--- a/src/libs/theme/styles/globals.scss
+++ b/src/libs/theme/styles/globals.scss
@@ -553,7 +553,8 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
   height: 100% !important;
 }
 
-.react-select__menu {
+.react-select__menu,
+.language-select__menu {
     background-color: var(--color_bg_layer) !important;
     border-radius: 0.75rem !important;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px !important;
@@ -570,7 +571,8 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 .react-select__menu-portal {
 }
 
-.react-select__menu-list {
+.react-select__menu-list,
+.language-select__menu-list {
   font-family: var(--font-primary), monospace !important;
   padding: 0 !important;
 
@@ -596,7 +598,8 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
   }
 }
 
-.react-select__option {
+.react-select__option,
+.language-select__option {
     cursor: pointer !important;
     display: flex !important;
     font-size: 0.875rem !important;
@@ -622,7 +625,8 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
     }
 }
 
-.react-select__option--is-selected {
+.react-select__option--is-selected,
+.language-select__option--is-selected {
   color: var(--color_fg_bold) !important;
   font-weight: 500;