diff --git a/frontend/src/components/GlobalSearchBar/GlobalSearchBar.tsx b/frontend/src/components/GlobalSearchBar/GlobalSearchBar.tsx
index 509d2a8..8ce1522 100644
--- a/frontend/src/components/GlobalSearchBar/GlobalSearchBar.tsx
+++ b/frontend/src/components/GlobalSearchBar/GlobalSearchBar.tsx
@@ -367,7 +367,11 @@ const GlobalSearchBar: React.FC<GlobalSearchBarProps> = ({ sx, ...props }) => {
             }}
             sx={{
               width: '100%',
-              minWidth: 600,
+              minWidth: {
+                xs: '200px',      // Mobile: minimum viable width
+                sm: '400px',      // Small tablets
+                md: 600,          // Desktop: original size
+              },
               maxWidth: 1200,
               '& .MuiOutlinedInput-root': {
                 background: theme.palette.mode === 'light'
diff --git a/frontend/src/components/Layout/AppLayout.tsx b/frontend/src/components/Layout/AppLayout.tsx
index 310148a..de117ef 100644
--- a/frontend/src/components/Layout/AppLayout.tsx
+++ b/frontend/src/components/Layout/AppLayout.tsx
@@ -441,6 +441,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
             fontWeight: 700,
             mr: 1,
             fontSize: '1.1rem',
+            display: isPWA ? 'none' : 'block',
             background: theme.palette.mode === 'light'
               ? 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)'
               : 'linear-gradient(135deg, #f8fafc 0%, #a855f7 100%)',
@@ -455,15 +456,24 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           </Typography>
 
           {/* Global Search Bar */}
-          <Box sx={{ flexGrow: 2, display: 'flex', justifyContent: 'center', mx: 1, flex: '1 1 auto' }}>
+          <Box sx={{
+            flexGrow: 2,
+            display: 'flex',
+            justifyContent: 'center',
+            mx: { xs: 0.5, md: 1 },
+            flex: '1 1 auto',
+            minWidth: { xs: 0, md: 'auto' },
+            overflow: 'hidden',
+          }}>
             <GlobalSearchBar />
           </Box>
 
           {/* Notifications */}
-          <IconButton 
+          <IconButton
             onClick={handleNotificationClick}
-            sx={{ 
-              mr: 2,
+            sx={{
+              mr: { xs: 1, md: 2 },
+              display: isPWA ? 'none' : 'flex',
               color: 'text.secondary',
               background: theme.palette.mode === 'light'
                 ? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)'
@@ -483,8 +493,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
               },
             }}
           >
-            <Badge 
-              badgeContent={unreadCount} 
+            <Badge
+              badgeContent={unreadCount}
               sx={{
                 '& .MuiBadge-badge': {
                   background: 'linear-gradient(135deg, #ef4444 0%, #f97316 100%)',
@@ -500,7 +510,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 
           {/* Language Switcher */}
           <Box sx={{
-            mr: 2,
+            mr: { xs: 1, md: 2 },
+            display: isPWA ? 'none' : { xs: 'none', sm: 'block' },
             background: theme.palette.mode === 'light'
               ? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)'
               : 'linear-gradient(135deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.6) 100%)',
@@ -521,7 +532,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 
           {/* Theme Toggle */}
           <Box sx={{
-            mr: 2,
+            mr: { xs: 1, md: 2 },
             background: theme.palette.mode === 'light'
               ? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)'
               : 'linear-gradient(135deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.6) 100%)',
@@ -666,7 +677,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
         <Box sx={{
           p: 3,
           // Add bottom padding when bottom nav is visible (PWA mode on mobile)
-          pb: isPWA && isMobile ? 'calc(64px + 24px + env(safe-area-inset-bottom, 0px))' : 3,
+          pb: isPWA && isMobile ? 'calc(64px + 24px + 8px + env(safe-area-inset-bottom, 0px))' : 3,
         }}>
           {children}
         </Box>