diff --git a/index.html b/index.html
index c1d2220..ded8690 100644
--- a/index.html
+++ b/index.html
@@ -30,9 +30,16 @@
         }
     </script>
     <link href="https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
 </head>
 <body class="bg-dark text-white font-sans antialiased overflow-x-hidden">
 
+    <!-- Grain Overlay -->
+    <div class="grain-overlay" aria-hidden="true"></div>
+
+    <!-- Scroll Progress Bar -->
+    <div id="progress-bar" aria-hidden="true"></div>
+
     <!-- Preloader -->
     <div id="preloader" class="fixed inset-0 z-[999] bg-dark flex items-center justify-center">
         <div class="text-4xl md:text-6xl font-display font-bold overflow-hidden">
@@ -45,31 +52,64 @@
     <div id="cursor-dot" class="hidden md:block fixed top-0 left-0 w-1 h-1 bg-white rounded-full pointer-events-none z-[1000] mix-blend-difference -translate-x-1/2 -translate-y-1/2"></div>
 
     <!-- Navigation -->
-    <nav class="fixed w-full z-50 mix-blend-difference p-6 md:p-10 flex justify-between items-center">
+    <nav class="fixed w-full z-[100] mix-blend-difference p-6 md:p-10 flex justify-between items-center">
         <div class="font-display font-bold text-2xl tracking-tighter uppercase">
-            <a href="#home" class="hover-target">PLEXI09</a>
+            <a href="#about" class="hover-target">PLEXI09</a>
         </div>
         <div class="hidden md:flex space-x-8 font-medium text-sm uppercase tracking-widest">
-            <a href="#about" class="hover-target hover:text-gray-400 transition">About</a>
-            <a href="#cv" class="hover-target hover:text-gray-400 transition">CV</a>
-            <a href="#projects" class="hover-target hover:text-gray-400 transition">Projects</a>
-            <a href="#photography" class="hover-target hover:text-gray-400 transition">Photography</a>
-            <a href="#contact" class="hover-target hover:text-gray-400 transition">Contact</a>
+            <a href="#about" data-section="about" class="nav-link hover-target transition">About</a>
+            <a href="#cv" data-section="cv" class="nav-link hover-target transition">CV</a>
+            <a href="#projects" data-section="projects" class="nav-link hover-target transition">Projects</a>
+            <a href="#photography" data-section="photography" class="nav-link hover-target transition">Photography</a>
+            <a href="#contact" data-section="contact" class="nav-link hover-target transition">Contact</a>
         </div>
+        <button id="hamburger" class="md:hidden flex flex-col justify-center items-end gap-[7px] w-8 h-8 hover-target" aria-label="Toggle menu">
+            <span class="ham-line block w-6 h-px bg-white transition-all duration-500"></span>
+            <span class="ham-line block w-4 h-px bg-white transition-all duration-500"></span>
+        </button>
     </nav>
 
