diff --git a/package-lock.json b/package-lock.json
index d0232f2..0a9a7c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "autoprefixer": "^10.4.13",
         "axios": "^1.2.2",
+        "moment": "^2.29.4",
         "pinia": "^2.0.28",
         "postcss": "^8.4.20",
         "tailwindcss": "^3.2.4",
@@ -4137,6 +4138,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -9234,6 +9243,11 @@
       "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
       "dev": true
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index b4ee671..24254ec 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "autoprefixer": "^10.4.13",
     "axios": "^1.2.2",
+    "moment": "^2.29.4",
     "pinia": "^2.0.28",
     "postcss": "^8.4.20",
     "tailwindcss": "^3.2.4",
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index 77c4794..b3fed7a 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -24,96 +24,6 @@
             </p>
           </a>
         </li>
-        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
-          <a href="" class="h-full flex flex-col justify-between">
-            <div>
-              <figure class="mb-2">
-                <IconDataFormat class="w-8 h-8"></IconDataFormat>
-              </figure>
-              <h3 class="text-sm font-medium mb-2">
-                File type
-              </h3>
-              <p class="text-sm text-neutral-500">
-                Daily operation records of......
-              </p>
-            </div>
-            <p class="text-sm text-neutral-500">
-              Edited just now
-            </p>
-          </a>
-        </li>
-        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
-          <a href="" class="h-full flex flex-col justify-between">
-            <div>
-              <figure class="mb-2">
-                <IconDataFormat class="w-8 h-8"></IconDataFormat>
-              </figure>
-              <h3 class="text-sm font-medium mb-2">
-                File type
-              </h3>
-              <p class="text-sm text-neutral-500">
-                Daily operation records of......
-              </p>
-            </div>
-            <p class="text-sm text-neutral-500">
-              Edited just now
-            </p>
-          </a>
-        </li>
-        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
-          <a href="" class="h-full flex flex-col justify-between">
-            <div>
-              <figure class="mb-2">
-                <IconDataFormat class="w-8 h-8"></IconDataFormat>
-              </figure>
-              <h3 class="text-sm font-medium mb-2">
-                File type
-              </h3>
-              <p class="text-sm text-neutral-500">
-                Daily operation records of......
-              </p>
-            </div>
-            <p class="text-sm text-neutral-500">
-              Edited just now
-            </p>
-          </a>
-        </li>
-        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
-          <a href="" class="h-full flex flex-col justify-between">
-            <div>
-              <figure class="mb-2">
-                <IconDataFormat class="w-8 h-8"></IconDataFormat>
-              </figure>
-              <h3 class="text-sm font-medium mb-2">
-                File type
-              </h3>
-              <p class="text-sm text-neutral-500">
-                Daily operation records of......
-              </p>
-            </div>
-            <p class="text-sm text-neutral-500">
-              Edited just now
-            </p>
-          </a>
-        </li>
-        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
-          <a href="" class="h-full flex flex-col justify-between">
-            <div>
-              <figure class="mb-2">
-                <IconDataFormat class="w-8 h-8"></IconDataFormat>
-              </figure>
-              <h3 class="text-sm font-medium mb-2">
-                File type
-              </h3>
-              <p class="text-sm text-neutral-500">
-                Daily operation records of......
-              </p>
-            </div>
-            <p class="text-sm text-neutral-500">
-              Edited just now
-            </p>
-          </a>
-        </li>
       </ul>
     </section>
     <section>
@@ -141,10 +51,11 @@
                 File type
                 <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
               </th>
-              <th>
+              <!-- 後端暫時沒做 Owner -->
+              <!-- <th>
                 Owner
                 <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
-              </th>
+              </th> -->
               <th>
                 Last update
                 <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
@@ -152,12 +63,12 @@
             </tr>
           </thead>
           <tbody>
-            <tr>
-              <td>Daily operation records of wind turbines of...</td>
-              <td class="text-neutral-500">-</td>
-              <td class="text-neutral-500">Log</td>
-              <td class="text-neutral-500">Ivory Liao</td>
-              <td class="text-neutral-500"></td>
+            <tr v-for="(file, index) in allFiles" :key="file.id">
+              <td>{{ file.name }}</td>
+              <td class="text-neutral-500">{{ file.parentLog }}</td>
+              <td class="text-neutral-500">{{ file.fileType }}</td>
+              <!-- <td class="text-neutral-500">Owner</td> -->
+              <td class="text-neutral-500">{{ file.updated_at }}</td>
             </tr>
           </tbody>
         </table>
@@ -199,7 +110,18 @@
   export default {
     data() {
       return {
-
+        allFilter: [
+          {
+            log: {},
+            fileType: '',
+          }
+        ],
+        allEventLog: [
+          {
+            parentLog: '',
+            fileType: '',
+          }
+        ],
       }
     },
     setup() {},
@@ -211,6 +133,54 @@
       IconVector,
       IconList,
       IconGrid
+    },
+    computed: {
+      allFiles: function() {
+        return [
+          ...this.allEventLog,
+          ...this.allFilter.map(itemFilter => {
+            return { ...itemFilter, parentLog: itemFilter.log.name }
+          })
+        ]
+      }
+    },
+    methods: {
+      /**
+       * Get all files
+       */
+      async fetchFilter() {
+        const api = 'api/filters';
+
+        try {
+          const response = await this.$http.get(api);
+
+          this.allFilter = response.data;
+          this.allFilter.map(o => o.fileType = "Filter");
+        } catch(error) {
+        } finally {};
+      },
+      /**
+       * Get all event log
+       */
+      async fetchEventLog() {
+        const api = 'api/logs';
+
+        try {
+          const response = await this.$http.get(api);
+
+          this.allEventLog = response.data;
+          this.allEventLog.map(o => {
+            o.parentLog = "-";
+            o.fileType = "Log";
+            return this.allEventLog
+          })
+        } catch(error) {
+        };
+      },
+    },
+    mounted() {
+      this.fetchFilter();
+      this.fetchEventLog();
     }
   }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 4772ac9..1a9ea65 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,10 +41,10 @@ module.exports = {
       '4xl': ['36px', 1],
     },
     screens: {
-      'sm': '640px',
-      'md': '768px',
-      'lg': '1024px',
-      'xl': '1280px',
+      // 'sm': '640px',
+      // 'md': '768px',
+      // 'lg': '1024px',
+      // 'xl': '1280px',
       '2xl': '1536px',
     }
   },