diff --git a/package.json b/package.json
index e022a0d9..99a9a397 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "nanoid": "4.0.2",
     "next": "13.4.1",
     "next-i18next": "^13.2.2",
-    "nextjs-progressbar": "0.0.16",
+    "nextjs-toploader": "^1.3.2",
     "node-id3": "^0.2.6",
     "pangu": "^4.0.7",
     "pinyin": "3.0.0-alpha.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6dfa06b4..20e3d4cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -190,9 +190,9 @@ dependencies:
   next-i18next:
     specifier: ^13.2.2
     version: 13.2.2(i18next@22.4.15)(next@13.4.1)(react-i18next@12.2.2)(react@18.2.0)
-  nextjs-progressbar:
-    specifier: 0.0.16
-    version: 0.0.16(next@13.4.1)(react@18.2.0)
+  nextjs-toploader:
+    specifier: ^1.3.2
+    version: 1.3.2(next@13.4.1)(react-dom@18.2.0)(react@18.2.0)
   node-id3:
     specifier: ^0.2.6
     version: 0.2.6
@@ -10935,17 +10935,19 @@ packages:
       - '@babel/core'
       - babel-plugin-macros
 
-  /nextjs-progressbar@0.0.16(next@13.4.1)(react@18.2.0):
-    resolution: {integrity: sha512-GV0fD38EMD3vSDCmkq+tObmoup6QA91a6a9MxGuhJZuRk/9TNsrHGnIQQQ/sggkMkXuT4fBgF6jRjFwScDT3zA==}
+  /nextjs-toploader@1.3.2(next@13.4.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-vvFObZvjMC/KNhqFG+pUgLW5/TNpz74wo9Vn/pweg7+tfwK+PCIxArTjpmD60jmUUHPmYgXy1w5qUuw8x3tSow==}
     peerDependencies:
       next: '>= 6.0.0'
       react: '>= 16.0.0'
+      react-dom: '>= 16.0.0'
     dependencies:
       '@types/nprogress': 0.2.0
       next: 13.4.1(@babel/core@7.21.8)(react-dom@18.2.0)(react@18.2.0)
       nprogress: 0.2.0
       prop-types: 15.8.1
       react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     dev: false
 
   /node-abi@3.40.0:
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 8629e487..bc071549 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import NextNProgress from "nextjs-progressbar"
+import NextTopLoader from "nextjs-toploader"
 import { useState } from "react"
 import { WagmiConfig, createClient } from "wagmi"
 
@@ -81,9 +81,7 @@ export default function Providers({
           signInStrategy="simple"
           ignoreWalletDisconnectEvent={true}
         >
-          <NextNProgress
-            options={{ easing: "linear", speed: 500, trickleSpeed: 100 }}
-          />
+          <NextTopLoader easing="linear" speed={500} />
           <LangProvider lang={lang}>{children}</LangProvider>
           <NotificationModal colorScheme={colorScheme} />
         </ConnectKitProvider>