diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
index 30c6083..7ef1bc5 100644
--- a/src/components/navigation/Header.svelte
+++ b/src/components/navigation/Header.svelte
@@ -6,37 +6,79 @@
 	} from '$env/static/public';
 
 	import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte';
+	import MobileMenu from './MobileMenu.svelte';
+
+	let isMobileMenuOpen = false;
+
 	let headerLinks = null;
 
 	if (PUBLIC_NAV_BAR_LINKS) {
 		headerLinks = JSON.parse(PUBLIC_NAV_BAR_LINKS);
 	}
+
+	function toggleNavbar() {
+		isMobileMenuOpen = !isMobileMenuOpen;
+	}
 </script>
 
 <div
-	class="bg-blur-md flex items-center justify-between border-b border-gray-500 bg-white/80 px-4 dark:bg-black dark:text-white"
+	class="bg-blur-md flex items-center justify-between border-b border-gray-500 bg-white/80 px-4 dark:bg-black dark:text-white md:flex-row md:px-8"
 >
-	<div class="flex items-center justify-center gap-4 px-2 py-2">
-		<div class="flex items-center justify-center gap-x-2">
-			<a href="/" class="block">
-				<img src={PUBLIC_OBA_LOGO_URL} alt={PUBLIC_OBA_REGION_NAME} class="h-10 rounded-sm" />
-			</a>
-			<a href="/" class="block text-xl font-extrabold">
-				{PUBLIC_OBA_REGION_NAME}
-			</a>
+	<div class="flex flex-1 items-center justify-between md:flex-none">
+		<div class="flex w-full justify-between gap-4 px-2 py-2 md:w-auto">
+			<div class="flex items-center justify-center gap-x-2">
+				<a href="/" class="block">
+					<img src={PUBLIC_OBA_LOGO_URL} alt={PUBLIC_OBA_REGION_NAME} class="h-10 rounded-sm" />
+				</a>
+				<a href="/" class="block text-xl font-extrabold">
+					{PUBLIC_OBA_REGION_NAME}
+				</a>
+			</div>
+
+			<div class="flex items-center justify-end md:hidden">
+				<button on:click={toggleNavbar}>
+					<svg
+						class="burger-icon h-6 w-6 text-gray-900 dark:text-white"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 6h16M4 12h16m-7 6h7"
+						></path>
+					</svg>
+				</button>
+			</div>
 		</div>
 
-		<div class="flex gap-x-4">
-			{#each Object.entries(headerLinks) as [key, value]}
-				<div class="rounded-md border bg-white/80 dark:bg-gray-800">
-					<a href={value} class="block px-2 py-1 font-semibold text-gray-900 dark:text-white">
-						{key}
-					</a>
-				</div>
-			{/each}
+		<div class="hidden items-center gap-4 px-2 py-2 md:flex">
+			<div class="flex gap-x-4">
+				{#each Object.entries(headerLinks) as [key, value]}
+					<div class="rounded-md border bg-white/80 dark:bg-gray-800">
+						<a href={value} class="block px-2 py-1 font-semibold text-gray-900 dark:text-white"
+							>{key}</a
+						>
+					</div>
+				{/each}
+			</div>
 		</div>
 	</div>
-	<div>
+
+	<div class="hidden md:flex">
 		<ThemeSwitcher />
 	</div>
 </div>
+
+{#if isMobileMenuOpen}
+	<MobileMenu {headerLinks} closeMenu={toggleNavbar} />
+{/if}
+
+<style lang="postcss">
+	.burger-icon {
+		cursor: pointer;
+	}
+</style>
diff --git a/src/components/navigation/MobileMenu.svelte b/src/components/navigation/MobileMenu.svelte
new file mode 100644
index 0000000..4d9488f
--- /dev/null
+++ b/src/components/navigation/MobileMenu.svelte
@@ -0,0 +1,45 @@
+<script>
+	import { fly } from 'svelte/transition';
+	import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte';
+
+	export let headerLinks = {};
+	export let closeMenu;
+</script>
+
+<div
+	class="fixed inset-0 z-50 flex flex-col items-center justify-center space-y-6 bg-white p-4 dark:bg-black"
+	transition:fly={{ x: 1000, duration: 300 }}
+>
+	<button on:click={closeMenu}>
+		<svg
+			class="close-icon h-6 w-6 text-gray-900 dark:text-white"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"
+			></path>
+		</svg>
+	</button>
+
+	<div class="flex flex-col items-center gap-4">
+		{#each Object.entries(headerLinks) as [key, value]}
+			<a
+				href={value}
+				class="block text-xl font-semibold text-gray-900 dark:text-white"
+				on:click={closeMenu}>{key}</a
+			>
+		{/each}
+	</div>
+
+	<div>
+		<ThemeSwitcher />
+	</div>
+</div>
+
+<style lang="postcss">
+	.close-icon {
+		cursor: pointer;
+	}
+</style>