diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b087fec..5285b06 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -90,7 +90,7 @@ const GlobalSearch = () => {
     const [loading, setLoading] = useState(false);
     const navigate = useNavigate();
     const location = useLocation();
-    const isMobile = useMediaQuery('(max-width:900px)');
+    const isMobile = useMediaQuery('(max-width:1150px)');
 
     // Debounced search
     useEffect(() => {
@@ -220,7 +220,7 @@ const App: React.FC = () => {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [catOpen, setCatOpen] = useState(false);
   const [adminMode, setAdminMode] = useState(localStorage.getItem('admin-mode') === 'true');
-  const isMobile = useMediaQuery('(max-width:900px)');
+  const isMobile = useMediaQuery('(max-width:1150px)');
 
   const toggleAdminMode = () => {
       const newVal = !adminMode;
diff --git a/frontend/src/pages/CommunityFeed.tsx b/frontend/src/pages/CommunityFeed.tsx
index 61beefa..eeee4d1 100644
--- a/frontend/src/pages/CommunityFeed.tsx
+++ b/frontend/src/pages/CommunityFeed.tsx
@@ -222,7 +222,7 @@ const CommunityFeed: React.FC<CommunityFeedProps> = ({ adminMode }) => {
 
       <Grid container spacing={4}>
           {/* Main Feed Column */}
-          <Grid size={{ xs: 12, md: 8 }}>
+          <Grid size={{ xs: 12, lg: 8 }}>
             {ratings.length === 0 ? (
                 <Box sx={{ 
                     p: 6, 
@@ -255,7 +255,7 @@ const CommunityFeed: React.FC<CommunityFeedProps> = ({ adminMode }) => {
                                 borderColor: (theme) => alpha(theme.palette.primary.main, 0.2)
                             }
                         }}>
-                            <CardContent sx={{ p: 3 }}>
+                            <CardContent sx={{ p: { xs: 2, sm: 3 } }}>
                                 {/* User Info */}
                                 <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
                                     <Box sx={{ display: 'flex', gap: 2 }}>
@@ -372,7 +372,7 @@ const CommunityFeed: React.FC<CommunityFeedProps> = ({ adminMode }) => {
           </Grid>
 
           {/* Sidebar Column */}
-          <Grid size={{ xs: 12, md: 4 }}>
+          <Grid size={{ xs: 12, lg: 4 }}>
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                   
                   {/* Notifications Widget */}
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 91fb741..f14697e 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -47,7 +47,7 @@ const Dashboard: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
   useTitle(t('nav.dashboard'));
   const [data, setData] = useState<DashboardData | null>(null);
   const [loading, setLoading] = useState(true);
@@ -216,7 +216,7 @@ const Dashboard: React.FC = () => {
           border: '1px solid',
           borderColor: 'divider'
       }}>
-          <CardContent sx={{ p: 4 }}>
+          <CardContent sx={{ p: { xs: 2, sm: 4 } }}>
               <Grid container spacing={3} alignItems="center">
                   <Grid size={{ xs: 12, sm: 'auto' }}>
                       <Avatar src={data.user.avatar || undefined} sx={{ width: 100, height: 100, border: '4px solid', borderColor: 'primary.main' }}>
@@ -257,55 +257,57 @@ const Dashboard: React.FC = () => {
       {activeTab === 0 && (
           <Box>
               {/* Filter Controls for Reviews */}
-              <Grid container spacing={2} sx={{ mb: 4, alignItems: 'center' }}>
-                  <Grid size={{ xs: 12, md: 4, lg: 5 }}>
-                      <TextField 
-                        fullWidth size="small" placeholder={t('dashboard.searchRated')} 
-                        value={ratedSearch} onChange={e => setRatedSearch(e.target.value)}
-                        slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> } }}
-                        sx={{ 
-                            bgcolor: 'background.paper', 
-                            borderRadius: 1, 
-                            '& .MuiOutlinedInput-root': { borderRadius: 1, height: 44 } 
-                        }}
-                      />
-                  </Grid>
-                  
-                  <Grid size={{ xs: 12, md: 'auto' }} sx={{ flexGrow: 1, overflow: 'hidden' }}>
-                      <Stack direction="row" spacing={1} sx={{ overflowX: 'auto', py: 0.5, px: 0.5, '&::-webkit-scrollbar': { display: 'none' } }}>
-                          {ratedCategories.map(cat => (
-                              <Chip 
-                                key={cat} label={cat === 'All' ? t('nav.home').replace('Home', 'All') : t(`categories.${data.my_ratings.find(r => r.category_name === cat)?.category_slug}`, { defaultValue: cat })} 
-                                onClick={() => setRatedCategory(cat)}
-                                color={ratedCategory === cat ? 'primary' : 'default'}
-                                variant={ratedCategory === cat ? 'filled' : 'outlined'}
-                                sx={{ fontWeight: 'bold', height: 36, px: 0.5, borderRadius: 1, fontSize: '0.85rem' }}
-                              />
-                          ))}
-                      </Stack>
-                  </Grid>
+              <Box sx={{ mb: 4 }}>
+                  <Grid container spacing={{ xs: 2, lg: 1.5 }} alignItems="center">
+                      <Grid size={{ xs: 12, lg: 4, xl: 5 }}>
+                          <TextField 
+                            fullWidth size="small" placeholder={t('dashboard.searchRated')} 
+                            value={ratedSearch} onChange={e => setRatedSearch(e.target.value)}
+                            slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> } }}
+                            sx={{ 
+                                bgcolor: 'background.paper', 
+                                borderRadius: 1, 
+                                '& .MuiOutlinedInput-root': { borderRadius: 1, height: { xs: 48, lg: 40 } } 
+                            }}
+                          />
+                      </Grid>
+                      
+                      <Grid size={{ xs: 12, lg: 'auto' }} sx={{ flexGrow: 1, overflow: 'hidden' }}>
+                          <Box sx={{ display: 'flex', gap: 1, overflowX: 'auto', py: 0.5, px: 0.2, '&::-webkit-scrollbar': { display: 'none' } }}>
+                              {ratedCategories.map(cat => (
+                                  <Chip 
+                                    key={cat} label={cat === 'All' ? t('nav.home').replace('Home', 'All') : t(`categories.${data.my_ratings.find(r => r.category_name === cat)?.category_slug}`, { defaultValue: cat })} 
+                                    onClick={() => setRatedCategory(cat)}
+                                    color={ratedCategory === cat ? 'primary' : 'default'}
+                                    variant={ratedCategory === cat ? 'filled' : 'outlined'}
+                                    sx={{ fontWeight: 'bold', height: { xs: 36, lg: 32 }, borderRadius: 1, fontSize: '0.8rem', flexShrink: 0 }}
+                                  />
+                              ))}
+                          </Box>
+                      </Grid>
 
-                  <Grid size={{ xs: 12, md: 'auto' }}>
-                      <Stack direction="row" spacing={0.5} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider', height: 44, width: { xs: '100%', md: 'auto' } }}>
-                          <Button 
-                            fullWidth={isMobile}
-                            size="small" variant={ratedSort === 'date' ? 'contained' : 'text'} 
-                            onClick={() => setRatedSort('date')}
-                            sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: 34, fontSize: '0.85rem' }}
-                          >
-                              {t('dashboard.date')}
-                          </Button>
-                          <Button 
-                            fullWidth={isMobile}
-                            size="small" variant={ratedSort === 'rating' ? 'contained' : 'text'} 
-                            onClick={() => setRatedSort('rating')}
-                            sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: 34, fontSize: '0.85rem' }}
-                          >
-                              {t('dashboard.rating')}
-                          </Button>
-                      </Stack>
+                      <Grid size={{ xs: 12, lg: 'auto' }}>
+                          <Box sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider', height: { xs: 48, lg: 40 }, display: 'flex', gap: 0.5 }}>
+                              <Button 
+                                fullWidth
+                                size="small" variant={ratedSort === 'date' ? 'contained' : 'text'} 
+                                onClick={() => setRatedSort('date')}
+                                sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: { xs: 38, lg: 30 }, fontSize: '0.8rem' }}
+                              >
+                                  {t('dashboard.date')}
+                              </Button>
+                              <Button 
+                                fullWidth
+                                size="small" variant={ratedSort === 'rating' ? 'contained' : 'text'} 
+                                onClick={() => setRatedSort('rating')}
+                                sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: { xs: 38, lg: 30 }, fontSize: '0.8rem' }}
+                              >
+                                  {t('dashboard.rating')}
+                              </Button>
+                          </Box>
+                      </Grid>
                   </Grid>
