diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index 36aec16..0123900 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -10,11 +10,11 @@ const links = [
 ---
 
 <NavigationContainer client:only="react">
-  <div class="w-full p-8 pt-24">
+  <div class="w-full pl-8 pt-24">
     <ul class="flex flex-col gap-8">
       {links.map((link) => (
-      <li class="link-item relative flex text-white text-2xl font-orbitron tracking-wider p-2">
-        <a href={link.href} class=" flex w-full">{link.label}</a>
+      <li class="link-item relative flex overflow-hidden text-white text-2xl font-orbitron tracking-wider">
+        <a href={link.href} class=" flex w-full p-2">{link.label}</a>
       </li>
       ))} 
     </ul>
diff --git a/src/components/Navigation/NavigationContainer.tsx b/src/components/Navigation/NavigationContainer.tsx
index 792ff5c..7a98305 100644
--- a/src/components/Navigation/NavigationContainer.tsx
+++ b/src/components/Navigation/NavigationContainer.tsx
@@ -3,111 +3,119 @@ import { type ReactNode, useState } from "react";
 export const NavigationContainer = ({ children }: { children: ReactNode }) => {
 	const [active, setActive] = useState(false);
 	return (
-		<header>
-			<button
-				type="button"
-				className="fixed top-0 right-0 p-2"
-				aria-label="Menu Button"
-				onClick={() => setActive((prev) => !prev)}
-			>
-				<svg
-					className=""
-					width="40"
-					height="40"
-					viewBox="0 0 24 24"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
+		<>
+			<div
+				className="fixed top-0 left-0 w-full h-full bg-blue-100 bg-opacity-50 z-[-10] transition-opacity"
+				style={{ opacity: active ? 1 : 0 }}
+				onClick={() => setActive(false)}
+				onKeyDown={(e) => e.key === "Escape" && setActive(false)}
+			/>
+			<header>
+				<button
+					type="button"
+					className="fixed top-0 right-0 p-2"
+					aria-label="Menu Button"
+					onClick={() => setActive((prev) => !prev)}
 				>
-					<title>Menu</title>
-					<path
-						d="M4 6L20 6"
-						stroke="black"
-						stroke-width="2"
-						stroke-linecap="round"
-						className="horizon1"
-					/>
-					<path
-						d="M4 12L20 12"
-						stroke="black"
-						stroke-width="2"
-						stroke-linecap="round"
-						className="horizon2"
-					/>
-					<path
-						d="M4 18L20 18"
-						stroke="black"
-						stroke-width="2"
-						stroke-linecap="round"
-						className="horizon3"
-					/>
-				</svg>
-			</button>
-			<nav
-				className={`fixed pl-16 grid top-0 bottom-0 right-0 w-[500px] max-w-[80vw] transition-transform ${active ? "translate-x-0" : "translate-x-full"}`}
-			>
-				<svg
-					className="text-gray-500 absolute top-0 left-0 z-[-1]"
-					height="100%"
-					viewBox="0 0 160 80"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
+					<svg
+						className=""
+						width="40"
+						height="40"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<title>Menu</title>
+						<path
+							d="M4 6L20 6"
+							stroke="black"
+							stroke-width="2"
+							stroke-linecap="round"
+							className="horizon1"
+						/>
+						<path
+							d="M4 12L20 12"
+							stroke="black"
+							stroke-width="2"
+							stroke-linecap="round"
+							className="horizon2"
+						/>
+						<path
+							d="M4 18L20 18"
+							stroke="black"
+							stroke-width="2"
+							stroke-linecap="round"
+							className="horizon3"
+						/>
+					</svg>
+				</button>
+				<nav
+					className={`fixed pl-16 grid top-0 bottom-0 right-0 w-[500px] max-w-[95vw] transition-transform ${active ? "translate-x-0" : "translate-x-full"}`}
 				>
-					<title>Deco</title>
-					<polygon
-						points="0 0 0 10 5 15 5 65 0 70 0 80 160 80 160 0"
-						fill="currentColor"
-					/>
-				</svg>
-				<div className="relative flex flex-col items-end bg-gray-500 p-2">
-					<div className="bottom-0 absolute h-full">
-						<img
-							src="/logo/logo-vertical.svg"
-							alt="Logo"
-							className="opacity-40 py-4 pt-16 h-full"
+					<svg
+						className="text-gray-500 absolute top-0 left-0 z-[-1]"
+						height="100%"
+						viewBox="0 0 160 80"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<title>Deco</title>
+						<polygon
+							points="0 0 0 10 5 15 5 65 0 70 0 80 160 80 160 0"
+							fill="currentColor"
 						/>
-					</div>
-					<div className="relative w-full flex justify-end items-center">
-						<button
-							type="button"
-							aria-label="Menu Button"
-							onClick={() => setActive((prev) => !prev)}
-						>
-							<svg
-								className=""
-								width="40"
-								height="40"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
+					</svg>
+					<div className="relative flex flex-col bg-gray-500 p-2">
+						<div className="bottom-0 right-0 absolute h-full">
+							<img
+								src="/logo/logo-vertical.svg"
+								alt="Logo"
+								className="opacity-40 py-4 pt-16 h-full"
+							/>
+						</div>
+						<div className="relative w-full flex justify-end items-center">
+							<button
+								type="button"
+								aria-label="Menu Button"
+								onClick={() => setActive((prev) => !prev)}
 							>
-								<title>Menu</title>
-								<path
-									d="M4 6L20 6"
-									stroke="white"
-									stroke-width="2"
-									stroke-linecap="round"
-									className="horizon1"
-								/>
-								<path
-									d="M4 12L20 12"
-									stroke="white"
-									stroke-width="2"
-									stroke-linecap="round"
-									className="horizon2"
-								/>
-								<path
-									d="M4 18L20 18"
-									stroke="white"
-									stroke-width="2"
-									stroke-linecap="round"
-									className="horizon3"
-								/>
-							</svg>
-						</button>
+								<svg
+									className=""
+									width="40"
+									height="40"
+									viewBox="0 0 24 24"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<title>Menu</title>
+									<path
+										d="M4 6L20 6"
+										stroke="white"
+										stroke-width="2"
+										stroke-linecap="round"
+										className="horizon1"
+									/>
+									<path
+										d="M4 12L20 12"
+										stroke="white"
+										stroke-width="2"
+										stroke-linecap="round"
+										className="horizon2"
+									/>
+									<path
+										d="M4 18L20 18"
+										stroke="white"
+										stroke-width="2"
+										stroke-linecap="round"
+										className="horizon3"
+									/>
+								</svg>
+							</button>
+						</div>
+						{children}
 					</div>
-					{children}
-				</div>
-			</nav>
-		</header>
+				</nav>
+			</header>
+		</>
 	);
 };
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ed9c109..65b28cb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,7 +5,6 @@ import Layout from "../layouts/Layout.astro";
 
 <Layout title="MCC" path="" og={{enabled: true}} pagefind={false}>
   <Navigation />
-  <button>Click me</button>
   <slot />
 </Layout>
 <style>