diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml
index 802735a5..96f7be58 100644
--- a/sandbox/DemoApp.qml
+++ b/sandbox/DemoApp.qml
@@ -127,42 +127,22 @@ Rectangle {
             leftPanel: Item {
                 anchors.fill: parent
 
-                Column {
+                StatusChatList {
                     anchors.top: parent.top
                     anchors.topMargin: 64
                     anchors.horizontalCenter: parent.horizontalCenter
 
-                    spacing: 4
-
-                    StatusChatListItem {
-                        name: "#status"
-                        type: StatusChatListItem.Type.PublicChat
+                    selectedChatId: "0"
+                    chatListItems.model: demoChatListItems
+                    onChatItemSelected: selectedChatId = id
+                    onChatItemUnmuted: {
+                        for (var i = 0; i < demoChatListItems.count; i++) {
+                            let item = demoChatListItems.get(i);
+                            if (item.chatId === id) {
+                                demoChatListItems.setProperty(i, "muted", false)
+                            }
+                        }
                     }
-
-                    StatusChatListItem {
-                        name: "#status-desktop"
-                        type: StatusChatListItem.Type.PublicChat
-                        hasUnreadMessages: true
-                        badge.value: 1
-                    }
-
-                    StatusChatListItem {
-                        name: "Amazing Funny Squirrel"
-                        type: StatusChatListItem.Type.OneToOneChat
-                        selected: true
-                    }
-
-                    StatusChatListItem {
-                        name: "Black Ops"
-                        type: StatusChatListItem.Type.GroupChat
-                    }
-
-                    StatusChatListItem {
-                        name: "Spectacular Growling Otter"
-                        type: StatusChatListItem.Type.OneToOneChat
-                        muted: true
-                    }
-
                 }
             }
 
@@ -263,4 +243,55 @@ Rectangle {
             }
         }
     }
+
+    ListModel {
+        id: demoChatListItems
+        ListElement {
+            chatId: "0"
+            name: "#status"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "blue"
+        }
+        ListElement {
+            chatId: "1"
+            name: "#status-desktop"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            hasUnreadMessages: true
+            iconColor: "red"
+            unreadMessagesCount: 1
+        }
+        ListElement {
+            chatId: "2"
+            name: "Amazing Funny Squirrel"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: false
+            hasUnreadMessages: false
+            iconColor: "green"
+            identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "3"
+            name: "Black Ops"
+            chatType: StatusChatListItem.Type.GroupChat
+            muted: false
+            hasUnreadMessages: false
+            iconColor: "purple"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "4"
+            name: "Spectacular Growing Otter"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: true
+            hasUnreadMessages: false
+            iconColor: "Orange"
+            unreadMessagesCount: 0
+        }
+    }
 }
diff --git a/src/StatusQ/Components/StatusChatList.qml b/src/StatusQ/Components/StatusChatList.qml
new file mode 100644
index 00000000..f96acc86
--- /dev/null
+++ b/src/StatusQ/Components/StatusChatList.qml
@@ -0,0 +1,38 @@
+import QtQuick 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Column {
+    id: statusChatList
+
+    spacing: 4
+
+    property string selectedChatId: ""
+    property alias chatListItems: statusChatListItems
+
+    signal chatItemSelected(string id)
+    signal chatItemUnmuted(string id)
+
+    Repeater {
+        id: statusChatListItems
+        delegate: StatusChatListItem {
+            chatId: model.chatId
+            name: model.name
+            type: model.chatType
+            muted: !!model.muted
+            hasUnreadMessages: !!model.hasUnreadMessages
+            hasMention: !!model.hasMention
+            badge.value: model.unreadMessagesCount || 0
+            selected: model.chatId === statusChatList.selectedChatId
+
+            icon.color: model.iconColor || ""
+            image.source: model.identicon || ""
+
+            onClicked: statusChatList.chatItemSelected(model.chatId)
+            onUnmute: statusChatList.chatItemUnmuted(model.chatId)
+        }
+    }
+}
diff --git a/src/StatusQ/Components/StatusChatListItem.qml b/src/StatusQ/Components/StatusChatListItem.qml
index 6a4ae3e2..b5d6345a 100644
--- a/src/StatusQ/Components/StatusChatListItem.qml
+++ b/src/StatusQ/Components/StatusChatListItem.qml
@@ -7,6 +7,7 @@ import StatusQ.Controls 0.1
 Rectangle {
     id: statusChatListItem
 
+    property string chatId: ""
     property string name: ""
     property alias badge: statusBadge
     property bool hasUnreadMessages: false
diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir
index a8a97def..3805dbab 100644
--- a/src/StatusQ/Components/qmldir
+++ b/src/StatusQ/Components/qmldir
@@ -1,6 +1,7 @@
 module StatusQ.Components
 
 StatusBadge 0.1 StatusBadge.qml
+StatusChatList 0.1 StatusChatList.qml
 StatusChatListItem 0.1 StatusChatListItem.qml
 StatusChatToolBar 0.1 StatusChatToolBar.qml
 StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml