diff --git a/src/activities/server/Server.qml b/src/activities/server/Server.qml
index d437c5573..49e4911b2 100644
--- a/src/activities/server/Server.qml
+++ b/src/activities/server/Server.qml
@@ -1,194 +1,194 @@
 /* GCompris - server.qml
  *
  * Copyright (C) 2018 YOUR NAME <xx@yy.org>
  *
  * Authors:
  *   <THE GTK VERSION AUTHOR> (GTK+ version)
  *   YOUR NAME <YOUR EMAIL> (Qt Quick port)
  *
  *   This program is free software; you can redistribute it and/or modify
  *   it under the terms of the GNU General Public License as published by
  *   the Free Software Foundation; either version 3 of the License, or
  *   (at your option) any later version.
  *
  *   This program is distributed in the hope that it will be useful,
  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *   GNU General Public License for more details.
  *
  *   You should have received a copy of the GNU General Public License
  *   along with this program; if not, see <https://www.gnu.org/licenses/>.
  */
 /*import QtQuick 2.2
 import QtQuick.Controls 2.2
 import QtQuick.Dialogs 1.2
 import QtQuick.Controls.Material 2.1*/
 
 import QtQuick 2.0
 import QtQuick.Controls 2.2
 import QtQuick.Dialogs 1.2
 import QtQuick.Controls.Material 2.1
 
 
 import GCompris 1.0
 
 
 
 import "../../core"
 import "server.js" as Activity
 import "components"
 
 ActivityBase {
     id: activity
 
     onStart: focus = true
     onStop: {}
 
     pageComponent: Rectangle {
         id: background
         anchors.fill: parent
         color: "#ABCDEF"
         signal start
         signal stop
 
         Component.onCompleted: {
             activity.start.connect(start)
             activity.stop.connect(stop)
             contentFrame.replace("views/DashboardView.qml");
         }
 
         // Add here the QML items you need to access in javascript
         QtObject {
             id: items
             property Item main: activity.main
             property alias background: background
             property alias bar: bar
             property alias bonus: bonus
         }
 
         onStart: { Activity.start(items) }
         onStop: { Activity.stop() }
 
 
         Connections {
             target: masterController.ui_navigationController
             onGoCreateClientView: contentFrame.replace("views/CreateClientView.qml")
             onGoDashboardView: contentFrame.replace("views/DashboardView.qml")
             onGoEditClientView: contentFrame.replace("views/EditClientView.qml", {selectedClient: client})
             onGoFindClientView: contentFrame.replace("views/FindClientView.qml")
          //   onGoManagePupilsView: contentFrame.replace("views/ManagePupilsView.qml")
          //   onGoManageGroupsView: contentFrame.replace("views/ManageGroupsView.qml")
         }
 
 
         NavigationBar {
             id: navigationBar
         }
 
 
         StackView {
             id: contentFrame
             anchors {
                 top: parent.top
                 bottom: parent.bottom
-                right: parent.right
-                left: navigationBar.right
+                right: navigationBar.left
+                left: parent.left
             }
             initialItem: "qrc:/gcompris/src/activities/server/views/SplashView.qml"
             clip: true
         }
 
 /*        Drawer {
                id: drawer
 
                width: Math.min(background.width, background.height) / 3 * 2
                height: background.height
 
                ListView {
                    focus: true
                    currentIndex: -1
                    anchors.fill: parent
 
                    delegate: ItemDelegate {
                        width: parent.width
                        text: model.text
                        highlighted: ListView.isCurrentItem
                        onClicked: {
                            drawer.close()
                            //model.triggered()
                        }
                    }
 
                    model: ListModel {
                        ListElement {
                            text: qsTr("Open...")
                          //  triggered: { fileOpenDialog.open(); }
                        }
                        ListElement {
                            text: qsTr("About...")
                          //  triggered: function(){ console.log("f"); }
                        }
                    }
 
                    ScrollIndicator.vertical: ScrollIndicator { }
                }
         }
 
        ToolBar {
             Material.background: Material.Orange
 
             anchors.top: parent.top
             anchors.left: parent.left
 
             ToolButton {
                 id: menuButton
                 anchors.left: parent.left
                 anchors.verticalCenter: parent.verticalCenter
                 icon.source: "resource/baseline-menu-24px.svg"
                 onClicked: drawer.open()
             }
             Label {
                 anchors.centerIn: parent
                 text: "Image Viewer"
                 font.pixelSize: 20
                 elide: Label.ElideRight
             }
         }
 
 
         FileDialog {
                 id: fileOpenDialog
                 title: "Select an image file"
                 folder: shortcuts.documents
                 nameFilters: [
                     "Image files (*.png *.jpeg *.jpg)",
                 ]
                 onAccepted: {
                     image.source = fileOpenDialog.fileUrl
                 }
             }*/
 
 
         DialogHelp {
             id: dialogHelp
             onClose: home()
         }
 
         Bar {
             id: bar
             content: BarEnumContent { value: help | home | level }
             onHelpClicked: {
                 displayDialog(dialogHelp)
             }
             onPreviousLevelClicked: Activity.previousLevel()
             onNextLevelClicked: Activity.nextLevel()
             onHomeClicked: activity.home()
         }
 
         Bonus {
             id: bonus
             Component.onCompleted: win.connect(Activity.nextLevel)
         }
     }
 
 }
