diff --git a/website/client/components/avatar.vue b/website/client/components/avatar.vue
index 857982f142..807e3f6613 100644
--- a/website/client/components/avatar.vue
+++ b/website/client/components/avatar.vue
@@ -40,7 +40,7 @@
       span(v-if="member.items.currentMount", :class="'Mount_Head_' + member.items.currentMount")
       // Pet
       span.current-pet(v-if="member.items.currentPet", :class="'Pet-' + member.items.currentPet")
-  .class-badge.d-flex.justify-content-center(v-if="hasClass")
+  .class-badge.d-flex.justify-content-center(v-if="hasClass && !hideClassBadge")
     .align-self-center.svg-icon(v-html="icons[member.stats.class]")
 </template>
 
@@ -105,6 +105,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideClassBadge: {
+      type: Boolean,
+      default: false,
+    },
     withBackground: {
       type: Boolean,
     },
diff --git a/website/client/components/chat/autoComplete.vue b/website/client/components/chat/autoComplete.vue
index e953d81bbd..52f8b664e1 100644
--- a/website/client/components/chat/autoComplete.vue
+++ b/website/client/components/chat/autoComplete.vue
@@ -11,8 +11,10 @@ div.autocomplete-selection(v-if='searchResults.length > 0', :style='autocomplete
 </style>
 
 <script>
+import groupBy from 'lodash/groupBy';
+
 export default {
-  props: ['selections', 'text', 'coords', 'groupId'],
+  props: ['selections', 'text', 'coords', 'groupId', 'chat'],
   data () {
     return {
       currentSearch: '',
@@ -47,6 +49,14 @@ export default {
       this.searchActive = true;
       this.currentSearchPosition = newText.length - 1;
     },
+    chat () {
+      let usersThatMessage = groupBy(this.chat, 'user');
+      for (let userName in usersThatMessage) {
+        if (this.tmpSelections.indexOf(userName) === -1) {
+          this.tmpSelections.push(userName);
+        }
+      }
+    },
     async groupId () {
       if (!this.groupId) return;
       let members = await this.$store.dispatch('members:getGroupMembers', {groupId: this.groupId});
diff --git a/website/client/components/chat/chatMessages.vue b/website/client/components/chat/chatMessages.vue
index fd46dd12c4..f349291bfb 100644
--- a/website/client/components/chat/chatMessages.vue
+++ b/website/client/components/chat/chatMessages.vue
@@ -7,35 +7,64 @@
   .row
     .hr.col-12
 
-  .row(v-for="(msg, index) in chat", v-if='chat && Object.keys(cachedProfileData).length > 0')
+  div(v-for="(msg, index) in chat", v-if='chat && Object.keys(cachedProfileData).length > 0')
     // @TODO: is there a different way to do these conditionals? This creates an infinite loop
     //.hr(v-if='displayDivider(msg)')
       .hr-middle(v-once) {{ msg.timestamp }}
-    .col-2
-      avatar(v-if='cachedProfileData[msg.uuid]', :member="cachedProfileData[msg.uuid]", :avatarOnly="true")
-
-    .card.col-10
-      .card-block
-          h3.leader {{msg.user}}
-          p {{msg.timestamp | timeAgo}}
-          .text(v-markdown='msg.text')
-          hr
-          .action(@click='like(msg, index)', v-if='msg.likes', :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') }}
-          span.action( @click='copyAsTodo(msg)')
-            .svg-icon(v-html="icons.copy")
-            | {{$t('copyAsTodo')}}
-          span.action(v-if='user.contributor.admin || (!msg.sent && user.flags.communityGuidelinesAccepted)', @click='report(msg)')
-            .svg-icon(v-html="icons.report")
-            | {{$t('report')}}
-          span.action(v-if='msg.uuid === user._id', @click='remove(msg, index)')
-            .svg-icon(v-html="icons.delete")
-            | {{$t('delete')}}
-          span.action.float-right
-            .svg-icon(v-html="icons.liked")
-            | + {{ likeCount(msg) }}
+    .row(v-if='user._id !== msg.uuid')
+      .col-2
+        avatar(v-if='cachedProfileData[msg.uuid]',
+          :member="cachedProfileData[msg.uuid]", :avatarOnly="true",
+          :hideClassBadge='true')
+      .card.col-8
+        .card-block
+            h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])') {{msg.user}}
+            p {{msg.timestamp | timeAgo}}
+            .text(v-markdown='msg.text')
+            hr
+            .action(@click='like(msg, index)', v-if='msg.likes', :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') }}
+            span.action( @click='copyAsTodo(msg)')
+              .svg-icon(v-html="icons.copy")
+              | {{$t('copyAsTodo')}}
+            span.action(v-if='user.contributor.admin || (msg.uuid !== user._id && user.flags.communityGuidelinesAccepted)', @click='report(msg)')
+              .svg-icon(v-html="icons.report")
+              | {{$t('report')}}
+            span.action(v-if='msg.uuid === user._id', @click='remove(msg, index)')
+              .svg-icon(v-html="icons.delete")
+              | {{$t('delete')}}
+            span.action.float-right
+              .svg-icon(v-html="icons.liked")
+              | + {{ likeCount(msg) }}
+    .row(v-if='user._id === msg.uuid')
+      .card.col-8.offset-2
+        .card-block
+            h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])') {{msg.user}}
+            p {{msg.timestamp | timeAgo}}
+            .text(v-markdown='msg.text')
+            hr
+            .action(@click='like(msg, index)', v-if='msg.likes', :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') }}
+            span.action( @click='copyAsTodo(msg)')
+              .svg-icon(v-html="icons.copy")
+              | {{$t('copyAsTodo')}}
+            span.action(v-if='user.contributor.admin || (msg.uuid !== user._id && user.flags.communityGuidelinesAccepted)', @click='report(msg)')
+              .svg-icon(v-html="icons.report")
+              | {{$t('report')}}
+            span.action(v-if='msg.uuid === user._id', @click='remove(msg, index)')
+              .svg-icon(v-html="icons.delete")
+              | {{$t('delete')}}
+            span.action.float-right
+              .svg-icon(v-html="icons.liked")
+              | + {{ likeCount(msg) }}
+      .col-2
+        avatar(v-if='cachedProfileData[msg.uuid]',
+          :member="cachedProfileData[msg.uuid]", :avatarOnly="true",
+          :hideClassBadge='true')
 </template>
 
 <style lang="scss" scoped>
@@ -64,7 +93,7 @@
   }
 
   .card {
-    margin-bottom: 1em;
+    margin-bottom: .5em;
   }
 
   .text {
@@ -102,6 +131,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { mapState } from 'client/libs/store';
 import markdownDirective from 'client/directives/markdown';
 import Avatar from '../avatar';
+import styleHelper from 'client/mixins/styleHelper';
 
 import copyAsTodoModal from './copyAsTodoModal';
 import reportFlagModal from './reportFlagModal';
@@ -114,6 +144,7 @@ import reportIcon from 'assets/svg/report.svg';
 
 export default {
   props: ['chat', 'groupId', 'groupName'],
+  mixins: [styleHelper],
   components: {
     copyAsTodoModal,
     reportFlagModal,
diff --git a/website/client/components/groups/tavern.vue b/website/client/components/groups/tavern.vue
index c8e2af96a8..ee02581ea8 100644
--- a/website/client/components/groups/tavern.vue
+++ b/website/client/components/groups/tavern.vue
@@ -11,7 +11,7 @@
 
         .row
           textarea(placeholder="Friendly reminder: this is an all-ages chat, so please keep content and language appropriate! Consult the Community Guidelines in the sidebar if you have questions.", v-model='newMessage', @keydown='updateCarretPosition')
-          autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :groupId='groupId')
+          autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :groupId='groupId', :chat='group.chat')
           button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
           button.btn.btn-secondary.float-left(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
 
@@ -197,6 +197,7 @@
 
   .grassy-meadow-backdrop {
     background-image: url('~assets/images/tavern_backdrop_web.png');
+    background-size: cover;
     width: 100%;
     height: 246px;
   }
@@ -349,10 +350,10 @@ export default {
           name: 'beffymaroo',
           type: 'Staff',
         },
-        {
-          name: 'lefnire',
-          type: 'Staff',
-        },
+        // {
+        //   name: 'lefnire',
+        //   type: 'Staff',
+        // },
         {
           name: 'Lemoness',
           type: 'Staff',
@@ -397,10 +398,10 @@ export default {
           name: 'Cantras',
           type: 'Moderator',
         },
-        {
-          name: 'Daniel the Bard',
-          type: 'Moderator',
-        },
+        // {
+        //   name: 'Daniel the Bard',
+        //   type: 'Moderator',
+        // },
         {
           name: 'deilann 5.0.5b',
           type: 'Moderator',
@@ -478,6 +479,10 @@ export default {
       });
       this.group.chat.unshift(response.message);
       this.newMessage = '';
+
+      // @TODO: I would like to not reload everytime we send. Realtime/Firebase?
+      let chat = await this.$store.dispatch('chat:getChat', {groupId: this.group._id});
+      this.group.chat = chat;
     },
     async fetchRecentMessages () {
       this.group = await this.$store.dispatch('guilds:getGroup', {groupId: TAVERN_ID});