diff --git a/package-lock.json b/package-lock.json
index b9f48bf..1fa2cff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@tailwindcss/vite": "^4.1.13",
         "axios": "^1.12.2",
-        "framer-motion": "^12.23.22",
+        "framer-motion": "^12.23.24",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-icons": "^5.5.0",
@@ -61,7 +61,6 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -1611,7 +1610,6 @@
       "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1653,7 +1651,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1776,7 +1773,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -2130,7 +2126,6 @@
       "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2429,12 +2424,12 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.23.22",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.22.tgz",
-      "integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA==",
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.23.21",
+        "motion-dom": "^12.23.23",
         "motion-utils": "^12.23.6",
         "tslib": "^2.4.0"
       },
@@ -3135,9 +3130,9 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.23.21",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.21.tgz",
-      "integrity": "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ==",
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
       "license": "MIT",
       "dependencies": {
         "motion-utils": "^12.23.6"
@@ -3282,7 +3277,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3349,7 +3343,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
       "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3359,7 +3352,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
       "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -3694,7 +3686,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.6.tgz",
       "integrity": "sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
diff --git a/package.json b/package.json
index e11b239..4bae95a 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.13",
     "axios": "^1.12.2",
-    "framer-motion": "^12.23.22",
+    "framer-motion": "^12.23.24",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-icons": "^5.5.0",
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 8ac0423..f5ffd60 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -113,7 +113,7 @@ const Footer = () => {
           borderTopColor: "rgba(160, 160, 255, 0.2)",
         }}
       >
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-4">
+        <div id="contact" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-4">
           {/* Main Footer Content */}
           <div className="mb-8">
             {/* brand section with social links */}
diff --git a/src/components/TopBar.jsx b/src/components/TopBar.jsx
index 1ce6a4e..f3a40b2 100644
--- a/src/components/TopBar.jsx
+++ b/src/components/TopBar.jsx
@@ -9,15 +9,19 @@ const TopBar = () => {
 
   const handleLogout = () => {
     clearUserProfile();
-    setMenuOpen(false); // close menu after logout
-    // Add any additional logout logic here if needed
+    setMenuOpen(false);
+  };
+
+  const scrollToSection = (id) => {
+    const section = document.getElementById(id);
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth" });
+      setMenuOpen(false);
+    }
   };
 
   const handleLogoClick = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
+    window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
   return (
@@ -31,14 +35,17 @@ const TopBar = () => {
     >
       <div className="max-w-7xl mx-auto flex justify-between items-center px-4 sm:px-6 lg:px-8 h-16">
         {/* Brand */}
-        <Link to="/" className="flex items-center gap-2" onClick={handleLogoClick}>
+        <button
+          onClick={handleLogoClick}
+          className="flex items-center gap-2 cursor-pointer"
+        >
           <motion.h1
             whileHover={{ scale: 1.05 }}
             className="font-press-start text-lg sm:text-xl text-[rgb(160,160,255)] tracking-tight"
           >
             HackerBlog
           </motion.h1>
-        </Link>
+        </button>
 
         {/* Hamburger Button */}
         <button
@@ -50,6 +57,16 @@ const TopBar = () => {
 
         {/* Desktop Nav */}
         <nav className="hidden sm:flex items-center gap-4">
+          {["features", "about", "community", "contact"].map((item) => (
+            <button
+              key={item}
+              onClick={() => scrollToSection(item)}
+              className="font-google-code px-4 py-2 rounded-lg border border-transparent text-slate-300 hover:border-[rgb(160,160,255)] hover:text-[rgb(160,160,255)] hover:bg-[rgba(160,160,255,0.1)] transition-all duration-300"
+            >
+              {item.charAt(0).toUpperCase() + item.slice(1)}
+            </button>
+          ))}
+
           {userProfile ? (
             <>
               <span className="font-google-code text-sm text-slate-300">
@@ -86,6 +103,16 @@ const TopBar = () => {
             menuOpen ? "flex" : "hidden"
           } sm:hidden flex-col fixed top-16 right-0 w-56 h-[calc(100vh-60px)] bg-[rgb(28,28,64)] border-l border-[rgba(160,160,255,0.1)] border-b p-4 gap-4 z-40`}
         >
+          {["features", "about", "community", "contact"].map((item) => (
+            <button
+              key={item}
+              onClick={() => scrollToSection(item)}
+              className="font-google-code px-4 py-2 rounded-lg border border-transparent text-slate-300 hover:border-[rgb(160,160,255)] hover:text-[rgb(160,160,255)] hover:bg-[rgba(160,160,255,0.1)] transition-all duration-300"
+            >
+              {item.charAt(0).toUpperCase() + item.slice(1)}
+            </button>
+          ))}
+
           {userProfile ? (
             <div className="flex flex-col items-start gap-3">
               <span className="font-google-code text-sm text-slate-300">
@@ -122,4 +149,5 @@ const TopBar = () => {
   );
 };
 
-export default TopBar;
+export
+  default TopBar;
\ No newline at end of file
diff --git a/src/pages/AboutPage.jsx b/src/pages/AboutPage.jsx
index 53ce5fe..3e3506b 100644
--- a/src/pages/AboutPage.jsx
+++ b/src/pages/AboutPage.jsx
@@ -62,7 +62,7 @@ const AboutPage = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-[rgb(20,20,48)] via-[rgb(28,28,64)] to-[rgb(15,15,35)] text-white">
+    <div id="about" className="min-h-screen bg-gradient-to-b from-[rgb(20,20,48)] via-[rgb(28,28,64)] to-[rgb(15,15,35)] text-white">
       {/* Hero Section */}
       <section className="px-4 sm:px-6 lg:px-8 py-24 md:py-15 text-center bg-gradient-to-b from-[rgba(160,160,255,0.1)] to-transparent">
         <motion.div
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index 94cf32b..787fa40 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -4,20 +4,33 @@ import Terminal from "../components/ui/Terminal";
 import Community from "../components/ui/Community";
 import Footer from "../components/Footer";
 
-// modularized the code for readablity as requested in the issue
 const LandingPage = () => {
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-white">
-      {/* hero section */}
-      <Hero />
-      {/* about section */}
-      <About />
-      {/* hacktoberfest terminal section */}
-      <Terminal />
-      {/* community section */}
-      <Community />
-      {/* future footer component will be added here */}
-      <Footer/>
+      {/* Hero section */}
+      <section id="hero">
+        <Hero />
+      </section>
+
+      {/* About section */}
+      <section id="about">
+        <About />
+      </section>
+
+      {/* Features / Terminal section */}
+      <section id="features">
+        <Terminal />
+      </section>
+
+      {/* Community section */}
+      <section id="community">
+        <Community />
+      </section>
+
+      {/* Footer */}
+     <section>
+      <Footer  id="contact"/>
+     </section>
     </div>
   );
 };