diff --git a/src/app/globals.css b/src/app/globals.css
index 23d1cca..18ce8e5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -23,7 +23,7 @@
   --border: oklch(0.2 0 0 / 10%);
   /* Default light theme colors */
   --background-funding: rgb(0, 109, 102);
-  --navbar-bg: rgba(255, 255, 255, 0.95);
+  --navbar-bg: rgba(255, 255, 255, 0.15);
   --navbar-border: #E1E5EB;
   --link-color: #1E293B;
   --secondary-link-color: #4B5563;
@@ -67,6 +67,9 @@
 
 [data-theme='light'] {
   --funding-text: #ebebed;
+  a:hover {
+  color:var(--accent-2); /* Remove hover color for light theme */
+  }
 }
 
 [data-theme='dark'] {
@@ -90,7 +93,7 @@
   
   /* Dark theme custom colors */
   --background-funding: rgb(32, 33, 38);
-  --navbar-bg: rgba(22, 22, 24, 0.95);
+  --navbar-bg: rgba(22, 22, 24, 0.15);
   --navbar-border:var(--border);
   --link-color: #e2e8f0;
   --secondary-link-color: #c4c6ca;
@@ -146,8 +149,9 @@ a {
   transition: color 0.3s ease;
 }
 
+ /* Use accent-1 color for all hover links */
 a:hover {
-  color: var(--accent-1); /* Use accent-1 color for all hover links */
+  color: var(--accent-3);
 }
 
 /* Paragraph Styling */
diff --git a/src/app/page.mdx b/src/app/page.mdx
index ba77624..2b9ba95 100644
--- a/src/app/page.mdx
+++ b/src/app/page.mdx
@@ -31,15 +31,15 @@ export default function Landing() {
       {/* Hero Content */}
       <div className="relative z-10 flex flex-col items-center text-center max-w-4xl px-6 pt-24">
         {/* Small badge */}
-       <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-gray-600/20 px-4 py-1 text-sm text-white hover:bg-gray-900/30 transition">
-        <Link href="/science/weathergenerator" className="flex items-center gap-2">
-          <WiStars size={18} className="text-white-300" />
-          <span>New: WeatherGenerator Project</span>
-        </Link>
-      </div>
+        <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-white/5 px-4 py-1 text-sm hover:bg-black/80 dark:bg-black/20 dark:hover:bg-transparent/20 transition-colors">
+          <Link href="/science/weathergenerator" className="flex items-center gap-2">
+            <WiStars size={24} />
+            New: WeatherGenerator Project
+          </Link>
+        </div>
 
         {/* Main headline */}
-        <h1 className="text-4xl md:text-6xl font-bold leading-tight text-white">
+        <h1 className="text-4xl md:text-6xl font-bold leading-tight">
           Forecasting Earth’s Future with AI
         </h1>
 
@@ -49,22 +49,21 @@ export default function Landing() {
           we help predict the future of Earth’s surface.
         </p>
 
-        {/* CTA */}
         <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
           <Button
             size="lg"
             className="bg-gradient-to-r from-blue-600 to-teal-600 hover:from-blue-700 hover:to-teal-700 text-white px-8"
             asChild
           >
-            <a href="/science">Explore Our Research</a>
+            <Link href="/science" className="cursor-pointer">Explore Our Research</Link>
           </Button>
           <Button
             size="lg"
             variant="outline"
-            className="border-2 border-gray-300 text-gray-200 bg-black hover:bg-gray-200/10"
+            className="border-2 border-gray-300 text-gray-200 bg-black hover:bg-gray-900/80"
             asChild
           >
-            <Link href="/resources/datasets">Access Datasets</Link>
+            <Link href="/resources/datasets"><span>Access Datasets</span></Link>
           </Button>
         </div>
       </div>
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index 3940dce..5dc6beb 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import LogoProject from './Logo'
 import ThemeToggle from '@/components/ThemeToggle'
 import Socials from '@/components/Socials'
@@ -11,55 +11,92 @@ import { socialLinks } from '@/utils/socials'
 
 export default function Menu() {
   const [isOpen, setIsOpen] = useState(false)
+
+  // Enhanced scroll lock effect
+  useEffect(() => {
+    if (isOpen) {
+      // Save current scroll position
+      const scrollY = window.scrollY
+      // Add styles to prevent background scroll while maintaining position
+      document.body.style.position = 'fixed'
+      document.body.style.top = `-${scrollY}px`
+      document.body.style.width = '100%'
+    } else {
+      // Restore scroll position when menu closes
+      const scrollY = document.body.style.top
+      document.body.style.position = ''
+      document.body.style.top = ''
+      document.body.style.width = ''
+      window.scrollTo(0, parseInt(scrollY || '0') * -1)
+    }
+
+    return () => {
+      // Cleanup styles on unmount
+      document.body.style.position = ''
+      document.body.style.top = ''
+      document.body.style.width = ''
+    }
+  }, [isOpen])
+
   const handleLinkClick = () => {
       setIsOpen(false)
     }
 
   return (
-    <nav className="fixed top-0 left-0 right-0 bg-[var(--navbar-bg)] border-b border-[var(--navbar-border)] z-50">
-      <div className="max-w-[1440px] mx-auto px-2 md:px-8 py-1">
-        <div className="flex justify-between h-12">
-          <div className="flex">
-            <LogoProject icon="/logo.png" title={navigation[0]?.name || ''} />
-            <div className="hidden md:ml-6 md:block py-1">
-              <DesktopMenu items={navigation} />
+    <nav className="fixed top-0 left-0 right-0 z-50">
+      {/* Blur backdrop as pseudo-element */}
+      <div className="absolute inset-0 bg-[var(--navbar-bg)]">
+        <div className="absolute inset-0 backdrop-blur-[10px] backdrop-saturate-[180%]" />
+      </div>
+      
+      {/* Main content with higher z-index */}
+      <div className="relative z-10">
+        <div className="max-w-[1440px] mx-auto px-2 md:px-8 py-1">
+          <div className="flex justify-between h-12">
+            <div className="flex">
+              <LogoProject icon="/logo.png" title={navigation[0]?.name || ''} />
+              <div className="hidden md:ml-6 md:block py-1">
+                <DesktopMenu items={navigation} />
+              </div>
             </div>
-          </div>
-          <div className="hidden md:flex items-center space-x-4">
-            <div className="hidden lg:block">
-              <Socials socialLinks={socialLinks} />
+            <div className="hidden md:flex items-center space-x-4">
+              <div className="hidden lg:block">
+                <Socials socialLinks={socialLinks} />
+              </div>
+              <ThemeToggle />
+            </div>
+            {/* Mobile Menu Button */}
+            <div className="md:hidden flex items-center">
+              <ThemeToggle />
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="inline-flex items-center justify-center p-2 rounded-md text-[var(--secondary-link-color)] hover:text-[var(--link-hover)] hover:bg-[var(--toggle-hover)]"
+              >
+                <span className="sr-only">Open main menu</span>
+                {!isOpen ? (
+                  <svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                  </svg>
+                ) : (
+                  <svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                )}
+              </button>
             </div>
-            <ThemeToggle />
-          </div>
-          {/* Mobile Menu Button */}
-          <div className="md:hidden flex items-center">
-            <ThemeToggle />
-            <button
-              onClick={() => setIsOpen(!isOpen)}
-              className="inline-flex items-center justify-center p-2 rounded-md text-[var(--secondary-link-color)] hover:text-[var(--link-hover)] hover:bg-[var(--toggle-hover)]"
-            >
-              <span className="sr-only">Open main menu</span>
-              {!isOpen ? (
-                <svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-                </svg>
-              ) : (
-                <svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              )}
-            </button>
           </div>
         </div>
       </div>
 
-      {/* Mobile menu */}
+      {/* Mobile menu with scrolling */}
       {isOpen && (
-        <div className="md:hidden bg-[var(--card)] fixed inset-0 top-12 overflow-y-auto">
-          <div className="pt-2 px-8 pb-3 space-y-1">
+        <div className="md:hidden bg-[var(--card)] fixed inset-0 top-12 z-40 overflow-y-auto overscroll-contain">
+          <div className="pt-2 px-8 pb-3 space-y-1 min-h-[calc(100vh-3rem)]">
             <MobileMenu items={navigation} onLinkClick={handleLinkClick} />
+            <div className="pt-4">
+              <Socials socialLinks={socialLinks} />
+            </div>
           </div>
-          <Socials socialLinks={socialLinks} />
         </div>
       )}
     </nav>