diff --git a/src/activities/server/components/AddressEditor.qml b/src/activities/server/components/AddressEditor.qml
new file mode 100644
index 000000000..75335320b
--- /dev/null
+++ b/src/activities/server/components/AddressEditor.qml
@@ -0,0 +1,42 @@
+import QtQuick 2.9
+import CM 1.0
+//import assets 1.0
+import "../../../core"
+
+Panel {
+    property Address address
+
+    contentComponent:
+        Column {
+            id: column
+            spacing: Style.sizeControlSpacing
+            StringEditorSingleLine {
+                stringDecorator: address.ui_building
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+            }
+            StringEditorSingleLine {
+                stringDecorator: address.ui_street
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+            }
+            StringEditorSingleLine {
+                stringDecorator: address.ui_city
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+            }
+            StringEditorSingleLine {
+                stringDecorator: address.ui_postcode
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+            }
+        }
+}
diff --git a/src/activities/server/components/NavigationBar.qml b/src/activities/server/components/NavigationBar.qml
index 625e71a23..246d069bc 100644
--- a/src/activities/server/components/NavigationBar.qml
+++ b/src/activities/server/components/NavigationBar.qml
@@ -1,47 +1,73 @@
 import QtQuick 2.9
 import "../../../core"
 
 Item {
     property bool isCollapsed: true
 
     anchors {
         top: parent.top
         bottom: parent.bottom
-        left: parent.left
+        right: parent.right
     }
     width: isCollapsed ? Style.widthNavigationBarCollapsed : Style.heightNavigationBarExpanded
 
     Rectangle {
         anchors.fill: parent
         color: Style.colourNavigationBarBackground
 
         Column {
             width: parent.width
 
             NavigationButton {
                 iconCharacter: "\uf0c9"
                 description: ""
                 hoverColour: "#993333"
                 onNavigationButtonClicked: isCollapsed = !isCollapsed
             }
+            NavigationButton {
+                iconCharacter: "\uf1e6"
+                description: "Connecting devices"
+                hoverColour: "#dc8a00"
+                onNavigationButtonClicked: masterController.ui_navigationController.goDashboardView();
+            }
+            NavigationButton {
+                iconCharacter: "\uf681"
+                description: "Follow results"
+                hoverColour: "#dccd00"
+                onNavigationButtonClicked: masterController.ui_navigationController.goCreateClientView();
+            }
+            NavigationButton {
+                iconCharacter: "\uf0c0"
+                description: "Managing Pupils"
+                hoverColour: "#8aef63"
+                onNavigationButtonClicked: masterController.ui_navigationController.goFindClientView();
+            }
+            NavigationButton {
+                iconCharacter: "\uf0ae"
+                description: "Manages Sequences"
+                hoverColour: "#8aef63"
+                onNavigationButtonClicked: masterController.ui_navigationController.goFindClientView();
+            }
+
+
             NavigationButton {
                 iconCharacter: "\uf015"
                 description: "Dashboard"
                 hoverColour: "#dc8a00"
                 onNavigationButtonClicked: masterController.ui_navigationController.goDashboardView();
             }
             NavigationButton {
-                iconCharacter: "\uf234"
+                iconCharacter: "\uf0c0"
                 description: "New Client"
                 hoverColour: "#dccd00"
                 onNavigationButtonClicked: masterController.ui_navigationController.goCreateClientView();
             }
             NavigationButton {
                 iconCharacter: "\uf002"
                 description: "Find Client"
                 hoverColour: "#8aef63"
                 onNavigationButtonClicked: masterController.ui_navigationController.goFindClientView();
             }
         }
     }
 }
