diff --git a/src/components/FeaturedItems/FeaturedItem.astro b/src/components/FeaturedItems/FeaturedItem.astro
index e4afd2332..d238ebacc 100644
--- a/src/components/FeaturedItems/FeaturedItem.astro
+++ b/src/components/FeaturedItems/FeaturedItem.astro
@@ -13,14 +13,14 @@ const { isUpcoming = false, isNew = false, text, url } = Astro.props;
 
 <a
   class:list={[
-    'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100',
+    'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100 overflow-hidden',
     {
       'opacity-50': isUpcoming,
     },
   ]}
   href={url}
 >
-  <span class='text-slate-400'>
+  <span class='text-slate-400 relative z-20'>
     {text}
   </span>
 
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index 845c8ad1c..a87b1d361 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -5,7 +5,11 @@ import AccountDropdown from './AccountDropdown.astro';
 
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
   <nav class='container flex items-center justify-between'>
-    <a class='flex items-center text-lg font-medium text-white' href='/' aria-label="roadmap.sh">
+    <a
+      class='flex items-center text-lg font-medium text-white'
+      href='/'
+      aria-label='roadmap.sh'
+    >
       <Icon icon='logo' />
     </a>
 
@@ -26,9 +30,12 @@ import AccountDropdown from './AccountDropdown.astro';
         <a href='/videos' class='text-gray-400 hover:text-white'>Videos</a>
       </li>
       <li>
-        <kbd data-command-menu class="hidden sm:flex items-center text-gray-400 border border-gray-800 rounded-md px-2.5 py-1 text-sm hover:bg-gray-800 hover:cursor-pointer">
-           <Icon icon='search' class='h-3 w-3 mr-2' />
-          <kbd class='font-sans mr-1'>⌘</kbd><kbd class='font-sans'>K</kbd>
+        <kbd
+          data-command-menu
+          class='hidden items-center rounded-md border border-gray-800 px-2.5 py-1 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 sm:flex'
+        >
+          <Icon icon='search' class='mr-2 h-3 w-3' />
+          <kbd class='mr-1 font-sans'>⌘</kbd><kbd class='font-sans'>K</kbd>
         </kbd>
       </li>
     </ul>
@@ -97,10 +104,7 @@ import AccountDropdown from './AccountDropdown.astro';
 
         <!-- Links for logged in users -->
         <li data-auth-required class='hidden'>
-          <a
-            href='/account'
-            class='text-xl hover:text-blue-300 md:text-lg'
-          >
+          <a href='/account' class='text-xl hover:text-blue-300 md:text-lg'>
             Account
           </a>
         </li>
