settingsview: fix alignments and homogeneize items

Change-Id: I8ea60715a14b481da5c4d4d0078dc8de7df28eec
diff --git a/images/icons/delete_forever-24px.svg b/images/icons/delete_forever-24px.svg
new file mode 100644
index 0000000..b61a3cc
--- /dev/null
+++ b/images/icons/delete_forever-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg>
\ No newline at end of file
diff --git a/ressources.qrc b/ressources.qrc
index 14eb8f5..51835ea 100644
--- a/ressources.qrc
+++ b/ressources.qrc
@@ -35,7 +35,10 @@
         <file>images/icons/ic_arrow_forward_white_48dp_2x.png</file>
         <file>images/icons/ic_arrow_tab_next_black_9dp_2x.png</file>
         <file>images/icons/ic_arrow_tab_previous_black_9dp_2x.png</file>
+        <file>images/icons/check_box-24px.svg</file>
+        <file>images/icons/check_box_outline_blank-24px.svg</file>
         <file>images/icons/ic_block_24px.svg</file>
+        <file>images/icons/delete_forever-24px.svg</file>
         <file>images/icons/phone_forwarded-24px.svg</file>
         <file>images/icons/ic_chat_black_24dp_2x.png</file>
         <file>images/icons/ic_chat_white_24dp.png</file>
diff --git a/src/accountadapter.cpp b/src/accountadapter.cpp
index 2358ece..edeb1a6 100644
--- a/src/accountadapter.cpp
+++ b/src/accountadapter.cpp
@@ -373,6 +373,16 @@
 
         QObject::disconnect(accountStatusChangedConnection_);
         QObject::disconnect(contactAddedConnection_);
+        QObject::disconnect(accountProfileChangedConnection_);
+        QObject::disconnect(addedToConferenceConnection_);
+
+        accountProfileChangedConnection_
+            = QObject::connect(&LRCInstance::accountModel(),
+                &lrc::api::NewAccountModel::profileUpdated,
+                [this](const QString& accountId) {
+                    if (LRCInstance::getCurrAccId() == accountId)
+                        emit accountStatusChanged();
+                });
 
         accountStatusChangedConnection_
             = QObject::connect(accInfo.accountModel,
@@ -401,7 +411,7 @@
                                        emit updateConversationForAddedContact();
                                    }
                                });
-        QObject::disconnect(addedToConferenceConnection_);
+
         addedToConferenceConnection_
             = QObject::connect(accInfo.callModel.get(),
                                &NewCallModel::callAddedToConference,
diff --git a/src/accountadapter.h b/src/accountadapter.h
index 9671aed..34aee81 100644
--- a/src/accountadapter.h
+++ b/src/accountadapter.h
@@ -114,5 +114,6 @@
     QMetaObject::Connection accountStatusChangedConnection_;
     QMetaObject::Connection contactAddedConnection_;
     QMetaObject::Connection addedToConferenceConnection_;
+    QMetaObject::Connection accountProfileChangedConnection_;
 };
 Q_DECLARE_METATYPE(AccountAdapter *)
diff --git a/src/commoncomponents/MaterialLineEdit.qml b/src/commoncomponents/MaterialLineEdit.qml
index a8a38e8..afb08fc 100644
--- a/src/commoncomponents/MaterialLineEdit.qml
+++ b/src/commoncomponents/MaterialLineEdit.qml
@@ -19,8 +19,12 @@
 
     property int borderColorMode: InfoLineEdit.NORMAL
     property var iconSource: {
+        if (readOnly) {
+            return ""
+        }
         switch(borderColorMode){
         case InfoLineEdit.RIGHT:
+            return "qrc:/images/icons/round-check_circle-24px.svg"
         case InfoLineEdit.NORMAL:
             return ""
         case InfoLineEdit.ERROR:
@@ -29,9 +33,12 @@
     }
     property var backgroundColor: JamiTheme.rgb256(240,240,240)
     property var borderColor: {
+        if (!enabled) {
+            return "transparent"
+        }
         switch(borderColorMode){
         case InfoLineEdit.NORMAL:
-            return "black"
+            return "#333"
         case InfoLineEdit.RIGHT:
             return "green"
         case InfoLineEdit.ERROR:
@@ -39,6 +46,8 @@
         }
     }
 
+    signal imageClicked
+
     Layout.minimumHeight: fieldLayoutHeight
     Layout.preferredHeight: fieldLayoutHeight
     Layout.maximumHeight: fieldLayoutHeight
@@ -73,12 +82,23 @@
                 color: borderColor
             }
         }
+
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+            acceptedButtons: Qt.LeftButton
+            enabled: borderColorMode === InfoLineEdit.RIGHT
+
+            onReleased: {
+                imageClicked()
+            }
+        }
     }
 
     background: Rectangle {
         anchors.fill: parent
         radius: 4
-        border.color: readOnly? "black" : borderColor
+        border.color: readOnly? "transparent" : borderColor
         color: readOnly? "transparent" : backgroundColor
     }
 }
diff --git a/src/commoncomponents/PasswordDialog.qml b/src/commoncomponents/PasswordDialog.qml
index a47abca..93ea71e 100644
--- a/src/commoncomponents/PasswordDialog.qml
+++ b/src/commoncomponents/PasswordDialog.qml
@@ -40,14 +40,27 @@
     property string path: ""
     property int purpose: PasswordDialog.ChangePassword
 
-    title: {
-        switch(purpose){
-        case PasswordDialog.ExportAccount:
-            return qsTr("Enter the password of this account")
-        case PasswordDialog.ChangePassword:
-            return qsTr("Changing password")
-        case PasswordDialog.SetPassword:
-            return qsTr("Set password")
+    header : Rectangle {
+        width: parent.width
+        height: 64
+        color: "transparent"
+        Text {
+            anchors.left: parent.left
+            anchors.leftMargin: 24
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 24
+
+            text: {
+                switch(purpose){
+                case PasswordDialog.ExportAccount:
+                    return qsTr("Enter the password of this account")
+                case PasswordDialog.ChangePassword:
+                    return qsTr("Changing password")
+                case PasswordDialog.SetPassword:
+                    return qsTr("Set password")
+                }
+            }
+            font.pointSize: JamiTheme.headerFontSize
         }
     }
 
@@ -55,6 +68,8 @@
         purpose = purposeIn
         path = exportPathIn
         currentPasswordEdit.clear()
+        passwordEdit.borderColorMode = InfoLineEdit.NORMAL
+        confirmPasswordEdit.borderColorMode = InfoLineEdit.NORMAL
         passwordEdit.clear()
         confirmPasswordEdit.clear()
         passwordDialog.open()
@@ -100,29 +115,23 @@
             success = ClientWrapper.accountAdaptor.exportToFile(ClientWrapper.utilsAdaptor.getCurrAccId(),path,currentPasswordEdit.text)
         }
 
-        spinnerMovie.playing = false
-        spinnerLabel.visible = false
         if (success) {
             haveDone(successCode, passwordDialog.purpose)
         } else {
-            currentPasswordEdit.clear()
             btnChangePasswordConfirm.enabled = false
-            wrongPasswordLabel.visible = true
+            currentPasswordEdit.borderColorMode = InfoLineEdit.ERROR
         }
     }
     function savePasswordQML() {
         var success = false
         success = ClientWrapper.accountAdaptor.savePassword(ClientWrapper.utilsAdaptor.getCurrAccId(),currentPasswordEdit.text, passwordEdit.text)
 
-        spinnerMovie.playing = false
-        spinnerLabel.visible = false
         if (success) {
             ClientWrapper.accountAdaptor.setArchiveHasPassword(passwordEdit.text.length !== 0)
             haveDone(successCode, passwordDialog.purpose)
         } else {
-            currentPasswordEdit.clear()
+            currentPasswordEdit.borderColorMode = InfoLineEdit.ERROR
             btnChangePasswordConfirm.enabled = false
-            wrongPasswordLabel.visible = true
         }
     }
 
@@ -131,24 +140,20 @@
     anchors.centerIn: parent.Center
     x: (parent.width - width) / 2
     y: (parent.height - height) / 2
+    height: contentLayout.implicitHeight + 64 + 16
 
