diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx
index 4bce7ed..1c47d0e 100644
--- a/code/frontend/src/components/Header.tsx
+++ b/code/frontend/src/components/Header.tsx
@@ -1,95 +1,154 @@
 import "./header.css";
-import React, { useState, useRef } from "react";
-import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, StyledEngineProvider, SwipeableDrawer, ThemeProvider } from '@mui/material';
-import Box from '@mui/material/Box';
-import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
-import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
-import PersonIcon from '@mui/icons-material/Person';
-import InfoIcon from '@mui/icons-material/Info';
-import LogoutIcon from '@mui/icons-material/Logout';
-import ExitToAppIcon from '@mui/icons-material/ExitToApp';
-import FollowTheSignsIcon from '@mui/icons-material/FollowTheSigns';
+import React, { useState } from "react";
+import {
+	List,
+	ListItem,
+	ListItemButton,
+	ListItemIcon,
+	ListItemText,
+	SwipeableDrawer,
+} from "@mui/material";
+import Box from "@mui/material/Box";
+import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
+import DynamicFeedIcon from "@mui/icons-material/DynamicFeed";
+import PersonIcon from "@mui/icons-material/Person";
+import InfoIcon from "@mui/icons-material/Info";
+import LogoutIcon from "@mui/icons-material/Logout";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import FollowTheSignsIcon from "@mui/icons-material/FollowTheSigns";
 import { Link } from "react-router-dom";
 import { useAuth } from "../api/Auth";
-import { ExitToApp } from "@mui/icons-material";
 
 // TODO: Dinge so umstrukturieren, dass der State für das offene menü in Header ist und das Menü auch in Header, sodass es mit width 100% die volle breite einnehmen kann
 
 function Header() {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleMenu = () => {
-    setIsOpen(!isOpen);
-  };
-  const { logout, user } = useAuth();
-  const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon, ExitToAppIcon, FollowTheSignsIcon];
-  const routerLinksList = ["/feed","/createpost","/profile","/about","/login","/register"]
+	const [isOpen, setIsOpen] = useState(false);
+	const toggleMenu = () => {
+		setIsOpen(!isOpen);
+	};
+	const { logout, user } = useAuth();
+	const iconList = [
+		DynamicFeedIcon,
+		AddAPhotoIcon,
+		PersonIcon,
+		InfoIcon,
+		LogoutIcon,
+		ExitToAppIcon,
+		FollowTheSignsIcon,
+	];
+	const routerLinksList = [
+		"/feed",
+		"/createpost",
+		"/profile",
+		"/about",
+		"/login",
+		"/register",
+	];
 
-  // TODO: Logout nur anzeigen wenn user eingeloggt ist
+	const DrawerList = (
+		<Box role="menu" onClick={() => setIsOpen(false)}>
+			<List className="drawer-list">
+				{["Feed", "Create Post", "Profile", "About Us"].map((text, index) => (
+					<ListItem className="drawer-list-item" key={text} disablePadding>
+						<ListItemButton
+							className="drawer-list-item-button"
+							component={Link}
+							to={routerLinksList[index]}
+						>
+							<ListItemIcon className="drawer-list-item">
+								{React.createElement(iconList[index])}
+							</ListItemIcon>
+							<ListItemText className="drawer-list-item" primary={text} />
+						</ListItemButton>
+					</ListItem>
+				))}
+				{user && (
+					<ListItem
+						className="drawer-list-item-button"
+						key={"Log Out"}
+						disablePadding
+					>
+						<ListItemButton
+							className="drawer-list-item-button"
+							onClick={logout}
+						>
+							<ListItemIcon className="drawer-list-item">
+								{React.createElement(iconList[4])}
+							</ListItemIcon>
+							<ListItemText className="drawer-list-item" primary={"Log Out"} />
+						</ListItemButton>
+					</ListItem>
+				)}
+				{!user && (
+					<>
+						<ListItem
+							className="drawer-list-item-button"
+							key={"Login"}
+							disablePadding
+						>
+							<ListItemButton
+								className="drawer-list-item-button"
+								component={Link}
+								to={routerLinksList[4]}
+							>
+								<ListItemIcon className="drawer-list-item">
+									{React.createElement(iconList[5])}
+								</ListItemIcon>
+								<ListItemText className="drawer-list-item" primary={"Login"} />
+							</ListItemButton>
+						</ListItem>
+						<ListItem
+							className="drawer-list-item-button"
+							key={"Sign up"}
+							disablePadding
+						>
+							<ListItemButton
+								className="drawer-list-item-button"
+								component={Link}
+								to={routerLinksList[5]}
+							>
+								<ListItemIcon className="drawer-list-item">
+									{React.createElement(iconList[6])}
+								</ListItemIcon>
+								<ListItemText
+									className="drawer-list-item"
+									primary={"Sign up"}
+								/>
+							</ListItemButton>
+						</ListItem>{" "}
+					</>
+				)}
+			</List>
+		</Box>
+	);
 
