diff --git a/package.json b/package.json
index fc9badebf..9127a266c 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^1.0.6",
+    "nextjs-toploader": "^1.6.11",
     "@discordjs/core": "^1.1.1",
     "@discordjs/next": "^0.1.1-dev.1673526225-a580768.0",
     "@icons-pack/react-simple-icons": "^9.4.0",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 422dec31c..2fbae14d3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,6 +9,7 @@ import { GoogleAnalytics } from '@/components/analytics/GoogleAnalytics';
 import { siteConfig } from '@/config/site-config';
 import Footer from '@/components/landing/footer/footer';
 import { Toaster } from '@/components/ui/sonner';
+import NextTopLoader from 'nextjs-toploader';
 
 const fontSans = FontSans({
   subsets: ['latin'],
@@ -29,6 +30,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <GoogleAnalytics />
         <Providers>
           <Appbar />
+          <NextTopLoader color="#2E78C7" height={2} />
           {/* this is done as to keep footer in the bottom of the page */}
           <div className="min-h-[calc(100vh-64px)]">{children}</div>
           <Footer />