diff --git a/src/Header/Nav/index.tsx b/src/Header/Nav/index.tsx
index 8ebbd88..a7576a7 100644
--- a/src/Header/Nav/index.tsx
+++ b/src/Header/Nav/index.tsx
@@ -7,12 +7,30 @@ import { CMSLink } from '@/components/Link'
 export const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {
   const navItems = data?.navItems || []
 
+  // Optional: Function to handle smooth scroll override if needed
+  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
+    if (href.startsWith('#')) {
+      const element = document.querySelector(href)
+      if (element) {
+        e.preventDefault()
+        element.scrollIntoView({ behavior: 'smooth' })
+        // Update URL hash without jumping
+        history.pushState(null, '', href)
+      }
+    }
+  }
+
   return (
     <nav className="flex flex-col md:flex-row gap-1 md:items-center">
       {navItems.map(({ link }, i) => (
         <CMSLink
           key={i}
           {...link}
+          onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+            if (link.url?.startsWith('#')) {
+              handleNavClick(e, link.url)
+            }
+          }}
           appearance="link"
           className="px-4 py-2 rounded-xl text-sm text-foreground/60 hover:text-foreground hover:bg-foreground/10 transition-all"
         />
diff --git a/src/app/(frontend)/globals.css b/src/app/(frontend)/globals.css
index 33b65cc..b90f3c2 100644
--- a/src/app/(frontend)/globals.css
+++ b/src/app/(frontend)/globals.css
@@ -241,4 +241,12 @@ html[data-theme='light'] {
 /* Add this to your global CSS file */
 .column-with-connector:last-of-type::after {
   content: none;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+[id] {
+  scroll-margin-top: 5rem; /* Adjust this to match your header height */
 }
\ No newline at end of file