diff --git a/images/icons/ic_clear_24px.svg b/images/icons/ic_clear_24px.svg
index 68ad7584..dea86781 100644
--- a/images/icons/ic_clear_24px.svg
+++ b/images/icons/ic_clear_24px.svg
@@ -1,12 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Cross</title>
-    <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Cross" fill-rule="nonzero" stroke="#000000">
-            <g id="Ico_X" transform="translate(3.000000, 3.000000)">
-                <path d="M9.12475134,0.270017196 C4.07644218,0.270017196 0,4.37345569 0,9.39476854 C0,14.4430777 4.10343849,18.5195199 9.12475134,18.5195199 C14.1730605,18.5195199 18.2495027,14.4160814 18.2495027,9.39476854 C18.2495027,4.34645937 14.1730605,0.270017196 9.12475134,0.270017196" id="Fill-1-path" stroke-width="1.75"></path>
-                <path d="M12.3102614,11.5813612 C12.5532282,11.8513242 12.5532282,12.2562688 12.3102614,12.4992356 C12.1752799,12.6342171 12.0133021,12.6882097 11.8513242,12.6882097 C11.6893464,12.6882097 11.5276385,12.6342171 11.392657,12.4992356 L9.20568627,10.3125348 L7.01898551,12.4992356 C6.88400396,12.6342171 6.72202613,12.6882097 6.5600483,12.6882097 C6.39807047,12.6882097 6.23609264,12.6342171 6.10111112,12.4992356 C5.83114806,12.2292725 5.83114806,11.8243279 6.10111112,11.5813612 L8.28781188,9.39466042 L6.10111112,7.20795966 C5.83114806,6.9379966 5.83114806,6.53305202 6.10111112,6.29008524 C6.34407787,6.04711849 6.77601877,6.04711849 7.01898551,6.29008524 L9.20568627,8.47678603 L11.392657,6.29008524 C11.6353538,6.02012221 12.0675647,6.02012221 12.3102614,6.29008524 C12.5532282,6.53305202 12.5532282,6.96499288 12.3102614,7.20795966 L10.1235607,9.39466042 L12.3102614,11.5813612 Z" id="Fill-4" stroke-width="0.5" fill="#000000"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
diff --git a/src/mainview/components/ContactSearchBar.qml b/src/mainview/components/ContactSearchBar.qml
index dce87787..71a2bc27 100644
--- a/src/mainview/components/ContactSearchBar.qml
+++ b/src/mainview/components/ContactSearchBar.qml
@@ -29,8 +29,6 @@ import "../../commoncomponents"
 Rectangle {
     id: root
 
-    property int itemMargin: 8
-
     signal contactSearchBarTextChanged(string text)
     signal returnPressedWhileSearching
 
@@ -50,25 +48,22 @@ Rectangle {
         id: lineEditContextMenu
     }
 
-    Image {
+    ResponsiveImage {
         id: searchIconImage
 
         anchors.verticalCenter: root.verticalCenter
         anchors.left: root.left
-        anchors.leftMargin: itemMargin
+        anchors.leftMargin: 10
 
-        width: 16
-        height: 16
+        width: 20
+        height: 20
 
-        fillMode: Image.PreserveAspectFit
-        mipmap: true
         source: "qrc:/images/icons/ic_baseline-search-24px.svg"
-    }
 
-    ColorOverlay {
-        anchors.fill: searchIconImage
-        source: searchIconImage
-        color: JamiTheme.contactSearchBarPlaceHolderTextFontColor
+        layer.enabled: true
+        layer.effect: ColorOverlay {
+            color: JamiTheme.primaryForegroundColor
+        }
     }
 
     TextField {
@@ -76,8 +71,10 @@ Rectangle {
 
         anchors.verticalCenter: root.verticalCenter
         anchors.left: searchIconImage.right
+        anchors.right: contactSearchBar.text.length ?
+                           clearTextButton.left :
+                           root.right
 
-        width: root.width - searchIconImage.width - clearTextButton.width - itemMargin * 2
         height: root.height - 5
 
         color: JamiTheme.textColor
@@ -108,9 +105,11 @@ Rectangle {
         id: clearTextButton
 
         anchors.verticalCenter: root.verticalCenter
-        anchors.left: contactSearchBar.right
+        anchors.right: root.right
+        anchors.rightMargin: 10
 
-        preferredSize: 16
+        preferredSize: 20
+        radius: JamiTheme.lineEditRadius
 
         visible: contactSearchBar.text.length
 
diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml
index 5baf1968..8cb8872e 100644
--- a/src/mainview/components/SidePanel.qml
+++ b/src/mainview/components/SidePanel.qml
@@ -88,12 +88,14 @@ Rectangle {
     // Search bar container to embed search label
     ContactSearchBar {
         id: contactSearchBar
-        width: sidePanelRect.width - 26
-        height: 35
+
+        height: 40
         anchors.top: sidePanelRect.top
         anchors.topMargin: 10
         anchors.left: sidePanelRect.left
-        anchors.leftMargin: 16
+        anchors.leftMargin: 15
+        anchors.right: sidePanelRect.right
+        anchors.rightMargin: 15
 
         onContactSearchBarTextChanged: {
             UtilsAdapter.setConversationFilter(text)