diff --git a/src/activities/server/components/Panel.qml b/src/activities/server/components/Panel.qml
new file mode 100644
index 000000000..1425f3c84
--- /dev/null
+++ b/src/activities/server/components/Panel.qml
@@ -0,0 +1,64 @@
+import QtQuick 2.9
+//import assets 1.0
+import "../../../core"
+
+Item {
+    property alias headerText: title.text
+    property alias contentComponent: contentLoader.sourceComponent
+
+    implicitWidth: parent.width - Style.sizeShadowOffset
+    implicitHeight: headerBackground.height + contentLoader.implicitHeight + (Style.sizeControlSpacing * 2) + Style.sizeShadowOffset
+
+    Rectangle {
+        id: shadow
+        width: parent.width
+        height: parent.height
+        x: Style.sizeShadowOffset
+        y: Style.sizeShadowOffset
+        color: Style.colourShadow
+    }
+
+    Rectangle {
+        id: headerBackground
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        height: Style.heightPanelHeader
+        color: Style.colourPanelHeaderBackground
+
+        Text {
+            id: title
+            text: "Set Me!"
+            anchors {
+                fill: parent
+                margins: Style.heightDataControls / 4
+            }
+            color: Style.colourPanelHeaderFont
+            font.pixelSize: Style.pixelSizePanelHeader
+            verticalAlignment: Qt.AlignVCenter
+        }
+    }
+
+    Rectangle {
+        id: contentBackground
+        anchors {
+            top: headerBackground.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        color: Style.colourPanelBackground
+
+        Loader {
+            id: contentLoader
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+                margins: Style.sizeControlSpacing
+            }
+        }
+    }
+}
diff --git a/src/activities/server/components/SearchResultDelegate.qml b/src/activities/server/components/SearchResultDelegate.qml
new file mode 100644
index 000000000..944571696
--- /dev/null
+++ b/src/activities/server/components/SearchResultDelegate.qml
@@ -0,0 +1,86 @@
+import QtQuick 2.9
+import assets 1.0
+import CM 1.0
+
+Item {
+    property Client client
+
+    implicitWidth: parent.width
+    implicitHeight: Math.max(clientColumn.implicitHeight, textAddress.implicitHeight) + (Style.heightDataControls / 2)
+
+    Rectangle {
+        id: background
+        width: parent.width
+        height: parent.height
+        color: Style.colourPanelBackground
+
+        Column {
+            id: clientColumn
+            width: parent / 2
+            anchors {
+                left: parent.left
+                top: parent.top
+                margins: Style.heightDataControls / 4
+            }
+            spacing: Style.heightDataControls / 2
+
+            Text {
+                id: textReference
+                anchors.left: parent.left
+                text: client.ui_reference.ui_label + ": " + client.ui_reference.ui_value
+                font.pixelSize: Style.pixelSizeDataControls
+                color: Style.colourPanelFont
+            }
+            Text {
+                id: textName
+                anchors.left: parent.left
+                text: client.ui_name.ui_label + ": " + client.ui_name.ui_value
+                font.pixelSize: Style.pixelSizeDataControls
+                color: Style.colourPanelFont
+            }
+        }
+
+        Text {
+            id: textAddress
+            anchors {
+                top: parent.top
+                right: parent.right
+                margins: Style.heightDataControls / 4
+            }
+            text: client.ui_supplyAddress.ui_fullAddress
+            font.pixelSize: Style.pixelSizeDataControls
+            color: Style.colourPanelFont
+            horizontalAlignment: Text.AlignRight
+        }
+
+        Rectangle {
+            id: borderBottom
+            anchors {
+                bottom: parent.bottom
+                left: parent.left
+                right: parent.right
+            }
+            height: 1
+            color: Style.colourPanelFont
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            hoverEnabled: true
+            onEntered: background.state = "hover"
+            onExited: background.state = ""
+            onClicked: masterController.selectClient(client)
+        }
+
+        states: [
+            State {
+                name: "hover"
+                PropertyChanges {
+                    target: background
+                    color: Style.colourPanelBackgroundHover
+                }
+            }
+        ]
+    }
+}
diff --git a/src/activities/server/components/StringEditorSingleLine.qml b/src/activities/server/components/StringEditorSingleLine.qml
new file mode 100644
index 000000000..692d44c35
--- /dev/null
+++ b/src/activities/server/components/StringEditorSingleLine.qml
@@ -0,0 +1,59 @@
+import QtQuick 2.9
+import CM 1.0
+//import assets 1.0
+import "../../../core"
+
+Item {
+    property StringDecorator stringDecorator
+
+    height: width > textLabel.width + textValue.width ? Style.heightDataControls : Style.heightDataControls * 2
+
+    Flow {
+        anchors.fill: parent
+
+        Rectangle {
+            width: Style.widthDataControls
+            height: Style.heightDataControls
+            color: Style.colourPanelBackground
+            Text {
+                id: textLabel
+                anchors {
+                    fill: parent
+                    margins: Style.heightDataControls / 4
+                }
+                text: stringDecorator.ui_label
+                color: Style.colourDataControlsFont
+                font.pixelSize: Style.pixelSizeDataControls
+                verticalAlignment: Qt.AlignVCenter
+            }
+        }
+
+        Rectangle {
+            id: background
+            width: Style.widthDataControls
+            height: Style.heightDataControls
+            color: Style.colourDataControlsBackground
+            border {
+                width: 1
+                color: Style.colourDataControlsFont
+            }
+            TextInput {
+                id: textValue
+                anchors {
+                    fill: parent
+                    margins: Style.heightDataControls / 4
+                }
+                text: stringDecorator.ui_value
+                color: Style.colourDataControlsFont
+                font.pixelSize: Style.pixelSizeDataControls
+                verticalAlignment: Qt.AlignVCenter
+            }
+        }
+
+        Binding {
+            target: stringDecorator
+            property: "ui_value"
+            value: textValue.text
+        }
+    }
+}
diff --git a/src/activities/server/views/CreateClientView.qml b/src/activities/server/views/CreateClientView.qml
index 76dfad93d..b0b313e9a 100644
--- a/src/activities/server/views/CreateClientView.qml
+++ b/src/activities/server/views/CreateClientView.qml
@@ -1,26 +1,75 @@
 import QtQuick 2.0
 
 import CM 1.0
 import "../components"
 import "../../../core"
