diff --git a/package-lock.json b/package-lock.json
index 840792a..70ca71a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "0.99.7",
+  "version": "0.99.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "0.99.7",
+      "version": "0.99.8",
       "dependencies": {
         "autoprefixer": "^10.4.13",
         "axios": "^1.2.2",
@@ -5048,11 +5048,10 @@
       "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
     },
     "node_modules/primevue": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.23.0.tgz",
-      "integrity": "sha512-WyJwvVRJbuCPAId3qDwQVPXgOli4gc9yxdZZyY/3Ml0/asHHH3LR7+MMvjIHXg/AN+XX5SBVPPJkObxP8cJuaw==",
+      "version": "3.48.1",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.48.1.tgz",
+      "integrity": "sha512-lyJ+E0ZCv2pR9jIpdPLBysU8zB2hOKrN7q78orloWelPx05zSYoMVKAWaqKTHNpunD52xffjaqovt1y6B/9XoQ==",
       "peerDependencies": {
-        "primeicons": "^5.0.0 || ^6.0.0",
         "vue": "^3.0.0"
       }
     },
@@ -10345,9 +10344,9 @@
       "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
     },
     "primevue": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.23.0.tgz",
-      "integrity": "sha512-WyJwvVRJbuCPAId3qDwQVPXgOli4gc9yxdZZyY/3Ml0/asHHH3LR7+MMvjIHXg/AN+XX5SBVPPJkObxP8cJuaw==",
+      "version": "3.48.1",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.48.1.tgz",
+      "integrity": "sha512-lyJ+E0ZCv2pR9jIpdPLBysU8zB2hOKrN7q78orloWelPx05zSYoMVKAWaqKTHNpunD52xffjaqovt1y6B/9XoQ==",
       "requires": {}
     },
     "process": {
diff --git a/src/components/Compare/SidebarStates.vue b/src/components/Compare/SidebarStates.vue
index 2cce9a5..fe1af5a 100644
--- a/src/components/Compare/SidebarStates.vue
+++ b/src/components/Compare/SidebarStates.vue
@@ -12,7 +12,7 @@
       <section class="w-[204px] box-border pr-4">
         <div class="mb-4">
           <p class="h2">File Name</p>
-          <p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" title="新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期">新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期</p>
+          <p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" :title="primaryStatData.name">{{ primaryStatData.name }}</p>
         </div>
         <!-- Stats -->
         <ul class="pb-4 border-b border-neutral-300">
@@ -20,40 +20,40 @@
             <p class="h2">Cases</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
-                <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+                <span class="block text-sm">{{ primaryStatData.cases.count }} / {{ primaryStatData.cases.total }}</span>
+                <ProgressBar :value="primaryValueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.cases.ratio }}%</span>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.cases.ratio }}%</span>
             </div>
           </li>
           <li>
             <p class="h2">Traces</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
-                <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+                <span class="block text-sm">{{ primaryStatData.traces.count }} / {{ primaryStatData.traces.total }}</span>
+                <ProgressBar :value="primaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.traces.ratio }}%</span>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.traces.ratio }}%</span>
             </div>
           </li>
           <li>
             <p class="h2">Activity Instances</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
-                <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+                <span class="block text-sm">{{ primaryStatData.task_instances.count }} / {{ primaryStatData.task_instances.total }}</span>
+                <ProgressBar :value="primaryValueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.task_instances.ratio }}%</span>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.task_instances.ratio }}%</span>
             </div>
           </li>
           <li>
             <p class="h2">Activities</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
-                <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+                <span class="block text-sm">{{ primaryStatData.tasks.count }} / {{ primaryStatData.tasks.total }}</span>
+                <ProgressBar :value="primaryValueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.tasks.ratio }}%</span>
+              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.tasks.ratio }}%</span>
             </div>
           </li>
         </ul>
@@ -61,19 +61,19 @@
         <div class="pt-1 pb-4 border-b border-neutral-300">
           <p class="h2">Log Timeframe</p>
           <div class="space-y-2 text-sm text-center">
-            <span class="block">{{ statData.started_at }}&nbsp</span>
+            <span class="block">{{ primaryStatData.started_at }}&nbsp</span>
             <span class="block">~</span>
-            <span class="block">&nbsp{{ statData.completed_at }}</span>
+            <span class="block">&nbsp{{ primaryStatData.completed_at }}</span>
           </div>
         </div>
         <!-- Case Duration -->
         <div class="pt-1 pb-4">
           <p class="h2">Case Duration</p>
           <ul class="space-y-1 text-sm">
-            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.min }}</li>
-            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.average }}</li>
-            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.median }}</li>
-            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.max }}</li>
+            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.min }}</li>
+            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.average }}</li>
+            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.median }}</li>
+            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.max }}</li>
           </ul>
         </div>
       </section>
