diff --git a/package.json b/package.json
index b1e35907..da59a0e3 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "next": "14.2.5",
     "next-auth": "^4.24.7",
     "next-themes": "^0.3.0",
+    "nextjs-toploader": "^1.6.12",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.2",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 03730372..6cc6e943 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import Providers from '@/providers/providers';
 import type { Metadata } from 'next';
 import { Inter as FontSans } from 'next/font/google';
 import './globals.css';
+import TopLoader from '@/components/Toploader';
 
 const fontSans = FontSans({
   subsets: ['latin'],
@@ -29,6 +30,7 @@ export default async function RootLayout({
           fontSans.variable
         )}
       >
+        <TopLoader />
         <Providers>
           <Header />
           <main className="grow grid">{children}</main>
diff --git a/src/components/Toploader.tsx b/src/components/Toploader.tsx
new file mode 100644
index 00000000..c1ddeef6
--- /dev/null
+++ b/src/components/Toploader.tsx
@@ -0,0 +1,19 @@
+import NextTopLoader from 'nextjs-toploader';
+
+export default function TopLoader() {
+  return (
+    <>
+      <NextTopLoader
+        color="#2299DD"
+        initialPosition={0.08}
+        crawlSpeed={200}
+        height={3}
+        crawl={true}
+        showSpinner={true}
+        easing="ease"
+        speed={200}
+        shadow="0 0 10px $2299DD, 0 0 5px #2299DD"
+      />
+    </>
+  );
+}