diff --git a/public/assets/triangle.svg b/public/assets/triangle.svg
new file mode 100644
index 0000000..af1e11a
--- /dev/null
+++ b/public/assets/triangle.svg
@@ -0,0 +1,11 @@
+<svg width="104" height="179" viewBox="0 0 104 179" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_59_42)">
+<path d="M52.0011 0.5L0 0.50011M52.0011 0.5L104.001 89.4999H0L52.0011 0.5ZM52.0011 0.5L104.001 0.50011" stroke="black"/>
+<path d="M51.9999 178.5L104.001 89.5L-2.28882e-05 89.5L51.9999 178.5Z" stroke="black"/>
+</g>
+<defs>
+<clipPath id="clip0_59_42">
+<rect width="104.001" height="178.5" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icons/hamburger-black.svg b/public/icons/hamburger-black.svg
new file mode 100644
index 0000000..250a2b7
--- /dev/null
+++ b/public/icons/hamburger-black.svg
@@ -0,0 +1,18 @@
+<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="black">
+  <title>Menu</title>
+  <path
+    d="M4 6L20 6"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+  <path
+    d="M4 12L20 12"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+  <path
+    d="M4 18L20 18"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+</svg>
diff --git a/public/icons/hamburger.svg b/public/icons/hamburger-white.svg
similarity index 100%
rename from public/icons/hamburger.svg
rename to public/icons/hamburger-white.svg
diff --git a/public/logos/logo.svg b/public/logos/logo.svg
new file mode 100644
index 0000000..10d4ec7
--- /dev/null
+++ b/public/logos/logo.svg
@@ -0,0 +1,12 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6_6)">
+<path d="M32 63.875V32L26.4574 28.8L18.1435 48L9.82964 19.1375L4.28714 15.875V48L9.82964 51.2V35.2L15.3723 54.4L20.9148 57.6L26.4574 44.8V60.8L32 63.875Z" fill="#0080FF" stroke="#0080FF"/>
+<path d="M32 63.875V32L59.7127 16.0625V28.8L54.1702 32V25.6L37.5425 35.2V54.4L54.1702 44.8V38.4L59.7127 35.2V48L45.8564 55.9375L32 63.875Z" fill="#0000FF" stroke="#0000FF"/>
+<path d="M32 32L4.34964 15.8125L32 0.125L43.0851 6.4L37.5425 9.6L32 6.4L15.3723 16L32 25.6L48.6276 16L43.0851 12.8L48.6276 9.6L59.6503 16L32 32Z" fill="#00FFFF" stroke="#00FFFF"/>
+</g>
+<defs>
+<clipPath id="clip0_6_6">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/textures/moonless_golf_1k.hdr b/public/textures/moonless_golf_1k.hdr
deleted file mode 100644
index cc60dc8..0000000
Binary files a/public/textures/moonless_golf_1k.hdr and /dev/null differ
diff --git a/src/components/Container.astro b/src/components/Container.astro
new file mode 100644
index 0000000..ab4b95e
--- /dev/null
+++ b/src/components/Container.astro
@@ -0,0 +1,23 @@
+---
+
+---
+
+<div class="h-dvh flex relative">
+  <div class="fixed w-32 h-32 top-0 z-10">
+    <img src="/logos/logo.svg" alt="MCC Logo" class="pl-8 pt-8 lg:h-40 lg:mr-[-200px]" />
+  </div>
+  <div class="w-full flex flex-col p-4 pt-16">
+    <div class="flex justify-end mb-[-1px]">
+      <svg width="70" height="140" viewBox="0 0 70 140" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-[-1px] text-blue-800">
+      <path d="M70 140H0C15 136 15 140 35 70C55 0 55 0 70 0V140Z" fill="currentColor"/>
+      </svg>
+      <div class="rounded-tr-2xl bg-blue-800 w-[calc(100%-200px)]" />
+    </div>
+    <div class="w-full h-full rounded-b-2xl rounded-l-2xl bg-blue-800 p-4">
+      <slot />
+    </div>
+	</div>
+</div>
+
+<style>
+</style>
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index 10dd767..5a2a6cc 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -1,6 +1,6 @@
 ---
+import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
 import { NavigationContainer } from "./NavigationContainer.tsx";
