diff --git a/01-frontend/src/helper/navbar/NavBar.tsx b/01-frontend/src/helper/navbar/NavBar.tsx
index e9200cb..5e3b776 100644
--- a/01-frontend/src/helper/navbar/NavBar.tsx
+++ b/01-frontend/src/helper/navbar/NavBar.tsx
@@ -6,7 +6,6 @@ import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import Menu from '@mui/material/Menu';
 import MenuIcon from '@mui/icons-material/Menu';
-import Container from '@mui/material/Container';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
@@ -46,17 +45,12 @@ const SearchIconWrapper = styled('div')(({ theme }) => ({
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
     color: 'white',
-    width: '100%',
+    flexGrow: 1,
+    maxWidth: '100%',
     '& .MuiInputBase-input': {
         padding: theme.spacing(1, 1, 1, 0),
-        paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-        transition: theme.transitions.create('width'),
-        [theme.breakpoints.up('sm')]: {
-            width: '12ch',
-            '&:focus': {
-                width: '20ch',
-            },
-        },
+        paddingLeft: `calc(1em + ${theme.spacing(3)})`,
+        transition: "none"
     },
 }));
 
@@ -92,136 +86,106 @@ export default function NavBar() {
 
     return (
         <AppBar className="navbar">
-            <Container maxWidth="xl">
-                <Toolbar disableGutters>
-                    <AdbIcon className='navbar-logo' />
-                    <Typography
-                        variant="h6"
-                        noWrap
-                        component="a"
-                        href="/"
-                        sx={{
-                            mr: 2,
-                            display: { xs: 'none', md: 'flex' },
-                            fontFamily: 'monospace',
-                            fontWeight: 700,
-                            letterSpacing: '.3rem',
-                            color: 'white',
-                            textDecoration: 'none',
-                        }}
-                    >
-                        Digitaler Produktionsshop
-                    </Typography>
+            <Toolbar
+                disableGutters
+                sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    px: 3
+                }}
+            >
+                    <Box sx={{ display: "flex", alignItems: "center", minWidth: "0px" }}>
+                        <AdbIcon className='navbar-logo' />
+                        <Typography
+                            variant="h6"
+                            noWrap
+                            component="a"
+                            href="/"
+                            sx={{
+                                fontFamily: "monospace",
+                                fontWeight: 700,
+                                letterSpacing: ".3rem",
+                                color: "white",
+                                textDecoration: "none",
+                                ml: 1,
+                            }}
+                        >
+                            Digitaler Produktionsshop
+                        </Typography>
+                    </Box>
 
-                    <Search>
-                        <SearchIconWrapper>
-                            <SearchIcon sx={{color: 'white'}}/>
-                        </SearchIconWrapper>
-                        <StyledInputBase
-                            placeholder={t('search') + "..."}
-                            inputProps={{ 'aria-label': t('search')}}
-                        />
-                    </Search>
+                    <Box sx={{ flexGrow: 1, display: "flex", justifyContent: "center", px: 3 }}>
+                        <Search sx={{ flexGrow: 1, minWidth: "150px", maxWidth: "600px" }}>
+                            <SearchIconWrapper>
+                                <SearchIcon sx={{ color: "white" }} />
+                            </SearchIconWrapper>
+                            <StyledInputBase
+                                placeholder={t('search') + "..."}
+                                inputProps={{ "aria-label": t('search') }}
+                                sx={{ width: "100%" }}
+                            />
+                        </Search>
+                    </Box>
 
-                    <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+                <Box sx={{ display: "flex", alignItems: "center", gap: 2, marginLeft: 'auto' }}>
+                    <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
+                        {pages.map(({ key, label }) => (
+                            <Button
+                                key={key}
+                                onClick={() => handleCloseNavMenu(key)}
+                                sx={{ color: "white", fontWeight: 500 }}
+                            >
+                                {label}
+                            </Button>
+                        ))}
+                    </Box>
+
+                    <Box sx={{ display: { xs: "flex", md: "none" } }}>
                         <IconButton
                             size="large"