+        <!-- Hero Section -->
+    <section id="home" class="relative h-screen w-full flex items-center justify-center overflow-hidden">
+        <canvas id="hero-canvas" class="absolute inset-0 z-0 opacity-60"></canvas>
+        <div class="relative z-10 text-center pointer-events-none">
+            <h1 class="text-[12vw] leading-none font-display font-bold uppercase tracking-tighter mix-blend-difference hero-title">
+                Developer
+            </h1>
+            <h1 class="text-[12vw] leading-none font-display font-bold uppercase tracking-tighter mix-blend-difference text-transparent stroke-text hero-title">
+                Photographer
+            </h1>
+            <p class="mt-8 text-xl md:text-2xl font-light tracking-wide opacity-0 hero-subtitle">
+                Crafting digital experiences & capturing light.
+            </p>
+        </div>
+        <div class="absolute bottom-10 left-1/2 -translate-x-1/2 text-sm uppercase tracking-widest opacity-50 animate-pulse">
+            Scroll to explore
+        </div>
+    </section>
+
+    <!-- Mobile Menu Overlay -->
+    <div id="mobile-overlay" class="fixed inset-0 z-[90] bg-[#0a0a0a] flex flex-col justify-center px-10 translate-x-full transition-transform duration-700 ease-in-out">
+        <a href="#about" class="mobile-nav-link hover-target text-5xl sm:text-6xl font-display font-bold uppercase tracking-tighter mb-5 text-gray-700 hover:text-white transition-colors duration-300">01 — About</a>
+        <a href="#cv" class="mobile-nav-link hover-target text-5xl sm:text-6xl font-display font-bold uppercase tracking-tighter mb-5 text-gray-700 hover:text-white transition-colors duration-300">02 — CV</a>
+        <a href="#projects" class="mobile-nav-link hover-target text-5xl sm:text-6xl font-display font-bold uppercase tracking-tighter mb-5 text-gray-700 hover:text-white transition-colors duration-300">03 — Projects</a>
+        <a href="#photography" class="mobile-nav-link hover-target text-5xl sm:text-6xl font-display font-bold uppercase tracking-tighter mb-5 text-gray-700 hover:text-white transition-colors duration-300">04 — Photography</a>
+        <a href="#contact" class="mobile-nav-link hover-target text-5xl sm:text-6xl font-display font-bold uppercase tracking-tighter mb-5 text-gray-700 hover:text-white transition-colors duration-300">05 — Contact</a>
+    </div>
+
     <!-- About Section -->
     <section id="about" class="py-32 px-6 md:px-20 relative z-10 bg-dark">
         <div class="max-w-3xl mx-auto">
-            <div class="space-y-8 reveal-text">
-                <h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">The Mind <br>Behind <span class="text-transparent stroke-text">Plexi09</span></h2>
-                <p class="text-xl text-gray-400 leading-relaxed font-light">
+            <div class="space-y-8">
+                <span class="section-num hero-title">01 / About</span>
+                <h2 class="hero-title text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">The Mind <br>Behind <span class="text-transparent stroke-text">Plexi09</span></h2>
+                <p class="hero-subtitle text-xl text-gray-400 leading-relaxed font-light">
                     Hey 🖐️! <br>I am self-taught developer and passionate photographer. I believe in the power of open-source, self-hosting, and writing code that feels like poetry.
                 </p>
-                <p class="text-xl text-gray-400 leading-relaxed font-light">
+                <p class="hero-subtitle text-xl text-gray-400 leading-relaxed font-light">
                     When I'm not architecting systems or deploying containers, I'm out in the world, freezing moments in time through my lens.
                 </p>
-                <div class="pt-8 border-t border-gray-800 flex gap-12">
+                <div class="hero-subtitle pt-8 border-t border-gray-800 flex gap-12">
                     <div>
                         <h4 class="text-sm uppercase tracking-widest text-gray-500 mb-2">Software stack</h4>
                         <p class="font-medium">TS, React, Tailwin, Python, Java, Docker</p>
@@ -87,12 +127,13 @@
     <section id="cv" class="py-32 px-6 md:px-20 bg-dark relative z-10 border-t border-gray-900">
         <div class="max-w-7xl mx-auto">
             <div class="mb-20 reveal-text">
+                <span class="section-num">02 / Experience</span>
                 <h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Experience <br>& <span class="text-transparent stroke-text">Journey</span></h2>
             </div>
 
             <div class="grid md:grid-cols-2 gap-16">
                 <!-- Experience -->
-                <div>
+                <div class="cv-column">
                     <h3 class="text-2xl font-display font-bold uppercase tracking-widest mb-10 text-gray-500">Work</h3>
                     <div class="space-y-4">
                         <div class="group p-6 -mx-6 rounded-2xl hover:bg-[#0f0f0f] transition-colors duration-500 hover-target">
@@ -123,7 +164,7 @@
                 </div>
 
                 <!-- Education -->
-                <div>
+                <div class="cv-column">
                     <h3 class="text-2xl font-display font-bold uppercase tracking-widest mb-10 text-gray-500">Education</h3>
                     <div class="space-y-4">
                         <div class="group p-6 -mx-6 rounded-2xl hover:bg-[#0f0f0f] transition-colors duration-500 hover-target">