@@ -81,7 +81,7 @@
       <section class="w-[204px] box-border pl-4">
         <div class="mb-4">
           <p class="h2">File Name</p>
-          <p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" title="新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期">新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期 新光三越信義新天地母親節檔期</p>
+          <p class="text-sm whitespace-nowrap break-keep overflow-hidden text-ellipsis" :title="secondaryStatData.name">{{ secondaryStatData.name }}</p>
         </div>
         <!-- Stats -->
         <ul class="pb-4 border-b border-neutral-300">
@@ -89,40 +89,40 @@
             <p class="h2">Cases</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
-                <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+                <span class="block text-sm">{{ secondaryStatData.cases.count }} / {{ secondaryStatData.cases.total }}</span>
+                <ProgressBar :value="secondaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.cases.ratio }}%</span>
+              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.cases.ratio }}%</span>
             </div>
           </li>
           <li>
             <p class="h2">Traces</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
-                <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+                <span class="block text-sm">{{ secondaryStatData.traces.count }} / {{ secondaryStatData.traces.total }}</span>
+                <ProgressBar :value="secondaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.traces.ratio }}%</span>
+              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.traces.ratio }}%</span>
             </div>
           </li>
           <li>
             <p class="h2">Activity Instances</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
-                <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+                <span class="block text-sm">{{ secondaryStatData.task_instances.count }} / {{ secondaryStatData.task_instances.total }}</span>
+                <ProgressBar :value="secondaryValueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.task_instances.ratio }}%</span>
+              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.task_instances.ratio }}%</span>
             </div>
           </li>
           <li>
             <p class="h2">Activities</p>
             <div class="flex justify-between items-center">
               <div class="w-full mr-4">
-                <span class="block text-sm">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
-                <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
+                <span class="block text-sm">{{ secondaryStatData.tasks.count }} / {{ secondaryStatData.tasks.total }}</span>
+                <ProgressBar :value="secondaryValueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
               </div>
-              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ statData.tasks.ratio }}%</span>
+              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.tasks.ratio }}%</span>
             </div>
           </li>
         </ul>
@@ -130,38 +130,35 @@
         <div class="pt-1 pb-4 border-b border-neutral-300">
           <p class="h2">Log Timeframe</p>
           <div class="space-y-2 text-sm text-center">
-            <span class="block">{{ statData.started_at }}&nbsp</span>
+            <span class="block">{{ secondaryStatData.started_at }}&nbsp</span>
             <span class="block">~</span>
-            <span class="block">&nbsp{{ statData.completed_at }}</span>
+            <span class="block">&nbsp{{ secondaryStatData.completed_at }}</span>
           </div>
         </div>
         <!-- Case Duration -->
         <div class="pt-1 pb-4">
           <p class="h2">Case Duration</p>
           <ul class="space-y-1 text-sm">
-            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.min }}</li>
-            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.average }}</li>
-            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.median }}</li>
-            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ statData.case_duration.max }}</li>
+            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.min }}</li>
+            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.average }}</li>
+            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.median }}</li>
+            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.max }}</li>
           </ul>
         </div>
       </section>
     </div>
   </Sidebar>
 </template>
-
 <script>
