diff --git a/index.html b/index.html
index 494df36..23eeab8 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,16 @@
 	</head>
 	<body class="bg-ql-pink">
 		<!-- MOBILE HEADER START -->
-		<header class="lg:hidden border-b border-b-ql-purple">
+		<button
+			title="Menü anzeigen"
+			id="header-button"
+			class="md:hidden z-headerButton fixed top-10 right-14 bg-ql-purple w-10 h-10 rounded-full drop-shadow-lg flex justify-center items-center text-white text-sm hover:drop-shadow-2xl"
+		>
+			<span class="sr-only">PLATZHALTER TEXT</span> <!-- TODO: Platzhalter durch sinnvolen Text ersetzen-->
+			FOO
+		</button>
+
+		<header id="mobile-header" class="max-md:hidden lg:hidden border-b border-b-ql-purple">
 			<section class="p-4 pt-6 text-neutral-700 flex flex-row">
 				<div class="flex-grow">
 					<h1 class="font-semibold text-lg mb-1">tra-la-card</h1>
@@ -82,7 +91,7 @@
 										d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
 									/>
 								</svg>
-							<span class="sr-only">Meinen aktuellen Standort verwenden</span>
+								<span class="sr-only">Meinen aktuellen Standort verwenden</span>
 							</button>
 							<button
 								type="submit"
@@ -167,7 +176,7 @@
 										d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
 									/>
 								</svg>
-							<span class="sr-only">Meinen aktuellen Standort verwenden</span>
+								<span class="sr-only">Meinen aktuellen Standort verwenden</span>
 							</button>
 							<button
 								type="submit"
diff --git a/main.ts b/main.ts
index 4c7f328..3e4a630 100644
--- a/main.ts
+++ b/main.ts
@@ -4,7 +4,7 @@ import { setupHamburger } from "./ts/hamburger";
 import { initializeMap } from "./ts/map";
 import "@fontsource/ubuntu/latin.css";
 import { setupLegend } from "./ts/legend";
-import { setupEmergencyButton, setupResetButton } from "./ts/buttons";
+import { setupEmergencyButton, setupResetButton, setupHeaderButton } from "./ts/buttons";
 import { addGoatCounter } from "./ts/goatcounter";
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -14,6 +14,7 @@ document.addEventListener("DOMContentLoaded", () => {
 	setupLegend();
 	setupEmergencyButton();
 	setupResetButton();
+	setupHeaderButton();
 
 	if (import.meta.env.VITE_QUEER_LEXIKON_PRIVATE === "true") {
 		addGoatCounter();
diff --git a/tailwind.config.js b/tailwind.config.js
index 13acfb5..0d71425 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,7 @@ module.exports = {
 			},
 			zIndex: {
 				emergencyButton: 1000,
+				headerButton: 1000,
 				menu: 1001,
 			},
 		},
diff --git a/ts/buttons.ts b/ts/buttons.ts
index 994334c..7fb1269 100644
--- a/ts/buttons.ts
+++ b/ts/buttons.ts
@@ -16,3 +16,11 @@ export const setupResetButton = () => {
 		window.location.reload();
 	});
 };
+
+export const setupHeaderButton = () => {
+	const btn = <HTMLButtonElement>document.getElementById("header-button");
+	const header = <HTMLElement>document.getElementById("mobile-header");
+	btn?.addEventListener("click", () => {
+		header.classList.toggle("max-md:hidden");
+	});
+};