diff --git a/src/data/roadmaps/aspnet-core/content/100-basics-of-csharp/100-csharp.md b/src/data/roadmaps/aspnet-core/content/100-basics-of-csharp/100-csharp.md
index 75e74b9bb..30cbe3889 100644
--- a/src/data/roadmaps/aspnet-core/content/100-basics-of-csharp/100-csharp.md
+++ b/src/data/roadmaps/aspnet-core/content/100-basics-of-csharp/100-csharp.md
@@ -6,3 +6,4 @@ Visit the following resources to learn more:
 
 - [C# official website?](https://learn.microsoft.com/en-us/dotnet/csharp//)
 - [The Beginners Guide to C#](https://www.w3schools.com/CS/index.php)
+- [C# Tutorial](https://www.w3schools.com/cs/index.php)
\ No newline at end of file
diff --git a/src/data/roadmaps/backend/content/106-relational-databases/101-mysql.md b/src/data/roadmaps/backend/content/106-relational-databases/101-mysql.md
index 5ba46880e..86e7f4746 100644
--- a/src/data/roadmaps/backend/content/106-relational-databases/101-mysql.md
+++ b/src/data/roadmaps/backend/content/106-relational-databases/101-mysql.md
@@ -7,4 +7,5 @@ Visit the following resources to learn more:
 - [MySQL website](https://www.mysql.com/)
 - [W3Schools - MySQL tutorial ](https://www.w3schools.com/mySQl/default.asp)
 - [MySQL tutorial for beginners](https://www.youtube.com/watch?v=7S_tz1z_5bA)
-- [MySQL for Developers](https://planetscale.com/courses/mysql-for-developers/introduction/course-introduction)
\ No newline at end of file
+- [MySQL for Developers](https://planetscale.com/courses/mysql-for-developers/introduction/course-introduction)
+- [MySQL Tutorial](https://www.mysqltutorial.org/)
\ No newline at end of file
diff --git a/src/data/roadmaps/computer-science/content/101-pick-a-language/100-c-plus-plus.md b/src/data/roadmaps/computer-science/content/101-pick-a-language/100-c-plus-plus.md
index 6089a871f..023628d09 100644
--- a/src/data/roadmaps/computer-science/content/101-pick-a-language/100-c-plus-plus.md
+++ b/src/data/roadmaps/computer-science/content/101-pick-a-language/100-c-plus-plus.md
@@ -6,4 +6,5 @@ Visit the following resources to learn more:
 
 - [Learn Cpp](https://learncpp.com/)
 - [C++ Reference](https://en.cppreference.com/)
-- [C++ TutorialsPoint](https://www.tutorialspoint.com/cplusplus/index.htm)
\ No newline at end of file
+- [C++ TutorialsPoint](https://www.tutorialspoint.com/cplusplus/index.htm)
+- [W3Schools C++](https://www.w3schools.com/cpp/default.asp)
\ No newline at end of file
diff --git a/src/data/roadmaps/cpp/content/105-pointers-and-references/smart-pointers/100-weak-ptr.md b/src/data/roadmaps/cpp/content/105-pointers-and-references/smart-pointers/100-weak-ptr.md
index 040448358..160bbb341 100644
--- a/src/data/roadmaps/cpp/content/105-pointers-and-references/smart-pointers/100-weak-ptr.md
+++ b/src/data/roadmaps/cpp/content/105-pointers-and-references/smart-pointers/100-weak-ptr.md
@@ -45,4 +45,6 @@ int main() {
 }
 ```
 
-In this example, we create a `shared_ptr` named `shared` that manages a `MyClass` object. By assigning it to a `weak_ptr` named `weak`, we store a non-owning reference to the object. Inside the inner scope, we create a new `shared_ptr` named `sharedFromWeak` using `weak.lock()` to safely use the object. After the inner scope, the `MyClass` object is destroyed since `shared` goes out of scope, and any further attempt to create a `shared_ptr` from `weak` will fail as the object is already destroyed.
\ No newline at end of file
+In this example, we create a `shared_ptr` named `shared` that manages a `MyClass` object. By assigning it to a `weak_ptr` named `weak`, we store a non-owning reference to the object. Inside the inner scope, we create a new `shared_ptr` named `sharedFromWeak` using `weak.lock()` to safely use the object. After the inner scope, the `MyClass` object is destroyed since `shared` goes out of scope, and any further attempt to create a `shared_ptr` from `weak` will fail as the object is already destroyed.
+
+- [CPP Reference](https://en.cppreference.com/w/cpp/memory/weak_ptr)
\ No newline at end of file
diff --git a/src/data/roadmaps/cyber-security/content/100-basic-it-skills/102-os-independent-troubleshooting.md b/src/data/roadmaps/cyber-security/content/100-basic-it-skills/102-os-independent-troubleshooting.md
index f65cff9fe..afd872118 100644
--- a/src/data/roadmaps/cyber-security/content/100-basic-it-skills/102-os-independent-troubleshooting.md
+++ b/src/data/roadmaps/cyber-security/content/100-basic-it-skills/102-os-independent-troubleshooting.md
@@ -41,3 +41,6 @@ Logs are records of system events, application behavior, and user activity, whic
 - **Leverage log-analysis tools**: Utilize specialized tools or scripts to help parse, filter, and analyze large or complex log files.
 
 In conclusion, developing OS-independent troubleshooting skills allows you to effectively diagnose and resolve issues on any system. By following a structured approach, understanding common symptoms, and utilizing the appropriate tools, you can minimize downtime and maintain the security and efficiency of your organization's IT systems.
+
+- [How to identify 9 signs of Operating System.](https://bro4u.com/blog/how-to-identify-9-signs-of-operating-system)
+- [Trouble shooting guide](https://cdnsm5-ss6.sharpschool.com/userfiles/servers/server_20856499/file/teacher%20pages/lindsay%20dolezal/it%20essentials/5.6.pdf)
\ No newline at end of file
diff --git a/src/data/roadmaps/cyber-security/content/100-basic-it-skills/index.md b/src/data/roadmaps/cyber-security/content/100-basic-it-skills/index.md
index 43e88fc50..e7291078a 100644
--- a/src/data/roadmaps/cyber-security/content/100-basic-it-skills/index.md
+++ b/src/data/roadmaps/cyber-security/content/100-basic-it-skills/index.md
@@ -64,3 +64,5 @@ As the digital world is constantly evolving, so too are cyber threats. Therefore
 - Regularly backing up data
 
 By honing these basic IT skills, you will be better prepared to navigate and protect your digital life, as well as making the most of the technology at your fingertips.
+
+- [IT skills Training for beginners | Complete Course](https://youtu.be/on6dsip5yw0)
\ No newline at end of file
diff --git a/src/data/roadmaps/cyber-security/content/103-security-skills-and-knowledge/124-forensics.md b/src/data/roadmaps/cyber-security/content/103-security-skills-and-knowledge/124-forensics.md
index a20b81c4d..145df2b0b 100644
--- a/src/data/roadmaps/cyber-security/content/103-security-skills-and-knowledge/124-forensics.md
+++ b/src/data/roadmaps/cyber-security/content/103-security-skills-and-knowledge/124-forensics.md
@@ -18,3 +18,5 @@ Professionals working in digital forensics need a solid understanding of various
 - Effective communication abilities to convey technical findings to non-technical stakeholders
 
 Overall, digital forensics is a crucial component of cybersecurity as it helps organizations respond effectively to cyber attacks, identify vulnerabilities, and take appropriate steps to safeguard their digital assets.
+
+- [Introduction to Digital Forensics (TryHackMe)](https://tryhackme.com/room/introdigitalforensics)
\ No newline at end of file
diff --git a/src/data/roadmaps/devops/content/102-live-in-terminal/scripting/100-bash-scripting.md b/src/data/roadmaps/devops/content/102-live-in-terminal/scripting/100-bash-scripting.md
index 231792959..746528db3 100644
--- a/src/data/roadmaps/devops/content/102-live-in-terminal/scripting/100-bash-scripting.md
+++ b/src/data/roadmaps/devops/content/102-live-in-terminal/scripting/100-bash-scripting.md
@@ -1 +1,3 @@
-# Bash scripting
\ No newline at end of file
+# Bash scripting
+
+- [Bash Scripting Tutorial](https://www.freecodecamp.org/news/bash-scripting-tutorial-linux-shell-script-and-command-line-for-beginners/)
\ No newline at end of file
diff --git a/src/data/roadmaps/javascript/content/106-javascript-loops-iterations/102-break-continue/100-labeled-statements.md b/src/data/roadmaps/javascript/content/106-javascript-loops-iterations/102-break-continue/100-labeled-statements.md
index 8c0e1e244..29110c59d 100644
--- a/src/data/roadmaps/javascript/content/106-javascript-loops-iterations/102-break-continue/100-labeled-statements.md
+++ b/src/data/roadmaps/javascript/content/106-javascript-loops-iterations/102-break-continue/100-labeled-statements.md
@@ -8,3 +8,4 @@ Visit the following resources to learn more:
 
 - [JavaScript MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label)
 - [Tutorialspoint – JavaScript Tutorial](https://www.tutorialspoint.com/What-are-label-statements-in-JavaScript)
+- [Labels for break/continue](https://javascript.info/while-for#labels-for-break-continue)
\ No newline at end of file
diff --git a/src/data/roadmaps/javascript/content/112-javascript-asynchronous-javascript/103-callbacks/100-callback-hell.md b/src/data/roadmaps/javascript/content/112-javascript-asynchronous-javascript/103-callbacks/100-callback-hell.md
index 4dc1cf199..b4b2d6774 100644
--- a/src/data/roadmaps/javascript/content/112-javascript-asynchronous-javascript/103-callbacks/100-callback-hell.md
+++ b/src/data/roadmaps/javascript/content/112-javascript-asynchronous-javascript/103-callbacks/100-callback-hell.md
@@ -5,3 +5,4 @@ The callback hell is when we try to write asynchronous JavaScript in a way where
 Visit the following resources to learn more:
 
 - [Callback Hell](http://callbackhell.com/)
+- [Callbacks in Callbacks - Pyramid of Doom](https://javascript.info/callbacks#pyramid-of-doom)
\ No newline at end of file
diff --git a/src/data/roadmaps/javascript/content/112-javascript-asynchronous-javascript/103-callbacks/index.md b/src/data/roadmaps/javascript/content/112-javascript-asynchronous-javascript/103-callbacks/index.md
index a5c6423f9..a8586e563 100644
--- a/src/data/roadmaps/javascript/content/112-javascript-asynchronous-javascript/103-callbacks/index.md
+++ b/src/data/roadmaps/javascript/content/112-javascript-asynchronous-javascript/103-callbacks/index.md
@@ -6,3 +6,4 @@ Visit the following resources to learn more:
 
 - [Callbacks in JavaScript](https://javascript.info/callbacks)
 - [Callback Functions](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
+- [W3School CallBack Function](https://www.w3schools.com/js/js_callback.asp)
\ No newline at end of file
diff --git a/src/data/roadmaps/kubernetes/content/102-setting-up-kubernetes/100-installing-a-local-cluster.md b/src/data/roadmaps/kubernetes/content/102-setting-up-kubernetes/100-installing-a-local-cluster.md
index a0c94e3a6..3206c583f 100644
--- a/src/data/roadmaps/kubernetes/content/102-setting-up-kubernetes/100-installing-a-local-cluster.md
+++ b/src/data/roadmaps/kubernetes/content/102-setting-up-kubernetes/100-installing-a-local-cluster.md
@@ -1,6 +1,6 @@
 # Installing a Local Cluster
 
-To install and configure a Kubernetes cluster on CentOS 7 or Ubunto, you would need to setup the prerequisites and requirements for setting up a Kubernetes cluster after which you would be installing the Kubernetes components, including Kubeadm, Kubelet, and Kubectl and then you'll need to connect the master and the worker nodes. Once the connection is established you can check it by deploying application on the cluster.
+To install and configure a Kubernetes cluster on CentOS 7 or Ubuntu, you would need to setup the prerequisites and requirements for setting up a Kubernetes cluster after which you would be installing the Kubernetes components, including Kubeadm, Kubelet, and Kubectl and then you'll need to connect the master and the worker nodes. Once the connection is established you can check it by deploying application on the cluster.
 
 Learn more from the following links:
 
diff --git a/src/data/roadmaps/typescript/content/101-typescript-types/115-type-assertions/101-as-type.md b/src/data/roadmaps/typescript/content/101-typescript-types/115-type-assertions/101-as-type.md
index 85c73824d..94d892f49 100644
--- a/src/data/roadmaps/typescript/content/101-typescript-types/115-type-assertions/101-as-type.md
+++ b/src/data/roadmaps/typescript/content/101-typescript-types/115-type-assertions/101-as-type.md
@@ -12,3 +12,5 @@ let str = num as string;
 ```
 
 It's important to note that type assertions do not change the runtime type of a value, and do not cause any type of conversion. They simply provide a way for the programmer to override the type inference performed by the compiler.
+
+- [Type assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions)
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index c048f6f63..dca50f454 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -149,8 +149,8 @@ const gaPageIdentifier = Astro.url.pathname
     </slot>
 
     <Authenticator />
-    <PageProgress initialMessage={initialLoadingMessage} client:idle />
     <CommandMenu client:idle />
+    <PageProgress initialMessage={initialLoadingMessage} client:idle />
     <PageSponsor
       gaPageIdentifier={briefTitle || gaPageIdentifier}
       client:load
diff --git a/src/lib/home-progress.ts b/src/lib/home-progress.ts
new file mode 100644
index 000000000..77ff521ba
--- /dev/null
+++ b/src/lib/home-progress.ts
@@ -0,0 +1,57 @@
+import { httpGet } from './http';
+import { isLoggedIn } from './jwt';
+
+type UserProgressResponse = {
+  resourceId: string;
+  resourceType: 'roadmap' | 'best-practice';
+  done: number;
+  learning: number;
+  skipped: number;
+  total: number;
+  updatedAt: Date;
+}[];
+
+async function renderProgress() {
+  if (!isLoggedIn()) {
+    return;
+  }
+
+  const { response: progressList, error } = await httpGet<UserProgressResponse>(
+    `${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress`
+  );
+
+  if (error || !progressList) {
+    return;
+  }
+
+  progressList.forEach((progress) => {
+    const href =
+      progress.resourceType === 'best-practice'
+        ? `/best-practices/${progress.resourceId}`
+        : `/${progress.resourceId}`;
+    const element = document.querySelector(`a[href="${href}"]`);
+    if (!element) {
+      return;
+    }
+
+    const totalDone = progress.done + progress.skipped;
+    const percentageDone = (totalDone / progress.total) * 100;
+
+    const progressBar = document.createElement('div');
+    progressBar.style.backgroundColor = 'rgb(23 42 58)';
+    progressBar.style.position = 'absolute';
+    progressBar.style.width = `${percentageDone}%`;
+    progressBar.style.height = '100%';
+    progressBar.style.bottom = '0';
+    progressBar.style.left = '0';
+    progressBar.style.top = '0';
+    progressBar.style.zIndex = '1';
+
+    element.appendChild(progressBar);
+  });
+}
+
+// on DOM load
+window.addEventListener('DOMContentLoaded', () => {
+    window.setTimeout(renderProgress, 0);
+});
diff --git a/src/pages/404.astro b/src/pages/404.astro
index df87feb93..203975e74 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -8,7 +8,7 @@ const legacyRoadmapUrls = [...roadmapIds.map((id) => `/${id}/`), '/roadmaps/'];
 ---
 
 <BaseLayout title='Page not found' permalink={'/404'} noIndex={true}>
-  <!-- Legacy roadmp pages handling -->
+  <!-- Legacy roadmap pages handling -->
   <script slot='after-header' define:vars={{ legacyRoadmapUrls }}>
     // If it's a roadmap page and it ends with a slash
     // redirect to the same page without the slash
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2f84180b8..3eefd7bbe 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -23,20 +23,24 @@ const videos = await getAllVideos();
 >
   <div class='bg-gradient-to-b from-slate-900 to-black'>
     <div class='border-b border-b-[#1e293c]'>
-      <div class='container text-left sm:text-center py-6 pb-14 sm:py-20 px-6 sm:px-0'>
+      <div
+        class='container px-6 py-6 pb-14 text-left sm:px-0 sm:py-20 sm:text-center'
+      >
         <h1
-          class='text-2xl sm:text-5xl mb-2 sm:mb-4 font-bold bg-gradient-to-b from-amber-50 to-purple-500 text-transparent bg-clip-text'
+          class='mb-2 bg-gradient-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl'
         >
           Developer Roadmaps
         </h1>
 
-        <p class='hidden sm:block text-gray-400 text-lg px-4'>
-          <span class='font-medium text-gray-400'>roadmap.sh</span> is a community effort to create roadmaps, guides and
-          other educational content to help guide developers in picking up the path and guide their learnings.
+        <p class='hidden px-4 text-lg text-gray-400 sm:block'>
+          <span class='font-medium text-gray-400'>roadmap.sh</span> is a community
+          effort to create roadmaps, guides and other educational content to help
+          guide developers in picking up the path and guide their learnings.
         </p>
 
-        <p class='block sm:hidden text-gray-400 text-md px-0'>
-          Community created roadmaps, guides and articles to help developers grow in their career.
+        <p class='text-md block px-0 text-gray-400 sm:hidden'>
+          Community created roadmaps, guides and articles to help developers
+          grow in their career.
         </p>
       </div>
     </div>
@@ -54,7 +58,10 @@ const videos = await getAllVideos();
     <FeaturedItems
       heading='Skill based Roadmaps'
       featuredItems={skillRoadmaps.map((roadmapItem) => ({
-        text: roadmapItem.frontmatter.briefTitle === 'Go' ? 'Go Roadmap' : roadmapItem.frontmatter.briefTitle,
+        text:
+          roadmapItem.frontmatter.briefTitle === 'Go'
+            ? 'Go Roadmap'
+            : roadmapItem.frontmatter.briefTitle,
         url: `/${roadmapItem.id}`,
         isNew: roadmapItem.frontmatter.isNew,
         isUpcoming: roadmapItem.frontmatter.isUpcoming,
@@ -71,9 +78,11 @@ const videos = await getAllVideos();
       }))}
     />
 
-    <div class='grid grid-cols-1 gap-7 sm:gap-16 bg-gray-50 py-7 sm:py-16'>
+    <div class='grid grid-cols-1 gap-7 bg-gray-50 py-7 sm:gap-16 sm:py-16'>
       <FeaturedGuides heading='Guides' guides={guides.slice(0, 7)} />
       <FeaturedVideos heading='Videos' videos={videos.slice(0, 7)} />
     </div>
   </div>
+
+  <script src='../lib/home-progress.ts'></script>
 </BaseLayout>