diff --git a/images/icons/drafts-24px.svg b/images/icons/drafts-24px.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dd7c3bb965224fe570e50baf26062a75b764f359
--- /dev/null
+++ b/images/icons/drafts-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="M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13L3.74 7.84 12 3l8.26 4.84L12 13z"/></svg>
\ No newline at end of file
diff --git a/images/icons/person-24px.svg b/images/icons/person-24px.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1babbb80950feb485c9efe2d00810e9a859a894f
--- /dev/null
+++ b/images/icons/person-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="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
\ No newline at end of file
diff --git a/images/icons/person_add-24px.svg b/images/icons/person_add-24px.svg
new file mode 100644
index 0000000000000000000000000000000000000000..40736bbc7ca91e41c457e0d7adec6050415811f5
--- /dev/null
+++ b/images/icons/person_add-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="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
\ No newline at end of file
diff --git a/ressources.qrc b/ressources.qrc
index 1093bde975204a04a2b77cfc82e09b1e073094b7..a0e1547f51fe736464a825558b4e1142fab8aeb7 100644
--- a/ressources.qrc
+++ b/ressources.qrc
@@ -39,7 +39,7 @@
         <file>images/icons/ic_clear_24px.svg</file>
         <file>images/icons/ic_close_white_24dp.png</file>
         <file>images/icons/ic_content_copy.svg</file>
-        <file>images/icons/ic_delete_black_18dp_2x.png</file>        
+        <file>images/icons/ic_delete_black_18dp_2x.png</file>
         <file>images/icons/ic_done_white_24dp.png</file>
         <file>images/icons/ic_exit_full_screen_black.png</file>
         <file>images/icons/ic_folder_black_18dp_2x.png</file>
@@ -107,5 +107,8 @@
         <file>images/icons/ic_close_black_24dp.png</file>
         <file>images/icons/extension_24dp.svg</file>
         <file>images/icons/settings_backup_restore-black-18dp.svg</file>
+        <file>images/icons/person-24px.svg</file>
+        <file>images/icons/drafts-24px.svg</file>
+        <file>images/icons/person_add-24px.svg</file>
     </qresource>
 </RCC>
diff --git a/src/commoncomponents/GeneralMenuItem.qml b/src/commoncomponents/GeneralMenuItem.qml
index 677c4b0e30ecb55b7a4dc816b97bdc90ff1217c2..a457f8d886a2ca47e9583e970649d77e31469b68 100644
--- a/src/commoncomponents/GeneralMenuItem.qml
+++ b/src/commoncomponents/GeneralMenuItem.qml
@@ -19,9 +19,9 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.0
 import net.jami.Models 1.0
 
-
 /*
  * General menu item.
  * Can control top, bottom, left, right border width.
@@ -33,8 +33,8 @@ MenuItem {
 
     property string itemName: ""
     property string iconSource: ""
-    property int preferredWidth: 150
-    property int preferredHeight: 30
+    property int preferredWidth: 220
+    property int preferredHeight: 48
     property int topBorderWidth: 0
     property int bottomBorderWidth: 0
     property int leftBorderWidth: 0
@@ -46,27 +46,27 @@ MenuItem {
         id: menuItemContentRect
 
         anchors.fill: parent
-
         Image {
             id: contextMenuItemImage
 
             anchors.left: menuItemContentRect.left
-            anchors.leftMargin: 5
+            anchors.leftMargin: (visible ? 24 : 0)
             anchors.verticalCenter: menuItemContentRect.verticalCenter
 
-            width: 25
-            height: 25
+            width: (visible ? 24 : 0)
+            height: (visible ? 24 : 0)
 
             visible: false
             fillMode: Image.PreserveAspectFit
             mipmap: true
+            opacity: 0.7
         }
 
         Text {
             id: contextMenuItemText
 
             anchors.left: contextMenuItemImage.right
-            anchors.leftMargin: 5
+            anchors.leftMargin: 20
             anchors.verticalCenter: menuItemContentRect.verticalCenter
             width: textMetrics.boundingRect.width
             height: 30
@@ -74,13 +74,13 @@ MenuItem {
             TextMetrics {
                 id: textMetrics
                 font: contextMenuItemText.font
-                elide: Text.ElideMiddle
-                elideWidth: contextMenuItemImage.visible ? (preferredWidth - contextMenuItemImage.width - 5) : preferredWidth
+                elide: Text.ElideRight
+                elideWidth: contextMenuItemImage.visible ? (preferredWidth - contextMenuItemImage.width - 58) : preferredWidth - 24
                 text: itemName
             }
 
             text: textMetrics.elidedText
-            font.pointSize: JamiTheme.textFontSize - 3
+            font.pointSize: JamiTheme.textFontSize
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
         }
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 983ae0de7725538a444b689471ee20cbbb74de50..fdc376db1e52db41640a866e03f93d1bf7b42f3b 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -39,6 +39,8 @@ Item {
     property string transparentColor: "transparent"
     property string presenceGreen: "#4cd964"
     property string notificationRed: "#ff3b30"
+    property string backgroundColor: lightGrey_
+    property string backgroundDarkColor: lightGreyTab_
 
     property string screenSelectionBorderGreen: "green"
 
@@ -73,13 +75,15 @@ Item {
 
     property int splitViewHandlePreferedWidth: 4
     property int textFontSize: 9
+    property int titleFontSize: 16
+    property int menuFontSize: 12
 
 
     /*
      * Place holder text.
      */
     property string contactSearchBarPlaceHolderConversationText: qsTr("Find or start a conversation")
