diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 99ea315..1d7f374 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -68,7 +68,6 @@ const GlobalSearch = () => {
 
     const handleSearch = (e: React.FormEvent) => {
         e.preventDefault();
-        // Redirect to categories page with search query
         if (query.trim()) {
             navigate(`/?q=${encodeURIComponent(query.trim())}`);
         } else {
@@ -77,7 +76,7 @@ const GlobalSearch = () => {
     };
 
     return (
-        <Box sx={{ flexGrow: 1, maxWidth: 400, mx: 2 }}>
+        <Box sx={{ flexGrow: 1, maxWidth: { xs: 'none', sm: 400 }, mx: { xs: 1, sm: 2 } }}>
             <Autocomplete
                 freeSolo
                 size="small"
@@ -98,7 +97,7 @@ const GlobalSearch = () => {
                 renderInput={(params) => (
                     <TextField
                         {...params}
-                        placeholder="Search catalog..."
+                        placeholder="Search..."
                         sx={{ 
                             bgcolor: 'action.hover', 
                             borderRadius: 1,
@@ -222,93 +221,95 @@ const App: React.FC = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Router>
-        <AppBar position="fixed" elevation={1}>
-          <Toolbar sx={{ minHeight: { xs: 56, sm: 64 }, px: { xs: 2, sm: 4, md: 6 } }}>
-              <IconButton
-                color="inherit"
-                aria-label="open drawer"
-                edge="start"
-                onClick={() => setDrawerOpen(true)}
-                sx={{ mr: 2, display: { md: 'none' } }}
-              >
-                <MenuIcon />
-              </IconButton>
-              
-              <Typography variant="h6" component="div" sx={{ fontWeight: 'bold', display: { xs: 'none', sm: 'block' } }}>
-                <Link to="/" style={{ color: 'inherit', textDecoration: 'none' }}>Holy Flavors</Link>
-              </Typography>
-              
-              <GlobalSearch />
-
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                {!isMobile && !loadingUser && (
-                  <Box sx={{ display: 'flex', gap: 1 }}>
-                    {navItems.map((item) => (
-                      <Button key={item.label} color="inherit" component={Link} to={item.path}>{item.label}</Button>
-                    ))}
-                    {user && (
-                      <Button color="inherit" onClick={handleLogout} sx={{ ml: 1 }}>Logout</Button>
-                    )}
-                  </Box>
-                )}
-                
-                <IconButton color="inherit" onClick={(e) => setAnchorEl(e.currentTarget)} sx={{ ml: 1 }}>
-                  <PaletteIcon />
-                </IconButton>
-                <Menu
-                  anchorEl={anchorEl}
-                  open={Boolean(anchorEl)}
-                  onClose={() => setAnchorEl(null)}
-                  sx={{ maxHeight: 500 }}
+        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', width: '100%', overflowX: 'hidden' }}>
+          <AppBar position="fixed" elevation={1}>
+            <Toolbar sx={{ minHeight: { xs: 56, sm: 64 }, px: { xs: 1, sm: 4, md: 6 } }}>
+                <IconButton
+                  color="inherit"
+                  aria-label="open drawer"
+                  edge="start"
+                  onClick={() => setDrawerOpen(true)}
+                  sx={{ mr: { xs: 0, sm: 2 }, display: { md: 'none' } }}
                 >
-                  <ListSubheader>Light Themes</ListSubheader>
-                  <MenuItem onClick={() => handleThemeChange('latte')}>Latte</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('pink')}>Pastel Pink</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('solarized_light')}>Solarized Light</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('one_light')}>One Light</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('paper')}>Paper White</MenuItem>
-                  
-                  <Divider />
-                  
-                  <ListSubheader>Dark Themes</ListSubheader>
-                  <MenuItem onClick={() => handleThemeChange('mocha')}>Mocha (Default)</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('frappe')}>Frappé</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('macchiato')}>Macchiato</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('atom')}>Atom One Dark</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('dracula')}>Dracula</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('gruvbox')}>Gruvbox Dark</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('nord')}>Nord</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('cyberpunk')}>Cyberpunk</MenuItem>
-                  <MenuItem onClick={() => handleThemeChange('forest')}>Forest Dark</MenuItem>
-                </Menu>
-              </Box>
-          </Toolbar>
-        </AppBar>
-        <Toolbar sx={{ minHeight: { xs: 56, sm: 64 } }} />
+                  <MenuIcon />
+                </IconButton>
+                
+                <Typography variant="h6" component="div" sx={{ fontWeight: 'bold', display: { xs: 'none', md: 'block' } }}>
+                  <Link to="/" style={{ color: 'inherit', textDecoration: 'none' }}>Holy Flavors</Link>
+                </Typography>
+                
+                <GlobalSearch />
 