+import QtQuick.Controls 2.2
+import "."
 
 
 
 Item {
 
     property Client newClient: masterController.ui_newClient
 
     Rectangle {
         anchors.fill: parent
         color: Style.colourBackground
         Text {
             anchors.centerIn: parent
             text: "CreateClient View"
         }
     }
 
+    ScrollView {
+        id: scrollView
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            //bottom: commandBar.top
+            margins: Style.sizeScreenMargin
+        }
+        clip: true
+
+        Column {
+            spacing: Style.sizeScreenMargin
+            width: scrollView.width
+
+            Panel {
+                headerText: "Client Details"
+                contentComponent:
+                    Column {
+                        spacing: Style.sizeControlSpacing
+                        StringEditorSingleLine {
+                            stringDecorator: newClient.ui_reference
+                            anchors {
+                                left: parent.left
+                                right: parent.right
+                            }
+                        }
+                        StringEditorSingleLine {
+                            stringDecorator: newClient.ui_name
+                            anchors {
+                                left: parent.left
+                                right: parent.right
+                            }
+                        }
+                    }
+            }
+            AddressEditor {
+                address: newClient.ui_supplyAddress
+                headerText: "Supply Address"
+            }
+            AddressEditor {
+                address: newClient.ui_billingAddress
+                headerText: "Billing Address"
+            }
+        }
+    }
+
 
     CommandBar {
         commandList: masterController.ui_commandController.ui_createClientViewContextCommands
     }
 }
