diff --git a/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx b/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx
index 458f6c7..a28a392 100644
--- a/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx
+++ b/app/(pages)/(index-page)/_components/FAQ/FAQ.tsx
@@ -123,7 +123,7 @@ export default function FAQ() {
               className={style.grass_3}
             />
           </div>
-          <div className={style.faq}>
+          <div id="faq" className={style.faq}>
             <Image
               src="/images/faq/grass_texture_4.svg"
               alt="grass texture"
diff --git a/app/(pages)/(index-page)/page.tsx b/app/(pages)/(index-page)/page.tsx
index 88a7238..63e6eba 100644
--- a/app/(pages)/(index-page)/page.tsx
+++ b/app/(pages)/(index-page)/page.tsx
@@ -18,12 +18,12 @@ export default function Home() {
         <SandCastle />
       </div>
 
-      <div id="donate">
+      <div id="underwater">
         <BigWave />
         <Underwater />
       </div>
 
-      <div id="faq">
+      <div id="donate">
         <FAQ />
       </div>
 
diff --git a/app/(pages)/_components/Navbar/Navbar.module.scss b/app/(pages)/_components/Navbar/Navbar.module.scss
index 894a864..de5a4a7 100644
--- a/app/(pages)/_components/Navbar/Navbar.module.scss
+++ b/app/(pages)/_components/Navbar/Navbar.module.scss
@@ -73,7 +73,7 @@
         font-size: 1.125rem;
         letter-spacing: 0.36px;
         line-height: 100%;
-        transition: all 0.5s;
+        transition: transform 0.3s, color 0.5s ease-out;
 
         &:hover {
             transform: translateY(-0.1rem);
@@ -113,7 +113,7 @@
 
 .items {
     align-self: baseline;
-    pointer-events: auto;
+    pointer-events: none;
 
     .mlh_banner {
         margin-right: 108px;
@@ -132,6 +132,7 @@
 
         .hamburger {
             margin: 32px 32px;
+            pointer-events: auto;
             transition: all 0.3s ease-in-out;
         
             &_line {
@@ -152,7 +153,6 @@
         
                 .hamburger_line {
                     background-color: var(--text-light) !important;
-                    transition-delay: 0.2s;
         
                     &:nth-child(1) {
                         transform: translateY(8px) rotate(45deg);
diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx
index 1eeb595..871c337 100644
--- a/app/(pages)/_components/Navbar/Navbar.tsx
+++ b/app/(pages)/_components/Navbar/Navbar.tsx
@@ -11,10 +11,10 @@ import Banner from '/public/Navbar/mlh-banner-2025.svg';
 import styles from './Navbar.module.scss';
 
 interface NavLink {
+  ids: string[];
   body: React.ReactNode;
   page: string;
   path: string;
-  id: string;
   color: string;
 }
 
@@ -28,34 +28,34 @@ interface Section {
 
 const links = [
   {
+    ids: ['home', 'underwater'],
     body: 'HOME',
     page: '/',
     path: '/?section=home', // remove section if scroll issue fixed
-    id: 'home',
   },
   {
+    ids: ['donate'],
     body: 'DONATE',
     page: '/',
     path: '/?section=donate',
-    id: 'donate',
   },
   {
+    ids: ['faq'],
     body: 'FAQ',
     page: '/',
     path: '/?section=faq',
-    id: 'faq',
   },
   {
+    ids: ['sponsors'],
     body: 'SPONSORS',
     page: '/',
     path: '/?section=sponsors',
-    id: 'sponsors',
   },
   {
+    ids: ['about'],
     body: 'ABOUT',
     page: '/about-us',
     path: '/about-us?section=about', // remove section if scroll issue fixed
-    id: 'about',
   },
 ] as NavLink[];
 
@@ -68,12 +68,19 @@ const sections = [
     background: 'rgba(255, 255, 255, 0.50)',
   },
   {
-    id: 'donate',
+    id: 'underwater',
     page: '/',
     baseColor: '#FFFFFF',
     activeColor: '#FFC53D',
     background: 'rgba(136, 136, 136, 0.50)',
   },
+  {
+    id: 'donate',
+    page: '/',
+    baseColor: '#FFFFFF',
+    activeColor: '#AFD157',
+    background: 'rgba(136, 136, 136, 0.50)',
+  },
   {
     id: 'faq',
     page: '/',
@@ -96,21 +103,7 @@ const sections = [
     background: 'rgba(255, 255, 255, 0.50)',
   },
   {
-    id: 'values',
-    page: '/about-us',
-    baseColor: '#FFFFFF',
-    activeColor: '#005271',
-    background: 'rgba(136, 136, 136, 0.50)',
-  },
-  {
-    id: 'team',
-    page: '/about-us',
-    baseColor: '#FFFFFF',
-    activeColor: '#005271',
-    background: 'rgba(136, 136, 136, 0.50)',
-  },
-  {
-    id: 'recap',
+    id: 'about-page',
     page: '/about-us',
     baseColor: '#FFFFFF',
     activeColor: '#005271',
@@ -141,14 +134,18 @@ export default function Navbar() {
           if (!sectionContainer) {
             return { id: '', sectionStart: 0, sectionEnd: 0 };
           }
-          const { offsetTop, offsetHeight } = sectionContainer;
+          const { offsetHeight } = sectionContainer;
+          const rect = sectionContainer.getBoundingClientRect();
           return {
             id: section.id,
-            sectionStart: offsetTop,
-            sectionEnd: offsetTop + offsetHeight,
+            sectionStart: rect.top + window.scrollY,
+            sectionEnd: rect.top + window.scrollY + offsetHeight,
           };
         })
-        .sort((a, b) => a.sectionStart - b.sectionStart);
+        .sort((a, b) => a.sectionStart - b.sectionStart)
+        .filter(
+          (section) => section.sectionStart !== 0 || section.sectionEnd !== 0
+        );
 
       let i = pageSections.length - 1;
       for (i; i >= 0; i--) {
@@ -211,9 +208,10 @@ export default function Navbar() {
     const currentSection = sections.find(
       (section) => activeSection === section.id
     );
-    if (!currentSection) return 'var(--text-medium)';
+    if (!currentSection) return 'var(--text-light)';
 
-    if (activeLink === link.id) return currentSection.activeColor;
+    if (link.ids.find((id) => activeLink === id))
+      return currentSection.activeColor;
     return currentSection.baseColor;
   };
 
@@ -230,12 +228,12 @@ export default function Navbar() {
           style={{
             background:
               sections.find((section) => activeSection === section.id)
-                ?.background ?? 'var(--text-light)',
+                ?.background ?? 'rgba(136, 136, 136, 0.50)',
           }}
         >
           {links.map((link) => (
             <Link
-              className={`${styles.link} ${styles[link.id]} ${activeLink === link.id ? styles.active : null}`}
+              className={`${styles.link} ${link.ids.find((id) => activeLink === id) ? styles.active : null}`}
               style={{
                 color: getLinkColor(link),
               }}
diff --git a/app/(pages)/about-us/page.tsx b/app/(pages)/about-us/page.tsx
index ceffb34..13fa170 100644
--- a/app/(pages)/about-us/page.tsx
+++ b/app/(pages)/about-us/page.tsx
@@ -12,15 +12,9 @@ export default function AboutUs() {
         <Hero />
       </div>
 
-      <div id="values">
+      <div id="about-page">
         <Values />
-      </div>
-
-      <div id="team">
         <OurTeam />
-      </div>
-
-      <div id="recap">
         <CloudBackground>
           <CelebrateWrapper>
             <Recap />