diff --git a/ui/StatusQ/sandbox/NavigationHeader.qml b/ui/StatusQ/sandbox/NavigationHeader.qml
new file mode 100644
index 0000000000..f4803ce099
--- /dev/null
+++ b/ui/StatusQ/sandbox/NavigationHeader.qml
@@ -0,0 +1,18 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    height: 34
+    width: 176
+    property alias text: label.text
+
+    StatusBaseText {
+        anchors.verticalCenter: parent.verticalCenter
+        id: label
+        font.pixelSize: 15
+        color: Theme.palette.baseColor1
+    }
+}
+
diff --git a/ui/StatusQ/sandbox/ThemeSwitch.qml b/ui/StatusQ/sandbox/ThemeSwitch.qml
new file mode 100644
index 0000000000..fcca56a7f5
--- /dev/null
+++ b/ui/StatusQ/sandbox/ThemeSwitch.qml
@@ -0,0 +1,28 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Controls 0.1
+
+Row {
+    id: themeSwitch
+    signal checkedChanged()
+
+    spacing: 2
+
+    Text {
+        text: "🌤"
+        font.pixelSize: 15
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    StatusSwitch {
+        onCheckedChanged: themeSwitch.checkedChanged()
+    }
+
+    Text {
+        text: "🌙"
+        font.pixelSize: 15
+        anchors.verticalCenter: parent.verticalCenter
+    }
+}
+
diff --git a/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml
index d758ad764f..fc540ff02a 100644
--- a/ui/StatusQ/sandbox/main.qml
+++ b/ui/StatusQ/sandbox/main.qml
@@ -1,154 +1,169 @@
 import QtQuick 2.14
 import QtQuick.Window 2.14
 import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.13
 
 import Sandbox 0.1
 
 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
 
 StatusWindow {
     id: rootWindow
     width: 1024
     height: 840
     visible: true
-    title: qsTr("Status App Sandbox")
+    title: qsTr("StatusQ Documentation App")
 
     property ThemePalette lightTheme: StatusLightTheme {}
-    property ThemePalette darkTheme: StatusDarkTheme { }
-
-    ButtonGroup {
-        id: topicsGroup
-        buttons: tabs.children
-    }
-
-    ButtonGroup {
-        buttons: switchRow.children
-    }
-
-    Flow {
-        id: tabs
-        anchors.left: parent.left
-        anchors.leftMargin: 100
-        anchors.right: parent.right
-
-        Button {
-            text: "Reload QML"
-            onClicked: app.restartQml()
-        }
-        Button {
-            id: iconsTab
-            checkable: true
-            text: "Icons"
-        }
-        Button {
-            id: controlsTab
-            checkable: true
-            text: "Controls"
-        }
-        Button {
-            id: listItemsTab
-            checkable: true
-            text: "List Items"
-        }
-        Button {
-            id: layoutTab
-            checkable: true
-            text: "Layout"
-        }
-        Button {
-            id: otherTab
-            checkable: true
-            text: "Other"
-        }
-
-        Button {
-            id: buttonsTab
-            checkable: true
-            text: "Buttons"
-        }
-    }
-
-
-
-    ScrollView {
-        width: parent.width
-        anchors.top: tabs.bottom
-        anchors.bottom: parent.bottom
-        contentHeight: lightThemeBg.height * rootWindow.factor
-        contentWidth: rootWindow.width * rootWindow.factor
-        clip: true
-
-
-        Rectangle {
-            id: lightThemeBg
-
-            width: rootWindow.width
-            height: page.height + 64
-            anchors.topMargin: 32
-            color: Theme.palette.baseColor5
-            clip: true
-            scale: rootWindow.factor
-
-            Loader {
-                id: page
-                active: true
-                anchors.centerIn: parent
-
-                sourceComponent: {
-                    switch(topicsGroup.checkedButton) {
-                    case iconsTab:
-                        return iconsComponent;
-                    case controlsTab:
-                        return controlsComponent;
-                    case listItemsTab:
-                        return listItemsComponent;
-                    case layoutTab:
-                        return layoutComponent;
-                    case otherTab:
-                        return othersComponent;
-                    case buttonsTab:
-                        return buttonsComponent;
-                    default:
-                        return null;
-                    }
-                }
-            }
-
-            Row {
-                id: switchRow
-                scale: 0.8
-                anchors.right: parent.right
-                anchors.top: parent.top
-
-                Button {
-                    checkable: true
-                    checked: true
-                    text: "Light Theme"
-                    onCheckedChanged: {
-                        if (checked) {
-                            Theme.setTheme(lightTheme)
-                        }
-                    }
-                }
-
-                Button {
-                    checkable: true
-                    text: "Dark Theme"
-                    onCheckedChanged: {
-                        if (checked) {
-                            Theme.setTheme(darkTheme)
-                        }
-                    }
-                }
-            }
-        }
-    }
+    property ThemePalette darkTheme: StatusDarkTheme {}
 
     readonly property real maxFactor: 2.0
     readonly property real minFactor: 0.5
 
     property real factor: 1.0
+
+    Component.onCompleted: {
+        Theme.palette = lightTheme
+        apiDocsButton.checked = true
+    }
+
+    StatusAppLayout {
+        id: appLayout
+        anchors.fill: parent
+
+        appNavBar: StatusAppNavBar {
+            height: rootWindow.height
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    id: apiDocsButton
+                    icon.name: "edit"
+                    tooltip.text: "API Documentation"
+                    onClicked: {
+                        stackView.clear()
+                        stackView.push(libraryDocumentationCmp)
+                        checked = !checked
+                        demoAppButton.checked = false
+                    }
+                }
+            ]
+        }
+
+        appView: StackView {
+            id: stackView
+            anchors.fill: parent
+            initialItem: libraryDocumentationCmp
+        }
+
+        ThemeSwitch {
+            anchors.top: parent.top
+            anchors.topMargin: 32
+            anchors.right: parent.right
+            anchors.rightMargin: 32
+            onCheckedChanged: {
+                if (Theme.palette === rootWindow.lightTheme) {
+                    Theme.palette = rootWindow.darkTheme
+                } else {
+                    Theme.palette = rootWindow.lightTheme
+                }
+            }
+        }
+    }
+
+    Component {
+        id: libraryDocumentationCmp
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+                ScrollView {
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    contentHeight: navigation.height + 56
+                    contentWidth: navigation.width
+                    clip: true
+                    Column {
+                        id: navigation
+                        anchors.top: parent.top
+                        anchors.topMargin: 48
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        spacing: 0
+
+                        NavigationHeader { text: "StatusQ.Core" }
+                        StatusNavigationListItem { 
+                            title: "Icons" 
+                            selected: page.sourceComponent == iconsComponent
+                            onClicked: page.sourceComponent = iconsComponent
+                        }
+
+                        NavigationHeader { text: "StatusQ.Layout" }
+                        StatusNavigationListItem { 
+                            title: "Layouts" 
+                            selected: page.sourceComponent == layoutComponent
+                            onClicked: page.sourceComponent = layoutComponent
+                        }
+
+                        NavigationHeader { text: "StatusQ.Controls" }
+                        StatusNavigationListItem { 
+                            title: "Buttons" 
+                            selected: page.sourceComponent == buttonsComponent
+                            onClicked: page.sourceComponent = buttonsComponent
+                        }
+                        StatusNavigationListItem { 
+                            title: "Controls" 
+                            selected: page.sourceComponent == controlsComponent
+                            onClicked: page.sourceComponent = controlsComponent
+                        }
+                        NavigationHeader { text: "StatusQ.Components" }
+                        StatusNavigationListItem { 
+                            title: "List Items"
+                            selected: page.sourceComponent == listItemsComponent
+                            onClicked: page.sourceComponent = listItemsComponent
+                        }
+                        StatusNavigationListItem { 
+                            title: "Others"
+                            selected: page.sourceComponent == othersComponent
+                            onClicked: page.sourceComponent = othersComponent
+                        }
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                id: rightPanel
+                anchors.fill: parent
+
+                ScrollView {
+                    width: parent.width
+                    height: parent.height
+                    contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
+                    contentWidth: pageWrapper.width * rootWindow.factor
+                    clip: true
+
+                    Item {
+                        id: pageWrapper
+                        width: rightPanel.width
+                        anchors.top: parent.top
+                        anchors.topMargin: 64
+                        height: Math.max(rootWindow.height, page.height + 128)
+                        scale: rootWindow.factor
+                        Loader {
+                            id: page
+                            active: true
+                            anchors.centerIn: parent
+                            sourceComponent: iconsComponent
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     Action {
         shortcut: "CTRL+="
         onTriggered: {
@@ -174,44 +189,31 @@ StatusWindow {
 
     Component {
         id: iconsComponent
-        Icons {
-            anchors.centerIn: parent
-            iconColor: Theme.palette.primaryColor1
-        }
+        Icons { iconColor: Theme.palette.primaryColor1 }
     }
 
     Component {
         id: controlsComponent
-        Controls {
-            anchors.centerIn: parent
-        }
+        Controls {}
     }
 
     Component {
         id: listItemsComponent
-        ListItems {
-            anchors.centerIn: parent
-        }
+        ListItems {}
     }
 
     Component {
         id: layoutComponent
-        Layout {
-            anchors.centerIn: parent
-        }
+        Layout {}
     }
 
     Component {
         id: othersComponent
-        Others {
-            anchors.centerIn: parent
-        }
+        Others {}
     }
 
     Component {
         id: buttonsComponent
-        Buttons {
-            anchors.centerIn: parent
-        }
+        Buttons {}
     }
 }