diff --git a/website/client/assets/svg/liked.svg b/website/client/assets/svg/liked.svg
index 44dd5ec3d5..b422a81e83 100644
--- a/website/client/assets/svg/liked.svg
+++ b/website/client/assets/svg/liked.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="#A5A1AC" fill-rule="evenodd" d="M11 10c0 1.654-1.346 3-3 3s-3-1.346-3-3h6zm2-3.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 13 6.5zm-7 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 6 6.5zM14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+    <path fill-rule="evenodd" d="M11 10c0 1.654-1.346 3-3 3s-3-1.346-3-3h6zm2-3.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 13 6.5zm-7 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 6 6.5zM14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
 </svg>
diff --git a/website/client/components/chat/autoComplete.vue b/website/client/components/chat/autoComplete.vue
index 59038df789..d702a1cfa8 100644
--- a/website/client/components/chat/autoComplete.vue
+++ b/website/client/components/chat/autoComplete.vue
@@ -35,7 +35,7 @@
 
   .profile-name {
     display: inline-block;
-    font-size: 14px;
+    font-size: 16px;
     margin-bottom: 0rem;
   }
 
diff --git a/website/client/components/chat/chatCard.vue b/website/client/components/chat/chatCard.vue
index 4200a718a9..eae05f6668 100644
--- a/website/client/components/chat/chatCard.vue
+++ b/website/client/components/chat/chatCard.vue
@@ -13,7 +13,8 @@ div
       | {{msg.user}}
       .svg-icon(v-html="tierIcon", v-if='showShowTierStyle')
     p.time(v-b-tooltip="", :title="msg.timestamp | date")
-      span(v-if="msg.username") @{{ msg.username }} •
+      span.mr-1(v-if="msg.username") @{{ msg.username }}
+      span.mr-1(v-if="msg.username") •
       span {{ msg.timestamp | timeAgo }}
     .text(v-html='atHighlight(parseMarkdown(msg.text))')
     hr
@@ -29,13 +30,12 @@ div
         .svg-icon(v-html="icons.delete")
         | {{$t('delete')}}
       .ml-auto.d-flex
-        .action.liked.d-flex.align-items-center(v-if='likeCount > 0')
+        .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount > 0', :class='{active: msg.likes[user._id]}')
           .svg-icon(v-html="icons.liked")
-          | + {{ likeCount }}
-        .action.d-flex.align-items-center(@click='like()', v-if='!inbox && msg.likes', :class='{active: msg.likes[user._id]}')
+          | +{{ likeCount }}
+        .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount === 0', :class='{active: msg.likes[user._id]}')
           .svg-icon(v-html="icons.like")
           span(v-if='!msg.likes[user._id]') {{ $t('like') }}
-          span(v-if='msg.likes[user._id]') {{ $t('liked') }}
 </template>
 
 <style lang="scss">
@@ -47,6 +47,7 @@ div
 </style>
 
 <style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
   @import '~client/assets/scss/tiers.scss';
 
   .mentioned-icon {
@@ -72,7 +73,7 @@ div
   }
 
   .card-body {
-    padding: 1rem 1rem 0.5rem 1rem;
+    padding: 1.25rem 1.25rem 0.75rem 1.25rem;
 
     .leader {
       margin-bottom: 0;
@@ -81,7 +82,7 @@ div
     h3 { // this is the user name
       cursor: pointer;
       display: inline-block;
-      font-size: 14px;
+      font-size: 16px;
 
       .svg-icon {
         width: 10px;
@@ -108,25 +109,24 @@ div
     color: #878190;
     margin-right: 1em;
     font-size: 12px;
+
+    :hover {
+      cursor: pointer;
+    }
+
+    .svg-icon {
+      color: #A5A1AC;
+      margin-right: .2em;
+      width: 16px;
+    }
   }
 
-  .action:hover {
-    cursor: pointer;
-  }
+  .active {
+    color: $purple-300;
 
-  .liked:hover {
-    cursor: default;
-  }
-
-  .action .svg-icon {
-    margin-right: .2em;
-    width: 16px;
-    display: inline-block;
-    color: #A5A1AC;
-  }
-
-  .action.active, .active .svg-icon {
-    color: #46a7d9
+    .svg-icon {
+      color: $purple-400;
+    }
   }
 </style>