diff --git a/mirage/index.js b/mirage/index.js
index 1e3a4f8..6eeaec8 100644
--- a/mirage/index.js
+++ b/mirage/index.js
@@ -7,6 +7,9 @@ new Server({
   },
   factories: {
     email: Factory.extend({
+      id(i) {
+        return i;
+      },
       from(){
         return faker.internet.email()
       },
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index ba4d115..d8962ae 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -1,11 +1,14 @@
 <template>
   <table>
+    Number selected: {{selectedEmailIds.size}}
     <thead>
 
     </thead>
     <tbody>
       <tr v-for="email in emails" :key="email.id" :class="[email.read ? 'read' : '']">
-        <td><input type="checkbox" /></td>
+        <td><input type="checkbox" 
+                   :checked="selectedEmailIds.has(email.id)"
+                   @click="addToSelectedEmails(email.id)" /></td>
         <td>{{email.from}}</td>
         <td>
           <p><strong>{{email.subject}}</strong> - {{email.body}}</p>
@@ -18,9 +21,18 @@
 
 <script>
   import { format } from 'date-fns'
+  import { ref } from 'vue';
   export default {
     setup(){
-      return {format}
+      let selectedEmailIds = ref(new Set(['1', '5']))
+      let addToSelectedEmails = (id) => {
+        if(selectedEmailIds.value.has(id)) {
+          selectedEmailIds.value.delete(id)
+        } else {
+          selectedEmailIds.value.add(id);
+        }
+      }
+      return {format, selectedEmailIds, addToSelectedEmails}
     },
     props: {
       emails: {