diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5d9d049..ec41834 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,8 +5,8 @@
     "*.env.*": "env"
   },
   "files.exclude": {
-    ".husky": true,
-    "node_modules": true
+    ".husky": true
+    // "node_modules": true
   },
   "editor.tabSize": 2,
   "editor.formatOnSave": true,
diff --git a/package.json b/package.json
index 8314ccd..e0abd58 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
   ],
   "dependencies": {
     "less": "^4.1.2",
+    "nprogress": "^0.2.0",
     "pinia": "^2.0.21",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8",
diff --git a/src/modules/router.ts b/src/modules/router.ts
index 336c470..2b2af30 100644
--- a/src/modules/router.ts
+++ b/src/modules/router.ts
@@ -2,11 +2,16 @@ import {
   createRouter,
   createWebHistory,
   NavigationGuardWithThis,
+  Router,
   RouteRecordRaw,
 } from 'vue-router';
 import { type App } from 'vue';
 import Layout from '~/layout/index.vue';
 
+//
+import NProgress from 'nprogress';
+import '~/style/nprogress.less';
+
 declare module 'vue-router' {
   interface RouteMeta {
     appBar?: boolean;
@@ -41,14 +46,28 @@ const beforeEach: NavigationGuardWithThis<undefined> = (to, from, next) => {
   next();
 };
 
+export const router = createRouter({
+  routes,
+  history: createWebHistory(import.meta.env.BASE_URL ?? '/'),
+});
+
 export { routes };
 
-export const install = (app: App<Element>) => {
-  const router = createRouter({
-    routes,
-    history: createWebHistory(import.meta.env.BASE_URL ?? '/'),
+// NProgress
+function installNprogress(router: Router) {
+  router.beforeEach((to, from) => {
+    if (to.path !== from.path) NProgress.start();
+  });
+  router.afterEach(() => {
+    NProgress.done();
   });
+}
+
+export const install = (app: App<Element>) => {
   router.beforeEach(beforeEach);
 
+  // use nprogress
+  installNprogress(router);
+
   app.use(router);
 };
diff --git a/src/style/nprogress.less b/src/style/nprogress.less
new file mode 100644
index 0000000..6e6289e
--- /dev/null
+++ b/src/style/nprogress.less
@@ -0,0 +1,83 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+
+  // @apply dark:bg-skin-600;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: none;
+  position: fixed;
+  z-index: 1031;
+  top: 23px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/types.d.ts b/src/types.d.ts
index 3de8027..e16f40f 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -23,3 +23,9 @@ interface ImportMeta {
 interface AppModule {
   install: (app: App<Element>) => void;
 }
+
+declare module 'nprogress' {
+  const start: () => void;
+  const done: () => void;
+  export { start, done };
+}
diff --git a/yarn.lock b/yarn.lock
index 208eb4f..e985dd6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2234,6 +2234,11 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 nth-check@^2.0.1:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz"