Launcher update

Task-number: QTBUG-63091
Done-with: Juho Annunen <juho.annunen@qt.io>
Change-Id: I4395becf8539e95ab3fa90b03e71565a2d087398
Reviewed-by: Kari Oikarinen <kari.oikarinen@qt.io>

92 files changed, 2906 insertions, 688 deletions

diff --git a/fonts.qrc b/fonts.qrc
new file mode 100644
index 0000000..45a8161
--- /dev/null
+++ b/fonts.qrc
@@ -0,0 +1,15 @@
+<RCC>
+    <qresource prefix="/">
+        <file>qml/fonts/TitilliumWeb-Black.ttf</file>
+        <file>qml/fonts/TitilliumWeb-Bold.ttf</file>
+        <file>qml/fonts/TitilliumWeb-BoldItalic.ttf</file>
+        <file>qml/fonts/TitilliumWeb-ExtraLight.ttf</file>
+        <file>qml/fonts/TitilliumWeb-ExtraLightItalic.ttf</file>
+        <file>qml/fonts/TitilliumWeb-Italic.ttf</file>
+        <file>qml/fonts/TitilliumWeb-Light.ttf</file>
+        <file>qml/fonts/TitilliumWeb-LightItalic.ttf</file>
+        <file>qml/fonts/TitilliumWeb-Regular.ttf</file>
+        <file>qml/fonts/TitilliumWeb-SemiBold.ttf</file>
+        <file>qml/fonts/TitilliumWeb-SemiBoldItalic.ttf</file>
+    </qresource>
+</RCC>
diff --git a/icons.qrc b/icons.qrc
new file mode 100644
index 0000000..78e2cc4
--- /dev/null
+++ b/icons.qrc
@@ -0,0 +1,22 @@
+<RCC>
+    <qresource prefix="/">
+        <file>qml/icons/close_icon.svg</file>
+        <file>qml/icons/detail_icon.svg</file>
+        <file>qml/icons/grid_icon.svg</file>
+        <file>qml/icons/info_icon.svg</file>
+        <file>qml/icons/settingsmenu_launcher_icon.svg</file>
+        <file>qml/icons/qt_logo_green_rgb.svg</file>
+        <file>qml/icons/header_toggle_icon.svg</file>
+        <file>qml/icons/spinner.png</file>
+        <file>qml/icons/FloatingButton_Active.svg</file>
+        <file>qml/icons/FloatingButton_Available.svg</file>
+        <file>qml/icons/FloatingButton_Unavailable.svg</file>
+        <file>qml/icons/Built_with_Qt_RGB_logo_white.svg</file>
+        <file>qml/icons/mouse_icon.svg</file>
+        <file>qml/icons/touch_icon.svg</file>
+        <file>qml/icons/mouse_icon_disabled.svg</file>
+        <file>qml/icons/detail_icon_disabled.svg</file>
+        <file>qml/icons/touch_icon_disabled.svg</file>
+        <file>qml/icons/grid_icon_disabled.svg</file>
+    </qresource>
+</RCC>
diff --git a/images.qrc b/images.qrc
new file mode 100644
index 0000000..f686255
--- /dev/null
+++ b/images.qrc
@@ -0,0 +1,5 @@
+<RCC>
+    <qresource prefix="/">
+        <file>qml/images/backImg.jpg</file>
+    </qresource>
+</RCC>
diff --git a/qml.qrc b/qml.qrc
new file mode 100644
index 0000000..a2b22b8
--- /dev/null
+++ b/qml.qrc
@@ -0,0 +1,25 @@
+<RCC>
+    <qresource prefix="/">
+        <file>qml/Main.qml</file>
+        <file>qml/ApplicationIcon.qml</file>
+        <file>qml/BootScreen.qml</file>
+        <file>qml/LaunchScreen.qml</file>
+        <file>qml/HighlightShader.qml</file>
+        <file>qml/AutoScroller.qml</file>
+        <file>qml/HandwritingModeButton.qml</file>
+        <file>qml/Background.qml</file>
+        <file>qml/Header.qml</file>
+        <file>qml/ViewSettings.qml</file>
+        <file>qml/DetailView.qml</file>
+        <file>qml/GridViewIcon.qml</file>
+        <file>qml/DetailViewIcon.qml</file>
+        <file>qml/DemoHeader.qml</file>
+        <file>qml/DemoClosePopup.qml</file>
+        <file>qml/DemoInfoPopup.qml</file>
+        <file>qml/AboutQt.qml</file>
+        <file>qml/LayoutSettings.qml</file>
+        <file>qml/settings.xml</file>
+        <file>qml/ImageTextDelegate.qml</file>
+        <file>qml/BusyIndicator.qml</file>
+    </qresource>
+</RCC>
diff --git a/qml/AboutQt.qml b/qml/AboutQt.qml
new file mode 100644
index 0000000..4a46b25
--- /dev/null
+++ b/qml/AboutQt.qml
@@ -0,0 +1,43 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+Item {
+    id: root
+    property int margin: root.width * 0.05
+
+    Image{
+        id: qtLogoImg
+        height: parent.height * 0.125
+        anchors.top: parent.top
+        anchors.topMargin: parent.height * 0.035
+        source: "icons/qt_logo_green_rgb.svg"
+        fillMode: Image.PreserveAspectFit
+    }
+}
diff --git a/qml/ApplicationIcon.qml b/qml/ApplicationIcon.qml
index 947e830..8522ad5 100644
--- a/qml/ApplicationIcon.qml
+++ b/qml/ApplicationIcon.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt for Device Creation.
@@ -27,114 +27,47 @@
 **
 ****************************************************************************/
 import QtQuick 2.0