-  const DrawerList = (
-    <Box role="menu" onClick={() => setIsOpen(false)}>
-      <List className="drawer-list">
-        {["Feed", "Create Post", "Profile", "About Us"].map((text, index) => (
-          <ListItem className="drawer-list-item" key={text} disablePadding>
-            <ListItemButton className="drawer-list-item-button" component={Link} to={routerLinksList[index]} >
-              <ListItemIcon className="drawer-list-item">
-              {React.createElement(iconList[index])}
-              </ListItemIcon>
-              <ListItemText className="drawer-list-item" primary={text}/>
-            </ListItemButton>
-          </ListItem>
-        ))}
-        {user && <ListItem className="drawer-list-item-button" key={"Log Out"} disablePadding>
-            <ListItemButton className="drawer-list-item-button" onClick={logout}>
-              <ListItemIcon className="drawer-list-item">
-              {React.createElement(iconList[4])}
-              </ListItemIcon>
-              <ListItemText className="drawer-list-item" primary={"Log Out"}/>
-            </ListItemButton>
-        </ListItem> }
-        {!user && <> <ListItem className="drawer-list-item-button" key={"Login"} disablePadding>
-            <ListItemButton className="drawer-list-item-button" component={Link} to={routerLinksList[4]}>
-              <ListItemIcon className="drawer-list-item">
-              {React.createElement(iconList[5])}
-              </ListItemIcon>
-              <ListItemText className="drawer-list-item" primary={"Login"}/>
-            </ListItemButton>
-        </ListItem>
-        <ListItem className="drawer-list-item-button" key={"Sign up"} disablePadding>
-            <ListItemButton className="drawer-list-item-button" component={Link} to={routerLinksList[5]}>
-              <ListItemIcon className="drawer-list-item">
-              {React.createElement(iconList[6])}
-              </ListItemIcon>
-              <ListItemText className="drawer-list-item" primary={"Sign up"}/>
-            </ListItemButton>
-        </ListItem> </> }
-        
-      </List>
-    </Box>
-  );
-
-  return (
-    <>
-      <header className="base-header blue-background">
-        <div className="header-icon"> <img className="header-icon-feather" src='/assets/icons/BirdIconO.ico' alt="featherIcon" /> </div>
-        <p className="header-title small-title">
-          Feather Feed
-        </p>
-        <div className="header-icon header-icon-menu"> <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu}  /> </div>
-      </header>
-      <SwipeableDrawer
-      anchor={"right"}
-      open={isOpen}
-      onClose={() => setIsOpen(false)}
-      onOpen={() => setIsOpen(true)}
-    >
-      {DrawerList}
-    </SwipeableDrawer>
-    </>
-  );
+	return (
+		<>
+			<header className="base-header blue-background">
+				<img
+					className="header-icon header-icon-feather"
+					src="/assets/icons/BirdIconO.ico"
+					alt="featherIcon"
+				/>
+				<p className="header-title small-title">Feather Feed</p>
+				<img
+					className="header-icon header-icon-menu"
+					src="/assets/icons/menu_orange.svg"
+					alt="menu"
+					onClick={toggleMenu}
+				/>
+			</header>
+			<SwipeableDrawer
+				anchor={"right"}
+				open={isOpen}
+				onClose={() => setIsOpen(false)}
+				onOpen={() => setIsOpen(true)}
+			>
+				{DrawerList}
+			</SwipeableDrawer>
+		</>
+	);
 }
 
-
-
 // EXPORT VARIABLES
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/code/frontend/src/components/header.css b/code/frontend/src/components/header.css
index 9967b0c..a47ef44 100644
--- a/code/frontend/src/components/header.css
+++ b/code/frontend/src/components/header.css
@@ -9,12 +9,11 @@
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: 1000;
 	border-radius: 0rem !important;
 }
 @media only screen and (min-width: 768px) {
 	.base-header {
-		height: var(--header-height-desktop);
+		height: var(--header-height);
 	}
 }
 
@@ -26,20 +25,20 @@
 }
 .header-icon-menu {
 	cursor: pointer;
+	height: 45px;
 }
 
 .header-icon {
-	margin: 40px;
+	margin: 20px;
 	display: flex;
-	width: 30px;
-	height: 30px;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	flex-shrink: 0;
-
-	background-size: cover;
-	background-repeat: no-repeat;
+}
+@media only screen and (min-width: 768px) {
+	.header-icon {
+		margin: 40px;
+	}
 }
 
 .drawer-list {
diff --git a/code/frontend/src/styles/sizes.css b/code/frontend/src/styles/sizes.css
index 02cfb77..f0dd3e0 100644
--- a/code/frontend/src/styles/sizes.css
+++ b/code/frontend/src/styles/sizes.css
@@ -1,5 +1,4 @@
 :root {
-	--header-height: 60px;
-	--header-height-desktop: 48px;
+	--header-height: 48px;
 	--border-radius: 1rem;
 }