-                            aria-label={t('currentAccount')}
-                            aria-controls="menu-appbar"
-                            aria-haspopup="true"
+                            aria-label="menu"
                             onClick={handleOpenNavMenu}
                             color="inherit"
                         >
                             <MenuIcon />
                         </IconButton>
                         <Menu
-                            id="menu-appbar"
                             anchorEl={anchorElNav}
-                            anchorOrigin={{
-                                vertical: 'bottom',
-                                horizontal: 'left',
-                            }}
-                            keepMounted
-                            transformOrigin={{
-                                vertical: 'top',
-                                horizontal: 'left',
-                            }}
+                            anchorOrigin={{ vertical: "top", horizontal: "right" }}
+                            transformOrigin={{ vertical: "top", horizontal: "right" }}
                             open={Boolean(anchorElNav)}
-                            onClose={handleCloseNavMenu}
-                            sx={{ display: { xs: 'block', md: 'none' } }}
+                            onClose={() => setAnchorElNav(null)}
                         >
                             {pages.map(({ key, label }) => (
                                 <MenuItem key={key} onClick={() => handleCloseNavMenu(key)}>
-                                    <Typography sx={{ textAlign: 'center' }}>{label}</Typography>
+                                    <Typography>{label}</Typography>
                                 </MenuItem>
                             ))}
                         </Menu>
                     </Box>
 
-                    <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
-                    <Typography
-                        variant="h5"
-                        noWrap
-                        component="a"
-                        href="/"
-                        sx={{
-                            mr: 2,
-                            display: { xs: 'flex', md: 'none' },
-                            flexGrow: 1,
-                            fontFamily: 'monospace',
-                            fontWeight: 700,
-                            letterSpacing: '.3rem',
-                            color: 'inherit',
-                            textDecoration: 'none',
-                        }}
+                    {/* Theme Toggle & Avatar (immer sichtbar) */}
+                    <ThemeToggle />
+                    <Tooltip title="Open settings">
+                        <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                            <Avatar alt="Florian Speicher" src="/static/images/avatar/2.jpg" />
+                        </IconButton>
+                    </Tooltip>
+                    <Menu
+                        sx={{ mt: "45px" }}
+                        id="menu-appbar-user"
+                        anchorEl={anchorElUser}
+                        open={Boolean(anchorElUser)}
+                        onClose={() => setAnchorElUser(null)}
                     >
-                        DPS
-                    </Typography>
-
-                    <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-                        {pages.map((page) => (
-                            <Button
-                                key={page.key}
-                                onClick={() => handleCloseNavMenu(page.key)}
-                                sx={{ my: 2, color: 'white', display: 'block' }}
-                            >
-                                {page.label}
-                            </Button>
+                        {settings.map(({ key, label }) => (
+                            <MenuItem key={key} onClick={() => handleCloseUserMenu(key)}>
+                                <Typography sx={{ textAlign: "center" }}>{label}</Typography>
+                            </MenuItem>
                         ))}
-                    </Box>
-
-                    <Box sx={{ flexGrow: 0, display: 'flex', alignItems: 'center', gap: 1 }}>
-                        <ThemeToggle />
-                        <Tooltip title="Open settings">
-                            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                                <Avatar alt="Florian Speicher" src="/static/images/avatar/2.jpg" />
-                            </IconButton>
-                        </Tooltip>
-                        <Menu
-                            sx={{ mt: '45px' }}
-                            id="menu-appbar-user"
-                            anchorEl={anchorElUser}
-                            anchorOrigin={{
-                                vertical: 'top',
-                                horizontal: 'right',
-                            }}
-                            keepMounted
-                            transformOrigin={{
-                                vertical: 'top',
-                                horizontal: 'right',
-                            }}
-                            open={Boolean(anchorElUser)}
-                            onClose={handleCloseUserMenu}
-                        >
-                            {settings.map(({ key, label }) => (
-                                <MenuItem key={key} onClick={() => handleCloseUserMenu(key)}>
-                                    <Typography sx={{ textAlign: 'center' }}>{label}</Typography>
-                                </MenuItem>
-                            ))}
-                        </Menu>
-                    </Box>
+                    </Menu>
+                </Box>
                 </Toolbar>
-            </Container>
         </AppBar>
     );
 }