diff --git a/app/components/TopProgressBar.tsx b/app/components/TopProgressBar.tsx
new file mode 100644
index 00000000..5f98f8ca
--- /dev/null
+++ b/app/components/TopProgressBar.tsx
@@ -0,0 +1,14 @@
+'use client'
+
+import { AppProgressBar as ProgressBar } from 'next-nprogress-bar'
+import React from 'react'
+
+const TopProgressBar = () => {
+  return (
+    <>
+      <ProgressBar height="2px" color="#1B4DFF" options={{ showSpinner: false }} />
+    </>
+  )
+}
+
+export default TopProgressBar
diff --git a/app/layout.tsx b/app/layout.tsx
index 4ddba242..3aa5412c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import { Inter } from 'next/font/google'
 import { ReactNode } from 'react'
 import Navbar from './components/Navbar'
 import Footer from './components/Footer'
+import TopProgressBar from './components/TopProgressBar'
 
 const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
 
@@ -21,6 +22,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <Navbar />
         <main className="relative pt-20">{children}</main>
         <Footer />
+        <TopProgressBar />
       </body>
     </html>
   )
diff --git a/package.json b/package.json
index 9258f957..40f10715 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
     "typescript": "^5.3.3"
   },
   "devDependencies": {
+    "next-nprogress-bar": "^2.1.2",
     "@babel/core": "^7.23.6",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",