-              </Grid>
+              </Box>
 
               <Stack spacing={3}>
                   {filteredAndSortedRated.length === 0 ? (
@@ -323,7 +325,7 @@ const Dashboard: React.FC = () => {
                               transition: 'border-color 0.2s',
                               '&:hover': { borderColor: 'primary.main' }
                           }}>
-                              <CardContent sx={{ p: 3 }}>
+                              <CardContent sx={{ p: { xs: 2, sm: 3 } }}>
                                   {editingRatingId === rating.id ? (
                                       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                                           <Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>{t('dashboard.editingReview', { flavor: rating.flavor_name })}</Typography>
@@ -431,55 +433,57 @@ const Dashboard: React.FC = () => {
       {activeTab === 1 && (
           <Box>
               {/* Filter Controls for Explore */}
-              <Grid container spacing={2} sx={{ mb: 4, alignItems: 'center' }}>
-                  <Grid size={{ xs: 12, md: 4, lg: 5 }}>
-                      <TextField 
-                        fullWidth size="small" placeholder={t('dashboard.searchMissing')} 
-                        value={exploreSearch} onChange={e => setExploreSearch(e.target.value)}
-                        slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> } }}
-                        sx={{ 
-                            bgcolor: 'background.paper', 
-                            borderRadius: 1, 
-                            '& .MuiOutlinedInput-root': { borderRadius: 1, height: 44 } 
-                        }}
-                      />
-                  </Grid>
-                  
-                  <Grid size={{ xs: 12, md: 'auto' }} sx={{ flexGrow: 1, overflow: 'hidden' }}>
-                      <Stack direction="row" spacing={1} sx={{ overflowX: 'auto', py: 0.5, px: 0.5, '&::-webkit-scrollbar': { display: 'none' } }}>
-                          {exploreCategories.map(cat => (
-                              <Chip 
-                                key={cat} label={cat === 'All' ? t('nav.home').replace('Home', 'All') : t(`categories.${data.missing_flavors.find(f => f.category_name === cat)?.category_slug}`, { defaultValue: cat })} 
-                                onClick={() => setExploreCategory(cat)}
-                                color={exploreCategory === cat ? 'primary' : 'default'}
-                                variant={exploreCategory === cat ? 'filled' : 'outlined'}
-                                sx={{ fontWeight: 'bold', height: 36, px: 0.5, borderRadius: 1, fontSize: '0.85rem' }}
-                              />
-                          ))}
-                      </Stack>
-                  </Grid>
+              <Box sx={{ mb: 4 }}>
+                  <Grid container spacing={{ xs: 2, lg: 1.5 }} alignItems="center">
+                      <Grid size={{ xs: 12, lg: 4, xl: 5 }}>
+                          <TextField 
+                            fullWidth size="small" placeholder={t('dashboard.searchMissing')} 
+                            value={exploreSearch} onChange={e => setExploreSearch(e.target.value)}
+                            slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> } }}
+                            sx={{ 
+                                bgcolor: 'background.paper', 
+                                borderRadius: 1, 
+                                '& .MuiOutlinedInput-root': { borderRadius: 1, height: { xs: 48, lg: 40 } } 
+                            }}
+                          />
+                      </Grid>
+                      
+                      <Grid size={{ xs: 12, lg: 'auto' }} sx={{ flexGrow: 1, overflow: 'hidden' }}>
+                          <Box sx={{ display: 'flex', gap: 1, overflowX: 'auto', py: 0.5, px: 0.2, '&::-webkit-scrollbar': { display: 'none' } }}>
+                              {exploreCategories.map(cat => (
+                                  <Chip 
+                                    key={cat} label={cat === 'All' ? t('nav.home').replace('Home', 'All') : t(`categories.${data.missing_flavors.find(f => f.category_name === cat)?.category_slug}`, { defaultValue: cat })} 
+                                    onClick={() => setExploreCategory(cat)}
+                                    color={exploreCategory === cat ? 'primary' : 'default'}
+                                    variant={exploreCategory === cat ? 'filled' : 'outlined'}
+                                    sx={{ fontWeight: 'bold', height: { xs: 36, lg: 32 }, borderRadius: 1, fontSize: '0.8rem', flexShrink: 0 }}
+                                  />
+                              ))}
+                          </Box>
+                      </Grid>
 
