diff --git a/src/app/components/navigation/navbar.js b/src/app/components/navigation/navbar.js
index 04e49ae..06180da 100644
--- a/src/app/components/navigation/navbar.js
+++ b/src/app/components/navigation/navbar.js
@@ -1,41 +1,62 @@
 'use client'
 
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 
+
 const Navbar = () => {
     const [menuOpen, setMenuOpen] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const lastYPos = useRef(0);
+
+    // Makes navbar disappear on scroll
+    useEffect(() => {
+        
 
+        const hasScrolled = () => {
+            const currentYPos = window.scrollY;
+            setHidden(currentYPos > 200 && currentYPos>lastYPos.current);
+            lastYPos.current = currentYPos;
+        };
+        window.addEventListener("scroll", hasScrolled);
+
+        return () => {
+            window.removeEventListener("scroll", hasScrolled)
+        };
+    }, []); 
+    
     const toggleMenu = () => {
         setMenuOpen(!menuOpen);
     };
 
     return (
-        <header className="sticky top-0 z-50 w-full bg-slate-900 border-b border-slate-700">
+        <header className={`fixed top-0 z-50 w-full bg-slate-900 border-b border-slate-700 transition-all duration-300 
+            ${hidden ? "opacity-0 -translate-y-full pointer-events-none" : "opacity-100 translate-y-0"
+    }`}>
             <div className="mx-auto max-w-[95vw] px-6 sm:px-8">
-                <div className="flex h-16 items-center justify-between">
+                <div className={`flex h-18 items-center justify-between transition-all duration-300`}>
                     {/* Logo */}
-                    <Link href="/" className="flex items-center select-none" onClick={() => setMenuOpen(false)}>
+                    <Link href="/" className="flex items-center justify-center select-none" onClick={() => setMenuOpen(false)}>
                         <img 
                             src="/GCSE Log Logo.svg" 
                             alt="GCSE Log" 
-                            className="h-10 drop-shadow-sm"
+                            className="block h-12 drop-shadow-sm translate-y-[2.5px] brightness-175 hover:brightness-200 transition-all duration-300"
                         />
                     </Link>
 
                     {/* Desktop Navigation */}
-                    <nav className="hidden md:flex items-center gap-8 text-sm font-medium text-white">
-                        <Link href="/" className="hover:text-purple-200 transition-colors">
+                    <nav className="hidden md:flex items-center gap-10 text-lg font-medium text-white">
+                        <Link href="/" className="hover:text-purple-300 transition-colors">
                             Home
                         </Link>
-                        <Link href="/subjects" className="hover:text-purple-200 transition-colors">
+                        <Link href="/subjects" className="hover:text-purple-300 transition-colors">
                             Browse
                         </Link>
-                        <Link href="/#about" className="hover:text-purple-200 transition-colors">
+                        <Link href="/#about" className="hover:text-purple-300 transition-colors">
                             About
                         </Link>
-                        <Link href="/opportunities" className="hover:text-purple-200 transition-colors">
+                        <Link href="/opportunities" className="hover:text-purple-300 transition-colors">
                             Opportunities
                         </Link>
                     </nav>
@@ -44,9 +65,9 @@ const Navbar = () => {
                     <div className="flex items-center gap-3">
                         <Link 
                             href="/subjects" 
-                            className="hidden sm:inline-flex items-center gap-2 rounded-xl bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 text-sm font-semibold transition-all duration-200"
+                            className="hidden sm:inline-flex items-center gap-2 rounded-xl border-b border-white/20 bg-white/5 hover:bg-purple-700 hover:border-purple-700 text-white px-4 py-2 text-base font-semibold transition-all duration-200"
                         >
-                            Get Started <ArrowRight size={16}/>
+                            Submit Resources <ArrowRight size={16}/>
                         </Link>
 
                         {/* Mobile menu button */}
@@ -107,4 +128,4 @@ const Navbar = () => {
     );
 };
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;
diff --git a/src/app/page.js b/src/app/page.js
index 5175303..693641a 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -450,13 +450,15 @@ function CallToAction() {
 export default function Home() {
   return (
     <div className="bg-slate-900 text-slate-300" style={{ fontFamily: 'DM Sans, sans-serif' }}>
-      <Navbar />
-      <Hero />
-      <Features />
-      <FeaturedResources />
-      <About />
-      <CallToAction />
-            <Footer />
+      <Navbar /> 
+        <main className={"pt-[72px]"}> {/*added padding of Navbar.height because fixed now*/}
+          <Hero /> 
+          <Features />
+          <FeaturedResources />
+          <About />
+          <CallToAction />
+                <Footer />
+        </main>
     </div>
   );
 }