-    property string contactSearchBarPlaceHolderInivitionText: qsTr("Search your received invitations")
+    property string contactSearchBarPlaceHolderInivitionText: qsTr("Search your invitations")
 
     // Jami theme colors
     function rgb256(r, g, b) {
@@ -87,8 +91,10 @@ Item {
     }
 
     property color blue_: "#109ede"
+    property color blueLogo_: rgb256(0, 7, 71)
     property color lightBlue_: "#c1ebf0"
     property color lightGrey_: rgb256(242, 242, 242)
+    property color lightGreyTab_: rgb256(220, 220, 220)
     property color imGrey_: "#dedee0"
     property color imBlue_: "#cfebf5"
     property color lightBlack_: rgb256(63, 63, 63)
diff --git a/src/mainview/MainView.qml b/src/mainview/MainView.qml
index 6bf2ff5d31233ab7c3df9aac8871fcade8bf1acb..20ac177040f31256c4b97fb186866f6861bff947 100644
--- a/src/mainview/MainView.qml
+++ b/src/mainview/MainView.qml
@@ -43,6 +43,11 @@ Window {
     property int welcomePageGroupPreferedWidth: 250
     property int aboutPopUpPreferedWidth: 250
 
+    property int savedSidePanelViewMinWidth: 0
+    property int savedSidePanelViewMaxWidth: 0
+    property int savedWelcomeViewMinWidth: 0
+    property int savedWelcomeViewMaxWidth: 0
+    property bool hiddenView: false
 
     /*
      * To calculate tab bar bottom border hidden rect left margin.
@@ -184,18 +189,21 @@ Window {
             handle: Rectangle {
                 implicitWidth: JamiTheme.splitViewHandlePreferedWidth
                 implicitHeight: splitView.height
-                color: SplitHandle.pressed ? JamiTheme.pressColor : (SplitHandle.hovered ? JamiTheme.hoverColor : JamiTheme.tabbarBorderColor)
+                color:"transparent"
+                Rectangle {
+                    implicitWidth: 1
+                    implicitHeight: splitView.height
+                    color: SplitHandle.pressed ? JamiTheme.pressColor : (SplitHandle.hovered ? JamiTheme.hoverColor : JamiTheme.tabbarBorderColor)
+                }
             }
 
             StackView {
                 id: sidePanelViewStack
 
-                property int maximumWidth: sidePanelViewStackPreferedWidth + 100
-
                 initialItem: mainViewWindowSidePanel
 
+                SplitView.maximumWidth: splitView.width - sidePanelViewStackPreferedWidth
                 SplitView.minimumWidth: sidePanelViewStackPreferedWidth
-                SplitView.maximumWidth: maximumWidth
                 SplitView.fillHeight: true
 
                 clip: true
@@ -206,7 +214,8 @@ Window {
 
                 initialItem: welcomePage
 
-                SplitView.maximumWidth: splitView.width - sidePanelViewStack.width
+                SplitView.maximumWidth: hiddenView ? splitView.width : splitView.width - sidePanelViewStackPreferedWidth
+                SplitView.minimumWidth: sidePanelViewStackPreferedWidth
                 SplitView.fillHeight: true
 
                 clip: true
@@ -408,6 +417,18 @@ Window {
         }
 
         Component.onCompleted: {
+            sidePanelViewStack.SplitView.maximumWidth = Qt.binding(function() {
+                return (hiddenView ? splitView.width : splitView.width - sidePanelViewStackPreferedWidth)
+            })
+
+            recordBox.x = Qt.binding(function() {
+                var i = (welcomeViewStack.width > 1000 ? Math.round((welcomeViewStack.width-1000)*0.5) : 0)
+                return sidePanelViewStack.width + recordBox.x_offset + i
+            })
+
+            recordBox.y = Qt.binding(function() {
+                return sidePanelViewStack.height + recordBox.y_offset
+            })
 
 
             /*
@@ -427,7 +448,7 @@ Window {
                 + welcomePageGroupPreferedWidth - 5
                 && welcomeViewStack.visible) {
             welcomeViewStack.visible = false
-
+            hiddenView = true
 
             /*
              * The find callback function is called for each item in the stack.
@@ -436,17 +457,17 @@ Window {
                         function (item, index) {
                             return index > 0
                         })
+
             if (inWelcomeViewStack) {
                 recursionStackViewItemMove(welcomeViewStack, sidePanelViewStack)
             }
 
-            sidePanelViewStack.maximumWidth = splitView.width
-
             mainViewWindow.update()
         } else if (mainViewWindow.width >= sidePanelViewStackPreferedWidth
                    + welcomePageGroupPreferedWidth + 5
                    && !welcomeViewStack.visible) {
             welcomeViewStack.visible = true
+            hiddenView = false
 
             var inSidePanelViewStack = sidePanelViewStack.find(
                         function (item, index) {
@@ -456,8 +477,6 @@ Window {
                 recursionStackViewItemMove(sidePanelViewStack, welcomeViewStack)
             }
 
-            sidePanelViewStack.maximumWidth = sidePanelViewStackPreferedWidth + 100
-
             mainViewWindow.update()
         }
     }
diff --git a/src/mainview/components/AccountComboBox.qml b/src/mainview/components/AccountComboBox.qml
index 23225f783d13ce982e2d4c25ce33bdf5af5efc32..3175068579a06e84c860d0fcd5ca4cf3a856a3ff 100644
--- a/src/mainview/components/AccountComboBox.qml
+++ b/src/mainview/components/AccountComboBox.qml
@@ -64,11 +64,11 @@ ComboBox {
         id: userImageRoot
 
         anchors.left: accountComboBox.left
-        anchors.leftMargin: 5
+        anchors.leftMargin: 16
         anchors.verticalCenter: accountComboBox.verticalCenter
 
-        width: accountComboBox.height - 10
-        height: accountComboBox.height - 10
+        width: 30
+        height: 30
 
         fillMode: Image.PreserveAspectFit
 
@@ -90,12 +90,12 @@ ComboBox {
             id: presenseRect
 
             anchors.right: userImageRoot.right
-            anchors.rightMargin: 1
+            anchors.rightMargin: -2
             anchors.bottom: userImageRoot.bottom
-            anchors.bottomMargin: 2
+            anchors.bottomMargin: -2
 
-            width: 14
-            height: 14
+            width: 12
+            height: 12
 
 
             /*
@@ -123,7 +123,7 @@ ComboBox {
             }
 
             radius: 30
-            color: "white"
+            color: JamiTheme.backgroundColor
         }
     }
 
@@ -131,33 +131,45 @@ ComboBox {
         id: textUserAliasRoot
 
         anchors.left: userImageRoot.right
-        anchors.leftMargin: 10
+        anchors.leftMargin: 16
         anchors.top: rootItemBackground.top
-        anchors.topMargin: 5
+        anchors.topMargin: 16
 
         text: textMetricsUserAliasRoot.elidedText
         font.pointSize: JamiTheme.textFontSize
     }
 
+    Image {
+        anchors.left: textUserAliasRoot.right
+        anchors.verticalCenter: textUserAliasRoot.verticalCenter
+
+        width: 24
+        height: 24
+
+        fillMode: Image.PreserveAspectFit
+        mipmap: true
+        source: "qrc:/images/icons/round-arrow_drop_down-24px.svg"
+    }
+
+
     Text {
         id: textUsernameRoot
 
         anchors.left: userImageRoot.right
-        anchors.leftMargin: 10
+        anchors.leftMargin: 16
         anchors.top: textUserAliasRoot.bottom
-        anchors.topMargin: 5
 
         text: textMetricsUsernameRoot.elidedText
         font.pointSize: JamiTheme.textFontSize
-        color: JamiTheme.faddedFontColor
+        color: JamiTheme.faddedLastInteractionFontColor
     }
 
     TextMetrics {
         id: textMetricsUserAliasRoot
 
         font: textUserAliasRoot.font
-        elide: Text.ElideMiddle
-        elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - 25
+        elide: Text.ElideRight
+        elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - qrCodeGenerateButton.width - 55
 
 
         /*
@@ -177,8 +189,8 @@ ComboBox {
         id: textMetricsUsernameRoot
 
         font: textUsernameRoot.font
-        elide: Text.ElideMiddle
-        elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - 25
+        elide: Text.ElideRight
+        elideWidth: accountComboBox.width - userImageRoot.width - settingsButton.width - qrCodeGenerateButton.width - 55
 
 
         /*
@@ -194,6 +206,28 @@ ComboBox {
         }
     }
 
+
+
+    HoverableButton {
+        id: qrCodeGenerateButton
+
+        anchors.right: settingsButton.left
+        anchors.rightMargin: 10
+        anchors.verticalCenter: accountComboBox.verticalCenter
+
+        buttonImageHeight: height - 8
+        buttonImageWidth: width - 8
+        radius: height / 2
+        width: 24
+        height: 24
+
+        source: "qrc:/images/qrcode.png"
+        backgroundColor: "white"
+        onClicked: {
+            qrDialog.open()
+        }
+    }
+
     HoverableButton {
         id: settingsButton
 
@@ -203,11 +237,12 @@ ComboBox {
 
         buttonImageHeight: height - 8
         buttonImageWidth: width - 8
-        source: "qrc:/images/icons/round-settings-24px.svg"
         radius: height / 2
         width: 25
         height: 25
 
+        source: "qrc:/images/icons/round-settings-24px.svg"
+        backgroundColor: "white"
         onClicked: {
             settingBtnClicked()
         }
@@ -218,8 +253,7 @@ ComboBox {
 
         implicitWidth: accountComboBox.width
         implicitHeight: accountComboBox.height
-
-        border.width: 0
+        color: JamiTheme.backgroundColor
     }
 
     MouseArea {
@@ -231,14 +265,21 @@ ComboBox {
         propagateComposedEvents: true
 
         onPressed: {
-            if (isMouseOnSettingsButton(mouse)) {
+            if (isMouseOnButton(mouse, qrCodeGenerateButton)) {
+                qrCodeGenerateButton.backgroundColor = JamiTheme.pressColor
+                qrCodeGenerateButton.clicked()
+            }if (isMouseOnButton(mouse, settingsButton)) {
                 settingsButton.backgroundColor = JamiTheme.pressColor
                 settingsButton.clicked()
-            } else
+            } else {
                 rootItemBackground.color = JamiTheme.pressColor
+            }
         }
+
         onReleased: {
-            if (isMouseOnSettingsButton(mouse)) {
+            if (isMouseOnButton(mouse, qrCodeGenerateButton)) {
+                qrCodeGenerateButton.backgroundColor = JamiTheme.releaseColor
+            } else if (isMouseOnButton(mouse, settingsButton)) {
                 settingsButton.backgroundColor = JamiTheme.releaseColor
             } else {
                 rootItemBackground.color = JamiTheme.releaseColor
@@ -253,31 +294,28 @@ ComboBox {
             rootItemBackground.color = JamiTheme.hoverColor
         }
         onExited: {
-            rootItemBackground.color = "white"
+            rootItemBackground.color = JamiTheme.backgroundColor
         }
         onMouseXChanged: {
-
-
             /*
-             * Manually making settings button hover.
+             * Manually making button hover.
              */
-            if (isMouseOnSettingsButton(mouse)) {
-                settingsButton.backgroundColor = JamiTheme.hoverColor
-                rootItemBackground.color = "white"
-            } else {
-                settingsButton.backgroundColor = "white"
-                rootItemBackground.color = JamiTheme.hoverColor
-            }
+            qrCodeGenerateButton.backgroundColor = (isMouseOnButton(mouse, qrCodeGenerateButton)) ?
+                        JamiTheme.hoverColor : "white"
+
+            settingsButton.backgroundColor = (isMouseOnButton(mouse, settingsButton)) ?
+                        JamiTheme.hoverColor : "white"
         }
-        function isMouseOnSettingsButton(mouse) {
+
+        function isMouseOnButton(mouse, button) {
             var mousePos = mapToItem(comboBoxRootMouseArea, mouse.x, mouse.y)
-            var settingsButtonPos = mapToItem(comboBoxRootMouseArea,
-                                              settingsButton.x,
-                                              settingsButton.y)
-            if ((mousePos.x >= settingsButtonPos.x
-                 && mousePos.x <= settingsButtonPos.x + settingsButton.width)
-                    && (mousePos.y >= settingsButtonPos.y
-                        && mousePos.y <= settingsButtonPos.y + settingsButton.height))
+            var qrButtonPos = mapToItem(comboBoxRootMouseArea,
+                                              button.x,
+                                              button.y)
+            if ((mousePos.x >= qrButtonPos.x
+                 && mousePos.x <= qrButtonPos.x + button.width)
+                    && (mousePos.y >= qrButtonPos.y
+                        && mousePos.y <= qrButtonPos.y + button.height))
                 return true
             return false
         }
diff --git a/src/mainview/components/AccountComboBoxPopup.qml b/src/mainview/components/AccountComboBoxPopup.qml
index 42a17fbcb5a522cbe46e2bb9620f37d6422ee882..0d0c2844e882131f83b71af2f1e04724d0c4b8e4 100644
--- a/src/mainview/components/AccountComboBoxPopup.qml
+++ b/src/mainview/components/AccountComboBoxPopup.qml
@@ -62,7 +62,7 @@ Popup {
                 id: userImage
 
                 anchors.left: parent.left
-                anchors.leftMargin: 5
+                anchors.leftMargin: 10
                 anchors.verticalCenter: parent.verticalCenter
 
                 width: 30
@@ -85,7 +85,7 @@ Popup {
                 anchors.left: userImage.right
                 anchors.leftMargin: 10
                 anchors.top: itemCoboBackground.top
-                anchors.topMargin: 5
+                anchors.topMargin: 15
 
                 text: textMetricsUserAliasPopup.elidedText
                 font.pointSize: JamiTheme.textFontSize
@@ -97,33 +97,31 @@ Popup {
                 anchors.left: userImage.right
                 anchors.leftMargin: 10
                 anchors.top: textUserAliasPopup.bottom
-                anchors.topMargin: 5
 
                 text: textMetricsUsernamePopup.elidedText
                 font.pointSize: JamiTheme.textFontSize
-                color: JamiTheme.faddedFontColor
+                color: JamiTheme.faddedLastInteractionFontColor
             }
 
             TextMetrics {
                 id: textMetricsUserAliasPopup
-                elide: Text.ElideMiddle
+                elide: Text.ElideRight
                 elideWidth: accountComboBox.width - userImage.width - settingsButton.width - 30
                 text: Alias
             }
 
             TextMetrics {
                 id: textMetricsUsernamePopup
-                elide: Text.ElideMiddle
+                elide: Text.ElideRight
                 elideWidth: accountComboBox.width - userImage.width - settingsButton.width - 30
                 text: Username
             }
 
             background: Rectangle {
                 id: itemCoboBackground
-
+                color: JamiTheme.backgroundColor
                 implicitWidth: accountComboBox.width
                 implicitHeight: accountComboBox.height
-                border.width: 0
             }
 
             MouseArea {
@@ -142,7 +140,7 @@ Popup {
                     itemCoboBackground.color = JamiTheme.hoverColor
                 }
                 onExited: {
-                    itemCoboBackground.color = "white"
+                    itemCoboBackground.color = JamiTheme.backgroundColor
                 }
             }
         }
@@ -154,8 +152,8 @@ Popup {
             implicitHeight: accountComboBox.height
 
             text: qsTr("Add Account") + "+"
-            backgroundColor: "white"
-            onExitColor: "white"
+            backgroundColor: JamiTheme.backgroundColor
+            onExitColor: JamiTheme.backgroundColor
 
             onClicked: {
                 comboBoxPopup.close()
@@ -167,12 +165,12 @@ Popup {
     }
     background: Rectangle {
         id: accountComboBoxPopup
-
+        color: JamiTheme.backgroundColor
         CustomBorder {
             commonBorder: false
-            lBorderwidth: 0
+            lBorderwidth: 1
             rBorderwidth: 1
-            tBorderwidth: 0
+            tBorderwidth: 1
             bBorderwidth: 1
             borderColor: JamiTheme.tabbarBorderColor
         }
diff --git a/src/mainview/components/ContactSearchBar.qml b/src/mainview/components/ContactSearchBar.qml
index 896b48c7c1aefdef4bff0a568f4e10b1aaecc3ad..3a1f52f704083e2c80c5338defab94e463a3280c 100644
--- a/src/mainview/components/ContactSearchBar.qml
+++ b/src/mainview/components/ContactSearchBar.qml
@@ -19,6 +19,7 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.12
 import net.jami.Models 1.0
 
 Rectangle {
@@ -44,9 +45,8 @@ Rectangle {
         fakeFocus.forceActiveFocus()
     }
 
-    border.color: JamiTheme.pressColor
-    radius: 10
-    color: contactSearchBar.activeFocus ? "white" : JamiTheme.contactSearchBarPlaceHolderGreyBackground
+    radius: height/2
+    color: "white"
 
     FocusScope {
         id: fakeFocus
@@ -57,7 +57,7 @@ Rectangle {
 
         anchors.verticalCenter: contactSearchBarRect.verticalCenter
         anchors.left: contactSearchBarRect.left
-        anchors.leftMargin: 5
+        anchors.leftMargin: 8
 
         width: 20
         height: 20
@@ -67,6 +67,12 @@ Rectangle {
         source: "qrc:/images/icons/ic_baseline-search-24px.svg"
     }
 
+    ColorOverlay {
+        anchors.fill: searchIconImage
+        source: searchIconImage
+        color: JamiTheme.contactSearchBarPlaceHolderTextFontColor
+    }
+
     TextField {
         id: contactSearchBar
 
@@ -85,10 +91,10 @@ Rectangle {
 
             anchors.verticalCenter: contactSearchBar.verticalCenter
             anchors.left: contactSearchBar.left
-            anchors.leftMargin: 5
+            anchors.leftMargin: 10
 
             text: qsTr("Find or start a conversation")
-            font.pointSize: JamiTheme.textFontSize - 1
+            font.pointSize: JamiTheme.textFontSize
             color: JamiTheme.contactSearchBarPlaceHolderTextFontColor
             visible: !contactSearchBar.text && !contactSearchBar.activeFocus
         }
diff --git a/src/mainview/components/ConversationSmartListContextMenu.qml b/src/mainview/components/ConversationSmartListContextMenu.qml
index aece4b463a2ab9f319a255a55beda85cd633038c..26c5406f22734d38db7ea11f5ef6e2ebc1a01029 100644
--- a/src/mainview/components/ConversationSmartListContextMenu.qml
+++ b/src/mainview/components/ConversationSmartListContextMenu.qml
@@ -18,19 +18,34 @@
  */
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.12
 import net.jami.Models 1.0
 
 import "../../commoncomponents"
 
 Menu {
     id: contextMenu
-
     property string responsibleAccountId: ""
     property string responsibleConvUid: ""
 
     property int generalMenuSeparatorCount: 0
-    property int commonBorderWidth: 2
+    property int commonBorderWidth: 1
+    font.pointSize: JamiTheme.menuFontSize
+
+    function openMenu(){
+        visible = true
+        visible = false
+        visible = true
+    }
 
+    GeneralMenuSeparator {
+        preferredWidth: startVideoCallItem.preferredWidth
+        preferredHeight: 8
+        separatorColor: "transparent"
+        Component.onCompleted: {
+            generalMenuSeparatorCount++
+        }
+    }
 
     /*
      * All GeneralMenuItems should remain the same width / height.
@@ -39,7 +54,7 @@ Menu {
         id: startVideoCallItem
 
         itemName: qsTr("Start video call")
-        topBorderWidth: commonBorderWidth
+        iconSource: "qrc:/images/icons/ic_video_call_24px.svg"
         leftBorderWidth: commonBorderWidth
         rightBorderWidth: commonBorderWidth
 
@@ -55,6 +70,7 @@ Menu {
         id: startAudioCallItem
 
         itemName: qsTr("Start audio call")
+        iconSource: "qrc:/images/icons/ic_phone_24px.svg"
         leftBorderWidth: commonBorderWidth
         rightBorderWidth: commonBorderWidth
 
@@ -70,6 +86,7 @@ Menu {
         id: clearConversationItem
 
         itemName: qsTr("Clear conversation")
+        iconSource: "qrc:/images/icons/ic_clear_24px.svg"
         leftBorderWidth: commonBorderWidth
         rightBorderWidth: commonBorderWidth
 
@@ -84,6 +101,7 @@ Menu {
         id: removeContactItem
 
         itemName: qsTr("Remove contact")
+        iconSource: "qrc:/images/icons/round-remove_circle-24px.svg"
         leftBorderWidth: commonBorderWidth
         rightBorderWidth: commonBorderWidth
 
@@ -107,6 +125,7 @@ Menu {
         id: blockContactItem
 
         itemName: qsTr("Block contact")
+        iconSource: "qrc:/images/icons/ic_block_24px.svg"
         leftBorderWidth: commonBorderWidth
         rightBorderWidth: commonBorderWidth
 
@@ -130,7 +149,7 @@ Menu {
         id: profileItem
 
         itemName: qsTr("Profile")
-        bottomBorderWidth: commonBorderWidth
+        iconSource: "qrc:/images/icons/person-24px.svg"
         leftBorderWidth: commonBorderWidth
         rightBorderWidth: commonBorderWidth
 
@@ -140,6 +159,15 @@ Menu {
         }
     }
 
+    GeneralMenuSeparator {
+        preferredWidth: startVideoCallItem.preferredWidth
+        preferredHeight: 8
+        separatorColor: "transparent"
+        Component.onCompleted: {
+            generalMenuSeparatorCount++
+        }
+    }
+
     background: Rectangle {
         implicitWidth: startVideoCallItem.preferredWidth
         implicitHeight: startVideoCallItem.preferredHeight
diff --git a/src/mainview/components/ConversationSmartListUserImage.qml b/src/mainview/components/ConversationSmartListUserImage.qml
index 6419ec4e97e3fec1f4daa18749de2810ea2cedb7..6f3600b23a3fb0823bf16609ed576e181f7098b2 100644
--- a/src/mainview/components/ConversationSmartListUserImage.qml
+++ b/src/mainview/components/ConversationSmartListUserImage.qml
@@ -24,8 +24,8 @@ import net.jami.Models 1.0
 Image {
     id: userImage
 
-    width: 50
-    height: 50
+    width: 40
+    height: 40
 
     fillMode: Image.PreserveAspectFit
     source: "data:image/png;base64," + Picture
@@ -35,9 +35,9 @@ Image {
         id: presenseRect
 
         anchors.right: userImage.right
-        anchors.rightMargin: 1
+        anchors.rightMargin: -2
         anchors.bottom: userImage.bottom
-        anchors.bottomMargin: 2
+        anchors.bottomMargin: -2
 
         width: 14
         height: 14
@@ -57,16 +57,16 @@ Image {
         }
 
         radius: 30
-        color: "white"
+        color: JamiTheme.backgroundColor
     }
 
     Rectangle {
         id: unreadMessageCountRect
 
         anchors.right: userImage.right
-        anchors.rightMargin: 1
+        anchors.rightMargin: -2
         anchors.top: userImage.top
-        anchors.topMargin: 2
+        anchors.topMargin: -2
 
         width: 14
         height: 14
@@ -80,6 +80,7 @@ Image {
 
             text: UnreadMessagesCount > 9 ? "···" : UnreadMessagesCount
             color: "white"
+            font.pointSize: JamiTheme.textFontSize
         }
 
         radius: 30
diff --git a/src/mainview/components/ConversationSmartListViewItemDelegate.qml b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
index 7a766f065b387a77fabcbb7cf0ce47583e76198c..8ce018eef4228f96a26329f5f520ddd633c979ce 100644
--- a/src/mainview/components/ConversationSmartListViewItemDelegate.qml
+++ b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
@@ -25,7 +25,9 @@ import "../../commoncomponents"
 
 ItemDelegate {
     id: smartListItemDelegate
+    height: 72
 
+    property int lastInteractionPreferredWidth: 80
     Connections {
         target: conversationSmartListView
 
@@ -48,7 +50,7 @@ ItemDelegate {
                     || conversationSmartListView.currentIndex !== index) {
                 itemSmartListBackground.color = Qt.binding(function () {
                     return InCall ? Qt.lighter(JamiTheme.selectionBlue,
-                                               1.8) : "white"
+                                               1.8) : JamiTheme.backgroundColor
                 })
             } else {
                 itemSmartListBackground.color = Qt.binding(function () {
@@ -73,134 +75,82 @@ ItemDelegate {
 
         anchors.left: parent.left
         anchors.verticalCenter: parent.verticalCenter
-        anchors.leftMargin: 10
+        anchors.leftMargin: 16
     }
 
-    Rectangle {
-        id: conversationSmartListUserInfoRect
 
+    RowLayout {
+        id: rowUsernameAndLastInteractionDate
         anchors.left: conversationSmartListUserImage.right
-        anchors.leftMargin: 10
+        anchors.leftMargin: 16
         anchors.top: parent.top
-
-        width: LastInteractionDate ? (parent.width - conversationSmartListUserImage.width - 20)
-                                     / 2 : parent.width - conversationSmartListUserImage.width - 20
-        height: parent.height
-
-        color: "transparent"
-
-        ColumnLayout {
-            id: conversationSmartListUserInfoColumnLayout
-
-            anchors.fill: parent
-
-            Text {
-                id: conversationSmartListUserName
-
-                Layout.alignment: Qt.AlignLeft
-
-                TextMetrics {
-                    id: textMetricsConversationSmartListUserName
-                    font: conversationSmartListUserName.font
-                    elide: Text.ElideMiddle
-                    elideWidth: conversationSmartListUserInfoRect.width
-                    text: DisplayName
-                }
-
-                text: textMetricsConversationSmartListUserName.elidedText
-                font.pointSize: JamiTheme.textFontSize
+        anchors.topMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 10
+
+        Text {
+            id: conversationSmartListUserName
+            Layout.alignment: Qt.AlignLeft
+
+            TextMetrics {
+                id: textMetricsConversationSmartListUserName
+                font: conversationSmartListUserName.font
+                elide: Text.ElideRight
+                elideWidth: LastInteractionDate ? (smartListItemDelegate.width - lastInteractionPreferredWidth - conversationSmartListUserImage.width-32) :
+                                                  smartListItemDelegate.width - lastInteractionPreferredWidth
+                text: DisplayName
             }
+            text: textMetricsConversationSmartListUserName.elidedText
+            font.pointSize: JamiTheme.menuFontSize
+        }
 
-            Text {
-                id: conversationSmartListUserId
-
-                Layout.alignment: Qt.AlignLeft
-
-                fontSizeMode: Text.Fit
-                color: JamiTheme.faddedFontColor
-
-                TextMetrics {
-                    id: textMetricsConversationSmartListUserId
-                    font: conversationSmartListUserId.font
-                    elide: Text.ElideMiddle
-                    elideWidth: conversationSmartListUserInfoRect.width
-                    text: DisplayID == DisplayName ? "" : DisplayID
-                }
-
-                text: textMetricsConversationSmartListUserId.elidedText
-                font.pointSize: JamiTheme.textFontSize
+        Text {
+            id: conversationSmartListUserLastInteractionDate
+            Layout.alignment: Qt.AlignRight
+            TextMetrics {
+                id: textMetricsConversationSmartListUserLastInteractionDate
+                font: conversationSmartListUserLastInteractionDate.font
+                elide: Text.ElideRight
+                elideWidth: lastInteractionPreferredWidth
+                text: LastInteractionDate
             }
+
+            text: textMetricsConversationSmartListUserLastInteractionDate.elidedText
+            font.pointSize: JamiTheme.textFontSize
+            color: JamiTheme.faddedLastInteractionFontColor
         }
     }
 
-    Rectangle {
-        id: conversationSmartListUserLastInteractionRect
-
-        anchors.left: conversationSmartListUserInfoRect.right
-        anchors.top: parent.top
-
-        width: (parent.width - conversationSmartListUserImage.width - 20) / 2 - 10
-        height: parent.height
 
-        color: "transparent"
-
-        ColumnLayout {
-            id: conversationSmartListUserLastInteractionColumnLayout
-
-            anchors.fill: parent
-
-            Text {
-                id: conversationSmartListUserLastInteractionDate
-
-                Layout.alignment: Qt.AlignRight
-
-                TextMetrics {
-                    id: textMetricsConversationSmartListUserLastInteractionDate
-                    font: conversationSmartListUserLastInteractionDate.font
-                    elideWidth: conversationSmartListUserLastInteractionRect.width
-                    elide: Text.ElideRight
-                    text: LastInteractionDate
-                }
-
-                text: textMetricsConversationSmartListUserLastInteractionDate.elidedText
-                font.pointSize: JamiTheme.textFontSize
-                color: JamiTheme.faddedFontColor
-            }
-
-            Text {
-                id: conversationSmartListUserLastInteractionMessage
-
-                Layout.alignment: Qt.AlignRight
+    Text {
+        id: conversationSmartListUserLastInteractionMessage
+        anchors.left: conversationSmartListUserImage.right
+        anchors.leftMargin: 16
+        anchors.bottom: rowUsernameAndLastInteractionDate.bottom
+        anchors.bottomMargin: -20
+
+        TextMetrics {
+            id: textMetricsConversationSmartListUserLastInteractionMessage
+            font: conversationSmartListUserLastInteractionMessage.font
+            elide: Text.ElideRight
+            elideWidth: LastInteractionDate ? (smartListItemDelegate.width - lastInteractionPreferredWidth - conversationSmartListUserImage.width-32) :
+                                              smartListItemDelegate.width - lastInteractionPreferredWidth
+            text: InCall ? CallStateStr : (Draft ? Draft : LastInteraction)
+        }
 
-                fontSizeMode: Text.Fit
+        font.hintingPreference: Font.PreferNoHinting
+        text: textMetricsConversationSmartListUserLastInteractionMessage.elidedText
+        font.pointSize: JamiTheme.textFontSize
+        color: Draft ? JamiTheme.draftRed : JamiTheme.faddedLastInteractionFontColor
+    }
 
-                TextMetrics {
-                    id: textMetricsConversationSmartListUserLastInteractionMessage
-                    font: conversationSmartListUserLastInteractionMessage.font
-                    elideWidth: conversationSmartListUserLastInteractionRect.width
-                    elide: Text.ElideRight
-                    text: InCall ? CallStateStr : (Draft ? Draft : LastInteraction)
-                }
 
-                font.family: "Segoe UI Emoji"
-                font.hintingPreference: Font.PreferNoHinting
-                text: textMetricsConversationSmartListUserLastInteractionMessage.elidedText
-                font.pointSize: JamiTheme.textFontSize
-                color: Draft ? JamiTheme.draftRed : JamiTheme.faddedLastInteractionFontColor
-            }
-        }
-    }
 
     background: Rectangle {
         id: itemSmartListBackground
-
-        color: InCall ? Qt.lighter(JamiTheme.selectionBlue, 1.8) : "white"
-
+        color: InCall ? Qt.lighter(JamiTheme.selectionBlue, 1.8) : JamiTheme.backgroundColor
         implicitWidth: conversationSmartListView.width
-        implicitHeight: Math.max(
-                            conversationSmartListUserName.height
-                            + textMetricsConversationSmartListUserId.height + 10,
-                            conversationSmartListUserImage.height + 10)
+        implicitHeight: parent.height
         border.width: 0
     }
 
@@ -244,7 +194,7 @@ ItemDelegate {
                 userProfile.registeredNameText = DisplayID
                 userProfile.idText = URI
                 userProfile.contactPicBase64 = Picture
-                smartListContextMenu.open()
+                smartListContextMenu.openMenu()
             } else if (mouse.button === Qt.LeftButton) {
                 conversationSmartListView.currentIndex = index
                 conversationSmartListView.needToSelectItems(index)
@@ -262,7 +212,7 @@ ItemDelegate {
                         || conversationSmartListView.currentIndex === -1) {
                     itemSmartListBackground.color = Qt.binding(function () {
                         return InCall ? Qt.lighter(JamiTheme.selectionBlue,
-                                                   1.8) : "white"
+                                                   1.8) : JamiTheme.backgroundColor
                     })
                 } else {
                     itemSmartListBackground.color = Qt.binding(function () {
diff --git a/src/mainview/components/MessageWebView.qml b/src/mainview/components/MessageWebView.qml
index 2045edf8b23f2cdb186ad68cb95b8aa03c7ca97c..1cb9242e90c3e75ce66f7b3a8f5122a4c23d7a43 100644
--- a/src/mainview/components/MessageWebView.qml
+++ b/src/mainview/components/MessageWebView.qml
@@ -29,7 +29,7 @@ import "../../commoncomponents"
 Rectangle {
     id: messageWebViewRect
 
-    property int messageWebViewHeaderPreferredHeight: 60
+    property int messageWebViewHeaderPreferredHeight: 64
     property string headerUserAliasLabelText: ""
     property string headerUserUserNameLabelText: ""
 
@@ -58,8 +58,6 @@ Rectangle {
         messageWebViewHeader.resetBackToWelcomeViewButtonSource(reset)
     }
 
-    anchors.fill: parent
-
     JamiFileDialog {
         id: jamiFileDialog
 
diff --git a/src/mainview/components/MessageWebViewHeader.qml b/src/mainview/components/MessageWebViewHeader.qml
index 596c672adc4fb31e1a6771184dcdf6e1f5b5a6f4..4f2445fd555ee7d68b0db651e6519a05c3e331cf 100644
--- a/src/mainview/components/MessageWebViewHeader.qml
+++ b/src/mainview/components/MessageWebViewHeader.qml
@@ -54,7 +54,7 @@ Rectangle {
             id: backToWelcomeViewButton
 
             Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-            Layout.leftMargin: 10
+            Layout.leftMargin: 16
             Layout.preferredWidth: buttonPreferredSize
             Layout.preferredHeight: buttonPreferredSize
 
@@ -83,22 +83,24 @@ Rectangle {
             Layout.preferredWidth: messagingHeaderRect.width
                                    - backToWelcomeViewButton.width - buttonGroup.width - 45
             Layout.preferredHeight: messagingHeaderRect.height
-            Layout.leftMargin: 10
+            Layout.leftMargin: 16
 
             color: "transparent"
 
             ColumnLayout {
                 id: userNameOrIdColumnLayout
+                Layout.alignment: Qt.AlignVCenter
+                anchors.fill: parent
 
                 Label {
                     id: userAliasLabel
 
-                    Layout.alignment: Qt.AlignVCenter
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
                     Layout.preferredWidth: userNameOrIdRect.width
                     Layout.preferredHeight: textMetricsuserAliasLabel.boundingRect.height
-                    Layout.topMargin: userNameOrIdRect.height / 2 - userAliasLabel.height - 4
+                    Layout.topMargin: userUserNameLabel.text == "" ? 0 : 10
 
-                    font.pointSize: JamiTheme.textFontSize - 1
+                    font.pointSize: JamiTheme.menuFontSize
 
                     horizontalAlignment: Text.AlignLeft
                     verticalAlignment: Text.AlignVCenter
@@ -117,17 +119,17 @@ Rectangle {
 
                 Label {
                     id: userUserNameLabel
-
-                    Layout.alignment: Qt.AlignVCenter
+                    visible: (text != "")
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
                     Layout.preferredWidth: userNameOrIdRect.width
                     Layout.preferredHeight: textMetricsuserUserNameLabel.boundingRect.height
+                    Layout.bottomMargin: 10
 
-                    font.pointSize: JamiTheme.textFontSize - 2
-                    color: JamiTheme.faddedFontColor
+                    font.pointSize: JamiTheme.textFontSize
+                    color: JamiTheme.faddedLastInteractionFontColor
 
                     horizontalAlignment: Text.AlignLeft
                     verticalAlignment: Text.AlignVCenter
-
                     text: textMetricsuserUserNameLabel.elidedText
                 }
 
@@ -148,7 +150,7 @@ Rectangle {
             Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
             Layout.preferredWidth: buttonPreferredSize * 3 + 18
             Layout.preferredHeight: buttonPreferredSize
-            Layout.rightMargin: 20
+            Layout.rightMargin: 16
 
             color: "transparent"
 
@@ -156,6 +158,7 @@ Rectangle {
                 id: startAAudioCallButton
 
                 anchors.right: startAVideoCallButton.left
+                anchors.rightMargin: 16
                 anchors.verticalCenter: buttonGroup.verticalCenter
 
                 height: buttonPreferredSize
@@ -175,8 +178,8 @@ Rectangle {
             HoverableButton {
                 id: startAVideoCallButton
 
-                anchors.right: sendContactRequestButton.left
-                anchors.leftMargin: 5
+                anchors.right: sendContactRequestButton.visible ? sendContactRequestButton.left : buttonGroup.right
+                anchors.rightMargin: 16
                 anchors.verticalCenter: buttonGroup.verticalCenter
 
                 height: buttonPreferredSize
@@ -196,7 +199,6 @@ Rectangle {
             HoverableButton {
                 id: sendContactRequestButton
 
-                anchors.leftMargin: 5
                 anchors.right: buttonGroup.right
                 anchors.rightMargin: 8
                 anchors.verticalCenter: buttonGroup.verticalCenter
@@ -206,7 +208,7 @@ Rectangle {
 
                 visible: sendContactRequestButtonVisible
                 radius: 30
-                source: "qrc:/images/icons/ic_person_add_black_24dp_2x.png"
+                source: "qrc:/images/icons/person_add-24px.svg"
                 backgroundColor: "white"
                 onExitColor: "white"
 
diff --git a/src/mainview/components/RecordBox.qml b/src/mainview/components/RecordBox.qml
index b6bc0f999e24e9b21ed97da0df22a21c99f9402c..274e28de2f7b7ade69315a54efc44c864e4c4803 100644
--- a/src/mainview/components/RecordBox.qml
+++ b/src/mainview/components/RecordBox.qml
@@ -21,8 +21,10 @@ import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Dialogs 1.3
-import QtGraphicalEffects 1.0
 import net.jami.Models 1.0
+import QtGraphicalEffects 1.15
+import QtQuick.Shapes 1.15
+
 import "../../commoncomponents"
 
 
@@ -34,7 +36,7 @@ Rectangle {
         REC_SUCCESS
     }
 
-    id:recBox
+    id: recBox
     color: "#FFFFFF"
     width: 320
     height: 240
@@ -47,25 +49,48 @@ Rectangle {
     property int state: RecordBox.States.INIT
     property bool isVideo: false
     property bool previewAvailable: false
+    property int preferredWidth: 320
+    property int preferredHeight: 240
+    property int btnSize: 40
 
-    property int h_offset: -65
-    property int v_offset: -65
+    property int offset: 3
+    property int curveRadius: 6
+    property int x_offset: 0
+    property int y_offset: 0
 
     function openRecorder(set_x, set_y, vid) {
+
         focus = true
         visible = true
-        x = set_x+(width/2)+h_offset
-        y = set_y-(height/2)+v_offset
+        isVideo = vid
+
+        x_offset = (isVideo ? -34 : -80)
+        scaleHeight()
+        y_offset = -64-height
 
         updateState(RecordBox.States.INIT)
 
-        isVideo = vid
         if (isVideo){
             ClientWrapper.accountAdaptor.startPreviewing(false)
             previewAvailable = true
         }
     }
 
+    function scaleHeight(){
+        height = preferredHeight
+        if (isVideo) {
+            var device = ClientWrapper.avmodel.getDefaultDevice()
+            var settings = ClientWrapper.settingsAdaptor.get_Video_Settings_Size(device)
+            var res = settings.split("x")
+            var aspectRatio = res[1]/res[0]
+            if (aspectRatio) {
+                height = preferredWidth*aspectRatio
+            } else {
+                console.error("Could not scale recording video preview")
+            }
+        }
+    }
+
     onActiveFocusChanged:  {
         if (visible) {
             closeRecorder()
@@ -73,7 +98,7 @@ Rectangle {
     }
 
     onVisibleChanged: {
-        if(!visible) {
+        if (!visible) {
             closeRecorder()
         }
     }
@@ -140,6 +165,57 @@ Rectangle {
         target: ClientWrapper.renderManager
     }
 
+    Shape {
+        id: backgroundShape
+        width: recBox.width
+        height: recBox.height
+        anchors.centerIn: parent
+        x: -offset
+        y: -offset
+        ShapePath {
+            fillColor: "white"
+
+            strokeWidth: 1
+            strokeColor: JamiTheme.tabbarBorderColor
+
+            startX: -offset+curveRadius; startY: -offset
+            joinStyle: ShapePath.RoundJoin
+
+            PathLine { x: width+offset-curveRadius; y: -offset }
+
+            PathArc {
+                x: width+offset; y: -offset+curveRadius
+                radiusX: curveRadius; radiusY: curveRadius
+            }
+
+            PathLine { x: width+offset; y: height+offset-curveRadius }
+
+            PathArc {
+                x: width+offset-curveRadius; y: height+offset
+                radiusX: curveRadius; radiusY: curveRadius
+            }
+
+            PathLine { x: width/2+10; y: height+offset }
+            PathLine { x: width/2; y: height+offset+10 }
+            PathLine { x: width/2-10; y: height+offset }
+
+
+            PathLine { x: -offset+curveRadius; y: height+offset }
+
+            PathArc {
+                x: -offset; y: height+offset-curveRadius
+                radiusX: curveRadius; radiusY: curveRadius
+            }
+
+            PathLine { x: -offset; y: -offset+curveRadius }
+
+            PathArc {
+                x: -offset+curveRadius; y: -offset
+                radiusX: curveRadius; radiusY: curveRadius
+            }
+        }
+    }
+
     Rectangle {
         id: rectBox
         visible: (isVideo && previewAvailable)
@@ -184,31 +260,26 @@ Rectangle {
         text: "00:00"
         color: (isVideo ? "white" : "black")
         font.pointSize: (isVideo ? 12 : 20)
-        anchors.horizontalCenter: parent.horizontalCenter
+
+        anchors.centerIn: recordButton
         anchors.horizontalCenterOffset: (isVideo ? 100 : 0)
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.verticalCenterOffset: (isVideo ? 100 : 0)
+        anchors.verticalCenterOffset: (isVideo ? 0 : -100)
     }
 
-
     HoverableRadiusButton {
         id: recordButton
-        Layout.maximumWidth: 30
-        Layout.preferredWidth: 30
-        Layout.minimumWidth: 30
 
-        Layout.maximumHeight: 30
-        Layout.preferredHeight: 30
-        Layout.minimumHeight: 30
+        width: btnSize
+        height: btnSize
+
+        anchors.horizontalCenter: recBox.horizontalCenter
+        anchors.bottom: recBox.bottom
+        anchors.bottomMargin: 5
 
         buttonImageHeight: height
         buttonImageWidth: height
         backgroundColor: isVideo? "#000000cc" : "white"
 
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 5
-
         radius: height / 2
 
         icon.source: "qrc:/images/icons/av_icons/fiber_manual_record-24px.svg"
@@ -223,22 +294,18 @@ Rectangle {
 
     HoverableRadiusButton {
         id: btnStop
-        Layout.maximumWidth: 30
-        Layout.preferredWidth: 30
-        Layout.minimumWidth: 30
 
-        Layout.maximumHeight: 30
-        Layout.preferredHeight: 30
-        Layout.minimumHeight: 30
+        width: btnSize
+        height: btnSize
+
+        anchors.horizontalCenter: recBox.horizontalCenter
+        anchors.bottom: recBox.bottom
+        anchors.bottomMargin: 5
 
         buttonImageHeight: height
         buttonImageWidth: height
         backgroundColor: isVideo? "#000000cc" : "white"
 
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 5
-
         radius: height / 2
 
         icon.source: "qrc:/images/icons/av_icons/stop-24px-red.svg"
@@ -253,24 +320,19 @@ Rectangle {
 
     HoverableRadiusButton {
         id: btnRestart
-        Layout.maximumWidth: 30
-        Layout.preferredWidth: 30
-        Layout.minimumWidth: 30
 
-        Layout.maximumHeight: 30
-        Layout.preferredHeight: 30
-        Layout.minimumHeight: 30
+        width: btnSize
+        height: btnSize
+
+        anchors.horizontalCenter: recBox.horizontalCenter
+        anchors.horizontalCenterOffset: -25
+        anchors.bottom: recBox.bottom
+        anchors.bottomMargin: 5
 
         buttonImageHeight: height
         buttonImageWidth: height
         backgroundColor: isVideo? "#000000cc" : "white"
 
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.right: btnRestart.left
-        anchors.rightMargin: 5
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 5
-
         radius: height / 2
 
         icon.source: "qrc:/images/icons/av_icons/re-record-24px.svg"
@@ -285,23 +347,19 @@ Rectangle {
 
     HoverableRadiusButton {
         id: btnSend
-        Layout.maximumWidth: 30
-        Layout.preferredWidth: 30
-        Layout.minimumWidth: 30
 
-        Layout.maximumHeight: 30
-        Layout.preferredHeight: 30
-        Layout.minimumHeight: 30
+        width: btnSize
+        height: btnSize
+
+        anchors.horizontalCenter: recBox.horizontalCenter
+        anchors.horizontalCenterOffset: 25
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 5
 
         buttonImageHeight: height
         buttonImageWidth: height
         backgroundColor: isVideo? "#000000cc" : "white"
 
-        anchors.left: btnRestart.right
-        anchors.leftMargin: 5
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 5
-
         radius: height / 2
 
         icon.source: "qrc:/images/icons/av_icons/send-24px.svg"
@@ -316,3 +374,4 @@ Rectangle {
         }
     }
 }
+
diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml
index 1a81d1ca8a5e1516d55643d6d0bf3cdb3b9d1e99..1dc18346b7159eda862178206ae921867ecc6f39 100644
--- a/src/mainview/components/SidePanel.qml
+++ b/src/mainview/components/SidePanel.qml
@@ -25,6 +25,7 @@ import "../../commoncomponents"
 
 Rectangle {
     id: sidePanelRect
+    color: JamiTheme.backgroundColor
 
     property bool tabBarVisible: true
     property int pendingRequestCount: 0
@@ -120,15 +121,14 @@ Rectangle {
     /*
      * Intended -> since strange behavior will happen without this for stackview.
      */
-    anchors.fill: parent
+    anchors.top: parent.top
 
     AccountComboBox {
         id: accountComboBox
 
         anchors.top: sidePanelRect.top
-
         width: sidePanelRect.width
-        height: 60
+        height: 64
 
         currentIndex: 0
 
@@ -156,7 +156,8 @@ Rectangle {
 
         onAccountChanged: {
             ClientWrapper.accountAdaptor.accountChanged(index)
-            accountChangedUIReset()
+            refreshAccountComboBox(0)
+            sidePanelRect.accountComboBoxNeedToShowWelcomePage(0)
         }
 
         onNeedToUpdateSmartList: {
@@ -178,134 +179,78 @@ Rectangle {
         }
     }
 
-    SidePanelTabBar {
-        id: sidePanelTabBar
-
+    /*
+     * Search bar container to embed search label
+     */
+    ContactSearchBar {
+        id: contactSearchBar
+        width: sidePanelRect.width - 26
+        height: 35
         anchors.top: accountComboBox.bottom
-        anchors.topMargin: 20
+        anchors.topMargin: 10
         anchors.left: sidePanelRect.left
-        anchors.leftMargin: tabBarLeftMargin
+        anchors.leftMargin: 16
 
-        width: sidePanelRect.width
-        height: Math.max(sidePanelTabBar.converstationTabHeight,
-                         sidePanelTabBar.invitationTabHeight)
+        onContactSearchBarTextChanged: {
+            ClientWrapper.utilsAdaptor.setConversationFilter(text)
+        }
     }
 
-    Rectangle {
-        id: sidePanelColumnRect
-
-        anchors.top: sidePanelTabBar.bottom
-        anchors.topMargin: -12
-
+    SidePanelTabBar {
+        id: sidePanelTabBar
+        anchors.top: contactSearchBar.bottom
+        anchors.topMargin: 10
         width: sidePanelRect.width
-        height: sidePanelRect.height - accountComboBox.height - sidePanelTabBar.height
+        height: tabBarVisible ? 64 : 0
+    }
 
-        border.color: JamiTheme.tabbarBorderColor
-        radius: 10
 
-        Rectangle {
-            id: hideTopBoarderRect
+    ConversationSmartListView {
+        id: conversationSmartListView
 
-            anchors.top: sidePanelColumnRect.top
-            anchors.left: sidePanelColumnRect.left
-            anchors.leftMargin: tabBarLeftMargin + 5
+        anchors.top: tabBarVisible ? sidePanelTabBar.bottom : contactSearchBar.bottom
+        anchors.topMargin: tabBarVisible ? 0 : 10
+        width: parent.width
+        height: tabBarVisible ? sidePanelRect.height - sidePanelTabBar.height - contactSearchBar.height - accountComboBox.height - 20 :
+                                sidePanelRect.height - contactSearchBar.height - accountComboBox.height - 20
 
-            width: sidePanelTabBar.converstationTabWidth + sidePanelTabBar.invitationTabWidth - 9
-            height: 1
+        Connections {
+            target: ConversationsAdapter
 
-            visible: tabBarVisible
+            function onShowChatView(accountId, convUid) {
+                conversationSmartListView.needToShowChatView(accountId,
+                                                             convUid)
+            }
 
-            color: "white"
+            function onShowConversationTabs(visible) {
+                tabBarVisible = visible
+                updatePendingRequestCount()
+                updateTotalUnreadMessagesCount()
+            }
         }
 
-        ColumnLayout {
-            id: columnLayoutView
-
-            anchors.centerIn: sidePanelColumnRect
-
-            width: sidePanelColumnRect.width
-            height: sidePanelColumnRect.height - 20
-
-
-            /*
-             * Search bar container to embed search label
-             */
-            ContactSearchBar {
-                id: contactSearchBar
+        onNeedToSelectItems: {
+            ConversationsAdapter.selectConversation(index)
+        }
 
-                Layout.alignment: Qt.AlignCenter
-                Layout.topMargin: 10
-                Layout.rightMargin: 5
-                Layout.leftMargin: 5
-                Layout.preferredWidth: parent.width - 10
-                Layout.preferredHeight: 35
+        onNeedToBackToWelcomePage: {
+            sidePanelRect.conversationSmartListViewNeedToShowWelcomePage()
+        }
 
-                onContactSearchBarTextChanged: {
-                    ClientWrapper.utilsAdaptor.setConversationFilter(text)
-                }
-            }
+        onNeedToAccessMessageWebView: {
+            sidePanelRect.conversationSmartListNeedToAccessMessageWebView(
+                        currentUserDisplayName, currentUserAlias,
+                        currentUID, callStackViewShouldShow,
+                        isAudioOnly, callStateStr)
+        }
 
-            ConversationSmartListView {
-                id: conversationSmartListView
-
-                Layout.alignment: Qt.AlignCenter
-                Layout.preferredWidth: parent.width
-                Layout.preferredHeight: parent.height - contactSearchBar.height - 30
-
-                Connections {
-                    target: ConversationsAdapter
-
-                    function onShowChatView(accountId, convUid) {
-                        conversationSmartListView.needToShowChatView(accountId,
-                                                                     convUid)
-                    }
-
-                    function onShowConversationTabs(visible) {
-                        tabBarVisible = visible
-                        updatePendingRequestCount()
-                        updateTotalUnreadMessagesCount()
-                    }
-                }
-
-                onNeedToSelectItems: {
-                    ConversationsAdapter.selectConversation(index)
-                }
-
-                onNeedToBackToWelcomePage: {
-                    sidePanelRect.conversationSmartListViewNeedToShowWelcomePage()
-                }
-
-                onNeedToAccessMessageWebView: {
-                    sidePanelRect.conversationSmartListNeedToAccessMessageWebView(
-                                currentUserDisplayName, currentUserAlias,
-                                currentUID, callStackViewShouldShow,
-                                isAudioOnly, callStateStr)
-                }
-
-                onNeedToGrabFocus: {
-                    contactSearchBar.clearFocus()
-                }
-
-                Component.onCompleted: {
-                    ConversationsAdapter.setQmlObject(this)
-                    conversationSmartListView.currentIndex = -1
-                }
-            }
+        onNeedToGrabFocus: {
+            contactSearchBar.clearFocus()
         }
-    }
 
-    onTabBarVisibleChanged: {
-        if (!tabBarVisible) {
-            sidePanelTabBar.height = 0
-            sidePanelTabBar.anchors.topMargin = 12
-            sidePanelColumnRect.border.width = 0
-        } else {
-            sidePanelTabBar.height = Qt.binding(function () {
-                return Math.max(sidePanelTabBar.converstationTabHeight,
-                                sidePanelTabBar.invitationTabHeight)
-            })
-            sidePanelTabBar.anchors.topMargin = 20
-            sidePanelColumnRect.border.width = 1
+        Component.onCompleted: {
+            ConversationsAdapter.setQmlObject(this)
+            conversationSmartListView.currentIndex = -1
         }
     }
 }
diff --git a/src/mainview/components/SidePanelTabBar.qml b/src/mainview/components/SidePanelTabBar.qml
index d8197e1f78d4d36604eebdbe2fae84a4bcf11097..0d27f7eed9783b0b1bb188daa282427ec56f6662 100644
--- a/src/mainview/components/SidePanelTabBar.qml
+++ b/src/mainview/components/SidePanelTabBar.qml
@@ -19,7 +19,9 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.12
 import net.jami.Models 1.0
+import "../../commoncomponents"
 
 TabBar {
     id: tabBar
@@ -30,29 +32,26 @@ TabBar {
     property alias invitationTabWidth: pageTwo.width
     property alias converstationTabHeight: pageOne.height
     property alias invitationTabHeight: pageTwo.height
+    property real opacityDegree: 0.5
 
     visible: tabBarVisible
 
     currentIndex: 0
 
     TabButton {
-        id: pageOne
-
-        width: tabBar.width / 2 - tabButtonShrinkSize
-        height: textConvElement.height + 10
 
+        id: pageOne
         down: true
 
         Rectangle {
             id: totalUnreadMessagesCountRect
 
-            anchors.right: pageOne.right
-            anchors.rightMargin: 5
-            anchors.bottom: pageOne.bottom
-            anchors.bottomMargin: pageOne.height - totalUnreadMessagesCountRect.height / 2
+            anchors.centerIn: buttonRectOne
+            anchors.verticalCenterOffset : -20
+            anchors.horizontalCenterOffset : 15
 
-            width: 14
-            height: 14
+            width: 16
+            height: 16
 
             visible: totalUnreadMessagesCount > 0
 
@@ -63,38 +62,71 @@ TabBar {
 
                 text: totalUnreadMessagesCount > 9 ? "···" : totalUnreadMessagesCount
                 color: "white"
+                font.pointSize: JamiTheme.textFontSize
             }
-
             radius: 30
             color: JamiTheme.notificationRed
+
         }
 
         background: Rectangle {
+
             id: buttonRectOne
+            width: tabBar.width / 2 + 1
+            height: tabBar.height
+            color: JamiTheme.backgroundColor
+
+            Image {
+                id: imgRectOne
+                anchors.horizontalCenter: buttonRectOne.horizontalCenter
+                anchors.top: buttonRectOne.top
+                anchors.topMargin: 12
+
+                width: 24
+                height: 24
+
+                fillMode: Image.PreserveAspectFit
+                mipmap: true
+                source: "qrc:/images/icons/baseline-people-24px.svg"
+                //opacity: enabled ? 0.8 : 0.3
+                opacity: pageOne.down == true ? 1.0 : opacityDegree
+            }
 
-            radius: 10
-            width: pageOne.width + 2
-            color: pageOne.down ? "white" : JamiTheme.releaseColor
-            border.color: JamiTheme.tabbarBorderColor
+            ColorOverlay {
+                anchors.fill: imgRectOne
+                source: imgRectOne
+                color: JamiTheme.blueLogo_
+                opacity: pageOne.down == true ? 1.0 : opacityDegree
+            }
 
             Text {
                 id: textConvElement
 
-                anchors.centerIn: buttonRectOne
+                anchors.horizontalCenter: buttonRectOne.horizontalCenter
+                anchors.bottom: buttonRectOne.bottom
+                anchors.bottomMargin: 12
 
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
 
-                text: qsTr("Converstation")
+                text: qsTr("CONVERSATIONS")
                 font.pointSize: JamiTheme.textFontSize
-                opacity: enabled ? 1.0 : 0.3
+                opacity: pageOne.down == true ? 1.0 : opacityDegree
+                color: JamiTheme.blueLogo_
+            }
+
+            Rectangle {
+                id: markerTabOne
+                width: buttonRectOne.width
+                anchors.bottom: buttonRectOne.bottom
+                height: 2
+                color: pageOne.down == true ? JamiTheme.blueLogo_ : "transparent"
             }
 
             MouseArea {
                 anchors.fill: parent
                 hoverEnabled: true
                 onPressed: {
-                    buttonRectOne.color = JamiTheme.pressColor
                     ConversationsAdapter.setConversationFilter("")
                     contactSearchBar.setPlaceholderString(
                                 JamiTheme.contactSearchBarPlaceHolderConversationText)
@@ -104,36 +136,31 @@ TabBar {
                     forceReselectConversationSmartListCurrentIndex()
                 }
                 onReleased: {
-                    buttonRectOne.color = JamiTheme.releaseColor
+                    buttonRectOne.color = JamiTheme.backgroundColor
                 }
                 onEntered: {
                     buttonRectOne.color = JamiTheme.hoverColor
                 }
                 onExited: {
-                    buttonRectOne.color = Qt.binding(function () {
-                        return pageOne.down ? "white" : JamiTheme.releaseColor
-                    })
+                    buttonRectOne.color = JamiTheme.backgroundColor
                 }
             }
         }
     }
 
     TabButton {
-        id: pageTwo
 
-        width: tabBar.width / 2 - tabButtonShrinkSize
-        height: textInvElement.height + 10
+        id: pageTwo
 
         Rectangle {
             id: pendingRequestCountRect
 
-            anchors.right: pageTwo.right
-            anchors.rightMargin: 5
-            anchors.bottom: pageTwo.bottom
-            anchors.bottomMargin: pageTwo.height - pendingRequestCountRect.height / 2
+            anchors.centerIn: buttonRectTwo
+            anchors.verticalCenterOffset : -20
+            anchors.horizontalCenterOffset : 15
 
-            width: 14
-            height: 14
+            width: 16
+            height: 16
 
             visible: pendingRequestCount > 0
 
@@ -143,9 +170,9 @@ TabBar {
                 anchors.centerIn: pendingRequestCountRect
 
                 text: pendingRequestCount > 9 ? "···" : pendingRequestCount
-                color: "white"
+                color: JamiTheme.backgroundColor
+                font.pointSize: JamiTheme.textFontSize
             }
-
             radius: 30
             color: JamiTheme.notificationRed
         }
@@ -153,29 +180,63 @@ TabBar {
         background: Rectangle {
             id: buttonRectTwo
 
-            radius: 10
-            color: pageTwo.down ? "white" : JamiTheme.releaseColor
-            border.color: JamiTheme.tabbarBorderColor
+            width: tabBar.width / 2
+            height: tabBar.height
+            color: JamiTheme.backgroundColor
+
+            Image {
+                id: imgRectTwo
+                anchors.horizontalCenter: buttonRectTwo.horizontalCenter
+                anchors.top: buttonRectTwo.top
+                anchors.topMargin: 10
+
+                width: 24
+                height: 24
+
+                fillMode: Image.PreserveAspectFit
+                mipmap: true
+                source: "qrc:/images/icons/drafts-24px.svg"
+                //opacity: enabled ? 0.8 : 0.3
+                opacity: pageTwo.down == true ? 1.0 : opacityDegree
+            }
+
+            ColorOverlay {
+                anchors.fill: imgRectTwo
+                source: imgRectTwo
+                color: JamiTheme.blueLogo_
+                opacity: pageTwo.down == true ? 1.0 : opacityDegree
+            }
 
             Text {
                 id: textInvElement
 
-                anchors.centerIn: buttonRectTwo
+                anchors.horizontalCenter: buttonRectTwo.horizontalCenter
+                anchors.bottom: buttonRectTwo.bottom
+                anchors.bottomMargin: 12
 
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
 
                 font.pointSize: JamiTheme.textFontSize
 
-                text: qsTr("Invitation")
-                opacity: enabled ? 1.0 : 0.3
+                text: qsTr("INVITATIONS")
+                //opacity: enabled ? 1.0 : 0.3
+                opacity: pageTwo.down == true ? 1.0 : opacityDegree
+                color: JamiTheme.blueLogo_
+            }
+
+            Rectangle {
+                id: markerTabTwo
+                width: buttonRectTwo.width
+                anchors.bottom: buttonRectTwo.bottom
+                height: 2
+                color: pageTwo.down == true ? JamiTheme.blueLogo_ : "transparent"
             }
 
             MouseArea {
                 anchors.fill: parent
                 hoverEnabled: true
                 onPressed: {
-                    buttonRectTwo.color = JamiTheme.pressColor
                     ConversationsAdapter.setConversationFilter("PENDING")
                     contactSearchBar.setPlaceholderString(
                                 JamiTheme.contactSearchBarPlaceHolderInivitionText)
@@ -183,15 +244,13 @@ TabBar {
                     pageOne.down = false
                 }
                 onReleased: {
-                    buttonRectTwo.color = JamiTheme.releaseColor
+                    buttonRectTwo.color = JamiTheme.backgroundColor
                 }
                 onEntered: {
                     buttonRectTwo.color = JamiTheme.hoverColor
                 }
                 onExited: {
-                    buttonRectTwo.color = Qt.binding(function () {
-                        return pageTwo.down ? "white" : JamiTheme.releaseColor
-                    })
+                    buttonRectTwo.color = JamiTheme.backgroundColor
                 }
             }
         }
diff --git a/src/mainview/components/UserProfile.qml b/src/mainview/components/UserProfile.qml
index 072d9a6eb2056932822911cec0360fa75ab857a3..fe034e78c7a3bfdc53f9c5ae912a41edbf76f20c 100644
--- a/src/mainview/components/UserProfile.qml
+++ b/src/mainview/components/UserProfile.qml
@@ -32,14 +32,14 @@ Dialog {
     property string registeredNameText: ""
     property string idText: ""
 
+    property int preferredImgSize: 80
     modal: true
 
-
     /*
      * Content height + margin.
      */
-    contentHeight: userProfileDialogUpperPartColumnLayout.implicitHeight + 30
-
+    contentHeight: userProfileDialogLayout.implicitHeight + 60
+    contentWidth: userProfileDialogLayout.implicitWidth + 60
 
     /*
      * Fake focus to make sure that text edit lose focus on close.
@@ -48,46 +48,67 @@ Dialog {
         id: fakeFocusTextEdit
     }
 
-    ColumnLayout {
-        id: userProfileDialogUpperPartColumnLayout
-
-        anchors.centerIn: parent
+    contentItem: GridLayout {
 
-        spacing: 15
+        id: userProfileDialogLayout
+        columns: 2
+        rowSpacing: 10
+        columnSpacing: 10
 
         Image {
             id: contactImage
 
-            Layout.alignment: Qt.AlignCenter
+            Layout.alignment: Qt.AlignRight
+            Layout.preferredWidth: 130
 
-            width: 150
-            height: 150
+            sourceSize.width: preferredImgSize
+            sourceSize.height: preferredImgSize
 
             fillMode: Image.PreserveAspectFit
             mipmap: true
         }
 
-
         /*
          * Visible when user alias is not empty or equals to id.
          */
         Text {
             id: contactAlias
 
-            Layout.alignment: Qt.AlignCenter
+            Layout.alignment: Qt.AlignLeft
 
-            font.pointSize: JamiTheme.textFontSize
+            font.pointSize: JamiTheme.titleFontSize
             text: textMetricsContactAliasText.elidedText
             visible: aliasText ? (aliasText === idText ? false : true) : false
+
             TextMetrics {
                 id: textMetricsContactAliasText
                 font: contactAlias.font
                 text: aliasText
-                elideWidth: userProfileDialog.width - 30
+                elideWidth: userProfileDialog.width-160
                 elide: Qt.ElideMiddle
             }
         }
 
+        Item {
+            Layout.columnSpan: 2
+            height: 20
+        }
+
+        Text {
+            Layout.alignment: Qt.AlignRight
+            font.pointSize: JamiTheme.menuFontSize
+            text: qsTr("Informations")
+        }
+
+        Item { Layout.fillWidth: true }
+
+        Text {
+            Layout.alignment: Qt.AlignRight
+            font.pointSize: JamiTheme.textFontSize
+            text: qsTr("Username")
+            visible: registeredNameText ? (registeredNameText === aliasText ? false : true) : false
+            color: JamiTheme.faddedFontColor
+        }
 
         /*
          * Visible when user name is not empty or equals to alias.
@@ -95,57 +116,67 @@ Dialog {
         Text {
             id: contactDisplayName
 
-            Layout.alignment: Qt.AlignCenter
+            Layout.alignment: Qt.AlignLeft
 
-            font.pointSize: JamiTheme.textFontSize - 1
+            font.pointSize: JamiTheme.textFontSize
             text: textMetricsContactDisplayNameText.elidedText
             visible: registeredNameText ? (registeredNameText === aliasText ? false : true) : false
-            color: JamiTheme.faddedFontColor
 
             TextMetrics {
                 id: textMetricsContactDisplayNameText
                 font: contactDisplayName.font
                 text: registeredNameText
-                elideWidth: userProfileDialog.width - 30
+                elideWidth: userProfileDialog.width-160
                 elide: Qt.ElideMiddle
             }
         }
 
+        Text {
+            Layout.alignment: Qt.AlignRight
+            font.pointSize: JamiTheme.textFontSize
+            text: qsTr("ID")
+            color: JamiTheme.faddedFontColor
+        }
+
         TextEdit {
             id: contactId
 
-            Layout.alignment: Qt.AlignCenter
-
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
+            Layout.alignment: Qt.AlignLeft
 
             selectByMouse: true
             readOnly: true
-            font.pointSize: JamiTheme.textFontSize - 1
+            font.pointSize: JamiTheme.textFontSize
             text: textMetricsContactIdText.elidedText
 
             TextMetrics {
                 id: textMetricsContactIdText
                 font: contactId.font
                 text: idText
-                elideWidth: userProfileDialog.width - 30
+                elideWidth: userProfileDialog.width-160
                 elide: Qt.ElideMiddle
             }
         }
 
+        Text {
+            Layout.alignment: Qt.AlignRight
+            font.pointSize: JamiTheme.textFontSize
+            text: qsTr("QR Code")
+            color: JamiTheme.faddedFontColor
+        }
+
         Image {
             id: contactQrImage
 
-            Layout.alignment: Qt.AlignBottom | Qt.AlignCenter
-
-            width: 150
-            height: 150
+            Layout.alignment: Qt.AlignBottom | Qt.AlignLeft
 
             fillMode: Image.PreserveAspectFit
-            sourceSize.width: 150
-            sourceSize.height: 150
+            sourceSize.width: preferredImgSize
+            sourceSize.height: preferredImgSize
             mipmap: true
         }
+
+        Item { height: 20 }
+
     }
 
     background: Rectangle {
diff --git a/src/mainview/components/WelcomePage.qml b/src/mainview/components/WelcomePage.qml
index a6250d0038b9eefa440e7ac4468d6572076a095e..85aea30f07f367ec3509427a3d373246e1ba1765 100644
--- a/src/mainview/components/WelcomePage.qml
+++ b/src/mainview/components/WelcomePage.qml
@@ -29,8 +29,6 @@ Rectangle {
     property int currentAccountIndex: 0
     property int buttonPreferredSize: 30
 
-    anchors.fill: parent
-
     Rectangle {
         id: welcomeRectComponentsGroup
 
@@ -81,7 +79,7 @@ Rectangle {
                 Layout.preferredHeight: 50
 
                 wrapMode: Text.WordWrap
-                font.pointSize: JamiTheme.textFontSize - 1
+                font.pointSize: JamiTheme.textFontSize
 
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
@@ -117,7 +115,7 @@ Rectangle {
                         Layout.preferredWidth: welcomeRectComponentsGroup.width
                         Layout.preferredHeight: 30
 
-                        font.pointSize: JamiTheme.textFontSize
+                        font.pointSize: JamiTheme.textFontSize + 1
 
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
@@ -136,90 +134,23 @@ Rectangle {
                         }
                     }
 
-                    RowLayout {
-                        id: jamiRegisteredNameRowLayout
+                    HoverableButton {
+                        id: copyRegisterednameButton
 
                         Layout.alignment: Qt.AlignCenter
-                        Layout.preferredWidth: buttonPreferredSize * 2 + 20
-                        Layout.preferredHeight: 30
-
-                        HoverableButton {
-                            id: copyRegisterednameButton
-
-                            Layout.alignment: Qt.AlignCenter
-                            Layout.preferredWidth: buttonPreferredSize
-                            Layout.preferredHeight: buttonPreferredSize
+                        Layout.preferredWidth: buttonPreferredSize
+                        Layout.preferredHeight: buttonPreferredSize
 
-                            radius: 30
-                            source: "qrc:/images/icons/ic_content_copy.svg"
+                        radius: 30
+                        source: "qrc:/images/icons/ic_content_copy.svg"
 
-                            onClicked: {
-                                ClientWrapper.utilsAdaptor.setText(
-                                            textMetricsjamiRegisteredNameText.text)
-                            }
-                        }
-
-                        HoverableButton {
-                            id: qrCodeGenerateButton
-
-                            Layout.alignment: Qt.AlignCenter
-                            Layout.preferredWidth: buttonPreferredSize
-                            Layout.preferredHeight: buttonPreferredSize
-
-                            radius: 30
-                            source: "qrc:/images/qrcode.png"
-
-                            onClicked: {
-                                qrDialog.open()
-                            }
+                        onClicked: {
+                            ClientWrapper.utilsAdaptor.setText(
+                                        textMetricsjamiRegisteredNameText.text)
                         }
                     }
                 }
             }
-
-            Image {
-                id: sipImage
-
-                Layout.alignment: Qt.AlignCenter
-                Layout.preferredWidth: 200
-                Layout.preferredHeight: 200
-
-
-                /*
-                 * Check if account type is ring.
-                 */
-                visible: accountListModel.data(accountListModel.index(
-                                                   currentAccountIndex, 0),
-                                               260) === 1 ? false : true
-                fillMode: Image.PreserveAspectFit
-
-
-                /*
-                 * Requested size.
-                 */
-                sourceSize.width: 200
-                sourceSize.height: 200
-                mipmap: true
-            }
-        }
-
-        HoverableButton {
-            id: aboutButton
-
-            anchors.horizontalCenter: welcomeRectComponentsGroup.horizontalCenter
-            anchors.bottom: welcomeRectComponentsGroup.bottom
-            anchors.bottomMargin: 5
-
-            width: 80
-            height: buttonPreferredSize
-
-            text: qsTr("About")
-            fontPointSize: JamiTheme.textFontSize
-            radius: 10
-
-            onClicked: {
-                aboutPopUpDialog.open()
-            }
         }
     }