diff --git a/src/pages/nodes/NodeHero.tsx b/src/pages/nodes/NodeHero.tsx
index 4c9c697..dc3cd02 100644
--- a/src/pages/nodes/NodeHero.tsx
+++ b/src/pages/nodes/NodeHero.tsx
@@ -28,7 +28,16 @@ export function NodeHero() {
               The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
             </P>
             <div className="mt-10 flex items-center gap-x-6">
-              <Button to="#node-getting-started" as="a" variant="solid" color="cyan">
+              <Button
+                variant="solid"
+                color="cyan"
+                onClick={() => {
+                  const el = document.getElementById('node-how-it-works')
+                  if (el) {
+                    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+                  }
+                }}
+              >
                 How it works
               </Button>
               <Button to="#node-architecture" as="a" variant="outline">
diff --git a/src/pages/nodes/NodeSteps.tsx b/src/pages/nodes/NodeSteps.tsx
index 922ee3c..cb6c05f 100644
--- a/src/pages/nodes/NodeSteps.tsx
+++ b/src/pages/nodes/NodeSteps.tsx
@@ -37,7 +37,7 @@ const steps = [
 
 export function NodeSteps() {
   return (
-    <section className="w-full max-w-8xl mx-auto bg-transparent">
+    <section id="node-how-it-works" className="w-full max-w-8xl mx-auto bg-transparent">
 
       {/* Header spacing + borders */}
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />