diff --git a/src/App.vue b/src/App.vue
index 687c2ff..885a3bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,44 +1,13 @@
 <template>
   <div id="app">
-    <button @click="selectScreen('MailScreenInbox');"
-            :disabled="screenName == 'MailScreenInbox'">
-      Inbox View
-    </button>
-    <button @click="selectScreen('MailScreenArchived')" 
-            :disabled="screenName == 'MailScreenArchived'">
-      Archived View
-    </button>
 
-    <suspense>
-      <template #default>
-        <MailScreen :screenName="screenName" />
-      </template>
-      <template #fallback>
-        <p>Loading...</p>
-      </template>
-    </suspense>
   </div>
 </template>
 
 <script>
-import MailScreen from '@/components/MailScreen.vue';
-import useEmailSelection from './composition/useEmailSelection';
-import { ref } from 'vue'
 
 export default {
-  name: 'App',
-  components: {
-    MailScreen
-  },
-  setup(){  
-    let screenName = ref('MailScreenInbox');
-    let {emailSelection} = useEmailSelection();
-    let selectScreen = function(newScreen){
-      screenName.value = newScreen;
-      emailSelection.clear();
-    }
-    return {screenName, selectScreen}
-  }
+  name: 'App'
 };
 </script>
 
diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue
deleted file mode 100644
index a001cc2..0000000
--- a/src/components/BulkActionBar.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div class="bulk-action-bar">
-    <span class="checkbox">
-      <input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
-      <span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
-    </span>
-    
-    <span class="buttons">
-      <button @click="emailSelection.markRead()"
-              :disabled="Array.from(emailSelection.emails).every(e => e.read)"
-              v-if="actions.includes('markRead')">
-        Mark Read
-      </button>
-      <button @click="emailSelection.markUnread()" 
-              :disabled="Array.from(emailSelection.emails).every(e => !e.read)"
-              v-if="actions.includes('markUnread')">
-        Mark Unread
-      </button>
-      <button @click="emailSelection.archive()" 
-              :disabled="numberSelected == 0"
-              v-if="actions.includes('archive')">
-        Archive
-      </button>
-      <button @click="emailSelection.moveToInbox()"
-              :disabled="numberSelected == 0"
-              v-if="actions.includes('moveToInbox')">
-        Move to Inbox
-      </button>
-    </span>
-  </div>
-</template>
-
-<script>
-  import useEmailSelection from '../composition/useEmailSelection';
-  import { computed } from 'vue';
-
-  export default {
-    setup({emails}){
-      let {emailSelection} = useEmailSelection();
-      let numberSelected = computed(() => {
-        return emailSelection.emails.size;
-      }) 
-      let allAreSelected = computed(() => {
-        return emails.length == numberSelected.value;
-      })
-      
-      let bulkSelect = function(){
-        if(allAreSelected.value) {
-          emailSelection.clear();
-        } else {
-          emailSelection.addMultiple(emails)
-        }
-      }
-      return { emailSelection, allAreSelected, bulkSelect, numberSelected }
-    },
-    props: {
-      emails: {
-        type: Array,
-        default: []
-      },
-      actions: {
-        type: Array,
-        default: ['markRead', 'markUnread']
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/MailScreen.vue b/src/components/MailScreen.vue
deleted file mode 100644
index d758f5e..0000000
--- a/src/components/MailScreen.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div>
-    <component :is="screenName" :emails="emails.sort((e1, e2) => e1.sentAt < e2.sentAt ? 1 : -1)" />
-  </div>
-</template>
-
-<script>
-  import MailScreenArchived from '@/components/MailScreenArchived.vue';
-  import MailScreenInbox from '@/components/MailScreenInbox.vue';
-  import { ref } from 'vue';
-  import axios from 'axios';
-
-  export default {
-    async setup(){
-      let {data} = await axios.get('http://localhost:3000/emails');
-      let emails = ref(data);
-
-      return {emails};
-    },
-    components: {
-      MailScreenArchived,
-      MailScreenInbox
-    },
-    props: {
-      screenName: {
-        type: String,
-        required: true
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/MailScreenArchived.vue b/src/components/MailScreenArchived.vue
deleted file mode 100644
index be20c80..0000000
--- a/src/components/MailScreenArchived.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <h1>VMail Archives</h1>
-  
-  <BulkActionBar :emails="archivedEmails" :actions="['markRead', 'markUnread', 'moveToInbox']" />
-
-  <MailTable :emails="archivedEmails" />
-</template>
-
-<script>
-  import MailTable from '@/components/MailTable.vue';
-  import BulkActionBar from '@/components/BulkActionBar.vue';
-
-  export default {
-    components: {
-      MailTable,
-      BulkActionBar
-    },
-    computed: {
-      archivedEmails(){
-        return this.emails.filter(e => e.archived)
-      }
-    },
-    props: {
-      emails: {
-        type: Array,
-        required: true
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/MailScreenInbox.vue b/src/components/MailScreenInbox.vue
deleted file mode 100644
index 4c11168..0000000
--- a/src/components/MailScreenInbox.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <h1>VMail Inbox</h1>
-  
-  <BulkActionBar :emails="inboxEmails" :actions="['markRead', 'markUnread', 'archive']" />
-
-  <MailTable :emails="inboxEmails" />
-</template>
-
-<script>
-  import MailTable from '@/components/MailTable.vue';
-  import BulkActionBar from '@/components/BulkActionBar.vue';
-
-  export default {
-    components: {
-      MailTable,
-      BulkActionBar
-    },
-    computed: {
-      inboxEmails(){
-        return this.emails.filter(e => !e.archived)
-      }
-    },
-    props: {
-      emails: {
-        type: Array,
-        required: true
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
deleted file mode 100644
index 4069cdd..0000000
--- a/src/components/MailTable.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <table class="mail-table">
-    <tbody>
-      <tr v-for="email in emails" 
-          :key="email.id"
-          :class="[email.read ? 'read' : '']"
-          @click="openEmail(email, true)"
-          class="clickable">
-        <td>
-          <input type="checkbox" 
-                 :checked="emailSelection.emails.has(email)"
-                 @click="emailSelection.toggle(email)">
-        </td>
-        <td>{{email.from}}</td>
-        <td>
-          <p><strong>{{email.subject}}</strong> - {{email.body}}</p>
-        </td>
-        <td class="date">{{format(new Date(email.sentAt), 'MMM do yyyy')}}</td>
-      </tr>
-    </tbody>
-
-    <ModalView v-if="!!openedEmail" :closeModal="() => {openedEmail = null;}">
-      <MailView :email="openedEmail" 
-                @changeEmail="(args) => changeEmail(emails, args)"
-                @openEmail="openEmail" />
-    </ModalView>
-  </table>
-</template>
-
-<script>
-  import { format } from 'date-fns'
-  import useEmailSelection from '../composition/useEmailSelection';
-  import MailView from '@/components/MailView.vue';
-  import ModalView from '@/components/ModalView.vue';
-  import { ref } from 'vue';
-  import axios from 'axios';
-
-  export default {
-    setup({emails}){
-      let {emailSelection} = useEmailSelection();
-      let openedEmail = ref();
-
-      let openEmail = function(email) {
-        openedEmail.value = email;
-
-        if(email) {
-          openedEmail.value.read = true;
-          axios.put(`http://localhost:3000/emails/${openedEmail.value.id}`, openedEmail.value)
-        }
-      }
-
-      function changeEmail(emails, {amount, toggleArchive, closeModal, toggleRead}){
-        let index = emails.findIndex(e => e == openedEmail.value);
-
-        if(toggleArchive) { emails[index].archived = !emails[index].archived }
-        if(toggleRead) { emails[index].read = !emails[index].read }
-
-        if(toggleArchive || toggleRead) {
-          axios.put(`http://localhost:3000/emails/${emails[index].id}`, emails[index])
-        }
-
-        if(closeModal) { openedEmail.value = null; return null; }
-
-        if(amount) {
-          openEmail(emails[index + amount])
-        }
-      }
-
-      return {format, emailSelection, openedEmail, openEmail, changeEmail}
-    },
-    props: {
-      emails: {
-        type: Array,
-        default: []
-      }
-    },
-    components: {
-      MailView,
-      ModalView
-    }
-  }
-</script>
-
-<style scoped>
-  
-</style>
\ No newline at end of file
diff --git a/src/components/MailView.vue b/src/components/MailView.vue
deleted file mode 100644
index 5be9bbd..0000000
--- a/src/components/MailView.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="email-display" v-if="email">
-    <div class="toolbar">
-      <button @click="toggleArchive">{{email.archived ? 'Move to Inbox (e)' : 'Archive (e)'}}</button>
-      <button @click="goNewer">Newer (k)</button>
-      <button @click="goOlder">Older (j)</button>
-      <button @click="toggleRead()">Mark {{email.read ? 'Unread' : 'Read'}}</button>
-    </div>
-
-    <h2 class="mb-0">Subject: <strong>{{email.subject}}</strong></h2>
-    <div><em>From {{email.from}} on {{format(new Date(email.sentAt), 'MMM do yyyy')}}</em></div>
-    <div v-html="marked(email.body)" />
-  </div>
-</template>
-
-<script>
-  import marked from 'marked';
-  import { useKeydown } from '../composition/useKeydown';
-  import { format } from 'date-fns';
-
-  export default {
-    setup({}, {emit}) {
-      let goNewer = () => emit('changeEmail', {amount: -1})
-      let goOlder = () => emit('changeEmail', {amount: 1})
-      let goNewerAndArchive = () => emit('changeEmail', {amount: -1, toggleArchive: true})
-      let goOlderAndArchive = () => emit('changeEmail', {amount: 1, toggleArchive: true})
-      let toggleArchive = () => emit('changeEmail', {toggleArchive: true, closeModal: true})
-      let toggleRead = () => { emit('changeEmail', {toggleRead: true}) }
-
-      useKeydown([
-        {key: 'k', fn: goNewer}, 
-        {key: 'j', fn: goOlder},
-        {key: '[', fn: goNewerAndArchive},
-        {key: ']', fn: goOlderAndArchive},
-        {key: 'e', fn: toggleArchive}
-      ])
-
-      return {
-        toggleArchive,
-        goNewer,
-        goOlder,
-        toggleRead,
-        format,
-        marked,
-      }
-    },
-    props: {
-      email: {
-        type: Object
-      },
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/ModalView.vue b/src/components/ModalView.vue
deleted file mode 100644
index 1b95aee..0000000
--- a/src/components/ModalView.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="modal">
-    <div class="overlay" @click="closeModal()"></div>
-    <div class="modal-card">
-      <slot :closeModal="closeModal" />
-    </div>
-  </div>
-</template>
-
-<script>
-  import { useKeydown } from '../composition/useKeydown';
-
-  export default {
-    setup({closeModal}, context){
-      useKeydown([{key: 'Escape', fn: closeModal}])
-    },
-    props: {
-      closeModal: {
-        type: Function,
-        required: true
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/composition/useEmailSelection.js b/src/composition/useEmailSelection.js
deleted file mode 100644
index f8fba6b..0000000
--- a/src/composition/useEmailSelection.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ref, reactive } from 'vue';
-
-let emails = new Set();
-export const useEmailSelection = function(){
-
-  let emailSelection = reactive({
-    emails: emails,
-    toggle(id) {
-      if(this.emails.has(id)) {
-        this.emails.delete(id)
-      } else {
-        this.emails.add(id);
-      }
-    },
-    clear(){
-      this.emails.clear();
-    },
-    addMultiple(emails) {
-      emails.forEach(email => {
-        this.emails.add(email)
-      })
-    },
-    forSelected(fn){
-      this.emails.forEach(email => {
-        fn(email)
-      })
-    },
-    markRead(){ this.forSelected(e => e.read = true )},
-    markUnread(){ this.forSelected(e => e.read = false )},
-    archive(){ this.forSelected(e => e.archived = true); this.clear();},
-    moveToInbox(){ this.forSelected(e => e.archived = false); this.clear();}
-  })
-
-  return {
-    emailSelection,
-  }
-}
-
-export default useEmailSelection;
\ No newline at end of file
diff --git a/src/composition/useKeydown.js b/src/composition/useKeydown.js
deleted file mode 100644
index 065b2ef..0000000
--- a/src/composition/useKeydown.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { onMounted, onBeforeUnmount } from 'vue';
-import { fr } from 'date-fns/locale';
-
-export const useKeydown = function(keyCombos) {
-  let onkey = function(event) {
-    let kc = keyCombos.find(({key, fn}) => key == event.key )
-    if(kc) {
-      kc.fn()
-    }
-  }
-
-  onMounted(()=> {
-    window.addEventListener('keydown', onkey);
-  })
-  onBeforeUnmount(()=> {
-    window.removeEventListener('keydown', onkey);
-  })
-}
-
-export default useKeydown;
\ No newline at end of file