-        <Drawer
-          variant="temporary"
-          open={drawerOpen}
-          onClose={() => setDrawerOpen(false)}
-          ModalProps={{ keepMounted: true }}
-          sx={{
-            display: { xs: 'block', md: 'none' },
-            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 },
-          }}
-        >
-          {drawer}
-        </Drawer>
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  {!isMobile && !loadingUser && (
+                    <Box sx={{ display: 'flex', gap: 1 }}>
+                      {navItems.map((item) => (
+                        <Button key={item.label} color="inherit" component={Link} to={item.path}>{item.label}</Button>
+                      ))}
+                      {user && (
+                        <Button color="inherit" onClick={handleLogout} sx={{ ml: 1 }}>Logout</Button>
+                      )}
+                    </Box>
+                  )}
+                  
+                  <IconButton color="inherit" onClick={(e) => setAnchorEl(e.currentTarget)} sx={{ ml: 1 }}>
+                    <PaletteIcon />
+                  </IconButton>
+                  <Menu
+                    anchorEl={anchorEl}
+                    open={Boolean(anchorEl)}
+                    onClose={() => setAnchorEl(null)}
+                    sx={{ maxHeight: 500 }}
+                  >
+                    <ListSubheader>Light Themes</ListSubheader>
+                    <MenuItem onClick={() => handleThemeChange('latte')}>Latte</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('pink')}>Pastel Pink</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('solarized_light')}>Solarized Light</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('one_light')}>One Light</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('paper')}>Paper White</MenuItem>
+                    
+                    <Divider />
+                    
+                    <ListSubheader>Dark Themes</ListSubheader>
+                    <MenuItem onClick={() => handleThemeChange('mocha')}>Mocha (Default)</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('frappe')}>Frappé</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('macchiato')}>Macchiato</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('atom')}>Atom One Dark</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('dracula')}>Dracula</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('gruvbox')}>Gruvbox Dark</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('nord')}>Nord</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('cyberpunk')}>Cyberpunk</MenuItem>
+                    <MenuItem onClick={() => handleThemeChange('forest')}>Forest Dark</MenuItem>
+                  </Menu>
+                </Box>
+            </Toolbar>
+          </AppBar>
+          <Toolbar sx={{ minHeight: { xs: 56, sm: 64 } }} />
 
-        <Box sx={{ mt: 4, pb: 4 }}>
-          <Routes>
-            <Route path="/" element={<CategoryList />} />
-            <Route path="/category/:slug" element={<CategoryFlavors />} />
-            <Route path="/flavor/:id" element={<FlavorDetail />} />
-            <Route path="/profile/:username" element={<PublicProfile />} />
-            <Route path="/dashboard" element={<Dashboard />} />
-            <Route path="/settings" element={<Settings />} />
-            <Route path="/login" element={<Login />} />
-          </Routes>
+          <Box sx={{ flexGrow: 1, py: 4, width: '100%' }}>
+            <Routes>
+              <Route path="/" element={<CategoryList />} />
+              <Route path="/category/:slug" element={<CategoryFlavors />} />
+              <Route path="/flavor/:id" element={<FlavorDetail />} />
+              <Route path="/profile/:username" element={<PublicProfile />} />
+              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/settings" element={<Settings />} />
+              <Route path="/login" element={<Login />} />
+            </Routes>
+          </Box>
+
+          <Drawer
+            variant="temporary"
+            open={drawerOpen}
+            onClose={() => setDrawerOpen(false)}
+            ModalProps={{ keepMounted: true }}
+            sx={{
+              display: { xs: 'block', md: 'none' },
+              '& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 },
+            }}
+          >
+            {drawer}
+          </Drawer>
         </Box>
       </Router>
     </ThemeProvider>
