diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 8fc8fde..f1925fe 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -140,7 +140,7 @@ $chat-text-size: 0.7pt;
     margin-left: 30% !important;
     text-align: right;
     .bubble {
-        background-color: #00eea0;
+        background-color: #88eec0;
         border-radius: 10px 10px 0 10px;
         padding: 8px;
     }
@@ -148,8 +148,23 @@ $chat-text-size: 0.7pt;
         padding: 0px;
         overflow: hidden;
     }
-    .message {
-        color: white;
+    .sender {
+        font-family: 'Titillium Web', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 10 * $chat-text-size;
+        color: rgba(#000000, 0.6);
+        display: inline-block;
+        margin-left: 40px;
+        margin-right: 8px;
+    }
+    .time {
+        font-family: 'Titillium Web', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 10 * $chat-text-size;
+        color: rgba(#000000, 0.6);
+        display: inline-block;
     }
 }
 
@@ -159,12 +174,16 @@ $chat-text-size: 0.7pt;
     text-align: left;
     position: relative;
     .bubble {
-        background-color: white;
-        border-radius: 10px 10px 10px 0;
+        background-color: #eeeeee;
+        border-radius: 0px 10px 10px 10px;
         padding: 8px;
         border-width: 1px !important;
         border-style: solid !important;
-        border-color: #cccccc !important;
+        border-color: #eeeeee !important;
+        margin-left: 40px;
+    }
+    .audio-bubble {
+        margin-left: 40px;
     }
     .bubble.image-bubble {
         padding: 0px;
@@ -177,8 +196,22 @@ $chat-text-size: 0.7pt;
         border: 2px solid white;
     }
     .sender {
-        position: relative;
-        left: 40px;
+        font-family: 'Titillium Web', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 10 * $chat-text-size;
+        color: rgba(#000000, 0.6);
+        display: inline-block;
+        margin-left: 40px;
+        margin-right: 8px;
+    }
+    .time {
+        font-family: 'Titillium Web', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 10 * $chat-text-size;
+        color: rgba(#000000, 0.6);
+        display: inline-block;
     }
 }
 
@@ -193,7 +226,7 @@ $chat-text-size: 0.7pt;
 .message {
     font-family: 'Titillium Web', sans-serif;
     font-weight: 400;
-    font-size: 22 * $chat-text-size;
+    font-size: 14 * $chat-text-size;
     color: #000000;
     overflow-wrap: break-word;
     .edit-marker {
@@ -207,8 +240,8 @@ $chat-text-size: 0.7pt;
     font-weight: 300;
     font-style: italic;
     font-size: 15 * $chat-text-size;
-    text-align: center;
     color: #1c242a;
+    display: inline-block;
 }
 
 .statusEvent {
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 379a96c..07dc4a4 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,3 +1,3 @@
-$background: #008860;
+$background: #ffffff;
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
\ No newline at end of file
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 662ca48..8e0aaa5 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -60,7 +60,7 @@
       <v-row class="ma-0 pa-0">
         <!-- CONTACT IS TYPING -->
         <div class="typing">
-          {{ contactIsTyping ? "Someone is typing..." : "" }}
+          {{ typingMembersString }}
         </div>
       </v-row>
       <v-row class="input-area-inner">
@@ -215,7 +215,7 @@ export default {
     return {
       events: [],
       currentInput: "",
-      contactIsTyping: false,
+      typingMembers: [],
       timelineWindow: null,
       scrollPosition: null,
       currentImageInput: null,
@@ -261,6 +261,16 @@ export default {
     sendButtonDisabled() {
       return this.currentInput.length == 0;
     },
+    typingMembersString() {
+      const count = this.typingMembers.length;
+      if (count > 1) {
+        return "" + count + " members are typing";
+      } else if (count > 0) {
+        return this.typingMembers[0].name + " is typing";
+      } else {
+        return "";
+      }
+    }
   },
 
   watch: {
@@ -271,7 +281,7 @@ export default {
         // Clear old events
         this.events = [];
         this.timelineWindow = null;
-        this.contactIsTyping = false;
+        this.typingMembers = [];
         
         if (!room) {
           return; // no room
@@ -437,11 +447,21 @@ export default {
       }
     },
 
-    onUserTyping(event) {
-      if (event.getRoomId() !== this.roomId) {
+    onUserTyping(event, member) {
+      if (member.roomId !== this.roomId) {
         return; // Not for this room
       }
-      console.log("Typing:", event);
+      if (member.typing) {
+        if (!this.typingMembers.includes(member)) {
+          this.typingMembers.push(member);
+        }
+      } else {
+        const index = this.typingMembers.indexOf(member);
+        if (index > -1) {
+          this.typingMembers.splice(index, 1);   
+        }
+      }
+      console.log("Typing: ", this.typingMembers);
     },
 
     sendMessage() {
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index dfd6ce5..816c066 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -4,7 +4,7 @@
       <v-col
         class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0"
       >
-        <v-avatar>
+        <v-avatar size="40">
           <v-img :src="room.avatar" />
         </v-avatar>
       </v-col>
diff --git a/src/components/messages/MessageIncomingAudio.vue b/src/components/messages/MessageIncomingAudio.vue
index ffa06c0..d18876e 100644
--- a/src/components/messages/MessageIncomingAudio.vue
+++ b/src/components/messages/MessageIncomingAudio.vue
@@ -1,12 +1,10 @@
 <template>
-  <div>
-    <div class="messageIn">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+  <div class="messageIn">
       <div class="audio-bubble">
         <audio controls :src="src">Audio file</audio>
         <QuickReactions :event="event" :reactions="reactions" />
       </div>
-      <v-avatar class="avatar" size="40" color="grey">
+      <v-avatar class="avatar" size="32" color="#ededed">
         <img
           v-if="messageEventAvatar(event)"
           :src="messageEventAvatar(event)"
@@ -15,7 +13,7 @@
           messageEventDisplayName(event).substring(0, 1).toUpperCase()
         }}</span>
       </v-avatar>
-    </div>
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
     </div>
diff --git a/src/components/messages/MessageIncomingImage.vue b/src/components/messages/MessageIncomingImage.vue
index 4bb2f89..df890a0 100644
--- a/src/components/messages/MessageIncomingImage.vue
+++ b/src/components/messages/MessageIncomingImage.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <div class="messageIn">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+  <div class="messageIn">
       <div class="bubble image-bubble">
         <v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
         <QuickReactions :event="event" :reactions="reactions" />
@@ -15,7 +13,7 @@
           messageEventDisplayName(event).substring(0, 1).toUpperCase()
         }}</span>
       </v-avatar>
-    </div>
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
     </div>
diff --git a/src/components/messages/MessageIncomingText.vue b/src/components/messages/MessageIncomingText.vue
index da50f04..1fd9eb8 100644
--- a/src/components/messages/MessageIncomingText.vue
+++ b/src/components/messages/MessageIncomingText.vue
@@ -1,8 +1,6 @@
 <template>
-  <div>
-    <div class="messageIn">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
-      <v-avatar class="avatar" size="40" color="grey">
+  <div class="messageIn">
+      <v-avatar class="avatar" size="32" color="#ededed">
         <img
           v-if="messageEventAvatar(event)"
           :src="messageEventAvatar(event)"
@@ -18,7 +16,7 @@
         </div>
         <QuickReactions :event="event" :reactions="reactions" />
       </div>
-    </div>
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
     </div>
diff --git a/src/components/messages/MessageOutgoingAudio.vue b/src/components/messages/MessageOutgoingAudio.vue
index 95d896c..8571179 100644
--- a/src/components/messages/MessageOutgoingAudio.vue
+++ b/src/components/messages/MessageOutgoingAudio.vue
@@ -1,16 +1,14 @@
 <template>
-  <div>
-    <div class="messageOut">
-      <div class="sender">{{ "You" }}</div>
+  <div class="messageOut">
       <div class="audio-bubble">
         <audio controls :src="src">Audio file</audio>
         <QuickReactions :event="event" :reactions="reactions" />
       </div>
-      <div class="status">{{ event.status }}</div>
-    </div>
+      <!-- <div class="sender">{{ "You" }}</div> -->
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
     </div>
+      <div class="status">{{ event.status }}</div>
   </div>
 </template>
 
diff --git a/src/components/messages/MessageOutgoingImage.vue b/src/components/messages/MessageOutgoingImage.vue
index 00e4dc4..b31697c 100644
--- a/src/components/messages/MessageOutgoingImage.vue
+++ b/src/components/messages/MessageOutgoingImage.vue
@@ -1,15 +1,13 @@
 <template>
-  <div>
-    <div class="messageOut">
-      <div class="sender">{{ "You" }}</div>
+  <div class="messageOut">
       <div class="bubble image-bubble">
         <v-img :aspect-ratio="16/9" ref="image" :src="src" cover />
         <QuickReactions :event="event" :reactions="reactions" />
       </div>
-      <div class="status">{{ event.status }}</div>
-    </div>
+      <!-- <div class="sender">{{ "You" }}</div> -->
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
+      <div class="status">{{ event.status }}</div>
     </div>
   </div>
 </template>
diff --git a/src/components/messages/MessageOutgoingText.vue b/src/components/messages/MessageOutgoingText.vue
index 29c127f..8f94c5c 100644
--- a/src/components/messages/MessageOutgoingText.vue
+++ b/src/components/messages/MessageOutgoingText.vue
@@ -1,18 +1,16 @@
 <template>
-  <div>
-    <div class="messageOut">
-      <div class="sender">{{ "You" }}</div>
+  <div class="messageOut">
       <div class="bubble">
         <div class="message">{{ event.getContent().body }}
           <span class="edit-marker" v-if="event.replacingEventId()">(edited)</span>
         </div>
         <QuickReactions :event="event" :reactions="reactions" />
       </div>
-      <div class="status">{{ event.status }}</div>
-    </div>
+      <!-- <div class="sender">{{ "You" }}</div> -->
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
     </div>
+      <div class="status">{{ event.status }}</div>
   </div>
 </template>