diff --git a/components/languageSelector/LanguageSelect.js b/components/languageSelector/LanguageSelect.js
index 99d8a68babaf..953e369c6037 100644
--- a/components/languageSelector/LanguageSelect.js
+++ b/components/languageSelector/LanguageSelect.js
@@ -8,7 +8,7 @@ export default function LanguageSelect({
     return (
         <select data-testid="Select-form"
             onChange={(ev) => onChange(ev.target.value)}
-            className={twMerge(`form-select h-full py-0 px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}`)}
+            className={twMerge(`form-select h-full px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}`)}
             value={selected}
         >
             {options.map((option, index) => (
diff --git a/components/navigation/MobileNavMenu.js b/components/navigation/MobileNavMenu.js
index a7f88fb4eb22..770030081ccf 100644
--- a/components/navigation/MobileNavMenu.js
+++ b/components/navigation/MobileNavMenu.js
@@ -9,7 +9,7 @@ import Link from 'next/link';
 import NavItemDropdown from '../icons/NavItemDropdown';
 import { useState } from 'react';
 
-export default function MobileNavMenu({ onClickClose = () => {} }) {
+export default function MobileNavMenu({ onClickClose = () => {}, LanguageSelector }) {
   const [open, setOpen] = useState();
   function showMenu(menu) {
     if (open === menu) {
@@ -30,6 +30,7 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
                 </a>
               </Link>
               <div className="flex flex-row items-center justify-content -mr-2" data-testid="MobileNav-button">
+              {LanguageSelector}
                 <SearchButton
                   className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
                   aria-label="Open Search"
diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index 235df1c8a8cb..d9267b39333c 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -129,6 +129,16 @@ export default function NavBar({
     setOpen(null);
   }, [asPath]);
 
+  const LanguageSelector = (
+    <LanguageSelect
+      options={uniqueLangs}
+      onChange={(value) => {
+        changeLanguage(value.toLowerCase(), true);
+      }}
+      className=""
+      selected={i18n.language ? i18n.language.toUpperCase() : "EN"}
+    />
+  );
   return (
     <div className={`bg-white ${className} z-50`}>
       {/* <a href="#main-content" className="block md:inline-block absolute transform -translate-y-20 focus:translate-y-0 bg-gray-100 text-gray-700 p-5 text-md font-semibold" alt="Skip to main content">Skip to main content</a> */}
@@ -146,6 +156,8 @@ export default function NavBar({
         )}
 
         <div className="flex flex-row items-center justify-center -mr-2 -my-2 lg:hidden" data-testid="Navbar-search">
+        {/* // Language Selector for Mobile */}
+        {LanguageSelector}
           <SearchButton
             className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
             aria-label="Open Search"
@@ -206,15 +218,8 @@ export default function NavBar({
               <IconLoupe />
             </SearchButton>
 
-            {/* // Language Picker Component */}
-            <LanguageSelect
-              options={uniqueLangs}
-              onChange={(value) => {
-                changeLanguage(value.toLowerCase(), true);
-              }}
-              className=""
-              selected={i18n.language ? i18n.language.toUpperCase() : "EN"}
-            />
+            {/* // Language Selector for normal screen */}
+            {LanguageSelector}
 
             <GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />
           </div>
@@ -223,7 +228,7 @@ export default function NavBar({
       </div>
 
       {/* Mobile menu, show/hide based on mobile menu state. */}
-      {mobileMenuOpen && <MobileNavMenu onClickClose={() => setMobileMenuOpen(false)} />}
+      {mobileMenuOpen && <MobileNavMenu  onClickClose={() => setMobileMenuOpen(false)} LanguageSelector={LanguageSelector}/>}
 
     </div>
   )