wizardview: redesign

Change-Id: If0a3d896b35385f24c9d04b67b12146febfff7c2
diff --git a/src/wizardview/components/BackupKeyPage.qml b/src/wizardview/components/BackupKeyPage.qml
index 59ec3ef..fdfddfb 100644
--- a/src/wizardview/components/BackupKeyPage.qml
+++ b/src/wizardview/components/BackupKeyPage.qml
@@ -23,10 +23,13 @@
 
 import "../../constant"
 import "../../commoncomponents"
+import "../../settingsview/components"
 
-ColumnLayout {
+Rectangle {
+    id: root
+
     signal neverShowAgainBoxClicked(bool isChecked)
-    signal skip_Btn_Clicked
+    signal leavePage
     signal export_Btn_FileDialogAccepted(bool accepted, string folderDir)
 
     /*
@@ -58,143 +61,133 @@
         }
     }
 
-    Layout.fillWidth: true
-    Layout.fillHeight: true
+    anchors.fill: parent
 
-    Item {
-        Layout.alignment: Qt.AlignHCenter
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-    }
+    color: JamiTheme.backgroundColor
 
-    /*
-     * Main layout for BackupKeyPage which consists of the buttons and "never show again" check box
-     */
     ColumnLayout {
-        Layout.alignment: Qt.AlignCenter
-        Layout.maximumWidth: 366
-
         spacing: 12
 
-        Label {
-            id: backupKeysLabel
-            Layout.alignment: Qt.AlignHCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        Layout.preferredWidth: backupBtn.width
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-            Layout.maximumWidth: 366
-            Layout.maximumHeight: 21
-            Layout.preferredWidth: 366
-            Layout.preferredHeight: 21
+        RowLayout {
+            spacing: 12
+            height: 48
 
-            text: qsTr("Backup your account")
-            font.pointSize: 13
-            font.kerning: true
+            anchors.left: backupBtn.left
+            anchors.right: backupBtn.right
+
+            Label {
+                text: qsTr("Backup your account!")
+
+                font.pointSize: JamiTheme.textFontSize + 3
+            }
+
+            Label {
+                text: qsTr("Recommended")
+                color: "white"
+                padding: 8
+                anchors.right: parent.right
+
+                background: Rectangle {
+                    color: "#aed581"
+                    radius: 24
+                    anchors.fill: parent
+                }
+            }
         }
+
         Label {
-            id: backupInfoLabel1
-            Layout.maximumWidth: 366
-            Layout.maximumHeight: 57
-            Layout.preferredWidth: 366
-            Layout.preferredHeight: 57
+            text: qsTr("This account only exists on this device. If you lost your device or uninstall the application, your account will be deleted. You can backup your account now or later.")
+            wrapMode: Text.Wrap
+            anchors.left: backupBtn.left
+            anchors.right: backupBtn.right
 
-            text: qsTr("This account only exists on this device. If you lost your device or uninstall the application,your account will be deleted. You can backup your account now or later.")
-            wrapMode: Text.WordWrap
-            horizontalAlignment: Text.AlignJustify
-            verticalAlignment: Text.AlignVCenter
+            font.pointSize: JamiTheme.textFontSize
         }
-        CheckBox {
-            id: neverShowAgainBox
-            checked: false
 
-            Layout.maximumWidth: 366
-            Layout.maximumHeight: 19
-            Layout.preferredWidth: 366
-            Layout.preferredHeight: 19
+        RowLayout {
+            spacing: 12
+            height: 48
 
-            indicator.implicitWidth: 10
-            indicator.implicitHeight:10
+            anchors.right: backupBtn.right
+            anchors.left: backupBtn.left
 
-            text: qsTr("Never show me this again")
-            font.pointSize: 8
+            Label {
+                text: qsTr("Never show me this again")
+
+                font.pointSize: JamiTheme.textFontSize
+            }
+
+            Switch {
+                id: passwordSwitch
+                Layout.alignment: Qt.AlignRight
+
+                onToggled: {
+                    neverShowAgainBoxClicked(checked)
+                }
+            }
+        }
+
+        MaterialButton {
+            id: backupBtn
+            text: qsTr("BACKUP ACCOUNT")
+            color: JamiTheme.buttonTintedGrey
 
             onClicked: {
-                neverShowAgainBoxClicked(checked)
+                exportBtn_Dialog.open()
+                leavePage()
             }
         }
-        RowLayout {
-            Layout.fillWidth: true
-            Layout.maximumHeight: 20
 
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillHeight: true
-                Layout.maximumWidth: 40
-                Layout.minimumWidth: 10
-            }
+        MaterialButton {
+            text: qsTr("SKIP")
+            color: JamiTheme.buttonTintedGrey
+            outlined: true
 
-            HoverableGradientButton {
-                id: exportBtn
-
-                Layout.alignment: Qt.AlignVCenter
-                Layout.minimumWidth: 85
-                Layout.preferredWidth: 85
-                Layout.maximumWidth: 85
-
-                Layout.minimumHeight: 30
-                Layout.preferredHeight: 30
-                Layout.maximumHeight: 30
-
-                text: qsTr("Export")
-                font.kerning: true
-                fontPointSize: 10
-                radius: height / 2
-                backgroundColor: JamiTheme.releaseColor
-
-                onClicked: {
-                    exportBtn_Dialog.open()
-                }
-            }
-
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
-
-            HoverableGradientButton {
-                id: skipBtn
-
-                Layout.alignment: Qt.AlignVCenter
-                Layout.minimumWidth: 85
-                Layout.preferredWidth: 85
-                Layout.maximumWidth: 85
-
-                Layout.minimumHeight: 30
-                Layout.preferredHeight: 30
-                Layout.maximumHeight: 30
-
-                text: qsTr("Skip")
-                fontPointSize: 10
-                font.kerning: true
-                radius: height / 2
-                backgroundColor: JamiTheme.releaseColor
-
-                onClicked: {
-                    skip_Btn_Clicked()
-                }
-            }
-
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillHeight: true
-                Layout.maximumWidth: 40
-                Layout.minimumWidth: 10
+            onClicked: {
+                leavePage()
             }
         }
     }
 
-    Item {
-        Layout.alignment: Qt.AlignHCenter
-        Layout.fillWidth: true
-        Layout.fillHeight: true
+    HoverableButton {
+        id: cancelButton
+        z: 2
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Close")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
     }
 }
diff --git a/src/wizardview/components/CollapsiblePasswordWidget.qml b/src/wizardview/components/CollapsiblePasswordWidget.qml
index 82af6e2..4f0feb1 100644
--- a/src/wizardview/components/CollapsiblePasswordWidget.qml
+++ b/src/wizardview/components/CollapsiblePasswordWidget.qml
@@ -51,7 +51,7 @@
 
     Layout.leftMargin: 32
 
-    InfoLineEdit {
+    MaterialLineEdit {
         id: passwordEdit
 
         visible: visibleCollapsble
@@ -83,7 +83,7 @@
         Layout.minimumHeight: 30
     }
 
-    InfoLineEdit {
+    MaterialLineEdit {
         id: confirmPasswordEdit
 
         visible: visibleCollapsble
diff --git a/src/wizardview/components/ConnectToAccountManagerPage.qml b/src/wizardview/components/ConnectToAccountManagerPage.qml
index c41dcef..4ecfa09 100644
--- a/src/wizardview/components/ConnectToAccountManagerPage.qml
+++ b/src/wizardview/components/ConnectToAccountManagerPage.qml
@@ -23,10 +23,13 @@
 import "../../constant"
 import "../../commoncomponents"
 
-ColumnLayout {
+Rectangle {
+    id: root
+
     property alias text_usernameManagerEditAlias: usernameManagerEdit.text
     property alias text_passwordManagerEditAlias: passwordManagerEdit.text
     property alias text_accountManagerEditAlias: accountManagerEdit.text
+    property string errorText: ""
 
     function initializeOnShowUp() {
         clearAllTextFields()
@@ -36,67 +39,161 @@
         usernameManagerEdit.clear()
         passwordManagerEdit.clear()
         accountManagerEdit.clear()
+        errorText = ""
     }
 
-    Layout.fillWidth: true
-    Layout.fillHeight: true
+    anchors.fill: parent
 
-    Item {
-        Layout.alignment: Qt.AlignHCenter
-        Layout.preferredHeight: 40
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-    }
+    color: JamiTheme.backgroundColor
+
+    signal leavePage
+    signal createAccount
 
     ColumnLayout {
-        Layout.alignment: Qt.AlignCenter
-        Layout.fillWidth: true
-
         spacing: 12
 
-        Label {
-            id: signInLabel
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        Layout.preferredWidth: parent.width
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-            Layout.alignment: Qt.AlignHCenter
-            Layout.minimumWidth: 256
-            Layout.preferredHeight: 21
-            text: qsTr("Sign in")
-            font.pointSize: 13
-            font.kerning: true
+        RowLayout {
+            spacing: 12
+            height: 48
+
+            Layout.fillWidth: true
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
+
+            Label {
+                text: qsTr("Enter URL of management server")
+            }
+
+            Label {
+                text: qsTr("Required")
+                color: "#ff1f62"
+                padding: 8
+                anchors.right: parent.right
+
+                background: Rectangle {
+                    color: "#fee4e9"
+                    radius: 24
+                    anchors.fill: parent
+                }
+            }
         }
 
-        InfoLineEdit {
-            id: usernameManagerEdit
+        MaterialLineEdit {
+            id: accountManagerEdit
 
-            Layout.alignment: Qt.AlignHCenter
+            selectByMouse: true
+            placeholderText: qsTr("Jami management server URL")
+            font.pointSize: 10
+            font.kerning: true
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
+        }
+
+        Text {
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
+
+            text: qsTr("Enter your organization credentials")
+            wrapMode: Text.Wrap
+        }
+
+        MaterialLineEdit {
+            id: usernameManagerEdit
 
             selectByMouse: true
             placeholderText: qsTr("Username")
+            font.pointSize: 10
+            font.kerning: true
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
             id: passwordManagerEdit
 
-            Layout.alignment: Qt.AlignHCenter
             selectByMouse: true
-            echoMode: TextInput.Password
             placeholderText: qsTr("Password")
+            font.pointSize: 10
+            font.kerning: true
+
+            echoMode: TextInput.Password
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
         }
 
-        InfoLineEdit {
-            id: accountManagerEdit
+        MaterialButton {
+            id: connectBtn
+            text: qsTr("CONNECT")
+            enabled: accountManagerEdit.text.length !== 0
+                && usernameManagerEdit.text.length !== 0
+                && passwordManagerEdit.text.length !== 0
+            color: enabled? JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
 
+            onClicked: {
+                errorText = ""
+                createAccount()
+            }
+        }
+
+        Label {
+            text: errorText
+
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
             Layout.alignment: Qt.AlignHCenter
 
-            selectByMouse: true
-            placeholderText: qsTr("Account Manager")
+            font.pointSize: JamiTheme.textFontSize
+            color: "red"
+
+            height: 32
         }
     }
 
-    Item {
-        Layout.alignment: Qt.AlignHCenter
-        Layout.preferredHeight: 40
-        Layout.fillWidth: true
-        Layout.fillHeight: true
+    HoverableButton {
+        id: cancelButton
+        z: 2
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Return to welcome page")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
     }
 }
diff --git a/src/wizardview/components/CreateAccountPage.qml b/src/wizardview/components/CreateAccountPage.qml
index f59b2c6..f2e129c 100644
--- a/src/wizardview/components/CreateAccountPage.qml
+++ b/src/wizardview/components/CreateAccountPage.qml
@@ -19,307 +19,341 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.14
+import Qt.labs.platform 1.1
 
 import "../"
 import "../../constant"
 import "../../commoncomponents"
+import "../../settingsview/components"
 
-ColumnLayout {
-    property alias text_fullNameEditAlias: fullNameEdit.text
+Rectangle {
+    id: root
+
     property alias text_usernameEditAlias: usernameEdit.text
-
     property int nameRegistrationUIState: WizardView.BLANK
+    property alias text_passwordEditAlias: passwordEdit.text
 
-    property alias checkState_signUpCheckboxAlias: signUpCheckbox.checked
-    property alias isToSetPassword_checkState_choosePasswordCheckBox: choosePasswordCheckBox.checked
-
-    // photo booth alias
-    property alias boothImgBase64: setAvatarWidget.imgBase64
-
-    // collapse password widget property aliases
-    property alias text_passwordEditAlias: collapsiblePasswordWidget.text_passwordEditAlias
-    property alias text_confirmPasswordEditAlias: collapsiblePasswordWidget.text_confirmPasswordEditAlias
-    property alias displayState_passwordStatusLabelAlias: collapsiblePasswordWidget.state_passwordStatusLabelAlias
-
-    signal validateWizardProgressionCreateAccountPage
+    signal createAccount
+    signal leavePage
 
     function initializeOnShowUp() {
+        createAccountStack.currentIndex = 0
         clearAllTextFields()
-
-        signUpCheckbox.checked = true
-        choosePasswordCheckBox.checked = false
-        usernameEdit.enabled = true
-        fullNameEdit.enabled = true
+        passwordSwitch.checked = false
     }
 
     function clearAllTextFields() {
         usernameEdit.clear()
-        fullNameEdit.clear()
-
-        collapsiblePasswordWidget.clearAllTextFields()
+        passwordEdit.clear()
+        passwordConfirmEdit.clear()
     }
 
-    function setCollapsiblePasswordWidgetVisibility(visible) {
-        choosePasswordCheckBox.checked = visible
-        if (visible) {
-            choosePasswordCheckBox.visible = true
+    anchors.fill: parent
+
+    color: JamiTheme.backgroundColor
+
+    /*
+    * JamiFileDialog for exporting account
+    */
+    JamiFileDialog {
+        id: exportBtn_Dialog
+
+        mode: JamiFileDialog.SaveFile
+
+        title: qsTr("Export Account Here")
+        folder: StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/Desktop"
+
+        nameFilters: [qsTr("Jami archive files") + " (*.gz)", qsTr(
+                "All files") + " (*)"]
+
+        onAccepted: {
+            export_Btn_FileDialogAccepted(true, file)
+        }
+
+        onRejected: {
+            export_Btn_FileDialogAccepted(false, folder)
+        }
+
+        onVisibleChanged: {
+            if (!visible) {
+                rejected()
+            }
         }
     }
 
-    function startBooth(){
-        setAvatarWidget.startBooth()
-    }
-
-    function stopBooth(){
-        setAvatarWidget.stopBooth()
-    }
-
-    Layout.fillWidth: true
-    Layout.fillHeight: true
-
-    spacing: 6
-
-    Item {
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-    }
-
-    ColumnLayout {
-        Layout.alignment: Qt.AlignHCenter
-
-        spacing: 5
+    StackLayout {
+        id: createAccountStack
+        anchors.verticalCenter: root.verticalCenter
+        anchors.horizontalCenter: root.horizontalCenter
 
         ColumnLayout {
-            Layout.fillWidth: true
-            spacing: 6
+            spacing: 12
 
-            Layout.alignment: Qt.AlignHCenter
+            anchors.verticalCenter: parent.verticalCenter
+            Layout.preferredWidth: root.width
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-        Label {
-            id: profileSectionLabel
+            RowLayout {
+                spacing: 12
+                height: 48
 
-
-            Layout.alignment: Qt.AlignHCenter
-
-            text: qsTr("Profile")
-            font.pointSize: 13
-            font.kerning: true
-
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-
-    PhotoboothView{
-        id: setAvatarWidget
-
-        Layout.alignment: Qt.AlignHCenter
-
-        Layout.maximumWidth: 261
-        Layout.preferredWidth: 261
-        Layout.minimumWidth: 261
-        Layout.maximumHeight: 261
-        Layout.preferredHeight: 261
-        Layout.minimumHeight: 261
-    }
-
-        RowLayout {
-            spacing: 6
-            Layout.alignment: Qt.AlignHCenter
-            Layout.maximumHeight: 30
-
-            Item {
                 Layout.fillWidth: true
-                Layout.maximumHeight: 10
-            }
+                anchors.left: usernameEdit.left
 
-            InfoLineEdit {
-                id: fullNameEdit
+                Label {
+                    text: qsTr("Choose a username for your account")
+                }
 
-                fieldLayoutWidth: 261
+                Label {
+                    text: qsTr("Recommended")
+                    color: "white"
+                    padding: 8
+                    anchors.right: parent.right
 
-                Layout.alignment: Qt.AlignCenter
-
-                selectByMouse: true
-                placeholderText: qsTr("Profile name")
-                font.pointSize: 10
-                font.kerning: true
-            }
-
-            Item {
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-            }
-        }
-        }
-    }
-
-    Item {
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-    }
-
-    ColumnLayout {
-        Layout.alignment: Qt.AlignHCenter
-
-        spacing: 5
-        Label {
-            id: accountSectionLabel
-            Layout.alignment: Qt.AlignHCenter
-
-            Layout.maximumWidth: 261
-            Layout.preferredWidth: 261
-            Layout.minimumWidth: 261
-            Layout.maximumHeight: 30
-            Layout.preferredHeight: 30
-            Layout.minimumHeight: 30
-
-            text: qsTr("Account")
-            font.pointSize: 13
-            font.kerning: true
-
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-
-        ColumnLayout {
-            Layout.fillWidth: true
-            spacing: 6
-
-            CheckBox {
-                id: signUpCheckbox
-                checked: true
-
-                indicator.width: 10
-                indicator.height: 10
-
-                Layout.leftMargin: 32
-
-                Layout.minimumWidth: 261
-
-                Layout.maximumHeight: 30
-                Layout.preferredHeight: 30
-                Layout.minimumHeight: 25
-
-                Layout.alignment: Qt.AlignLeft
-
-                text: qsTr("Register public username")
-                font.pointSize: 10
-                font.kerning: true
-
-                indicator.implicitWidth: 20
-                indicator.implicitHeight:20
-
-                onClicked: {
-                    if (!checked) {
-                        usernameEdit.clear()
+                    background: Rectangle {
+                        color: "#aed581"
+                        radius: 24
+                        anchors.fill: parent
                     }
-
-                    validateWizardProgressionCreateAccountPage()
                 }
             }
-        }
 
-        RowLayout {
-            spacing: 6
-            Layout.fillWidth: true
-
-            Layout.leftMargin: 32
-
-            InfoLineEdit {
+            MaterialLineEdit {
                 id: usernameEdit
 
-                fieldLayoutWidth: 261
-
-                Layout.alignment: Qt.AlignHCenter
-
                 selectByMouse: true
                 placeholderText: qsTr("Choose your username")
                 font.pointSize: 10
                 font.kerning: true
 
-                enabled: signUpCheckbox.visible && signUpCheckbox.checked
+                borderColorMode: nameRegistrationUIState === WizardView.BLANK ? MaterialLineEdit.NORMAL
+                                : nameRegistrationUIState >= WizardView.FREE ? MaterialLineEdit.NORMAL : MaterialLineEdit.ERROR
+
+                fieldLayoutWidth: chooseUsernameButton.width
+                Layout.topMargin: 32
             }
 
-            LookupStatusLabel{
-                id: lookupStatusLabel
-
-                visible: true
-
-                lookupStatusState: {
-                    switch (nameRegistrationUIState) {
+            Label {
+                text: {
+                    switch(nameRegistrationUIState){
                     case WizardView.BLANK:
-                        return "Blank"
-                    case WizardView.INVALID:
-                        return "Invalid"
-                    case WizardView.TAKEN:
-                        return "Taken"
-                    case WizardView.FREE:
-                        return "Free"
                     case WizardView.SEARCHING:
-                        return "Searching"
-                    default:
-                        return "Blank"
+                    case WizardView.FREE:
+                        return ""
+                    case WizardView.INVALID:
+                        return qsTr("Invalid username")
+                    case WizardView.TAKEN:
+                        return qsTr("Username already taken")
                     }
                 }
+
+                anchors.left: usernameEdit.left
+                anchors.right: usernameEdit.right
+                Layout.alignment: Qt.AlignHCenter
+
+                font.pointSize: JamiTheme.textFontSize
+                color: "red"
+
+                height: 32
+            }
+
+            MaterialButton {
+                id: chooseUsernameButton
+                text: qsTr("CHOOSE USERNAME")
+                color: nameRegistrationUIState === WizardView.FREE?
+                        JamiTheme.buttonTintedGrey
+                        : JamiTheme.buttonTintedGreyInactive
+
+                onClicked: {
+                    if (nameRegistrationUIState === WizardView.FREE)
+                        createAccountStack.currentIndex = createAccountStack.currentIndex + 1
+                }
+            }
+
+            MaterialButton {
+                text: qsTr("SKIP CHOOSING USERNAME")
+                color: JamiTheme.buttonTintedGrey
+                outlined: true
+
+                onClicked: {
+                    createAccountStack.currentIndex = createAccountStack.currentIndex + 1
+                }
             }
         }
 
         ColumnLayout {
-            Layout.fillWidth: true
-            spacing: 6
+            spacing: 12
 
-            CheckBox {
-                id: choosePasswordCheckBox
-                checked: false
+            anchors.verticalCenter: parent.verticalCenter
+            Layout.preferredWidth: root.width
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-                indicator.width: 10
-                indicator.height: 10
+            RowLayout {
+                spacing: 12
+                height: 48
 
-                Layout.leftMargin: 32
+                anchors.right: createAccountButton.right
+                anchors.left: createAccountButton.left
 
-                Layout.minimumWidth: 261
+                Label {
+                    text: qsTr("Encrypt account with password")
 
-                Layout.preferredHeight: 30
-                Layout.minimumHeight: 25
+                    font.pointSize: JamiTheme.textFontSize + 3
+                }
 
-                indicator.implicitWidth: 20
-                indicator.implicitHeight:20
+                Label {
+                    text: qsTr("Optional")
+                    color: "white"
+                    anchors.right: parent.right
+                    padding: 8
 
-                Layout.alignment: Qt.AlignLeft
-
-                text: qsTr("Choose a password for enhanced security")
-                font.pointSize: 8
-                font.kerning: true
-
-                onClicked: {
-                    if (!checked) {
-                        collapsiblePasswordWidget.clearAllTextFields()
+                    background: Rectangle {
+                        color: "#28b1ed"
+                        radius: 24
+                        anchors.fill: parent
                     }
-
-                    validateWizardProgressionCreateAccountPage()
                 }
             }
 
-            CollapsiblePasswordWidget {
-                id: collapsiblePasswordWidget
+            RowLayout {
+                spacing: 12
+                height: 48
+
+                anchors.right: createAccountButton.right
+                anchors.left: createAccountButton.left
+
+                Label {
+                    text: qsTr("Choose a password to encrypt the account key on this device")
+
+                    font.pointSize: JamiTheme.textFontSize
+                }
+
+                Switch {
+                    id: passwordSwitch
+                    Layout.alignment: Qt.AlignRight
+                }
+            }
+
+            MaterialLineEdit {
+                id: passwordEdit
+
+                visible: passwordSwitch.checked
+
+                fieldLayoutWidth: createAccountButton.width
 
                 Layout.alignment: Qt.AlignHCenter
 
-                visibleCollapsble: choosePasswordCheckBox.checked
-                                   && choosePasswordCheckBox.visible
+                selectByMouse: true
+                echoMode: TextInput.Password
+                placeholderText: qsTr("Password")
+                font.pointSize: 10
+                font.kerning: true
+            }
+
+            MaterialLineEdit {
+                id: passwordConfirmEdit
+
+                visible: passwordSwitch.checked
+
+                fieldLayoutWidth: createAccountButton.width
+
+                Layout.alignment: Qt.AlignHCenter
+
+                selectByMouse: true
+                echoMode: TextInput.Password
+                placeholderText: qsTr("Confirm password")
+                font.pointSize: 10
+                font.kerning: true
+            }
+
+            Label {
+                anchors.right: createAccountButton.right
+                anchors.left: createAccountButton.left
+
+                text: qsTr("Note that the password cannot be recovered")
+
+                font.pointSize: JamiTheme.textFontSize
+            }
+
+            MaterialButton {
+                id: createAccountButton
+                text: qsTr("CREATE ACCOUNT")
+                color: !passwordSwitch.checked ||
+                    (passwordEdit.text === passwordConfirmEdit.text && passwordEdit.text.length !== 0)?
+                    JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
+
+                onClicked: {
+                    createAccount()
+                    createAccountStack.currentIndex = createAccountStack.currentIndex + 1
+                }
             }
         }
+    }
 
-        Item {
-            Layout.maximumWidth: 261
-            Layout.preferredWidth: 261
-            Layout.minimumWidth: 261
+    RowLayout {
+        spacing: 12
+        height: 48
 
-            Layout.maximumHeight: 30
-            Layout.preferredHeight: 30
-            Layout.minimumHeight: 30
+        anchors.top: createAccountStack.bottom
+        anchors.horizontalCenter: root.horizontalCenter
+        Layout.alignment: Qt.AlignHCenter
 
-            Layout.alignment: Qt.AlignHCenter
+        Rectangle {
+            color: usernameEdit.visible? JamiTheme.wizardBlueButtons : "grey"
+            radius: height / 2
+            height: 12
+            width: 12
+        }
+
+        Rectangle {
+            color: createAccountButton.visible? JamiTheme.wizardBlueButtons : "grey"
+            radius: height / 2
+            height: 12
+            width: 12
+        }
+
+        Rectangle {
+            color: "grey"
+            radius: height / 2
+            height: 12
+            width: 12
+        }
+    }
+
+    HoverableButton {
+        id: cancelButton
+        z: 2
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Return to welcome page")
+
+        Shortcut {
+            sequence: StandardKey.Cancel
+            enabled: parent.visible
+            onActivated: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
         }
     }
 }
diff --git a/src/wizardview/components/CreateSIPAccountPage.qml b/src/wizardview/components/CreateSIPAccountPage.qml
index 3f3da17..1b355b8 100644
--- a/src/wizardview/components/CreateSIPAccountPage.qml
+++ b/src/wizardview/components/CreateSIPAccountPage.qml
@@ -23,14 +23,16 @@
 import "../../constant"
 import "../../commoncomponents"
 
-ColumnLayout {
-    property alias text_sipFullNameEditAlias: sipFullNameEdit.text
+
+Rectangle {
+    id: root
+
     property alias text_sipServernameEditAlias: sipServernameEdit.text
     property alias text_sipProxyEditAlias: sipProxyEdit.text
     property alias text_sipUsernameEditAlias: sipUsernameEdit.text
     property alias text_sipPasswordEditAlias: sipPasswordEdit.text
 
-    property alias boothImgBase64: setSIPAvatarWidget.imgBase64
+    property /*alias*/ var boothImgBase64: null//setSIPAvatarWidget.imgBase64
 
     function initializeOnShowUp() {
         clearAllTextFields()
@@ -41,123 +43,54 @@
         sipPasswordEdit.clear()
         sipServernameEdit.clear()
         sipProxyEdit.clear()
-        sipFullNameEdit.clear()
         sipUsernameEdit.clear()
     }
 
-    function startBooth(){
-        setSIPAvatarWidget.startBooth()
-    }
+    signal createAccount
+    signal leavePage
 
-    function stopBooth(){
-        setSIPAvatarWidget.stopBooth()
-    }
+    anchors.fill: parent
 
-    Layout.fillWidth: true
-    Layout.fillHeight: true
-
-    spacing: 6
-
-    Item {
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-    }
-
-    Label {
-        id: sipProfileSectionLabel
-
-        Layout.maximumWidth: 368
-        Layout.preferredWidth: 368
-        Layout.maximumHeight: 21
-        Layout.preferredHeight: 21
-
-        Layout.alignment: Qt.AlignHCenter
-
-        text: qsTr("Profile")
-        font.pointSize: 13
-        font.kerning: true
-
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-    }
-
-    PhotoboothView{
-        id: setSIPAvatarWidget
-
-        Layout.alignment: Qt.AlignHCenter
-
-        Layout.maximumWidth: 261
-        Layout.preferredWidth: 261
-        Layout.minimumWidth: 261
-        Layout.maximumHeight: 261
-        Layout.preferredHeight: 261
-        Layout.minimumHeight: 261
-    }
-
-    RowLayout {
-        spacing: 0
-        Layout.alignment: Qt.AlignHCenter
-        Layout.maximumHeight: 30
-
-        Item {
-            Layout.fillWidth: true
-            Layout.maximumHeight: 10
-        }
-
-        InfoLineEdit {
-            id: sipFullNameEdit
-
-            fieldLayoutWidth : 261
-            Layout.alignment: Qt.AlignCenter
-            selectByMouse: true
-            placeholderText: qsTr("Profile name")
-            font.pointSize: 10
-            font.kerning: true
-        }
-
-        Item {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-        }
-    }
-    Item {
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-    }
-
-    Label {
-        id: sipAccountSectionLabel
-        Layout.maximumWidth: 368
-        Layout.preferredWidth: 368
-        Layout.maximumHeight: 21
-        Layout.preferredHeight: 21
-
-        Layout.alignment: Qt.AlignHCenter
-
-        text: qsTr("SIP Account")
-        font.pointSize: 12
-        font.kerning: true
-
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-    }
+    color: JamiTheme.backgroundColor
 
     ColumnLayout {
-        Layout.alignment: Qt.AlignHCenter
-        spacing: 7
+        spacing: 12
 
-        Item {
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignHCenter
-            Layout.maximumHeight: 40
-            Layout.minimumHeight: 30
-            Layout.preferredHeight: 40
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        Layout.preferredWidth: createAccountButton.width
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+        RowLayout {
+            spacing: 12
+            height: 48
+
+            anchors.left: createAccountButton.left
+            anchors.right: createAccountButton.right
+
+            Label {
+                text: qsTr("Configure an existing SIP account")
+            }
+
+            Label {
+                text: qsTr("Required")
+                color: "#ff1f62"
+                padding: 8
+
+                background: Rectangle {
+                    color: "#fee4e9"
+                    radius: 24
+                    anchors.fill: parent
+                }
+            }
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
             id: sipServernameEdit
+
+            fieldLayoutWidth: createAccountButton.width
+
             Layout.alignment: Qt.AlignHCenter
-            fieldLayoutWidth: 261
 
             selectByMouse: true
             placeholderText: qsTr("Server")
@@ -165,10 +98,12 @@
             font.kerning: true
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
             id: sipProxyEdit
+
+            fieldLayoutWidth: createAccountButton.width
+
             Layout.alignment: Qt.AlignHCenter
-            fieldLayoutWidth: 261
 
             selectByMouse: true
             placeholderText: qsTr("Proxy")
@@ -176,10 +111,12 @@
             font.kerning: true
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
             id: sipUsernameEdit
+
+            fieldLayoutWidth: createAccountButton.width
+
             Layout.alignment: Qt.AlignHCenter
-            fieldLayoutWidth: 261
 
             selectByMouse: true
             placeholderText: qsTr("Username")
@@ -187,10 +124,12 @@
             font.kerning: true
         }
 
-        InfoLineEdit {
+        MaterialLineEdit {
             id: sipPasswordEdit
+
+            fieldLayoutWidth: createAccountButton.width
+
             Layout.alignment: Qt.AlignHCenter
-            fieldLayoutWidth: 261
 
             selectByMouse: true
             echoMode: TextInput.Password
@@ -198,5 +137,52 @@
             font.pointSize: 10
             font.kerning: true
         }
+
+        MaterialButton {
+            id: createAccountButton
+            text: qsTr("CREATE SIP ACCOUNT")
+            color: JamiTheme.wizardBlueButtons
+
+            onClicked: {
+                createAccount()
+            }
+        }
+    }
+
+    HoverableButton {
+        id: cancelButton
+        z: 2
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Return to welcome page")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
     }
 }
diff --git a/src/wizardview/components/HoverableGradientButton.qml b/src/wizardview/components/HoverableGradientButton.qml
index 8b1ebd2..09e9671 100644
--- a/src/wizardview/components/HoverableGradientButton.qml
+++ b/src/wizardview/components/HoverableGradientButton.qml
@@ -49,6 +49,7 @@
     property string onEnterColor: JamiTheme.hoverColor
     property string onExitColor: backgroundColor
     property string textColor: "white"
+    property string tooltipText: ""
 
     property string toolTipText: ""
 
diff --git a/src/wizardview/components/ImportFromBackupPage.qml b/src/wizardview/components/ImportFromBackupPage.qml
index bd7d26e..f379dfe 100644
--- a/src/wizardview/components/ImportFromBackupPage.qml
+++ b/src/wizardview/components/ImportFromBackupPage.qml
@@ -20,18 +20,23 @@
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.14
 import Qt.labs.platform 1.1
+import net.jami.Models 1.0
 
 import "../../constant"
 import "../../commoncomponents"
 
-ColumnLayout {
+Rectangle {
+    id: root
+
     property alias text_passwordFromBackupEditAlias: passwordFromBackupEdit.text
     property string fileImportBtnText: qsTr("Archive(none)")
 
-    signal importFromFile_Dialog_Accepted(string fileDir)
+    property string filePath: ""
+    property string errorText: ""
 
     function clearAllTextFields() {
         passwordFromBackupEdit.clear()
+        errorText = ""
         fileImportBtnText = qsTr("Archive(none)")
     }
 
@@ -42,135 +47,137 @@
         title: qsTr("Open File")
         folder: StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/Desktop"
 
-        nameFilters: [qsTr("Jami archive files") + " (*.gz)", qsTr(
-                "All files") + " (*)"]
+        nameFilters: [qsTr("Jami archive files") + " (*.gz)", qsTr("All files") + " (*)"]
 
         onAccepted: {
-            importFromFile_Dialog_Accepted(file)
+            filePath = file
+            if (file.length != 0) {
+                fileImportBtnText = ClientWrapper.utilsAdaptor.toFileInfoName(file)
+            } else {
+                fileImportBtnText = qsTr("Archive(none)")
+            }
         }
     }
 
-    Layout.fillWidth: true
-    Layout.fillHeight: true
+    anchors.fill: parent
 
-    Item {
-        Layout.alignment: Qt.AlignHCenter
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-    }
+    color: JamiTheme.backgroundColor
+
+    signal leavePage
+    signal importAccount
 
     ColumnLayout {
-        Layout.alignment: Qt.AlignCenter
-        Layout.maximumWidth: 366
-
         spacing: 12
 
-        RowLayout {
-            Layout.fillWidth: true
-            Layout.maximumHeight: 24
-            spacing: 0
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: root.horizontalCenter
+        Layout.preferredWidth: parent.width
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
+        Text {
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
 
-            Label {
-                id: importFromBackupLabel
-                Layout.minimumHeight: 24
-                Layout.minimumWidth: 234
-                text: qsTr("Import from backup")
-                font.pointSize: 13
-                font.kerning: true
-                horizontalAlignment: Qt.AlignLeft
-                verticalAlignment: Qt.AlignVCenter
-            }
-
-            HoverableRadiusButton {
-                id: backupInfoBtn
-
-                buttonImageHeight: height
-                buttonImageWidth: width
-
-                Layout.alignment: Qt.AlignVCenter
-                Layout.minimumWidth: 24
-                Layout.preferredWidth: 24
-                Layout.maximumWidth: 24
-
-                Layout.minimumHeight: 24
-                Layout.preferredHeight: 24
-                Layout.maximumHeight: 24
-
-                radius: height / 2
-                icon.source: "/images/icons/info-24px.svg"
-                icon.height: 24
-                icon.width: 24
-
-                backgroundColor: JamiTheme.releaseColor
-                onClicked: {
-                    backupInfoLabel.visible = !backupInfoLabel.visible
-                }
-            }
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
+            text: qsTr("Import from backup")
+            font.pointSize: JamiTheme.menuFontSize
         }
 
-        HoverableGradientButton {
+        MaterialButton {
             id: fileImportBtn
 
-            Layout.alignment: Qt.AlignHCenter
-            Layout.maximumWidth: 256
-            Layout.preferredWidth: 256
-
-            Layout.maximumHeight: 30
-            Layout.preferredHeight: 30
-            Layout.minimumHeight: 30
-
             text: fileImportBtnText
-            font.pointSize: 10
-            font.kerning: true
-
-            radius: height / 2
-            backgroundColor: JamiTheme.releaseColor
+            toolTipText: qsTr("Import your account's archive")
+            source: "qrc:/images/icons/round-folder-24px.svg"
+            color: JamiTheme.buttonTintedGrey
 
             onClicked: {
                 importFromFile_Dialog.open()
             }
         }
 
-        InfoLineEdit {
+        Text {
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
+
+            text: qsTr("You can obtain an archive by clicking on \"Export account\" in the account settings. This will create a .gz file on your device.")
+            wrapMode: Text.Wrap
+        }
+
+        MaterialLineEdit {
             id: passwordFromBackupEdit
 
-            Layout.alignment: Qt.AlignHCenter
-
             selectByMouse: true
-            echoMode: TextInput.Password
             placeholderText: qsTr("Password")
+            font.pointSize: 10
+            font.kerning: true
+
+            echoMode: TextInput.Password
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
+        }
+
+        MaterialButton {
+            id: connectBtn
+            text: qsTr("CONNECT FROM BACKUP")
+            color: filePath.length === 0?
+                JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey
+
+            onClicked: {
+                errorText = ""
+                importAccount()
+            }
         }
 
         Label {
-            id: backupInfoLabel
+            text: errorText
 
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
             Layout.alignment: Qt.AlignHCenter
-            Layout.maximumWidth: 366
-            Layout.preferredWidth: 366
 
-            text: qsTr("You can obtain an archive by clicking on \"Export account\" in the account settings. This will create a .gz file on your device.")
-            wrapMode: Text.WordWrap
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
+            font.pointSize: JamiTheme.textFontSize
+            color: "red"
 
-            visible: false
+            height: 32
         }
     }
 
-    Item {
-        Layout.alignment: Qt.AlignHCenter
-        Layout.fillWidth: true
-        Layout.fillHeight: true
+    HoverableButton {
+        id: cancelButton
+        z: 2
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Return to welcome page")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
     }
 }
diff --git a/src/wizardview/components/ImportFromDevicePage.qml b/src/wizardview/components/ImportFromDevicePage.qml
index 5181635..3ecb205 100644
--- a/src/wizardview/components/ImportFromDevicePage.qml
+++ b/src/wizardview/components/ImportFromDevicePage.qml
@@ -23,9 +23,12 @@
 import "../../constant"
 import "../../commoncomponents"
 
-ColumnLayout {
+Rectangle {
+    id: root
+
     property alias text_pinFromDeviceAlias: pinFromDevice.text
     property alias text_passwordFromDeviceAlias: passwordFromDevice.text
+    property string errorText: ""
 
     function initializeOnShowUp() {
         clearAllTextFields()
@@ -36,107 +39,125 @@
         passwordFromDevice.clear()
     }
 
-    Layout.fillWidth: true
-    Layout.fillHeight: true
+    anchors.fill: parent
 
-    Item {
-        Layout.alignment: Qt.AlignHCenter
-        Layout.preferredHeight: 40
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-    }
+    color: JamiTheme.backgroundColor
+
+    signal leavePage
+    signal importAccount
 
     ColumnLayout {
-        Layout.alignment: Qt.AlignCenter
-        Layout.fillWidth: true
-
         spacing: 12
 
-        RowLayout {
-            Layout.fillWidth: true
-            Layout.maximumHeight: 24
-            spacing: 0
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        Layout.preferredWidth: parent.width
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
+        Text {
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
 
-            Label {
-                id: importFromDeviceLabel
-                Layout.minimumHeight: 24
-                Layout.minimumWidth: 234
-                text: qsTr("Import from device")
-                font.pointSize: 13
-                font.kerning: true
-            }
-
-            HoverableRadiusButton {
-                id: pinInfoBtn
-
-                buttonImageHeight: height
-                buttonImageWidth: width
-
-                Layout.alignment: Qt.AlignVCenter
-                Layout.minimumWidth: 24
-                Layout.maximumWidth: 24
-                Layout.minimumHeight: 24
-                Layout.maximumHeight: 24
-
-                radius: height / 2
-                icon.source: "/images/icons/info-24px.svg"
-                backgroundColor: JamiTheme.releaseColor
-
-                onClicked: {
-                    pinInfoLabel.visible = !pinInfoLabel.visible
-                }
-            }
-            Item {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
+            text: qsTr("Enter your main Jami account password")
+            font.pointSize: JamiTheme.menuFontSize
         }
-        InfoLineEdit {
-            id: pinFromDevice
 
-            Layout.alignment: Qt.AlignHCenter
+        MaterialLineEdit {
+            id: passwordFromDevice
+
+            selectByMouse: true
+            placeholderText: qsTr("Password")
+            font.pointSize: 10
+            font.kerning: true
+
+            echoMode: TextInput.Password
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
+        }
+
+        Text {
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
+
+            text: qsTr("Enter the PIN from another configured Jami account. Use the \"export Jami account\" feature to obtain a PIN")
+            wrapMode: Text.Wrap
+        }
+
+        MaterialLineEdit {
+            id: pinFromDevice
 
             selectByMouse: true
             placeholderText: qsTr("PIN")
+            font.pointSize: 10
+            font.kerning: true
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: connectBtn.width
         }
 
-        InfoLineEdit {
-            id: passwordFromDevice
+        MaterialButton {
+            id: connectBtn
+            text: qsTr("CONNECT FROM ANOTHER DEVICE")
+            color: pinFromDevice.text.length === 0?
+                JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey
 
-            Layout.alignment: Qt.AlignHCenter
-
-            selectByMouse: true
-            echoMode: TextInput.Password
-            placeholderText: qsTr("Password")
+            onClicked: {
+                errorText = ""
+                importAccount()
+            }
         }
 
         Label {
-            id: pinInfoLabel
+            text: errorText
 
+            anchors.left: connectBtn.left
+            anchors.right: connectBtn.right
             Layout.alignment: Qt.AlignHCenter
-            Layout.minimumWidth: 256
-            Layout.maximumWidth: 256
 
-            text: qsTr("To obtain a PIN (valid for 10 minutes), you need to open the account settings on the other device and click on \"Link to another device\".")
-            wrapMode: Text.WordWrap
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
+            font.pointSize: JamiTheme.textFontSize
+            color: "red"
 
-            visible: false
+            height: 32
         }
     }
 
-    Item {
-        Layout.alignment: Qt.AlignHCenter
-        Layout.preferredHeight: 40
-        Layout.fillWidth: true
-        Layout.fillHeight: true
+    HoverableButton {
+        id: cancelButton
+        z: 2
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Return to welcome page")
+
+        Shortcut {
+            sequence: StandardKey.Cancel
+            enabled: parent.visible
+            onActivated: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
     }
 }
diff --git a/src/wizardview/components/ProfilePage.qml b/src/wizardview/components/ProfilePage.qml
new file mode 100644
index 0000000..91188f4
--- /dev/null
+++ b/src/wizardview/components/ProfilePage.qml
@@ -0,0 +1,213 @@
+/*
+ * Copyright (C) 2020 by Savoir-faire Linux
+ * Author: Yang Wang <yang.wang@savoirfairelinux.com>
+ *
+ * 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.14
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.14
+
+import "../../constant"
+import "../../commoncomponents"
+
+Rectangle {
+    id: root
+
+    function initializeOnShowUp() {
+        clearAllTextFields()
+        boothImgBase64 = ""
+        readyToSaveDetails = false
+    }
+
+    function clearAllTextFields() {
+        aliasEdit.clear()
+    }
+
+    anchors.fill: parent
+
+    color: JamiTheme.backgroundColor
+
+    signal leavePage
+    signal saveProfile
+
+    property var readyToSaveDetails: false
+    property var showBottom: false
+    property alias boothImgBase64: setAvatarWidget.imgBase64
+    property alias displayName: aliasEdit.text
+
+    ColumnLayout {
+        spacing: 12
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        Layout.preferredWidth: parent.width
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+
+        RowLayout {
+            spacing: 12
+            height: 48
+
+            Layout.preferredWidth: saveProfileBtn.width
+
+            Label {
+                text: qsTr("Profile is only shared with contacts")
+
+                font.pointSize: JamiTheme.textFontSize + 3
+            }
+
+            Label {
+                text: qsTr("Optional")
+                color: "white"
+                Layout.alignment: Qt.AlignRight
+                padding: 8
+
+                background: Rectangle {
+                    color: "#28b1ed"
+                    radius: 24
+                    anchors.fill: parent
+                }
+            }
+        }
+
+        PhotoboothView {
+            id: setAvatarWidget
+
+            Layout.alignment: Qt.AlignHCenter
+
+            Layout.maximumWidth: 256
+            Layout.preferredWidth: 256
+            Layout.minimumWidth: 256
+            Layout.maximumHeight: 256
+            Layout.preferredHeight: 256
+            Layout.minimumHeight: 256
+        }
+
+        MaterialLineEdit {
+            id: aliasEdit
+
+            selectByMouse: true
+            placeholderText: qsTr("Enter your name")
+            font.pointSize: 10
+            font.kerning: true
+
+            borderColorMode: MaterialLineEdit.NORMAL
+
+            fieldLayoutWidth: saveProfileBtn.width
+        }
+
+        MaterialButton {
+            id: saveProfileBtn
+            enabled: readyToSaveDetails
+            text: enabled? qsTr("Save Profile") : qsTr("Generating account…")
+            color: enabled? JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
+
+            onClicked: {
+                saveProfile()
+            }
+        }
+
+        MaterialButton {
+            text: qsTr("SKIP")
+            enabled: saveProfileBtn.enabled
+            color: enabled? JamiTheme.buttonTintedGrey : JamiTheme.buttonTintedGreyInactive
+            outlined: true
+
+            onClicked: {
+                leavePage()
+            }
+        }
+
+        RowLayout {
+            id: bottomLayout
+            height: 48
+            spacing: 12
+            visible: showBottom
+
+            Layout.preferredWidth: saveProfileBtn.width
+            Layout.topMargin: 12
+            Layout.alignment: Qt.AlignHCenter
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            Rectangle {
+                color: "grey"
+                radius: height / 2
+                height: 12
+                width: 12
+            }
+
+            Rectangle {
+                color: "grey"
+                radius: height / 2
+                height: 12
+                width: 12
+            }
+
+            Rectangle {
+                color: JamiTheme.wizardBlueButtons
+                radius: height / 2
+                height: 12
+                width: 12
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+        }
+
+    }
+
+    HoverableButton {
+        id: cancelButton
+        z: 2
+        visible: readyToSaveDetails
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 90
+        topPadding: 90
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Close")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
+    }
+}
diff --git a/src/wizardview/components/WelcomePageLayout.qml b/src/wizardview/components/WelcomePageLayout.qml
index 0bff7ae..5ec6cbd 100644
--- a/src/wizardview/components/WelcomePageLayout.qml
+++ b/src/wizardview/components/WelcomePageLayout.qml
@@ -1,6 +1,7 @@
 /*
  * Copyright (C) 2020 by Savoir-faire Linux
  * Author: Yang Wang <yang.wang@savoirfairelinux.com>
+ * Author: Sébastien blin <sebastien.blin@savoirfairelinux.com>
  *
  * 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
@@ -19,26 +20,25 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.15
+import net.jami.Models 1.0
 
 import "../../constant"
 import "../../commoncomponents"
 
 ColumnLayout {
-    property alias connectAccountManagerButtonAlias: connectAccountManagerButton
-    property alias newSIPAccountButtonAlias: newSIPAccountButton
-
-    Layout.fillWidth: true
-    Layout.fillHeight: true
-    spacing: 6
+    anchors.fill: parent
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.horizontalCenter: parent.horizontalCenter
 
     signal welcomePageRedirectPage(int toPageIndex)
+    signal leavePage
 
     Item {
         // put a spacer to make the buttons closs to the middle
-        Layout.minimumHeight: 57
-        Layout.maximumHeight: 57
-        Layout.preferredHeight: 57
+        Layout.preferredHeight: 48
         Layout.fillWidth: true
+        Layout.fillHeight: true
     }
     RowLayout {
         Layout.fillWidth: true
@@ -52,13 +52,6 @@
             font.kerning: true
         }
     }
-    Item {
-        Layout.minimumHeight: 17
-        Layout.maximumHeight: 17
-        Layout.preferredHeight: 17
-        Layout.fillWidth: true
-    }
-
     RowLayout {
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignHCenter
@@ -80,29 +73,18 @@
             }
         }
     }
-    Item {
-        // put a spacer to make the buttons closs to the middle
-        Layout.preferredHeight: 57
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-    }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
-        Layout.maximumHeight: 30
+        Layout.maximumHeight: 36
         Layout.alignment: Qt.AlignHCenter
-        HoverableGradientButton {
+        MaterialButton {
             id: newAccountButton
 
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            text: qsTr("Create local account")
-            font.pointSize: 10
-            font.kerning: true
-            radius: height / 2
-
+            text: qsTr("CREATE A JAMI ACCOUNT")
             toolTipText: qsTr("Create new Jami account")
+            source: "qrc:/images/default_avatar_overlay.svg"
+            color: JamiTheme.buttonTintedBlue
 
             onClicked: {
                 welcomePageRedirectPage(1)
@@ -110,24 +92,18 @@
         }
     }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
 
-        Layout.maximumHeight: 30
+        Layout.maximumHeight: 36
         Layout.alignment: Qt.AlignHCenter
-        HoverableGradientButton {
+        MaterialButton {
             id: fromDeviceButton
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            text: qsTr("Import from device")
-            font.pointSize: 10
-            font.kerning: true
 
-            backgroundColor: JamiTheme.releaseColor
-            radius: height / 2
-
+            text: qsTr("IMPORT FROM ANOTHER DEVICE")
             toolTipText: qsTr("Import account from other device")
+            source: "qrc:/images/icons/devices-24px.svg"
+            color: JamiTheme.buttonTintedBlue
 
             onClicked: {
                 welcomePageRedirectPage(5)
@@ -135,24 +111,18 @@
         }
     }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
 
-        Layout.maximumHeight: 30
+        Layout.maximumHeight: 36
         Layout.alignment: Qt.AlignHCenter
-        HoverableGradientButton {
+        MaterialButton {
             id: fromBackupButton
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            text: qsTr("Import from backup")
-            font.pointSize: 10
-            font.kerning: true
 
-            backgroundColor: JamiTheme.releaseColor
-            radius: height / 2
-
+            text: qsTr("CONNECT FROM BACKUP")
             toolTipText: qsTr("Import account from backup file")
+            source: "qrc:/images/icons/backup-24px.svg"
+            color: JamiTheme.buttonTintedBlue
 
             onClicked: {
                 welcomePageRedirectPage(3)
@@ -160,26 +130,18 @@
         }
     }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
 
-        Layout.maximumHeight: 30
+        Layout.maximumHeight: 36
         Layout.alignment: Qt.AlignHCenter
-        Button {
+        MaterialButton {
             id: showAdvancedButton
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            Layout.alignment: Qt.AlignCenter
-            text: qsTr("Show Advanced")
-            font.pointSize: 8
-            font.kerning: true
 
-            background: Rectangle{
-                anchors.fill: parent
-
-                color: "transparent"
-                radius: height /2
-            }
+            text: qsTr("SHOW ADVANCED")
+            toolTipText: qsTr("Show advanced options")
+            color: JamiTheme.buttonTintedBlue
+            outlined: true
 
             hoverEnabled: true
 
@@ -194,25 +156,19 @@
         }
     }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignHCenter
 
-        Layout.maximumHeight: 30
-        HoverableGradientButton {
+        Layout.maximumHeight: 36
+        MaterialButton {
             id: connectAccountManagerButton
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            Layout.alignment: Qt.AlignCenter
-            text: qsTr("Connect to account manager")
             visible: false
-            font.pointSize: 10
-            font.kerning: true
 
-            backgroundColor: JamiTheme.releaseColor
-            radius: height / 2
-
+            text: qsTr("CONNECT TO MANAGEMENT SERVER")
             toolTipText: qsTr("Login to account manager")
+            source: "qrc:/images/icons/router-24px.svg"
+            color: JamiTheme.buttonTintedBlue
 
             onClicked: {
                 welcomePageRedirectPage(6)
@@ -220,25 +176,18 @@
         }
     }
     RowLayout {
-        spacing: 6
+        spacing: 8
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignHCenter
-        Layout.maximumHeight: 30
-
-        HoverableGradientButton {
+        Layout.maximumHeight: 36
+        MaterialButton {
             id: newSIPAccountButton
-            Layout.preferredWidth: 256
-            Layout.preferredHeight: 30
-            Layout.alignment: Qt.AlignCenter
-            text: qsTr("Add a new SIP account")
             visible: false
-            font.pointSize: 10
-            font.kerning: true
 
-            radius: height / 2
-            backgroundColor: JamiTheme.releaseColor
-
+            text: qsTr("CREATE A SIP ACCOUNT")
             toolTipText: qsTr("Create new SIP account")
+            source: "qrc:/images/default_avatar_overlay.svg"
+            color: JamiTheme.buttonTintedBlue
 
             onClicked: {
                 welcomePageRedirectPage(2)
@@ -251,4 +200,45 @@
         Layout.preferredHeight: 65
         Layout.fillWidth: true
     }
+
+    HoverableButton {
+        id: cancelButton
+        z: 2
+
+        visible: {
+            return ClientWrapper.utilsAdaptor.getAccountListSize() > 0
+        }
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        rightPadding: 40
+        topPadding: 40
+
+        Layout.preferredWidth: 96
+        Layout.preferredHeight: 96
+
+        backgroundColor: "transparent"
+        onEnterColor: "transparent"
+        onPressColor: "transparent"
+        onReleaseColor: "transparent"
+        onExitColor: "transparent"
+
+        buttonImageHeight: 48
+        buttonImageWidth: 48
+        source: "qrc:/images/icons/ic_close_white_24dp.png"
+        radius: 48
+        baseColor: "#7c7c7c"
+        toolTipText: qsTr("Close")
+
+        Action {
+            enabled: parent.visible
+            shortcut: StandardKey.Cancel
+            onTriggered: leavePage()
+        }
+
+        onClicked: {
+            leavePage()
+        }
+    }
 }