diff --git a/web/src/components/TimelineComment.vue b/web/src/components/TimelineComment.vue
index 33686a1..cf4bfb1 100644
--- a/web/src/components/TimelineComment.vue
+++ b/web/src/components/TimelineComment.vue
@@ -1,10 +1,17 @@
 <template>
-    <div class="timeline-item-description">
-        <i class="avatar | small">
-            <font-awesome-icon icon="user"/>
-        </i>
-        <span><a href="#">$USER</a> commented <b>{{ item.comment }}</b> on <time
-            :datetime="item.timestamp">{{ item.timestamp }}</time></span>
+    <div class="timeline-item-wrapper">
+        <div class="timeline-item-description">
+            <i class="avatar | small">
+                <font-awesome-icon icon="user"/>
+            </i>
+            <span><a href="#">$USER</a> commented <b></b> on <time
+                :datetime="item.timestamp">{{ item.timestamp }}</time></span>
+        </div>
+        <div class="card bg-dark">
+            <div class="card-body">
+                <p>{{ item.comment }}</p>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -35,7 +42,7 @@ a {
     display: flex;
     padding-top: 6px;
     gap: 8px;
-    color: var(--c-grey-400);
+    color: var(--gray);
 
     img {
         flex-shrink: 0;
@@ -49,7 +56,7 @@ a {
         &:hover,
         &:focus {
             outline: 0; /* Don't actually do this */
-            color: var(--c-blue-500);
+            color: var(--info);
         }
     }
 }
diff --git a/web/src/components/TimelineMail.vue b/web/src/components/TimelineMail.vue
index 4f05700..8a92a8c 100644
--- a/web/src/components/TimelineMail.vue
+++ b/web/src/components/TimelineMail.vue
@@ -5,18 +5,19 @@
                 <font-awesome-icon icon="user"/>
             </i>
             <span><a href="#">$USER</a> commented on <time
-                :datetime="item.timestamp">{{ item.timestamp }}</time></span>
+                :datetime="timestamp">{{ timestamp }}</time></span>
         </div>
-        <div class="comment">
-            <p>{{ item.body }}</p>
+        <div class="card bg-dark">
+            <div class="card-header">
+                {{ item.subject }}
+            </div>
+            <div class="card-body">
+            <p><span v-html="body"></span></p>
             <button class="button">👏 2</button>
             <button class="button | square">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-                    <path fill="none" d="M0 0h24v24H0z"/>
-                    <path fill="currentColor"
-                          d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM7 12a5 5 0 0 0 10 0h-2a3 3 0 0 1-6 0H7z"/>
-                </svg>
+                <font-awesome-icon icon="user"/>
             </button>
+            </div>
         </div>
         <button class="show-replies">
             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
@@ -51,6 +52,15 @@ export default {
             required: true
         }
     },
+    computed: {
+        'timestamp': function () {
+            return new Date(this.item.timestamp).toLocaleString();
+        },
+        'body': function () {
+            return this.item.body.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
+        }
+
+    }
 };
 </script>
 
@@ -84,20 +94,14 @@ img {
         &:hover,
         &:focus {
             outline: 0; /* Don't actually do this */
-            color: var(--gray);
+            color: var(--info);
         }
     }
 }
 
 
-.comment {
-    margin-top: 12px;
-    color: var(--light);
+.card {
     border: 1px solid var(--gray);
-    background: var(--dark);
-    border-radius: 6px;
-    padding: 16px;
-    font-size: 1rem;
 }
 
 .avatar {
@@ -132,18 +136,19 @@ img {
     font-size: 1rem;
     height: 32px;
     padding: 0 8px;
-    background-color: var(--dark);
+    background-color: var(--gray);
     flex-shrink: 0;
     cursor: pointer;
     border-radius: 99em;
 
     &:hover {
-        background-color: var(--gray);
+        background-color: var(--info);
     }
 
     &.square {
         border-radius: 50%;
         color: var(--gray);
+        background-color: var(--dark);
         width: 32px;
         height: 32px;
         padding: 0;
@@ -154,7 +159,6 @@ img {
         }
 
         &:hover {
-            background-color: var(--dark);
             color: var(--info);
         }
     }
diff --git a/web/src/components/TimelineStateChange.vue b/web/src/components/TimelineStateChange.vue
index 47429ed..bccaaf2 100644
--- a/web/src/components/TimelineStateChange.vue
+++ b/web/src/components/TimelineStateChange.vue
@@ -34,7 +34,7 @@ a {
     display: flex;
     padding-top: 6px;
     gap: 8px;
-    color: var(--c-grey-400);
+    color: var(--gray);
 
     img {
         flex-shrink: 0;
@@ -48,7 +48,7 @@ a {
         &:hover,
         &:focus {
             outline: 0; /* Don't actually do this */
-            color: var(--c-blue-500);
+            color: var(--info);
         }
     }
 }