diff --git a/.gitignore b/.gitignore
index 1c751e9d..f697a247 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,7 @@ yarn-error.log*
 # Editor directories and files
 .idea
 .vscode
+*.code-workspace
 *.suo
 *.ntvs*
 *.njsproj
diff --git a/demo/src/App.vue b/demo/src/App.vue
index f2ec2300..30164d64 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -26,9 +26,22 @@
       :confirmationDeletionMessage="'Are you sure? (you can customize this message)'"
       :titleImageUrl="titleImageUrl"
       :disableUserListToggle="false"
+      :chatListImageUrl="chatListImageUrl"
+      :placeholder="placeholder"
+      :multipleChatsEnabled="multipleChatsEnabled"
+      :chatList="chatList"
+      :chatListTitle="chatListTitle"
+      :messageListHeaderTitleClickable="false"
+      :chatListHeaderTitleClickable="true"
+      :messageIconClickable="true"
       @onType="handleOnType"
       @edit="editMessage"
       @remove="removeMessage"
+      @changeCurrentChat="handleChangeCurrentChat"
+      @messageListMountedUpdated="handleMessageListMountedUpdated"
+      @messageListHeaderTitleClicked="messageListHeaderTitleClicked"
+      @chatListHeaderTitleClicked="chatListHeaderTitleClicked"
+      @messageIconClicked="messageIconClicked"
     >
       <template v-slot:text-message-toolbox="scopedProps">
         <button v-if="!scopedProps.me && scopedProps.message.type==='text'" @click.prevent="like(scopedProps.message.id)">
@@ -103,6 +116,9 @@
       :messageStyling="messageStyling"
       :onMessage="sendMessage"
       :onTyping="handleTyping"
+      :multipleChatsEnabled="multipleChatsEnabled"
+      :chatList="chatList"
+      @multipleChatsEnabledChange="handleMultipleChatsEnabledChange"
     />
     <Footer
       :chosenColor="chosenColor"
@@ -112,8 +128,7 @@
 </template>
 
 <script>
-import messageHistory from './messageHistory'
-import chatParticipants from './chatProfiles'
+import chatHistory from './messageHistory'
 import Header from './Header.vue'
 import Footer from './Footer.vue'
 import TestArea from './TestArea.vue'
