diff --git a/code/frontend/public/assets/icons/close_orange.svg b/code/frontend/public/assets/icons/close_orange.svg
deleted file mode 100644
index d58416c..0000000
--- a/code/frontend/public/assets/icons/close_orange.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.688 40.6363L10.6937 37.642L22.6707 25.665L10.6937 13.688L13.688 10.6938L25.665 22.6708L37.642 10.6938L40.6362 13.688L28.6592 25.665L40.6362 37.642L37.642 40.6363L25.665 28.6593L13.688 40.6363Z" fill="#E79A0E"/>
-</svg>
diff --git a/code/frontend/public/assets/icons/three_menu_stripes_black.svg b/code/frontend/public/assets/icons/three_menu_stripes_black.svg
deleted file mode 100644
index 082cc0d..0000000
--- a/code/frontend/public/assets/icons/three_menu_stripes_black.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_76_392" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
-<rect width="40" height="40" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask0_76_392)">
-<path d="M5 30V26.6667H35V30H5ZM5 21.6667V18.3333H35V21.6667H5ZM5 13.3333V10H35V13.3333H5Z" fill="#1C1B1F"/>
-</g>
-</svg>
-     
\ No newline at end of file
diff --git a/code/frontend/public/assets/icons/x.svg b/code/frontend/public/assets/icons/x.svg
deleted file mode 100644
index 6918b9d..0000000
--- a/code/frontend/public/assets/icons/x.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30 10L10 30M10 10L30 30" stroke="#1E1E1E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx
index 9271c67..6a1e9a0 100644
--- a/code/frontend/src/components/Header.tsx
+++ b/code/frontend/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import "./header.css";
 import React, { useState, useRef } from "react";
-import { createTheme, List, ListItem, ListItemButton, ListItemIcon, ListItemText, StyledEngineProvider, SwipeableDrawer, ThemeProvider } from '@mui/material';
+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';
@@ -8,7 +8,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import InfoIcon from '@mui/icons-material/Info';
 import LogoutIcon from '@mui/icons-material/Logout';
 import { Link } from "react-router-dom";
-import axios from "axios";
+import { useAuth } from "../api/Auth";
 
 // 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
 
@@ -19,17 +19,12 @@ function Header() {
   const toggleMenu = () => {
     setIsOpen(!isOpen);
   };
-  // TODO
-  const logOut = async () => {
-    try {
-    const response = await axios.delete("http://localhost:3001/api/user/logout");
-    } catch (err: any) {
-      console.error("error: ", err.response.data);
-    }
-  };
+  const { logout } = useAuth();
   const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon];
   const routerLinksList = ["/","/createpost","/profile","/about","/"]
 
+  // TODO: Logout nur anzeigen wenn user eingeloggt ist
+
   const DrawerList = (
     <Box role="menu" onClick={() => setIsOpen(false)}>
       <List className="drawer-list">
@@ -44,7 +39,7 @@ function Header() {
           </ListItem>
         ))}
         <ListItem className="drawer-list-item-button" key={"Log Out"} disablePadding>
-            <ListItemButton className="drawer-list-item-button" onClick={logOut}>
+            <ListItemButton className="drawer-list-item-button" onClick={logout}>
               <ListItemIcon className="drawer-list-item">
               {React.createElement(iconList[4])}
               </ListItemIcon>
@@ -62,7 +57,7 @@ function Header() {
         <p className="header-title">
           Feather Feed
         </p>
-        <div className="header-icon header-icon-menu"> {isOpen? <img src='/assets/icons/close_orange.svg' alt="close menu" ref={iconRef} onClick={toggleMenu}/> : <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu}  />} </div>
+        <div className="header-icon header-icon-menu"> <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu}  /> </div>
       </header>
       <SwipeableDrawer
       anchor={"right"}
diff --git a/code/frontend/src/components/header.css b/code/frontend/src/components/header.css
index 1f0f7ea..946ecc0 100644
--- a/code/frontend/src/components/header.css
+++ b/code/frontend/src/components/header.css
@@ -1,71 +1,77 @@
+:root {
+	--Rotkehlchen-gray: #e7ecf2;
+	--Rotkehlchen-brown1: #a28d7a;
+	--Rotkehlchen-orange-default: #e79a0e;
+}
+
 .base-header {
-  z-index: 10;
-  width: 100vw;
-  display: flex;
-  height: var(--header-height);
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-  border-bottom: 3px solid var(--Rotkehlchen-brown-light);
-  background: var(--Rotkehlchen-gray);
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1000;
+	z-index: 10;
+	width: 100vw;
+	display: flex;
+	height: var(--header-height);
+	justify-content: space-between;
+	align-items: center;
+	flex-shrink: 0;
+	background: hsla(244, 70%, 13%, 0.71);
+	backdrop-filter: blur(8px);
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1000;
 }
 @media only screen and (min-width: 768px) {
-  .base-header {
-    height: var(--header-height-desktop);
-  }
+	.base-header {
+		height: var(--header-height-desktop);
+	}
 }
 
 .header-title {
-  display: flex;
-  width: 162px;
-  height: 63px;
-  flex-direction: column;
-  justify-content: center;
-  flex-shrink: 0;
-  font-weight: bold;
-  font-size: x-large;
+	display: flex;
+	width: 162px;
+	height: 63px;
+	flex-direction: column;
+	justify-content: center;
+	flex-shrink: 0;
+	font-weight: bold;
+	font-size: x-large;
 
-  color: var(--Rotkehlchen-orange-default);
-  text-align: center;
+	color: var(--Rotkehlchen-orange-default);
+	text-align: center;
 }
 .header-icon-feather {
-  height: 35px;
+	height: 35px;
 }
 .header-icon-menu {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .header-icon {
-  margin: 40px;
-  display: flex;
-  width: 30px;
-  height: 30px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
+	margin: 40px;
+	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;
+	background-size: cover;
+	background-repeat: no-repeat;
 }
 
 .drawer-list {
-  background-color: #2f325e;
-  min-height: 100vh;
-  min-width: 13rem;
+	background-color: #12103d;
+	min-height: 100vh;
+	min-width: 13rem;
 }
 
 .drawer-list-item {
-  color: white;
+	color: white;
 }
 
 .drawer-list-item-button {
-  height: 10vh;
+	height: 10vh;
 }
 .drawer-list-item-button:hover {
-  background-color: #555b90;
+	background-color: #232451;
 }