diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 0684889..f42807b 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -81,9 +81,11 @@ export default {
       navViewData:
       {
         // FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
-        FILES: ['ALL', 'DISCOVER'],
+        FILES: ['ALL', 'DISCOVER', 'COMPARE'],
         // DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
-        DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE']
+        DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
+        // COMPARE: ['PROCESS MAP', 'DASHBOARD']
+        COMPARE: ['DASHBOARD']
       },
       navViewName: 'FILES',
       isActive: null,
@@ -104,8 +106,8 @@ export default {
     },
     showIcon: function() {
       let result = true;
-      if(this.navViewName === 'FILES') result = false;
-      else if(this.navViewName === 'UPLOAD') result = false;
+
+      result = ['FILES', 'UPLOAD'].includes(this.navViewName) ? false : true;
       return result;
     }
   },
@@ -154,14 +156,9 @@ export default {
               this.$router.push({name: 'Performance', params: { type: type, fileId: fileId }});
               break;
           }
-          // if(event.target.innerText === 'MAP') {
-          //   if(type === 'rule') this.$router.push({name: 'CheckMap'});
-          //   else this.$router.push({name: 'Map', params: { type: type, fileId: fileId }});
-          // } else if(event.target.innerText === 'CONFORMANCE') {
-          //   if(type === 'rule') this.$router.push({name: 'CheckConformance'});
-          //   else this.$router.push({name: 'Conformance', params: { type: type, fileId: fileId }});
-          // }
           break;