-                  <Grid size={{ xs: 12, md: 'auto' }}>
-                      <Stack direction="row" spacing={0.5} sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider', height: 44, width: { xs: '100%', md: 'auto' } }}>
-                          <Button 
-                            fullWidth={isMobile}
-                            size="small" variant={exploreSort === 'community' ? 'contained' : 'text'} 
-                            onClick={() => setExploreSort('community')}
-                            sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: 34, px: 2, fontSize: '0.85rem' }}
-                          >
-                              {t('dashboard.communityRating')}
-                          </Button>
-                          <Button 
-                            fullWidth={isMobile}
-                            size="small" variant={exploreSort === 'circle' ? 'contained' : 'text'} 
-                            onClick={() => setExploreSort('circle')}
-                            sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: 34, px: 2, fontSize: '0.85rem' }}
-                          >
-                              {t('dashboard.circleRating')}
-                          </Button>
-                      </Stack>
+                      <Grid size={{ xs: 12, lg: 'auto' }}>
+                          <Box sx={{ bgcolor: 'background.paper', p: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'divider', height: { xs: 48, lg: 40 }, display: 'flex', gap: 0.5 }}>
+                              <Button 
+                                fullWidth
+                                size="small" variant={exploreSort === 'community' ? 'contained' : 'text'} 
+                                onClick={() => setExploreSort('community')}
+                                sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: { xs: 38, lg: 30 }, px: 2, fontSize: '0.8rem' }}
+                              >
+                                  {t('dashboard.communityRating')}
+                              </Button>
+                              <Button 
+                                fullWidth
+                                size="small" variant={exploreSort === 'circle' ? 'contained' : 'text'} 
+                                onClick={() => setExploreSort('circle')}
+                                sx={{ textTransform: 'none', fontWeight: 'bold', borderRadius: 0.8, height: { xs: 38, lg: 30 }, px: 2, fontSize: '0.8rem' }}
+                              >
+                                  {t('dashboard.circleRating')}
+                              </Button>
+                          </Box>
+                      </Grid>
                   </Grid>
