diff --git a/front-end/src/components/Centre.jsx b/front-end/src/components/Centre.jsx
index cacca6c..1ebe1b1 100644
--- a/front-end/src/components/Centre.jsx
+++ b/front-end/src/components/Centre.jsx
@@ -191,7 +191,7 @@ function Centre() {
         </div>
       </section>
 
-      <section className="relative py-16 overflow-hidden">
+      <section id="how-to-get-started" className="relative py-16 overflow-hidden">
         <div className="relative container mx-auto px-4">
           <div className="max-w-3xl mx-auto text-center">
             <h2
diff --git a/front-end/src/pages/About.jsx b/front-end/src/pages/About.jsx
index 841fb84..ba4a415 100644
--- a/front-end/src/pages/About.jsx
+++ b/front-end/src/pages/About.jsx
@@ -1,7 +1,11 @@
 import { useState, useEffect } from "react";
 import { Heart, Users, Sparkles, BookOpen, ArrowRight } from "lucide-react";
+
+import { Link } from "react-router-dom";
+
 import TidioChat from "../components/Tidio";
 
+
 const About = () => {
   const [isVisible, setIsVisible] = useState(false);
   const [activeTab, setActiveTab] = useState("mission");
@@ -222,10 +226,12 @@ const About = () => {
           <p className="text-xl mb-8 opacity-90">
             Join our community of writers and readers today.
           </p>
-          <button className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold flex items-center gap-2 mx-auto hover:bg-blue-50 transition-colors duration-300">
-            Get Started
-            <ArrowRight className="w-5 h-5" />
-          </button>
+          <Link to="/#how-to-get-started">
+            <button className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold flex items-center gap-2 mx-auto hover:bg-blue-50 transition-colors duration-300">
+              Get Started
+              <ArrowRight className="w-5 h-5" />
+            </button>
+          </Link>
         </div>
       </div>
     </div>