diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index 97e2743..b2e933e 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -20,19 +20,19 @@ export default function Home() {
       <section id="home-hero">
         <HomeHero />
       </section>
-      <section id="">
+      <section id="about">
         <StackSectionPreview />
       </section>
-      <section id="world-map">
+      <section id="network">
         <WorldMap />
       </section>
-      <section id="steps">
+      <section id="deploy">
         <Steps />
       </section>
-      <section id="companies">
+      <section id="llms">
         <Companies />
       </section>
-      <section id="use-cases">
+      <section id="features">
         <UseCases />
       </section>
       <section id="get-started">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6e6ef92..159df5e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import { type Metadata } from 'next'
 import { Mulish } from 'next/font/google'
 import clsx from 'clsx'
+import SmoothScrollProvider from '@/components/SmoothScrollProvider'
 
 import '@/styles/tailwind.css'
 
@@ -26,7 +27,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className={clsx('antialiased', mulish.variable)}>
-      <body className="bg-black text-white">{children}</body>
+      <body className="bg-black text-white"><SmoothScrollProvider>{children}</SmoothScrollProvider></body>
     </html>
   )
 }
diff --git a/src/components/NavLinks.tsx b/src/components/NavLinks.tsx
index b0cc82f..cd50bcf 100644
--- a/src/components/NavLinks.tsx
+++ b/src/components/NavLinks.tsx
@@ -9,11 +9,11 @@ export function NavLinks() {
   let timeoutRef = useRef<number | null>(null)
 
   return [
-    ['About', '/#stack-section'],
-    ['Network', '/#world-map'],
-    ['Deploy', '/#steps'],
-    ['LLMs', '/#companies'],
-    ['Features', '/#use-cases'],
+    ['About', '/#about'],
+    ['Network', '/#network'],
+    ['Deploy', '/#deploy'],
+    ['LLMs', '/#llms'],
+    ['Features', '/#features'],
     ['Get Started', '/#get-started'],
   ].map(([label, href], index) => (
     <Link
diff --git a/src/components/SmoothScrollProvider.tsx b/src/components/SmoothScrollProvider.tsx
new file mode 100644
index 0000000..0aaef7b
--- /dev/null
+++ b/src/components/SmoothScrollProvider.tsx
@@ -0,0 +1,8 @@
+'use client'
+
+import { useSmoothScroll } from '@/hooks/use-smooth-scroll';
+
+export default function SmoothScrollProvider({ children }: { children: React.ReactNode }) {
+  useSmoothScroll();
+  return <>{children}</>;
+}
diff --git a/src/hooks/use-smooth-scroll.ts b/src/hooks/use-smooth-scroll.ts
new file mode 100644
index 0000000..6cb5881
--- /dev/null
+++ b/src/hooks/use-smooth-scroll.ts
@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+export const useSmoothScroll = () => {
+  useEffect(() => {
+    const handleLinkClick = (e: MouseEvent) => {
+      const target = e.target as HTMLAnchorElement;
+      const href = target.getAttribute('href');
+
+      if (href && href.startsWith('#')) {
+        e.preventDefault();
+        const targetId = href.substring(1);
+        const targetElement = document.getElementById(targetId);
+
+        if (targetElement) {
+          targetElement.scrollIntoView({
+            behavior: 'smooth',
+          });
+        }
+      }
+    };
+
+    document.addEventListener('click', handleLinkClick);
+
+    return () => {
+      document.removeEventListener('click', handleLinkClick);
+    };
+  }, []);
+};