@@ -128,11 +143,9 @@ export default {
   },
   data() {
     return {
-      participants: chatParticipants,
-      titleImageUrl:
-        'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
-      messageList: messageHistory,
-      newMessagesCount: 0,
+      titleImageUrl: "https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png",
+      chatListImageUrl: "https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png",
+      chatHistory: chatHistory,
       isChatOpen: false,
       showTypingIndicator: '',
       colors: null,
@@ -140,38 +153,43 @@ export default {
       chosenColor: null,
       alwaysScrollToBottom: true,
       messageStyling: true,
-      userIsTyping: false
+      userIsTyping: false,
+      placeholder: 'Write something...',
+      multipleChatsEnabled: true,
+      currentChatID: Object.keys(chatHistory)[0],
+      chatListTitle: 'My chats'
     }
   },
   created() {
     this.setColor('blue')
   },
   methods: {
-    sendMessage(text) {
+    sendMessage(text, chatID) {
       if (text.length > 0) {
-        this.newMessagesCount = this.isChatOpen
-          ? this.newMessagesCount
-          : this.newMessagesCount + 1
         this.onMessageWasSent({
           author: 'support',
           type: 'text',
           id: Math.random(),
           data: { text }
-        })
+        }, chatID)
       }
     },
-    handleTyping(text) {
+    handleTyping(text, chatID) {
       this.showTypingIndicator =
-        text.length > 0
+        text.length > 0 && (chatID === undefined || this.currentChatID == chatID)
           ? this.participants[this.participants.length - 1].id
           : ''
     },
-    onMessageWasSent(message) {
-      this.messageList = [...this.messageList, Object.assign({}, message, {id: Math.random()})]
+    onMessageWasSent(message, chatID) {
+      const msg = Object.assign({}, message, {id: Math.random(), read: (message.author === this.myId)})
+      if (chatID !== undefined) {
+        this.chatMessageList(chatID).push(msg)
+      } else {
+        this.messageList.push(msg)
+      }
     },
     openChat() {
       this.isChatOpen = true
-      this.newMessagesCount = 0
     },
     closeChat() {
       this.isChatOpen = false
@@ -204,12 +222,52 @@ export default {
       m.type = 'system';
       m.data.text = 'This message has been removed';
     },
+    handleChangeCurrentChat(newCurrentChatID) {
+      this.showTypingIndicator = ''
+      this.currentChatID = newCurrentChatID
+      const chat = this.chatHistory[this.currentChatID]
+      this.titleImageUrl = chat.imageUrl
+      this.title = chat.name
+    },
+    handleMultipleChatsEnabledChange(newMultipleChatsEnabled) {
+      this.multipleChatsEnabled = newMultipleChatsEnabled
+      this.currentChatID = Object.keys(this.chatHistory)[0]
+    },
+    handleMessageListMountedUpdated() {
+      if (this.isChatOpen) {
+        this.markCurrentChatRead()
+      }
+    },
+    messageListHeaderTitleClicked() {
+      console.log("messageListHeaderTitleClicked")
+    },
+    chatListHeaderTitleClicked() {
+      console.log("chatListHeaderTitleClicked")
+    },
+    messageIconClicked(user) {
+      console.log("messageIconClicked user:")
+      console.log(user)
+    },
     like(id){
       const m = this.messageList.findIndex(m => m.id === id);
       var msg = this.messageList[m];
       msg.liked = !msg.liked;
       this.$set(this.messageList, m, msg);
-    }
+    },
+    markCurrentChatRead() {
+      this.messageList.forEach((msg) => {
+        if (!msg.read) {
+          msg.read = true
+        }
+      })
+    },
+    chatMessageList(chatID) {
+      const chat = this.chatHistory[chatID];
+      if (chat === undefined) {
+        return undefined;
+      }
+      return chat.messages;
+    },
   },
   computed: {
     linkColor() {
@@ -219,10 +277,53 @@ export default {
     },
     backgroundColor() {
       return this.chosenColor === 'dark' ? this.colors.messageList.bg : '#fff'
+    },
+    messageList() {
+      const chat = this.chatHistory[this.currentChatID];
+      if (chat === undefined) {
+        return undefined;
+      }
+      return chat.messages;
+    },
+    participants() {
+      const chat = this.chatHistory[this.currentChatID];
+      if (chat === undefined) {
+        return [];
+      }
+      return chat.participants;
+    },
+    chatList() {
+      var chats = []
+      Object.entries(this.chatHistory).forEach(([chatKey, chat]) => {
+        var unreadCount = 0
+        chat.messages.forEach((msg) => {
+          if (!msg.read) {
+            unreadCount++
+          }
+        })
+        chats.push(
+          {
+            id: chatKey,
+            name: chat.name,
+            imageUrl: chat.imageUrl,
+            unreadCount: unreadCount
+          }
+        )
+      })
+      return chats
+    },
+    newMessagesCount() {
+      var totalUnreadCount = 0
+      this.chatList.forEach((chat) => {
+        totalUnreadCount += chat.unreadCount
+      })
+      return totalUnreadCount
     }
   },
   mounted(){
-    this.messageList.forEach(x=>x.liked = false);
+    Object.entries(this.chatHistory).forEach(([_, chat]) => {
+      chat.messages.forEach(msg => msg.liked = false)
+    })
   }
 }
 </script>
diff --git a/demo/src/TestArea.vue b/demo/src/TestArea.vue
index 245ba0b6..04f45571 100644
--- a/demo/src/TestArea.vue
+++ b/demo/src/TestArea.vue
@@ -7,6 +7,16 @@
     <form class="demo-test-area" @submit.prevent="_handleSubmit" @keyup="_handleTyping">
       <div class="demo-test-area--preamble">
         <p>Test the chat window by sending a message:</p>
+        <p class="text-center messageStyling">
+          Multiple chat groups?
+          <input :checked="multipleChatsEnabled" type="checkbox" @change.prevent="_multipleChatsEnabledChanged">
+        </p>
+        <p v-if="multipleChatsEnabled">
+          To:
+          <select name="chat" id="id" v-model="chatID">
+            <option v-for="chat in chatList" :key="chat.id" :value="chat.id">{{ chat.name }}</option>
+          </select>
+        </p>
         <p v-if="userIsTyping">User is typing...</p>
       </div>
       <textarea ref="textArea" class="demo-test-area--text" placeholder="Write a test message...." :style="textareaStyle" />
@@ -46,21 +56,34 @@ export default {
     messageStyling: {
       type: Boolean,
       required: true
+    },
+    chatList: {
+      type: Array,
+      required: true
+    },
+    multipleChatsEnabled: {
+      type: Boolean,
+      required: true
     }
   },
   data() {
     return {
-      userIsTyping: false
+      userIsTyping: false,
+      chatID: this.chatList[0].id
     }
   },
   methods: {
     _handleSubmit() {
-      this.onMessage(this.$refs.textArea.value)
+      this.onMessage(this.$refs.textArea.value, this.chatID)
       this.$refs.textArea.value = ''
-      this.onTyping('')
+      this.onTyping('', this.chatID)
     },
     _handleTyping() {
-      this.onTyping(this.$refs.textArea.value)
+      this.onTyping(this.$refs.textArea.value, this.chatID)
+    },
+    _multipleChatsEnabledChanged(e) {
+      this.chatID = this.chatList[0].id
+      this.$emit("multipleChatsEnabledChange", e.srcElement.checked)
     }
   },
   computed: {
diff --git a/demo/src/chatProfiles.js b/demo/src/chatProfiles.js
deleted file mode 100644
index 0684851a..00000000
--- a/demo/src/chatProfiles.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default [
-  {
-    id: 'mattmezza',
-    name: 'Matteo',
-    imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
-  },
-  {
-    id: 'support',
-    name: 'Support',
-    imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
-  }
-]
diff --git a/demo/src/colors.js b/demo/src/colors.js
index 2f545cbb..b0336c4e 100644
--- a/demo/src/colors.js
+++ b/demo/src/colors.js
@@ -25,6 +25,14 @@ export default {
     userList: {
       bg: '#fff',
       text: '#212121'
+    },
+    chatList: {
+      bg: '#fff',
+      text: '#212121'
+    },
+    chatListBadge: {
+      bg: '#D32F2F',
+      text: '#fff'
     }
   },
   green: {
@@ -53,7 +61,15 @@ export default {
     userList: {
       bg: '#fff',
       text: '#212121'
-    }
+    },
+    chatList: {
+      bg: '#fff',
+      text: '#212121'
+    },
+    chatListBadge: {
+      bg: '#388E3C',
+      text: '#fff'
+    },
   },
   blue: {
     header: {
@@ -81,7 +97,15 @@ export default {
     userList: {
       bg: '#fff',
       text: '#212121'
-    }
+    },
+    chatList: {
+      bg: '#fff',
+      text: '#212121'
+    },
+    chatListBadge: {
+      bg: '#4e8cff',
+      text: '#ffffff'
+    },
   },
   dark: {
     header: {
@@ -109,6 +133,14 @@ export default {
     userList: {
       bg: '#2c3e50',
       text: '#ecf0f1'
+    },
+    chatList: {
+      bg: '#2c3e50',
+      text: '#ecf0f1'
+    },
+    chatListBadge: {
+      bg: '#95a5a6',
+      text: '#ecf0f1'
     }
   }
 }
diff --git a/demo/src/messageHistory.js b/demo/src/messageHistory.js
index cbdabb16..7551d967 100644
--- a/demo/src/messageHistory.js
+++ b/demo/src/messageHistory.js
@@ -1,25 +1,46 @@
-export default [
-  { type: 'text', author: `me`, id: 0, data: { text: `Why don't they have salsa on the table?` } },
-  { type: 'text', author: `mattmezza`, id: 1, data: { text: `What do you need salsa for?` } },
-  { type: 'text', author: `me`, id: 2, data: { text: `Salsa is now the number one condiment in America.` } },
-  { type: 'text', author: `mattmezza`, id: 3, data: { text: `You know why? Because people like to say 'salsa.' 'Excuse me, do you have salsa?' 'We need more salsa.' 'Where is the salsa? No salsa?'` } },
-  { type: 'text', author: `me`, id: 4, data: { text: `You know it must be impossible for a Spanish person to order seltzer and not get salsa. 'I wanted seltzer, not salsa.'` } },
-  { type: 'text', author: `mattmezza`, id: 5, data: { text: `Don't you know the difference between seltzer and salsa?? You have the seltezer after the salsa!` } },
-  { type: 'text', author: `me`, id: 6, data: { text: `See, this should be a show. This is the show. ` } },
-  { type: 'text', author: `mattmezza`, id: 7, data: { text: `What?` } },
-  { type: 'text', author: `me`, id: 8, data: { text: `This. Just talking.` } },
-  { type: 'text', author: `mattmezza`, id: 9, data: { text: `Yeah, right.` } },
-  { type: 'text', author: `me`, id: 10, data: { text: `I'm really serious. I think that's a good idea. ` } },
-  { type: 'text', author: `mattmezza`, id: 11, data: { text: `Just talking? Well what's the show about?` } },
-  { type: 'text', author: `me`, id: 12, data: { text: `It's about nothing.` } },
-  { type: 'text', author: `mattmezza`, id: 100, data: { text: `No story?` } },
-  { type: 'system', id: 13, data: { text: 'You have been transferred to another operator', meta: '04-07-2018 15:57' } },
-  { type: 'file', author: `support`, id: 14, data: { text: `No forget the story. `, file: { name: 'awesome', url: 'https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif' } } },
-  { type: 'file', author: `me`, id: 15, data: { text: `What about this one instead?? `, file: { url: 'http://www.quickmeme.com/img/2d/2d95cc80f9a2a2578a8f632eebecddcc1c12e5b08ab85f81a5d401670d5f36c1.jpg' }, meta: '✓✓ Read' } },
-  { type: 'text', author: `support`, id: 16, data: { text: `You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. ` } },
-  { type: 'emoji', author: `me`, id: 17, data: { emoji: `😋` } },
-  { type: 'text', author: `me`, id: 18, data: { text: `Do you read me...`, meta: '✓✓ Read' } },
-  { type: 'text', author: `me`, id: 19, data: { text: `...or not?`, meta: '✓ Delivered' } },
-  { type: 'system', id: 20, data: { text: 'User changed security key', meta: '04-08-2018 15:57' } },
-  { type: 'text', author: `support`, id: 21, data: { text: `What about suggestions?` }, suggestions: ["Looks good!", "It's OK.", "Uhh.. Do I really have to say something?", "This suggestion is way too long for css purpose. Let's make it long... Longer, and more and more.. Never ending."] }
-]
+export default {
+  "1": {
+    name: 'Matteo + support',
+    imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4',
+    participants: [
+      { id: 'mattmezza', name: 'Matteo', imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4' },
+      { id: 'support', name: 'Support', imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4' }
+    ],
+    messages: [
+      { type: 'text', author: `me`, id: 0, data: { text: `Why don't they have salsa on the table?` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 1, data: { text: `What do you need salsa for?` }, read: true },
+      { type: 'text', author: `me`, id: 2, data: { text: `Salsa is now the number one condiment in America.` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 3, data: { text: `You know why? Because people like to say 'salsa.' 'Excuse me, do you have salsa?' 'We need more salsa.' 'Where is the salsa? No salsa?'` }, read: true },
+      { type: 'text', author: `me`, id: 4, data: { text: `You know it must be impossible for a Spanish person to order seltzer and not get salsa. 'I wanted seltzer, not salsa.'` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 5, data: { text: `Don't you know the difference between seltzer and salsa?? You have the seltezer after the salsa!` }, read: true },
+      { type: 'text', author: `me`, id: 6, data: { text: `See, this should be a show. This is the show. ` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 7, data: { text: `What?` }, read: true },
+      { type: 'text', author: `me`, id: 8, data: { text: `This. Just talking.` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 9, data: { text: `Yeah, right.` }, read: true },
+      { type: 'text', author: `me`, id: 10, data: { text: `I'm really serious. I think that's a good idea. ` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 11, data: { text: `Just talking? Well what's the show about?` }, read: true },
+      { type: 'text', author: `me`, id: 12, data: { text: `It's about nothing.` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 100, data: { text: `No story?` }, read: true },
+      { type: 'system', id: 13, data: { text: 'You have been transferred to another operator', meta: '04-07-2018 15:57' }, read: true },
+      { type: 'file', author: `support`, id: 14, data: { text: `No forget the story. `, file: { name: 'awesome', url: 'https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif' }, read: true }, read: true },
+      { type: 'file', author: `me`, id: 15, data: { text: `What about this one instead?? `, file: { url: 'http://www.quickmeme.com/img/2d/2d95cc80f9a2a2578a8f632eebecddcc1c12e5b08ab85f81a5d401670d5f36c1.jpg' }, meta: '✓✓ Read' }, read: true },
+      { type: 'text', author: `support`, id: 16, data: { text: `You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. ` }, read: false },
+      { type: 'emoji', author: `me`, id: 17, data: { emoji: `😋` }, read: true },
+      { type: 'text', author: `me`, id: 18, data: { text: `Do you read me...`, meta: '✓✓ Read' }, read: true },
+      { type: 'text', author: `me`, id: 19, data: { text: `...or not?`, meta: '✓ Delivered' }, read: true },
+      { type: 'system', id: 20, data: { text: 'User changed security key', meta: '04-08-2018 15:57' }, read: false },
+      { type: 'text', author: `support`, id: 21, data: { text: `What about suggestions?` }, suggestions: ["Looks good!", "It's OK.", "Uhh.. Do I really have to say something?", "This suggestion is way too long for css purpose. Let's make it long... Longer, and more and more.. Never ending."], read: false }
+    ]
+  },
+  "2": {
+    name: 'Bob',
+    imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4',
+    participants: [
+      { id: 'bob', name: 'Bob', imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4' }
+    ],
+    messages: [
+      { type: 'text', author: `me`, id: 0, data: { text: `Why don't they have salsa on the table?` }, read: true },
+      { type: 'text', author: `bob`, id: 1, data: { text: `What do you need salsa for?` }, read: false }
+    ]
+  }
+}
diff --git a/src/ChatList.vue b/src/ChatList.vue
new file mode 100644
index 00000000..1d5d34f0
--- /dev/null
+++ b/src/ChatList.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="chat-list" :style="{background: colors.chatList.bg}">
+    <table>
+      <tbody>
+        <tr
+          v-for="chat in chatList"
+          :key="chat.id"
+          class="chat-list-row"
+          @click="openChat(chat.id)"
+        >
+          <td class="chat-img-td">
+            <img :src="chat.imageUrl" class="chat-img" />
+          </td>
+          <td class="chat-name-td" :style="{color: colors.chatList.text}">
+            {{ chat.name }}
+          </td>
+          <td class="badge-td">
+            <svg
+              width="22px"
+              height="22px"
+              viewBox="0 0 32 32"
+              class="bi bi-circle-fill chat-badge"
+              :fill="chat.unreadCount ? colors.chatListBadge.bg : colors.chatList.bg"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="16" cy="16" r="16" />
+              <text
+                x="50%"
+                y="55%"
+                dominant-baseline="middle"
+                text-anchor="middle"
+                :fill="chat.unreadCount ? colors.chatListBadge.text : colors.chatList.bg"
+              >
+                {{ chat.unreadCount }}
+              </text>
+            </svg>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    chatList: {
+      type: Array,
+      required: true
+    },
+    colors: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    openChat(chatID) {
+      this.$emit('changeCurrentChat', chatID)
+      this.$emit('showMessageList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-list {
+  box-sizing: border-box;
+  height: 100%;
+  overflow: auto;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 8px;
+}
+.chat-list-row {
+  cursor: pointer;
+}
+.chat-img-td {
+  box-sizing: border-box;
+  text-align: center;
+  width: 50px;
+}
+.chat-img {
+  box-sizing: border-box;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  margin-right: 5px;
+  display: block;
+}
+.chat-name-td {
+  box-sizing: border-box;
+  font-size: 20px;
+  vertical-align: middle;
+  text-align: left;
+}
+.badge-td {
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  width: 24px;
+}
+.chat-badge {
+  box-sizing: border-box;
+  font-size: 17px;
+}
+table {
+  box-sizing: border-box;
+  width: 100%;
+  border-collapse: collapse;
+}
+tr > td {
+  padding-top: 7px;
+}
+</style>
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 72e92f43..ae815f7b 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -2,18 +2,38 @@
   <div class="sc-chat-window" :class="{opened: isOpen, closed: !isOpen}">
     <Header
       v-if="showHeader"
-      :title="title"
+      :show-chat-list-button="multipleChatsEnabled && !showingChatList"
+      :title="showingChatList ? chatListTitle : title"
+      :image-url="showingChatList ? chatListImageUrl : titleImageUrl"
       :colors="colors"
+      :disable-list-toggle="disableUserListToggle || showingChatList"
+      :header-title-clickable="
+        (showingMessageList && messageListHeaderTitleClickable) ||
+        (showingChatList && chatListHeaderTitleClickable)
+      "
       @close="$emit('close')"
-      @userList="handleUserListToggle"
+      @toggleUserListMessageList="handleToggleUserListMessageList"
+      @showChatList="handleShowChatList"
+      @headerTitleClicked="headerTitleClicked"
     >
       <template>
         <slot name="header"> </slot>
       </template>
     </Header>
-    <UserList v-if="showUserList" :colors="colors" :participants="participants" />
+    <UserList v-if="showingUserList" :colors="colors" :participants="participants" />
+    <ChatList
+      v-if="showingChatList"
+      :colors="colors"
+      :chat-list="chatList"
+      @changeCurrentChat="
+        (chatID) => {
+          $emit('changeCurrentChat', chatID)
+        }
+      "
+      @showMessageList="handleShowMessageList"
+    />
     <MessageList
-      v-if="!showUserList"
+      v-if="showingMessageList"
       :messages="messages"
       :participants="participants"
       :show-typing-indicator="showTypingIndicator"
@@ -24,8 +44,12 @@
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
       :message-styling="messageStyling"
+      :my-id="myId"
+      :message-icon-clickable="messageIconClickable"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
+      @messageListMountedUpdated="$emit('messageListMountedUpdated')"
+      @messageIconClicked="$emit('messageIconClicked', $event)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>
@@ -47,15 +71,24 @@
         <slot name="text-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
         </slot>
       </template>
+      <template v-slot:file-message-toolbox="scopedProps">
+        <slot name="file-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
+      <template v-slot:emoji-message-toolbox="scopedProps">
+        <slot name="emoji-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
     </MessageList>
     <UserInput
-      v-if="!showUserList"
+      v-if="showingMessageList"
       :show-emoji="showEmoji"
       :on-submit="onUserInputSubmit"
       :suggestions="getSuggestions()"
       :show-file="showFile"
       :placeholder="placeholder"
       :colors="colors"
+      :my-id="myId"
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
     />
@@ -63,23 +96,36 @@
 </template>
 
 <script>
+import {mapState} from './store/'
 import Header from './Header.vue'
 import MessageList from './MessageList.vue'
 import UserInput from './UserInput.vue'
 import UserList from './UserList.vue'
+import ChatList from './ChatList.vue'
+
+const uiState = {
+  MESSAGE_LIST: 'message-list',
+  USER_LIST: 'user-list',
+  CHAT_LIST: 'chat-list'
+}
 
 export default {
   components: {
     Header,
     MessageList,
     UserInput,
-    UserList
+    UserList,
+    ChatList
   },
   props: {
     showEmoji: {
       type: Boolean,
       default: false
     },
+    multipleChatsEnabled: {
+      type: Boolean,
+      default: false
+    },
     showFile: {
       type: Boolean,
       default: false
@@ -92,17 +138,29 @@ export default {
       type: Array,
       required: true
     },
+    chatList: {
+      type: Array,
+      required: true
+    },
+    chatListTitle: {
+      type: String,
+      default: 'Chats'
+    },
     title: {
       type: String,
       required: true
     },
+    chatListImageUrl: {
+      type: String,
+      default: ''
+    },
     onUserInputSubmit: {
       type: Function,
       required: true
     },
     messageList: {
       type: Array,
-      default: () => []
+      default: undefined
     },
     isOpen: {
       type: Boolean,
@@ -143,26 +201,77 @@ export default {
     confirmationDeletionMessage: {
       type: String,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
+    },
+    messageListHeaderTitleClickable: {
+      type: Boolean,
+      required: true
+    },
+    chatListHeaderTitleClickable: {
+      type: Boolean,
+      required: true
+    },
+    messageIconClickable: {
+      type: Boolean,
+      required: true
     }
   },
   data() {
     return {
-      showUserList: false
+      windowState: this.initialState()
     }
   },
   computed: {
     messages() {
-      let messages = this.messageList
-
-      return messages
+      return this.messageList || []
+    },
+    showingUserList() {
+      return this.windowState == uiState.USER_LIST
+    },
+    showingChatList() {
+      return this.windowState == uiState.CHAT_LIST
+    },
+    showingMessageList() {
+      return this.windowState == uiState.MESSAGE_LIST
+    },
+    ...mapState(['titleImageUrl', 'disableUserListToggle'])
+  },
+  watch: {
+    multipleChatsEnabled(newMultipleChatsEnabled) {
+      this.windowState = this.initialState()
+    },
+    messageList(newValue) {
+      if (newValue === undefined && this.multipleChatsEnabled) {
+        this.handleShowChatList()
+      }
     }
   },
   methods: {
-    handleUserListToggle(showUserList) {
-      this.showUserList = showUserList
+    handleToggleUserListMessageList() {
+      this.windowState =
+        this.windowState == uiState.USER_LIST ? uiState.MESSAGE_LIST : uiState.USER_LIST
+    },
+    handleShowChatList() {
+      this.windowState = uiState.CHAT_LIST
+    },
+    handleShowMessageList() {
+      this.windowState = uiState.MESSAGE_LIST
+    },
+    headerTitleClicked() {
+      if (this.showingMessageList) {
+        this.$emit('messageListHeaderTitleClicked')
+      } else if (this.showingChatList) {
+        this.$emit('chatListHeaderTitleClicked')
+      }
     },
     getSuggestions() {
       return this.messages.length > 0 ? this.messages[this.messages.length - 1].suggestions : []
+    },
+    initialState() {
+      return this.multipleChatsEnabled ? uiState.CHAT_LIST : uiState.MESSAGE_LIST
     }
   }
 }
diff --git a/src/Header.vue b/src/Header.vue
index fc1032ab..8da3d902 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -1,11 +1,47 @@
 <template>
   <div class="sc-header" :style="{background: colors.header.bg, color: colors.header.text}">
+    <div
+      v-if="showChatListButton"
+      class="bi bi-chevron-left sc-header--chat-list-button"
+      @click="showChatList"
+    >
+      <svg
+        class="sc-header--svg-button"
+        height="15px"
+        width="15px"
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+      >
+        <path
+          d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
+        ></path>
+      </svg>
+    </div>
     <slot>
-      <img v-if="titleImageUrl" class="sc-header--img" :src="titleImageUrl" alt="" />
-      <div v-if="!disableUserListToggle" class="sc-header--title enabled" @click="toggleUserList">
+      <img
+        v-if="titleImageUrl"
+        class="sc-header--img"
+        :class="{clickable: headerTitleClickable}"
+        :src="titleImageUrl"
+        alt=""
+        @click="headerTitleClickable ? $emit('headerTitleClicked') : null"
+      />
+      <div
+        v-if="!disableListToggle"
+        class="sc-header--title enabled"
+        @click="toggleUserListMessageList"
+      >
+        {{ title }}
+      </div>
+      <div
+        v-else
+        class="sc-header--title"
+        :class="{clickable: headerTitleClickable}"
+        @click="headerTitleClickable ? $emit('headerTitleClicked') : null"
+      >
         {{ title }}
       </div>
-      <div v-else class="sc-header--title">{{ title }}</div>
     </slot>
     <div v-if="showCloseButton" class="sc-header--close-button" @click="$emit('close')">
       <img :src="icons.close.img" :alt="icons.close.name" />
@@ -37,20 +73,29 @@ export default {
     colors: {
       type: Object,
       required: true
-    }
-  },
-  data() {
-    return {
-      inUserList: false
+    },
+    showChatListButton: {
+      type: Boolean,
+      default: false
+    },
+    disableListToggle: {
+      type: Boolean,
+      required: true
+    },
+    headerTitleClickable: {
+      type: Boolean,
+      required: true
     }
   },
   computed: {
-    ...mapState(['disableUserListToggle', 'titleImageUrl', 'showCloseButton'])
+    ...mapState(['titleImageUrl', 'showCloseButton'])
   },
   methods: {
-    toggleUserList() {
-      this.inUserList = !this.inUserList
-      this.$emit('userList', this.inUserList)
+    toggleUserListMessageList() {
+      this.$emit('toggleUserListMessageList')
+    },
+    showChatList() {
+      this.$emit('showChatList')
     }
   }
 }
@@ -72,6 +117,9 @@ export default {
   border-radius: 50%;
   align-self: center;
   padding: 10px;
+  box-sizing: border-box;
+  width: 54px;
+  height: 54px;
 }
 
 .sc-header--title {
@@ -80,6 +128,7 @@ export default {
   flex: 1;
   user-select: none;
   font-size: 20px;
+  text-align: left;
 }
 
 .sc-header--title.enabled {
@@ -113,6 +162,32 @@ export default {
   box-sizing: border-box;
 }
 
+.sc-header--chat-list-button {
+  width: 40px;
+  align-self: center;
+  height: 40px;
+  box-sizing: border-box;
+  cursor: pointer;
+  border-radius: 5px;
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+
+.sc-header--chat-list-button:hover {
+  box-shadow: 0px 2px 5px rgba(0.2, 0.2, 0.5, 0.1);
+}
+
+.sc-header--svg-button {
+  margin: 0 auto;
+  display: block;
+  fill: white;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
 @media (max-width: 450px) {
   .sc-header {
     border-radius: 0px;
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 89411a4d..7bfe81ee 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -7,7 +7,7 @@
       :style="{backgroundColor: colors.launcher.bg}"
       @click.prevent="isOpen ? close() : openAndFocus()"
     >
-      <div v-if="newMessagesCount > 0 && !isOpen" class="sc-new-messsages-count">
+      <div v-if="newMessagesCount > 0" class="sc-new-messsages-count">
         {{ newMessagesCount }}
       </div>
       <img v-if="isOpen" class="sc-closed-icon" :src="icons.close.img" :alt="icons.close.name" />
@@ -31,11 +31,28 @@
       :colors="colors"
       :always-scroll-to-bottom="alwaysScrollToBottom"
       :message-styling="messageStyling"
+      :multiple-chats-enabled="multipleChatsEnabled"
+      :chat-list="chatList"
+      :chat-list-title="chatListTitle"
+      :chat-list-image-url="chatListImageUrl"
+      :my-id="myId"
+      :message-list-header-title-clickable="messageListHeaderTitleClickable"
+      :chat-list-header-title-clickable="chatListHeaderTitleClickable"
+      :message-icon-clickable="messageIconClickable"
       @close="close"
       @scrollToTop="$emit('scrollToTop')"
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
       @remove="$emit('remove', $event)"
+      @changeCurrentChat="
+        (chatID) => {
+          this.$emit('changeCurrentChat', chatID)
+        }
+      "
+      @messageListMountedUpdated="$emit('messageListMountedUpdated')"
+      @messageListHeaderTitleClicked="$emit('messageListHeaderTitleClicked')"
+      @chatListHeaderTitleClicked="$emit('chatListHeaderTitleClicked')"
+      @messageIconClicked="$emit('messageIconClicked', $event)"
     >
       <template v-slot:header>
         <slot name="header"> </slot>
@@ -60,6 +77,14 @@
         <slot name="text-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
         </slot>
       </template>
+      <template v-slot:file-message-toolbox="scopedProps">
+        <slot name="file-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
+      <template v-slot:emoji-message-toolbox="scopedProps">
+        <slot name="emoji-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
     </ChatWindow>
   </div>
 </template>
@@ -145,11 +170,11 @@ export default {
     },
     title: {
       type: String,
-      default: () => ''
+      default: ''
     },
     titleImageUrl: {
       type: String,
-      default: () => ''
+      default: ''
     },
     onMessageWasSent: {
       type: Function,
@@ -157,11 +182,11 @@ export default {
     },
     messageList: {
       type: Array,
-      default: () => []
+      default: undefined
     },
     newMessagesCount: {
       type: Number,
-      default: () => 0
+      default: 0
     },
     placeholder: {
       type: String,
@@ -169,7 +194,7 @@ export default {
     },
     showTypingIndicator: {
       type: String,
-      default: () => ''
+      default: ''
     },
     colors: {
       type: Object,
@@ -219,15 +244,47 @@ export default {
     },
     alwaysScrollToBottom: {
       type: Boolean,
-      default: () => false
+      default: false
     },
     messageStyling: {
       type: Boolean,
-      default: () => false
+      default: false
     },
     disableUserListToggle: {
       type: Boolean,
       default: false
+    },
+    multipleChatsEnabled: {
+      type: Boolean,
+      default: false
+    },
+    chatList: {
+      type: Array,
+      default: () => []
+    },
+    chatListTitle: {
+      type: String,
+      default: ''
+    },
+    chatListImageUrl: {
+      type: String,
+      default: ''
+    },
+    myId: {
+      type: String,
+      default: 'me'
+    },
+    messageListHeaderTitleClickable: {
+      type: Boolean,
+      default: false
+    },
+    chatListHeaderTitleClickable: {
+      type: Boolean,
+      default: false
+    },
+    messageIconClickable: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
diff --git a/src/Message.vue b/src/Message.vue
index 652452d5..2300229b 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -3,20 +3,22 @@
     <div
       class="sc-message--content"
       :class="{
-        sent: message.author === 'me',
-        received: message.author !== 'me' && message.type !== 'system',
+        sent: message.author === myId,
+        received: message.author !== myId && message.type !== 'system',
         system: message.type === 'system'
       }"
     >
       <slot name="user-avatar" :message="message" :user="user">
         <div
-          v-if="message.type !== 'system' && authorName && authorName !== 'me'"
+          v-if="message.type !== 'system' && authorName && authorName !== myId"
           v-tooltip="authorName"
           :title="authorName"
           class="sc-message--avatar"
+          :class="{clickable: messageIconClickable}"
           :style="{
             backgroundImage: `url(${chatImageUrl})`
           }"
+          @click="messageIconClickable ? $emit('messageIconClicked', user) : null"
         ></div>
       </slot>
 
@@ -29,6 +31,7 @@
         :show-deletion="showDeletion"
         :show-confirmation-deletion="showConfirmationDeletion"
         :confirmation-deletion-message="confirmationDeletionMessage"
+        :my-id="myId"
         @remove="$emit('remove')"
       >
         <template v-slot:default="scopedProps">
@@ -46,19 +49,63 @@
           </slot>
         </template>
       </TextMessage>
-      <EmojiMessage v-else-if="message.type === 'emoji'" :data="message.data" />
+      <EmojiMessage
+        v-else-if="message.type === 'emoji'"
+        :message="message"
+        :message-colors="messageColors"
+        :message-styling="messageStyling"
+        :show-edition="showEdition"
+        :show-deletion="showDeletion"
+        :show-confirmation-deletion="showConfirmationDeletion"
+        :confirmation-deletion-message="confirmationDeletionMessage"
+        :my-id="myId"
+        @remove="$emit('remove')"
+      >
+        <template v-slot:default="scopedProps">
+          <slot
+            name="emoji-message-body"
+            :message="scopedProps.message"
+            :messageColors="scopedProps.messageColors"
+            :me="scopedProps.me"
+          >
+          </slot>
+        </template>
+        <template v-slot:emoji-message-toolbox="scopedProps">
+          <slot name="emoji-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+          </slot>
+        </template>
+      </EmojiMessage>
       <FileMessage
         v-else-if="message.type === 'file'"
-        :data="message.data"
+        :message="message"
         :message-colors="messageColors"
-      />
+        :show-deletion="showDeletion"
+        :show-confirmation-deletion="showConfirmationDeletion"
+        :confirmation-deletion-message="confirmationDeletionMessage"
+        :my-id="myId"
+        @remove="$emit('remove')"
+      >
+        <template v-slot:default="scopedProps">
+          <slot
+            name="file-message-body"
+            :message="scopedProps.message"
+            :messageColors="scopedProps.messageColors"
+            :me="scopedProps.me"
+          >
+          </slot>
+        </template>
+        <template v-slot:file-message-toolbox="scopedProps">
+          <slot name="file-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+          </slot>
+        </template>
+      </FileMessage>
       <TypingMessage v-else-if="message.type === 'typing'" :message-colors="messageColors" />
       <SystemMessage
         v-else-if="message.type === 'system'"
         :data="message.data"
         :message-colors="messageColors"
       >
-        <slot name="system-message-body" :message="message.data"> </slot>
+        <slot name="system-message-body" :message="message.data"></slot>
       </SystemMessage>
     </div>
   </div>
@@ -112,6 +159,14 @@ export default {
     confirmationDeletionMessage: {
       type: String,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
+    },
+    messageIconClickable: {
+      type: Boolean,
+      required: true
     }
   },
   computed: {
@@ -122,7 +177,7 @@ export default {
       return (this.user && this.user.imageUrl) || chatIcon
     },
     messageColors() {
-      return this.message.author === 'me' ? this.sentColorsStyle : this.receivedColorsStyle
+      return this.message.author === this.myId ? this.sentColorsStyle : this.receivedColorsStyle
     },
     receivedColorsStyle() {
       return {
@@ -146,6 +201,7 @@ export default {
   margin: auto;
   padding-bottom: 10px;
   display: flex;
+
   .sc-message--edited {
     opacity: 0.7;
     word-wrap: normal;
@@ -195,7 +251,9 @@ export default {
   }
 }
 
-.sc-message--text {
+.sc-message--text,
+.sc-message--file,
+.sc-message--emoji {
   padding: 5px 20px;
   border-radius: 6px;
   font-weight: 300;
@@ -203,21 +261,26 @@ export default {
   line-height: 1.4;
   position: relative;
   -webkit-font-smoothing: subpixel-antialiased;
+
   .sc-message--text-body {
     .sc-message--text-content {
       white-space: pre-wrap;
     }
   }
+
   &:hover .sc-message--toolbox {
     left: -20px;
     opacity: 1;
   }
+
   &.confirm-delete:hover .sc-message--toolbox {
     left: -90px;
   }
+
   &.confirm-delete .sc-message--toolbox {
     width: auto;
   }
+
   .sc-message--toolbox {
     transition: left 0.2s ease-out 0s;
     white-space: normal;
@@ -226,6 +289,7 @@ export default {
     left: 0px;
     width: 25px;
     top: 0;
+
     button {
       background: none;
       border: none;
@@ -235,12 +299,33 @@ export default {
       width: 100%;
       text-align: center;
       cursor: pointer;
+
       &:focus {
         outline: none;
       }
     }
   }
 }
+
+.sc-message--emoji {
+  .sc-message--toolbox {
+    background: transparent !important;
+
+    button {
+      vertical-align: top;
+      background: rgb(78, 140, 255) none repeat scroll 0% 0%;
+
+      svg {
+        width: 100%;
+        padding: 3px;
+        display: block;
+        //vertical-align: top;
+        margin-bottom: auto;
+      }
+    }
+  }
+}
+
 .sc-message--content.sent .sc-message--text {
   color: white;
   background-color: #4e8cff;
@@ -261,12 +346,14 @@ export default {
 .tooltip {
   display: block !important;
   z-index: 10000;
+
   .tooltip-inner {
     background: black;
     color: white;
     border-radius: 16px;
     padding: 5px 10px 4px;
   }
+
   .tooltip-arrow {
     width: 0;
     height: 0;
@@ -276,8 +363,10 @@ export default {
     border-color: black;
     z-index: 1;
   }
+
   &[x-placement^='top'] {
     margin-bottom: 5px;
+
     .tooltip-arrow {
       border-width: 5px 5px 0 5px;
       border-left-color: transparent !important;
@@ -289,8 +378,10 @@ export default {
       margin-bottom: 0;
     }
   }
+
   &[x-placement^='bottom'] {
     margin-top: 5px;
+
     .tooltip-arrow {
       border-width: 0 5px 5px 5px;
       border-left-color: transparent !important;
@@ -302,8 +393,10 @@ export default {
       margin-bottom: 0;
     }
   }
+
   &[x-placement^='right'] {
     margin-left: 5px;
+
     .tooltip-arrow {
       border-width: 5px 5px 5px 0;
       border-left-color: transparent !important;
@@ -315,8 +408,10 @@ export default {
       margin-right: 0;
     }
   }
+
   &[x-placement^='left'] {
     margin-right: 5px;
+
     .tooltip-arrow {
       border-width: 5px 0 5px 5px;
       border-top-color: transparent !important;
@@ -328,18 +423,22 @@ export default {
       margin-right: 0;
     }
   }
+
   &[aria-hidden='true'] {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.15s, visibility 0.15s;
   }
+
   &[aria-hidden='false'] {
     visibility: visible;
     opacity: 1;
     transition: opacity 0.15s;
   }
+
   &.info {
     $color: rgba(#004499, 0.9);
+
     .tooltip-inner {
       background: $color;
       color: white;
@@ -347,12 +446,15 @@ export default {
       border-radius: 5px;
       box-shadow: 0 5px 30px rgba(black, 0.1);
     }
+
     .tooltip-arrow {
       border-color: $color;
     }
   }
+
   &.popover {
     $color: #f9f9f9;
+
     .popover-inner {
       background: $color;
       color: black;
@@ -360,9 +462,14 @@ export default {
       border-radius: 5px;
       box-shadow: 0 5px 30px rgba(black, 0.1);
     }
+
     .popover-arrow {
       border-color: $color;
     }
   }
 }
+
+.clickable {
+  cursor: pointer;
+}
 </style>
diff --git a/src/MessageList.vue b/src/MessageList.vue
index 586a0285..dbe1d5e2 100644
--- a/src/MessageList.vue
+++ b/src/MessageList.vue
@@ -16,7 +16,10 @@
       :show-deletion="showDeletion"
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
+      :my-id="myId"
+      :message-icon-clickable="messageIconClickable"
       @remove="$emit('remove', message)"
+      @messageIconClicked="$emit('messageIconClicked', $event)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>
@@ -38,6 +41,14 @@
         <slot name="text-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
         </slot>
       </template>
+      <template v-slot:file-message-toolbox="scopedProps">
+        <slot name="file-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
+      <template v-slot:emoji-message-toolbox="scopedProps">
+        <slot name="emoji-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
     </Message>
     <Message
       v-show="showTypingIndicator !== ''"
@@ -49,6 +60,8 @@
       :show-deletion="showDeletion"
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
+      :my-id="myId"
+      :message-icon-clickable="false"
     />
   </div>
 </template>
@@ -101,6 +114,14 @@ export default {
     confirmationDeletionMessage: {
       type: String,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
+    },
+    messageIconClickable: {
+      type: Boolean,
+      required: true
     }
   },
   computed: {
@@ -109,9 +130,11 @@ export default {
     }
   },
   mounted() {
+    this.onMessageListMountedUpdated()
     this.$nextTick(this._scrollDown())
   },
   updated() {
+    this.onMessageListMountedUpdated()
     if (this.shouldScrollToBottom()) this.$nextTick(this._scrollDown())
   },
   methods: {
@@ -133,6 +156,9 @@ export default {
 
       // A profile may not be found for system messages or messages by 'me'
       return profile || {imageUrl: '', name: ''}
+    },
+    onMessageListMountedUpdated() {
+      this.$emit('messageListMountedUpdated')
     }
   }
 }
diff --git a/src/UserInput.vue b/src/UserInput.vue
index c73b3989..dc4d9917 100644
--- a/src/UserInput.vue
+++ b/src/UserInput.vue
@@ -37,7 +37,6 @@
         @focus="setInputActive(true)"
         @blur="setInputActive(false)"
         @keydown="handleKey"
-        @focusUserInput="focusUserInput()"
       ></div>
       <div class="sc-user-input--buttons">
         <div class="sc-user-input--button"></div>
@@ -140,6 +139,10 @@ export default {
     colors: {
       type: Object,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   data() {
@@ -167,6 +170,7 @@ export default {
     }
   },
   mounted() {
+    this.focusUserInput()
     this.$root.$on('focusUserInput', () => {
       if (this.$refs.userInput) {
         this.focusUserInput()
@@ -198,11 +202,18 @@ export default {
     },
     focusUserInput() {
       this.$nextTick(() => {
-        this.$refs.userInput.focus()
+        if (this.$isMobile) {
+          // On mobile device, just scroll to the bottom to show the new message control, don't move
+          // focus there, because it would show keyboard. This is how other chat apps do it.
+          window.scrollTo(0, document.body.scrollHeight)
+        } else {
+          // On desktop or tablet, move focus to the new message control, so user can start typing a message right away.
+          this.$refs.userInput.focus()
+        }
       })
     },
     _submitSuggestion(suggestion) {
-      this.onSubmit({author: 'me', type: 'text', data: {text: suggestion}})
+      this.onSubmit({author: this.myId, type: 'text', data: {text: suggestion}})
     },
     _checkSubmitSuccess(success) {
       if (Promise !== undefined) {
@@ -228,7 +239,7 @@ export default {
         if (text && text.length > 0) {
           this._checkSubmitSuccess(
             this.onSubmit({
-              author: 'me',
+              author: this.myId,
               type: 'text',
               data: {text}
             })
@@ -240,7 +251,7 @@ export default {
       if (text && text.length > 0) {
         this._checkSubmitSuccess(
           this.onSubmit({
-            author: 'me',
+            author: this.myId,
             type: 'file',
             data: {text, file}
           })
@@ -248,7 +259,7 @@ export default {
       } else {
         this._checkSubmitSuccess(
           this.onSubmit({
-            author: 'me',
+            author: this.myId,
             type: 'file',
             data: {file}
           })
@@ -259,7 +270,7 @@ export default {
       const text = this.$refs.userInput.textContent
       if (text && text.length) {
         this.$emit('edit', {
-          author: 'me',
+          author: this.myId,
           type: 'text',
           id: store.state.editMessage.id,
           data: {text}
@@ -270,7 +281,7 @@ export default {
     _handleEmojiPicked(emoji) {
       this._checkSubmitSuccess(
         this.onSubmit({
-          author: 'me',
+          author: this.myId,
           type: 'emoji',
           data: {emoji}
         })
@@ -319,6 +330,7 @@ export default {
   bottom: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  text-align: left;
 }
 
 .sc-user-input--text:empty:before {
diff --git a/src/UserList.vue b/src/UserList.vue
index bacb4825..92ecdfe0 100644
--- a/src/UserList.vue
+++ b/src/UserList.vue
@@ -56,5 +56,6 @@ export default {
 .user-element {
   font-size: 20px;
   vertical-align: middle;
+  text-align: left;
 }
 </style>
diff --git a/src/device.js b/src/device.js
new file mode 100644
index 00000000..469977a8
--- /dev/null
+++ b/src/device.js
@@ -0,0 +1,22 @@
+export default class Device {
+  static mobile() {
+    let f = function () {
+      let check = false
+      /* eslint-disable no-useless-escape */
+      ;(function (a) {
+        if (
+          /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+            a
+          ) ||
+          /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+            a.substr(0, 4)
+          )
+        )
+          check = true
+      })(navigator.userAgent || navigator.vendor || window.opera)
+      /* eslint-enable no-useless-escape */
+      return check
+    }
+    return f()
+  }
+}
diff --git a/src/index.js b/src/index.js
index ca6e5516..a519ad17 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
+import Device from '@/device.js'
 import Launcher from './Launcher.vue'
 import VTooltip from 'v-tooltip'
 
@@ -29,6 +30,8 @@ const Plugin = {
      */
     Vue.component(this.componentName, Launcher)
     Vue.use(VTooltip)
+
+    Vue.prototype.$isMobile = Device.mobile()
   }
 }
 
diff --git a/src/messages/EmojiMessage.vue b/src/messages/EmojiMessage.vue
index 9ca12f6e..886983f5 100644
--- a/src/messages/EmojiMessage.vue
+++ b/src/messages/EmojiMessage.vue
@@ -1,13 +1,84 @@
 <template>
-  <div class="sc-message--emoji">{{ data.emoji }}</div>
+  <div class="sc-message--emoji">
+    <template>
+      <div class="sc-message--toolbox" :style="{background: messageColors.backgroundColor}">
+        <button
+          v-if="showDeletion && me && message.id != null && message.id != undefined"
+          @click="
+            ifelse(
+              showConfirmationDeletion,
+              withConfirm(confirmationDeletionMessage, () => $emit('remove')),
+              () => $emit('remove')
+            )()
+          "
+        >
+          <IconBase :color="messageColors.color" width="10" icon-name="remove">
+            <IconCross />
+          </IconBase>
+        </button>
+        <slot name="emoji-message-toolbox" :message="message" :me="me"></slot>
+      </div>
+    </template>
+    <slot :message="message" :messageColors="messageColors" :me="me">
+      {{ message.data.emoji }}
+    </slot>
+  </div>
 </template>
 
 <script>
+import IconBase from './../components/IconBase.vue'
+import IconCross from './../components/icons/IconCross.vue'
+
 export default {
+  components: {
+    IconBase,
+    IconCross
+  },
   props: {
-    data: {
+    message: {
+      type: Object,
+      required: true
+    },
+    messageColors: {
       type: Object,
       required: true
+    },
+    showDeletion: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    showConfirmationDeletion: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    confirmationDeletionMessage: {
+      type: String,
+      default: '',
+      required: false
+    },
+    myId: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    me() {
+      return this.message.author === this.myId
+    }
+  },
+  methods: {
+    ifelse(cond, funcIf, funcElse) {
+      return () => {
+        if (funcIf && cond) funcIf()
+        else if (funcElse) funcElse()
+      }
+    },
+    withConfirm(msg, func) {
+      return () => {
+        if (confirm(msg)) func()
+      }
     }
   }
 }
diff --git a/src/messages/FileMessage.vue b/src/messages/FileMessage.vue
index 5bdf6a29..70a6333d 100644
--- a/src/messages/FileMessage.vue
+++ b/src/messages/FileMessage.vue
@@ -1,30 +1,97 @@
 <template>
   <div class="sc-message--file" :style="messageColors">
-    <div class="sc-message--file-icon">
-      <img :src="data.file.url" class="sc-image" />
-    </div>
-    <div class="sc-message--file-name" :style="messageColors">
-      <a :href="data.file.url ? data.file.url : '#'" target="_blank">{{ data.file.name || '' }}</a>
-    </div>
-    <div class="sc-message--file-text" :style="messageColors">
-      {{ data.text }}
-      <p v-if="data.meta" class="sc-message--meta" :style="messageColors">
-        {{ data.meta }}
-      </p>
-    </div>
+    <template>
+      <div class="sc-message--toolbox" :style="{background: messageColors.backgroundColor}">
+        <button
+          v-if="showDeletion && me && message.id != null && message.id != undefined"
+          @click="
+            ifelse(
+              showConfirmationDeletion,
+              withConfirm(confirmationDeletionMessage, () => $emit('remove')),
+              () => $emit('remove')
+            )()
+          "
+        >
+          <IconBase :color="messageColors.color" width="10" icon-name="remove">
+            <IconCross />
+          </IconBase>
+        </button>
+        <slot name="file-message-toolbox" :message="message" :me="me"></slot>
+      </div>
+    </template>
+    <slot :message="message" :messageColors="messageColors" :me="me">
+      <div class="sc-message--file-icon">
+        <img :src="message.data.file.url" class="sc-image" />
+      </div>
+      <div class="sc-message--file-name" :style="messageColors">
+        <a :href="message.data.file.url ? message.data.file.url : '#'" target="_blank">
+          {{ message.data.file.name || '' }}
+        </a>
+      </div>
+      <div class="sc-message--file-text" :style="messageColors">
+        {{ message.data.text }}
+        <p v-if="message.data.meta" class="sc-message--meta" :style="messageColors">
+          {{ message.data.meta }}
+        </p>
+      </div>
+    </slot>
   </div>
 </template>
 
 <script>
+import IconBase from './../components/IconBase.vue'
+import IconCross from './../components/icons/IconCross.vue'
+
 export default {
+  components: {
+    IconBase,
+    IconCross
+  },
   props: {
-    data: {
+    message: {
       type: Object,
       required: true
     },
     messageColors: {
       type: Object,
       required: true
+    },
+    showDeletion: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    showConfirmationDeletion: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    confirmationDeletionMessage: {
+      type: String,
+      default: '',
+      required: false
+    },
+    myId: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    me() {
+      return this.message.author === this.myId
+    }
+  },
+  methods: {
+    ifelse(cond, funcIf, funcElse) {
+      return () => {
+        if (funcIf && cond) funcIf()
+        else if (funcElse) funcElse()
+      }
+    },
+    withConfirm(msg, func) {
+      return () => {
+        if (confirm(msg)) func()
+      }
     }
   }
 }
diff --git a/src/messages/TextMessage.vue b/src/messages/TextMessage.vue
index 480fbc28..0294af2b 100644
--- a/src/messages/TextMessage.vue
+++ b/src/messages/TextMessage.vue
@@ -7,23 +7,21 @@
             <IconEdit />
           </IconBase>
         </button>
-        <div v-if="showDeletion">
-          <button
-            v-if="me && message.id != null && message.id != undefined"
-            @click="
-              ifelse(
-                showConfirmationDeletion,
-                withConfirm(confirmationDeletionMessage, () => $emit('remove')),
-                () => $emit('remove')
-              )()
-            "
-          >
-            <IconBase :color="messageColors.color" width="10" icon-name="remove">
-              <IconCross />
-            </IconBase>
-          </button>
-        </div>
-        <slot name="text-message-toolbox" :message="message" :me="me"> </slot>
+        <button
+          v-if="showDeletion && me && message.id != null && message.id != undefined"
+          @click="
+            ifelse(
+              showConfirmationDeletion,
+              withConfirm(confirmationDeletionMessage, () => $emit('remove')),
+              () => $emit('remove')
+            )()
+          "
+        >
+          <IconBase :color="messageColors.color" width="10" icon-name="remove">
+            <IconCross />
+          </IconBase>
+        </button>
+        <slot name="text-message-toolbox" :message="message" :me="me"></slot>
       </div>
     </template>
     <slot :message="message" :messageText="messageText" :messageColors="messageColors" :me="me">
@@ -85,6 +83,10 @@ export default {
     confirmationDeletionMessage: {
       type: String,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   computed: {
@@ -97,7 +99,7 @@ export default {
       })
     },
     me() {
-      return this.message.author === 'me'
+      return this.message.author === this.myId
     },
     isEditing() {
       return (store.state.editMessage && store.state.editMessage.id) === this.message.id