diff --git a/src/api/user/type.ts b/src/api/user/type.ts
index 3d7445d6..daade35b 100644
--- a/src/api/user/type.ts
+++ b/src/api/user/type.ts
@@ -64,7 +64,7 @@ export const USER_LOCALES = ['en-US', 'zh-CN', 'zh-TW'] as const;
  * @see https://en.wikipedia.org/wiki/IETF_language_tag
  * @see USER_LOCALES
  */
-export type UserLocale = typeof USER_LOCALES[number];
+export type UserLocale = (typeof USER_LOCALES)[number];
 
 /**
  * Check if the user locale is valid.
diff --git a/src/components/Mobile/Overview/MainView.vue b/src/components/Mobile/Overview/MainView.vue
deleted file mode 100644
index 4a4c35d2..00000000
--- a/src/components/Mobile/Overview/MainView.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import AppBar from '@/components/Mobile/AppBar.vue';
-import Content from '@/components/Mobile/Overview/OverviewContent.vue';
-import NavigationBar from '@/components/NavigationBar.vue';
-</script>
-
-<template>
-  <AppBar />
-  <Content />
-  <NavigationBar />
-  <div class="navigation-overlay"></div>
-</template>
-
-<style lang="scss" scoped>
-@import '@/scss/global.scss';
-
-.navigation-overlay {
-  min-height: 6rem;
-}
-</style>
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index 59a0c607..5d687301 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -1,73 +1,24 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import {
+  getNavBarIndex,
+  NAVBAR_ITEMS,
+} from '@/components/data/NavigationBarData';
 
-const activeIndex = ref(0);
+const router = useRouter();
+
+const activeIndex = ref(getNavBarIndex(router.currentRoute.value.path));
 
 const handleChangeActive = (index: number) => {
   activeIndex.value = index;
-};
 
-const navbarItems = [
-  {
-    icon: `
-      <svg width="100%" height="32" viewBox="0 0 56 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="block m-auto">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M28 22C31.3137 22 34 19.3137 34 16C34 12.6863 31.3137 10 28 10C24.6863 10 22 12.6863 22 16C22 19.3137 24.6863 22 28 22Z"
-          fill="currentColor" />
-      </svg>
-    `,
-    name: '總覽',
-    link: '/overview',
-  },
-  {
-    icon: `
-        <path
-          d="M32 7L21 13L25 15.18V21.18L32 25L39 21.18V15.18L41 14.09V21H43V13L32 7ZM38.82 13L32 16.72L25.18 13L32 9.28L38.82 13ZM37 19.99L32 22.72L27 19.99V16.27L32 19L37 16.27V19.99Z"
-          fill="currentColor"
-        />
-    `,
-    name: '我的班級',
-    link: '/classroom',
-  },
-  {
-    icon: `
-        <path
-          d="M40 6L24 6C22.9 6 22.01 6.9 22.01 8L22 26L26 22H40C41.1 22 42 21.1 42 20V8C42 6.9 41.1 6 40 6ZM40 20H25.17L24 21.17V8H40V20ZM34 14.6L37 17V11L34 13.4V11H27V17H34V14.6Z"
-          fill="currentColor"
-        />
-    `,
-    name: '我的課堂',
-    link: '/lesson',
-  },
-  {
-    icon: `
-      <path
-        d="M39 8H34.82C34.4 6.84 33.3 6 32 6C30.7 6 29.6 6.84 29.18 8H25C23.9 8 23 8.9 23 10V24C23 25.1 23.9 26 25 26H39C40.1 26 41 25.1 41 24V10C41 8.9 40.1 8 39 8ZM32 7.75C32.41 7.75 32.75 8.09 32.75 8.5C32.75 8.91 32.41 9.25 32 9.25C31.59 9.25 31.25 8.91 31.25 8.5C31.25 8.09 31.59 7.75 32 7.75ZM39 24H25V10H39V24Z"
-        fill="currentColor"
-      />
-      <path
-        d="M35.08 16.03L32.96 13.91L27 19.86V22H29.1L35.08 16.03Z"
-        fill="currentColor"
-      />
-      <path
-        d="M36.85 14.27C37.05 14.07 37.05 13.76 36.85 13.56L35.44 12.15C35.24 11.95 34.93 11.95 34.73 12.15L33.67 13.21L35.79 15.33L36.85 14.27Z"
-        fill="currentColor"
-      />
-    `,
-    name: '我的筆記',
-    link: 'note',
-  },
-  {
-    icon: `
-      <path
-        d="M24 10H22V24C22 25.1 22.9 26 24 26H38V24H24V10ZM40 6L28 6C26.9 6 26 6.9 26 8V20C26 21.1 26.9 22 28 22H40C41.1 22 42 21.1 42 20V8C42 6.9 41.1 6 40 6ZM40 20H28V8H40V20ZM33.51 14.16C33.92 13.43 34.69 13 35.14 12.36C35.62 11.68 35.35 10.42 34 10.42C33.12 10.42 32.68 11.09 32.5 11.65L31.13 11.08C31.51 9.96 32.52 9 33.99 9C35.22 9 36.07 9.56 36.5 10.26C36.87 10.86 37.08 11.99 36.51 12.83C35.88 13.76 35.28 14.04 34.95 14.64C34.82 14.88 34.77 15.04 34.77 15.82H33.25C33.26 15.41 33.19 14.74 33.51 14.16ZM32.95 17.95C32.95 17.36 33.42 16.91 34 16.91C34.59 16.91 35.04 17.36 35.04 17.95C35.04 18.53 34.6 19 34 19C33.42 19 32.95 18.53 32.95 17.95Z"
-        fill="currentColor"
-      />
-    `,
-    name: '試題庫',
-    link: '/question',
-  },
-];
+  const item = NAVBAR_ITEMS[index];
+  const pathSplit = router.currentRoute.value.path.split('/');
+  const parentPath = pathSplit.slice(0, pathSplit.length - 1).join('/');
+
+  router.push(`${parentPath}/${item.link}`);
+};
 </script>
 
 <template>
@@ -115,7 +66,7 @@ const navbarItems = [
     </div>
 
     <div
-      v-for="(item, index) in navbarItems"
+      v-for="(item, index) in NAVBAR_ITEMS"
       :key="index"
       :class="[
         'phone:flex-1',
@@ -163,10 +114,11 @@ const navbarItems = [
   border-top: 1px solid #f1f3f9;
   box-sizing: border-box;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  position: fixed;
+  position: absolute;
   z-index: auto;
   transition: 300ms ease background;
   bottom: 0;
+  left: 0;
   height: 100%;
   width: 104px;
   border-top-right-radius: 50px;
diff --git a/src/components/data/NavigationBarData.ts b/src/components/data/NavigationBarData.ts
new file mode 100644
index 00000000..34b2671b
--- /dev/null
+++ b/src/components/data/NavigationBarData.ts
@@ -0,0 +1,71 @@
+export interface NavBarItem {
+  icon: string;
+  name: string;
+  link: string;
+}
+
+export const NAVBAR_ITEMS: NavBarItem[] = [
+  {
+    icon: `
+      <svg width="100%" height="32" viewBox="0 0 56 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="block m-auto">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M28 22C31.3137 22 34 19.3137 34 16C34 12.6863 31.3137 10 28 10C24.6863 10 22 12.6863 22 16C22 19.3137 24.6863 22 28 22Z"
+          fill="currentColor" />
+      </svg>
+    `,
+    name: '總覽',
+    link: 'overview',
+  },
+  {
+    icon: `
+        <path
+          d="M32 7L21 13L25 15.18V21.18L32 25L39 21.18V15.18L41 14.09V21H43V13L32 7ZM38.82 13L32 16.72L25.18 13L32 9.28L38.82 13ZM37 19.99L32 22.72L27 19.99V16.27L32 19L37 16.27V19.99Z"
+          fill="currentColor"
+        />
+    `,
+    name: '我的班級',
+    link: 'class',
+  },
+  {
+    icon: `
+        <path
+          d="M40 6L24 6C22.9 6 22.01 6.9 22.01 8L22 26L26 22H40C41.1 22 42 21.1 42 20V8C42 6.9 41.1 6 40 6ZM40 20H25.17L24 21.17V8H40V20ZM34 14.6L37 17V11L34 13.4V11H27V17H34V14.6Z"
+          fill="currentColor"
+        />
+    `,
+    name: '我的課堂',
+    link: 'lesson',
+  },
+  {
+    icon: `
+      <path
+        d="M39 8H34.82C34.4 6.84 33.3 6 32 6C30.7 6 29.6 6.84 29.18 8H25C23.9 8 23 8.9 23 10V24C23 25.1 23.9 26 25 26H39C40.1 26 41 25.1 41 24V10C41 8.9 40.1 8 39 8ZM32 7.75C32.41 7.75 32.75 8.09 32.75 8.5C32.75 8.91 32.41 9.25 32 9.25C31.59 9.25 31.25 8.91 31.25 8.5C31.25 8.09 31.59 7.75 32 7.75ZM39 24H25V10H39V24Z"
+        fill="currentColor"
+      />
+      <path
+        d="M35.08 16.03L32.96 13.91L27 19.86V22H29.1L35.08 16.03Z"
+        fill="currentColor"
+      />
+      <path
+        d="M36.85 14.27C37.05 14.07 37.05 13.76 36.85 13.56L35.44 12.15C35.24 11.95 34.93 11.95 34.73 12.15L33.67 13.21L35.79 15.33L36.85 14.27Z"
+        fill="currentColor"
+      />
+    `,
+    name: '我的筆記',
+    link: 'note',
+  },
+  {
+    icon: `
+      <path
+        d="M24 10H22V24C22 25.1 22.9 26 24 26H38V24H24V10ZM40 6L28 6C26.9 6 26 6.9 26 8V20C26 21.1 26.9 22 28 22H40C41.1 22 42 21.1 42 20V8C42 6.9 41.1 6 40 6ZM40 20H28V8H40V20ZM33.51 14.16C33.92 13.43 34.69 13 35.14 12.36C35.62 11.68 35.35 10.42 34 10.42C33.12 10.42 32.68 11.09 32.5 11.65L31.13 11.08C31.51 9.96 32.52 9 33.99 9C35.22 9 36.07 9.56 36.5 10.26C36.87 10.86 37.08 11.99 36.51 12.83C35.88 13.76 35.28 14.04 34.95 14.64C34.82 14.88 34.77 15.04 34.77 15.82H33.25C33.26 15.41 33.19 14.74 33.51 14.16ZM32.95 17.95C32.95 17.36 33.42 16.91 34 16.91C34.59 16.91 35.04 17.36 35.04 17.95C35.04 18.53 34.6 19 34 19C33.42 19 32.95 18.53 32.95 17.95Z"
+        fill="currentColor"
+      />
+    `,
+    name: '試題庫',
+    link: 'exam',
+  },
+];
+
+export function getNavBarIndex(path: string) {
+  return NAVBAR_ITEMS.findIndex((item) => item.link === path.split('/')[2]);
+}
diff --git a/src/components/Desktop/AppBar.vue b/src/components/desktop/AppBar.vue
similarity index 100%
rename from src/components/Desktop/AppBar.vue
rename to src/components/desktop/AppBar.vue
diff --git a/src/components/Desktop/Overview/MainView.vue b/src/components/desktop/dashboard/DesktopDashboard.vue
similarity index 64%
rename from src/components/Desktop/Overview/MainView.vue
rename to src/components/desktop/dashboard/DesktopDashboard.vue
index d80d54d3..9d585279 100644
--- a/src/components/Desktop/Overview/MainView.vue
+++ b/src/components/desktop/dashboard/DesktopDashboard.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-import AppBar from '@/components/Desktop/AppBar.vue';
+import AppBar from '@/components/desktop/AppBar.vue';
 import NavigationBar from '@/components/NavigationBar.vue';
-import Content from '@/components/Desktop/Overview/OverviewContent.vue';
 </script>
 
 <template>
   <NavigationBar />
   <div class="flex flex-col">
     <AppBar />
-    <Content />
+    <router-view />
   </div>
 </template>
 
diff --git a/src/components/Desktop/Overview/OverviewContent.vue b/src/components/desktop/dashboard/OverviewContent.vue
similarity index 95%
rename from src/components/Desktop/Overview/OverviewContent.vue
rename to src/components/desktop/dashboard/OverviewContent.vue
index 11c064ea..2e00a702 100644
--- a/src/components/Desktop/Overview/OverviewContent.vue
+++ b/src/components/desktop/dashboard/OverviewContent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import RecentCard from '@/components/Desktop/Overview/RecentCard.vue';
+import RecentCard from '@/components/desktop/dashboard/RecentCard.vue';
 
 const cardDemoData = [
   { name: 'math' },
diff --git a/src/components/Desktop/Overview/RecentCard.vue b/src/components/desktop/dashboard/RecentCard.vue
similarity index 100%
rename from src/components/Desktop/Overview/RecentCard.vue
rename to src/components/desktop/dashboard/RecentCard.vue
diff --git a/src/components/Mobile/AppBar.vue b/src/components/mobile/AppBar.vue
similarity index 65%
rename from src/components/Mobile/AppBar.vue
rename to src/components/mobile/AppBar.vue
index 97e82296..da70c8fd 100644
--- a/src/components/Mobile/AppBar.vue
+++ b/src/components/mobile/AppBar.vue
@@ -1,24 +1,37 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
+import { Ref } from 'vue';
+import {
+  getNavBarIndex,
+  NAVBAR_ITEMS,
+  NavBarItem,
+} from '@/components/data/NavigationBarData';
+
+const router = useRouter();
+
+function getNavBarItem(route: Ref<RouteLocationNormalizedLoaded>): NavBarItem {
+  return NAVBAR_ITEMS[getNavBarIndex(route.value.path)];
+}
+</script>
 
 <template>
   <div class="nav-overlay"></div>
-
-  <div class="nav flex h-[64px]">
-    <div class="ml-[20px] flex-1">
-      <div class="flex">
-        <button id="menu" class="absolute mt-[20px] block">
-          <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
-            <path
-              fill="currentColor"
-              d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
-            />
-          </svg>
-        </button>
-        <h1 class="ml-[50px] mt-[17px] block text-center text-xl">總覽</h1>
-      </div>
+  <div class="nav flex h-[64px] w-[100svw] flex-row justify-between px-4">
+    <div class="flex items-center gap-7">
+      <button id="menu" class="">
+        <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
+          />
+        </svg>
+      </button>
+      <h1 class="text-xl leading-6">
+        {{ getNavBarItem(router.currentRoute).name }}
+      </h1>
     </div>
-    <div class="flex">
-      <button id="search" class="mr-8 block">
+    <div class="flex gap-6">
+      <button id="search">
         <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
           <path
             fill="currentColor"
@@ -26,7 +39,7 @@
           />
         </svg>
       </button>
-      <button id="account" class="mr-5 block">
+      <button id="account">
         <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
           <path
             fill="currentColor"
@@ -40,7 +53,6 @@
 
 <style lang="scss" scoped>
 @import '@/scss/global.scss';
-
 .nav-overlay {
   min-height: 4rem;
 }
@@ -50,7 +62,6 @@
   z-index: auto;
   top: 0;
 
-  width: 100%;
   color: #444b89;
   background: linear-gradient(
       0deg,
diff --git a/src/components/mobile/dashboard/MobileDashboard.vue b/src/components/mobile/dashboard/MobileDashboard.vue
new file mode 100644
index 00000000..456c3134
--- /dev/null
+++ b/src/components/mobile/dashboard/MobileDashboard.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import AppBar from '@/components/mobile/AppBar.vue';
+import NavigationBar from '@/components/NavigationBar.vue';
+</script>
+
+<template>
+  <div class="overflow-y-hidden">
+    <AppBar />
+    <router-view />
+    <NavigationBar />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/global.scss';
+</style>
diff --git a/src/components/Mobile/Overview/OverviewContent.vue b/src/components/mobile/dashboard/OverviewContent.vue
similarity index 89%
rename from src/components/Mobile/Overview/OverviewContent.vue
rename to src/components/mobile/dashboard/OverviewContent.vue
index aac45d1c..e05c6527 100644
--- a/src/components/Mobile/Overview/OverviewContent.vue
+++ b/src/components/mobile/dashboard/OverviewContent.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import RecentCard from '@/components/Mobile/Overview/RecentCard.vue';
+import RecentCard from '@/components/mobile/dashboard/RecentCard.vue';
 import { useUserStore } from '@/stores/models/user';
 
 const user = useUserStore().info;
 </script>
 
 <template>
-  <div class="mx-[30px] text-center">
+  <!-- Due to the technical debt left behind, we are temporarily addressing it by reducing the actual screen size. -->
+  <div class="max-h-[calc(100svh-149px)] overflow-y-auto px-[6%] text-center">
     <div class="mt-[30px] text-[#3f4759] dark:text-[#c4c6d0]">
       <svg
         class="m-auto block"
diff --git a/src/components/Mobile/Overview/RecentCard.vue b/src/components/mobile/dashboard/RecentCard.vue
similarity index 100%
rename from src/components/Mobile/Overview/RecentCard.vue
rename to src/components/mobile/dashboard/RecentCard.vue
diff --git a/src/pages/PageOverview.vue b/src/pages/PageDashboard.vue
similarity index 69%
rename from src/pages/PageOverview.vue
rename to src/pages/PageDashboard.vue
index d58a84c4..beff40e3 100644
--- a/src/pages/PageOverview.vue
+++ b/src/pages/PageDashboard.vue
@@ -2,8 +2,8 @@
 import { defineAsyncComponent } from 'vue';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/models/user';
-import DesktopView from '@/components/Desktop/Overview/MainView.vue';
-import MobileView from '@/components/Mobile/Overview/MainView.vue';
+import DesktopDashboard from '@/components/desktop/dashboard/DesktopDashboard.vue';
+import MobileDashboard from '@/components/mobile/dashboard/MobileDashboard.vue';
 
 const MainView = defineAsyncComponent(
   () => import('@/components/MainView.vue')
@@ -18,12 +18,12 @@ if (!isLogin) {
 </script>
 
 <template>
-  <MainView id="overview" class="select-none">
+  <MainView id="dashboard" class="select-none">
     <div class="w-[100%] phone:hidden">
-      <DesktopView />
+      <DesktopDashboard />
     </div>
     <div class="w-[100%] max-phone:hidden">
-      <MobileView />
+      <MobileDashboard />
     </div>
   </MainView>
 </template>
diff --git a/src/pages/PageHome.vue b/src/pages/PageHome.vue
index 6bb7f432..c9ec1916 100644
--- a/src/pages/PageHome.vue
+++ b/src/pages/PageHome.vue
@@ -6,7 +6,7 @@ import { useUserStore } from '@/stores/models/user';
 const isLogin = useUserStore().isLoggedIn();
 const router = useRouter();
 if (isLogin) {
-  router.push('/overview');
+  router.push('/dashboard');
 } else {
   router.push('/account/login');
 }
diff --git a/src/pages/dashboard/PageClass.vue b/src/pages/dashboard/PageClass.vue
new file mode 100644
index 00000000..45a2adb2
--- /dev/null
+++ b/src/pages/dashboard/PageClass.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup></script>
+
+<template>
+  <!-- Due to the technical debt left behind, we are temporarily addressing it by reducing the actual screen size. -->
+  <div
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
+  >
+    <p>此功能正在製作中</p>
+  </div>
+  <div class="max-phone:hidden">
+    <p>此功能正在製作中</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/global.scss';
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  color: black;
+  text-align: center;
+
+  .dark & {
+    color: white;
+  }
+}
+</style>
diff --git a/src/pages/dashboard/PageExam.vue b/src/pages/dashboard/PageExam.vue
new file mode 100644
index 00000000..45a2adb2
--- /dev/null
+++ b/src/pages/dashboard/PageExam.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup></script>
+
+<template>
+  <!-- Due to the technical debt left behind, we are temporarily addressing it by reducing the actual screen size. -->
+  <div
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
+  >
+    <p>此功能正在製作中</p>
+  </div>
+  <div class="max-phone:hidden">
+    <p>此功能正在製作中</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/global.scss';
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  color: black;
+  text-align: center;
+
+  .dark & {
+    color: white;
+  }
+}
+</style>
diff --git a/src/pages/dashboard/PageLesson.vue b/src/pages/dashboard/PageLesson.vue
new file mode 100644
index 00000000..45a2adb2
--- /dev/null
+++ b/src/pages/dashboard/PageLesson.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup></script>
+
+<template>
+  <!-- Due to the technical debt left behind, we are temporarily addressing it by reducing the actual screen size. -->
+  <div
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
+  >
+    <p>此功能正在製作中</p>
+  </div>
+  <div class="max-phone:hidden">
+    <p>此功能正在製作中</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/global.scss';
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  color: black;
+  text-align: center;
+
+  .dark & {
+    color: white;
+  }
+}
+</style>
diff --git a/src/pages/dashboard/PageNote.vue b/src/pages/dashboard/PageNote.vue
new file mode 100644
index 00000000..45a2adb2
--- /dev/null
+++ b/src/pages/dashboard/PageNote.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup></script>
+
+<template>
+  <!-- Due to the technical debt left behind, we are temporarily addressing it by reducing the actual screen size. -->
+  <div
+    class="absolute right-0 top-[77px] h-[calc(100svh-77px)] w-[calc(100svw-104px)] phone:hidden"
+  >
+    <p>此功能正在製作中</p>
+  </div>
+  <div class="max-phone:hidden">
+    <p>此功能正在製作中</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/global.scss';
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  color: black;
+  text-align: center;
+
+  .dark & {
+    color: white;
+  }
+}
+</style>
diff --git a/src/pages/dashboard/PageOverview.vue b/src/pages/dashboard/PageOverview.vue
new file mode 100644
index 00000000..91e23e7e
--- /dev/null
+++ b/src/pages/dashboard/PageOverview.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import DesktopContent from '@/components/desktop/dashboard/OverviewContent.vue';
+import MobileContent from '@/components/mobile/dashboard/OverviewContent.vue';
+</script>
+
+<template>
+  <div class="w-[100%] phone:hidden">
+    <DesktopContent />
+  </div>
+  <div class="w-[100%] max-phone:hidden">
+    <MobileContent />
+  </div>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 17d0576d..de958feb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,9 +12,35 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/pages/PageHome.vue'),
   },
   {
-    path: '/overview',
-    name: 'Overview',
-    component: () => import('@/pages/PageOverview.vue'),
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: () => import('@/pages/PageDashboard.vue'),
+    children: [
+      {
+        path: '',
+        redirect: 'dashboard/overview',
+      },
+      {
+        path: 'overview',
+        component: () => import('@/pages/dashboard/PageOverview.vue'),
+      },
+      {
+        path: 'class',
+        component: () => import('@/pages/dashboard/PageClass.vue'),
+      },
+      {
+        path: 'lesson',
+        component: () => import('@/pages/dashboard/PageLesson.vue'),
+      },
+      {
+        path: 'note',
+        component: () => import('@/pages/dashboard/PageNote.vue'),
+      },
+      {
+        path: 'exam',
+        component: () => import('@/pages/dashboard/PageExam.vue'),
+      },
+    ],
   },
   {
     path: '/account',
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 4dcb6c34..7725dd36 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -5,7 +5,7 @@
 // Variables
 $Black: #353535;
 $LightBlack: #424242;
-$DarkBlack: #1f1f1f;
+$DarkBlack: #1b1b1f;
 $MainColor: #5efff2;
 $MainPurple: #7b6ff6;
 
@@ -20,6 +20,10 @@ html,
 #app {
   width: 100%;
   height: 100%;
+
+  .dark & {
+    background-color: $DarkBlack; // This is used to fix the animation that occurs when scrolling beyond the bounds in Safari (Webkit), where the color does not match the background color of the webpage itself.
+  }
 }
 
 img {
diff --git a/test/components/NavigationBar.test.ts b/test/components/NavigationBar.test.ts
new file mode 100644
index 00000000..50821bc5
--- /dev/null
+++ b/test/components/NavigationBar.test.ts
@@ -0,0 +1,146 @@
+import { beforeEach, describe, expect, it, vitest } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import { Router, createRouter, createWebHistory } from 'vue-router';
+import NavigationBarVue from '@/components/NavigationBar.vue';
+
+let router: Router;
+
+beforeEach(() => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: [],
+  });
+});
+
+describe('Navigation Bar', () => {
+  it('check the name of navigation buttons', () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    const navbarItems = wrapper.findAll('.navbar-item');
+    const titles = navbarItems.map((item) => item.text());
+
+    expect(titles).toEqual([
+      '總覽',
+      '我的班級',
+      '我的課堂',
+      '我的筆記',
+      '試題庫',
+    ]);
+  });
+
+  it('check the length of navigation buttons', () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    const navbarItems = wrapper.findAll('.navbar-item');
+
+    expect(navbarItems.length).toBe(5);
+  });
+
+  it('router should be pushed when click the navigation bar overview button', async () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const overviewButton = wrapper.findAll('a')[0];
+    await overviewButton.trigger('click');
+    await flushPromises();
+
+    expect(overviewButton.text()).toContain('總覽');
+    expect(push).toHaveBeenCalledWith('/overview');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.path).toBe('/overview');
+  });
+
+  it('router should be pushed when click the navigation bar class button', async () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const classButton = wrapper.findAll('a')[1];
+    await classButton.trigger('click');
+    await flushPromises();
+
+    expect(classButton.text()).toBe('我的班級');
+    expect(push).toHaveBeenCalledWith('/class');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.path).toBe('/class');
+  });
+
+  it('router should be pushed when click the navigation bar lesson button', async () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const lessonButton = wrapper.findAll('a')[2];
+    await lessonButton.trigger('click');
+    await flushPromises();
+
+    expect(lessonButton.text()).toBe('我的課堂');
+    expect(push).toHaveBeenCalledWith('/lesson');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.path).toBe('/lesson');
+  });
+
+  it('router should be pushed when click the navigation bar note button', async () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const noteButton = wrapper.findAll('a')[3];
+    await noteButton.trigger('click');
+    await flushPromises();
+
+    expect(noteButton.text()).toBe('我的筆記');
+    expect(push).toHaveBeenCalledWith('/note');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.path).toBe('/note');
+  });
+
+  it('router should be pushed when click the navigation bar exam button', async () => {
+    const wrapper = mount(NavigationBarVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const examButton = wrapper.findAll('a')[4];
+    await examButton.trigger('click');
+    await flushPromises();
+
+    expect(examButton.text()).toBe('試題庫');
+    expect(push).toHaveBeenCalledWith('/exam');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(router.currentRoute.value.path).toBe('/exam');
+  });
+});
diff --git a/test/components/desktop/DesktopDashboard.test.ts b/test/components/desktop/DesktopDashboard.test.ts
new file mode 100644
index 00000000..3d09cc72
--- /dev/null
+++ b/test/components/desktop/DesktopDashboard.test.ts
@@ -0,0 +1,75 @@
+import { beforeAll, beforeEach, describe, expect, it, vitest } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { Router, createRouter, createWebHistory } from 'vue-router';
+import DesktopDashboardVue from '@/components/desktop/dashboard/DesktopDashboard.vue';
+import NavigationBarVue from '@/components/NavigationBar.vue';
+import AppBarVue from '@/components/desktop/AppBar.vue';
+
+let router: Router;
+
+beforeEach(() => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: [
+      {
+        path: '/',
+        name: 'Home',
+        redirect: '/overview',
+      },
+      {
+        path: '/overview',
+        component: {
+          template: 'This is overview page',
+        },
+      },
+      {
+        path: '/lesson',
+        component: {
+          template: 'This is lesson page',
+        },
+      },
+    ],
+  });
+});
+
+beforeAll(() => {
+  setActivePinia(createPinia());
+});
+
+describe('Desktop dashboard', () => {
+  it('should renders navigation bar, app bar and default router-view', async () => {
+    const wrapper = mount(DesktopDashboardVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+
+    expect(wrapper.findComponent(NavigationBarVue).exists()).toBeTruthy();
+    expect(wrapper.findComponent(AppBarVue).exists()).toBeTruthy();
+    expect(wrapper.text()).toContain('This is overview page');
+  });
+
+  it('should replace router-view when clicked on navigation bar', async () => {
+    const wrapper = mount(DesktopDashboardVue, {
+      global: {
+        plugins: [router],
+      },
+    });
+
+    await router.isReady();
+    const push = vitest.spyOn(router, 'push');
+
+    const lessonButton = wrapper.findAll('a')[2];
+    await lessonButton.trigger('click');
+    await flushPromises();
+
+    expect(lessonButton.text()).toBe('我的課堂');
+    expect(push).toHaveBeenCalledWith('/lesson');
+    expect(push).toHaveBeenCalledTimes(1);
+    expect(wrapper.text()).toContain('This is lesson page');
+    expect(router.currentRoute.value.path).toBe('/lesson');
+  });
+});
diff --git a/test/components/Desktop/RecentCard.test.ts b/test/components/desktop/RecentCard.test.ts
similarity index 93%
rename from test/components/Desktop/RecentCard.test.ts
rename to test/components/desktop/RecentCard.test.ts
index 17e3dae5..4abe9502 100644
--- a/test/components/Desktop/RecentCard.test.ts
+++ b/test/components/desktop/RecentCard.test.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
-import RecentCardVue from '@/components/Desktop/Overview/RecentCard.vue';
+import RecentCardVue from '@/components/desktop/dashboard/RecentCard.vue';
 
 describe('Recent card', () => {
   test('check the card name & math', () => {
diff --git a/test/components/Mobile/RecentCard.test.ts b/test/components/mobile/RecentCard.test.ts
similarity index 93%
rename from test/components/Mobile/RecentCard.test.ts
rename to test/components/mobile/RecentCard.test.ts
index de75772d..641e3e3f 100644
--- a/test/components/Mobile/RecentCard.test.ts
+++ b/test/components/mobile/RecentCard.test.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
-import RecentCardVue from '@/components/Mobile/Overview/RecentCard.vue';
+import RecentCardVue from '@/components/mobile/dashboard/RecentCard.vue';
 
 describe('Recent card', () => {
   test('check the card name & math', () => {
diff --git a/tsconfig.json b/tsconfig.json
index 85fa1c40..cc2b5930 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,14 +10,21 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
+    "lib": [
+      "esnext",
+      "dom"
+    ],
     "skipLibCheck": true,
     "importHelpers": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*"
+      ]
     },
-    "types": ["vite-plugin-svg-icons/client"]
+    "types": [
+      "vite-plugin-svg-icons/client"
+    ]
   },
   "include": [
     "src/**/*.ts",
@@ -27,6 +34,12 @@
     "src/**/*.json",
     "test/**/*.ts"
   ],
-  "exclude": ["node_modules"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "exclude": [
+    "node_modules"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 85b609cb..47831d9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2320,9 +2320,9 @@ camelcase-css@^2.0.1:
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
-  version "1.0.30001441"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz#987437b266260b640a23cd18fbddb509d7f69f3e"
-  integrity sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==
+  version "1.0.30001503"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001503.tgz"
+  integrity sha512-Sf9NiF+wZxPfzv8Z3iS0rXM1Do+iOy2Lxvib38glFX+08TCYYYGR5fRJXk4d77C4AYwhUjgYgMsMudbh2TqCKw==
 
 chai@^4.3.7:
   version "4.3.7"