-import { FaXTwitter, FaGithub, FaDiscord } from "react-icons/fa6";
 
 const links = [
 	{ href: "/", label: "Home" },
@@ -8,15 +8,23 @@ const links = [
 	{ href: "/achievements", label: "Achievements" },
 	{ href: "/blog", label: "Blog" },
 ];
+
+const socialLinks = [
+	{ href: "https://x.com/tuatmcc", icon: FaXTwitter },
+	{ href: "https://x.com/tuatmcc", icon: FaGithub },
+	{ href: "https://x.com/tuatmcc", icon: FaDiscord },
+];
 ---
 
 <slot />
 <NavigationContainer client:only="react">
-	<div class="w-full h-full pl-8 pt-24 overflow-y-auto flex flex-col justify-between">
+	<div
+		class="w-full h-full pl-8 pt-24 overflow-y-auto flex flex-col justify-between"
+	>
 		<ul class="flex flex-col gap-8">
 			{
 				links.map((link) => (
-					<li class="link-item relative flex text-white text-2xl font-orbitron tracking-wider">
+					<li class="link-item relative flex text-gray-100 text-2xl font-orbitron tracking-wider">
 						<a href={link.href} class=" flex justify-end w-full p-2">
 							{link.label}
 						</a>
@@ -24,50 +32,49 @@ const links = [
 				))
 			}
 		</ul>
-    <div class="relative">
-      <div class="absolute top-0 right-0 w-[2px] bottom-0 bg-red-600" />
-    <ul class="relative flex flex-col gap-8 p-4">
-      <li class="flex">
-        <a href="https://x.com/tuatmcc" target="_blank" rel="noopener noreferrer" class="flex flex-1 justify-end">
-          <FaXTwitter className="text-white w-6 h-6" />
-        </a>
-      </li>
-      <li class="flex">
-        <a href="https://x.com/tuatmcc" target="_blank" rel="noopener noreferrer" class="flex flex-1 justify-end">
-            <FaGithub className="text-white w-6 h-6" />
-        </a>
-      </li>
-      <li class="flex">
-        <a href="https://x.com/tuatmcc" target="_blank" rel="noopener noreferrer" class="flex flex-1 justify-end">
-            <FaDiscord className="text-white w-6 h-6" />
-        </a>
-      </li>
-    </ul>
-    </div>
-</NavigationContainer>
-
-<style>
-	.link-item {
-		&::after {
-			position: absolute;
-			content: "";
-			display: block;
-			bottom: 0;
-			left: 50%;
-			width: 0;
-			bottom: 0;
-			height: 2px;
-			background: white;
-			transition: all 0.2s;
-			transform: translateX(-50%);
-			opacity: 0;
-		}
+		<div class="relative">
+			<div class="absolute top-0 right-0 w-[4px] bottom-0 bg-blue-600"></div>
+			<ul class="relative flex flex-col gap-8 p-4">
+				{
+					socialLinks.map((socialLink) => (
+						<li class="flex">
+							<a
+								href={socialLink.href}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="flex flex-1 justify-end"
+							>
+								<socialLink.icon className="text-gray-200 w-6 h-6" />
+							</a>
+						</li>
+					))
+				}
+			</ul>
+		</div>
+	</div>
 
-		&:hover {
+	<style>
+		.link-item {
 			&::after {
-				width: 100%;
-				opacity: 1;
+				position: absolute;
+				content: "";
+				display: block;
+				bottom: 0;
+				right: 0;
+				width: 0;
+				bottom: 0;
+				height: 2px;
+				background: white;
+				transition: all 0.2s;
+				opacity: 0;
+			}
+
+			&:hover {
+				&::after {
+					width: 100%;
+					opacity: 1;
+				}
 			}
 		}
-	}
-</style>
+	</style>
+</NavigationContainer>
diff --git a/src/components/Navigation/NavigationContainer.tsx b/src/components/Navigation/NavigationContainer.tsx
index 8bd7189..0cdedd1 100644
--- a/src/components/Navigation/NavigationContainer.tsx
+++ b/src/components/Navigation/NavigationContainer.tsx
@@ -3,6 +3,7 @@ import { type ReactNode, useState } from "react";
 
 export const NavigationContainer = ({ children }: { children: ReactNode }) => {
 	const [active, setActive] = useState(false);
+
 	return (
 		<>
 			<AnimatePresence>
@@ -11,7 +12,7 @@ export const NavigationContainer = ({ children }: { children: ReactNode }) => {
 						initial={{ opacity: 0 }}
 						animate={{ opacity: 1 }}
 						exit={{ opacity: 0 }}
-						className="fixed top-0 left-0 w-full h-dvh bg-black bg-opacity-30 backdrop-blur-sm"
+						className="fixed top-0 left-0 w-full h-dvh bg-black bg-opacity-40 backdrop-blur-sm z-10"
 						onClick={() => setActive(false)}
 						onKeyDown={(e) => e.key === "Escape" && setActive(false)}
 					/>
@@ -24,40 +25,13 @@ export const NavigationContainer = ({ children }: { children: ReactNode }) => {
 					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"
-					>
-						<title>Menu</title>
-						<path
-							d="M4 6L20 6"
-							stroke="black"
-							stroke-width="2"
-							stroke-linecap="round"
-						/>
-						<path
-							d="M4 12L20 12"
-							stroke="black"
-							stroke-width="2"
-							stroke-linecap="round"
-						/>
-						<path
-							d="M4 18L20 18"
-							stroke="black"
-							stroke-width="2"
-							stroke-linecap="round"
-						/>
-					</svg>
+					<img src="/icons/hamburger-black.svg" alt="Menu" />
 				</button>
 				<motion.div
 					initial={{ x: "100%" }}
 					animate={{ x: active ? 0 : "100%" }}
 					transition={{ type: "spring", bounce: 0.1, duration: 0.3 }}
-					className="fixed grid top-0 bottom-0 right-0 w-[500px] max-w-[95vw]"
+					className="fixed grid top-0 bottom-0 right-0 w-[500px] max-w-[95vw] z-10"
 					style={{
 						clipPath:
 							"polygon(0 0, 0 30%, 60px calc(30% + 60px), 60px calc(100% - 160px), 0 calc(100% - 100px), 0 100%, 100% 100%, 100% 0)",
@@ -76,34 +50,34 @@ export const NavigationContainer = ({ children }: { children: ReactNode }) => {
 							aria-label="Menu Button"
 							onClick={() => setActive((prev) => !prev)}
 						>
-							<img src="/icons/hamburger.svg" alt="Close" />
+							<img src="/icons/hamburger-white.svg" alt="Close" />
 						</button>
 
 						{children}
 					</div>
 					<div
-						className="fixed top-0 h-[30%] w-[60px] bg-red-600"
+						className="fixed top-0 h-[30%] w-[60px] bg-blue-600"
 						style={{
 							clipPath:
 								"polygon(20px 0, 22px 0, 22px 20%, 60px calc(20% + 38px), 60px calc(20% + 50px), 20px calc(20% + 12px))",
 						}}
 					/>
 					<div
-						className="fixed top-0 h-[30%] w-[60px] bg-red-600"
+						className="fixed top-0 h-[30%] w-[60px] bg-blue-600"
 						style={{
 							clipPath:
 								"polygon(20px calc(20% + 22px), 60px calc(20% + 62px), 60px calc(20% + 74px), 20px calc(20% + 36px))",
 						}}
 					/>
 					<div
-						className="fixed top-0 h-[30%] w-[60px] bg-red-600"
+						className="fixed top-0 h-[30%] w-[60px] bg-blue-600"
 						style={{
 							clipPath:
 								"polygon(20px calc(20% + 46px), 60px calc(20% + 86px), 60px calc(20% + 98px), 20px calc(20% + 60px))",
 						}}
 					/>
 					<div
-						className="fixed top-0 h-[30%] w-[60px] bg-red-600"
+						className="fixed top-0 h-[30%] w-[60px] bg-blue-600"
 						style={{
 							clipPath:
 								"polygon(58px calc(20% + 86px), 60px calc(20% + 86px), 60px calc(20% + 160px), 58px calc(20% + 160px))",
diff --git a/src/components/home/RecentNews.astro b/src/components/home/RecentNews.astro
index c606586..6809a6c 100644
--- a/src/components/home/RecentNews.astro
+++ b/src/components/home/RecentNews.astro
@@ -7,7 +7,7 @@ const posts = (await getCollection("news")).sort(
 );
 ---
 
-<BeveledCard class="card fixed bottom-1/2 left-8 p-4 w-5/12 bg-gray-400">
+<BeveledCard class="p-4 w-5/12 bg-gray-600">
 	<h2 class="font-orbitron text-4xl">Recent News</h2>
 	<ul class="content mt-2 flex flex-col gap-2">
 		<li class="flex">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ffc59c1..4cdefc7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,15 +1,37 @@
 ---
+import Container from "../components/Container.astro";
 import Navigation from "../components/Navigation/Navigation.astro";
 import RecentNews from "../components/home/RecentNews.astro";
 import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="MCC" path="" og={{ enabled: true }} pagefind={false}>
-	<!-- <img src="/abstract-wave.jpg" class="absolute top-0 left-0 w-full h-full bg-black" /> -->
 	<Navigation>
-		<div class="h-svh flex flex-col items-center justify-center relative">
-			<img src="/animated_mcc.webp" alt="MCC Logo" class="w-80 h-80" />
-		</div>
-		<RecentNews />
+    <main class="main">
+      <!-- <div class="background-gradient fixed top-0 left-0 w-full h-full z-[-1]" /> -->
+      <div class="background-pattern fixed top-0 left-0 w-full h-full opacity-10 z-[-1]" />
+      <div class="sticky h-svh flex flex-col items-center justify-center top-0 z-[-1]">
+        <img src="/animated_mcc.webp" alt="MCC Logo" class="w-80 h-80" />
+      </div>
+      <Container>
+        <h1 class="text-4xl text-white tracking-wider font-orbitron text-center">Welcome to MCC</h1>
+      </Container>
 	</Navigation>
+    </main>
 </Layout>
+
+<style>
+	.background-pattern {
+		background-image: url("/assets/triangle.svg");
+		background-repeat: repeat;
+		background-size: 100px;
+		background-position: center;
+	}
+
+	.background-gradient {
+		background-image: linear-gradient(#fff, transparent, #ccc9, #ccc);
+		background-size: 100%;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+</style>