-import { storeToRefs } from 'pinia';
-import AllMapDataStore from '@/stores/allMapData.js';
+import CompareStore from '@/stores/compare.js';
 import { getTimeLabel } from '@/module/timeLabel.js';
 import getMoment from 'moment';
 
 export default {
   setup() {
-    const allMapDataStore = AllMapDataStore();
-    const { logId, stats, createFilterId } = storeToRefs(allMapDataStore);
+    const compareStore = CompareStore();
 
-    return { logId, stats, createFilterId, allMapDataStore };
+    return { compareStore };
   },
   props:{
     sidebarState: {
@@ -171,11 +168,16 @@ export default {
   },
   data() {
     return {
-      valueCases: 0,
-      valueTraces: 0,
-      valueTaskInstances: 0,
-      valueTasks: 0,
-      statData: null,
+      primaryValueCases: 0,
+      primaryValueTraces: 0,
+      primaryValueTaskInstances: 0,
+      primaryValueTasks: 0,
+      secondaryValueCases: 0,
+      secondaryValueTraces: 0,
+      secondaryValueTaskInstances: 0,
+      secondaryValueTasks: 0,
+      primaryStatData: null,
+      secondaryStatData: null,
     }
   },
   methods: {
@@ -190,36 +192,40 @@ export default {
     },
     /**
      * setting stats data
+     * @param { object } data fetch API stats data
+     * @param { string } fileName file Name
+     * @returns { object }  primaryStatData | secondaryStatData
      */
-    getStatData() {
-      this.statData = {
+    getStatData(data, fileName) {
+      return {
+        name: fileName,
         cases: {
-          count: this.stats.cases.count.toLocaleString('en-US'),
-          total: this.stats.cases.total.toLocaleString('en-US'),
-          ratio: this.getPercentLabel(this.stats.cases.ratio)
+          count: data.cases.count.toLocaleString('en-US'),
+          total: data.cases.total.toLocaleString('en-US'),
+          ratio: this.getPercentLabel(data.cases.ratio)
         },
         traces: {
-          count: this.stats.traces.count.toLocaleString('en-US'),
-          total: this.stats.traces.total.toLocaleString('en-US'),
-          ratio: this.getPercentLabel(this.stats.traces.ratio)
+          count: data.traces.count.toLocaleString('en-US'),
+          total: data.traces.total.toLocaleString('en-US'),
+          ratio: this.getPercentLabel(data.traces.ratio)
         },
         task_instances: {
-          count: this.stats.task_instances.count.toLocaleString('en-US'),
-          total: this.stats.task_instances.total.toLocaleString('en-US'),
-          ratio: this.getPercentLabel(this.stats.task_instances.ratio)
+          count: data.task_instances.count.toLocaleString('en-US'),
+          total: data.task_instances.total.toLocaleString('en-US'),
+          ratio: this.getPercentLabel(data.task_instances.ratio)
         },
         tasks: {
-          count: this.stats.tasks.count.toLocaleString('en-US'),
-          total: this.stats.tasks.total.toLocaleString('en-US'),
-          ratio: this.getPercentLabel(this.stats.tasks.ratio)
+          count: data.tasks.count.toLocaleString('en-US'),
+          total: data.tasks.total.toLocaleString('en-US'),
+          ratio: this.getPercentLabel(data.tasks.ratio)
         },
-        started_at: getMoment(this.stats.started_at).format('YYYY.MM.DD HH:mm'),
-        completed_at: getMoment(this.stats.completed_at).format('YYYY.MM.DD HH:mm'),
+        started_at: getMoment(data.started_at).format('YYYY.MM.DD HH:mm'),
+        completed_at: getMoment(data.completed_at).format('YYYY.MM.DD HH:mm'),
         case_duration: {
-          min: getTimeLabel(this.stats.case_duration.min, 2),
-          max: getTimeLabel(this.stats.case_duration.max, 2),
-          average: getTimeLabel(this.stats.case_duration.average, 2),
-          median: getTimeLabel(this.stats.case_duration.median, 2),
+          min: getTimeLabel(data.case_duration.min, 2),
+          max: getTimeLabel(data.case_duration.max, 2),
+          average: getTimeLabel(data.case_duration.average, 2),
+          median: getTimeLabel(data.case_duration.median, 2),
         }
       }
     },
@@ -227,51 +233,54 @@ export default {
      * Behavior when show
      */
     show(){
-      this.valueCases = this.statData.cases.ratio * 100;
-      this.valueTraces=  this.statData.traces.ratio * 100;
-      this.valueTaskInstances = this.statData.task_instances.ratio * 100;
-      this.valueTasks = this.statData.tasks.ratio * 100;
+      this.primaryValueCases = this.primaryStatData.cases.ratio;
+      this.primaryValueTraces=  this.primaryStatData.traces.ratio;
+      this.primaryValueTaskInstances = this.primaryStatData.task_instances.ratio;
+      this.primaryValueTasks = this.primaryStatData.tasks.ratio;
+      this.secondaryValueCases = this.secondaryStatData.cases.ratio;
+      this.secondaryValueTraces=  this.secondaryStatData.traces.ratio;
+      this.secondaryValueTaskInstances = this.secondaryStatData.task_instances.ratio;
+      this.secondaryValueTasks = this.secondaryStatData.tasks.ratio;
     },
     /**
      * Behavior when hidden
      */
     hide(){
-      this.valueCases = 0;
-      this.valueTraces=  0;
-      this.valueTaskInstances = 0;
-      this.valueTasks = 0;
+      this.primaryValueCases = 0;
+      this.primaryValueTraces=  0;
+      this.primaryValueTaskInstances = 0;
+      this.primaryValueTasks = 0;
+      this.secondaryValueCases = 0;
+      this.secondaryValueTraces=  0;
+      this.secondaryValueTaskInstances = 0;
+      this.secondaryValueTasks = 0;
     },
   },
   async mounted() {
-    // log: 695977238 ; filter: 746150051
-    // let params = this.$route.params;
+    const routeParams = this.$route.params;
+    const primaryType = routeParams.primaryType;
+    const secondaryType = routeParams.secondaryType;
+    const primaryId = routeParams.primaryId;
+    const secondaryId = routeParams.secondaryId;
+    const primaryData  = await this.compareStore.getStateData(primaryType, primaryId);
+    const secondaryData  = await this.compareStore.getStateData(secondaryType, secondaryId);
+
+    const primaryFileName = await this.compareStore.getFileName(primaryId)
+    const secondaryFileName = await this.compareStore.getFileName(secondaryId)
+    this.primaryStatData = await this.getStatData(primaryData, primaryFileName);
+    this.secondaryStatData = await this.getStatData(secondaryData, secondaryFileName);
 
-    // switch (params.type) {
-    //   case 'log':
-    //     this.logId = params.fileId;
-    //     break;
-    //   case 'filter':
-    //     this.createFilterId = params.fileId;
-    //     break;
-    //   case 'rule':
-    //     switch (params.checkType) {
-    //       case 'log':
-    //         this.logId = params.checkFileId;
-    //         break;
-    //       case 'filter':
-    //         this.createFilterId = params.checkFileId;
-    //     }
-    //     break;
-    // }
-    this.logId = 695977238;
-    await this.allMapDataStore.getAllMapData();
-    await this.getStatData();
-    this.isPanel = false; // 預設不打開
   }
 }
 </script>
 <style scoped>
 :deep(.p-progressbar .p-progressbar-value) {
-  @apply bg-primary
+  background-color: var(--bg-color);
+}
+.progressbar-primary {
+  --bg-color: #0099FF;
+}
+.progressbar-secondary {
+  --bg-color: #FFAA44;
 }
 </style>
diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js
index cd3aa43..669e0da 100644
--- a/src/stores/allMapData.js
+++ b/src/stores/allMapData.js
@@ -142,8 +142,7 @@ export default defineStore('allMapDataStore', {
         this.allStats = response.data.stats;
         this.allInsights = response.data.insights;
       } catch(error) {
-        console.dir(error)
-        // apiError(error, 'Failed to load the Map.');
+        apiError(error, 'Failed to load the Map.');
       };
     },
     /**
diff --git a/src/stores/compare.js b/src/stores/compare.js
index b3fbfb1..8c0e4ca 100644
--- a/src/stores/compare.js
+++ b/src/stores/compare.js
@@ -26,6 +26,42 @@ export default defineStore('compareStore', {
       } catch(error) {
         apiError(error, 'Failed to load the Compare.');
       }
+    },
+    /**
+     * fetch discover api, get stats.
+     */
+    async getStateData(type, id) {
+      let api = '';
+
+      switch (type) {
+        case 'log':
+          api = `/api/logs/${id}/discover`;
+          break;
+        case 'filter':
+          api = `/api/filters/${id}/discover`
+          break;
+      }
+      try {
+        const response = await this.$axios.get(api);
+
+        return response.data.stats;
+      } catch(error) {
+        apiError(error, "Failed to load the Compare's States.");
+      };
+    },
+    /**
+     * Get file's name
+     */
+    async getFileName(id) {
+      id = Number(id)
+      try {
+        const response = await this.$axios.get('/api/files');
+        const file = response.data.find(i => i.id === id);
+
+        if(file) return file.name;
+      } catch(error) {
+        apiError(error, "Failed to load the Compare's file name.");
+      }
     }
   },
 })
diff --git a/src/views/Compare/Dashboard/index.vue b/src/views/Compare/Dashboard/index.vue
index 877a1e0..58b6d5f 100644
--- a/src/views/Compare/Dashboard/index.vue
+++ b/src/views/Compare/Dashboard/index.vue
@@ -20,7 +20,7 @@
           </section>
         </aside>
         <!-- graph -->
-        <article class="w-full h-full overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
+        <article class="w-full h-full pr-2 mr-2 overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
           <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>
             <ul class="list-disc list-inside px-4 pl-7">
@@ -80,21 +80,19 @@
             </ul>
           </section>
         </article>
+        <!-- Sidebar: State -->
+        <div class="bg-transparent z-10">
+          <ul class="flex flex-col justify-center items-center">
+            <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
+              <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
+                info
+              </span>
+            </li>
+          </ul>
+        </div>
+        <SidebarStates v-model:visible="sidebarState"></SidebarStates>
       </div>
     </div>
-
-    <!-- Sidebar: State -->
-    <div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
-      <ul class="flex flex-col justify-center items-center">
-        <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
-          <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
-            info
-          </span>
-        </li>
-      </ul>
-    </div>
-    <SidebarStates v-model:visible="sidebarState"></SidebarStates>
-
   </main>
 </template>
 <script>
@@ -104,7 +102,6 @@ import CompareStore from '@/stores/compare.js';
 import SidebarStates from '@/components/Compare/SidebarStates.vue';
 import { setLineChartData } from '@/module/setChartData.js';
 import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
-// import { compareDashboardData } from '@/views/Compare/Dashboard/data.js';
 
 export default {
   setup() {