diff --git a/frontend/src/pages/CategoryList.tsx b/frontend/src/pages/CategoryList.tsx
index a55754d..bc37025 100644
--- a/frontend/src/pages/CategoryList.tsx
+++ b/frontend/src/pages/CategoryList.tsx
@@ -95,7 +95,7 @@ const CategoryList: React.FC = () => {
 
       return (
           <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
-              <Typography variant="h4" gutterBottom>Search Results for "{query}"</Typography>
+              <Typography variant="h4" gutterBottom sx={{ overflowWrap: 'break-word' }}>Search Results for "{query}"</Typography>
               <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
                   Found {filteredFlavors.length} items
               </Typography>
@@ -136,8 +136,8 @@ const CategoryList: React.FC = () => {
 
   // --- HOME VIEW ---
   return (
-    <Box>
-      {/* Hero Section - True Full Width */}
+    <Box sx={{ width: '100%' }}>
+      {/* Hero Section - True Full Width, No Overflow */}
       <Paper 
         elevation={0}
         sx={{ 
@@ -150,18 +150,30 @@ const CategoryList: React.FC = () => {
             textAlign: 'center',
             borderBottom: '1px solid rgba(255,255,255,0.1)',
             width: '100%',
-            mt: -4 // Counter the parent Box mt
+            mt: -4, // Counter the parent Box py: 4
+            boxSizing: 'border-box',
+            overflow: 'hidden'
         }}
       >
-        <Typography variant="h2" component="h1" gutterBottom sx={{ fontWeight: 'bold', fontSize: { xs: '2.5rem', md: '4.5rem' } }}>
+        <Typography 
+            variant="h2" 
+            component="h1" 
+            gutterBottom 
+            sx={{ 
+                fontWeight: 'bold', 
+                fontSize: { xs: '2.2rem', sm: '3rem', md: '4.5rem' },
+                overflowWrap: 'break-word',
+                px: 2
+            }}
+        >
             The Ultimate Holy Archive
         </Typography>
-        <Typography variant="h5" color="text.secondary" sx={{ mb: 4, maxWidth: 800, mx: 'auto' }}>
+        <Typography variant="h5" color="text.secondary" sx={{ mb: 4, maxWidth: 800, mx: 'auto', px: 2 }}>
             Browse every flavor ever released, discover new favorites, and share your ratings with the community.
         </Typography>
-        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, flexWrap: 'wrap' }}>
+        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, flexWrap: 'wrap', px: 2 }}>
             <Button variant="contained" size="large" component={Link} to="/login" sx={{ px: 4, py: 1.5, borderRadius: 2 }}>
-                Join the Community
+                Join Community
             </Button>
             <Button variant="outlined" size="large" onClick={() => {
                 const element = document.getElementById('categories');
@@ -212,7 +224,7 @@ const CategoryList: React.FC = () => {
         <Typography variant="h4" sx={{ mb: 4, fontWeight: 'bold' }}>Browse by Category</Typography>
         <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
             {categories.map(category => (
-            <Box key={category.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', lg: '1 1 23%' }, minWidth: 280 }}>
+            <Box key={category.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', lg: '1 1 30%' }, minWidth: 280 }}>
                 <Link to={`/category/${category.slug}`} style={{ textDecoration: 'none' }}>
                 <Card sx={{ 
                     height: 120, 
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 242d297..b28a2f1 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -216,6 +216,8 @@ const Login: React.FC<LoginProps> = () => {
       );
   };
 
+  const adminUrl = (import.meta.env.VITE_API_URL || 'http://localhost:8000/api/').replace('/api/', '/admin/');
+
   return (
     <Container maxWidth="xs" sx={{ mt: 8 }}>
       <Paper sx={{ p: 3 }}>
@@ -224,7 +226,7 @@ const Login: React.FC<LoginProps> = () => {
       </Paper>
       <Box sx={{ mt: 2, textAlign: 'center' }}>
           <Typography variant="body2" color="text.secondary">
-              Admin? Use <a href="http://localhost:8000/admin/" target="_blank" rel="noreferrer">Django Admin</a>
+              Admin? Use <a href={adminUrl} target="_blank" rel="noreferrer">Django Admin</a>
           </Typography>
       </Box>
     </Container>