diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml
index 1973fa51..f0f8bea4 100644
--- a/sandbox/DemoApp.qml
+++ b/sandbox/DemoApp.qml
@@ -249,7 +249,7 @@ Rectangle {
                     anchors.top: parent.top
                     width: parent.width
 
-                    chatInfoButton.title: "Amazing Funny Squirrel"        
+                    chatInfoButton.title: "Amazing Funny Squirrel"
                     chatInfoButton.subTitle: "Contact"
                     chatInfoButton.icon.color: Theme.palette.miscColor7
                     chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
@@ -295,11 +295,10 @@ Rectangle {
     Component {
         id: statusAppCommunityView
 
-        StatusAppTwoPanelLayout {
-
+        StatusAppThreePanelLayout {
+            id: root
             leftPanel: Item {
                 id: leftPanel
-                anchors.fill: parent
 
                 StatusChatInfoToolBar {
                     id: statusChatInfoToolBar
@@ -348,8 +347,8 @@ Rectangle {
 
                     StatusChatListAndCategories {
                         id: communityCategories
-                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
                         width: leftPanel.width
+                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
 
                         chatList.model: demoCommunityChatListItems
                         categoryList.model: demoCommunityCategoryItems
@@ -370,12 +369,12 @@ Rectangle {
                                 icon.name: "notification"
                             }
 
-                            StatusMenuItem { 
+                            StatusMenuItem {
                                 text: "Mark as Read"
                                 icon.name: "checkmark-circle"
                             }
 
-                            StatusMenuItem { 
+                            StatusMenuItem {
                                 text: "Edit Category"
                                 icon.name: "edit"
                             }
@@ -439,20 +438,62 @@ Rectangle {
                 }
             }
 
-            rightPanel: Item {
-                anchors.fill: parent
-
+            centerPanel: Item {
                 StatusChatToolBar {
                     anchors.top: parent.top
                     width: parent.width
 
-                    chatInfoButton.title: "general"        
+                    chatInfoButton.title: "general"
                     chatInfoButton.subTitle: "Community Chat"
                     chatInfoButton.icon.color: Theme.palette.miscColor6
                     chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
-
                     searchButton.onClicked: searchButton.highlighted = !searchButton.highlighted
                     membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+                    onMembersButtonClicked: {
+                        root.showRightPanel = !root.showRightPanel;
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                StatusBaseText {
+                    id: titleText
+                    anchors.top: parent.top
+                    anchors.topMargin:16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    font.pixelSize: 15
+                    text: qsTr("Members")
+                }
+
+                ListView {
+                    anchors.top: titleText.bottom
+                    anchors.topMargin: 16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 8
+                    anchors.right: parent.right
+                    anchors.rightMargin: 8
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 16
+                    boundsBehavior: Flickable.StopAtBounds
+                    model: ["John", "Nick", "Maria", "Mike"]
+                    delegate: Row {
+                        width: parent.width
+                        height: 30
+                        spacing: 8
+                        Rectangle {
+                            width: 24
+                            height: 24
+                            radius: width/2
+                            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
+                        }
+                        StatusBaseText {
+                            height: parent.height
+                            horizontalAlignment: Text.AlignHCenter
+                            font.pixelSize: 15
+                            text: modelData
+                        }
+                    }
                 }
             }
         }
@@ -507,7 +548,7 @@ Rectangle {
                             }
                         }
 
-                        Item { 
+                        Item {
                             id: invisibleSeparator
                             height: 16
                             width: parent.width
@@ -570,15 +611,15 @@ Rectangle {
 
         anchors.centerIn: parent
 
-        header.title: "Cryptokitties"        
+        header.title: "Cryptokitties"
         header.subTitle: "Public Community"
         header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
 
         content: Column {
             width: demoCommunityDetailModal.width
 
-            StatusModalDivider { 
-                bottomPadding: 8 
+            StatusModalDivider {
+                bottomPadding: 8
             }
 
             StatusBaseText {
diff --git a/src/StatusQ/Layout/StatusAppThreePanelLayout.qml b/src/StatusQ/Layout/StatusAppThreePanelLayout.qml
new file mode 100644
index 00000000..d701a719
--- /dev/null
+++ b/src/StatusQ/Layout/StatusAppThreePanelLayout.qml
@@ -0,0 +1,51 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import StatusQ.Core.Theme 0.1
+
+SplitView {
+    id: root
+
+    implicitWidth: 822
+    implicitHeight: 600
+
+    handle: Item { }
+
+    property Item leftPanel
+    property Item centerPanel
+    property Component rightPanel
+    property bool showRightPanel
+
+    Control {
+        SplitView.preferredWidth: 300
+        SplitView.fillHeight: true
+        contentItem: (!!leftPanel) ? leftPanel : null
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.baseColor4
+        }
+    }
+
+    Control {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+        contentItem: (!!centerPanel) ? centerPanel : null
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
+        }
+    }
+
+    Control {
+        SplitView.preferredWidth: root.showRightPanel ? 250 : 0
+        SplitView.minimumWidth: root.showRightPanel ? 50 : 0
+        visible: (opacity > 0.1)
+        contentItem: Loader {
+            anchors.fill: parent
+            sourceComponent: (!!rightPanel) ? rightPanel : null
+        }
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.baseColor4
+        }
+    }
+}
diff --git a/src/StatusQ/Layout/qmldir b/src/StatusQ/Layout/qmldir
index 0cccfc76..48d704f4 100644
--- a/src/StatusQ/Layout/qmldir
+++ b/src/StatusQ/Layout/qmldir
@@ -3,5 +3,4 @@ module StatusQ.Layout
 StatusAppLayout 0.1 StatusAppLayout.qml
 StatusAppNavBar 0.1 StatusAppNavBar.qml
 StatusAppTwoPanelLayout 0.1 StatusAppTwoPanelLayout.qml
-
-
+StatusAppThreePanelLayout 0.1 StatusAppThreePanelLayout.qml