diff --git a/utils/fgqcanvas/fgqcanvas_resources.qrc b/utils/fgqcanvas/fgqcanvas_resources.qrc
index d0f2d2936..7d5749f82 100644
--- a/utils/fgqcanvas/fgqcanvas_resources.qrc
+++ b/utils/fgqcanvas/fgqcanvas_resources.qrc
@@ -7,5 +7,7 @@
         <file>qml/CanvasFrame.qml</file>
         <file>qml/BrowsePanel.qml</file>
         <file>qml/LoadSavePanel.qml</file>
+        <file>qml/VerticalTabPanel.qml</file>
+        <file>qml/SnapshotsPanel.qml</file>
     </qresource>
 </RCC>
diff --git a/utils/fgqcanvas/qml/SnapshotsPanel.qml b/utils/fgqcanvas/qml/SnapshotsPanel.qml
new file mode 100644
index 000000000..ac92002a0
--- /dev/null
+++ b/utils/fgqcanvas/qml/SnapshotsPanel.qml
@@ -0,0 +1,123 @@
+import QtQuick 2.0
+import FlightGear 1.0 as FG
+
+Item {
+
+    Rectangle {
+        id: savePanel
+        width: parent.width - 8
+
+        anchors.top: parent.top
+        anchors.topMargin: 8
+        anchors.bottom:  parent.bottom
+        anchors.bottomMargin: 8
+
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        border.color: "#9f9f9f"
+        border.width: 1
+        color: "#5f5f5f"
+        opacity: 0.8
+        layer.enabled: true
+
+        InputLine {
+            id: saveTitleInput
+            width: parent.width
+            label: "Title"
+            anchors {
+                top: parent.top
+                topMargin: 8
+                left: parent.left
+                leftMargin: 8
+                right: saveButton.left
+                rightMargin: 8
+            }
+
+        }
+
+        Button {
+            id: saveButton
+            label: "Save"
+            enabled: (saveTitleInput.text != "")
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+            anchors.top: parent.top
+            anchors.topMargin: 8
+
+            onClicked: {
+                _application.saveSnapshot(saveTitleInput.text);
+            }
+        }
+
+
+        ListView {
+            id: savedList
+            model: _application.snapshots
+            width: parent.width - 30
+            anchors.top: saveTitleInput.bottom
+            anchors.topMargin: 8
+            anchors.bottom:  parent.bottom
+            anchors.bottomMargin: 8
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            delegate: Item {
+                width: parent.width
+                height:delegateFrame.height + 8
+
+                Rectangle {
+                    id: delegateBackFrame
+                    color: "#1f1f1f"
+                    width: delegateFrame.width
+                    height: delegateFrame.height
+
+
+                    Button {
+                        id: deleteButton
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.right: parent.right
+                        anchors.rightMargin: 8
+                        label: "Delete"
+                        onClicked:  {
+                           // _application.deleteConfig(model.index)
+                          //  _application.deleteConfig
+                        }
+                    }
+                }
+
+                Rectangle {
+                    id: delegateFrame
+                    width: parent.width
+
+                    height: configLabel.implicitHeight + 20
+
+                    opacity: 1.0
+                    color: "#3f3f3f"
+
+                    Text {
+                        id: configLabel
+                        text: modelData['name']
+                        color: "white"
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: parent.left
+                        anchors.leftMargin: 8
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            _application.restoreSnapshot(model.index);
+                        }
+
+                        drag.target: delegateFrame
+                        drag.axis: Drag.XAxis
+                        drag.minimumX: -delegateFrame.width
+                        drag.maximumX: 0
+                    }
+
+
+                } // of visible rect
+            } // of delegate item
+
+        }
+    } // of frame rect
+}
diff --git a/utils/fgqcanvas/qml/VerticalTabPanel.qml b/utils/fgqcanvas/qml/VerticalTabPanel.qml
new file mode 100644
index 000000000..8d37a5f2e
--- /dev/null
+++ b/utils/fgqcanvas/qml/VerticalTabPanel.qml
@@ -0,0 +1,105 @@
+import QtQuick 2.0
+
+Item {
+    id: root
+    property int activeTab: -1
+    property var tabs: []
+    property var titles: []
+    property int __panelWidth: 200
+
+    readonly property int panelWidth: __panelWidth
+
+    Rectangle {
+        id: contentBox
+        x: parent.width - width // can't use an anchors, for dragability
+
+        height: parent.height
+        width: (activeTab >= 0) ? __panelWidth : 0
+        color: "#1f1f1f"
+        Behavior on width {
+            enabled: !splitterDrag.drag.active
+            NumberAnimation {
+                duration: 250
+            }
+        }
+
+        clip: true
+
+        Loader {
+            anchors.fill: parent
+            sourceComponent: (activeTab >= 0) ? tabs[activeTab] : null
+        }
+    }
+
+    Rectangle {
+        id: splitter
+        width: 2
+        height: parent.height
+        anchors.right: contentBox.left
+
+        color: "orange"
+
+        MouseArea {
+            id: splitterDrag
+            height: parent.height
+            width: parent.width* 3
+
+            drag.target: contentBox
+            drag.axis: Drag.XAxis
+            drag.minimumX: 0
+            drag.maximumX: root.width
+
+            onMouseXChanged: {
+                __panelWidth = root.width - contentBox.x
+            }
+
+            // enabled when open?
+
+            // click to toggle open / close
+
+            cursorShape: Qt.SizeHorCursor
+        }
+    }
+
+    Column {
+        anchors.right: splitter.left
+        anchors.top: parent.top
+        anchors.topMargin: 20
+        spacing: 1
+
+        Repeater {
+            model: tabs
+            Rectangle {
+                readonly property bool tabIsActive: (model.index == activeTab)
+                width: tabLabel.implicitHeight + 10
+                height: tabLabel.implicitWidth + 20
+
+                color: "#3f3f3f"
+                border.width: 1
+                border.color: "#5f5f5f"
+
+                Text {
+                    anchors.centerIn: parent
+                    id: tabLabel
+                    text: titles[model.index]
+                    rotation: 90
+                    color: tabIsActive ? "orange" : tabMouse.containsMouse ? "#afafaf" : "#9f9f9f"
+                    transformOrigin: Item.Center
+                }
+
+                MouseArea {
+                    id: tabMouse
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    onClicked: {
+                        if (parent.tabIsActive) {
+                            activeTab = -1
+                        } else {
+                            activeTab = model.index
+                        }
+                    }
+                }
+            } // rectangle
+        } // of repeater
+    }
+}
diff --git a/utils/fgqcanvas/qml/mainMenu.qml b/utils/fgqcanvas/qml/mainMenu.qml
index d60c520d7..48b652188 100644
--- a/utils/fgqcanvas/qml/mainMenu.qml
+++ b/utils/fgqcanvas/qml/mainMenu.qml
@@ -42,20 +42,25 @@ Rectangle {
         }
     }
 
-    BrowsePanel {
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        width: 400
-        visible: __uiVisible
-        opacity: __uiOpacity
+    VerticalTabPanel {
+        anchors.fill: parent
+        tabs: [browsePanel, configPanel, snapshotsPanel]
+        titles: ["Connect", "Load / Save", "Snapshots"]
     }
 
-    LoadSavePanel {
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        anchors.right: parent.right
-        width: 400
-        visible: __uiVisible
-        opacity: __uiOpacity
+    Component {
+        id: browsePanel
+        BrowsePanel { }
     }
+
+    Component {
+        id: configPanel
+        LoadSavePanel { }
+    }
+
+    Component {
+        id: snapshotsPanel
+        SnapshotsPanel { }
+    }
+
 }