+import QtQuick.Controls 2.1
 
 Item {
-
-    id: appIcon;
-
-    property real offset;
-
-    property real x1: (x - offset) / PathView.view.width * Math.PI;
-    property real x2: (x + width - offset) / PathView.view.width * Math.PI;
-    property real shift: Math.min(height, width) * 0.05
-
-    signal clicked;
+    id: appIcon
+    signal clicked(string sLocation, string sMainFile, string sName, string sDescription)
+    property bool highlight: false
+    property bool isSelected: false
+    property alias preview: preview
+    property alias hoverSource: hoverItem.source
 
     Image {
         id: preview;
-        source: icon
-        asynchronous: true
-        anchors.fill: parent
-        visible: false || !engine.glAvailable
-        Rectangle {
-            anchors.fill: parent
-            color: "transparent"
-            border.color: "white"
-            border.width: 2
-        }
-        Rectangle {
-            anchors.fill: parent
-            anchors.margins: 2
-            color: "transparent"
-            border.color: "black"
-            border.width: 2
-        }
-    }
-    ShaderEffectSource {
-        id: source
-        sourceItem: preview
-    }
-    ShaderEffect {
-        id: shader
-
-        visible: preview.status == Image.Ready
-
         anchors.fill: parent
-        property variant source: source
-
-        property real x1: appIcon.x1;
-        property real x2: appIcon.x2 - appIcon.x1;
-        property real shift: appIcon.shift;
+        anchors.margins: viewSettings.pageMargin*0.5
+        source: "image://QtSquareImage/" + icon
+        sourceSize: Qt.size(width, height)
 
-        property real selection: appIcon.PathView.isCurrentItem ? 1 : 0.7;
-        property real border: 1.0 / height * 3
+        Image {
+            id: hoverItem
+            anchors.fill: parent
+            source: "image://QtImageMask/hover/namebox"
+            sourceSize: Qt.size(width, height)
+            opacity: highlight ? 1.0 : 0.0
+            visible: !isSelected && opacity > 0.01
 
-        Behavior on selection {
-            NumberAnimation { duration: 300; }
-            enabled: shader.visible
+            Behavior on opacity { NumberAnimation { duration: 300 } }
         }
+    }
 
-        mesh: "5x2"
-        blending: false
-
-        vertexShader:
-            "
-            attribute highp vec4 qt_Vertex;
-            attribute highp vec2 qt_MultiTexCoord0;
-
-            uniform highp mat4 qt_Matrix;
-            uniform highp float x1;
-            uniform highp float x2;
-            uniform highp float shift;
-
-            varying highp vec2 v_TexCoord;
-
-            void main() {
-                v_TexCoord = qt_MultiTexCoord0;
-                highp float modShift = shift * sin(x1 + qt_MultiTexCoord0.x * x2);
-                gl_Position = qt_Matrix * (qt_Vertex + vec4(0, mix(modShift, -modShift, qt_MultiTexCoord0.y), 0, 0));
-            }
-            "
-
-        fragmentShader:
-            "
-            uniform lowp float qt_Opacity;
-            uniform sampler2D source;
-            uniform lowp float selection;
 
-            uniform lowp float border;
-            varying highp vec2 v_TexCoord;
-            void main() {
-                lowp float b_max = 1.0 - border;
-                lowp float b_min = border;
-                if (v_TexCoord.x < b_max && v_TexCoord.x > b_min && v_TexCoord.y < b_max && v_TexCoord.y > b_min) {
-                gl_FragColor = vec4(texture2D(source, v_TexCoord).rgb * selection, 1.0) * qt_Opacity;
-                } else {
-                    gl_FragColor = vec4(texture2D(source, v_TexCoord).rgb * 1.0, 1.0) * qt_Opacity;
-                }
-            }
-            "
-    }
     MouseArea {
-        id: mouse
         anchors.fill: parent
-        onClicked: {
-            if (appIcon.PathView.isCurrentItem) {
-                engine.launchApplication(location, mainFile, name)
-            } else {
-                appIcon.clicked();
-            }
+        onClicked: appIcon.clicked(location, mainFile, name, description)
+        hoverEnabled: globalSettings.mouseSelected
+        onEntered: {
+            if (globalSettings.mouseSelected)
+                highlight = true;
+        }
+        onExited: {
+            if (globalSettings.mouseSelected)
+                highlight = false
         }
     }
-
 }
diff --git a/qml/Background.qml b/qml/Background.qml
new file mode 100644
index 0000000..81fb81d
--- /dev/null
+++ b/qml/Background.qml
@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+Image {
+    anchors.fill: parent
+    source: "images/backImg.jpg"
+    fillMode: Image.PreserveAspectCrop
+
+    Rectangle {
+        anchors.fill: parent
+        color: "#09102b"
+        opacity: 0.9
+    }
+}
diff --git a/qml/BootScreen.qml b/qml/BootScreen.qml
index b8a9685..69772a1 100644
--- a/qml/BootScreen.qml
+++ b/qml/BootScreen.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt for Device Creation.
@@ -27,126 +27,33 @@
 **
 ****************************************************************************/
 import QtQuick 2.0
-import QtQuick.Particles 2.0
 
-Item {
-    id: root
-    property int particleLifeTime: 2000;
+Rectangle {
+    id: bootScreen
+    color: "#09102b"
+    opacity: 0.95
 
-    SequentialAnimation {
-        id: entryAnimation
-        NumberAnimation { target: logo; property: "opacity"; to: 1; duration: 500 }
-
-        PauseAnimation { duration: 500 }
-        ParallelAnimation {
-            ScriptAction { script: {
-                    starEmitter.burst(300);
-                    sphereEmitter.burst(2000);
-                }
-            }
-            NumberAnimation { target: logo; property: "opacity"; to: 0; duration: 200 }
-            SequentialAnimation {
-                PauseAnimation { duration: root.particleLifeTime }
-                ScriptAction { script: { engine.markIntroAnimationDone(); } }
-            }
-        }
-    }
-
-    Component.onCompleted: {
-        if (engine.bootAnimationEnabled) {
-            entryAnimation.running = true
-        } else {
-            engine.markIntroAnimationDone()
-        }
-    }
-
-    Image {
-        id: logo;
-
-        width: engine.centimeter() * 3;
-        height: width * sourceSize.height / sourceSize.width;
+    Column {
         anchors.centerIn: parent
-        anchors.verticalCenterOffset: -Math.min(engine.screenWidth(), engine.screenHeight()) * 0.1
-        source: "images/qt-logo.png"
-        opacity: 0
-    }
-
-    Text {
-        id: label
-
-        anchors.top: logo.bottom
-        anchors.topMargin: engine.mm(4)
-        anchors.horizontalCenter: logo.horizontalCenter
-        font.pixelSize: engine.fontSize() * 1.2
-        color: "black"
-        text: "Boot to Qt"
-        opacity: logo.opacity * 0.5
-    }
-
-    ParticleSystem {
-        id: sphereSystem;
-        anchors.fill: logo
+        spacing: viewSettings.pageMargin
 
-        running: visible && engine.glAvailable
-
-        ImageParticle {
-            id: sphereParticle
-            source: "images/particle.png"
-            color: "#80c342"
-            alpha: .9
-            colorVariation: 0.0
+        BusyIndicator {
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: bootScreen.width * 0.1
         }
 
-        Emitter {
-            id: sphereEmitter
-            anchors.fill: parent
-            lifeSpan: root.particleLifeTime
-            size: 12
-            sizeVariation: 4
-            enabled: false
-
-            velocity: PointDirection { xVariation: 0; yVariation: 20; }
-            acceleration: PointDirection {
-                id: sphereAccel
-                yVariation: 0
-            }
-
-            shape: MaskShape {
-                source: "images/qt-logo-green-mask.png"
-            }
+        Text {
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.pixelSize: bootScreen.height * 0.05
+            color: "white"
+            text: "Loading"
         }
-    }
-
-    ParticleSystem {
-        id: starSystem;
-        anchors.fill: logo
-
-        running: visible && engine.glAvailable
-
-        ImageParticle {
-            id: starParticle
-            source: "images/particle_star2.png"
-        }
-
-        Emitter {
-            id: starEmitter
-            anchors.fill: parent
-            lifeSpan: root.particleLifeTime
-            size: 24
-            sizeVariation: 4
-            enabled: false
-
-            velocity: PointDirection { xVariation: 0; yVariation: 0; }
-            acceleration: PointDirection {
-                id: starAccel
-                xVariation: 5000
-            }
-
-            shape: MaskShape {
-                source: "images/qt-logo-white-mask.png"
-            }
+        Text {
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.pixelSize: bootScreen.height * 0.06
+            color: "white"
+            text: engine.applicationName
+            font.bold: true
         }
     }
-
-
 }
diff --git a/qml/BusyIndicator.qml b/qml/BusyIndicator.qml
index 3cf7cf0..f590ea9 100644
--- a/qml/BusyIndicator.qml
+++ b/qml/BusyIndicator.qml
@@ -27,18 +27,48 @@
 **
 ****************************************************************************/
 import QtQuick 2.4
+import Circle 1.0
 
-Image {
+CircularIndicator {
+    id: circularIndicator
+    //anchors.fill: parent
     height: width
-    source: "images/spinner.png"
-    sourceSize.width: Math.min(127, width)
-    sourceSize.height: Math.min(127, height)
+    startAngle: 0 //speedometer.minValueAngle
+    endAngle: 360  //speedometer.maxValueAngle
+    minimumValue: 0
+    maximumValue: 360//speedometer.maximumValue
+    value: 180//speedometer.value
+    padding: 23
+    backgroundColor: "#848895"
+    progressColor: "#41cd52"
+    lineWidth: width * 0.1
 
-    RotationAnimator on rotation {
-        duration: 800
+
+    SequentialAnimation {
+        running: true
+        loops: Animation.Infinite
+        NumberAnimation {
+            target: circularIndicator
+            property: "value"
+            from: 0
+            to: 360
+            duration: 1000
+        }
+        NumberAnimation {
+            target: circularIndicator
+            property: "startAngle"
+            from: 0
+            to: 360
+            duration: 1000
+        }
+        ScriptAction {
+            script: circularIndicator.startAngle = 0
+        }
+    }
+    RotationAnimator on rotation{
         loops: Animation.Infinite
+        duration: 5000
         from: 0
         to: 360
-        running: visible
     }
 }
diff --git a/qml/DemoClosePopup.qml b/qml/DemoClosePopup.qml
new file mode 100644
index 0000000..e1e4d4f
--- /dev/null
+++ b/qml/DemoClosePopup.qml
@@ -0,0 +1,100 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import QtDemoLauncher.QtButtonImageProvider 1.0
+
+Rectangle {
+    id: demoClosePopup
+    width: parent.width
+    height: parent.height
+    color: "#09102b"
+    opacity: 0.9
+
+    function open()
+    {
+        visible = true;
+    }
+
+    function close()
+    {
+        visible = false;
+    }
+
+    Rectangle {
+        id: frame
+        color: "#09102b"
+        border.color: "#9d9faa"
+        border.width: 3
+        anchors.centerIn: parent
+        width: parent.width * 0.35
+        height: parent.height * 0.4
+
+        Column {
+            anchors.centerIn: parent
+            spacing: viewSettings.pageMargin
+
+            Text {
+                id: demoCloseConfirmText
+                width: frame.width * 0.75
+                height: frame.height * 0.25
+                horizontalAlignment: Text.AlignHCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                fontSizeMode: Text.Fit
+                minimumPixelSize: 1
+                font.pixelSize: frame.width * 0.3
+                color: "white"
+                font.family: viewSettings.appFont
+                font.styleName: "SemiBold"
+                text: qsTr("Close the demo?")
+            }
+            QtButton {
+                id: demoCloseConfirm
+                height: frame.height * 0.15
+                width: frame.width * 0.45
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: qsTr("CONFIRM")
+                borderColor: "transparent"
+                fillColor: viewSettings.buttonGreenColor
+                onClicked: {
+                    root.closeApplication();
+                    demoClosePopup.close()
+                }
+            }
+            QtButton {
+                height: frame.height * 0.15
+                width: frame.width * 0.45
+                anchors.horizontalCenter: parent.horizontalCenter
+                borderColor: "transparent"
+                fillColor: viewSettings.buttonGrayColor
+                text: qsTr("CANCEL")
+                onClicked: demoClosePopup.close()
+            }
+        }
+    }
+}
diff --git a/qml/DemoHeader.qml b/qml/DemoHeader.qml
new file mode 100644
index 0000000..da0ef57
--- /dev/null
+++ b/qml/DemoHeader.qml
@@ -0,0 +1,134 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+Rectangle {
+    id: demoHeaderBar
+    width: parent.width
+    height: viewSettings.demoHeaderHeight
+    color: "#09102b"
+    opacity: 0.9
+    y: 0
+    z: 1
+    visible: engine.state === "app-running"
+    Behavior on y { NumberAnimation { duration: 100 } }
+
+    property bool open: y > -height/2
+
+    signal infoClicked()
+    signal closeClicked()
+
+    Row {
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.margins: viewSettings.pageMargin * 0.3
+        spacing: viewSettings.pageMargin
+
+        Image {
+            id: headerLogo
+            source: "icons/qt_logo_green_rgb.svg"
+            height: parent.height
+            width: height / sourceSize.height * sourceSize.width
+        }
+
+        Text {
+            id: demoName
+            height: parent.height
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: parent.height * 0.5
+            font.family: viewSettings.appFont
+            font.styleName: "SemiBold"
+            color: "white"
+            text: engine.applicationName
+        }
+    }
+
+    Row {
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        anchors.margins: viewSettings.pageMargin * 0.3
+        spacing: viewSettings.pageMargin
+
+        Image {
+            id: infoImg
+            height: parent.height
+            width: height
+            source: "icons/info_icon.svg"
+            MouseArea {
+                anchors.fill: parent
+                anchors.margins: -parent.height * 0.2
+                onClicked: demoHeaderBar.infoClicked()
+            }
+        }
+
+        Image {
+            id: applicationCloseButton
+            height: parent.height
+            width: height
+            source: "icons/close_icon.svg"
+            MouseArea {
+                anchors.fill: parent
+                anchors.margins: -parent.height * 0.2
+                onClicked: demoHeaderBar.closeClicked()
+            }
+        }
+    }
+
+    Image {
+        id: headerToggleButton
+        source: "icons/header_toggle_icon.svg"
+        height: parent.height * 0.5
+        width: height / sourceSize.height * sourceSize.width
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: open ? parent.height - height/2 : parent.height
+        rotation: open ? 180 : 0
+
+        Behavior on rotation { NumberAnimation { duration: 100 } }
+        Behavior on y { NumberAnimation { duration: 100 } }
+
+        MouseArea {
+            anchors.fill: parent
+            anchors.margins: -parent.height * 0.5
+            drag.target: demoHeaderBar
+            drag.axis: Drag.YAxis
+            drag.minimumX: -demoHeaderBar.height
+            drag.maximumY: 0
+
+            onClicked: {
+                if (demoHeaderBar.y < -demoHeaderBar.height / 2)
+                    demoHeaderBar.y = 0
+                else
+                    demoHeaderBar.y = -demoHeaderBar.height
+            }
+            onReleased: demoHeaderBar.y = demoHeaderBar.y > -demoHeaderBar.height / 4 ? 0 : -demoHeaderBar.height
+        }
+    }
+}
diff --git a/qml/DemoInfoPopup.qml b/qml/DemoInfoPopup.qml
new file mode 100644
index 0000000..4b8b0db
--- /dev/null
+++ b/qml/DemoInfoPopup.qml
@@ -0,0 +1,147 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import QtQuick.Controls 2.2
+import QtDemoLauncher.QtButtonImageProvider 1.0
+
+Rectangle {
+    id: demoInfoPopup
+    width: parent.width
+    height: parent.height
+    color: "#09102b"
+    opacity: 0.9
+
+    // Prevent user from interacting with the transparent demo on the background
+    MouseArea {
+        anchors.fill: parent
+    }
+
+    function open()
+    {
+        visible = true;
+    }
+
+    function close()
+    {
+        visible = false;
+    }
+
+    Rectangle {
+        id: frame
+        color: "#09102b"
+        border.color: "#9d9faa"
+        border.width: 3
+        anchors.centerIn: parent
+        width: parent.width * 0.5
+        height: parent.height * 0.8
+
+        Image {
+            id: builtWithQtIcon
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.margins: viewSettings.pageMargin
+            source: "icons/Built_with_Qt_RGB_logo_white.svg"
+            height: parent.height * 0.1
+            width: height / sourceSize.height * sourceSize.width
+        }
+
+        Image {
+            anchors.right: parent.right
+            anchors.verticalCenter: builtWithQtIcon.verticalCenter
+            anchors.margins: viewSettings.pageMargin
+            source: "icons/close_icon.svg"
+            height: parent.height * 0.1
+            width: height / sourceSize.height * sourceSize.width
+            MouseArea {
+                anchors.fill: parent
+                anchors.margins: -viewSettings.pageMargin * 0.5
+                onClicked: demoInfoPopup.close()
+            }
+        }
+
+        Text {
+            id: infoTitle
+            anchors.top: builtWithQtIcon.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.margins: viewSettings.pageMargin
+            verticalAlignment: Text.AlignVCenter
+            height: builtWithQtIcon.height
+            font.pixelSize: height * 0.8
+            color: "white"
+            font.family: viewSettings.appFont
+            font.styleName: "SemiBold"
+            text: qsTr("About Current Demo")
+        }
+
+        Flickable {
+            id: flickable
+            anchors.top: infoTitle.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.margins: viewSettings.pageMargin
+            contentWidth: tt.width
+            contentHeight: tt.height
+            flickableDirection: Flickable.VerticalFlick
+            clip: true
+
+            Text {
+                id: tt
+                font.family: viewSettings.appFont
+                font.styleName: "SemiBold"
+                font.pixelSize: infoTitle.font.pixelSize * 0.5
+                color: "#bbbbbb"
+                text: engine.applicationDescription
+                width: frame.width * 0.9
+                wrapMode: Text.WordWrap
+            }
+
+            ScrollBar.vertical: ScrollBar {
+                parent: flickable.parent
+                anchors.top: flickable.top
+                anchors.bottom: flickable.bottom
+                anchors.right: parent.right
+                anchors.rightMargin: viewSettings.pageMargin * 0.2
+                anchors.topMargin: viewSettings.pageMargin * 0.5
+                width: viewSettings.pageMargin * 0.6
+                size: 0.3
+                position: 0.2
+                active: true
+                orientation: Qt.Vertical
+
+                contentItem: Rectangle {
+                    implicitWidth: root.margin * 0.3
+                    implicitHeight: root.height * 0.1
+                    color: "#41cd52"
+                }
+            }
+        }
+    }
+}
diff --git a/qml/DetailView.qml b/qml/DetailView.qml
new file mode 100644
index 0000000..8beb36a
--- /dev/null
+++ b/qml/DetailView.qml
@@ -0,0 +1,160 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import QtQuick.Controls 2.1
+import QtDemoLauncher.QtButtonImageProvider 1.0
+
+Item {
+    id: detailRoot
+    anchors.fill: parent
+
+    Item {
+        id: detailInformation
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: listHolder.top
+        anchors.margins: viewSettings.pageMargin
+
+        Image {
+            id: largeImg
+            anchors.right: parent.right
+            height: parent.height
+            width: height / sourceSize.height * sourceSize.width
+            source: ""
+        }
+
+        Column {
+            id: descriptionHolder
+            anchors.left: parent.left
+            anchors.right: largeImg.left
+            anchors.margins: viewSettings.pageMargin * 0.5
+            anchors.rightMargin: viewSettings.pageMargin
+            spacing: viewSettings.pageMargin * 0.5
+
+            Text{
+                id: descriptionTitle
+                font.pixelSize: detailInformation.height * 0.11
+                width: descriptionHolder.width
+                text: "Demo Title"
+                color: "white"
+                font.family: viewSettings.appFont
+                font.styleName: "SemiBold"
+                wrapMode: Text.WordWrap
+            }
+
+            Rectangle {
+                id: btmLine
+                width: parent.width * 0.5
+                height: 2
+            }
+        }
+
+        Text {
+            id: descriptionText
+            anchors.top: descriptionHolder.bottom
+            anchors.bottom: startButton.top
+            anchors.left: parent.left
+            anchors.margins: viewSettings.pageMargin * 0.5
+            font.pixelSize: detailInformation.height * 0.05
+            font.family: viewSettings.appFont
+            width: descriptionHolder.width
+            wrapMode: Text.WordWrap
+            color: "white"
+            elide: Text.ElideRight
+        }
+        QtButton {
+            id: startButton
+            height: detailInformation.height * 0.14
+            width: height * 3
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+            anchors.margins: viewSettings.pageMargin * 0.5
+            text: qsTr("START")
+            borderColor: "transparent"
+            fillColor: viewSettings.buttonGreenColor
+            onClicked: root.launchApplication(startButton.loc, startButton.main, startButton.name, startButton.desc)
+            property string loc
+            property string main
+            property string name
+            property string desc
+        }
+    }
+
+    Rectangle {
+        id: listHolder
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: parent.height * 0.35
+        color: "black"
+
+        ListView {
+            id: thumbList
+            anchors.fill: parent
+            anchors.margins: viewSettings.pageMargin * 0.5
+            orientation: ListView.Horizontal
+            model: applicationsModel
+
+            delegate: DetailViewIcon {
+                id: iconRoot2
+                height: thumbList.height
+                width: height
+                isSelected: thumbList.currentIndex == index
+
+                onClicked: {
+                    descriptionTitle.text = name
+                    descriptionText.text = description
+                    largeImg.source = "image://QtImage/" + icon
+
+                    startButton.loc = location
+                    startButton.main = mainFile
+                    startButton.name = name
+                    startButton.desc = description
+
+                    thumbList.currentIndex = index
+                }
+            }
+            ScrollBar.horizontal: ScrollBar{
+                parent: thumbList.parent
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: viewSettings.pageMargin * 0.3
+                anchors.left: parent.left
+                anchors.leftMargin: viewSettings.pageMargin
+                anchors.right: parent.right
+                anchors.rightMargin: viewSettings.pageMargin
+                size: 0.3
+                contentItem: Rectangle{
+                    color: "#41cd52"
+                    implicitHeight: thumbList.height * 0.03
+                }
+            }
+        }
+    }
+}
diff --git a/qml/DetailViewIcon.qml b/qml/DetailViewIcon.qml
new file mode 100644
index 0000000..bcfa632
--- /dev/null
+++ b/qml/DetailViewIcon.qml
@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+ApplicationIcon {
+
+    Image {
+        id: selectedItem
+        anchors.fill: preview
+        source: "image://QtImageMask/"
+        sourceSize: Qt.size(width, height)
+        visible: isSelected
+    }
+
+    Text {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: viewSettings.pageMargin
+        height: parent.height * 0.2
+        font.pixelSize: parent.height * 0.08
+        text: name
+        font.family: viewSettings.appFont
+        font.styleName: "SemiBold"
+        color: "white"
+        wrapMode: Text.Wrap
+        visible: highlight && !isSelected
+    }
+
+    Component.onCompleted: {
+        if (index == 0)
+            clicked(location, mainFile, name, description)
+    }
+}
diff --git a/qml/GridViewIcon.qml b/qml/GridViewIcon.qml
new file mode 100644
index 0000000..94e0136
--- /dev/null
+++ b/qml/GridViewIcon.qml
@@ -0,0 +1,47 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+ApplicationIcon {
+
+    hoverSource: "image://QtImageMask/hover"
+    Text{
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: viewSettings.pageMargin
+        height: parent.height * 0.2
+        font.pixelSize: parent.height * 0.08
+        text: name
+        font.family: viewSettings.appFont
+        font.styleName: "SemiBold"
+        color: highlight ? "white" : "black"
+        wrapMode: Text.Wrap
+    }
+}
diff --git a/qml/HandwritingModeButton.qml b/qml/HandwritingModeButton.qml
index 75cff00..61645e7 100644
--- a/qml/HandwritingModeButton.qml
+++ b/qml/HandwritingModeButton.qml
@@ -48,7 +48,7 @@ Item {
             sourceSize.width: handwritingModeButton.__minWidthHeight
             sourceSize.height: handwritingModeButton.__minWidthHeight
             smooth: false
-            source: "qrc:/qml/images/FloatingButton_Unavailable.svg"
+            source: "qrc:/qml/icons/FloatingButton_Unavailable.svg"
         }
 
         back: Image {
@@ -56,7 +56,7 @@ Item {
             sourceSize.width: handwritingModeButton.__minWidthHeight
             sourceSize.height: handwritingModeButton.__minWidthHeight
             smooth: false
-            source: "qrc:/qml/images/FloatingButton_Available.svg"
+            source: "qrc:/qml/icons/FloatingButton_Available.svg"
         }
 
         states: State {
@@ -86,7 +86,7 @@ Item {
         State {
             name: "active"
             PropertyChanges { target: flipableImage; flipped: true }
-            PropertyChanges { target: buttonImage; source: "qrc:/qml/images/FloatingButton_Active.svg" }
+            PropertyChanges { target: buttonImage; source: "qrc:/qml/icons/FloatingButton_Active.svg" }
         }
     ]
 
diff --git a/qml/GlimmeringQtLogo.qml b/qml/Header.qml
index 4032b2e..8283de6 100644
--- a/qml/GlimmeringQtLogo.qml
+++ b/qml/Header.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt for Device Creation.
@@ -27,66 +27,35 @@
 **
 ****************************************************************************/
 import QtQuick 2.0
-import QtQuick.Particles 2.0
 
 Item {
-    id: root
+    anchors.top: parent.top
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.margins: viewSettings.pageMargin
+    height: viewSettings.headerHeight
 
-    width: image.width
-    height: image.height
+    signal menuClicked()
 
     Image {
-        id: image
+        anchors.left: parent.left
+        anchors.top: parent.top
+        source: "icons/settingsmenu_launcher_icon.svg"
+        height: parent.height * 0.7
+        width: height / sourceSize.height * sourceSize.width
 
-        width: engine.centimeter() * 1.2;
-        height: width * sourceSize.height / sourceSize.width;
-
-        source: "images/qt-logo.png"
-        visible: !engine.glAvailable
-        layer.enabled: true
-    }
-
-    HighlightShader {
-        source: image
-        running: engine.glAvailable
-        interval: 10000
-        anchors.fill: image;
-    }
-
-    ParticleSystem {
-        id: starSystem;
-
-        anchors.fill: image
-        running: visible && engine.glAvailable
-
-        ImageParticle {
-            id: starParticle
-            source: "images/particle_star2.png"
-            color: "#ffffff"
-            alpha: 0
-            colorVariation: 0
-        }
-
-        Emitter {
-            id: starEmitter
+        MouseArea {
             anchors.fill: parent
-            lifeSpan: 2000
-            emitRate: 3
-            size: 20
-            sizeVariation: 4
-            enabled: visible && engine.glAvailable
-
-            velocity: PointDirection { xVariation: 0; yVariation: 0; }
-            acceleration: PointDirection {
-                id: starAccel
-                y: -10
-                xVariation: 5
-                yVariation: 5
-            }
-
-            shape: MaskShape {
-                source: "images/qt-logo-white-mask.png"
-            }
+            anchors.margins: -parent.height*0.2
+            onClicked: menuClicked()
         }
     }
+
+    Image {
+        anchors.right: parent.right
+        anchors.top: parent.top
+        source: "icons/qt_logo_green_rgb.svg"
+        height: parent.height
+        width: height / sourceSize.height * sourceSize.width
+    }
 }
diff --git a/qml/ImageTextDelegate.qml b/qml/ImageTextDelegate.qml
new file mode 100644
index 0000000..4f9353d
--- /dev/null
+++ b/qml/ImageTextDelegate.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+Item {
+    id: itt
+    property alias sourceSelected: img.source
+    property alias sourceDisabled: img2.source
+    property alias text: tt.text
+    property bool selected
+
+    signal clicked()
+
+    Image {
+        id: img
+        width: parent.width
+        height: width
+        sourceSize: Qt.size(width, height)
+        visible: selected
+    }
+
+    Image {
+        id: img2
+        width: parent.width
+        height: width
+        sourceSize: Qt.size(width, height)
+        visible: !selected
+    }
+
+    Text {
+        id: tt
+        width: parent.width
+        height: parent.height * 0.3
+        anchors.top: img.bottom
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignTop
+        fontSizeMode: Text.Fit
+        minimumPixelSize: 1
+        font.pixelSize: height
+        color: selected ? "white" : "#848895"
+        font.family: appFont
+    }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: itt.clicked()
+    }
+}
diff --git a/qml/LaunchScreen.qml b/qml/LaunchScreen.qml
index 1d43b7b..0b888c1 100644
--- a/qml/LaunchScreen.qml
+++ b/qml/LaunchScreen.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2017 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt for Device Creation.
@@ -27,89 +27,47 @@
 **
 ****************************************************************************/
 import QtQuick 2.0
+import QtQuick.Controls 2.1
 
 Item {
+    id: gridroot
+    anchors.fill: parent
 
-    id: root
-
-    property real size: Math.min(root.width, root.height);
-    property int itemsPerScreen: 2
-    property int offset: 10
-
-    PathView {
-        id: list
-        y: 10
-        width: parent.width
-        height: parent.height
-        property real cellWidth: (list.width - (root.itemsPerScreen - 1) /** list.spacing*/) / root.itemsPerScreen
-        property real cellHeight: (list.height / root.itemsPerScreen)
-
-        maximumFlickVelocity: 5000
-
-        pathItemCount: list.count
+    GridView {
+        id: grid
+        anchors.fill: parent
+        anchors.margins: viewSettings.pageMargin * 0.5
+        anchors.topMargin: viewSettings.pageMargin
 
+        cellWidth: width / 3
+        cellHeight: cellWidth
+        clip: true
         model: applicationsModel;
-        preferredHighlightBegin: 1/(list.count/2)
-        preferredHighlightEnd: 1
-        currentIndex: -1
-
-        path: Path {
-            startX: -list.cellWidth - offset*2; startY: list.y + list.cellHeight/2
-            PathLine{ x: (list.cellWidth + offset)*list.count - list.cellWidth - offset*2; y: list.y + list.cellHeight/2}
-        }
 
-        highlightMoveDuration: 700
-        dragMargin: list.height
-        delegate: ApplicationIcon {
-            id: iconRoot;
-            width: list.cellWidth
-            height: list.cellHeight
-            function select() {
-                list.currentIndex = index;
-            }
-           onClicked: {
-               select()
-           }
+        delegate: GridViewIcon {
+            id: iconRoot2;
+            height: grid.cellHeight
+            width: grid.cellWidth
+            onClicked: root.launchApplication(sLocation, sMainFile, sName, sDescription)
         }
+        ScrollBar.vertical: ScrollBar {
+            parent: gridroot
+            anchors.top: grid.top
+            anchors.bottom: grid.bottom
+            anchors.right: parent.right
+            anchors.rightMargin: viewSettings.pageMargin * 0.25
+            anchors.topMargin: viewSettings.pageMargin * 0.5
+            width: viewSettings.pageMargin * 0.5
+            size: 0.3
+            position: 0.2
+            active: true
+            orientation: Qt.Vertical
 
-        onCurrentIndexChanged: {
-            if (list.currentIndex >= 0) {
-                descriptionLabel.text = applicationsModel.query(list.currentIndex, "description");
-                nameLabel.text = applicationsModel.query(list.currentIndex, "name");
-            } else {
-                descriptionLabel.text = ""
-                nameLabel.text = ""
+            contentItem: Rectangle {
+                implicitWidth: viewSettings.pageMargin * 0.25
+                implicitHeight: root.height * 0.1
+                color: "#41cd52"
             }
         }
-
-        onCountChanged: if (count > 0 && currentIndex < 0) currentIndex = 0
-    }
-
-    Text {
-        id: nameLabel
-        anchors.horizontalCenter: parent.horizontalCenter
-        horizontalAlignment: Text.AlignHCenter
-        y: list.cellHeight + engine.mm(10)
-        width: list.cellWidth - engine.mm(2)
-        font.pixelSize: engine.fontSize()
-        color: "black"
-        font.bold: true
-        wrapMode: Text.WordWrap
-        textFormat: Text.PlainText
-        renderType: Text.NativeRendering
-    }
-
-    Text {
-        id: descriptionLabel
-        width: nameLabel.width
-        font.pixelSize: engine.smallFontSize()
-        color: "black"
-        x: nameLabel.x
-        anchors.top: nameLabel.bottom
-        anchors.topMargin: engine.fontSize()
-        anchors.bottom: parent.bottom
-        wrapMode: Text.WordWrap
-        textFormat: Text.PlainText
-        renderType: Text.NativeRendering
     }
 }
diff --git a/qml/LayoutSettings.qml b/qml/LayoutSettings.qml
new file mode 100644
index 0000000..c7e9726
--- /dev/null
+++ b/qml/LayoutSettings.qml
@@ -0,0 +1,127 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+Item {
+    id: root
+    property string title: qsTr("Display Settings")
+    property int titleWidth: width * 0.382
+    property int margin: root.width * 0.05
+    property int buttonSize: height * 0.15
+
+    property bool gridSelected: globalSettings.gridSelected
+    property bool mouseSelected: globalSettings.mouseSelected
+
+    onGridSelectedChanged: updateTimer.start()
+    onMouseSelectedChanged: updateTimer.start();
+
+    Timer {
+        id: updateTimer
+        interval: 10
+        onTriggered: {
+            globalSettings.gridSelected = root.gridSelected
+            globalSettings.mouseSelected = root.mouseSelected
+        }
+    }
+
+    Column {
+        spacing: root.margin * 0.2
+
+        Text {
+            font.pixelSize: root.height * 0.04
+            color: "white"
+            text: qsTr("Layout")
+            font.family: appFont
+            font.styleName: "Bold"
+        }
+
+        Row {
+            id: layoutRow
+            spacing: root.margin
+
+            ImageTextDelegate {
+                height: root.buttonSize
+                width: height
+                onClicked: root.gridSelected = true
+                sourceSelected: "icons/grid_icon.svg"
+                sourceDisabled: "icons/grid_icon_disabled.svg"
+                selected: root.gridSelected
+                text: qsTr("GRID")
+            }
+
+            ImageTextDelegate {
+                height: root.buttonSize
+                width: height
+                onClicked: root.gridSelected = false
+                sourceSelected: "icons/detail_icon.svg"
+                sourceDisabled: "icons/detail_icon_disabled.svg"
+                selected: !root.gridSelected
+                text: qsTr("DETAIL")
+            }
+        }
+
+        Item {
+            height: root.margin
+            width: 1
+        }
+
+        Text {
+            font.pixelSize: root.height * 0.04
+            color: "white"
+            text: qsTr("Input")
+            font.family: appFont
+            font.styleName: "Bold"
+        }
+
+        Row {
+            id: inputRow
+            spacing: root.margin
+
+            ImageTextDelegate {
+                height: root.buttonSize
+                width: height
+                onClicked: root.mouseSelected = true
+                sourceSelected: "icons/mouse_icon.svg"
+                sourceDisabled: "icons/mouse_icon_disabled.svg"
+                selected: root.mouseSelected
+                text: qsTr("MOUSE")
+            }
+            ImageTextDelegate {
+                id: detailButton
+                height: root.buttonSize
+                width: height
+                onClicked: root.mouseSelected = false
+                sourceSelected: "icons/touch_icon.svg"
+                sourceDisabled: "icons/touch_icon_disabled.svg"
+                selected: !root.mouseSelected
+                text: qsTr("TOUCH")
+            }
+        }
+    }
+}
diff --git a/qml/Main.qml b/qml/Main.qml
index a59a15b..11c4a74 100644
--- a/qml/Main.qml
+++ b/qml/Main.qml
@@ -28,18 +28,72 @@
 ****************************************************************************/
 import QtQuick 2.4
 import QtQuick.Window 2.2
-import QtQuick.VirtualKeyboard 2.0
+import QtQuick.VirtualKeyboard 2.1
+import QtDeviceUtilities.SettingsUI 1.0
 import com.qtcompany.B2QtLauncher 1.0
 
 Window {
     id: window
 
     visible: true
-    width: qpa_platform == "wayland" ? 800 : Screen.desktopAvailableWidth
-    height: qpa_platform == "wayland" ? 600 : Screen.desktopAvailableHeight
+    //width: qpa_platform === "wayland" ? 800 : Screen.desktopAvailableWidth
+    //height: qpa_platform === "wayland" ? 600 : Screen.desktopAvailableHeight
+    width: 800
+    height: 600
 
     color: "white"
-    property color qtgreen: '#80c342'
+    property alias appFont: viewSettings.appFont
+
+    ViewSettings {
+        id: viewSettings
+    }
+
+    Component {
+        id: emptyComponent
+        Item {
+            objectName: "empty"
+        }
+    }
+
+    Component {
+        id: gridComponent
+        LaunchScreen {
+            id: launchScreen
+        }
+    }
+
+    Component {
+        id: detailComponent
+        DetailView {
+            id: detailView
+        }
+    }
+
+    Component {
+        id: settingsUIComponent
+        SettingsUI {
+            id: settingsUI
+            objectName: "settingsView"
+            anchors.fill: parent
+            model: "settings.xml"
+            margin: viewSettings.pageMargin
+            onClosed: root.closeApplication()
+        }
+    }
+
+    LauncherApplicationsModel {
+        id: applicationsModel
+        onReady: engine.markApplicationsModelReady();
+        Component.onCompleted: {
+            //Set the directory to parse for apps
+            initialize(applicationSettings.appsRoot);
+        }
+    }
+
+    LauncherEngine {
+        id: engine
+        fpsEnabled: applicationSettings.isShowFPSEnabled
+    }
 
     Item {
         id: root
@@ -49,214 +103,131 @@ Window {
         width: portraitMode ? window.height : window.width
         height: portraitMode ? window.width : window.height
 
-        property int stateDelay: 400;
-        property int bootDelay: 1000;
+        function closeApplication()
+        {
+            engine.closeApplication()
+            applicationLoader.setSource("")
+            applicationLoader.sourceComponent = emptyComponent
+        }
 
-        LauncherApplicationsModel {
-            id: applicationsModel
-            onReady: {
-                engine.markApplicationsModelReady();
-            }
-            Component.onCompleted: {
-                //Set the directory to parse for apps
-                initialize(applicationSettings.appsRoot);
-            }
+        function launchApplication(loc, mainFile, name, desc)
+        {
+            engine.launchApplication(loc, mainFile, name, desc)
+            applicationLoader.source = engine.applicationMain
+        }
+
+        function launchSettings()
+        {
+            engine.state = "app-launching"
+            applicationLoader.sourceComponent = settingsUIComponent
+        }
+
+        Background {}
+
+        Header {
+            id: header
+            onMenuClicked: root.launchSettings()
         }
 
-        LauncherEngine {
-            id: engine
-            bootAnimationEnabled: applicationSettings.isBootAnimationEnabled
-            fpsEnabled: applicationSettings.isShowFPSEnabled
+        Loader {
+            id: contentLoader
+            anchors.fill: parent
+            anchors.topMargin: header.height + viewSettings.pageMargin
+            sourceComponent: globalSettings.gridSelected ? gridComponent : detailComponent
+            enabled: engine.state != "settings"
         }
 
         states: [
             State {
-                name: "booting"
-                PropertyChanges { target: appGrid; opacity: 0 }
-                PropertyChanges { target: splashScreen; opacity: 0 }
-                PropertyChanges { target: url; opacity: 0 }
-            },
-            State {
                 name: "running"
-                PropertyChanges { target: appGrid; opacity: 1 }
-                PropertyChanges { target: applicationLoader; opacity: 0 }
-                PropertyChanges { target: splashScreen; opacity: 0 }
+                PropertyChanges { target: applicationLoader; opacity: 0; }
+                PropertyChanges { target: contentLoader; opacity: 1 }
+                PropertyChanges { target: header; opacity: 1 }
+                PropertyChanges { target: bootScreenLoader; opacity: 0 }
             },
             State {
                 name: "app-launching"
-                PropertyChanges { target: appGrid; opacity: 0 }
-                PropertyChanges { target: splashScreen; opacity: 1 }
+                PropertyChanges { target: header; opacity: 0 }
+                PropertyChanges { target: bootScreenLoader; opacity: 1 }
             },
             State {
                 name: "app-running"
                 PropertyChanges { target: applicationLoader; opacity: 1 }
-                PropertyChanges { target: appGrid; opacity: 0 }
-                PropertyChanges { target: splashScreen; opacity: 0 }
-                PropertyChanges { target: url; opacity: 0 }
+                PropertyChanges { target: contentLoader; opacity: 0 }
+                PropertyChanges { target: header; opacity: 0 }
+                PropertyChanges { target: bootScreenLoader; opacity: 0 }
             },
             State {
-                name: "app-closing"
-                PropertyChanges { target: applicationLoader; opacity: 0 }
-                PropertyChanges { target: appGrid; opacity: 0 }
-                PropertyChanges { target: splashScreen; opacity: 0 }
-            }
-        ]
-
-        transitions: [
-            Transition {
-                from: "booting"
-                to: "running"
-                SequentialAnimation {
-                    ParallelAnimation {
-                        NumberAnimation { target: appGrid; property: "opacity"; duration: root.bootDelay; easing.type: Easing.InOutQuad }
-                    }
-
-                    ScriptAction { script: bootScreenLoader.sourceComponent = undefined }
-                }
-            },
-            Transition {
-                NumberAnimation { property: "opacity"; duration: root.stateDelay }
-            },
-            Transition {
-                from: "running"
-                to: "app-launching"
-                SequentialAnimation {
-                    NumberAnimation { property: "opacity"; duration: root.stateDelay }
-                    PauseAnimation { duration: 500 }
-                    ScriptAction { script: {
-                            applicationLoader.source = engine.applicationMain;
-                        }
-                    }
-                }
-            },
-            Transition {
-                from: "app-launching"
-                to: "running"
-                SequentialAnimation {
-                    NumberAnimation { target: appGrid; property: "opacity"; duration: root.stateDelay }
-                    ScriptAction { script: {
-                            engine.closeApplication();
-                            applicationLoader.source = "";
-                        }
-                    }
-                }
-            },
-            Transition {
-                from: "app-launching"
-                to: "app-running"
-                NumberAnimation { property: "opacity"; duration: root.stateDelay }
+                name: "settings"
+                PropertyChanges { target: applicationLoader; opacity: 1 }
+                PropertyChanges { target: contentLoader; opacity: 1 }
+                PropertyChanges { target: header; opacity: 0 }
+                PropertyChanges { target: bootScreenLoader; opacity: 0 }
             },
-            Transition {
-                from: "app-running"
-                to: "app-closing"
-                SequentialAnimation {
-                    ParallelAnimation {
-                        NumberAnimation { target: appGrid; property: "opacity"; duration: root.stateDelay }
-                        NumberAnimation { target: applicationLoader; property: "opacity"; duration: root.stateDelay }
-                        NumberAnimation { target: applicationCloseButton; property: "opacity"; duration: root.stateDelay}
-                    }
-                    NumberAnimation { target: applicationLoader; property: "opacity"; duration: root.stateDelay }
-                    ScriptAction { script: {
-                            engine.closeApplication();
-                            applicationLoader.source = "";
-                        }
-                    }
-                }
+            State {
+                name: "app-closing"
+                PropertyChanges { target: applicationLoader; opacity: 0; source: "" }
+                PropertyChanges { target: contentLoader; opacity: 0 }
+                PropertyChanges { target: header; opacity: 0 }
+                PropertyChanges { target: bootScreenLoader; opacity: 0 }
             }
-
         ]
 
         state: engine.state
-    //    onStateChanged: print("---state: " + engine.state);
-
-        LaunchScreen {
-            id: appGrid
-            visible: opacity > 0
-            anchors.fill: parent
-        }
-
-        Loader {
-            id: bootScreenLoader
-            visible: opacity > 0
-            anchors.fill: parent
-            sourceComponent: BootScreen {}
-        }
 
         Timer {
             id: failedAppLaunchTrigger;
-            interval: 500;
+            interval: viewSettings.stateDelay;
             running: false
             repeat: false
-            onTriggered: {
-                engine.closeApplication()
-            }
+            onTriggered: root.closeApplication()
         }
 
         Loader {
             id: applicationLoader
             opacity: 0;
-            visible: opacity > 0
+            visible: opacity > 0.1
 
             anchors.left: parent.left
             anchors.top: parent.top
             anchors.right: parent.right
             anchors.bottom: inputPanel.top
-            asynchronous: false;
-
+            asynchronous: true;
             onStatusChanged: {
-    //            switch (status) {
-    //            case Loader.Null: print("applicationLoader status: Null"); break;
-    //            case Loader.Ready: print("applicationLoader status: Ready"); break;
-    //            case Loader.Error: print("applicationLoader status: Error"); break;
-    //            case Loader.Loading: print("applicationLoader status: Loading"); break;
-    //            default: print("applicationLoader: unknown status: " + status); break;
-    //            }
-                if (status == Loader.Error) {
-    //                print("applicationLoader: app failed, reverting to 'running' state");
-                    failedAppLaunchTrigger.running = true;
-                }
-
+                if (status == Loader.Error)
+                    failedAppLaunchTrigger.start();
             }
-
             onLoaded: {
-                engine.state = "app-running";
+                if (applicationLoader.item.objectName == "settingsView")
+                    engine.state = "settings"
+                else if (applicationLoader.item.objectName !== "empty")
+                    engine.state = "app-running";
             }
 
-            Image {
-                id: applicationCloseButton
-                source: "images/close-button.png"
-                anchors.horizontalCenter: parent.horizontalCenter
-                enabled: engine.state == "app-running"
-                y: -height * .6
-                z: 1
-
-                Behavior on y { NumberAnimation { duration: 100 } }
-
-                MouseArea {
-                    anchors.fill: parent
-                    anchors.bottomMargin: applicationCloseButton.y < -applicationCloseButton.height / 2 ? 0 : -parent.height * .5
-                    drag.target: applicationCloseButton
-                    drag.axis: Drag.YAxis
-                    drag.minimumX: -applicationCloseButton.height * .6
-                    drag.maximumY: 0
-
-                    onClicked: {
-                        if (applicationCloseButton.y < -applicationCloseButton.height / 2) {
-                            applicationCloseButton.y = 0
-                            return;
-                        }
-
-                        engine.state = "app-closing"
-                        applicationCloseButton.y = -applicationCloseButton.height * .6
-                    }
-
-                    onReleased: applicationCloseButton.y = applicationCloseButton.y > -applicationCloseButton.height / 5 ?
-                                    0 :
-                                    -applicationCloseButton.height * .6
-                }
+            DemoHeader {
+                id: demoHeader
+                onInfoClicked: demoInfoPopup.open()
+                onCloseClicked: demoClosePopup.open()
             }
         }
 
+        Loader {
+            id: bootScreenLoader
+            visible: opacity > 0
+            anchors.fill: parent
+            sourceComponent: BootScreen {}
+        }
+
+        DemoClosePopup {
+            id: demoClosePopup
+            visible: false
+        }
+
+        DemoInfoPopup {
+            id: demoInfoPopup
+            visible: false
+        }
+
         /*  Handwriting input panel for full screen handwriting input.
 
             This component is an optional add-on for the InputPanel component, that
@@ -346,38 +317,6 @@ Window {
         }
 
         Item {
-            id: splashScreen
-            visible: opacity > 0
-            anchors.fill: parent
-
-            BusyIndicator {
-                id: busyIndicator
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.bottom: splashLabel.top
-                anchors.bottomMargin: height * .5
-                width: parent.width * .1
-            }
-
-            Text {
-                id: splashLabel
-                color: "black"
-                text: qsTr("Loading %1...").arg(engine.applicationName)
-                anchors.bottom: codeLessImage.top
-                anchors.bottomMargin: font.pixelSize
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: engine.fontSize() * 1.2
-            }
-
-            Image {
-                id: codeLessImage
-                source: "images/codeless.png"
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.bottom: parent.bottom;
-                anchors.margins: parent.height * 0.1;
-            }
-        }
-
-        Item {
             id: fps
             opacity: engine.fpsEnabled ? 1 : 0
             Behavior on opacity { NumberAnimation { duration: 500 } }
@@ -400,51 +339,5 @@ Window {
                 font.pixelSize: engine.sensibleButtonSize() * 0.2
             }
         }
-
-        Item {
-            id: url
-            anchors.bottom: parent.bottom;
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.margins: 20
-            GlimmeringQtLogo {
-                id: logo
-                anchors.bottom: parent.bottom
-                anchors.left: parent.left
-            }
-
-            Text {
-                id: urlLabel;
-                anchors.bottom: parent.bottom
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: "Visit Qt.io/qt-for-device-creation"
-                color: qtgreen
-                font.pixelSize: engine.sensibleButtonSize() * 0.2
-            }
-            Image{
-                anchors.right: parent.right
-                anchors.bottom: parent.bottom
-                source:"images/settings.png"
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        //Find launchersettings application from appsRoots
-                        //There can be several roots which are split with ':'
-                        var fileArray = applicationSettings.appsRoot.split(":")
-                        for ( var i = 0; i < fileArray.length; i++ ) {
-                            var file = fileArray[i]
-                            var prepend = "file://"
-                            file = prepend.concat(file)
-                            file += "/launchersettings"
-
-                            if (engine.fileExists(file + "/main.qml")) {
-                                engine.launchApplication(file, "main.qml", "Launcher Settings")
-                                break
-                            }
-                        }
-                    }
-                }
-            }
-        }
     }
 }
diff --git a/qml/ViewSettings.qml b/qml/ViewSettings.qml
new file mode 100644
index 0000000..b65e418
--- /dev/null
+++ b/qml/ViewSettings.qml
@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+Item {
+    id: viewSettings
+
+    property real pageMargin: 0.03 * Math.min(window.width, window.height)
+    property real headerHeight: 3 * pageMargin
+    property real demoHeaderHeight: 2.5 * pageMargin
+    property string appFont: "TitilliumWeb"
+    property int stateDelay: 200;
+    property string buttonGreenColor: "#41cd52"
+    property string buttonGrayColor: "#9d9faa"
+}
diff --git a/qml/fonts/TitilliumWeb-Black.ttf b/qml/fonts/TitilliumWeb-Black.ttf
new file mode 100644
index 0000000..fc5c4b5
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-Black.ttf
diff --git a/qml/fonts/TitilliumWeb-Bold.ttf b/qml/fonts/TitilliumWeb-Bold.ttf
new file mode 100644
index 0000000..0af0fe7
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-Bold.ttf
diff --git a/qml/fonts/TitilliumWeb-BoldItalic.ttf b/qml/fonts/TitilliumWeb-BoldItalic.ttf
new file mode 100644
index 0000000..77425ea
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-BoldItalic.ttf
diff --git a/qml/fonts/TitilliumWeb-ExtraLight.ttf b/qml/fonts/TitilliumWeb-ExtraLight.ttf
new file mode 100644
index 0000000..2b506ef
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-ExtraLight.ttf
diff --git a/qml/fonts/TitilliumWeb-ExtraLightItalic.ttf b/qml/fonts/TitilliumWeb-ExtraLightItalic.ttf
new file mode 100644
index 0000000..c1be5ba
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-ExtraLightItalic.ttf
diff --git a/qml/fonts/TitilliumWeb-Italic.ttf b/qml/fonts/TitilliumWeb-Italic.ttf
new file mode 100644
index 0000000..42f2c10
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-Italic.ttf
diff --git a/qml/fonts/TitilliumWeb-Light.ttf b/qml/fonts/TitilliumWeb-Light.ttf
new file mode 100644
index 0000000..ca67971
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-Light.ttf
diff --git a/qml/fonts/TitilliumWeb-LightItalic.ttf b/qml/fonts/TitilliumWeb-LightItalic.ttf
new file mode 100644
index 0000000..2ea724f
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-LightItalic.ttf
diff --git a/qml/fonts/TitilliumWeb-Regular.ttf b/qml/fonts/TitilliumWeb-Regular.ttf
new file mode 100644
index 0000000..6da8219
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-Regular.ttf
diff --git a/qml/fonts/TitilliumWeb-SemiBold.ttf b/qml/fonts/TitilliumWeb-SemiBold.ttf
new file mode 100644
index 0000000..dfdcdbe
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-SemiBold.ttf
diff --git a/qml/fonts/TitilliumWeb-SemiBoldItalic.ttf b/qml/fonts/TitilliumWeb-SemiBoldItalic.ttf
new file mode 100644
index 0000000..b68a669
--- /dev/null
+++ b/qml/fonts/TitilliumWeb-SemiBoldItalic.ttf
diff --git a/qml/icons/Built_with_Qt_RGB_logo_white.svg b/qml/icons/Built_with_Qt_RGB_logo_white.svg
new file mode 100644
index 0000000..cd972bd
--- /dev/null
+++ b/qml/icons/Built_with_Qt_RGB_logo_white.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="284.2px" height="67.8px" viewBox="0 0 284.2 67.8" style="enable-background:new 0 0 284.2 67.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M38.2,28.8c0-2.2-1.2-3.3-3.6-3.3h-5v6.9h5.2C37.1,32.4,38.2,31.2,38.2,28.8z"/>
+	<path class="st0" d="M37.7,36.5c-0.8-0.5-1.7-0.8-2.8-0.8h-5.2v7.1H35c1.3,0,2.3-0.3,2.9-0.8c0.6-0.5,1-1.5,1-2.8
+		C38.8,37.9,38.4,37,37.7,36.5z"/>
+	<path class="st0" d="M12.8,0.1L12.8,0.1L0,12.9v42.7v3.5v8.8h8.8H12h177.9V11.8L201.7,0H12.8V0.1z M35.1,46.2h-9.4V22.1h9.1
+		c2.5,0,4.3,0.5,5.5,1.5s1.8,2.6,1.8,4.8c0,1.4-0.2,2.6-0.7,3.4s-1.2,1.5-2.2,2c2.3,0.9,3.4,2.8,3.4,5.6
+		C42.8,44,40.3,46.2,35.1,46.2z M61.2,46.2h-3.8v-1.1c-1.7,1-3.3,1.5-4.7,1.5c-2.4,0-4-0.7-4.9-2c-0.8-1.3-1.2-3.6-1.2-6.8v-9.2h3.8
+		v9.2c0,2.1,0.2,3.5,0.5,4.3c0.4,0.7,1.2,1.1,2.5,1.1s2.4-0.2,3.5-0.7l0.5-0.2V28.7h3.8L61.2,46.2L61.2,46.2z M69.7,46.2h-3.8V28.6
+		h3.8V46.2z M69.7,25.6h-3.8v-4h3.8V25.6z M78.4,46.2h-3.8V21.3h3.8V46.2z M89.3,46.6c-2,0-3.4-0.5-4.1-1.4
+		c-0.7-0.9-1.1-2.6-1.1-5.2v-8.2h-2.3v-3.3h2.3v-5.1h3.8v5.1h4.9v3.3h-4.9v7.7c0,1.4,0.1,2.4,0.3,2.8c0.2,0.5,0.8,0.7,1.6,0.7
+		l2.9-0.1l0.2,3.1C91.3,46.5,90.1,46.6,89.3,46.6z M123.6,46.2h-6.1l-2.7-12.1l-2.7,12.1H106l-3.7-17.6h3.8l2.8,14.3h0.7l3.3-14h3.9
+		l3.3,14h0.7l2.7-14.3h3.8L123.6,46.2z M134.5,46.2h-3.8V28.6h3.8V46.2z M134.5,25.6h-3.8v-4h3.8V25.6z M145.1,46.6
+		c-2,0-3.4-0.5-4.1-1.4s-1.1-2.6-1.1-5.2v-8.2h-2.3v-3.3h2.3v-5.1h3.8v5.1h4.9v3.3h-4.9v7.7c0,1.4,0.1,2.4,0.3,2.8
+		c0.2,0.5,0.8,0.7,1.6,0.7l2.9-0.1l0.2,3.1C147.1,46.5,145.9,46.6,145.1,46.6z M166.4,46.2h-3.8v-9.3c0-1.9-0.2-3.2-0.6-4
+		s-1.2-1.2-2.5-1.2c-1.1,0-2.3,0.2-3.4,0.6l-0.6,0.2v13.8h-3.8v-25h3.8v8.2c1.7-0.9,3.3-1.3,4.8-1.3c2.3,0,3.9,0.7,4.8,2
+		s1.3,3.5,1.3,6.6V46.2z"/>
+	<path class="st0" d="M275.3,0.1h-3.2h-67.3l0,0L192,12.9v42.7v3.5v8.8h8.8h3.2h67.3l0,0l12.8-12.8V12.4V8.9V0.1H275.3z M241.1,58.6
+		l-6,2.8l-5.2-8.5c-0.7,0.2-1.9,0.4-3.6,0.4c-6.1,0-10.3-1.6-12.7-4.9c-2.4-3.3-3.6-8.4-3.6-15.5s1.2-12.3,3.6-15.7
+		c2.4-3.4,6.6-5.1,12.6-5.1s10.2,1.7,12.6,5.1c2.4,3.4,3.6,8.6,3.6,15.7c0,4.7-0.5,8.4-1.5,11.3c-1,2.9-2.6,5.1-4.9,6.6L241.1,58.6z
+		 M259.3,52.5c-3.3,0-5.6-0.8-6.8-2.3s-1.8-4.4-1.8-8.6V28.1h-4.5v-5.4h4.5v-8.5h6.3v8.5h8v5.4h-8v12.8c0,2.4,0.2,3.9,0.5,4.7
+		s1.2,1.2,2.7,1.2l4.8-0.2l0.3,5.1C262.7,52.2,260.7,52.5,259.3,52.5z"/>
+	<path class="st0" d="M226.2,17.6c-3.7,0-6.2,1.2-7.5,3.6c-1.4,2.4-2,6.3-2,11.5c0,5.3,0.7,9.1,2,11.3c1.3,2.3,3.8,3.4,7.6,3.4
+		s6.2-1.1,7.6-3.4c1.3-2.2,2-6,2-11.3s-0.7-9.2-2-11.6C232.4,18.8,229.9,17.6,226.2,17.6z"/>
+</g>
+</svg>
diff --git a/qml/images/FloatingButton_Active.svg b/qml/icons/FloatingButton_Active.svg
index 76a38eb..76a38eb 100644
--- a/qml/images/FloatingButton_Active.svg
+++ b/qml/icons/FloatingButton_Active.svg
diff --git a/qml/images/FloatingButton_Available.svg b/qml/icons/FloatingButton_Available.svg
index 1178c8c..1178c8c 100644
--- a/qml/images/FloatingButton_Available.svg
+++ b/qml/icons/FloatingButton_Available.svg
diff --git a/qml/images/FloatingButton_Unavailable.svg b/qml/icons/FloatingButton_Unavailable.svg
index d8149b5..d8149b5 100644
--- a/qml/images/FloatingButton_Unavailable.svg
+++ b/qml/icons/FloatingButton_Unavailable.svg
diff --git a/qml/icons/back_icon.svg b/qml/icons/back_icon.svg
new file mode 100644
index 0000000..7670ff3
--- /dev/null
+++ b/qml/icons/back_icon.svg
@@ -0,0 +1 @@
+<svg id="back" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>back</title><polyline points="24.52 35 15.07 22.28 24.93 9" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.6055682617479508px"/></svg>
\ No newline at end of file
diff --git a/qml/icons/bluetooth_icon.svg b/qml/icons/bluetooth_icon.svg
new file mode 100644
index 0000000..2cdf7f9
--- /dev/null
+++ b/qml/icons/bluetooth_icon.svg
@@ -0,0 +1 @@
+<svg id="bluetooth" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>bluetooth</title><polyline points="13.72 29.33 30.33 14.97 22.27 8 22.27 36 30.33 29.03 13.67 14.62" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.535902062387811px"/></svg>
\ No newline at end of file
diff --git a/qml/icons/close_icon.svg b/qml/icons/close_icon.svg
new file mode 100644
index 0000000..311721e
--- /dev/null
+++ b/qml/icons/close_icon.svg
@@ -0,0 +1 @@
+<svg id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>close</title><path d="M24,22l9.64-10a1.47,1.47,0,1,0-2.11-2L22,19.88,12.44,10a1.47,1.47,0,0,0-2.12,2L20,22,10.32,32a1.47,1.47,0,0,0,2.12,2L22,24.12l9.57,9.93a1.47,1.47,0,1,0,2.11-2Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/date-time_icon.svg b/qml/icons/date-time_icon.svg
new file mode 100644
index 0000000..3af7afc
--- /dev/null
+++ b/qml/icons/date-time_icon.svg
@@ -0,0 +1 @@
+<svg id="date_time" data-name="date time" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>date-time</title><path d="M27.81,14.93a1.18,1.18,0,0,1-1.18-1.18V9.84a1.18,1.18,0,0,1,2.35,0v3.92a1.18,1.18,0,0,1-1.18,1.18h0Z" style="fill:#fff"/><path d="M12.82,14.93a1.18,1.18,0,0,1-1.18-1.18V9.84a1.18,1.18,0,0,1,2.35,0v3.92a1.18,1.18,0,0,1-1.18,1.18h0Z" style="fill:#fff"/><path d="M32.25,18.74H8.34a0.59,0.59,0,1,1,0-1.18H32.25a0.59,0.59,0,0,1,0,1.18h0Z" style="fill:#fff"/><polygon points="13.68 21.13 11.39 21.13 11.39 23.41 13.68 23.41 13.68 21.13 13.68 21.13" style="fill:#fff"/><polygon points="17.62 21.13 15.34 21.13 15.34 23.41 17.62 23.41 17.62 21.13 17.62 21.13" style="fill:#fff"/><polygon points="21.57 21.13 19.29 21.13 19.29 23.41 21.57 23.41 21.57 21.13 21.57 21.13" style="fill:#fff"/><polygon points="25.52 21.13 23.24 21.13 23.24 23.41 25.52 23.41 25.52 21.13 25.52 21.13" style="fill:#fff"/><polygon points="13.68 24.79 11.39 24.79 11.39 27.07 13.68 27.07 13.68 24.79 13.68 24.79" style="fill:#fff"/><polygon points="17.62 24.79 15.34 24.79 15.34 27.07 17.62 27.07 17.62 24.79 17.62 24.79" style="fill:#fff"/><polygon points="21.57 24.79 19.29 24.79 19.29 27.07 21.57 27.07 21.57 24.79 21.57 24.79" style="fill:#fff"/><path d="M29.7,35.34A7.3,7.3,0,1,1,37,28a7.31,7.31,0,0,1-7.3,7.3h0Zm0-13.42A6.12,6.12,0,1,0,35.82,28a6.13,6.13,0,0,0-6.12-6.12h0Z" style="fill:#fff"/><path d="M23.69,32.18H8.18A1.18,1.18,0,0,1,7,31V11.8a1.18,1.18,0,0,1,1.18-1.18H32.32a1.18,1.18,0,0,1,1.18,1.18V21.85H31.14V13H9.35V29.83H23.69v2.35h0Z" style="fill:#fff"/><line x1="29.7" y1="28.04" x2="33.49" y2="28.04" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-width:1.763880513519565px"/><line x1="29.7" y1="28.04" x2="29.7" y2="24.24" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-width:1.763880513519565px"/></svg>
\ No newline at end of file
diff --git a/qml/icons/detail.svg b/qml/icons/detail.svg
new file mode 100644
index 0000000..142a1a0
--- /dev/null
+++ b/qml/icons/detail.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>detail</title><rect width="64" height="64" style="fill:#09102b"/><path d="M34.92,11.23H9.08A1.08,1.08,0,0,0,8,12.31V31.69a1.08,1.08,0,0,0,1.08,1.08H34.92A1.08,1.08,0,0,0,36,31.69V12.31A1.08,1.08,0,0,0,34.92,11.23ZM33.85,25H23.29V13.39H33.85V25Zm-4.56,5.62h-6V26h6v4.62Zm-8,0h-4V26h4v4.62Zm0-17.23V25H10.15V13.39H21.29ZM10.15,26h5.13v4.62H10.15V26Zm20.13,4.62V26h3.56v4.62H30.29Z" transform="translate(10.1 10)" style="fill:#fff"/><rect x="22.39" y="25" width="8" height="1" style="fill:#fff"/><rect x="22.39" y="30" width="8" height="1" style="fill:#fff"/><rect x="22.39" y="27" width="8" height="1" style="fill:#fff"/><rect x="22.39" y="32" width="8" height="1" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/detail_icon.svg b/qml/icons/detail_icon.svg
new file mode 100644
index 0000000..f62ec81
--- /dev/null
+++ b/qml/icons/detail_icon.svg
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="detail"
+   viewBox="0 0 44 44"
+   version="1.1"
+   sodipodi:docname="detail_icon.svg"
+   width="44"
+   height="44"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata4521">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>detail</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4519" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="716"
+     inkscape:window-height="480"
+     id="namedview4517"
+     showgrid="false"
+     inkscape:zoom="5.3636364"
+     inkscape:cx="22"
+     inkscape:cy="22"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="detail"
+     inkscape:pagecheckerboard="true"
+     fit-margin-top="5.08"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="5.08" />
+  <title
+     id="title4504">detail</title>
+  <path
+     d="M 42.31,5.08 H 1.69 A 1.69,1.69 0 0 0 0,6.77 v 30.46 a 1.69,1.69 0 0 0 1.69,1.69 H 42.31 A 1.69,1.69 0 0 0 44,37.23 V 6.77 A 1.69,1.69 0 0 0 42.31,5.08 Z m -1.7,21.63 H 24 V 8.46 h 16.61 z m -7.16,8.82 H 24 v -7.24 h 9.43 z m -12.57,0 h -6.29 v -7.24 h 6.29 z m 0,-27.08 V 26.71 H 3.38 V 8.46 Z M 3.38,28.29 h 8.07 v 7.25 H 3.38 Z M 35,35.54 v -7.25 h 5.59 v 7.25 z"
+     style="fill:#ffffff"
+     id="path4506"
+     inkscape:connector-curvature="0" />
+  <rect
+     x="6.7399998"
+     y="11"
+     width="12.57"
+     height="1.5700001"
+     style="fill:#ffffff"
+     id="rect4508" />
+  <rect
+     x="6.7399998"
+     y="18.860001"
+     width="12.57"
+     height="1.5700001"
+     style="fill:#ffffff"
+     id="rect4510" />
+  <rect
+     x="6.7399998"
+     y="14.140001"
+     width="12.57"
+     height="1.5700001"
+     style="fill:#ffffff"
+     id="rect4512" />
+  <rect
+     x="6.7399998"
+     y="22"
+     width="12.57"
+     height="1.5700001"
+     style="fill:#ffffff"
+     id="rect4514" />
+</svg>
diff --git a/qml/icons/detail_icon_disabled.svg b/qml/icons/detail_icon_disabled.svg
new file mode 100644
index 0000000..697a0a0
--- /dev/null
+++ b/qml/icons/detail_icon_disabled.svg
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="detail"
+   viewBox="0 0 44 44"
+   version="1.1"
+   sodipodi:docname="detail_icon_disabled.svg"
+   width="44"
+   height="44"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata4521">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>detail</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4519" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1137"
+     id="namedview4517"
+     showgrid="false"
+     inkscape:zoom="5.3636364"
+     inkscape:cx="-8.29661"
+     inkscape:cy="22"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="detail"
+     inkscape:pagecheckerboard="true"
+     fit-margin-top="5.08"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="5.08" />
+  <title
+     id="title4504">detail</title>
+  <path
+     d="M 42.31,5.08 H 1.69 A 1.69,1.69 0 0 0 0,6.77 v 30.46 a 1.69,1.69 0 0 0 1.69,1.69 H 42.31 A 1.69,1.69 0 0 0 44,37.23 V 6.77 A 1.69,1.69 0 0 0 42.31,5.08 Z m -1.7,21.63 H 24 V 8.46 h 16.61 z m -7.16,8.82 H 24 v -7.24 h 9.43 z m -12.57,0 h -6.29 v -7.24 h 6.29 z m 0,-27.08 V 26.71 H 3.38 V 8.46 Z M 3.38,28.29 h 8.07 v 7.25 H 3.38 Z M 35,35.54 v -7.25 h 5.59 v 7.25 z"
+     style="fill:#848895;fill-opacity:1"
+     id="path4506"
+     inkscape:connector-curvature="0" />
+  <rect
+     x="6.7399998"
+     y="11"
+     width="12.57"
+     height="1.5700001"
+     style="fill:#848895;fill-opacity:1"
+     id="rect4508" />
+  <rect
+     x="6.7399998"
+     y="18.860001"
+     width="12.57"
+     height="1.5700001"
+     style="fill:#848895;fill-opacity:1"
+     id="rect4510" />
+  <rect
+     x="6.7399998"
+     y="14.140001"
+     width="12.57"
+     height="1.5700001"
+     style="fill:#848895;fill-opacity:1"
+     id="rect4512" />
+  <rect
+     x="6.7399998"
+     y="22"
+     width="12.57"
+     height="1.5700001"
+     style="fill:#848895;fill-opacity:1"
+     id="rect4514" />
+</svg>
diff --git a/qml/icons/display_icon.svg b/qml/icons/display_icon.svg
new file mode 100644
index 0000000..fa8b09c
--- /dev/null
+++ b/qml/icons/display_icon.svg
@@ -0,0 +1 @@
+<svg id="display" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>display</title><path d="M34.83,28.68H9.17A1.17,1.17,0,0,1,8,27.52V11.18A1.17,1.17,0,0,1,9.17,10H34.83A1.17,1.17,0,0,1,36,11.18V27.52a1.17,1.17,0,0,1-1.17,1.17h0Zm-24.5-2.33H33.67v-14H10.33v14h0Z" style="fill:#fff"/><path d="M26.3,34H17.7a1.17,1.17,0,1,1,0-2.33h8.6a1.17,1.17,0,1,1,0,2.33h0Z" style="fill:#fff"/><path d="M19,33.64a1.17,1.17,0,0,1-1.17-1.17V27.76a1.17,1.17,0,1,1,2.33,0v4.72A1.17,1.17,0,0,1,19,33.64h0Z" style="fill:#fff"/><path d="M25,33.64a1.17,1.17,0,0,1-1.17-1.17V27.76a1.17,1.17,0,1,1,2.33,0v4.72A1.17,1.17,0,0,1,25,33.64h0Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/grid_icon.svg b/qml/icons/grid_icon.svg
new file mode 100644
index 0000000..fe08f0c
--- /dev/null
+++ b/qml/icons/grid_icon.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="grid"
+   viewBox="0 0 44 43.999999"
+   version="1.1"
+   sodipodi:docname="grid_icon.svg"
+   width="44"
+   height="44"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata3744">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>grid_icon</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3742" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="716"
+     inkscape:window-height="480"
+     id="namedview3740"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:zoom="5.3636364"
+     inkscape:cx="22"
+     inkscape:cy="22.000003"
+     inkscape:window-x="163"
+     inkscape:window-y="291"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="grid"
+     fit-margin-top="5.08"
+     fit-margin-bottom="5.08"
+     fit-margin-left="0"
+     fit-margin-right="0" />
+  <title
+     id="title3735">grid_icon</title>
+  <path
+     d="M 42.31,5.08 H 1.69 A 1.69,1.69 0 0 0 0,6.77 v 30.46 a 1.69,1.69 0 0 0 1.69,1.69 H 42.31 A 1.69,1.69 0 0 0 44,37.23 V 6.77 A 1.69,1.69 0 0 0 42.31,5.08 Z M 40.62,21.26 H 29.19 V 8.46 h 11.43 z m -23.79,0 V 8.46 h 10.41 v 12.8 z m 10.41,1.3 v 13 H 16.83 v -13 z M 14.88,8.46 v 12.8 H 3.39 V 8.46 Z M 3.39,22.56 h 11.49 v 13 H 3.39 Z m 25.81,13 v -13 h 11.42 v 13 z"
+     style="fill:#ffffff"
+     id="path3737"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/qml/icons/grid_icon_disabled.svg b/qml/icons/grid_icon_disabled.svg
new file mode 100644
index 0000000..942b2ed
--- /dev/null
+++ b/qml/icons/grid_icon_disabled.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="grid"
+   viewBox="0 0 44 43.999999"
+   version="1.1"
+   sodipodi:docname="grid_icon_disabled.svg"
+   width="44"
+   height="44"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata3744">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>grid_icon</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3742" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1267"
+     inkscape:window-height="873"
+     id="namedview3740"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:zoom="5.3636364"
+     inkscape:cx="22"
+     inkscape:cy="22.000003"
+     inkscape:window-x="232"
+     inkscape:window-y="137"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="grid"
+     fit-margin-top="5.08"
+     fit-margin-bottom="5.08"
+     fit-margin-left="0"
+     fit-margin-right="0" />
+  <title
+     id="title3735">grid_icon</title>
+  <path
+     d="M 42.31,5.08 H 1.69 A 1.69,1.69 0 0 0 0,6.77 v 30.46 a 1.69,1.69 0 0 0 1.69,1.69 H 42.31 A 1.69,1.69 0 0 0 44,37.23 V 6.77 A 1.69,1.69 0 0 0 42.31,5.08 Z M 40.62,21.26 H 29.19 V 8.46 h 11.43 z m -23.79,0 V 8.46 h 10.41 v 12.8 z m 10.41,1.3 v 13 H 16.83 v -13 z M 14.88,8.46 v 12.8 H 3.39 V 8.46 Z M 3.39,22.56 h 11.49 v 13 H 3.39 Z m 25.81,13 v -13 h 11.42 v 13 z"
+     style="fill:#848895;fill-opacity:1"
+     id="path3737"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/qml/icons/header_toggle.png b/qml/icons/header_toggle.png
new file mode 100644
index 0000000..0482820
--- /dev/null
+++ b/qml/icons/header_toggle.png
diff --git a/qml/icons/header_toggle_icon.svg b/qml/icons/header_toggle_icon.svg
new file mode 100644
index 0000000..18f71c5
--- /dev/null
+++ b/qml/icons/header_toggle_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>header_toggle</title><g style="isolation:isolate"><g id="toggle"><g style="opacity:0.35000000000000003;mix-blend-mode:multiply"><polygon points="11 18.5 23.16 29.5 35 18.5 11 18.5" style="fill:none;stroke:#09102b;stroke-linejoin:round;stroke-width:2px"/></g><polygon points="10 16.5 22.16 27.5 34 16.5 10 16.5" style="fill:none;stroke:#fff;stroke-linejoin:round;stroke-width:2px"/></g></g></svg>
\ No newline at end of file
diff --git a/qml/icons/info_icon.svg b/qml/icons/info_icon.svg
new file mode 100644
index 0000000..8a7d960
--- /dev/null
+++ b/qml/icons/info_icon.svg
@@ -0,0 +1 @@
+<svg id="info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>info</title><path d="M21.87,17.53a1.36,1.36,0,0,1-.93-0.33,1.29,1.29,0,0,1,0-1.84A1.33,1.33,0,0,1,21.87,15a1.35,1.35,0,0,1,.89.32,1.15,1.15,0,0,1,.39.94,1.19,1.19,0,0,1-.38.93,1.31,1.31,0,0,1-.9.34m1.28,2.67v7.48a1.67,1.67,0,0,1-.37,1.18,1.23,1.23,0,0,1-.94.4,1.17,1.17,0,0,1-.92-0.41,1.73,1.73,0,0,1-.36-1.17V20.28a1.66,1.66,0,0,1,.36-1.16,1.19,1.19,0,0,1,.92-0.39,1.24,1.24,0,0,1,.94.39,1.5,1.5,0,0,1,.37,1.08" style="fill:#fff"/><path d="M21.89,37a15,15,0,1,1,10.62-4.4A14.89,14.89,0,0,1,21.89,37m0-27.46a12.46,12.46,0,1,0,8.81,3.65A12.37,12.37,0,0,0,21.9,9.54" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/language_icon.svg b/qml/icons/language_icon.svg
new file mode 100644
index 0000000..2d287b6
--- /dev/null
+++ b/qml/icons/language_icon.svg
@@ -0,0 +1 @@
+<svg id="language" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>language</title><path d="M22,36A14,14,0,1,1,36,22,14,14,0,0,1,22,36h0Zm0-25.64A11.64,11.64,0,1,0,33.64,22,11.66,11.66,0,0,0,22,10.36h0Z" style="fill:#fff"/><path d="M22,35.41c-4.41,0-8-6-8-13.41S17.59,8.59,22,8.59s8,6,8,13.41-3.59,13.41-8,13.41h0ZM22,9.77c-3.76,0-6.83,5.49-6.83,12.23S18.24,34.23,22,34.23,28.83,28.74,28.83,22,25.76,9.77,22,9.77h0Z" style="fill:#fff"/><path d="M22,35.41a0.59,0.59,0,0,1-.59-0.59V9.18A0.59,0.59,0,0,1,22,8.59a13.41,13.41,0,0,1,0,26.82h0ZM22.59,9.78V34.22a12.23,12.23,0,0,0,0-24.44h0Z" style="fill:#fff"/><path d="M34,27.11H10a0.59,0.59,0,0,1-.55-0.38,13.26,13.26,0,0,1,0-9.45A0.59,0.59,0,0,1,10,16.89H34a0.59,0.59,0,0,1,.55.38,13.24,13.24,0,0,1,0,9.46,0.59,0.59,0,0,1-.55.38h0ZM10.43,25.93H33.57a12,12,0,0,0,0-7.86H10.43a12,12,0,0,0,0,7.86h0Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/mouse_icon.svg b/qml/icons/mouse_icon.svg
new file mode 100644
index 0000000..8d5d088
--- /dev/null
+++ b/qml/icons/mouse_icon.svg
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="mouse"
+   viewBox="0 0 38.22797 38.29335"
+   version="1.1"
+   sodipodi:docname="mouse_icon.svg"
+   width="38.22797"
+   height="38.29335"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata3733">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>mouse_icon</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="716"
+     inkscape:window-height="480"
+     id="namedview3731"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:zoom="5.3636364"
+     inkscape:cx="17.310934"
+     inkscape:cy="12.770935"
+     inkscape:window-x="281"
+     inkscape:window-y="283"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="mouse"
+     fit-margin-top="3.9"
+     fit-margin-bottom="3.9"
+     fit-margin-left="0"
+     fit-margin-right="0" />
+  <defs
+     id="defs3706">
+    <clipPath
+       id="clip-path">
+      <polygon
+         points="30.87,5.33 28.23,5.83 22.8,4.3 18.92,7.24 9.96,3.31 29,-5.98 42.56,8.54 26.94,20.62 29.12,14.45 "
+         style="fill:none"
+         id="polygon3703" />
+    </clipPath>
+  </defs>
+  <title
+     id="title3708">mouse_icon</title>
+  <path
+     d="m 0.31093391,25.622418 a 1.06,1.06 0 0 1 0,-1.5 l 4.22999999,-4.25 a 1.06,1.06 0 0 1 1.5,0 l 8.4800001,8.46 v 0 a 1.06,1.06 0 0 1 0,1.5 l -4.21,4.25 a 1.06,1.06 0 0 1 -1.5000001,0 z m 4.99999999,-3.5 -2.76,2.75 7,7 2.7300001,-2.74 -7.0000001,-7 z"
+     style="fill:#ffffff"
+     id="path3710"
+     inkscape:connector-curvature="0" />
+  <path
+     d="m 19.490934,8.8724178 a 1,1 0 0 1 0,1.3600002 l -4.41,4.41 a 3.68,3.68 0 0 1 0.77,0.48 l 4.33,-4.44 a 1,1 0 0 1 1.36,1.36 l -4.31,4.42 0.62,0.62 4.12,-4.23 a 1,1 0 1 1 1.34,1.35 l -4.15,4.26 a 6,6 0 0 1 0.5,0.81 l 4,-4 a 0.86,0.86 0 0 1 1.27,0 1,1 0 0 1 0,1.36 l -5.62,5.69 -1.27,1.2 -3.23,3.26 a 2.38,2.38 0 0 1 -1.39,0.66 l -6.5700001,-6.56 a 2.59,2.59 0 0 1 0.22,-0.76 l 1.38,-5 a 1,1 0 0 1 0.26,-0.44 l 3.0500001,-3.05 a 0.91216775,0.91216775 0 1 1 1.29,1.29 l -1.24,1.22 -0.22,1.26 6.54,-6.5400002 a 1,1 0 0 1 1.36,0 m 1.5,-1.5 a 3.09,3.09 0 0 0 -4.36,0 l -2.4,2.4 a 3.07,3.07 0 0 0 -4,0.3400002 l -3.0200001,3.06 a 3.12,3.12 0 0 0 -0.81,1.36 l -1.33,4.89 a 4.74,4.74 0 0 0 -0.32,1.19 2.12,2.12 0 0 0 0.6,1.79 v 0 l 6.5600001,6.56 a 2.12,2.12 0 0 0 1.78,0.6 4.48,4.48 0 0 0 2.62,-1.27 l 3.23,-3.23 1.23,-1.23 5.41,-5.49 a 3.09,3.09 0 0 0 0,-4.36 3,3 0 0 0 -0.7,-0.52 3.08,3.08 0 0 0 -1.85,-2.51 3.08,3.08 0 0 0 -0.64,-1.3100002 2.33,2.33 0 0 0 -1.14,-0.53 3.07,3.07 0 0 0 -0.87,-1.74 z"
+     style="fill:#ffffff"
+     id="path3712"
+     inkscape:connector-curvature="0" />
+  <g
+     clip-path="url(#clip-path)"
+     id="g3716"
+     transform="translate(-4.6890661,3.5224178)">
+    <path
+       d="M 18.34,16.84 A 9,9 0 0 1 16.4,14 c -1.14,-2.88 1,-6.75 2.41,-8.18 l 4.11,-4.11 a 4.79,4.79 0 0 1 6.63,0 l 4,4 a 4.8,4.8 0 0 1 0,6.66 l -4.1,4.1 c -1.44,1.41 -5.3,3.56 -8.17,2.42 a 9,9 0 0 1 -2.9,-1.95 z M 32.34,6.76 28.4,2.85 a 3.14,3.14 0 0 0 -4.28,0 L 20,7 c -1.32,1.35 -2.78,4.51 -2,6.37 a 7.43,7.43 0 0 0 3.92,3.91 c 1.84,0.73 5,-0.73 6.36,-2.06 l 4.1,-4.1 a 3.15,3.15 0 0 0 0,-4.32 z"
+       style="fill:#ffffff"
+       id="path3714"
+       inkscape:connector-curvature="0" />
+  </g>
+  <path
+     d="m 32.310934,28.612418 a 1.16,1.16 0 0 1 -0.51,-0.12 5.58,5.58 0 0 1 -3.22,-3.78 7.76,7.76 0 0 1 1.65,-6.1 c 0.68,-0.86 1.4,-1.67 2.1,-2.44 2.18,-2.42 4.06,-4.51 3.51,-7.1100002 a 3.24,3.24 0 0 0 -2.21,-2.48 c -1.87,-0.62 -4.3,0.1 -6.35,1.88 a 1.1660296,1.1660296 0 1 1 -1.53,-1.76 c 2.66,-2.36 5.88,-3.24 8.56,-2.34 a 5.56,5.56 0 0 1 3.76,4.16 c 0.81,3.7600002 -1.66,6.5100002 -4.05,9.1600002 -0.67,0.75 -1.37,1.53 -2,2.33 a 5.5,5.5 0 0 0 -1.21,4.14 3.31,3.31 0 0 0 2,2.21 1.17,1.17 0 0 1 -0.5,2.25 z"
+     style="fill:#ffffff"
+     id="path3718"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/qml/icons/mouse_icon_disabled.svg b/qml/icons/mouse_icon_disabled.svg
new file mode 100644
index 0000000..49c8a39
--- /dev/null
+++ b/qml/icons/mouse_icon_disabled.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="mouse"
+   viewBox="0 0 38.22797 38.29335"
+   version="1.1"
+   sodipodi:docname="mouse_icon_disabled.svg"
+   width="38.22797"
+   height="38.29335"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata3733">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>mouse_icon</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1196"
+     inkscape:window-height="669"
+     id="namedview3731"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:zoom="5.3636364"
+     inkscape:cx="20.760087"
+     inkscape:cy="12.211613"
+     inkscape:window-x="281"
+     inkscape:window-y="283"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="mouse"
+     fit-margin-top="3.9"
+     fit-margin-bottom="3.9"
+     fit-margin-left="0"
+     fit-margin-right="0" />
+  <defs
+     id="defs3706">
+    <clipPath
+       id="clip-path">
+      <polygon
+         points="30.87,5.33 28.23,5.83 22.8,4.3 18.92,7.24 9.96,3.31 29,-5.98 42.56,8.54 26.94,20.62 29.12,14.45 "
+         style="fill:none"
+         id="polygon3703" />
+    </clipPath>
+  </defs>
+  <title
+     id="title3708">mouse_icon</title>
+  <path
+     d="m 0.31093391,25.622418 a 1.06,1.06 0 0 1 0,-1.5 l 4.22999999,-4.25 a 1.06,1.06 0 0 1 1.5,0 l 8.4800001,8.46 v 0 a 1.06,1.06 0 0 1 0,1.5 l -4.21,4.25 a 1.06,1.06 0 0 1 -1.5000001,0 z m 4.99999999,-3.5 -2.76,2.75 7,7 2.7300001,-2.74 -7.0000001,-7 z"
+     style="fill:#848895;fill-opacity:1"
+     id="path3710"
+     inkscape:connector-curvature="0" />
+  <path
+     d="m 19.490934,8.8724178 a 1,1 0 0 1 0,1.3600002 l -4.41,4.41 a 3.68,3.68 0 0 1 0.77,0.48 l 4.33,-4.44 a 1,1 0 0 1 1.36,1.36 l -4.31,4.42 0.62,0.62 4.12,-4.23 a 1,1 0 1 1 1.34,1.35 l -4.15,4.26 a 6,6 0 0 1 0.5,0.81 l 4,-4 a 0.86,0.86 0 0 1 1.27,0 1,1 0 0 1 0,1.36 l -5.62,5.69 -1.27,1.2 -3.23,3.26 a 2.38,2.38 0 0 1 -1.39,0.66 l -6.5700001,-6.56 a 2.59,2.59 0 0 1 0.22,-0.76 l 1.38,-5 a 1,1 0 0 1 0.26,-0.44 l 3.0500001,-3.05 a 0.91216775,0.91216775 0 1 1 1.29,1.29 l -1.24,1.22 -0.22,1.26 6.54,-6.5400002 a 1,1 0 0 1 1.36,0 m 1.5,-1.5 a 3.09,3.09 0 0 0 -4.36,0 l -2.4,2.4 a 3.07,3.07 0 0 0 -4,0.3400002 l -3.0200001,3.06 a 3.12,3.12 0 0 0 -0.81,1.36 l -1.33,4.89 a 4.74,4.74 0 0 0 -0.32,1.19 2.12,2.12 0 0 0 0.6,1.79 v 0 l 6.5600001,6.56 a 2.12,2.12 0 0 0 1.78,0.6 4.48,4.48 0 0 0 2.62,-1.27 l 3.23,-3.23 1.23,-1.23 5.41,-5.49 a 3.09,3.09 0 0 0 0,-4.36 3,3 0 0 0 -0.7,-0.52 3.08,3.08 0 0 0 -1.85,-2.51 3.08,3.08 0 0 0 -0.64,-1.3100002 2.33,2.33 0 0 0 -1.14,-0.53 3.07,3.07 0 0 0 -0.87,-1.74 z"
+     style="fill:#848895;fill-opacity:1"
+     id="path3712"
+     inkscape:connector-curvature="0" />
+  <g
+     clip-path="url(#clip-path)"
+     id="g3716"
+     transform="translate(-4.6890661,3.5224178)"
+     style="fill:#848895;fill-opacity:1">
+    <path
+       d="M 18.34,16.84 A 9,9 0 0 1 16.4,14 c -1.14,-2.88 1,-6.75 2.41,-8.18 l 4.11,-4.11 a 4.79,4.79 0 0 1 6.63,0 l 4,4 a 4.8,4.8 0 0 1 0,6.66 l -4.1,4.1 c -1.44,1.41 -5.3,3.56 -8.17,2.42 a 9,9 0 0 1 -2.9,-1.95 z M 32.34,6.76 28.4,2.85 a 3.14,3.14 0 0 0 -4.28,0 L 20,7 c -1.32,1.35 -2.78,4.51 -2,6.37 a 7.43,7.43 0 0 0 3.92,3.91 c 1.84,0.73 5,-0.73 6.36,-2.06 l 4.1,-4.1 a 3.15,3.15 0 0 0 0,-4.32 z"
+       style="fill:#848895;fill-opacity:1"
+       id="path3714"
+       inkscape:connector-curvature="0" />
+  </g>
+  <path
+     d="m 32.310934,28.612418 a 1.16,1.16 0 0 1 -0.51,-0.12 5.58,5.58 0 0 1 -3.22,-3.78 7.76,7.76 0 0 1 1.65,-6.1 c 0.68,-0.86 1.4,-1.67 2.1,-2.44 2.18,-2.42 4.06,-4.51 3.51,-7.1100002 a 3.24,3.24 0 0 0 -2.21,-2.48 c -1.87,-0.62 -4.3,0.1 -6.35,1.88 a 1.1660296,1.1660296 0 1 1 -1.53,-1.76 c 2.66,-2.36 5.88,-3.24 8.56,-2.34 a 5.56,5.56 0 0 1 3.76,4.16 c 0.81,3.7600002 -1.66,6.5100002 -4.05,9.1600002 -0.67,0.75 -1.37,1.53 -2,2.33 a 5.5,5.5 0 0 0 -1.21,4.14 3.31,3.31 0 0 0 2,2.21 1.17,1.17 0 0 1 -0.5,2.25 z"
+     style="fill:#848895;fill-opacity:1"
+     id="path3718"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/qml/icons/mute_icon.svg b/qml/icons/mute_icon.svg
new file mode 100644
index 0000000..57cf348
--- /dev/null
+++ b/qml/icons/mute_icon.svg
@@ -0,0 +1 @@
+<svg id="mute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>mute</title><path d="M19.57,33a1.18,1.18,0,0,1-.74-0.26l-5.41-4.33H10.09a1.18,1.18,0,0,1-1.18-1.18V16.78a1.18,1.18,0,0,1,1.18-1.18h3.33l5.41-4.33a1.18,1.18,0,0,1,1.92.92V31.82A1.18,1.18,0,0,1,19.57,33h0Zm-8.3-7h2.57a1.18,1.18,0,0,1,.74.26l3.81,3.05V14.64L14.57,17.7a1.18,1.18,0,0,1-.74.26H11.27V26h0Z" style="fill:#fff"/><path d="M33.91,28.19a1.18,1.18,0,0,1-.84-0.35l-10-10a1.18,1.18,0,1,1,1.67-1.67l10,10a1.18,1.18,0,0,1-.84,2h0Z" style="fill:#fff"/><path d="M24,28.26a1.18,1.18,0,0,1-.85-2L33,16.09a1.18,1.18,0,0,1,1.69,1.65L24.8,27.91a1.18,1.18,0,0,1-.85.36h0Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/network_icon.svg b/qml/icons/network_icon.svg
new file mode 100644
index 0000000..6492630
--- /dev/null
+++ b/qml/icons/network_icon.svg
@@ -0,0 +1 @@
+<svg id="network" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>network</title><path d="M13,26.37A4.37,4.37,0,1,1,17.4,22,4.37,4.37,0,0,1,13,26.37h0Zm0-6.48A2.11,2.11,0,1,0,15.14,22,2.12,2.12,0,0,0,13,19.89h0Z" style="fill:#fff"/><path d="M31,16.74a4.37,4.37,0,1,1,4.37-4.37A4.37,4.37,0,0,1,31,16.74h0Zm0-6.48a2.11,2.11,0,1,0,2.11,2.11A2.12,2.12,0,0,0,31,10.26h0Z" style="fill:#fff"/><path d="M31,36a4.37,4.37,0,1,1,4.37-4.37A4.37,4.37,0,0,1,31,36h0Zm0-6.48a2.11,2.11,0,1,0,2.11,2.11A2.12,2.12,0,0,0,31,29.52h0Z" style="fill:#fff"/><path d="M27.64,31a1.13,1.13,0,0,1-.56-0.15L15.56,24.25a1.13,1.13,0,0,1,1.13-2L28.2,28.94a1.13,1.13,0,0,1-.56,2.1h0Z" style="fill:#fff"/><path d="M16.13,21.85a1.13,1.13,0,0,1-.57-2.1L27.07,13.1a1.13,1.13,0,1,1,1.13,2L16.69,21.7a1.12,1.12,0,0,1-.56.15h0Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/pause_icon.svg b/qml/icons/pause_icon.svg
new file mode 100644
index 0000000..1eeb71b
--- /dev/null
+++ b/qml/icons/pause_icon.svg
@@ -0,0 +1 @@
+<svg id="pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>pause</title><path d="M18.68,33H15.74a2.38,2.38,0,0,1-2.38-2.37V13.37A2.38,2.38,0,0,1,15.74,11h2.94a2.38,2.38,0,0,1,2.38,2.37V30.63A2.38,2.38,0,0,1,18.68,33h0ZM15.74,13.07a0.31,0.31,0,0,0-.3.3V30.63a0.31,0.31,0,0,0,.3.3h2.94a0.31,0.31,0,0,0,.3-0.3V13.37a0.31,0.31,0,0,0-.3-0.3H15.74Z" style="fill:#fff"/><path d="M28.26,33H25.32a2.38,2.38,0,0,1-2.38-2.37V13.37A2.38,2.38,0,0,1,25.32,11h2.94a2.38,2.38,0,0,1,2.38,2.37V30.63A2.38,2.38,0,0,1,28.26,33h0ZM25.32,13.07a0.31,0.31,0,0,0-.3.3V30.63a0.31,0.31,0,0,0,.3.3h2.94a0.31,0.31,0,0,0,.3-0.3V13.37a0.31,0.31,0,0,0-.3-0.3H25.32Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/play_icon.svg b/qml/icons/play_icon.svg
new file mode 100644
index 0000000..2384991
--- /dev/null
+++ b/qml/icons/play_icon.svg
@@ -0,0 +1 @@
+<svg id="play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>play</title><path d="M14.22,33a2.12,2.12,0,0,1-2.05-2.34V13.34A2.12,2.12,0,0,1,14.22,11a2.67,2.67,0,0,1,1.33.39l15,8.66a2.14,2.14,0,0,1,0,3.91l-15,8.66a2.66,2.66,0,0,1-1.33.39h0Zm0-19.93a2.64,2.64,0,0,0,0,.28V30.66a0.79,0.79,0,0,0,0,.27,0.88,0.88,0,0,0,.26-0.11l15-8.66A0.81,0.81,0,0,0,29.75,22s-0.09-.08-0.23-0.16l-15-8.66a0.81,0.81,0,0,0-.27-0.11h0Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/power_icon.svg b/qml/icons/power_icon.svg
new file mode 100644
index 0000000..68c6755
--- /dev/null
+++ b/qml/icons/power_icon.svg
@@ -0,0 +1 @@
+<svg id="power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>power</title><path d="M22,18.83a1.25,1.25,0,0,1-1.25-1.26V8.45a1.25,1.25,0,0,1,2.51,0v9.13A1.26,1.26,0,0,1,22,18.83h0Z" style="fill:#fff"/><path d="M22,36.77a13.17,13.17,0,0,1-4.33-25.61,1.25,1.25,0,0,1,.83,2.37,10.67,10.67,0,1,0,7,0,1.25,1.25,0,0,1,.83-2.37A13.17,13.17,0,0,1,22,36.77h0Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/qt_logo_green_rgb.svg b/qml/icons/qt_logo_green_rgb.svg
new file mode 100644
index 0000000..bdb07d1
--- /dev/null
+++ b/qml/icons/qt_logo_green_rgb.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 293.4 216.1" style="enable-background:new 0 0 293.4 216.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#41CD52;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<polygon class="st0" points="265.2,0 255,0 40.7,0 40.7,0 0,40.7 0,176.8 0,187.9 0,216.1 28.2,216.1 38.4,216.1 252.7,216.1 
+		252.7,216.1 293.4,175.4 293.4,39.3 293.4,28.2 293.4,0 	"/>
+	<path class="st1" d="M109.2,169.2c-19.3,0-32.8-5.2-40.4-15.6c-7.6-10.4-11.4-26.9-11.4-49.3c0-22.5,3.9-39.2,11.6-50.1
+		c7.7-10.9,21.2-16.4,40.2-16.4c19.1,0,32.5,5.4,40.1,16.3c7.7,10.8,11.5,27.5,11.5,50.1c0,14.9-1.6,26.9-4.7,36
+		c-3.2,9.2-8.3,16.2-15.5,21l15.6,25.1l-19.1,8.9l-16.5-27.1C118.2,168.9,114.4,169.2,109.2,169.2z M85.1,140.3
+		c4.2,7.2,12.3,10.9,24.2,10.9s19.9-3.6,24.1-10.7c4.1-7.1,6.2-19.2,6.2-36.1c0-17-2.1-29.3-6.4-37S121,55.9,109.3,55.9
+		c-11.6,0-19.6,3.8-24,11.5c-4.3,7.7-6.5,19.9-6.5,36.8C78.8,121,80.9,133.1,85.1,140.3z"/>
+	<path class="st1" d="M232.4,89.2h-25.6v40.9c0,7.6,0.6,12.6,1.7,15.1s4,3.7,8.5,3.7l15.2-0.6l0.9,16.2c-8.3,1.6-14.6,2.4-19,2.4
+		c-10.5,0-17.7-2.4-21.6-7.2c-3.9-4.8-5.9-13.9-5.9-27.3V89.3h-14.1V72h14.2V45.1h20.1V72h25.6V89.2z"/>
+</g>
+</svg>
diff --git a/qml/icons/settings_icon.svg b/qml/icons/settings_icon.svg
new file mode 100644
index 0000000..7862920
--- /dev/null
+++ b/qml/icons/settings_icon.svg
@@ -0,0 +1 @@
+<svg id="settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>settings</title><path d="M35.23,19.08H31a10.28,10.28,0,0,0-1-2.26L32.79,14a1.66,1.66,0,0,0,0-2.36l-1.18-1.17a1.67,1.67,0,0,0-2.36,0l-2.82,2.82a10,10,0,0,0-2.47-1V8.67A1.67,1.67,0,0,0,22.31,7H20.65A1.67,1.67,0,0,0,19,8.67v3.66a9.78,9.78,0,0,0-2.68,1.13L13.94,11.1a1.67,1.67,0,0,0-2.36,0L10.4,12.27a1.68,1.68,0,0,0,0,2.36l2.4,2.4a9.94,9.94,0,0,0-1.11,2.88H8.57A1.67,1.67,0,0,0,6.9,21.58v1.67a1.67,1.67,0,0,0,1.67,1.66h3.35a9.77,9.77,0,0,0,1.35,2.77L11,30a1.67,1.67,0,0,0,0,2.36l1.18,1.18a1.68,1.68,0,0,0,2.36,0L17.06,31a9.69,9.69,0,0,0,2.75.89v3.48A1.67,1.67,0,0,0,21.48,37h1.67a1.67,1.67,0,0,0,1.67-1.67V31.42a9.78,9.78,0,0,0,2.36-1.2l2.68,2.69a1.67,1.67,0,0,0,2.36,0l1.18-1.18a1.66,1.66,0,0,0,0-2.36l-2.94-2.94a9.87,9.87,0,0,0,.82-2.34h4a1.67,1.67,0,0,0,1.67-1.67V20.75A1.67,1.67,0,0,0,35.23,19.08ZM21.48,28.62A6.62,6.62,0,1,1,28.11,22,6.62,6.62,0,0,1,21.48,28.62Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/settingsmenu_launcher_icon.svg b/qml/icons/settingsmenu_launcher_icon.svg
new file mode 100644
index 0000000..83dcad5
--- /dev/null
+++ b/qml/icons/settingsmenu_launcher_icon.svg
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="Layer_21"
+   data-name="Layer 21"
+   viewBox="0 0 28 25"
+   version="1.1"
+   sodipodi:docname="settingsmenu_launcher_icon.svg"
+   width="28"
+   height="25"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata4504">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4502" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1349"
+     inkscape:window-height="913"
+     id="namedview4500"
+     showgrid="false"
+     inkscape:zoom="11"
+     inkscape:cx="14.044687"
+     inkscape:cy="12.137757"
+     inkscape:window-x="189"
+     inkscape:window-y="90"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_21" />
+  <title
+     id="title4485">settingsmenu_launcher</title>
+  <rect
+     x="0"
+     y="0"
+     width="28"
+     height="6"
+     style="fill:#9ca0aa;fill-opacity:1"
+     id="rect4487" />
+  <rect
+     x="0"
+     y="10"
+     width="28"
+     height="6"
+     style="fill:#9ca0aa;fill-opacity:1"
+     id="rect4489" />
+  <rect
+     x="0"
+     y="20"
+     width="28"
+     height="5"
+     style="fill:#9ca0aa;fill-opacity:1"
+     id="rect4491" />
+  <rect
+     x="0"
+     y="0"
+     width="28"
+     height="6"
+     style="fill:#9ca0aa;fill-opacity:1"
+     id="rect4493" />
+  <rect
+     x="0"
+     y="10"
+     width="28"
+     height="6"
+     style="fill:#9ca0aa;fill-opacity:1"
+     id="rect4495" />
+  <rect
+     x="0"
+     y="20"
+     width="28"
+     height="5"
+     style="fill:#9ca0aa;fill-opacity:1"
+     id="rect4497" />
+</svg>
diff --git a/qml/images/spinner.png b/qml/icons/spinner.png
index f64144a..f64144a 100644
--- a/qml/images/spinner.png
+++ b/qml/icons/spinner.png
diff --git a/qml/icons/stop_icon.svg b/qml/icons/stop_icon.svg
new file mode 100644
index 0000000..c694e55
--- /dev/null
+++ b/qml/icons/stop_icon.svg
@@ -0,0 +1 @@
+<svg id="stop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>stop</title><path d="M29.83,33H14.17A3.18,3.18,0,0,1,11,29.83V14.17A3.17,3.17,0,0,1,14.17,11H29.83A3.18,3.18,0,0,1,33,14.17V29.83A3.18,3.18,0,0,1,29.83,33h0ZM14.17,13.07a1.1,1.1,0,0,0-1.1,1.1V29.83a1.1,1.1,0,0,0,1.1,1.1H29.83a1.1,1.1,0,0,0,1.1-1.1V14.17a1.1,1.1,0,0,0-1.1-1.1H14.17Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/icons/touch_icon.svg b/qml/icons/touch_icon.svg
new file mode 100644
index 0000000..0237b64
--- /dev/null
+++ b/qml/icons/touch_icon.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="touch"
+   viewBox="0 0 27.831027 27.886194"
+   version="1.1"
+   sodipodi:docname="touch_icon.svg"
+   width="27.831026"
+   height="27.886194"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata3701">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>touch_icon</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3699" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="959"
+     inkscape:window-height="885"
+     id="namedview3697"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:zoom="11"
+     inkscape:cx="-2.7170763"
+     inkscape:cy="5.8448805"
+     inkscape:window-x="392"
+     inkscape:window-y="160"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="touch"
+     fit-margin-left="2.2"
+     fit-margin-right="2.2"
+     fit-margin-top="0"
+     fit-margin-bottom="0" />
+  <title
+     id="title3680">touch_icon</title>
+  <path
+     d="m 2.5109339,19.115261 a 1.06,1.06 0 0 1 0,-1.5 l 4.23,-4.25 a 1.06,1.06 0 0 1 1.5,0 l 8.4800001,8.46 v 0 a 1.06,1.06 0 0 1 0,1.5 l -4.24,4.25 a 1.06,1.06 0 0 1 -1.5,0 l -8.4700001,-8.45 z m 5,-3.5 -2.74,2.74 7.0000001,7 2.73,-2.74 -7.0000001,-7 z"
+     style="fill:#ffffff"
+     id="path3682"
+     inkscape:connector-curvature="0" />
+  <path
+     d="m 21.700934,2.3652608 a 1,1 0 0 1 0,1.36 l -4.41,4.41 a 3.68,3.68 0 0 1 0.77,0.48 l 0.44,-0.44 a 1,1 0 0 1 1.37,1.35 l -0.42,0.42 0.62,0.6200002 0.23,-0.23 a 1,1 0 1 1 1.36,1.36 l -0.25,0.25 a 3.68,3.68 0 0 1 0.48,0.76 1,1 0 0 1 1.36,1.36 l -1.74,1.74 -1.23,1.23 -3.23,3.23 a 2.38,2.38 0 0 1 -1.39,0.66 l -6.5900001,-6.55 a 2.52,2.52 0 0 1 0.22,-0.76 L 10.660934,8.6152608 a 1,1 0 0 1 0.26,-0.44 l 3.05,-3.05 a 0.91,0.91 0 1 1 1.3,1.27 l -1.25,1.24 -0.22,1.25 6.54,-6.54 a 1,1 0 0 1 1.36,0 m 1.5,-1.46000001 a 3.09,3.09 0 0 0 -4.33,0 l -2.4,2.40000001 a 3.08,3.08 0 0 0 -4,0.34 l -3.0500001,3.03 a 3.13,3.13 0 0 0 -0.81,1.39 l -1.32,4.8400002 a 4.74,4.74 0 0 0 -0.32,1.19 2.12,2.12 0 0 0 0.6,1.81 v 0 l 6.5700001,6.56 a 2.11,2.11 0 0 0 1.78,0.6 4.49,4.49 0 0 0 2.61,-1.27 l 3.23,-3.23 1.23,-1.23 1.74,-1.74 a 3.09,3.09 0 0 0 0,-4.36 3,3 0 0 0 -0.7,-0.52 3.08,3.08 0 0 0 -1.85,-2.5100002 3.09,3.09 0 0 0 -0.63,-1.3 l 1.65,-1.65 a 3.09,3.09 0 0 0 0,-4.36000001 z"
+     style="fill:#ffffff"
+     id="path3684"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/qml/icons/touch_icon_disabled.svg b/qml/icons/touch_icon_disabled.svg
new file mode 100644
index 0000000..77b27b2
--- /dev/null
+++ b/qml/icons/touch_icon_disabled.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="touch"
+   viewBox="0 0 27.831027 27.886194"
+   version="1.1"
+   sodipodi:docname="touch_icon_disabled.svg"
+   width="27.831026"
+   height="27.886194"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata3701">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>touch_icon</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3699" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1248"
+     inkscape:window-height="885"
+     id="namedview3697"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:zoom="11"
+     inkscape:cx="7.6920146"
+     inkscape:cy="10.117608"
+     inkscape:window-x="392"
+     inkscape:window-y="160"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="touch"
+     fit-margin-left="2.2"
+     fit-margin-right="2.2"
+     fit-margin-top="0"
+     fit-margin-bottom="0" />
+  <title
+     id="title3680">touch_icon</title>
+  <path
+     d="m 2.5109339,19.115261 a 1.06,1.06 0 0 1 0,-1.5 l 4.23,-4.25 a 1.06,1.06 0 0 1 1.5,0 l 8.4800001,8.46 v 0 a 1.06,1.06 0 0 1 0,1.5 l -4.24,4.25 a 1.06,1.06 0 0 1 -1.5,0 l -8.4700001,-8.45 z m 5,-3.5 -2.74,2.74 7.0000001,7 2.73,-2.74 -7.0000001,-7 z"
+     style="fill:#848895;fill-opacity:1"
+     id="path3682"
+     inkscape:connector-curvature="0" />
+  <path
+     d="m 21.700934,2.3652608 a 1,1 0 0 1 0,1.36 l -4.41,4.41 a 3.68,3.68 0 0 1 0.77,0.48 l 0.44,-0.44 a 1,1 0 0 1 1.37,1.35 l -0.42,0.42 0.62,0.6200002 0.23,-0.23 a 1,1 0 1 1 1.36,1.36 l -0.25,0.25 a 3.68,3.68 0 0 1 0.48,0.76 1,1 0 0 1 1.36,1.36 l -1.74,1.74 -1.23,1.23 -3.23,3.23 a 2.38,2.38 0 0 1 -1.39,0.66 l -6.5900001,-6.55 a 2.52,2.52 0 0 1 0.22,-0.76 L 10.660934,8.6152608 a 1,1 0 0 1 0.26,-0.44 l 3.05,-3.05 a 0.91,0.91 0 1 1 1.3,1.27 l -1.25,1.24 -0.22,1.25 6.54,-6.54 a 1,1 0 0 1 1.36,0 m 1.5,-1.46000001 a 3.09,3.09 0 0 0 -4.33,0 l -2.4,2.40000001 a 3.08,3.08 0 0 0 -4,0.34 l -3.0500001,3.03 a 3.13,3.13 0 0 0 -0.81,1.39 l -1.32,4.8400002 a 4.74,4.74 0 0 0 -0.32,1.19 2.12,2.12 0 0 0 0.6,1.81 v 0 l 6.5700001,6.56 a 2.11,2.11 0 0 0 1.78,0.6 4.49,4.49 0 0 0 2.61,-1.27 l 3.23,-3.23 1.23,-1.23 1.74,-1.74 a 3.09,3.09 0 0 0 0,-4.36 3,3 0 0 0 -0.7,-0.52 3.08,3.08 0 0 0 -1.85,-2.5100002 3.09,3.09 0 0 0 -0.63,-1.3 l 1.65,-1.65 a 3.09,3.09 0 0 0 0,-4.36000001 z"
+     style="fill:#848895;fill-opacity:1"
+     id="path3684"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/qml/icons/volume_icon.svg b/qml/icons/volume_icon.svg
new file mode 100644
index 0000000..095875a
--- /dev/null
+++ b/qml/icons/volume_icon.svg
@@ -0,0 +1 @@
+<svg id="volume" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>volume</title><path d="M28.63,32.79a1.18,1.18,0,0,1-.84-2,12.42,12.42,0,0,0,0-17.55,1.18,1.18,0,1,1,1.67-1.67,14.79,14.79,0,0,1,0,20.89,1.18,1.18,0,0,1-.84.35h0Z" style="fill:#fff"/><path d="M25.2,29.37a1.18,1.18,0,0,1-.84-2,7.57,7.57,0,0,0,0-10.7A1.18,1.18,0,1,1,26,15a9.93,9.93,0,0,1,0,14,1.18,1.18,0,0,1-.84.35h0Z" style="fill:#fff"/><path d="M20.89,33a1.17,1.17,0,0,1-.74-0.26l-5.41-4.33H11.4a1.18,1.18,0,0,1-1.18-1.18V16.78A1.18,1.18,0,0,1,11.4,15.6h3.33l5.42-4.33a1.18,1.18,0,0,1,1.92.92V31.82A1.18,1.18,0,0,1,20.89,33h0Zm-8.3-7h2.57a1.18,1.18,0,0,1,.74.26l3.82,3.05V14.64L15.89,17.7a1.18,1.18,0,0,1-.74.26H12.58V26h0Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/qml/images/Play_btn.png b/qml/images/Play_btn.png
deleted file mode 100644
index 8949188..0000000
--- a/qml/images/Play_btn.png
+++ /dev/null
diff --git a/qml/images/backImg.jpg b/qml/images/backImg.jpg
new file mode 100644
index 0000000..b41a4eb
--- /dev/null
+++ b/qml/images/backImg.jpg
diff --git a/qml/images/close-button.png b/qml/images/close-button.png
deleted file mode 100644
index 4d0f883..0000000
--- a/qml/images/close-button.png
+++ /dev/null
diff --git a/qml/images/codeless.png b/qml/images/codeless.png
deleted file mode 100644
index 0aadc90..0000000
--- a/qml/images/codeless.png
+++ /dev/null
diff --git a/qml/images/particle.png b/qml/images/particle.png
deleted file mode 100644
index 5c83896..0000000
--- a/qml/images/particle.png
+++ /dev/null
diff --git a/qml/images/particle_star.png b/qml/images/particle_star.png
deleted file mode 100644
index 0d592cf..0000000
--- a/qml/images/particle_star.png
+++ /dev/null
diff --git a/qml/images/particle_star2.png b/qml/images/particle_star2.png
deleted file mode 100644
index bb88c18..0000000
--- a/qml/images/particle_star2.png
+++ /dev/null
diff --git a/qml/images/play.png b/qml/images/play.png
deleted file mode 100644
index 57cfa28..0000000
--- a/qml/images/play.png
+++ /dev/null
diff --git a/qml/images/qt-logo-green-mask.png b/qml/images/qt-logo-green-mask.png
deleted file mode 100644
index a682747..0000000
--- a/qml/images/qt-logo-green-mask.png
+++ /dev/null
diff --git a/qml/images/qt-logo-white-mask.png b/qml/images/qt-logo-white-mask.png
deleted file mode 100644
index cf80811..0000000
--- a/qml/images/qt-logo-white-mask.png
+++ /dev/null
diff --git a/qml/images/qt-logo.png b/qml/images/qt-logo.png
deleted file mode 100644
index f3e8f29..0000000
--- a/qml/images/qt-logo.png
+++ /dev/null
diff --git a/qml/images/settings.png b/qml/images/settings.png
deleted file mode 100644
index 8aa0794..0000000
--- a/qml/images/settings.png
+++ /dev/null
diff --git a/qml/settings.xml b/qml/settings.xml
new file mode 100644
index 0000000..fb19ebc
--- /dev/null
+++ b/qml/settings.xml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xml>
+    <settings>
+        <item>
+            <title>Layout &amp; Input</title>
+            <view>LayoutSettings</view>
+            <path>qml</path>
+            <icon>qml/icons/detail_icon.svg</icon>
+            </item>
+        <item>
+            <title>Network</title>
+            <view>NetworkSettings</view>
+            <path>network</path>
+            <icon>newIcons/network_icon.svg</icon>
+        </item>
+        <item>
+            <title>Date &amp; Time</title>
+            <view>TimeDate</view>
+            <path>timedate</path>
+            <icon>newIcons/date-time_icon.svg</icon>
+        </item>
+        <item>
+            <title>Language</title>
+            <view>Language</view>
+            <path>locale</path>
+            <icon>newIcons/language_icon.svg</icon>
+        </item>
+        <item>
+            <title>Bluetooth</title>
+            <view>Bluetooth</view>
+            <path>bluetooth</path>
+            <icon>newIcons/bluetooth_icon.svg</icon>
+        </item>
+        <item>
+            <title>Display</title>
+            <view>Display</view>
+            <path>display</path>
+            <icon>newIcons/display_icon.svg</icon>
+        </item>
+        <item>
+            <title>About Qt</title>
+            <view>AboutQt</view>
+            <path>qml</path>
+            <icon>qml/icons/info_icon.svg</icon>
+        </item>
+        <item>
+            <title>Power</title>
+            <view>Power</view>
+            <path>power</path>
+            <icon>newIcons/power_icon.svg</icon>
+        </item>
+    </settings>
+</xml>
diff --git a/resources.qrc b/resources.qrc
deleted file mode 100644
index 1dedbbf..0000000
--- a/resources.qrc
+++ /dev/null
@@ -1,28 +0,0 @@
-<RCC>
-    <qresource prefix="/">
-        <file>qml/Main.qml</file>
-        <file>qml/ApplicationIcon.qml</file>
-        <file>qml/BootScreen.qml</file>
-        <file>qml/LaunchScreen.qml</file>
-        <file>qml/images/codeless.png</file>
-        <file>qml/images/particle.png</file>
-        <file>qml/images/particle_star.png</file>
-        <file>qml/images/qt-logo-green-mask.png</file>
-        <file>qml/images/qt-logo-white-mask.png</file>
-        <file>qml/images/qt-logo.png</file>
-        <file>qml/GlimmeringQtLogo.qml</file>
-        <file>qml/HighlightShader.qml</file>
-        <file>qml/images/play.png</file>
-        <file>qml/images/particle_star2.png</file>
-        <file>qml/images/Play_btn.png</file>
-        <file>qml/images/close-button.png</file>
-        <file>qml/images/settings.png</file>
-        <file>qml/BusyIndicator.qml</file>
-        <file>qml/images/spinner.png</file>
-        <file>qml/AutoScroller.qml</file>
-        <file>qml/HandwritingModeButton.qml</file>
-        <file>qml/images/FloatingButton_Active.svg</file>
-        <file>qml/images/FloatingButton_Available.svg</file>
-        <file>qml/images/FloatingButton_Unavailable.svg</file>
-    </qresource>
-</RCC>
diff --git a/src/applicationsettings.cpp b/src/applicationsettings.cpp
index 4fe7473..2811213 100644
--- a/src/applicationsettings.cpp
+++ b/src/applicationsettings.cpp
@@ -34,7 +34,6 @@ ApplicationSettings::ApplicationSettings(QObject *parent)
     : QObject(parent)
     , m_mainFile(QUrl(QStringLiteral("qrc:///qml/Main.qml")))
     , m_appsRoot("/data/user/qt")
-    , m_isBootAnimationEnabled(true)
     , m_isShowFPSEnabled(false)
 {
 }
@@ -44,11 +43,6 @@ QString ApplicationSettings::appsRoot() const
     return m_appsRoot;
 }
 
-bool ApplicationSettings::isBootAnimationEnabled() const
-{
-    return m_isBootAnimationEnabled;
-}
-
 bool ApplicationSettings::isShowFPSEnabled() const
 {
     return m_isShowFPSEnabled;
@@ -64,8 +58,6 @@ bool ApplicationSettings::parseCommandLineArguments()
         } else if (args.at(i) == QStringLiteral("--applications-root")) {
             ++i;
             m_appsRoot = args.at(i);
-        } else if (args.at(i) == QStringLiteral("--no-boot-animation")) {
-            m_isBootAnimationEnabled = false;
         } else if (args.at(i) == QStringLiteral("--show-fps")) {
             m_isShowFPSEnabled = true;
         } else if (args.at(i) == QStringLiteral("-h")
diff --git a/src/applicationsettings.h b/src/applicationsettings.h
index 6b63c75..70e22c3 100644
--- a/src/applicationsettings.h
+++ b/src/applicationsettings.h
@@ -38,30 +38,24 @@ class ApplicationSettings : public QObject
     Q_OBJECT
     Q_PROPERTY(QUrl mainFile READ mainFile NOTIFY mainFileChanged)
     Q_PROPERTY(QString appsRoot READ appsRoot NOTIFY appsRootChanged)
-    Q_PROPERTY(bool isBootAnimationEnabled READ isBootAnimationEnabled NOTIFY isBootAnimationEnabledChanged)
     Q_PROPERTY(bool isShowFPSEnabled READ isShowFPSEnabled NOTIFY isShowFPSEnabledChanged)
 public:
     explicit ApplicationSettings(QObject *parent = 0);
 
     QUrl mainFile() const;
     QString appsRoot() const;
-    bool isBootAnimationEnabled() const;
     bool isShowFPSEnabled() const;
 
     bool parseCommandLineArguments();
 
-
-
 signals:
     void mainFileChanged(QUrl newFile);
     void appsRootChanged(QString appRoot);
-    void isBootAnimationEnabledChanged(bool isEnabled);
     void isShowFPSEnabledChanged(bool isEnabled);
 
 private:
     QUrl m_mainFile;
     QString m_appsRoot;
-    bool m_isBootAnimationEnabled;
     bool m_isShowFPSEnabled;
 
 };
diff --git a/src/circularindicator.cpp b/src/circularindicator.cpp
new file mode 100644
index 0000000..a3ec477
--- /dev/null
+++ b/src/circularindicator.cpp
@@ -0,0 +1,241 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "circularindicator.h"
+
+CircularIndicator::CircularIndicator(QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+    , mStartAngle(0)
+    , mEndAngle(360)
+    , mMinimumValue(0.0)
+    , mMaximumValue(360.0)
+    , mValue(0.0)
+    , mLineWidth(10)
+    , mProgressColor(QColor(255, 0, 0))
+    , mBackgroundColor(QColor(240, 240, 240))
+    , mPadding(1)
+{
+}
+
+CircularIndicator::~CircularIndicator()
+{
+}
+
+int CircularIndicator::startAngle() const
+{
+    return mStartAngle;
+}
+
+void CircularIndicator::setStartAngle(int angle)
+{
+    if (angle == mStartAngle)
+        return;
+
+    mStartAngle = angle;
+    emit startAngleChanged(mStartAngle);
+    update();
+}
+
+int CircularIndicator::endAngle() const
+{
+    return mEndAngle;
+}
+
+void CircularIndicator::setEndAngle(int angle)
+{
+    if (angle == mEndAngle)
+        return;
+
+    mEndAngle = angle;
+    emit endAngleChanged(mEndAngle);
+    update();
+}
+
+qreal CircularIndicator::minimumValue() const
+{
+    return mMinimumValue;
+}
+
+void CircularIndicator::setMinimumValue(qreal value)
+{
+    if (qFuzzyCompare(value, mMinimumValue))
+        return;
+
+    if (value > mMaximumValue) {
+        qWarning() << this << "\nMinimum value can't exceed maximum value.";
+        return;
+    }
+
+    mMinimumValue = value;
+    emit minimumValueChanged(mMinimumValue);
+    update();
+}
+
+qreal CircularIndicator::maximumValue() const
+{
+    return mMaximumValue;
+}
+
+void CircularIndicator::setMaximumValue(qreal value)
+{
+    if (qFuzzyCompare(value, mMaximumValue))
+        return;
+
+    if (value < mMinimumValue) {
+        qWarning() << this << "\nMaximum value can't be less than minimum value.";
+        return;
+    }
+
+    mMaximumValue = value;
+    emit maximumValueChanged(value);
+    update();
+}
+
+qreal CircularIndicator::value() const
+{
+    return mValue;
+}
+
+void CircularIndicator::setValue(qreal value)
+{
+    if (qFuzzyCompare(value, mValue))
+        return;
+
+    if (value < mMinimumValue) {
+        qWarning() << this << "\nValue can't be less than minimum value.";
+        return;
+    }
+
+    if (value > mMaximumValue) {
+        qWarning() << this << "\nValue can't exceed maximum value.";
+        return;
+    }
+
+    mValue = value;
+    emit valueChanged(mValue);
+    update();
+}
+
+int CircularIndicator::lineWidth() const
+{
+    return mLineWidth;
+}
+
+void CircularIndicator::setLineWidth(int width)
+{
+    if (width == mLineWidth)
+        return;
+
+    mLineWidth = width;
+    emit lineWidthChanged(mLineWidth);
+    update();
+}
+
+QColor CircularIndicator::progressColor() const
+{
+    return mProgressColor;
+}
+
+void CircularIndicator::setProgressColor(QColor color)
+{
+    if (color == mProgressColor)
+        return;
+
+    mProgressColor = color;
+    emit progressColorChanged(mProgressColor);
+    update();
+}
+
+QColor CircularIndicator::backgroundColor() const
+{
+    return mBackgroundColor;
+}
+
+void CircularIndicator::setBackgroundColor(QColor color)
+{
+    if (color == mBackgroundColor)
+        return;
+
+    mBackgroundColor = color;
+    emit backgroundColorChanged(mBackgroundColor);
+    update();
+}
+
+int CircularIndicator::padding() const
+{
+    return mPadding;
+}
+
+void CircularIndicator::setPadding(int padding)
+{
+    if (padding == mPadding)
+        return;
+
+    mPadding = padding;
+    emit paddingChanged(mPadding);
+    update();
+}
+
+void CircularIndicator::paint(QPainter *painter)
+{
+    painter->setRenderHint(QPainter::Antialiasing);
+
+    int indicatorSize = qMin(width(), height()) - mPadding * 2 - mLineWidth;
+
+    if (indicatorSize <= 0)
+        return;
+
+    QRect indicatorRect(width() / 2 - indicatorSize / 2,
+                        height() / 2 - indicatorSize / 2,
+                        indicatorSize,
+                        indicatorSize);
+
+    QPen pen;
+    pen.setCapStyle(Qt::FlatCap);
+    pen.setWidth(mLineWidth);
+    pen.setColor(mBackgroundColor);
+    painter->setPen(pen);
+
+    int endAngle = (qAbs(mEndAngle) > 360) ? mEndAngle % 360 : mEndAngle;
+
+    // See http://doc.qt.io/qt-5/qpainter.html#drawArc for details
+    int minimumAngle = (90 - mStartAngle) * 16;
+    int maximumAngle = (90 - endAngle) * 16 - minimumAngle;
+
+    painter->drawArc(indicatorRect, 0, 360 * 16);
+
+    if (qFuzzyCompare(mValue, mMinimumValue))
+        return;
+
+    pen.setColor(mProgressColor);
+    painter->setPen(pen);
+
+    int currentAngle = ((mValue - mMinimumValue) / (mMaximumValue - mMinimumValue)) * maximumAngle;
+
+    painter->drawArc(indicatorRect, minimumAngle, currentAngle);
+}
diff --git a/src/circularindicator.h b/src/circularindicator.h
new file mode 100644
index 0000000..f9adcdc
--- /dev/null
+++ b/src/circularindicator.h
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef CIRCULARINDICATOR_H
+#define CIRCULARINDICATOR_H
+
+#include <QQuickPaintedItem>
+#include <QPainter>
+
+class CircularIndicator : public QQuickPaintedItem
+{
+    Q_OBJECT
+    Q_PROPERTY(int startAngle READ startAngle WRITE setStartAngle NOTIFY startAngleChanged)
+    Q_PROPERTY(int endAngle READ endAngle WRITE setEndAngle NOTIFY endAngleChanged)
+    Q_PROPERTY(qreal minimumValue READ minimumValue WRITE setMinimumValue NOTIFY minimumValueChanged)
+    Q_PROPERTY(qreal maximumValue READ maximumValue WRITE setMaximumValue NOTIFY maximumValueChanged)
+    Q_PROPERTY(qreal value READ value WRITE setValue NOTIFY valueChanged)
+    Q_PROPERTY(int lineWidth READ lineWidth WRITE setLineWidth NOTIFY lineWidthChanged)
+    Q_PROPERTY(QColor progressColor READ progressColor WRITE setProgressColor NOTIFY progressColorChanged)
+    Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor NOTIFY backgroundColorChanged)
+    Q_PROPERTY(int padding READ padding WRITE setPadding NOTIFY paddingChanged)
+
+public:
+    CircularIndicator(QQuickItem *parent = 0);
+    ~CircularIndicator();
+
+    int startAngle() const;
+    int endAngle() const;
+    qreal minimumValue() const;
+    qreal maximumValue() const;
+    qreal value() const;
+    int lineWidth() const;
+    QColor progressColor() const;
+    QColor backgroundColor() const;
+    int padding() const;
+
+public slots:
+    void setStartAngle(int angle);
+    void setEndAngle(int angle);
+    void setMinimumValue(qreal value);
+    void setMaximumValue(qreal value);
+    void setValue(qreal value);
+    void setLineWidth(int width);
+    void setProgressColor(QColor color);
+    void setBackgroundColor(QColor color);
+    void setPadding(int padding);
+
+signals:
+    void startAngleChanged(int);
+    void endAngleChanged(int);
+    void minimumValueChanged(qreal);
+    void maximumValueChanged(qreal);
+    void valueChanged(qreal);
+    void lineWidthChanged(int);
+    void progressColorChanged(QColor);
+    void backgroundColorChanged(QColor);
+    void paddingChanged(int);
+
+protected:
+    void paint(QPainter *painter);
+
+private:
+    int mStartAngle;
+    int mEndAngle;
+    qreal mMinimumValue;
+    qreal mMaximumValue;
+    qreal mValue;
+    int mLineWidth;
+    QColor mProgressColor;
+    QColor mBackgroundColor;
+    int mPadding;
+};
+
+#endif // CIRCULARINDICATOR_H
diff --git a/src/engine.cpp b/src/engine.cpp
index e37cf57..b30e75a 100644
--- a/src/engine.cpp
+++ b/src/engine.cpp
@@ -42,7 +42,6 @@
 #include <QQuickWindow>
 
 
-#define ENGINE_STATE_BOOTING QStringLiteral("booting")
 #define ENGINE_STATE_RUNNING QStringLiteral("running")
 #define ENGINE_STATE_SETTINGS QStringLiteral("settings")
 
@@ -57,10 +56,9 @@ Engine::Engine(QQuickItem *parent)
     , m_intro_done(false)
     , m_apps_ready(false)
     , m_fps_enabled(false)
-    , m_bootAnimationEnabled(true)
     , m_glAvailable(true)
 {
-    m_state = ENGINE_STATE_BOOTING;
+    m_state = ENGINE_STATE_RUNNING;
 
     QScreen *screen = QGuiApplication::primaryScreen();
     m_screenSize = screen->size();
@@ -117,16 +115,6 @@ void Engine::setState(const QString &state)
     emit stateChanged(m_state);
 }
 
-
-void Engine::setBootAnimationEnabled(bool enabled)
-{
-    if (m_bootAnimationEnabled == enabled)
-        return;
-
-    m_bootAnimationEnabled = enabled;
-    emit bootAnimationEnabledChanged(enabled);
-}
-
 int Engine::titleBarSize() const
 {
     return int(QGuiApplication::primaryScreen()->physicalDotsPerInch() / 2.54f);
@@ -180,7 +168,7 @@ bool Engine::fileExists(const QUrl &fileName)
     return file.exists();
 }
 
-void Engine::launchApplication(const QUrl &path, const QString &mainFile, const QString &name)
+void Engine::launchApplication(const QUrl &path, const QString &mainFile, const QString &name, const QString &desc)
 {
     // only launch apps when in the homescreen...
     if (m_state != QStringLiteral("running"))
@@ -189,9 +177,11 @@ void Engine::launchApplication(const QUrl &path, const QString &mainFile, const
     m_applicationMain = m_applicationUrl = path;
     m_applicationMain.setPath(path.path() + "/" + mainFile);
     m_applicationName = name;
+    m_applicationDescription = desc;
     emit applicationUrlChanged(m_applicationUrl);
     emit applicationMainChanged(m_applicationMain);
     emit applicationNameChanged(m_applicationName);
+    emit applicationDescriptionChanged(m_applicationName);
     setState(ENGINE_STATE_APPLAUNCHING);
 }
 
@@ -201,9 +191,11 @@ void Engine::closeApplication()
 
     m_applicationMain = m_applicationUrl = QUrl();
     m_applicationName = QString();
+    m_applicationDescription = QString();
     emit applicationUrlChanged(m_applicationUrl);
     emit applicationMainChanged(m_applicationMain);
     emit applicationNameChanged(m_applicationName);
+    emit applicationDescriptionChanged(m_applicationName);
 
     setState(ENGINE_STATE_RUNNING);
 }
diff --git a/src/engine.h b/src/engine.h
index d327f29..ac8a202 100644
--- a/src/engine.h
+++ b/src/engine.h
@@ -45,11 +45,10 @@ class Engine : public QQuickItem
 
     Q_PROPERTY(QString state READ state WRITE setState NOTIFY stateChanged)
 
-    Q_PROPERTY(bool bootAnimationEnabled READ isBootAnimationEnabled WRITE setBootAnimationEnabled NOTIFY bootAnimationEnabledChanged)
-
     Q_PROPERTY(QUrl applicationMain READ applicationMain NOTIFY applicationMainChanged)
     Q_PROPERTY(QUrl applicationUrl READ applicationUrl NOTIFY applicationUrlChanged)
     Q_PROPERTY(QString applicationName READ applicationName NOTIFY applicationNameChanged)
+    Q_PROPERTY(QString applicationDescription READ applicationDescription NOTIFY applicationDescriptionChanged)
 
     Q_PROPERTY(bool fpsEnabled READ isFpsEnabled WRITE setFpsEnabled NOTIFY fpsEnabledChanged)
     Q_PROPERTY(qreal fps READ fps NOTIFY fpsChanged)
@@ -69,14 +68,12 @@ public:
 
     qreal fps() const { return m_fps; }
 
-    bool isBootAnimationEnabled() const { return m_bootAnimationEnabled; }
-    void setBootAnimationEnabled(bool enabled);
-
     QString qtVersion() const { return QT_VERSION_STR; }
 
     QUrl applicationUrl() const { return m_applicationUrl; }
     QUrl applicationMain() const { return m_applicationMain; }
     QString applicationName() const { return m_applicationName; }
+    QString applicationDescription() const { return m_applicationDescription; }
 
     Q_INVOKABLE QUrl fromUserInput(const QString& userInput) { return QUrl::fromUserInput(userInput); }
     Q_INVOKABLE int sensibleButtonSize() const;
@@ -98,7 +95,7 @@ signals:
     void applicationUrlChanged(const QUrl &applicationUrl);
     void applicationMainChanged(const QUrl &applicationMain);
     void applicationNameChanged(const QString &applicationName);
-    void bootAnimationEnabledChanged(bool enabled);
+    void applicationDescriptionChanged(const QString &applicationName);
     void fpsChanged(qreal fps);
     void fpsEnabledChanged(bool enabled);
     void glAvailableChanged(bool available);
@@ -107,7 +104,7 @@ public slots:
     void markApplicationsModelReady() { m_apps_ready = true; updateReadyness(); }
     void markIntroAnimationDone() { m_intro_done = true; updateReadyness(); }
 
-    void launchApplication(const QUrl &location, const QString &mainFile, const QString &name);
+    void launchApplication(const QUrl &location, const QString &mainFile, const QString &name, const QString &desc);
     void closeApplication();
 
     void setFps(qreal fps);
@@ -126,6 +123,7 @@ private:
     QUrl m_applicationUrl;
     QUrl m_applicationMain;
     QString m_applicationName;
+    QString m_applicationDescription;
 
     QSize m_screenSize;
     qreal m_dpcm;
@@ -137,7 +135,6 @@ private:
     uint m_intro_done : 1;
     uint m_apps_ready : 1;
     uint m_fps_enabled : 1;
-    uint m_bootAnimationEnabled : 1;
     bool m_glAvailable;
 };
 
diff --git a/src/imageproviders.cpp b/src/imageproviders.cpp
new file mode 100644
index 0000000..1fef429
--- /dev/null
+++ b/src/imageproviders.cpp
@@ -0,0 +1,155 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "imageproviders.h"
+
+#include <QImage>
+#include <QPixmap>
+#include <QPen>
+#include <QBrush>
+#include <QPainter>
+#include <QLinearGradient>
+
+static const int CORNER_CUTSIZE = 20;
+static const int BORDERSIZE = 3;
+
+void cutEdges(QImage &image, int cutSize)
+{
+    if (!image.isNull()) {
+        const int w = image.width()-1;
+        const int h = image.height()-1;
+        if (w >= cutSize && h >= cutSize) {
+            for (int y=0; y <= cutSize; y++) {
+                for (int x=0; x <= (cutSize - y); x++) {
+                    image.setPixelColor(x, y, QColor(Qt::transparent));
+                    image.setPixelColor(w - x, h - y, QColor(Qt::transparent));
+                }
+            }
+        }
+    }
+}
+
+void drawBorders(QPainter& painter, int w, int h, int cutSize, const QColor &color)
+{
+    QPen pen;
+    pen.setCosmetic(true);
+    pen.setWidth(3);
+    pen.setColor(color);
+
+    painter.setPen(pen);
+    painter.setBrush(Qt::NoBrush);
+
+    QPainterPath path;
+    path.moveTo(cutSize + 1, 1);
+    path.lineTo(w - 1, 1);
+    path.lineTo(w - 1, h - cutSize - 1);
+    path.lineTo(w - cutSize - 1, h - 1);
+    path.lineTo(1, h - 1);
+    path.lineTo(1, cutSize + 1);
+    path.lineTo(cutSize + 1, 1);
+    path.closeSubpath();
+    painter.drawPath(path);
+}
+
+QtImageProvider::QtImageProvider() : QQuickImageProvider(QQuickImageProvider::Pixmap)
+{
+}
+
+QPixmap QtImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
+{
+    Q_UNUSED(size);
+    Q_UNUSED(requestedSize);
+
+    QString idd = id;
+    idd.remove("file://");
+
+    QImage image(idd);
+    if (!image.isNull()) {
+        image = image.copy(BORDERSIZE, BORDERSIZE, image.width() - BORDERSIZE * 2, image.height() - BORDERSIZE * 2)
+                .convertToFormat(QImage::Format_ARGB32);
+        cutEdges(image, CORNER_CUTSIZE);
+    }
+
+    return QPixmap::fromImage(image);
+}
+
+QtSquareImageProvider::QtSquareImageProvider() : QQuickImageProvider(QQuickImageProvider::Pixmap)
+{
+}
+
+QPixmap QtSquareImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
+{
+    Q_UNUSED(size);
+    Q_UNUSED(requestedSize);
+
+    QString idd = id;
+    idd.remove("file://");
+
+    QImage image(idd);
+    if (!image.isNull()) {
+        const int min = qMin(image.width(), image.height());
+        image = image.copy(BORDERSIZE, BORDERSIZE, min - BORDERSIZE * 2, min - BORDERSIZE * 2)
+                .scaled(requestedSize.width(), requestedSize.height())
+                .convertToFormat(QImage::Format_ARGB32);
+        cutEdges(image, CORNER_CUTSIZE);
+    }
+
+    return QPixmap::fromImage(image);
+}
+
+QtImageMaskProvider::QtImageMaskProvider() : QQuickImageProvider(QQuickImageProvider::Pixmap)
+{
+}
+
+QPixmap QtImageMaskProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
+{
+    Q_UNUSED(size);
+
+    if (requestedSize.width() <= 0)
+        return QPixmap(1, 1);
+
+    QImage image(requestedSize.width(), requestedSize.height(), QImage::Format_ARGB32);
+    image.fill(Qt::transparent);
+
+    QPainter p(&image);
+
+    if (id.contains("hover")) {
+        QRect r = image.rect().adjusted(1, 1, -1, -1);
+        QLinearGradient gradient(r.topLeft(), r.bottomRight());
+        gradient.setColorAt(0, Qt::transparent);
+        gradient.setColorAt(1, QColor("#9941cd52"));
+        p.fillRect(r, gradient);
+    }
+
+    if (id.contains("namebox"))
+        p.fillRect(QRectF(0, image.height() * 0.65, image.width(), image.height() * 0.35), QBrush(QColor("#99000000")));
+
+    cutEdges(image, CORNER_CUTSIZE);
+    drawBorders(p, image.width(), image.height(), CORNER_CUTSIZE, QColor("#41cd52"));
+    return QPixmap::fromImage(image);
+}
diff --git a/src/imageproviders.h b/src/imageproviders.h
new file mode 100644
index 0000000..89ac6d1
--- /dev/null
+++ b/src/imageproviders.h
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef IMAGEPROVIDERS_H
+#define IMAGEPROVIDERS_H
+
+#include <QQuickImageProvider>
+
+
+class QtImageProvider : public QQuickImageProvider
+{
+public:
+    QtImageProvider();
+    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize);
+};
+
+class QtSquareImageProvider : public QQuickImageProvider
+{
+public:
+    QtSquareImageProvider();
+    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize);
+};
+
+class QtImageMaskProvider : public QQuickImageProvider
+{
+public:
+    QtImageMaskProvider();
+    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize);
+};
+#endif // IMAGEPROVIDERS_H
diff --git a/src/main.cpp b/src/main.cpp
index 55281cc..ac9e66b 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -44,6 +44,9 @@
 #include "engine.h"
 #include "applicationsmodel.h"
 #include "applicationsettings.h"
+#include "settingsmanager.h"
+#include "imageproviders.h"
+#include "circularindicator.h"
 
 void displayHelp(const char *appName)
 {
@@ -53,7 +56,6 @@ void displayHelp(const char *appName)
            "Options:\n"
            " --main-file [qml-file]             Launches an alternative QML file\n"
            " --applications-root [path]         Specify a different applications root\n"
-           " --no-boot-animation                Disable startup animation\n"
            " --show-fps                         Show FPS\n"
            , appName
            );
@@ -61,10 +63,9 @@ void displayHelp(const char *appName)
 
 int main(int argc, char **argv)
 {
-    QApplication app(argc, argv);
+    qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));
 
-    //Use Flat style for Qt Quick Controls by default
-    qputenv("QT_QUICK_CONTROLS_STYLE", "Flat");
+    QApplication app(argc, argv);
 
 #if defined(USE_QTWEBENGINE)
     // This is currently needed by all QtWebEngine applications using the HW accelerated QQuickWebView.
@@ -73,16 +74,11 @@ int main(int argc, char **argv)
     QtWebEngine::initialize();
 #endif
 
-    QString fontName = QStringLiteral("/system/lib/fonts/DejaVuSans.ttf");
-    if (QFile::exists(fontName)) {
-        QFontDatabase::addApplicationFont(fontName);
-        QFont font("DejaVu Sans");
-        QGuiApplication::setFont(font);
-    } else {
-        QFont font;
-        font.setStyleHint(QFont::SansSerif);
-        QGuiApplication::setFont(font);
-    }
+    QFontDatabase::addApplicationFont(":/qml/fonts/TitilliumWeb-Light.ttf");
+    QFontDatabase::addApplicationFont(":/qml/fonts/TitilliumWeb-Regular.ttf");
+    QFontDatabase::addApplicationFont(":/qml/fonts/TitilliumWeb-SemiBold.ttf");
+    QFontDatabase::addApplicationFont(":/qml/fonts/TitilliumWeb-Bold.ttf");
+    QFontDatabase::addApplicationFont(":/qml/fonts/TitilliumWeb-Black.ttf");
 
     ApplicationSettings applicationSettings;
 
@@ -93,17 +89,26 @@ int main(int argc, char **argv)
 
     qDebug() << "Main File:" << applicationSettings.mainFile();
     qDebug() << "Applications Root:" << applicationSettings.appsRoot();
-    qDebug() << "Boot Animation:" << (applicationSettings.isBootAnimationEnabled() ? "yes" : "no");
     qDebug() << "Show FPS:" << (applicationSettings.isShowFPSEnabled() ? "yes" : "no");
 
 
     qmlRegisterType<ApplicationsModel>("com.qtcompany.B2QtLauncher", 1, 0, "LauncherApplicationsModel");
     qmlRegisterType<Engine>("com.qtcompany.B2QtLauncher", 1, 0, "LauncherEngine");
+    qmlRegisterType<CircularIndicator>("Circle", 1, 0, "CircularIndicator");
 
     QQmlApplicationEngine engine;
+    SettingsManager settings;
+    QtImageProvider imageProvider;
+    QtSquareImageProvider squareImageProvider;
+    QtImageMaskProvider imageMaskProvider;
+
+    engine.addImageProvider("QtImage", &imageProvider);
+    engine.addImageProvider("QtSquareImage", &squareImageProvider);
+    engine.addImageProvider("QtImageMask", &imageMaskProvider);
+    engine.rootContext()->setContextProperty("globalSettings", &settings);
     engine.rootContext()->setContextProperty("applicationSettings", &applicationSettings);
     engine.rootContext()->setContextProperty("qpa_platform", qGuiApp->platformName());
     engine.load(applicationSettings.mainFile());
 
-    app.exec();
+    return app.exec();
 }
diff --git a/src/settingsmanager.cpp b/src/settingsmanager.cpp
new file mode 100644
index 0000000..a5f2160
--- /dev/null
+++ b/src/settingsmanager.cpp
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "settingsmanager.h"
+
+SettingsManager::SettingsManager(QObject *parent) :
+    QObject(parent),
+    m_settings("The Qt Company", "Qt Demo Launcher")
+{
+}
+
+SettingsManager::~SettingsManager()
+{
+    m_settings.sync();
+}
+
+QVariant SettingsManager::getValue(const QString &key, const QVariant &defaultValue)
+{
+    return m_settings.value(key, defaultValue);
+}
+
+void SettingsManager::setValue(const QString &key, const QVariant &value)
+{
+    m_settings.setValue(key, value);
+    m_settings.sync();
+}
+
+
+bool SettingsManager::gridSelected()
+{
+    return getValue("gridSelected", false).toBool();
+}
+
+void SettingsManager::setGridSelected(bool enabled)
+{
+    if (gridSelected() == enabled)
+        return;
+
+    setValue("gridSelected", enabled);
+    emit gridSelectedChanged(enabled);
+}
+
+bool SettingsManager::mouseSelected()
+{
+    return getValue("mouseSelected", false).toBool();
+}
+
+void SettingsManager::setMouseSelected(bool enabled)
+{
+    if (mouseSelected() == enabled)
+        return;
+
+    setValue("mouseSelected", enabled);
+    emit mouseSelectedChanged(enabled);
+}
diff --git a/src/settingsmanager.h b/src/settingsmanager.h
new file mode 100644
index 0000000..f54ac77
--- /dev/null
+++ b/src/settingsmanager.h
@@ -0,0 +1,63 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef SETTINGSMANAGER_H
+#define SETTINGSMANAGER_H
+
+#include <QObject>
+#include <QSettings>
+
+class SettingsManager : public QObject
+{
+    Q_OBJECT
+public:
+    explicit SettingsManager(QObject *parent = 0);
+    ~SettingsManager();
+
+    Q_INVOKABLE QVariant getValue(const QString& key, const QVariant &defaultValue);
+    Q_INVOKABLE void setValue(const QString& key, const QVariant &value);
+
+    Q_PROPERTY(bool gridSelected READ gridSelected WRITE setGridSelected NOTIFY gridSelectedChanged)
+
+    bool gridSelected();
+    void setGridSelected(bool enabled);
+
+    Q_PROPERTY (bool mouseSelected READ mouseSelected WRITE setMouseSelected NOTIFY mouseSelectedChanged)
+
+    bool mouseSelected();
+    void setMouseSelected(bool enabled);
+
+signals:
+    void gridSelectedChanged(bool enabled);
+    void mouseSelectedChanged(bool enabled);
+
+private:
+    QSettings m_settings;
+};
+
+#endif // SETTINGSMANAGER_H
diff --git a/startup.pro b/startup.pro
index df907b5..0d6ca11 100644
--- a/startup.pro
+++ b/startup.pro
@@ -1,4 +1,4 @@
-QT += quick widgets
+QT += qml quick widgets
 TARGET = qtlauncher
 
 qtHaveModule(webengine) {
@@ -10,27 +10,26 @@ HEADERS += \
     src/engine.h \
     src/applicationsmodel.h \
     src/fpscounter.h \
-    src/applicationsettings.h
+    src/applicationsettings.h \
+    src/settingsmanager.h \
+    src/imageproviders.h \
+    src/circularindicator.h
 
 SOURCES += src/main.cpp \
     src/engine.cpp \
     src/applicationsmodel.cpp \
     src/fpscounter.cpp \
-    src/applicationsettings.cpp
-
-OTHER_FILES += \
-    qml/LaunchScreen.qml \
-    qml/main_landscape.qml \
-    qml/HighlightShader.qml \
-    qml/Main.qml \
-    qml/ApplicationIcon.qml \
-    qml/GlimmeringQtLogo.qml \
-    qml/BootScreen.qml \
-    qml/BusyIndicator.qml
+    src/applicationsettings.cpp \
+    src/settingsmanager.cpp \
+    src/imageproviders.cpp \
+    src/circularindicator.cpp
 
 target.path = $$[INSTALL_ROOT]/usr/bin
 
 INSTALLS += target
 
 RESOURCES += \
-    resources.qrc
+    icons.qrc \
+    images.qrc \
+    fonts.qrc \
+    qml.qrc