-    contentItem: Rectangle{
-        implicitWidth: 440
-        implicitHeight: 270
+    contentItem: Rectangle {
+        implicitWidth: 280
 
         ColumnLayout {
+            id: contentLayout
             anchors.fill: parent
-            spacing: 7
+            spacing: 8
 
             ColumnLayout {
-                Layout.topMargin: 11
-                Layout.leftMargin: 40
-                Layout.rightMargin: 40
                 Layout.alignment: Qt.AlignHCenter
                 Layout.fillWidth: true
 
-                Layout.preferredWidth: 360
-                Layout.maximumWidth: 360
                 spacing: 7
 
                 ColumnLayout {
@@ -156,21 +161,16 @@
 
                     Layout.alignment: Qt.AlignHCenter
 
-                    Layout.preferredWidth: 356
-                    Layout.maximumWidth: 356
-
-                    InfoLineEdit {
+                    MaterialLineEdit {
                         id: currentPasswordEdit
 
-                        Layout.minimumHeight: 30
-                        Layout.preferredHeight: 30
-                        Layout.maximumHeight: 30
+                        Layout.maximumHeight: visible ?
+                                                48 :
+                                                0
                         Layout.fillWidth: true
 
                         visible: purpose === PasswordDialog.ChangePassword || purpose === PasswordDialog.ExportAccount
                         echoMode: TextInput.Password
-                        font.pointSize: 10
-                        font.kerning: true
                         horizontalAlignment: Text.AlignLeft
                         verticalAlignment: Text.AlignVCenter
 
@@ -184,32 +184,10 @@
                             if (currentPasswordEdit.text.length == 0) {
                                 btnChangePasswordConfirm.enabled = false
                             } else {
-                                wrongPasswordLabel.visible = false
                                 btnChangePasswordConfirm.enabled = true
                             }
                         }
                     }
-
-                    Label {
-                        id: wrongPasswordLabel
-
-                        Layout.alignment: Qt.AlignHCenter
-
-                        Layout.minimumHeight: 12
-                        Layout.preferredHeight: 12
-                        Layout.maximumHeight: 12
-                        Layout.fillWidth: true
-
-                        font.pointSize: 8
-                        font.kerning: true
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
-
-                        text: qsTr("Current Password Incorrect")
-                        color: "red"
-
-                        visible: false
-                    }
                 }
 
                 Item {
@@ -220,16 +198,14 @@
                     Layout.maximumHeight: 8
                 }
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: passwordEdit
 
-                    fieldLayoutHeight: 30
+                    fieldLayoutHeight: 48
                     layoutFillwidth: true
 
                     visible: purpose === PasswordDialog.ChangePassword || purpose === PasswordDialog.SetPassword
                     echoMode: TextInput.Password
-                    font.pointSize: 10
-                    font.kerning: true
                     horizontalAlignment: Text.AlignLeft
                     verticalAlignment: Text.AlignVCenter
 
@@ -248,16 +224,14 @@
                     Layout.maximumHeight: 8
                 }
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: confirmPasswordEdit
 
-                    fieldLayoutHeight: 30
+                    fieldLayoutHeight: 48
                     layoutFillwidth: true
 
                     visible: purpose === PasswordDialog.ChangePassword || purpose === PasswordDialog.SetPassword
                     echoMode: TextInput.Password
-                    font.pointSize: 10
-                    font.kerning: true
                     horizontalAlignment: Text.AlignLeft
                     verticalAlignment: Text.AlignVCenter
 
@@ -269,98 +243,42 @@
                 }
             }
 
-            Label {
-                id: spinnerLabel
-
-                visible: false
-
-                Layout.fillWidth: true
-
-                Layout.minimumHeight: 20
-                Layout.preferredHeight: 20
-                Layout.maximumHeight: 20
-
-                background: Rectangle {
-                    anchors.fill: parent
-                    AnimatedImage {
-                        id: spinnerMovie
-
-                        anchors.fill: parent
-
-                        source: "qrc:/images/ajax-loader.gif"
-
-                        playing: spinnerLabel.visible
-                        paused: false
-                        fillMode: Image.PreserveAspectFit
-                        mipmap: true
-                    }
-                }
-            }
-
             RowLayout {
-                spacing: 7
+                spacing: 8
 
-                Layout.bottomMargin: 11
                 Layout.fillWidth: true
 
-                Layout.leftMargin: 30
-                Layout.rightMargin: 30
+                Layout.alignment: Qt.AlignRight
 
-            HoverableRadiusButton {
-                id: btnChangePasswordConfirm
+                Button {
+                    id: btnChangePasswordConfirm
 
-                    Layout.maximumWidth: 130
-                    Layout.preferredWidth: 130
-                    Layout.minimumWidth: 130
+                    contentItem: Text {
+                        text: qsTr("CONFIRM")
+                        color: JamiTheme.buttonTintedBlue
+                    }
 
-                    Layout.minimumHeight: 30
-                    Layout.preferredHeight: 30
-                    Layout.maximumHeight: 30
-
-                    text: qsTr("Confirm")
-                    font.pointSize: 10
-                    font.kerning: true
-
-                    radius: height / 2
-
-                    enabled: false
+                    background: Rectangle {
+                        color: "transparent"
+                    }
 
                     onClicked: {
-                        spinnerLabel.visible = true
-                        spinnerMovie.playing = true
                         timerToOperate.restart()
                     }
                 }
 
-                Item {
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-                }
 
-                HoverableButtonTextItem {
+                Button {
                     id: btnChangePasswordCancel
 
-                    Layout.maximumWidth: 130
-                    Layout.preferredWidth: 130
-                    Layout.minimumWidth: 130
+                    contentItem: Text {
+                        text: qsTr("CANCEL")
+                        color: JamiTheme.buttonTintedBlue
+                    }
 
-                    Layout.minimumHeight: 30
-                    Layout.preferredHeight: 30
-                    Layout.maximumHeight: 30
-
-                    backgroundColor: "red"
-                    onEnterColor: Qt.rgba(150 / 256, 0, 0, 0.7)
-                    onDisabledBackgroundColor: Qt.rgba(
-                                                   255 / 256,
-                                                   0, 0, 0.8)
-                    onPressColor: backgroundColor
-                    textColor: "white"
-
-                    text: qsTr("Cancel")
-                    font.pointSize: 10
-                    font.kerning: true
-
-                    radius: height / 2
+                    background: Rectangle {
+                        color: "transparent"
+                    }
 
                     onClicked: {
                         passwordDialog.reject()
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 623de9d..7df3a40 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -39,6 +39,7 @@
     property string transparentColor: "transparent"
     property string presenceGreen: "#4cd964"
     property string notificationRed: "#ff3b30"
+    property string unPresenceOrange: "orange"
     property string backgroundColor: lightGrey_
     property string backgroundDarkColor: lightGreyTab_
 
@@ -60,6 +61,12 @@
     property string buttonTintedGreyHovered: "#777"
     property string buttonTintedGreyPressed: "#777"
     property string buttonTintedGreyInactive: "#bbb"
+    property string buttonTintedBlack: "#333"
+    property string buttonTintedBlackHovered: "#111"
+    property string buttonTintedBlackPressed: "#000"
+    property string buttonTintedRed: "red"
+    property string buttonTintedRedHovered: "#c00"
+    property string buttonTintedRedPressed: "#b00"
 
     property string selectionBlue: "#109ede"
     property string selectionGreen: "#21be2b"
@@ -91,7 +98,7 @@
     property int menuFontSize: 12
 
     property int maximumWidthSettingsView: 800
-    property int preferredButtonWidth: 200
+    property int preferredFieldWidth: 216
     property int preferredFieldHeight: 32
     property int preferredMarginSize: 16
 
diff --git a/src/mainview/MainView.qml b/src/mainview/MainView.qml
index 48b3e1e..932eda1 100644
--- a/src/mainview/MainView.qml
+++ b/src/mainview/MainView.qml
@@ -219,7 +219,7 @@
             callStackView.responsibleConvUid = convUid
             callStackView.updateCorrspondingUI()
 
-            mainViewWindowSidePanel.needToChangeToAccount(accountId, index)
+            mainViewWindowSidePanel.refreshAccountComboBox(index)
             ConversationsAdapter.selectConversation(accountId, convUid)
 
             MessagesAdapter.setupChatView(convUid)
@@ -549,8 +549,7 @@
         height: mainViewWindow.minimumHeight
 
         onSettingsViewWindowNeedToShowMainViewWindow: {
-            mainViewWindowSidePanel.refreshAccountComboBox(
-                        accountDeleted ? 0 : -1)
+            mainViewWindowSidePanel.refreshAccountComboBox(0)
             toggleSettingsView()
         }
 
diff --git a/src/mainview/components/AccountComboBox.qml b/src/mainview/components/AccountComboBox.qml
index 0fd3fa8..3580951 100644
--- a/src/mainview/components/AccountComboBox.qml
+++ b/src/mainview/components/AccountComboBox.qml
@@ -31,8 +31,6 @@
     signal newAccountButtonClicked
     signal settingBtnClicked
 
-    currentIndex: 0
-
     function backToWelcomePage() {
         needToBackToWelcomePage()
     }
@@ -42,6 +40,19 @@
         accountListModel.reset()
     }
 
+    Connections {
+        target: accountListModel
+
+        function onModelReset() {
+            userImageRoot.source = "data:image/png;base64," + accountListModel.data(
+                        accountListModel.index(0, 0), 259)
+            currentAccountPresenseCycle.accountStatus =
+                    accountListModel.data(accountListModel.index(0, 0), 261)
+            textMetricsUserAliasRoot.text = accountListModel.data(accountListModel.index(0,0), 257)
+            textMetricsUsernameRoot.text = accountListModel.data(accountListModel.index(0,0), 258)
+        }
+    }
+
     Image {
         id: userImageRoot
 
@@ -55,14 +66,8 @@
         fillMode: Image.PreserveAspectFit
 
         // Base 64 format
-        source: {
-            if (currentIndex !== -1)
-                return "data:image/png;base64," + accountListModel.data(
-                            accountListModel.index(
-                                accountComboBox.currentIndex, 0), 259)
-            else
-                return source
-        }
+        source: "data:image/png;base64," + accountListModel.data(
+                            accountListModel.index(0, 0), 259)
         mipmap: true
 
         AccountPresenceCycle {
@@ -73,16 +78,7 @@
             anchors.bottom: userImageRoot.bottom
             anchors.bottomMargin: -2
 
-            // Visible when account is registered.
-            visible: {
-                if (currentIndex !== -1)
-                    return accountListModel.data(
-                                accountListModel.index(
-                                    accountComboBox.currentIndex, 0), 261)
-                            === Account.Status.REGISTERED
-                else
-                    return visible
-            }
+            accountStatus: accountListModel.data(accountListModel.index(0, 0), 261)
         }
     }
 
@@ -133,14 +129,7 @@
                     - arrowDropDown.width - qrCodeGenerateButton.width - 55
 
         // Role::Alias
-        text: {
-            if (currentIndex !== -1)
-                return accountListModel.data(accountListModel.index(
-                                                 accountComboBox.currentIndex,
-                                                 0), 257)
-            else
-                return text
-        }
+        text: accountListModel.data(accountListModel.index(0,0), 257)
     }
 
     TextMetrics {
@@ -154,14 +143,7 @@
 
 
         // Role::Username
-        text: {
-            if (currentIndex !== -1)
-                return accountListModel.data(accountListModel.index(
-                                                 accountComboBox.currentIndex,
-                                                 0), 258)
-            else
-                return text
-        }
+        text: accountListModel.data(accountListModel.index(0,0), 258)
     }
 
     HoverableButton {
diff --git a/src/mainview/components/AccountComboBoxPopup.qml b/src/mainview/components/AccountComboBoxPopup.qml
index 813cb8e..f10b4f5 100644
--- a/src/mainview/components/AccountComboBoxPopup.qml
+++ b/src/mainview/components/AccountComboBoxPopup.qml
@@ -89,12 +89,7 @@
                     anchors.bottom: userImage.bottom
                     anchors.bottomMargin: -2
 
-                    // Visible when account is registered.
-                    visible: {
-                        return accountListModel.data(
-                                    accountListModel.index(index, 0), 261)
-                                === Account.Status.REGISTERED
-                    }
+                    accountStatus: Status
                 }
             }
 
diff --git a/src/mainview/components/AccountPresenceCycle.qml b/src/mainview/components/AccountPresenceCycle.qml
index 9eb4458..7883677 100644
--- a/src/mainview/components/AccountPresenceCycle.qml
+++ b/src/mainview/components/AccountPresenceCycle.qml
@@ -23,6 +23,8 @@
 Rectangle {
     id: root
 
+    property int accountStatus: 5
+
     width: 12
     height: 12
 
@@ -35,7 +37,13 @@
         height: 10
 
         radius: 30
-        color: JamiTheme.presenceGreen
+        color: {
+            if (accountStatus === Account.Status.REGISTERED)
+                return JamiTheme.presenceGreen
+            else if (accountStatus === Account.Status.TRYING)
+                return JamiTheme.unPresenceOrange
+            return JamiTheme.notificationRed
+        }
     }
 
     radius: 30
diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml
index 350244e..01d13b5 100644
--- a/src/mainview/components/SidePanel.qml
+++ b/src/mainview/components/SidePanel.qml
@@ -77,30 +77,9 @@
         sidePanelTabBar.invitationTabDown = false
     }
 
-    function needToChangeToAccount(accountId, index) {
-        if (index !== -1) {
-            accountComboBox.currentIndex = index
-            ClientWrapper.accountAdaptor.accountChanged(index)
-            accountChangedUIReset()
-        }
-    }
+    function refreshAccountComboBox(index) {
+        ClientWrapper.accountAdaptor.accountChanged(index)
 
-    function refreshAccountComboBox(index = -1) {
-
-
-        /*
-         * To make sure that the ui is refreshed for accountComboBox.
-         * Note: when index in -1, it means to maintain the
-         *       current account selection.
-         */
-        var currentIndex = accountComboBox.currentIndex
-        if (accountComboBox.currentIndex === index)
-            accountComboBox.currentIndex = -1
-        accountComboBox.currentIndex = index
-        if (index !== -1)
-            ClientWrapper.accountAdaptor.accountChanged(index)
-        else
-            accountComboBox.currentIndex = currentIndex
         accountComboBox.update()
         accountChangedUIReset()
         accountComboBox.resetAccountListModel()
diff --git a/src/settingsview/SettingsView.qml b/src/settingsview/SettingsView.qml
index de66712..45b358a 100644
--- a/src/settingsview/SettingsView.qml
+++ b/src/settingsview/SettingsView.qml
@@ -109,7 +109,7 @@
     }
 
     // slots
-    function leaveSettingsSlot(accountDeleted = false, showMainView = true){
+    function leaveSettingsSlot(showMainView){
         avSettings.stopAudioMeter()
         avSettings.stopPreviewing()
         if(!settingsViewRect.isSIP){
@@ -118,7 +118,7 @@
             currentSIPAccountSettingsScrollWidget.stopBooth()
         }
         if (showMainView)
-            settingsViewWindowNeedToShowMainViewWindow(accountDeleted)
+            settingsViewWindowNeedToShowMainViewWindow()
         else
             settingsViewWindowNeedToShowNewWizardWindow()
     }
@@ -142,7 +142,7 @@
     /*
      * signal to redirect the page to main view
      */
-    signal settingsViewWindowNeedToShowMainViewWindow(bool accountDeleted)
+    signal settingsViewWindowNeedToShowMainViewWindow()
     signal settingsViewWindowNeedToShowNewWizardWindow
 
     signal settingsBackArrowClicked
@@ -200,7 +200,7 @@
                 }
 
                 onNavigateToNewWizardView: {
-                    leaveSettingsSlot(true, false)
+                    leaveSettingsSlot(false)
                 }
             }
 
@@ -213,7 +213,7 @@
                 }
 
                 onNavigateToNewWizardView: {
-                    leaveSettingsSlot(true, false)
+                    leaveSettingsSlot(false)
                 }
             }
 