@@ -152,7 +193,10 @@
     <section id="projects" class="py-32 px-6 md:px-20 bg-[#0f0f0f]">
         <div class="max-w-7xl mx-auto">
             <div class="flex justify-between items-end mb-20 reveal-text">
-                <h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Creations</h2>
+                <div>
+                    <span class="section-num">03 / Creations</span>
+                    <h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Creations</h2>
+                </div>
                 <a href="https://git.plexi09.me" class="hidden md:inline-block text-sm uppercase tracking-widest border-b border-white pb-1 hover-target">View Forgejo</a>
             </div>
 
@@ -164,9 +208,9 @@
                     </div>
                     <h3 class="text-3xl font-display font-bold mb-4">Movie Match</h3>
                     <p class="text-gray-400 mb-8 font-light">An application that helps couples and friends discover compatible movies to watch together.</p>
-                    <div class="flex gap-3">
-                        <span class="px-4 py-1 rounded-full border border-gray-700 text-xs uppercase tracking-wider">Typescript</span>
-                        <span class="px-4 py-1 rounded-full border border-gray-700 text-xs uppercase tracking-wider">Docker</span>
+                    <div class="flex gap-3 flex-wrap">
+                        <span class="flex items-center gap-2 px-4 py-1 rounded-full border border-gray-700 text-xs uppercase tracking-wider"><i class="devicon-typescript-plain text-blue-400 text-base"></i> Typescript</span>
+                        <span class="flex items-center gap-2 px-4 py-1 rounded-full border border-gray-700 text-xs uppercase tracking-wider"><i class="devicon-docker-plain text-base" style="color:#2496ed"></i> Docker</span>
                     </div>
                 </a>
             </div>
@@ -176,6 +220,7 @@
     <!-- Photography Section -->
     <section id="photography" class="py-32 px-6 md:px-20 bg-dark overflow-hidden">
         <div class="max-w-7xl mx-auto mb-20 reveal-text">
+            <span class="section-num">04 / Photography</span>
             <h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Through<br>The Lens</h2>
         </div>
 
@@ -222,6 +267,7 @@
     <!-- Contact Section -->
     <section id="contact" class="py-32 px-6 md:px-20 bg-[#0f0f0f] relative overflow-hidden">
         <div class="max-w-4xl mx-auto text-center relative z-10">
+            <span class="section-num inline-block mb-6">05 / Contact</span>
             <h2 class="text-[10vw] leading-none font-display font-bold uppercase tracking-tighter mb-12 hover-target">
                 <a href="mailto:hello@plexi09.me" class="inline-block hover:scale-110 hover:stroke-text transition-all duration-300">Let's Talk</a>
             </h2>
@@ -240,6 +286,25 @@
         </div>
     </section>
 
+    <!-- Footer -->
+    <footer class="bg-dark border-t border-gray-900 py-10 px-6 md:px-20">
+        <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
+            <div>
+                <span class="font-display font-bold text-xl tracking-tighter uppercase text-white">PLEXI09</span>
+                <p class="text-gray-600 text-sm mt-1 uppercase tracking-[0.2em]">Developer & Photographer</p>
+            </div>
+            <div class="hidden md:flex gap-10 text-xs uppercase tracking-widest text-gray-500">
+                <a href="#about" class="hover:text-white transition hover-target">About</a>
+                <a href="#cv" class="hover:text-white transition hover-target">CV</a>
+                <a href="#projects" class="hover:text-white transition hover-target">Projects</a>
+                <a href="#photography" class="hover:text-white transition hover-target">Photography</a>
+            </div>
+            <a href="#" class="text-xs border border-gray-800 hover:border-white text-gray-500 hover:text-white transition-all px-5 py-2.5 rounded-full uppercase tracking-widest hover-target">
+                <i class="fas fa-download mr-2"></i> Download CV
+            </a>
+        </div>
+    </footer>
+
     <script src="js/main.js"></script>
 </body>
 </html>
