diff --git a/web/src/components/Timeline.vue b/web/src/components/Timeline.vue
index 0fc9e24..0758d49 100644
--- a/web/src/components/Timeline.vue
+++ b/web/src/components/Timeline.vue
@@ -8,8 +8,8 @@
             <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'comment'">
                 <font-awesome-icon icon="comment"/>
             </span>
-            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'" :class="'bg-' + colorLookup(item.state)">
-                <font-awesome-icon :icon="iconLookup(item.state)"/>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'" :class="'bg-' + stateInfo(item.state).color">
+                <font-awesome-icon :icon="stateInfo(item.state).icon"/>
             </span>
             <span class="timeline-item-icon faded-icon" v-else>
                 <font-awesome-icon icon="pen"/>
@@ -25,8 +25,9 @@
             </span>
             <div class="new-comment">
                 <div class="input-group">
-                    <input type="text" placeholder="reply mail..." v-model="newMail">
-                    <button class="btn btn-primary" @click="sendMail">
+                    <textarea placeholder="reply mail..." v-model="newMail">
+                    </textarea>
+                    <button class="btn btn-primary" @click="sendMailandClear">
                         Send
                     </button>
                 </div>
@@ -40,6 +41,7 @@
 import TimelineMail from "@/components/TimelineMail.vue";
 import TimelineComment from "@/components/TimelineComment.vue";
 import TimelineStateChange from "@/components/TimelineStateChange.vue";
+import {mapGetters} from "vuex";
 
 export default {
     name: 'Timeline',
@@ -54,33 +56,14 @@ export default {
     data: () => ({
         newMail: ""
     }),
+    computed: {
+        ...mapGetters(['stateInfo']),
+    },
     methods: {
-        sendMail() {
+        sendMailandClear: function () {
             this.$emit('sendMail', this.newMail);
             this.newMail = "";
         },
-        iconLookup: function (state) {
-            if (state.startsWith('closed_')) {
-                return 'check';
-            } else if (state.startsWith('pending_')) {
-                return 'exclamation';
-            } else if (state.startsWith('waiting_')) {
-                return 'hourglass';
-            } else {
-                return 'exclamation';
-            }
-        },
-        colorLookup: function (state) {
-            if (state.startsWith('closed_')) {
-                return 'secondary';
-            } else if (state.startsWith('pending_')) {
-                return 'warning';
-            } else if (state.startsWith('waiting_')) {
-                return 'primary';
-            } else {
-                return 'danger';
-            }
-        },
     },
 };
 </script>