diff --git a/src/settingsview/components/AdvancedSIPSettingsView.qml b/src/settingsview/components/AdvancedSIPSettingsView.qml
index 7c76b2d..140a408 100644
--- a/src/settingsview/components/AdvancedSIPSettingsView.qml
+++ b/src/settingsview/components/AdvancedSIPSettingsView.qml
@@ -414,7 +414,7 @@
                     fontSize: JamiTheme.settingsFontSize
                 }
 
-                HoverableRadiusButton {
+                MaterialButton {
                     id: btnRingtoneSIP
 
                     Layout.minimumWidth: preferredColumnWidth
@@ -425,11 +425,10 @@
                     Layout.preferredHeight: JamiTheme.preferredFieldHeight
                     Layout.maximumHeight: JamiTheme.preferredFieldHeight
 
-                    radius: height / 2
-
-                    icon.source: "qrc:/images/icons/round-folder-24px.svg"
-                    icon.width: 16
-                    icon.height: 16
+                    source: "qrc:/images/icons/round-folder-24px.svg"
+                    color: JamiTheme.buttonTintedGrey
+                    hoveredColor: JamiTheme.buttonTintedGreyHovered
+                    pressedColor: JamiTheme.buttonTintedGreyPressed
 
                     onClicked: {
                         ringtonePath_Dialog_SIP.open()
@@ -477,11 +476,12 @@
                 Layout.fillWidth: true
             }
 
-            InfoLineEdit {
+            MaterialLineEdit {
                 id: lineEditVoiceMailDialCode
 
                 fieldLayoutWidth: preferredColumnWidth
                 fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                padding: 8
 
                 font.pointSize: JamiTheme.settingsFontSize
                 font.kerning: true
@@ -615,7 +615,7 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                HoverableRadiusButton {
+                MaterialButton {
                     id: btnSIPCACert
 
                     Layout.minimumWidth: preferredColumnWidth
@@ -625,11 +625,10 @@
                     Layout.preferredHeight: JamiTheme.preferredFieldHeight
                     Layout.maximumHeight: JamiTheme.preferredFieldHeight
 
-                    radius: height / 2
-
-                    icon.source: "qrc:/images/icons/round-folder-24px.svg"
-                    icon.width: 16
-                    icon.height: 16
+                    source: "qrc:/images/icons/round-folder-24px.svg"
+                    color: JamiTheme.buttonTintedGrey
+                    hoveredColor: JamiTheme.buttonTintedGreyHovered
+                    pressedColor: JamiTheme.buttonTintedGreyPressed
 
                     onClicked: {
                         caCert_Dialog_SIP.open()
@@ -648,7 +647,7 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                HoverableRadiusButton {
+                MaterialButton {
                     id: btnSIPUserCert
 
                     Layout.minimumWidth: preferredColumnWidth
@@ -659,11 +658,10 @@
                     Layout.preferredHeight: JamiTheme.preferredFieldHeight
                     Layout.maximumHeight: JamiTheme.preferredFieldHeight
 
-                    radius: height / 2
-
-                    icon.source: "qrc:/images/icons/round-folder-24px.svg"
-                    icon.width: 16
-                    icon.height: 16
+                    source: "qrc:/images/icons/round-folder-24px.svg"
+                    color: JamiTheme.buttonTintedGrey
+                    hoveredColor: JamiTheme.buttonTintedGreyHovered
+                    pressedColor: JamiTheme.buttonTintedGreyPressed
 
                     onClicked: {
                         userCert_Dialog_SIP.open()
@@ -682,7 +680,7 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                HoverableRadiusButton {
+                MaterialButton {
                     id: btnSIPPrivateKey
 
                     Layout.minimumWidth: preferredColumnWidth
@@ -693,11 +691,10 @@
                     Layout.preferredHeight: JamiTheme.preferredFieldHeight
                     Layout.maximumHeight: JamiTheme.preferredFieldHeight
 
-                    radius: height / 2
-
-                    icon.source: "qrc:/images/icons/round-folder-24px.svg"
-                    icon.width: 16
-                    icon.height: 16
+                    source: "qrc:/images/icons/round-folder-24px.svg"
+                    color: JamiTheme.buttonTintedGrey
+                    hoveredColor: JamiTheme.buttonTintedGreyHovered
+                    pressedColor: JamiTheme.buttonTintedGreyPressed
 
                     onClicked: {
                         privateKey_Dialog_SIP.open()
@@ -718,11 +715,12 @@
                 }
 
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: lineEditSIPCertPassword
 
                     fieldLayoutWidth: preferredColumnWidth
                     fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                    padding: 8
 
                     font.pointSize: JamiTheme.settingsFontSize
                     font.kerning: true
@@ -851,11 +849,12 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: outgoingTLSServerNameLineEdit
 
                     fieldLayoutWidth: preferredColumnWidth
                     fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                    padding: 8
 
                     font.pointSize: JamiTheme.settingsFontSize
                     font.kerning: true
@@ -1056,11 +1055,12 @@
                 maxWidth: preferredColumnWidth
             }
 
-            InfoLineEdit {
+            MaterialLineEdit {
                 id: lineEditTurnAddressSIP
 
                 fieldLayoutWidth: preferredColumnWidth
                 fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                padding: 8
 
                 font.pointSize: JamiTheme.settingsFontSize
                 font.kerning: true
@@ -1085,11 +1085,12 @@
                 maxWidth: preferredColumnWidth
             }
 
-            InfoLineEdit {
+            MaterialLineEdit {
                 id: lineEditTurnUsernameSIP
 
                 fieldLayoutWidth: preferredColumnWidth
                 fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                padding: 8
 
                 font.pointSize: JamiTheme.settingsFontSize
                 font.kerning: true
@@ -1113,11 +1114,12 @@
                 maxWidth: preferredColumnWidth
             }
 
-            InfoLineEdit {
+            MaterialLineEdit {
                 id: lineEditTurnPsswdSIP
 
                 fieldLayoutWidth: preferredColumnWidth
                 fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                padding: 8
 
                 font.pointSize: JamiTheme.settingsFontSize
                 font.kerning: true
@@ -1144,11 +1146,12 @@
                 maxWidth: preferredColumnWidth
             }
 
-            InfoLineEdit {
+            MaterialLineEdit {
                 id: lineEditTurnRealmSIP
 
                 fieldLayoutWidth: preferredColumnWidth
                 fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                padding: 8
 
                 font.pointSize: JamiTheme.settingsFontSize
                 font.kerning: true
@@ -1188,11 +1191,12 @@
                 maxWidth: preferredColumnWidth
             }
 
-            InfoLineEdit {
+            MaterialLineEdit {
                 id: lineEditSTUNAddressSIP
 
                 fieldLayoutWidth: preferredColumnWidth
                 fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                padding: 8
 
                 font.pointSize: JamiTheme.settingsFontSize
                 font.kerning: true
@@ -1271,11 +1275,12 @@
                 maxWidth: preferredColumnWidth
             }
 
-            InfoLineEdit {
+            MaterialLineEdit {
                 id: lineEditSIPCustomAddress
 
                 fieldLayoutWidth: preferredColumnWidth
                 fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                padding: 8
 
                 font.pointSize: JamiTheme.settingsFontSize
                 font.kerning: true
diff --git a/src/settingsview/components/AdvancedSettingsView.qml b/src/settingsview/components/AdvancedSettingsView.qml
index fd5773b..8ea60f8 100644
--- a/src/settingsview/components/AdvancedSettingsView.qml
+++ b/src/settingsview/components/AdvancedSettingsView.qml
@@ -362,7 +362,7 @@
                     fontSize: JamiTheme.settingsFontSize
                 }
 
-                HoverableRadiusButton {
+                MaterialButton {
                     id: btnRingtone
 
                     Layout.minimumWidth: preferredColumnWidth
@@ -372,11 +372,10 @@
                     Layout.preferredHeight: JamiTheme.preferredFieldHeight
                     Layout.maximumHeight: JamiTheme.preferredFieldHeight
 
-                    radius: height / 2
-
-                    icon.source: "qrc:/images/icons/round-folder-24px.svg"
-                    icon.width: 16
-                    icon.height: 16
+                    source: "qrc:/images/icons/round-folder-24px.svg"
+                    color: JamiTheme.buttonTintedGrey
+                    hoveredColor: JamiTheme.buttonTintedGreyHovered
+                    pressedColor: JamiTheme.buttonTintedGreyPressed
 
                     onClicked: {
                         ringtonePath_Dialog.open()
@@ -433,11 +432,12 @@
                 Layout.fillWidth: true
             }
 
-            InfoLineEdit {
+            MaterialLineEdit {
                 id: lineEditNameServer
 
                 fieldLayoutWidth: preferredColumnWidth
                 fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                padding: 8
 
                 font.pointSize: JamiTheme.settingsFontSize
                 font.kerning: true
@@ -497,11 +497,12 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: lineEditProxy
 
                     fieldLayoutWidth: preferredColumnWidth
                     fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                    padding: 8
 
                     font.pointSize: JamiTheme.settingsFontSize
                     font.kerning: true
@@ -534,11 +535,12 @@
                     Layout.fillWidth: true
                 }
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: lineEditBootstrap
 
                     fieldLayoutWidth: preferredColumnWidth
                     fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                    padding: 8
 
                     font.pointSize: JamiTheme.settingsFontSize
                     font.kerning: true
@@ -593,7 +595,7 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                HoverableRadiusButton {
+                MaterialButton {
                     id: btnCACert
 
                     Layout.minimumWidth: preferredColumnWidth
@@ -604,11 +606,10 @@
                     Layout.preferredHeight: JamiTheme.preferredFieldHeight
                     Layout.maximumHeight: JamiTheme.preferredFieldHeight
 
-                    radius: height / 2
-
-                    icon.source: "qrc:/images/icons/round-folder-24px.svg"
-                    icon.width: 16
-                    icon.height: 16
+                    source: "qrc:/images/icons/round-folder-24px.svg"
+                    color: JamiTheme.buttonTintedGrey
+                    hoveredColor: JamiTheme.buttonTintedGreyHovered
+                    pressedColor: JamiTheme.buttonTintedGreyPressed
 
                     onClicked: {
                         caCert_Dialog.open()
@@ -627,7 +628,7 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                HoverableRadiusButton {
+                MaterialButton {
                     id: btnUserCert
 
                     Layout.minimumWidth: preferredColumnWidth
@@ -638,11 +639,10 @@
                     Layout.preferredHeight: JamiTheme.preferredFieldHeight
                     Layout.maximumHeight: JamiTheme.preferredFieldHeight
 
-                    radius: height / 2
-
-                    icon.source: "qrc:/images/icons/round-folder-24px.svg"
-                    icon.width: 16
-                    icon.height: 16
+                    source: "qrc:/images/icons/round-folder-24px.svg"
+                    color: JamiTheme.buttonTintedGrey
+                    hoveredColor: JamiTheme.buttonTintedGreyHovered
+                    pressedColor: JamiTheme.buttonTintedGreyPressed
 
                     onClicked: {
                         userCert_Dialog.open()
@@ -661,13 +661,9 @@
                     maxWidth: preferredColumnWidth
                 }
 
-
-
-                HoverableRadiusButton {
+                MaterialButton {
                     id: btnPrivateKey
 
-                    radius: height / 2
-
                     Layout.minimumWidth: preferredColumnWidth
                     Layout.preferredWidth: preferredColumnWidth
                     Layout.maximumWidth: preferredColumnWidth
@@ -676,9 +672,10 @@
                     Layout.preferredHeight: JamiTheme.preferredFieldHeight
                     Layout.maximumHeight: JamiTheme.preferredFieldHeight
 
-                    icon.source: "qrc:/images/icons/round-folder-24px.svg"
-                    icon.width: 16
-                    icon.height: 16
+                    source: "qrc:/images/icons/round-folder-24px.svg"
+                    color: JamiTheme.buttonTintedGrey
+                    hoveredColor: JamiTheme.buttonTintedGreyHovered
+                    pressedColor: JamiTheme.buttonTintedGreyPressed
 
                     onClicked: {
                         privateKey_Dialog.open()
@@ -698,11 +695,12 @@
                 }
 
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: lineEditCertPassword
 
                     fieldLayoutWidth: preferredColumnWidth
                     fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                    padding: 8
 
                     font.pointSize: JamiTheme.settingsFontSize
                     font.kerning: true
@@ -797,10 +795,11 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: lineEditTurnAddress
                     fieldLayoutWidth: preferredColumnWidth
                     fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                    padding: 8
 
                     font.pointSize: JamiTheme.settingsFontSize
                     font.kerning: true
@@ -829,11 +828,12 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: lineEditTurnUsername
 
                     fieldLayoutWidth: preferredColumnWidth
                     fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                    padding: 8
 
                     font.pointSize: JamiTheme.settingsFontSize
                     font.kerning: true
@@ -861,12 +861,13 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: lineEditTurnPassword
                     layer.mipmap: false
 
                     fieldLayoutWidth: preferredColumnWidth
                     fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                    padding: 8
 
                     font.pointSize: JamiTheme.settingsFontSize
                     font.kerning: true
@@ -913,11 +914,12 @@
                     maxWidth: preferredColumnWidth
                 }
 
-                InfoLineEdit {
+                MaterialLineEdit {
                     id: lineEditSTUNAddress
 
                     fieldLayoutWidth: preferredColumnWidth
                     fieldLayoutHeight: JamiTheme.preferredFieldHeight
+                    padding: 8
 
                     font.pointSize: JamiTheme.settingsFontSize
                     font.kerning: true
diff --git a/src/settingsview/components/AudioCodecDelegate.qml b/src/settingsview/components/AudioCodecDelegate.qml
index 9f80a2e..1d07bfc 100644
--- a/src/settingsview/components/AudioCodecDelegate.qml
+++ b/src/settingsview/components/AudioCodecDelegate.qml
@@ -35,7 +35,7 @@
 
     signal audioCodecStateChange(string idToSet , bool isToBeEnabled)
 
-    property int checkBoxWidth: 10
+    property int checkBoxWidth: 24
 
     highlighted: ListView.isCurrentItem
 
@@ -60,13 +60,15 @@
             tristate: false
             checkState: isEnabled ? Qt.Checked : Qt.Unchecked
 
-            indicator.implicitWidth: checkBoxWidth
-            indicator.implicitHeight:checkBoxWidth
-
-            indicator.layer.textureSize.width: checkBoxWidth
-            indicator.layer.textureSize.height: checkBoxWidth
-
             text: ""
+            indicator: Image {
+                anchors.centerIn: parent
+                width: checkBoxWidth
+                height: checkBoxWidth
+                source: checkBoxIsEnabled.checked ?
+                    "qrc:/images/icons/check_box-24px.svg" :
+                    "qrc:/images/icons/check_box_outline_blank-24px.svg"
+            }
 
             nextCheckState: function() {
                     var result
diff --git a/src/settingsview/components/CurrentAccountSettingsScrollPage.qml b/src/settingsview/components/CurrentAccountSettingsScrollPage.qml
index 3a08cbf..a8edcbe 100644
--- a/src/settingsview/components/CurrentAccountSettingsScrollPage.qml
+++ b/src/settingsview/components/CurrentAccountSettingsScrollPage.qml
@@ -56,26 +56,6 @@
         refreshVariable--
     }
 
-
-    Connections {
-        id: btnRegisterNameClickConnection
-        target: btnRegisterName
-
-        enabled: {
-            refreshVariable
-            switch (regNameUi) {
-            case CurrentAccountSettingsScrollPage.FREE:
-                return true
-            default:
-                return false
-            }
-        }
-
-        function onClicked() {
-            slotRegisterName()
-        }
-    }
-
     function updateAccountInfoDisplayed() {
         setAvatar()
 
@@ -529,6 +509,7 @@
                 ToggleSwitch {
                     id: accountEnableCheckBox
 
+                    Layout.fillWidth: true
                     Layout.topMargin: JamiTheme.preferredMarginSize
                     Layout.leftMargin: JamiTheme.preferredMarginSize
 
@@ -546,7 +527,6 @@
                 ColumnLayout {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    Layout.leftMargin: JamiTheme.preferredMarginSize
                     spacing: 8
 
                     Label {
@@ -555,6 +535,7 @@
                         Layout.maximumHeight: JamiTheme.preferredFieldHeight
                         Layout.preferredHeight: JamiTheme.preferredFieldHeight
                         Layout.minimumHeight: JamiTheme.preferredFieldHeight
+                        Layout.leftMargin: JamiTheme.preferredMarginSize
 
                         text: qsTr("Profile")
                         font.pointSize: JamiTheme.headerFontSize
@@ -588,10 +569,10 @@
                         }
                     }
 
-                    InfoLineEdit {
+                    MaterialLineEdit {
                         id: displayNameLineEdit
 
-                        Layout.maximumWidth: JamiTheme.preferredButtonWidth
+                        Layout.maximumWidth: JamiTheme.preferredFieldWidth
                         Layout.minimumHeight: JamiTheme.preferredFieldHeight
                         Layout.preferredHeight: JamiTheme.preferredFieldHeight
                         Layout.maximumHeight: JamiTheme.preferredFieldHeight
@@ -603,6 +584,7 @@
 
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
+                        padding: 8
 
                         onEditingFinished: {
                             ClientWrapper.accountAdaptor.setCurrAccDisplayName(
@@ -688,7 +670,7 @@
                                 id: currentRingIDText
 
                                 elide: Text.ElideRight
-                                elideWidth: accountViewRect.width - idLabel.width -JamiTheme.preferredMarginSize*3
+                                elideWidth: accountViewRect.width - idLabel.width -JamiTheme.preferredMarginSize*4
 
                                 text: { refreshVariable
                                     return ClientWrapper.settingsAdaptor.getCurrentAccount_Profile_Info_Uri()
@@ -714,10 +696,10 @@
 
                             eText: qsTr("Registered name")
                             fontSize: JamiTheme.settingsFontSize
-                            maxWidth: 160
+                            maxWidth: preferredColumnWidth
                         }
 
-                        TextField {
+                        MaterialLineEdit {
                             id: currentRegisteredID
                             Layout.minimumWidth: preferredColumnWidth
                             Layout.preferredWidth: preferredColumnWidth
@@ -727,7 +709,8 @@
                             Layout.maximumHeight: JamiTheme.preferredFieldHeight
 
                             placeholderText: { refreshVariable
-                                               var result = registeredIdNeedsSet ? qsTr("Type here to register a username") : ""
+                                               var result = registeredIdNeedsSet ?
+                                                   qsTr("Type here to register a username") : ""
                                                return result}
 
                             text: {
@@ -747,24 +730,28 @@
                             font.bold: { refreshVariable
                                 return !registeredIdNeedsSet}
 
-                            horizontalAlignment: Text.AlignLeft
+                            horizontalAlignment: registeredIdNeedsSet ?
+                                                Text.AlignLeft :
+                                                Text.AlignRight
                             verticalAlignment: Text.AlignVCenter
+                            padding: 8
 
-                            background: Rectangle {
-                                anchors.fill: parent
-                                radius: {refreshVariable
-                                         var result = registeredIdNeedsSet ? height / 2 : 0
-                                         return result}
-                                border.color: "transparent"
-                                border.width: {refreshVariable
-                                               var result = registeredIdNeedsSet ? 2 : 0
-                                               return result}
-                                color: {refreshVariable
-                                        var result = registeredIdNeedsSet ? Qt.rgba(
-                                                                  240 / 256, 240 / 256,
-                                                                  240 / 256,
-                                                                  1.0) : "transparent"
-                                        return result}
+                            borderColorMode: {
+                                switch (regNameUi) {
+                                case CurrentAccountSettingsScrollPage.INVALIDFORM:
+                                case CurrentAccountSettingsScrollPage.TAKEN:
+                                    return InfoLineEdit.ERROR
+                                case CurrentAccountSettingsScrollPage.FREE:
+                                    return InfoLineEdit.RIGHT
+                                case CurrentAccountSettingsScrollPage.BLANK:
+                                case CurrentAccountSettingsScrollPage.SEARCHING:
+                                default:
+                                    return InfoLineEdit.NORMAL
+                                }
+                            }
+
+                            onImageClicked: {
+                                slotRegisterName()
                             }
 
                             onTextEdited: {
@@ -776,94 +763,6 @@
                             }
                         }
                     }
-
-                    RowLayout {
-                        Layout.fillWidth: true
-                        Layout.alignment: Qt.AlignRight
-                        visible:{refreshVariable
-                                 var result = registeredIdNeedsSet
-                                 && (regNameUi
-                                     !== CurrentAccountSettingsScrollPage.BLANK)
-                                    return result}
-
-                        LookupStatusLabel {
-                            id: lookupStatusLabel
-                            Layout.fillWidth: true
-
-
-
-                            MouseArea {
-                                id: lookupStatusLabelArea
-                                anchors.fill: parent
-                                property bool isHovering: false
-
-                                onEntered: isHovering = true
-                                onExited: isHovering = false
-
-                                hoverEnabled: true
-                            }
-
-                            ToolTip.visible: lookupStatusLabelArea.isHovering
-                            ToolTip.text: {
-                                switch (regNameUi) {
-                                case CurrentAccountSettingsScrollPage.BLANK:
-                                    return qsTr("")
-                                case CurrentAccountSettingsScrollPage.INVALIDFORM:
-                                    return qsTr("A registered name should not have any spaces and must be at least three letters long")
-                                case CurrentAccountSettingsScrollPage.TAKEN:
-                                    return qsTr("This name is already taken")
-                                case CurrentAccountSettingsScrollPage.FREE:
-                                    return qsTr("Register this name")
-                                case CurrentAccountSettingsScrollPage.SEARCHING:
-                                    return qsTr("")
-                                default:
-                                    return qsTr("")
-                                }
-                            }
-
-                            lookupStatusState: {
-                                switch (regNameUi) {
-                                case CurrentAccountSettingsScrollPage.BLANK:
-                                    return "Blank"
-                                case CurrentAccountSettingsScrollPage.INVALIDFORM:
-                                    return "Invalid"
-                                case CurrentAccountSettingsScrollPage.TAKEN:
-                                    return "Taken"
-                                case CurrentAccountSettingsScrollPage.FREE:
-                                    return "Free"
-                                case CurrentAccountSettingsScrollPage.SEARCHING:
-                                    return "Searching"
-                                default:
-                                    return "Blank"
-                                }
-                            }
-                        }
-
-                        HoverableButtonTextItem {
-                            id: btnRegisterName
-
-                            visible: {refreshVariable
-                                        var result = registeredIdNeedsSet
-                                     && (regNameUi
-                                         === CurrentAccountSettingsScrollPage.FREE)
-                                        return result}
-
-                            Layout.minimumWidth: preferredColumnWidth
-                            Layout.preferredWidth: preferredColumnWidth
-                            Layout.maximumWidth: preferredColumnWidth
-                            Layout.minimumHeight: JamiTheme.preferredFieldHeight
-                            Layout.preferredHeight: JamiTheme.preferredFieldHeight
-                            Layout.maximumHeight: JamiTheme.preferredFieldHeight
-
-                            text: qsTr("Register")
-                            font.pointSize: JamiTheme.buttonFontSize
-                            font.kerning: true
-
-                            toolTipText: qsTr("Register the name as typed")
-
-                            radius: height / 2
-                        }
-                    }
                 }
 
                 /*
@@ -872,87 +771,84 @@
                 ColumnLayout {
                     Layout.fillWidth: true
                     Layout.alignment: Qt.AlignHCenter
-                    Layout.leftMargin: JamiTheme.preferredMarginSize
                     spacing: 8
 
-                    HoverableButtonTextItem {
+                    MaterialButton {
                         id: passwdPushButton
-
                         visible: ClientWrapper.settingsAdaptor.getAccountConfig_Manageruri() === ""
 
-                        Layout.alignment: Qt.AlignHCenter
-                        Layout.minimumWidth: JamiTheme.preferredButtonWidth
-                        Layout.preferredWidth: JamiTheme.preferredButtonWidth
-                        Layout.maximumWidth: JamiTheme.preferredButtonWidth
-                        Layout.minimumHeight: JamiTheme.preferredFieldHeight
+                        color: JamiTheme.buttonTintedBlack
+                        hoveredColor: JamiTheme.buttonTintedBlackHovered
+                        pressedColor: JamiTheme.buttonTintedBlackPressed
+                        outlined: true
+
+                        Layout.minimumHeight:  JamiTheme.preferredFieldHeight
                         Layout.preferredHeight: JamiTheme.preferredFieldHeight
                         Layout.maximumHeight: JamiTheme.preferredFieldHeight
+                        Layout.minimumWidth:  JamiTheme.preferredFieldWidth
+                        Layout.preferredWidth: JamiTheme.preferredFieldWidth
+                        Layout.maximumWidth: JamiTheme.preferredFieldWidth
+                        Layout.alignment: Qt.AlignHCenter
 
-                        text: ClientWrapper.accountAdaptor.hasPassword() ? qsTr("Change Password") : qsTr("Set Password")
+                        toolTipText: ClientWrapper.accountAdaptor.hasPassword() ?
+                                    qsTr("Change the current password") :
+                                    qsTr("Currently no password, press this button to set a password")
+                        text: ClientWrapper.accountAdaptor.hasPassword() ? qsTr("Change Password") :
+                                                                           qsTr("Set Password")
 
-                        toolTipText: ClientWrapper.accountAdaptor.hasPassword() ? qsTr("Change the current password") : qsTr("Currently no password, press this button to set a password")
-                        font.pointSize: JamiTheme.textFontSize
-                        font.kerning: true
-
-                        radius: height / 2
+                        source: "qrc:/images/icons/round-edit-24px.svg"
 
                         onClicked: {
                             passwordClicked()
                         }
                     }
 
-                    HoverableButtonTextItem {
+                    MaterialButton {
                         id: btnExportAccount
-
                         visible: ClientWrapper.settingsAdaptor.getAccountConfig_Manageruri() === ""
 
-                        Layout.alignment: Qt.AlignHCenter
-                        Layout.minimumWidth: JamiTheme.preferredButtonWidth
-                        Layout.preferredWidth: JamiTheme.preferredButtonWidth
-                        Layout.maximumWidth: JamiTheme.preferredButtonWidth
-                        Layout.minimumHeight: JamiTheme.preferredFieldHeight
+                        color: JamiTheme.buttonTintedBlack
+                        hoveredColor: JamiTheme.buttonTintedBlackHovered
+                        pressedColor: JamiTheme.buttonTintedBlackPressed
+                        outlined: true
+
+                        Layout.minimumHeight:  JamiTheme.preferredFieldHeight
                         Layout.preferredHeight: JamiTheme.preferredFieldHeight
                         Layout.maximumHeight: JamiTheme.preferredFieldHeight
+                        Layout.minimumWidth:  JamiTheme.preferredFieldWidth
+                        Layout.preferredWidth: JamiTheme.preferredFieldWidth
+                        Layout.maximumWidth: JamiTheme.preferredFieldWidth
+                        Layout.alignment: Qt.AlignHCenter
 
                         toolTipText: qsTr("Press this button to export account to a .gz file")
-
                         text: qsTr("Export Account")
-                        font.pointSize: JamiTheme.textFontSize
-                        font.kerning: true
 
-                        radius: height / 2
+                        source: "qrc:/images/icons/round-save_alt-24px.svg"
 
                         onClicked: {
                             exportAccountSlot()
                         }
                     }
 
-                   HoverableButtonTextItem {
-                        id: btnDeletAccount
+                    MaterialButton {
+                        id: btnDeleteAccount
 
-                        backgroundColor: "red"
-                        onEnterColor: Qt.rgba(150 / 256, 0, 0, 0.7)
-                        onDisabledBackgroundColor: Qt.rgba(
-                                                       255 / 256,
-                                                       0, 0, 0.8)
-                        onPressColor: backgroundColor
-                        textColor: "white"
+                        color: JamiTheme.buttonTintedRed
+                        hoveredColor: JamiTheme.buttonTintedRedHovered
+                        pressedColor: JamiTheme.buttonTintedRedPressed
 
-                        Layout.alignment: Qt.AlignHCenter
-                        Layout.minimumWidth: JamiTheme.preferredButtonWidth
-                        Layout.preferredWidth: JamiTheme.preferredButtonWidth
-                        Layout.maximumWidth: JamiTheme.preferredButtonWidth
-                        Layout.minimumHeight: JamiTheme.preferredFieldHeight
+                        Layout.minimumHeight:  JamiTheme.preferredFieldHeight
                         Layout.preferredHeight: JamiTheme.preferredFieldHeight
                         Layout.maximumHeight: JamiTheme.preferredFieldHeight
+                        Layout.minimumWidth:  JamiTheme.preferredFieldWidth
+                        Layout.preferredWidth: JamiTheme.preferredFieldWidth
+                        Layout.maximumWidth: JamiTheme.preferredFieldWidth
+                        Layout.alignment: Qt.AlignHCenter
 
                         toolTipText: qsTr("Press this button to delete this account")
-
                         text: qsTr("Delete Account")
-                        font.pointSize: JamiTheme.textFontSize
-                        font.kerning: true
 
-                        radius: height / 2
+                        source: "qrc:/images/icons/delete_forever-24px.svg"
 
                         onClicked: {
                             delAccountSlot()
@@ -1013,25 +909,29 @@
                             }
                         }
 
-                        HoverableButtonTextItem {
+
+                        MaterialButton {
                             id: linkDevPushButton
 
                             visible: ClientWrapper.settingsAdaptor.getAccountConfig_Manageruri() === ""
 
-                            Layout.maximumWidth: JamiTheme.preferredButtonWidth
-                            Layout.preferredWidth: JamiTheme.preferredButtonWidth
-                            Layout.minimumWidth: JamiTheme.preferredButtonWidth
-
-                            Layout.maximumHeight: JamiTheme.preferredFieldHeight
+                            Layout.minimumHeight:  JamiTheme.preferredFieldHeight
                             Layout.preferredHeight: JamiTheme.preferredFieldHeight
-                            Layout.minimumHeight: JamiTheme.preferredFieldHeight
-                            Layout.alignment: Qt.AlignHCenter
+                            Layout.maximumHeight: JamiTheme.preferredFieldHeight
+                            Layout.minimumWidth:  JamiTheme.preferredFieldWidth
+                            Layout.preferredWidth: JamiTheme.preferredFieldWidth
+                            Layout.maximumWidth: JamiTheme.preferredFieldWidth
+                            Layout.alignment: Qt.AlignCenter
 
-                            radius: height / 2
-
+                            color: JamiTheme.buttonTintedBlack
+                            hoveredColor: JamiTheme.buttonTintedBlackHovered
+                            pressedColor: JamiTheme.buttonTintedBlackPressed
+                            outlined: true
                             toolTipText: qsTr("Press to link one more device with this account")
 
-                            text: qsTr("+ Link Another Device")
+                            source: "qrc:/images/icons/round-add-24px.svg"
+
+                            text: qsTr("Link Another Device")
                             font.pointSize: JamiTheme.textFontSize
                             font.kerning: true
 
@@ -1068,7 +968,8 @@
 
                             eText: qsTr("Banned Contacts")
                             fontSize: JamiTheme.headerFontSize
-                            maxWidth: accountViewRect.width - bannedContactsBtn.width -JamiTheme.preferredMarginSize*4
+                            maxWidth: accountViewRect.width - bannedContactsBtn.width
+                                      - JamiTheme.preferredMarginSize*4
                         }
 
                         HoverableButtonTextItem {
@@ -1088,8 +989,9 @@
 
                             toolTipText: qsTr("press to open or hide display of banned contact")
 
-                            source: bannedContactsListWidget.visible? "qrc:/images/icons/round-arrow_drop_up-24px.svg" :
-                                                                      "qrc:/images/icons/round-arrow_drop_down-24px.svg"
+                            source: bannedContactsListWidget.visible?
+                                        "qrc:/images/icons/round-arrow_drop_up-24px.svg" :
+                                        "qrc:/images/icons/round-arrow_drop_down-24px.svg"
                             onClicked: {
                                 toggleBannedContacts()
                             }
@@ -1157,7 +1059,8 @@
                         eText: qsTr("Advanced Account Settings")
 
                         fontSize: JamiTheme.headerFontSize
-                        maxWidth: accountViewRect.width - advancedAccountSettingsPButton.width -JamiTheme.preferredMarginSize*4
+                        maxWidth: accountViewRect.width - advancedAccountSettingsPButton.width
+                                  - JamiTheme.preferredMarginSize*6
                     }
 
                     HoverableButtonTextItem {
@@ -1190,7 +1093,8 @@
                             advanceSettingsView.visible = !advanceSettingsView.visible
                             if (advanceSettingsView.visible) {
                                 advanceSettingsView.updateAccountInfoDisplayedAdvance()
-                                accountScrollView.vScrollBar.position = rowAdvancedSettingsBtn.y / accountViewLayout.height
+                                accountScrollView.vScrollBar.position =
+                                        rowAdvancedSettingsBtn.y / accountViewLayout.height
                             } else {
                                 accountScrollView.vScrollBar.position = 0
                             }
diff --git a/src/settingsview/components/CurrentSIPAccountSettingScrollPage.qml b/src/settingsview/components/CurrentSIPAccountSettingScrollPage.qml
index f7f07c3..e3dc44b 100644
--- a/src/settingsview/components/CurrentSIPAccountSettingScrollPage.qml
+++ b/src/settingsview/components/CurrentSIPAccountSettingScrollPage.qml
@@ -229,10 +229,10 @@
                         }
                     }
 
-                    InfoLineEdit {
+                    MaterialLineEdit {
                         id: displaySIPNameLineEdit
 
-                        Layout.maximumWidth: JamiTheme.preferredButtonWidth
+                        Layout.maximumWidth: JamiTheme.preferredFieldWidth
                         Layout.minimumHeight: JamiTheme.preferredFieldHeight
                         Layout.preferredHeight: JamiTheme.preferredFieldHeight
                         Layout.maximumHeight: JamiTheme.preferredFieldHeight
@@ -244,6 +244,7 @@
 
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
+                        padding: 8
 
                         onEditingFinished: {
                             ClientWrapper.accountAdaptor.setCurrAccDisplayName(
@@ -294,7 +295,7 @@
                             maxWidth: preferredColumnWidth
                         }
 
-                        InfoLineEdit {
+                        MaterialLineEdit {
                             id: usernameSIP
 
                             fieldLayoutWidth: preferredColumnWidth
@@ -305,6 +306,12 @@
                             horizontalAlignment: Text.AlignLeft
                             verticalAlignment: Text.AlignVCenter
 
+                            Layout.maximumWidth: preferredColumnWidth
+                            Layout.minimumHeight: JamiTheme.preferredFieldHeight
+                            Layout.preferredHeight: JamiTheme.preferredFieldHeight
+                            Layout.maximumHeight: JamiTheme.preferredFieldHeight
+                            padding: 8
+
                             onEditingFinished: {
                                 ClientWrapper.settingsAdaptor.setAccountConfig_Username(
                                             usernameSIP.text)
@@ -323,17 +330,23 @@
                             maxWidth: preferredColumnWidth
                         }
 
-                        InfoLineEdit {
+                        MaterialLineEdit {
                             id: hostnameSIP
 
                             fieldLayoutWidth: preferredColumnWidth
 
-                            font.pointSize: JamiTheme.settingsFontSize // Albert: button?
+                            font.pointSize: JamiTheme.settingsFontSize
                             font.kerning: true
 
                             horizontalAlignment: Text.AlignLeft
                             verticalAlignment: Text.AlignVCenter
 
+                            Layout.maximumWidth: preferredColumnWidth
+                            Layout.minimumHeight: JamiTheme.preferredFieldHeight
+                            Layout.preferredHeight: JamiTheme.preferredFieldHeight
+                            Layout.maximumHeight: JamiTheme.preferredFieldHeight
+                            padding: 8
+
                             onEditingFinished: {
                                 ClientWrapper.settingsAdaptor.setAccountConfig_Hostname(
                                             hostnameSIP.text)
@@ -352,7 +365,7 @@
                             maxWidth: preferredColumnWidth
                         }
 
-                        InfoLineEdit {
+                        MaterialLineEdit {
                             id: proxySIP
 
                             fieldLayoutWidth: preferredColumnWidth
@@ -363,6 +376,12 @@
                             horizontalAlignment: Text.AlignLeft
                             verticalAlignment: Text.AlignVCenter
 
+                            Layout.maximumWidth: preferredColumnWidth
+                            Layout.minimumHeight: JamiTheme.preferredFieldHeight
+                            Layout.preferredHeight: JamiTheme.preferredFieldHeight
+                            Layout.maximumHeight: JamiTheme.preferredFieldHeight
+                            padding: 8
+
                             onEditingFinished: {
                                 ClientWrapper.settingsAdaptor.setAccountConfig_ProxyServer(
                                             proxySIP.text)
@@ -381,7 +400,7 @@
                             maxWidth: preferredColumnWidth
                         }
 
-                        InfoLineEdit {
+                        MaterialLineEdit {
                             id: passSIPlineEdit
 
                             fieldLayoutWidth: preferredColumnWidth
@@ -393,6 +412,12 @@
                             horizontalAlignment: Text.AlignLeft
                             verticalAlignment: Text.AlignVCenter
 
+                            Layout.maximumWidth: preferredColumnWidth
+                            Layout.minimumHeight: JamiTheme.preferredFieldHeight
+                            Layout.preferredHeight: JamiTheme.preferredFieldHeight
+                            Layout.maximumHeight: JamiTheme.preferredFieldHeight
+                            padding: 8
+
                             onEditingFinished: {
                                 ClientWrapper.settingsAdaptor.setAccountConfig_Password(
                                             passSIPlineEdit.text)
@@ -401,30 +426,24 @@
                     }
 
 
-                    HoverableButtonTextItem {
-                        id: btnDeletAccount
-
-                        backgroundColor: "red"
-                        onEnterColor: Qt.rgba(150 / 256, 0, 0, 0.7)
-                        onDisabledBackgroundColor: Qt.rgba(
-                                                        255 / 256,
-                                                        0, 0, 0.8)
-                        onPressColor: backgroundColor
-                        textColor: "white"
+                    MaterialButton {
+                        color: JamiTheme.buttonTintedRed
+                        hoveredColor: JamiTheme.buttonTintedRedHovered
+                        pressedColor: JamiTheme.buttonTintedRedPressed
 
                         Layout.alignment: Qt.AlignHCenter
-                        Layout.minimumWidth: JamiTheme.preferredButtonWidth
-                        Layout.preferredWidth: JamiTheme.preferredButtonWidth
-                        Layout.maximumWidth: JamiTheme.preferredButtonWidth
+
+                        Layout.minimumWidth: JamiTheme.preferredFieldWidth
+                        Layout.preferredWidth: JamiTheme.preferredFieldWidth
+                        Layout.maximumWidth: JamiTheme.preferredFieldWidth
                         Layout.minimumHeight: JamiTheme.preferredFieldHeight
                         Layout.preferredHeight: JamiTheme.preferredFieldHeight
                         Layout.maximumHeight: JamiTheme.preferredFieldHeight
 
+                        toolTipText: qsTr("Press this button to delete this account")
                         text: qsTr("Delete Account")
-                        toolTipText: qsTr("Delete this account")
-                        font.pointSize: JamiTheme.textFontSize
-                        font.kerning: true
-                        radius: height / 2
+
+                        source: "qrc:/images/icons/delete_forever-24px.svg"
 
                         onClicked: {
                             delAccountSlot()
diff --git a/src/settingsview/components/DeviceItemDelegate.qml b/src/settingsview/components/DeviceItemDelegate.qml
index b638360..64a2a5c 100644
--- a/src/settingsview/components/DeviceItemDelegate.qml
+++ b/src/settingsview/components/DeviceItemDelegate.qml
@@ -67,7 +67,6 @@
         id: layoutDeviceItemDelegate
         anchors.fill: parent
         spacing: 8
-
         Image {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
@@ -90,15 +89,16 @@
 
             RowLayout {
                 Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
+                spacing: 0
+                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
 
                 InfoLineEdit {
                     id: editDeviceName
 
-                    Layout.preferredWidth: col.width - 100
-                    Layout.maximumWidth: col.width - 100
-                    Layout.minimumWidth: col.width - 100
-                    fieldLayoutWidth: col.width - 100
+                    Layout.preferredWidth: deviceItemDelegate.width - 112
+                    Layout.maximumWidth: deviceItemDelegate.width - 112
+                    Layout.minimumWidth: deviceItemDelegate.width - 112
+                    fieldLayoutWidth: deviceItemDelegate.width - 112
 
                     Layout.minimumHeight: 24
                     Layout.preferredHeight: 24
@@ -124,43 +124,23 @@
                     id: elidedTextDeviceName
 
                     elide: Text.ElideRight
-                    elideWidth: deviceItemDelegate.width - 80
+                    elideWidth: deviceItemDelegate.width - 112
 
                     text: deviceName
                 }
-
-                Label {
-                    id: labelThisDevice
-                    Layout.fillWidth: true
-                    Layout.rightMargin: 16
-                    Layout.minimumHeight: 24
-                    Layout.preferredHeight: 24
-                    Layout.maximumHeight: 24
-
-                    Layout.alignment: Qt.AlignRight
-                    horizontalAlignment: Text.AlignRight
-                    verticalAlignment: Text.AlignVCenter
-
-                    visible: isCurrent
-
-                    font.pointSize: JamiTheme.textFontSize
-                    font.kerning: true
-                    font.italic: true
-                    color: "green"
-                    text:  qsTr("this device")
-                }
             }
 
             ElidedTextLabel {
                 id: labelDeviceId
 
                 Layout.fillWidth: true
+                Layout.leftMargin: 12
 
                 Layout.minimumHeight: 24
                 Layout.preferredHeight: 24
                 Layout.maximumHeight: 24
 
-                maxWidth: deviceItemDelegate.width - 80
+                maxWidth: deviceItemDelegate.width - 112
                 eText: deviceId === "" ? qsTr("Device Id") : deviceId
             }
 
@@ -191,7 +171,9 @@
 
             source: {
                 if(isCurrent) {
-                    var path = editable ? "qrc:/images/icons/round-edit-24px.svg" : "qrc:/images/icons/round-save_alt-24px.svg"
+                    var path = editable ?
+                        "qrc:/images/icons/round-save_alt-24px.svg" :
+                        "qrc:/images/icons/round-edit-24px.svg"
                     return path
                 } else {
                     return "qrc:/images/icons/round-remove_circle-24px.svg"
diff --git a/src/settingsview/components/GeneralSettingsPage.qml b/src/settingsview/components/GeneralSettingsPage.qml
index 8a7847a..c36148f 100644
--- a/src/settingsview/components/GeneralSettingsPage.qml
+++ b/src/settingsview/components/GeneralSettingsPage.qml
@@ -346,7 +346,7 @@
                                 maxWidth: preferredColumnWidth
                             }
 
-                            HoverableRadiusButton {
+                            MaterialButton {
                                 id: downloadButton
 
                                 Layout.maximumWidth: preferredColumnWidth
@@ -359,15 +359,12 @@
 
                                 Layout.alignment: Qt.AlignRight
 
-                                radius: height / 2
-
-                                icon.source: "qrc:/images/icons/round-folder-24px.svg"
-                                icon.height: 24
-                                icon.width: 24
-
                                 toolTipText: qsTr("Press to choose download folder path")
                                 text: downloadPath
-                                fontPointSize: JamiTheme.buttonFontSize
+                                source: "qrc:/images/icons/round-folder-24px.svg"
+                                color: JamiTheme.buttonTintedGrey
+                                hoveredColor: JamiTheme.buttonTintedGreyHovered
+                                pressedColor: JamiTheme.buttonTintedGreyPressed
 
                                 onClicked: {
                                     openDownloadFolderSlot()
@@ -516,10 +513,9 @@
                                 verticalAlignment: Text.AlignVCenter
                             }
 
-                            HoverableRadiusButton {
+                            MaterialButton {
                                 id: recordPathButton
 
-                                Layout.leftMargin: JamiTheme.preferredMarginSize
                                 Layout.maximumWidth: preferredColumnWidth
                                 Layout.preferredWidth: preferredColumnWidth
                                 Layout.minimumWidth: preferredColumnWidth
@@ -530,15 +526,12 @@
 
                                 Layout.alignment: Qt.AlignRight
 
-                                radius: height / 2
-
-                                icon.source: "qrc:/images/icons/round-folder-24px.svg"
-                                icon.height: 24
-                                icon.width: 24
-
                                 toolTipText: qsTr("Press to choose record folder path")
                                 text: recordPath
-                                fontPointSize: JamiTheme.buttonFontSize
+                                source: "qrc:/images/icons/round-folder-24px.svg"
+                                color: JamiTheme.buttonTintedGrey
+                                hoveredColor: JamiTheme.buttonTintedGreyHovered
+                                pressedColor: JamiTheme.buttonTintedGreyPressed
 
                                 onClicked: {
                                     openRecordFolderSlot()
@@ -597,9 +590,9 @@
                             id: checkUpdateButton
 
                             Layout.alignment: Qt.AlignHCenter
-                            Layout.maximumWidth: JamiTheme.preferredButtonWidth
-                            Layout.preferredWidth: JamiTheme.preferredButtonWidth
-                            Layout.minimumWidth: JamiTheme.preferredButtonWidth
+                            Layout.maximumWidth: JamiTheme.preferredFieldWidth
+                            Layout.preferredWidth: JamiTheme.preferredFieldWidth
+                            Layout.minimumWidth: JamiTheme.preferredFieldWidth
                             Layout.minimumHeight: JamiTheme.preferredFieldHeight
                             Layout.preferredHeight: JamiTheme.preferredFieldHeight
                             Layout.maximumHeight: JamiTheme.preferredFieldHeight
@@ -619,9 +612,9 @@
                             id: installBetaButton
 
                             Layout.alignment: Qt.AlignHCenter
-                            Layout.maximumWidth: JamiTheme.preferredButtonWidth
-                            Layout.preferredWidth: JamiTheme.preferredButtonWidth
-                            Layout.minimumWidth: JamiTheme.preferredButtonWidth
+                            Layout.maximumWidth: JamiTheme.preferredFieldWidth
+                            Layout.preferredWidth: JamiTheme.preferredFieldWidth
+                            Layout.minimumWidth: JamiTheme.preferredFieldWidth
                             Layout.minimumHeight: JamiTheme.preferredFieldHeight
                             Layout.preferredHeight: JamiTheme.preferredFieldHeight
                             Layout.maximumHeight: JamiTheme.preferredFieldHeight
diff --git a/src/settingsview/components/LinkDeviceDialog.qml b/src/settingsview/components/LinkDeviceDialog.qml
index c1caca1..ad891d9 100644
--- a/src/settingsview/components/LinkDeviceDialog.qml
+++ b/src/settingsview/components/LinkDeviceDialog.qml
@@ -125,7 +125,23 @@
     x: (parent.width - width) / 2
     y: (parent.height - height) / 2
 
-    title: qsTr("Link another device")
+    header : Rectangle {
+        width: parent.width
+        height: 64
+        color: "transparent"
+        Text {
+            anchors.left: parent.left
+            anchors.leftMargin: 24
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 24
+
+            text: qsTr("Link another device")
+            font.pointSize: JamiTheme.headerFontSize
+        }
+    }
+
+    height: contentItem.implicitHeight + 64 + 8
+    width: contentItem.implicitWidth + 24
 
     onClosed: {
         if(infoLabel.isSucessState){
@@ -136,7 +152,7 @@
     }
 
     contentItem: Rectangle{
-        implicitWidth: 365
+        implicitWidth: 280
         implicitHeight: 208
 
         StackLayout{
@@ -321,77 +337,25 @@
                 Layout.fillWidth: true
                 Layout.fillHeight: true
 
-                Layout.leftMargin: 11
-                Layout.rightMargin: 11
-                Layout.topMargin: 11
-                Layout.bottomMargin: 11
-
                 ColumnLayout{
                     anchors.fill: parent
-                    spacing: 7
+                    spacing: 8
 
                     Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-                    Item{
-                        Layout.alignment: Qt.AlignHCenter
 
-                        Layout.fillHeight: true
-                        Layout.minimumHeight: 40
+                    Label{
+                        Layout.alignment: Qt.AlignLeft
 
-                        Layout.maximumWidth: 20
-                        Layout.preferredWidth: 20
-                        Layout.minimumWidth: 20
-                    }
-
-                    RowLayout{
-                        Layout.fillWidth: true
-                        spacing: 0
-
+                        Layout.minimumHeight: 0
+                        Layout.preferredHeight: 30
                         Layout.maximumHeight: 30
+                        Layout.leftMargin: 16
 
-                        Item{
-                            Layout.fillWidth: true
-
-                            Layout.maximumHeight: 20
-                            Layout.preferredHeight: 20
-                            Layout.minimumHeight: 20
-                        }
-
-                        Label{
-                            Layout.alignment: Qt.AlignHCenter
-
-                            Layout.maximumWidth: 0
-                            Layout.preferredWidth: 341
-
-                            Layout.minimumHeight: 0
-                            Layout.preferredHeight: 30
-                            Layout.maximumHeight: 30
-
-                            wrapMode: Text.Wrap
-                            text: qsTr("Exporting Account")
-                            font.pointSize: 8
-                            font.kerning: true
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-                        }
-
-                        Item{
-                            Layout.fillWidth: true
-
-                            Layout.maximumHeight: 20
-                            Layout.preferredHeight: 20
-                            Layout.minimumHeight: 20
-                        }
-                    }
-
-                    Item{
-                        Layout.alignment: Qt.AlignHCenter
-
-                        Layout.fillHeight: true
-
-                        Layout.maximumWidth: 20
-                        Layout.preferredWidth: 20
-                        Layout.minimumWidth: 20
+                        wrapMode: Text.Wrap
+                        text: qsTr("Exporting Account")
+                        horizontalAlignment: Text.AlignLeft
+                        verticalAlignment: Text.AlignVCenter
                     }
 
                     RowLayout{
@@ -464,66 +428,33 @@
                 Layout.fillWidth: true
                 Layout.fillHeight: true
 
-                Layout.leftMargin: 11
-                Layout.rightMargin: 11
-                Layout.topMargin: 11
-                Layout.bottomMargin: 11
-
                 ColumnLayout{
                     anchors.fill: parent
-                    spacing: 7
+                    spacing: 8
 
                     Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
-                    Item{
-                        Layout.fillHeight: true
-
-                        Layout.maximumWidth: 20
-                        Layout.preferredWidth: 20
-                        Layout.minimumWidth: 20
-                    }
-
                     RowLayout{
-                        spacing: 7
+                        spacing: 8
 
-                        Layout.alignment: Qt.AlignHCenter
+                        Layout.alignment: Qt.AlignLeft
                         Layout.fillWidth: true
-
-                        Item{
-                            Layout.fillWidth: true
-
-                            Layout.maximumHeight: 20
-                            Layout.preferredHeight: 20
-                            Layout.minimumHeight: 20
-                        }
+                        Layout.leftMargin: 16
 
                         Label{
                             id: yourPinLabel
 
-                            Layout.alignment: Qt.AlignHCenter
+                            Layout.alignment: Qt.AlignLeft
 
                             Layout.preferredHeight: 25
 
                             wrapMode: Text.Wrap
                             text: "Your PIN is:"
-                            font.pointSize: 8
                             font.kerning: true
                             horizontalAlignment: Text.AlignHCenter
                             verticalAlignment: Text.AlignVCenter
                         }
 
-                        Item{
-                            Layout.alignment: Qt.AlignHCenter
-
-                            Layout.maximumWidth: 20
-                            Layout.preferredWidth: 20
-                            Layout.minimumWidth: 20
-
-                            Layout.maximumHeight: 20
-                            Layout.preferredHeight: 20
-                            Layout.minimumHeight: 20
-                        }
-
                         Label{
                             id: exportedPIN
 
@@ -539,112 +470,60 @@
                             verticalAlignment: Text.AlignVCenter
                         }
 
-                        Item{
-                            Layout.fillWidth: true
+                    }
 
-                            Layout.maximumHeight: 20
-                            Layout.preferredHeight: 20
-                            Layout.minimumHeight: 20
+                    Label {
+                        id: infoLabel
+
+                        property bool isSucessState: false
+                        property int borderWidth : isSucessState? 1 : 0
+                        property int borderRadius : isSucessState? 15 : 0
+                        property string backgroundColor : isSucessState? "whitesmoke" : "transparent"
+                        property string borderColor : isSucessState? "lightgray" : "transparent"
+                        color: isSucessState ? "#2b5084" : "black"
+                        padding: isSucessState ? 8 : 0
+
+                        Layout.alignment: Qt.AlignLeft
+                        Layout.leftMargin: 12
+                        Layout.preferredWidth: 280 - 32
+                        Layout.preferredHeight: 50
+
+                        wrapMode: Text.Wrap
+                        text: qsTr("This pin and the account password should be entered in your device within 10 minutes.")
+                        font.pointSize: 8
+                        font.kerning: true
+
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+
+                        background: Rectangle{
+                            id: infoLabelBackground
+
+                            anchors.fill: parent
+                            border.width: infoLabel.borderWidth
+                            border.color: infoLabel.borderColor
+                            radius: infoLabel.borderRadius
+                            color: infoLabel.backgroundColor
                         }
                     }
 
-                    RowLayout{
-                        spacing: 7
+                    RowLayout {
+                        spacing: 8
 
-                        Layout.alignment: Qt.AlignHCenter
-                        Layout.fillWidth: true
+                        width: 280
+                        Layout.alignment: Qt.AlignRight
 
-                        Item{
-                            Layout.fillWidth: true
-
-                            Layout.maximumHeight: 20
-                            Layout.preferredHeight: 20
-                            Layout.minimumHeight: 20
-                        }
-
-                        Label{
-                            id: infoLabel
-
-                            property bool isSucessState: false
-                            property int borderWidth : isSucessState? 1 : 0
-                            property int borderRadius : isSucessState? 15 : 0
-                            property string backgroundColor : isSucessState? "whitesmoke" : "transparent"
-                            property string borderColor : isSucessState? "lightgray" : "transparent"
-                            color: isSucessState ? "#2b5084" : "black"
-                            padding: isSucessState ? 8 : 0
-
-                            Layout.alignment: Qt.AlignHCenter
-                            Layout.preferredWidth: 320
-                            Layout.preferredHeight: 50
-
-                            wrapMode: Text.Wrap
-                            text: qsTr("This pin and the account password should be entered in your device within 10 minutes.")
-                            font.pointSize: 8
-                            font.kerning: true
-
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-
-                            background: Rectangle{
-                                id: infoLabelBackground
-
-                                anchors.fill: parent
-                                border.width: infoLabel.borderWidth
-                                border.color: infoLabel.borderColor
-                                radius: infoLabel.borderRadius
-                                color: infoLabel.backgroundColor
-                            }
-                        }
-
-                        Item{
-                            Layout.fillWidth: true
-
-                            Layout.maximumHeight: 20
-                            Layout.preferredHeight: 20
-                            Layout.minimumHeight: 20
-                        }
-                    }
-
-                    Item{
-                        Layout.fillHeight: true
-
-                        Layout.maximumWidth: 20
-                        Layout.preferredWidth: 20
-                        Layout.minimumWidth: 20
-                    }
-
-                    RowLayout{
-                        spacing: 7
-
-                        Layout.alignment: Qt.AlignHCenter
-                        Layout.fillWidth: true
-
-                        Item{
-                            Layout.fillWidth: true
-
-                            Layout.maximumHeight: 20
-                            Layout.preferredHeight: 20
-                            Layout.minimumHeight: 20
-                        }
-
-                        HoverableRadiusButton{
+                        Button {
                             id: btnCloseExportDialog
 
-                            Layout.alignment: Qt.AlignHCenter
+                            contentItem: Text {
+                                text: qsTr("CLOSE")
+                                color: JamiTheme.buttonTintedBlue
+                            }
 
-                            Layout.maximumWidth: 130
-                            Layout.preferredWidth: 130
-                            Layout.minimumWidth: 130
-
-                            Layout.maximumHeight: 30
-                            Layout.preferredHeight: 30
-                            Layout.minimumHeight: 30
-
-                            radius: height /2
-
-                            text: qsTr("Close")
-                            font.pointSize: 10
-                            font.kerning: true
+                            background: Rectangle {
+                                color: "transparent"
+                            }
 
                             onClicked: {
                                 if(infoLabel.isSucessState){
@@ -654,22 +533,6 @@
                                 }
                             }
                         }
-
-                        Item{
-                            Layout.fillWidth: true
-
-                            Layout.maximumHeight: 20
-                            Layout.preferredHeight: 20
-                            Layout.minimumHeight: 20
-                        }
-                    }
-
-                    Item{
-                        Layout.fillHeight: true
-
-                        Layout.maximumWidth: 20
-                        Layout.preferredWidth: 20
-                        Layout.minimumWidth: 20
                     }
                 }
             }
diff --git a/src/settingsview/components/PluginListSettingsView.qml b/src/settingsview/components/PluginListSettingsView.qml
index a71551a..9b714c3 100644
--- a/src/settingsview/components/PluginListSettingsView.qml
+++ b/src/settingsview/components/PluginListSettingsView.qml
@@ -118,20 +118,24 @@
             verticalAlignment: Text.AlignVCenter
         }
 
-        HoverableRadiusButton {
+        MaterialButton {
             id: installButton
 
-            Layout.fillWidth: true
-            Layout.preferredHeight: 30
+	    Layout.fillWidth: false
+	    color: JamiTheme.buttonTintedBlack
+            hoveredColor: JamiTheme.buttonTintedBlackHovered
+            pressedColor: JamiTheme.buttonTintedBlackPressed
+            outlined: true
+            toolTipText: qsTr("Press to add new plugins")
 
-            radius: height / 2
+            source: "qrc:/images/icons/round-add-24px.svg"
 
-            text: qsTr("+ Install plugin")
-            fontPointSize: JamiTheme.settingsFontSize
+            text: qsTr("Install Plugin")
+            font.pointSize: JamiTheme.textFontSize
             font.kerning: true
 
             onClicked: {
-                openPluginFileSlot()
+              openPluginFileSlot()
             }
         }
 
@@ -172,4 +176,3 @@
         }
     }
 }
- 
\ No newline at end of file
diff --git a/src/settingsview/components/VideoCodecDelegate.qml b/src/settingsview/components/VideoCodecDelegate.qml
index a01fd28..0bde72e 100644
--- a/src/settingsview/components/VideoCodecDelegate.qml
+++ b/src/settingsview/components/VideoCodecDelegate.qml
@@ -34,7 +34,7 @@
 
     signal videoCodecStateChange(string idToSet , bool isToBeEnabled)
 
-    property int checkBoxWidth: 10
+    property int checkBoxWidth: 24
 
     highlighted: ListView.isCurrentItem
 
@@ -58,13 +58,15 @@
             tristate: false
             checkState: isEnabled ? Qt.Checked : Qt.Unchecked
 
-            indicator.implicitWidth: checkBoxWidth
-            indicator.implicitHeight:checkBoxWidth
-
-            indicator.layer.textureSize.width: checkBoxWidth
-            indicator.layer.textureSize.height: checkBoxWidth
-
             text: ""
+            indicator: Image {
+                anchors.centerIn: parent
+                width: checkBoxWidth
+                height: checkBoxWidth
+                source: checkBoxIsEnabled.checked ?
+                    "qrc:/images/icons/check_box-24px.svg" :
+                    "qrc:/images/icons/check_box_outline_blank-24px.svg"
+            }
 
             nextCheckState: function() {
                     var result