diff --git a/src/components/Layout/LanguagePicker/index.tsx b/src/components/Layout/LanguagePicker/index.tsx
index 8bb1be32d..77377ff9e 100644
--- a/src/components/Layout/LanguagePicker/index.tsx
+++ b/src/components/Layout/LanguagePicker/index.tsx
@@ -89,7 +89,9 @@ const LanguagePicker: React.FC = () => {
     <div className="relative">
       <div>
         <button
-          className="p-1 text-gray-400 rounded-full hover:bg-gray-600 hover:text-white focus:outline-none focus:ring focus:text-white"
+          className={`p-1 rounded-full sm:p-2 hover:bg-gray-600 hover:text-white focus:outline-none focus:bg-gray-600 focus:ring-1 focus:ring-gray-500 focus:text-white ${
+            isDropdownOpen ? 'bg-gray-600 text-white' : 'text-gray-400'
+          }`}
           aria-label="Language Picker"
           onClick={() => setDropdownOpen(true)}
         >
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 10d146fa8..d4d161d2e 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -72,7 +72,7 @@ const Layout: React.FC = ({ children }) => {
           </button>
           <div className="flex justify-between flex-1 pr-4 md:pr-4 md:pl-4">
             <SearchInput />
-            <div className="flex items-center ml-2 md:ml-4">
+            <div className="flex items-center ml-2">
               <LanguagePicker />
               <UserDropdown />
             </div>