diff --git a/src/router/index.js b/src/router/index.js
index e764c68..fefbfcf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -93,6 +93,11 @@ const routes = [
     name: "NotFound404",
     component: NotFound404,
   },
+  // {
+  //   path: "/discover/performance",
+  //   name: "Performance",
+  //   component: Performance,
+  // }
 ];
 
 const base_url = import.meta.env.BASE_URL;
@@ -103,15 +108,15 @@ const router = createRouter({
 });
 
 // 全域性路由守衛
-router.beforeEach((to, from) => {
-  // to: Route: 即將要進入的目標 路由物件
-  // from: Route: 當前導航正要離開的路由
-  let isRemoveCookie = document.cookie.split(';').some(c => c.trim().startsWith('expires=Thu, 01 Jan 1970 00:00:00 UTC;')); // 是否登入，有到期日表示已登出。
+// router.beforeEach((to, from) => {
+//   // to: Route: 即將要進入的目標 路由物件
+//   // from: Route: 當前導航正要離開的路由
+//   let isRemoveCookie = document.cookie.split(';').some(c => c.trim().startsWith('expires=Thu, 01 Jan 1970 00:00:00 UTC;')); // 是否登入，有到期日表示已登出。
 
-  // 當路由到 login 時，有登入要跳轉至home
-  if (to.name === 'Login') {
-   if (isRemoveCookie) router.push({ name: 'Files' });
-  }
- });
+//   // 當路由到 login 時，有登入要跳轉至home
+//   if (to.name === 'Login') {
+//    if (isRemoveCookie) router.push({ name: 'Files' });
+//   }
+//  });
 
 export default router;
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index 5d15d02..9b68a1d 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -1,10 +1,74 @@
 <template>
   <main class="h-screen-main relative">
     <div class="h-full relative bg-neutral-50">
-      performance: {{ this.performanceData }}
+      <div class="flex justify-start items-start p-4 h-full overflow-y-auto scroll-smooth">
+        <!-- tag -->
+        <aside class="border-r border-neutral-300 pr-4 mr-4 h-full sticky top-0 self-start">
+          <section class="px-2 space-y-2 w-56 h-full">
+            <div>
+              <p class="h2 text-base">Time Usage</p>
+              <ul class="list-disc list-inside text-sm leading-5 pl-3">
+                <li v-for="(item, index) in timeUsageData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
+              </ul>
+            </div>
+            <div>
+              <p class="h2 text-base">Time Usage</p>
+              <ul class="list-disc list-inside text-sm leading-5 pl-3">
+                <li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
+              </ul>
+            </div>
+          </section>
+        </aside>
+        <!-- graph -->
+        <article class="w-full h-full">
+          <section>
+            <p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">schedule</span>Time Usage</p>
+          </section>
+          <section>
+            <ul class="list-disc list-inside px-4 pl-7">
+              <li id="cycleTime" class="scroll-smooth">
+                <span class="inline-block py-4">Cycle Time & Efficiency</span>
+                <div class="">
+                  圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                </div>
+              </li>
+              <li id="processingTime">
+                <span class="inline-block py-4">Processing Time</span>
+                <div class="">
+                  圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                </div>
+              </li>
+              <li id="waitingTime">
+                <span class="inline-block py-4">Waiting Time</span>
+                <div class="">
+                  圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                </div>
+              </li>
+            </ul>
+          </section>
+          <section>
+            <p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
+            <ul class="list-disc list-inside px-4 pl-7">
+              <li id="cases">
+                <span class="inline-block py-4">Number of Cases</span>
+                <div class="">
+                  圖 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed reiciendis nemo natus sit iste fugiat ratione dolores ipsam minus animi voluptates iure obcaecati error, id laboriosam omnis voluptatum. Voluptatum, molestias!
+                </div>
+              </li>
+            </ul>
+          </section>
+        </article>
+      </div>
     </div>
-
-    <StatusBar></StatusBar>
+    <!-- <StatusBar></StatusBar> -->
   </main>
 </template>
 <script>
@@ -25,6 +89,21 @@ export default {
   components: {
     StatusBar,
   },
+  data() {
+    return {
+      timeUsageData: [
+        {tagId: '#cycleTime', label: 'Cycle Time & Efficiency'},
+        {tagId: '#processingTime', label: 'Processing Time'},
+        {tagId: '#waitingTime', label: 'Waiting Time'},
+      ],
+      frequencyData: [
+        {tagId: '#cases', label: 'Number of Cases'},
+        // {tagId: '#trace', label: 'Number of Trace'},
+        // {tagId: '#resource', label: 'Resource'},
+      ],
+      isActive: null
+    }
+  },
   async created() {
     this.isLoading = true;
     const routeParams = this.$route.params;
@@ -37,3 +116,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+.active {
+  @apply text-primary
+}
+</style>