diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b469d15..154484a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@splinetool/react-spline": "^2.2.6",
+        "@studio-freight/lenis": "^1.0.42",
         "@types/node": "20.5.9",
         "@types/react": "18.2.21",
         "@types/react-dom": "18.2.7",
@@ -18,7 +19,8 @@
         "clsx": "^2.1.1",
         "eslint-config-next": "13.4.19",
         "framer-motion": "^11.2.13",
-        "lucide-react": "^0.511.0",
+        "lenis": "^1.3.4",
+        "lucide-react": "^0.523.0",
         "next": "13.4.12",
         "next-emoji-rain": "^1.0.2",
         "postcss": "8.4.29",
@@ -1097,6 +1099,13 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "node_modules/@studio-freight/lenis": {
+      "version": "1.0.42",
+      "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.42.tgz",
+      "integrity": "sha512-HJAGf2DeM+BTvKzHv752z6Z7zy6bA643nZM7W88Ft9tnw2GsJSp6iJ+3cekjyMIWH+cloL2U9X82dKXgdU8kPg==",
+      "deprecated": "The '@studio-freight/lenis' package has been renamed to 'lenis'. Please update your dependencies: npm install lenis and visit the documentation: https://www.npmjs.com/package/lenis",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
@@ -3914,6 +3923,32 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/lenis": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.4.tgz",
+      "integrity": "sha512-WIGk8wiV2ABm/T7M+NC+tAV8fjzNJD1J4z11aZ3mTtx7WAZX/4QdCNhBO0g/TqXISA+/3hTbzrPC4FW1nhoNMQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "react": ">=17.0.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3990,9 +4025,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.511.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
-      "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==",
+      "version": "0.523.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.523.0.tgz",
+      "integrity": "sha512-rUjQoy7egZT9XYVXBK1je9ckBnNp7qzRZOhLQx5RcEp2dCGlXo+mv6vf7Am4LimEcFBJIIZzSGfgTqc9QCrPSw==",
       "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
diff --git a/frontend/package.json b/frontend/package.json
index 8a3d9a0..53b4b35 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@splinetool/react-spline": "^2.2.6",
+    "@studio-freight/lenis": "^1.0.42",
     "@types/node": "20.5.9",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
@@ -23,7 +24,8 @@
     "clsx": "^2.1.1",
     "eslint-config-next": "13.4.19",
     "framer-motion": "^11.2.13",
-    "lucide-react": "^0.511.0",
+    "lenis": "^1.3.4",
+    "lucide-react": "^0.523.0",
     "next": "13.4.12",
     "next-emoji-rain": "^1.0.2",
     "postcss": "8.4.29",
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 6c43a3b..0241403 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -6,24 +6,33 @@ import Terminal from './Terminal';
 
 const Navbar = () => {
   const [path, setPath] = useState<string[]>([]);
+  const [isScrolled, setIsScrolled] = useState(false);
+
   useEffect(() => {
     const pathSegments: string[] | undefined = window.location.pathname.split('/').filter(segment => segment);
     if (pathSegments === undefined) setPath([]);
     else setPath(pathSegments.map(segment => segment.toUpperCase()));
   }, []);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0);
+    };
+    
+    window.addEventListener('scroll', handleScroll);
+    return () =>window.removeEventListener('scroll', handleScroll);
+  }, []); 
+
   return (
-    <nav className="sticky top-0 flex justify-between items-center relative z-10 shadow-lg rounded-md bg-black/15 backdrop-blur-md xl:px-24 md:px-10 px-5 py-6">
-      <div>
-        <Link href="/">
-          <Image
-            src="/assets/csesoc_logo.svg"
-            alt="CSESoc Logo"
-            width={200}
-            height={200}
-            draggable={false}
-          />
-        </Link>
+    <nav className={`sticky top-0 flex justify-between items-center relative z-10 rounded-md bg-black/15 backdrop-blur-md xl:px-24 md:px-10 px-5 py-6 duration-500 ${isScrolled ? 'shadow-xl' : 'shadow-none'}`}>
+      <Link href="/">
+        <Image
+          src="/assets/csesoc_logo.svg"
+          alt="CSESoc Logo"
+          width={200}
+          height={200}
+          draggable={false}
+        />
         <p className="font-mono mt-3 font-bold">
           <span className="text-green-500">csesoc@unsw</span>
           <span>:</span>
@@ -32,7 +41,7 @@ const Navbar = () => {
           {/* The interactive terminal that allows changing pages using 'cd' */}
           <Terminal/>
         </p>
-      </div>
+      </Link>
       <div>
         <div className="md:flex xl:gap-18 lg:gap-10 md:gap-5 text-right font-bold hidden">
           <Link href="/about">
@@ -60,7 +69,7 @@ const Navbar = () => {
             />
           </a>
         </div>
-        <div className="md:hidden xl:hidden lg:hidden text-right font-bold block">
+        <div className="sm:hidden xl:hidden lg:hidden text-right font-bold block">
           <Hamburger />
         </div>
       </div>  
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index b5de74a..0ab855d 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -2,6 +2,25 @@ import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import 'next-emoji-rain/dist/index.css';
 
+import Lenis from '@studio-freight/lenis';
+import { useEffect } from 'react';
+
 export default function App({ Component, pageProps }: AppProps) {
+  
+  // Basic lenis setup
+  // Basically updates on every frame to stay synchronised with browser refresh rate
+  useEffect(() => {
+    const lenis = new Lenis();
+
+    function raf(time : number) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+
+    return () => lenis.destroy();
+  }, []);
+  
   return <Component {...pageProps} />;
 }
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index e75bbf1..74ef321 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -2,14 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-html, body {
-  scroll-behavior: smooth;
-}
-
 body {
   color: white;
   background: #000031;
   font-family: 'Raleway', sans-serif;
+  
 }
 
 @keyframes blink {