diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 0b61785..72295c8 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -14,6 +14,8 @@ export default function Header() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [logo, setLogo] = useState<string | null>(null);
+  const [mobileSearchValue, setMobileSearchValue] = useState('');
+  const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
   const { theme, setTheme } = useTheme();
   const { locale, setLocale, t } = useLocale();
   const [mounted, setMounted] = useState(false);
@@ -251,16 +253,28 @@ export default function Header() {
         </button>
 
         {/* Mobile Menu Overlay */}
-        <div className={`fixed inset-0 bg-white dark:bg-secondary z-40 transition-transform duration-300 ease-in-out md:hidden flex flex-col pt-24 px-6 overflow-y-auto ${isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
+        <div className={`fixed inset-0 bg-white dark:bg-secondary z-40 transition-transform duration-300 ease-in-out md:hidden flex flex-col pt-20 px-6 overflow-y-auto ${isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
           
           {/* Mobile Search */}
           <div className="mb-6 relative shrink-0">
-            <i className="ri-search-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
-            <input 
-              type="text" 
-              placeholder={t('nav.search')}
-              className="w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
-            />
+            <div className="relative">
+              <i className="ri-search-line absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
+              <input 
+                type="text" 
+                placeholder={t('nav.search')}
+                value={mobileSearchValue}
+                onChange={(e) => setMobileSearchValue(e.target.value)}
+                onFocus={() => setIsMobileSearchOpen(true)}
+                onBlur={() => setTimeout(() => setIsMobileSearchOpen(false), 200)}
+                className="w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
+              />
+              <SearchDropdown 
+                isOpen={isMobileSearchOpen} 
+                searchValue={mobileSearchValue}
+                onSearchChange={setMobileSearchValue}
+                onClose={() => setIsMobileSearchOpen(false)} 
+              />
+            </div>
           </div>
 
           <nav className="flex flex-col gap-4 text-base font-medium">