diff --git a/package-lock.json b/package-lock.json
index b8910313..17211f82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "@docusaurus/core": "3.4.0",
-        "@docusaurus/preset-classic": "3.4.0",
+        "@docusaurus/core": "^3.4.0",
+        "@docusaurus/preset-classic": "^3.4.0",
         "@mdx-js/react": "^3.0.0",
         "clsx": "^2.0.0",
         "lottie-react": "^2.4.0",
@@ -12562,6 +12562,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/search-insights": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.15.0.tgz",
+      "integrity": "sha512-ch2sPCUDD4sbPQdknVl9ALSi9H7VyoeVbsxznYz6QV55jJ8CI3EtwpO1i84keN4+hF5IeHWIeGvc08530JkVXQ==",
+      "peer": true
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -13523,6 +13529,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
diff --git a/package.json b/package.json
index de46c2d3..95d9d142 100644
--- a/package.json
+++ b/package.json
@@ -39,8 +39,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "3.4.0",
-    "@docusaurus/preset-classic": "3.4.0",
+    "@docusaurus/core": "^3.4.0",
+    "@docusaurus/preset-classic": "^3.4.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "lottie-react": "^2.4.0",
diff --git a/src/pages/index.js b/src/pages/index.js
index 563afb76..aa40284b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,3 +1,4 @@
+import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -10,7 +11,7 @@ import Preloader from '../components/Preloader/preloader';
 import CursorComponent from '../components/Cursor'
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
@@ -22,7 +23,7 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="/docs/day-01/introduction-to-cpp">
-           Start Your Challenge Today
+            Start Your Challenge Today
           </Link>
         </div>
       </div>
@@ -31,18 +32,52 @@ function HomepageHeader() {
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  useEffect(() => {
+    const handleScroll = () => {
+      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrolled = (winScroll / height) * 100;
+      document.getElementById('progressBar').style.width = `${scrolled}%`;
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    handleScroll(); // Initialize on load
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
     <Layout
       title={`Home`}
-      description="30 days of CPP programming challenge is a step-by-step guide to learn CPP programming language in 30 days. Master the fundamental concepts of CPP Programming easily.
-      <head />">
-      <CursorComponent/>
+
+      description="30 days of CPP programming challenge is a step-by-step guide to learn CPP programming language in 30 days. Master the fundamental concepts of CPP Programming easily."
+    >
+
       <HomepageHeader />
       <main>
         <HomepageFeatures />
       </main>
       <Preloader />
+      {/* Inline Styles and Progress Bar Element */}
+      <div>
+        <style>
+          {`
+            #progressBar {
+              position: fixed;
+              top: 0;
+              left: 0;
+              width: 0%;
+              height: 8px;
+              background-color: #2b9b7f;
+              z-index: 9999;
+              transition: width 0.1s ease-out;
+            }
+          `}
+        </style>
+        <div id="progressBar"></div>
+      </div>
     </Layout>
   );
 }