+        case 'COMPARE':
+          break
       }
     },
     getNavViewName() {
diff --git a/src/views/Compare/Dashboard/data.js b/src/views/Compare/Dashboard/data.js
index 722a682..9482181 100644
--- a/src/views/Compare/Dashboard/data.js
+++ b/src/views/Compare/Dashboard/data.js
@@ -7,7 +7,7 @@ export const compareDashboardData = {
           "data": [
             {
               "x": "2022-01-21T03:22:13.850000",
-              "y": 980217.631579
+              "y": 0
             },
             {
               "x": "2022-02-26T08:13:51.550000",
@@ -109,11 +109,11 @@ export const compareDashboardData = {
           "data": [
             {
               "x": "2022-01-21T03:22:13.850000",
-              "y": 0.952810727062303
+              "y": 0
             },
             {
               "x": "2022-02-26T08:13:51.550000",
-              "y": 0.9516609459556336
+              "y": 0
             },
             {
               "x": "2022-04-03T13:05:29.250000",
@@ -158,7 +158,7 @@ export const compareDashboardData = {
             },
             {
               "x": "2022-02-26T08:13:51.550000",
-              "y": 0.9502456491200848
+              "y": 0
             },
             {
               "x": "2022-04-03T13:05:29.250000",
@@ -211,7 +211,7 @@ export const compareDashboardData = {
           "data": [
             {
               "x": "2022-01-21T03:22:13.850000",
-              "y": 937071.842105
+              "y": 0
             },
             {
               "x": "2022-02-26T08:13:51.550000",
@@ -1586,6 +1586,10 @@ export const compareDashboardData = {
               "x": "i",
               "y": 131
             },
+            {
+              "x": "j",
+              "y": 0
+            },
             {
               "x": "k",
               "y": 39
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index abdca64..193b89b 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -1,87 +1,203 @@
 <template>
   <div class="container pt-4 2xl:max-w-none">
-    <!-- Recently Used -->
-    <section class="mb-4">
-      <h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
-      <!-- card group 最多六個-->
-      <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar pb-4">
-        <!-- card item v-for -->
-        <li class="w-[216px] min-w-[216px] h-[168px] p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" >
-          <div>
-            <span class="material-symbols-outlined mb-2 text-[32px] block">
-              {{ file.icon }}
-            </span>
-            <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
-              {{ file.name }}
-            </h3>
-            <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
-              {{ file.parentLog }}
-            </p>
+    <!-- Recently Used & Performance Comparison -->
+    <div>
+      <!-- Performance Comparison -->
+      <section v-if="filesTag === 'COMPARE'">
+        <h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Performance Comparison</h2>
+        <div class="flex justify-start items-center gap-4 w-full h-[184px] scrollbar pb-4">
+          <!-- primaryDrag -->
+          <div class="relative w-[216px] min-w-[216px] h-full">
+            <div v-if="primaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
+              <div class="h-full flex flex-col justify-center items-center gap-4">
+                <p class="text-4xl font-black">1</p>
+                <p class="text-sm font-medium">Drag and drop a file here</p>
+              </div>
+            </div>
+            <draggable
+              v-model="primaryDragData" :group="{name: 'files', pull: false, put: primaryDragData.length < 1 }" item-key="id" class="w-full h-full">
+              <template #item="{element}">
+                <div class="w-full h-full p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
+                  <div class="h-full">
+                    <span class="material-symbols-outlined mb-2 text-[32px] block">
+                      {{element.icon}}
+                    </span>
+                    <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
+                      {{element.name}}
+                    </h3>
+                    <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+                      {{element.parentLog}}
+                    </p>
+                  </div>
+                  <p class="text-sm text-neutral-500">
+                    {{element.updated_at}}
+                  </p>
+                </div>
+              </template>
+            </draggable>
+            <!-- delete icon -->
+            <span v-show="primaryDragData.length > 0" class="material-symbols-outlined material-fill text-neutral-500 bg-neutral-10 block rounded-full absolute -top-[5%] -right-[5%] z-50 cursor-pointer hover:text-danger" @click="primaryDragDelete">do_not_disturb_on</span>
           </div>
-          <p class="text-sm text-neutral-500">
-            {{ file.accessed_at }}
-          </p>
-        </li>
-      </ul>
-    </section>
-    <section>
-      <div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
-        <h2 class="font-bold">All Files</h2>
-        <ul class="flex items-center gap-x-4">
-          <li v-show="isActive !== null" class="animate-fadein">
-            <ul class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700">
-              <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
-              <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download">download</span></li>
-              <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile">delete</span></li>
-            </ul>
-          </li>
-          <li class="cursor-pointer" @click="switchListOrGrid = false">
-            <IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
-          </li>
-          <li class="cursor-pointer" @click="switchListOrGrid = true">
-            <IconGrid class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconGrid>
+          <!-- secondaryData -->
+          <div class="relative w-[216px] min-w-[216px] h-full">
+            <div v-show="secondaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
+              <div class="h-full flex flex-col justify-center items-center gap-4">
+                <p class="text-4xl font-black">2</p>
+                <p class="text-sm font-medium">Drag and drop a file here</p>
+              </div>
+            </div>
+            <draggable
+              v-model="secondaryDragData" :group="{name: 'files', pull: false, put: secondaryDragData.length < 1 }"  item-key="id" class="w-full h-full">
+              <template #item="{element}">
+                <div class="w-full h-full p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
+                  <div>
+                    <span class="material-symbols-outlined mb-2 text-[32px] block">
+                      {{element.icon}}
+                    </span>
+                    <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
+                      {{element.name}}
+                    </h3>
+                    <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+                      {{element.parentLog}}
+                    </p>
+                  </div>
+                  <p class="text-sm text-neutral-500">
+                    {{element.updated_at}}
+                  </p>
+                </div>
+              </template>
+            </draggable>
+            <!-- delete icon -->
+            <span v-show="secondaryDragData.length > 0" class="material-symbols-outlined material-fill bg-neutral-10 text-neutral-500 block rounded-full absolute -top-[5%] -right-[5%] cursor-pointer hover:text-danger" @click="secondaryDragDelete
+            ">do_not_disturb_on</span>
+          </div>
+          <button class="btn btn-sm" :class="this.isCompareDisabledButton ? 'btn-disable' : 'btn-c-primary'" :disabled="isCompareDisabledButton">Compare</button>
+        </div>
+      </section>
+      <!-- Recently Used -->
+      <section v-else>
+        <h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
+        <!-- card group 最多六個-->
+        <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[184px] scrollbar pb-4">
+          <!-- card item v-for -->
+          <li class="w-[216px] min-w-[216px] h-full p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" >
+            <div>
+              <span class="material-symbols-outlined mb-2 text-[32px] block">
+                {{ file.icon }}
+              </span>
+              <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
+                {{ file.name }}
+              </h3>
+              <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+                {{ file.parentLog }}
+              </p>
+            </div>
+            <p class="text-sm text-neutral-500">
+              {{ file.accessed_at }}
+            </p>
           </li>
         </ul>
-      </div>
-      <!-- All Files type of List -->
-      <div class="overflow-y-scroll overflow-x-hidden scrollbar -mx-2 max-h-[calc(100vh_-_480px)]" v-if="!switchListOrGrid">
-        <DataTable :value="allFiles" dataKey="id" tableClass="w-full mx-2 text-sm cursor-pointer relative" :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable">
-          <Column field="name" header="Name" bodyClass="font-medium fileName"  sortable></Column>
-          <Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
-          <Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
-          <Column field="owner.name" header="Owner" bodyClass="text-neutral-500" sortable></Column>
-          <Column field="updated_at" header="Last Update" bodyClass="text-neutral-500" sortable></Column>
-          <Column bodyClass="text-neutral-500">
-            <template #body="slotProps">
-              <ul class="opacity-0 group-hover:opacity-100  flex justify-end items-center gap-x-2 text-neutral-700">
-                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename(slotProps.data.type, slotProps.data.id, 'list-hover')">edit_square</span></li>
-                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download(slotProps.data.type, slotProps.data.id, 'list-hover', slotProps.data.name)">download</span></li>
-                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile(slotProps.data.type, slotProps.data.id, slotProps.data.name, 'list-hover')">delete</span></li>
+      </section>
+    </div>
+    <!-- All Files -->
+    <div>
+      <!-- Compare -->
+      <section v-if="filesTag === 'COMPARE'">
+        <!-- All Files header -->
+        <div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
+          <h2 class="font-bold">All Files</h2>
+          <ul class="flex items-center gap-x-4">
+            <li>
+              <Dropdown v-model="gridSort" :options="columnType" optionLabel="name" placeholder="Grid Sort" class="w-full !border-neutral-500" inputClass="!text-sm" @change="getGridSortData($event)"></Dropdown>
+            </li>
+            <li>
+              <IconGrid class="hover:bg-neutral-50 duration-300"></IconGrid>
+            </li>
+          </ul>
+        </div>
+        <!-- All Files type of grid -->
+        <draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar">
+          <template #item="{ element }">
+            <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"  :title="element.name" >
+              <div>
+                <span class="material-symbols-outlined mb-2 text-[32px] block">
+                  {{ element.icon }}
+                </span>
+                <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
+                  {{ element.name }}
+                </h3>
+                <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+                  {{ element.parentLog }}
+                </p>
+              </div>
+              <p class="text-sm text-neutral-500">
+                {{ element.updated_at }}
+              </p>
+            </li>
+          </template>
+        </draggable>
+      </section>
+      <!-- All & Discover -->
+      <section v-else>
+        <!-- All Files header -->
+        <div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
+          <h2 class="font-bold">All Files</h2>
+          <ul class="flex items-center gap-x-4">
+            <li v-show="isActive !== null" class="animate-fadein">
+              <ul class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700">
+                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
+                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download">download</span></li>
+                <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile">delete</span></li>
               </ul>
-            </template>
-          </Column>
-        </DataTable>
-      </div>
-      <!-- All Files type of grid -->
-      <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
-      <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
-          <div>
-            <span class="material-symbols-outlined mb-2 text-[32px] block">
-              {{ file.icon }}
-            </span>
-            <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
-              {{ file.name }}
-            </h3>
-            <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
-              {{ file.parentLog }}
+            </li>
+            <li class="cursor-pointer" @click="switchListOrGrid = false">
+              <IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
+            </li>
+            <li class="cursor-pointer" @click="switchListOrGrid = true">
+              <IconGrid class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconGrid>
+            </li>
+          </ul>
+        </div>
+        <!-- All Files type of List -->
+        <div class="overflow-y-scroll overflow-x-hidden scrollbar -mx-2 max-h-[calc(100vh_-_480px)]" v-if="!switchListOrGrid">
+          <DataTable :value="allFiles" dataKey="id" tableClass="w-full mx-2 text-sm cursor-pointer relative" :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable">
+            <Column field="name" header="Name" bodyClass="font-medium fileName"  sortable></Column>
+            <Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
+            <Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
+            <Column field="owner.name" header="Owner" bodyClass="text-neutral-500" sortable></Column>
+            <Column field="updated_at" header="Last Update" bodyClass="text-neutral-500" sortable></Column>
+            <Column bodyClass="text-neutral-500">
+              <template #body="slotProps">
+                <ul class="opacity-0 group-hover:opacity-100  flex justify-end items-center gap-x-2 text-neutral-700">
+                  <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename(slotProps.data.type, slotProps.data.id, 'list-hover')">edit_square</span></li>
+                  <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download(slotProps.data.type, slotProps.data.id, 'list-hover', slotProps.data.name)">download</span></li>
+                  <li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile(slotProps.data.type, slotProps.data.id, slotProps.data.name, 'list-hover')">delete</span></li>
+                </ul>
+              </template>
+            </Column>
+          </DataTable>
+        </div>
+        <!-- All Files type of grid -->
+        <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
+        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
+            <div>
+              <span class="material-symbols-outlined mb-2 text-[32px] block">
+                {{ file.icon }}
+              </span>
+              <h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
+                {{ file.name }}
+              </h3>
+              <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+                {{ file.parentLog }}
+              </p>
+            </div>
+            <p class="text-sm text-neutral-500">
+              {{ file.updated_at }}
             </p>
-          </div>
-          <p class="text-sm text-neutral-500">
-            {{ file.updated_at }}
-          </p>
-        </li>
-      </ul>
-    </section>
+          </li>
+        </ul>
+      </section>
+    </div>
     <!-- ContextMenu -->
     <ContextMenu ref="fileRightMenu" :model="items" @hide="selectedFile = null" class="cursor-pointer">
       <template #item="{ item }">
@@ -141,6 +257,22 @@
             command: this.deleteFile,
           },
         ],
+        compareData: null,
+        primaryDragData: [],
+        secondaryDragData: [],
+        gridSort: null,
+        columnType: [
+          { name: 'name a-z', code: 'nameAscending'},
+          { name: 'name z-a', code: 'nameDescending'},
+          { name: 'Dependency a-z', code: 'parentLogAscending'},
+          { name: 'Dependency z-a', code: 'parentLogDescending'},
+          { name: 'File Type a-z', code: 'fileAscending'},
+          { name: 'File Type z-a', code: 'fileDescending'},
+          { name: 'Owner a-z', code: 'ownerAscending'},
+          { name: 'Owner z-a', code: 'ownerDescending'},
+          { name: 'Last Update 遠-近', code: 'updatedAscending'},
+          { name: 'Last Update 近-遠', code: 'updatedDescending'},
+        ],
       }
     },
     setup() {
@@ -148,11 +280,11 @@
       const store = filesStore();
       const allMapDataStore = AllMapDataStore();
       const loadingStore = LoadingStore();
-      const { dependentsData } = storeToRefs(store);
+      const { dependentsData, filesTag } = storeToRefs(store);
       const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
       const { isLoading } = storeToRefs(loadingStore);
 
-      return { loginStore, store, dependentsData, allMapDataStore, createFilterId, baseLogId, isLoading }
+      return { loginStore, store, dependentsData, filesTag, allMapDataStore, createFilterId, baseLogId, isLoading }
     },
     components: {
       IconDataFormat,
@@ -173,12 +305,6 @@
           sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
           return sortFiles;
         }
-        // let data = [ { "type": "log-check", "id": 315460235, "name": "改名 - log-check 2", "parent": { "type": "log", "id": 306508330, "name": "改名 - log 5" }, "owner": { "username": "dsp", "name": "DSP, Inc" }, "updated_at": "2024-01-11 16:35", "accessed_at": "2024-01-12 11:02", "is_deleted": false, "icon": "local_police", "parentLog": "改名 - log 5", "fileType": "Rule", "ownerName": "DSP, Inc", "updated_base": "2024-01-11T16:35:55.922892+08:00", "accessed_base": "2024-01-12T11:02:46.979212+08:00" }, { "type": "filter-check", "id": 428974306, "name": "改名 - filter-check 2", "parent": { "type": "filter", "id": 308980935, "name": "改名 - filter 2" }, "owner": { "username": "dsp", "name": "DSP, Inc" }, "updated_at": "2024-01-11 16:35", "accessed_at": "2024-01-11 12:25", "is_deleted": false, "icon": "local_police", "parentLog": "改名 - filter 2", "fileType": "Rule", "ownerName": "DSP, Inc", "updated_base": "2024-01-11T16:35:40.524919+08:00", "accessed_base": "2024-01-11T12:25:37.345564+08:00" }, ]
-        // if(data.length !== 0){
-        //   let sortFiles = Array.from(data);
-        //   sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
-        //   return sortFiles;
-        // }
       },
       /**
        * 時間排序，如果沒有 accessed_at 就不加入 data
@@ -189,6 +315,28 @@
         recentlyUsedFiles.sort((x, y) => new Date(y.accessed_base) - new Date(x.accessed_base));
         return recentlyUsedFiles;
       },
+      /**
+       * Compare Submit button disabled
+       */
+      isCompareDisabledButton: function() {
+        let result = this.primaryDragData.length === 0 || this.secondaryDragData.length === 0 ? true : false;
+        return result;
+      }
+    },
+    watch: {
+      filesTag: {
+        handler(newValue) {
+          if(newValue !== 'COMPARE'){
+            this.primaryDragData = [];
+            this.secondaryDragData = [];
+          }
+        }
+      },
+      allFiles: {
+        handler(newValue) {
+          this.compareData = JSON.parse(JSON.stringify(newValue));
+        }
+      }
     },
     methods: {
       /**
@@ -197,6 +345,12 @@
       setRowClass() {
         return ['group']
       },
+      /**
+       * Set Compare Row Style
+       */
+      setCompareRowClass() {
+        return ['leading-6']
+      },
       /**
        * 選擇該 files 進入 Discover/Compare/Design 頁面
        * @param {object} file
@@ -333,7 +487,62 @@
           this.selecteName = name;
         }
         this.store.downloadFileCSV(this.selectedType, this.selectedId, this.selecteName);
-      }
+      },
+      /**
+       * Delete Compare Primary log
+       */
+       primaryDragDelete() {
+        this.compareData.unshift(this.primaryDragData[0]);
+        this.primaryDragData.length = 0;
+      },
+      /**
+       * Delete Compare Secondary log
+       */
+      secondaryDragDelete() {
+        this.compareData.unshift(this.secondaryDragData[0]);
+        this.secondaryDragData.length = 0;
+      },
+      /**
+       *
+       * @param {event} event choose columnType item
+       */
+      getGridSortData(event) {
+        const code = event.value.code;
+
+         // 文字排序: 將 name 字段轉換為小寫進行比較，使用 localeCompare() 方法進行字母順序比較
+        switch (code) {
+          case 'nameAscending':
+            this.compareData = this.compareData.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+            break;
+          case 'nameDescending':
+            this.compareData = this.compareData.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).reverse();
+            break;
+          case 'parentLogAscending':
+            this.compareData = this.compareData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase()));
+            break;
+          case 'parentLogDescending':
+            this.compareData = this.compareData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())).reverse();
+            break;
+          case 'fileAscending':
+            this.compareData = this.compareData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase()));
+            break;
+          case 'fileDescending':
+            this.compareData = this.compareData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())).reverse();
+            break;
+          case 'ownerAscending':
+            this.compareData = this.compareData.sort((a, b) => a.ownerName.toLowerCase().localeCompare(b.ownerName.toLowerCase()));
+            break;
+          case 'ownerDescending':
+            this.compareData = this.compareData.sort((a, b) => a.ownerName.toLowerCase().localeCompare(b.ownerName.toLowerCase())).reverse();
+            break;
+          case 'updatedAscending':
+            this.compareData = this.compareData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base));
+            break;
+          case 'updatedDescending':
+          this.compareData = this.compareData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)).reverse();
+            break;
+        }
+      },
     },
     mounted() {
       this.isLoading = true;