diff --git a/src/core/Style.qml b/src/core/Style.qml
index 6fd4a845f..be84f9923 100644
--- a/src/core/Style.qml
+++ b/src/core/Style.qml
@@ -1,37 +1,57 @@
 pragma Singleton
 import QtQuick 2.9
 
 Item {
     property alias fontAwesome: fontAwesomeLoader.name
 
-    readonly property color colourBackground: "#efefef"
-
-    readonly property color colourNavigationBarBackground: "#000000"
-    readonly property color colourNavigationBarFont: "#ffffff"
-    readonly property int pixelSizeNavigationBarIcon: 42
-    readonly property int pixelSizeNavigationBarText: 22
-    readonly property real widthNavigationBarCollapsed: widthNavigationButtonIcon
-    readonly property real heightNavigationBarExpanded: widthNavigationButton
-
-    readonly property real widthNavigationButtonIcon: 80
-    readonly property real heightNavigationButtonIcon: widthNavigationButtonIcon
-    readonly property real widthNavigationButtonDescription: 160
-    readonly property real heightNavigationButtonDescription: heightNavigationButtonIcon
-    readonly property real widthNavigationButton: widthNavigationButtonIcon + widthNavigationButtonDescription
-    readonly property real heightNavigationButton: Math.max(heightNavigationButtonIcon, heightNavigationButtonDescription)
-
-    readonly property color colourCommandBarBackground: "#cecece"
-    readonly property color colourCommandBarFont: "#131313"
-    readonly property color colourCommandBarFontDisabled: "#636363"
-    readonly property real heightCommandBar: heightCommandButton
-    readonly property int pixelSizeCommandBarIcon: 32
-    readonly property int pixelSizeCommandBarText: 12
-
-    readonly property real widthCommandButton: 80
-    readonly property real heightCommandButton: widthCommandButton
+     readonly property color colourBackground: "#ffffff"
+
+     readonly property real sizeScreenMargin: 20
+     readonly property real sizeControlSpacing: 10
+
+     readonly property color colourNavigationBarBackground: "#2a56c6"
+     readonly property color colourNavigationBarFont: "#ffffff"
+     readonly property int pixelSizeNavigationBarIcon: 42
+     readonly property int pixelSizeNavigationBarText: 15
+     readonly property real widthNavigationBarCollapsed: widthNavigationButtonIcon
+     readonly property real heightNavigationBarExpanded: widthNavigationButton
+
+     readonly property real widthNavigationButtonIcon: 80
+     readonly property real heightNavigationButtonIcon: widthNavigationButtonIcon
+     readonly property real widthNavigationButtonDescription: 160
+     readonly property real heightNavigationButtonDescription: heightNavigationButtonIcon
+     readonly property real widthNavigationButton: widthNavigationButtonIcon + widthNavigationButtonDescription
+     readonly property real heightNavigationButton: Math.max(heightNavigationButtonIcon, heightNavigationButtonDescription)
+
+     readonly property color colourCommandBarBackground: "#cecece"
+     readonly property color colourCommandBarFont: "#131313"
+     readonly property color colourCommandBarFontDisabled: "#636363"
+     readonly property real heightCommandBar: heightCommandButton
+     readonly property int pixelSizeCommandBarIcon: 32
+     readonly property int pixelSizeCommandBarText: 12
+
+     readonly property real widthCommandButton: 80
+     readonly property real heightCommandButton: widthCommandButton
+
+     readonly property color colourDataControlsBackground: "#ffffff"
+     readonly property color colourDataControlsFont: "#131313"
+     readonly property int pixelSizeDataControls: 18
+     readonly property real widthDataControls: 400
+     readonly property real heightDataControls: 40
+
+     readonly property color colourPanelBackground: "#ffffff"
+     readonly property color colourPanelBackgroundHover: "#ececec"
+     readonly property color colourPanelHeaderBackground: "#131313"
+     readonly property color colourPanelHeaderFont: "#ffffff"
+     readonly property color colourPanelFont: "#131313"
+     readonly property int pixelSizePanelHeader: 18
+     readonly property real heightPanelHeader: 40
+     readonly property real sizeShadowOffset: 5
+     readonly property color colourShadow: "#dedede"
 
     FontLoader {
         id: fontAwesomeLoader
-        source: "qrc:/gcompris/src/core/resource/fonts/fontawesome-webfont.ttf"
+        //source: "qrc:/gcompris/src/core/resource/fonts/fontawesome-webfont.ttf"
+        source: "qrc:/gcompris/src/core/resource/fonts/fa-solid-900.ttf"
     }
 }
diff --git a/src/core/resource/fonts/fa-solid-900.ttf b/src/core/resource/fonts/fa-solid-900.ttf
new file mode 100644
index 000000000..9dd8c7fd7
Binary files /dev/null and b/src/core/resource/fonts/fa-solid-900.ttf differ