diff --git a/package-lock.json b/package-lock.json
index d0cf8a7..c7f9d52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
         "monaco-themes": "^0.4.4",
         "next": "^14.0.1",
         "next-mdx-remote": "^4.4.1",
+        "next-nprogress-bar": "^2.3.11",
         "next-themes": "^0.2.1",
         "postcss": "8.4.28",
         "react": "^18.2.0",
@@ -12801,6 +12802,14 @@
         "react-dom": ">=16.x <=18.x"
       }
     },
+    "node_modules/next-nprogress-bar": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/next-nprogress-bar/-/next-nprogress-bar-2.3.11.tgz",
+      "integrity": "sha512-OjSvsQwgSWa2qBMYO478QreGG9Jt82tr4wTQptmiyzNqqjzHCyKZNkhANnzPrjuFAoelIvmruJuakODofSnvTQ==",
+      "dependencies": {
+        "nprogress": "^0.2.0"
+      }
+    },
     "node_modules/next-themes": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
@@ -12919,6 +12928,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
diff --git a/package.json b/package.json
index 8ab147f..8876382 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "monaco-themes": "^0.4.4",
     "next": "^14.0.1",
     "next-mdx-remote": "^4.4.1",
+    "next-nprogress-bar": "^2.3.11",
     "next-themes": "^0.2.1",
     "postcss": "8.4.28",
     "react": "^18.2.0",
diff --git a/src/components/layout/providers.tsx b/src/components/layout/providers.tsx
index 93f72a6..8fa57fd 100644
--- a/src/components/layout/providers.tsx
+++ b/src/components/layout/providers.tsx
@@ -1,11 +1,19 @@
 "use client";
 import React from "react";
 import ThemeProvider from "./ThemeToggle/theme-provider";
+import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
+
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <>
       <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
         {children}
+        <ProgressBar
+          height="4px"
+          color="hsl(217.2 91.2% 59.8%)"
+          options={{ showSpinner: false }}
+          shallowRouting
+        />
       </ThemeProvider>
     </>
   );