-              </Grid>
+              </Box>
 
               {filteredMissing.length === 0 ? (
                   <Box sx={{ py: 10, textAlign: 'center' }}>
@@ -488,7 +492,7 @@ const Dashboard: React.FC = () => {
               ) : (
                   <Grid container spacing={2}>
                       {filteredMissing.map(flavor => (
-                          <Grid key={flavor.id} size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
+                          <Grid key={flavor.id} size={{ xs: 12, sm: 6, lg: 3 }}>
                               <Card elevation={0} sx={{ 
                                   height: '100%', borderRadius: 1.5, border: '1px solid', borderColor: 'divider',
                                   transition: 'all 0.2s ease', '&:hover': { transform: 'translateY(-4px)', borderColor: 'primary.main', boxShadow: 4 },
diff --git a/frontend/src/pages/PublicProfile.tsx b/frontend/src/pages/PublicProfile.tsx
index 7b90164..542b364 100644
--- a/frontend/src/pages/PublicProfile.tsx
+++ b/frontend/src/pages/PublicProfile.tsx
@@ -258,7 +258,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
               }
           }} />
           
-          <CardContent sx={{ pt: 0, px: { xs: 2, md: 5 }, pb: 4 }}>
+          <CardContent sx={{ pt: 0, px: { xs: 2, md: 5 }, pb: { xs: 2, md: 4 } }}>
               <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'center', sm: 'flex-end' }, gap: { xs: 2, sm: 4 } }}>
                   <Box sx={{ 
                       position: 'relative',
@@ -427,7 +427,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
 
                                   <Grid container spacing={3}>
                                       {items.map((rating: Rating) => (
-                                          <Grid key={rating.id} size={{ xs: 6, sm: 4, md: 3, lg: 2.4 }}>
+                                          <Grid key={rating.id} size={{ xs: 6, sm: 4, lg: 2.4 }}>
                                               <Card sx={{ 
                                                   height: '100%', borderRadius: 1, border: '1px solid', borderColor: 'divider',
                                                   bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
@@ -555,7 +555,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                       <Grid size={12}><Typography variant="h6" color="text.secondary" sx={{ py: 12, textAlign: 'center', fontWeight: 'bold' }}>No followers yet.</Typography></Grid>
                   ) : (
                       data.followers.map(user => (
-                          <Grid key={user.id} size={{ xs: 12, sm: 6, md: 4 }}>
+                          <Grid key={user.id} size={{ xs: 12, sm: 6, lg: 4 }}>
                               <Card sx={{ borderRadius: 3, border: '1px solid', borderColor: 'divider', overflow: 'hidden', transition: 'all 0.3s ease', '&:hover': { borderColor: 'primary.main', transform: 'translateY(-4px)' } }}>
                                   <Box sx={{ display: 'flex', alignItems: 'center', p: 2, gap: 2 }}>
                                       <Avatar component={Link} to={`/profile/${user.username}`} src={user.avatar || undefined} sx={{ width: 56, height: 56, cursor: 'pointer', border: '2px solid', borderColor: 'divider' }}>{user.username.charAt(0)}</Avatar>
@@ -588,7 +588,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                       <Grid size={12}><Typography variant="h6" color="text.secondary" sx={{ py: 12, textAlign: 'center', fontWeight: 'bold' }}>Not following anyone yet.</Typography></Grid>
                   ) : (
                       data.following.map(user => (
-                          <Grid key={user.id} size={{ xs: 12, sm: 6, md: 4 }}>
+                          <Grid key={user.id} size={{ xs: 12, sm: 6, lg: 4 }}>
                               <Card sx={{ borderRadius: 3, border: '1px solid', borderColor: 'divider', overflow: 'hidden', transition: 'all 0.3s ease', '&:hover': { borderColor: 'primary.main', transform: 'translateY(-4px)' } }}>
                                   <Box sx={{ display: 'flex', alignItems: 'center', p: 2, gap: 2 }}>
                                       <Avatar component={Link} to={`/profile/${user.username}`} src={user.avatar || undefined} sx={{ width: 56, height: 56, cursor: 'pointer', border: '2px solid', borderColor: 'divider' }}>{user.username.charAt(0)}</Avatar>
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index bb4bcf9..cc37bea 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -208,7 +208,7 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
 
       <Grid container spacing={4}>
           {/* Left Column: Visuals & Language */}
-          <Grid size={{ xs: 12, md: 5 }}>
+          <Grid size={{ xs: 12, lg: 5 }}>
               <Paper sx={{ p: 3, mb: 4, borderRadius: 3, '& .MuiInputLabel-root': { bgcolor: 'background.paper', px: 0.5 } }}>
                 <Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>{t('settings.appearanceTitle')}</Typography>
                 <FormControl fullWidth margin="normal">
@@ -272,7 +272,7 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
           </Grid>
 
           {/* Right Column: Account Info & Security */}
-          <Grid size={{ xs: 12, md: 7 }}>
+          <Grid size={{ xs: 12, lg: 7 }}>
               <Paper sx={{ p: 3, mb: 4, borderRadius: 3, '& .MuiInputLabel-root': { bgcolor: 'background.paper', px: 0.5 } }}>
                 <Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>{t('settings.infoTitle')}</Typography>
                 <form onSubmit={handleUpdateProfile}>
diff --git a/frontend/src/pages/flavors/FlavorDetail.tsx b/frontend/src/pages/flavors/FlavorDetail.tsx
index 8830cbe..ec95aaa 100644
--- a/frontend/src/pages/flavors/FlavorDetail.tsx
+++ b/frontend/src/pages/flavors/FlavorDetail.tsx
@@ -229,7 +229,7 @@ const FlavorDetail: React.FC<FlavorDetailProps> = ({ adminMode }) => {
       {/* Main Content Grid */}
       <Grid container spacing={4}>
           {/* Left: Product Info Card */}
-          <Grid size={{ xs: 12, md: 5, lg: 4 }}>
+          <Grid size={{ xs: 12, lg: 4 }}>
               <Box sx={{ position: { md: 'sticky' }, top: 100 }}>
                   <Card elevation={0} sx={{ 
                       borderRadius: 4, 
@@ -324,7 +324,7 @@ const FlavorDetail: React.FC<FlavorDetailProps> = ({ adminMode }) => {
           </Grid>
 
           {/* Right: Ratings & Comments */}
-          <Grid size={{ xs: 12, md: 7, lg: 8 }}>
+          <Grid size={{ xs: 12, lg: 8 }}>
               <Box sx={{ mb: 4 }}>
                   <Typography variant="h4" sx={{ fontWeight: '800', mb: 1 }}>Ratings & Comments</Typography>
                   <Typography variant="subtitle1" color="text.secondary">