diff --git a/README.md b/README.md
index e69de29..aca0d2d 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,5 @@
+# Worktime
+
+An app to track your time
+
+Works offline ✈
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcf..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..d979c8e
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⏲</text></svg>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 3e5a139..a1f30cf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>favicon.svg">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
diff --git a/src/App.vue b/src/App.vue
index 0f8fd98..3938a03 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="app-backdrop"></div>
   <router-view/>
+  <div id="modalSpot" />
 </template>
 
 <style lang="scss">
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index e83b7ce..651ab19 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,14 +1,16 @@
 <template>
-  <div
-    class="modal"
-    :class="{hidden: !active}"
-  >
-    <div class="bg" @click="close" />
-    <div class="window">
-      <div class="close" @click="close">×</div>
-      <slot />
+  <teleport to="#modalSpot">
+    <div
+      class="modal"
+      :class="{hidden: !active}"
+    >
+      <div class="bg" @click="close" />
+      <div class="window">
+        <div class="close" @click="close">×</div>
+        <slot />
+      </div>
     </div>
-  </div>
+  </teleport>
 </template>
 
 <script>
diff --git a/src/views/Home/CategoryModal.vue b/src/views/Home/CategoryModal.vue
new file mode 100644
index 0000000..84f5d5e
--- /dev/null
+++ b/src/views/Home/CategoryModal.vue
@@ -0,0 +1,66 @@
+<template>
+  <Modal ref="modal">
+    <div class="title">Assign Category</div>
+    <div
+      v-for="category in categories"
+      :key="category"
+      class="category"
+      :style="{ background: stringToColor(category) }"
+      @click="assignCategory(category)"
+    >
+      {{ category }}
+    </div>
+  </Modal>
+</template>
+
+<script>
+import { ref, computed } from 'vue';
+import { useStore } from 'vuex';
+import Modal from '@/components/Modal.vue';
+import toColor from '@/stringToColor';
+
+export default {
+  components: { Modal },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const store = useStore();
+    const modal = ref(null);
+
+    const open = () => {
+      modal.value.open();
+    };
+    const close = () => {
+      modal.value.close();
+    };
+
+    const stringToColor = (str) => toColor(str);
+
+    const assignCategory = (category) => {
+      store.commit('assignCategory', { name: props.name, category });
+      modal.value.close();
+    };
+
+    return {
+      modal,
+      open,
+      close,
+      assignCategory,
+      stringToColor,
+      categories: computed(() => store.state.categories),
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.category {
+  margin-top: 12px;
+  border-radius: 24px !important;
+  padding: 12px 24px !important;
+}
+</style>
diff --git a/src/views/Home/Task.vue b/src/views/Home/Task.vue
index a5ae78e..4ec4fa2 100644
--- a/src/views/Home/Task.vue
+++ b/src/views/Home/Task.vue
@@ -34,18 +34,10 @@
       </div>
     </div>
 
-    <Modal ref="categorySelect" class="modal">
-      <div class="title">Assign Category</div>
-      <div
-        v-for="category in categories"
-        :key="category"
-        class="category"
-        :style="{ background: stringToColor(category) }"
-        @click="assignCategory(category)"
-      >
-        {{ category }}
-      </div>
-    </Modal>
+    <CategoryModal
+      ref="categorySelect"
+      :name="task.name"
+    />
 
     <div class="delete" @click="removeTask">
       <img src="@/assets/trash.svg" />
@@ -54,16 +46,13 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import toColor from '@/stringToColor';
 
-// import CategoryDropdown from './CategoryDropdown.vue';
-import Modal from '@/components/Modal.vue';
+import CategoryModal from './CategoryModal.vue';
 
 export default {
   components: {
-    // CategoryDropdown,
-    Modal,
+    CategoryModal,
   },
   props: {
     task: Object,
@@ -81,10 +70,6 @@ export default {
     stopTask() {
       this.$store.commit('stopTask', this.task.name);
     },
-    assignCategory(category) {
-      this.$store.commit('assignCategory', { name: this.task.name, category });
-      this.$refs.categorySelect.close();
-    },
     removeCategory() {
       this.$store.commit('assignCategory', {
         name: this.task.name,
@@ -120,9 +105,6 @@ export default {
 
       return `${days}d ${hours}h ${mins}m`;
     },
-    ...mapState({
-      categories: (state) => state.categories,
-    }),
   },
   mounted() {
     setInterval(() => {
@@ -194,14 +176,6 @@ export default {
     margin-left: 16px;
     cursor: pointer;
   }
-
-  .modal {
-    .category {
-      margin-top: 12px;
-      border-radius: 24px !important;
-      padding: 12px 24px !important;
-    }
-  }
 }
 
 @keyframes pulse {
