diff --git a/mirage/index.js b/mirage/index.js
index 308be38..a7a1f62 100644
--- a/mirage/index.js
+++ b/mirage/index.js
@@ -12,6 +12,9 @@ new Server({
       },
       body(){
         return faker.lorem.sentence()
+      },
+      sentDate(){
+        return faker.date.recent(20)
       }
     })
   },
@@ -21,6 +24,6 @@ new Server({
   routes() {
     this.namespace = 'api';
 
-    this.get('/emails', {timing: 2000});
+    this.get('/emails');
   }
 })
diff --git a/package.json b/package.json
index 2f0c5a8..3dbf275 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "date-fns": "^2.11.0",
     "vue": "^3.0.0-alpha.9"
   },
   "devDependencies": {
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index 479d84c..30d614d 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -8,13 +8,18 @@
         <td><input type="checkbox" /></td>
         <td>{{email.subject}}</td>
         <td>{{email.body}}</td>
+        <td>{{format(new Date(email.sentDate), 'HH:MM MMM do yyyy')}}</td>
       </tr>
     </tbody>
   </table>
 </template>
 
 <script>
+  import { format } from 'date-fns'
   export default {
+    setup(){
+      return {format}
+    },
     props: {
       emails: {
         type: Array,
diff --git a/yarn.lock b/yarn.lock
index 4a8f346..c1b2995 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2628,6 +2628,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.11.0.tgz#ec2b44977465b9dcb370021d5e6c019b19f36d06"
+  integrity sha512-8P1cDi8ebZyDxUyUprBXwidoEtiQAawYPGvpfb+Dg0G6JrQ+VozwOmm91xYC0vAv1+0VmLehEPb+isg4BGUFfA==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"