diff --git a/ui/StatusQ/sandbox/DemoApp.qml b/ui/StatusQ/sandbox/DemoApp.qml
new file mode 100644
index 0000000000..c799e200fc
--- /dev/null
+++ b/ui/StatusQ/sandbox/DemoApp.qml
@@ -0,0 +1,237 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Layout 0.1
+
+Rectangle {
+    id: demoApp
+    height: 602
+    width: 902
+    border.width: 1
+    border.color: Theme.palette.baseColor2
+
+    Row {
+        anchors.top: demoApp.top
+        anchors.left: demoApp.left
+        anchors.topMargin: 14
+        anchors.leftMargin: 14
+
+        spacing: 6
+        z: statusAppLayout.z + 1
+
+        Rectangle {
+            color: "#E24640"
+            height: 12
+            width: 12
+            radius: 6
+        }
+        Rectangle {
+            color: "#FFC12F"
+            height: 12
+            width: 12
+            radius: 6
+        }
+        Rectangle {
+            color: "#2ACB42"
+            height: 12
+            width: 12
+            radius: 6
+        }
+    }
+
+
+    StatusAppLayout {
+        id: statusAppLayout
+        anchors.top: demoApp.top
+        anchors.left: demoApp.left
+        anchors.topMargin: demoApp.border.width
+        anchors.leftMargin: demoApp.border.width
+
+        height: demoApp.height - demoApp.border.width * 2
+        width: demoApp.width - demoApp.border.width * 2
+
+        appNavBar: StatusAppNavBar {
+
+            navBarChatButton: StatusNavBarTabButton {
+                icon.name: "chat"
+                tooltip.text: "Chat"
+                checked: appView.sourceComponent == statusAppChatView
+                onClicked: {
+                    appView.sourceComponent = statusAppChatView
+                }
+            }
+
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Status Community"
+                    tooltipText: "Status Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                name: model.name
+                tooltip.text: model.tooltipText
+                icon.color: Theme.palette.miscColor6
+                icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                checked: appView.sourceComponent == statusAppCommunityView
+                onClicked: {
+                    appView.sourceComponent = statusAppCommunityView
+                }
+            }
+
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    icon.name: "wallet"
+                    tooltip.text: "Wallet"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "browser"
+                    tooltip.text: "Browser"
+                },
+                StatusNavBarTabButton {
+                    icon.name: "status-update"
+                    tooltip.text: "Timeline"
+                },
+                StatusNavBarTabButton {
+                    id: profileNavButton
+                    icon.name: "profile"
+                    badge.visible: true
+                    badge.anchors.rightMargin: 4
+                    badge.anchors.topMargin: 5
+                    badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
+                    badge.border.width: 2
+
+                    tooltip.text: "Profile"
+                }
+            ]
+        }
+
+        appView: Loader {
+            id: appView
+            anchors.fill: parent
+            sourceComponent: statusAppChatView
+        }
+    }
+
+    Component {
+        id: statusAppChatView
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                Column {
+                    anchors.top: parent.top
+                    anchors.topMargin: 64
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    spacing: 4
+
+                    StatusChatListItem {
+                        name: "#status"
+                        type: StatusChatListItem.Type.PublicChat
+                    }
+
+                    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
+                    }
+
+                }
+            }
+
+            rightPanel: Item {
+                anchors.fill: parent
+
+                StatusChatToolBar {
+                    anchors.top: parent.top
+                    width: parent.width
+
+                    chatInfoButton.title: "Amazing Funny Squirrel"        
+                    chatInfoButton.subTitle: "Contact"
+                    chatInfoButton.icon.color: Theme.palette.miscColor7
+                    chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+                    chatInfoButton.pinnedMessagesCount: 1
+
+                    notificationCount: 1
+
+                    onMenuButtonClicked: notificationCount += 1
+                    onNotificationButtonClicked: notificationCount = 0
+                }
+            }
+        }
+    }
+
+    Component {
+        id: statusAppCommunityView
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                Column {
+                    anchors.top: parent.top
+                    anchors.topMargin: 64
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: 4
+
+                    StatusChatListItem {
+                        name: "general"
+                        type: StatusChatListItem.Type.CommunityChat
+                        selected: true
+                    }
+
+                    StatusChatListItem {
+                        name: "random"
+                        type: StatusChatListItem.Type.CommunityChat
+                    }
+
+                    StatusChatListItem {
+                        name: "watercooler"
+                        type: StatusChatListItem.Type.CommunityChat
+                        muted: true
+                    }
+                }
+            }
+            rightPanel: Item {
+                anchors.fill: parent
+
+                StatusChatToolBar {
+                    anchors.top: parent.top
+                    width: parent.width
+
+                    chatInfoButton.title: "general"        
+                    chatInfoButton.subTitle: "Community Chat"
+                    chatInfoButton.icon.color: Theme.palette.miscColor6
+                    chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+                }
+            }
+        }
+    }
+}
diff --git a/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml
index fc540ff02a..c473530fb9 100644
--- a/ui/StatusQ/sandbox/main.qml
+++ b/ui/StatusQ/sandbox/main.qml
@@ -48,6 +48,18 @@ StatusWindow {
                         checked = !checked
                         demoAppButton.checked = false
                     }
+                },
+                StatusNavBarTabButton {
+                    id: demoAppButton
+                    icon.name: "status"
+                    tooltip.text: "Demo Application"
+                    checked: stackView.currentItem == demoAppCmp
+                    onClicked: {
+                        stackView.clear()
+                        stackView.push(demoAppCmp)
+                        checked = !checked
+                        apiDocsButton.checked = false
+                    }
                 }
             ]
         }
@@ -216,4 +228,27 @@ StatusWindow {
         id: buttonsComponent
         Buttons {}
     }
+
+    Component {
+        id: demoAppCmp
+
+        Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.baseColor3
+            DemoApp {
+                id: demoApp
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+            DropShadow {
+                anchors.fill: demoApp
+                source: demoApp
+                horizontalOffset: 0
+                verticalOffset: 5
+                radius: 20
+                samples: 20
+                color: "#22000000"
+            }
+        }
+    }
 }