diff --git a/src/qml/QFieldCloudScreen.qml b/src/qml/QFieldCloudScreen.qml
index c9023605ec..b02c454b80 100644
--- a/src/qml/QFieldCloudScreen.qml
+++ b/src/qml/QFieldCloudScreen.qml
@@ -180,6 +180,16 @@ Page {
         }
       }
 
+      SearchBar {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 41
+        color: Theme.mainBackgroundColor
+
+        onValidateFilter: function (filter) {
+          table.model.setTextFilter(filter);
+        }
+      }
+
       Rectangle {
         Layout.fillWidth: true
         Layout.fillHeight: true
@@ -192,71 +202,6 @@ Page {
 
           property bool overshootRefresh: false
           property bool refreshing: false
-          headerPositioning: ListView.OverlayHeader
-
-          header: Rectangle {
-            width: table.width
-            height: 41
-            color: Theme.mainBackgroundColor
-            z: 20
-
-            Rectangle {
-              width: table.width
-              height: 40
-              radius: 6
-              border.width: 1
-              color: Theme.mainBackgroundColor
-              border.color: searchBar.activeFocus ? Theme.mainColor : "transparent"
-
-              QfToolButton {
-                id: searchButton
-                width: 40
-                height: 40
-                anchors.left: parent.left
-                bgcolor: "transparent"
-                iconSource: Theme.getThemeIcon("ic_baseline_search_black")
-                iconColor: Theme.mainTextColor
-                onClicked: {
-                  table.model.setTextFilter(searchBar.text);
-                }
-              }
-
-              QfToolButton {
-                id: clearButton
-                anchors.right: parent.right
-                width: 40
-                height: 40
-                iconSource: Theme.getThemeIcon('ic_close_black_24dp')
-                iconColor: Theme.mainTextColor
-                bgcolor: "transparent"
-                visible: searchBar.text !== ""
-                onClicked: {
-                  searchBar.text = '';
-                  table.model.setTextFilter('');
-                }
-              }
-
-              TextField {
-                id: searchBar
-                padding: 7
-                anchors.left: searchButton.right
-                anchors.right: clearButton.left
-                anchors.rightMargin: 4
-                height: 40
-                leftPadding: padding + 4
-                selectByMouse: true
-                placeholderText: (!searchBar.activeFocus && text === "" && displayText === "") ? qsTr("Search for project") : ""
-                background: Item {
-                }
-                Keys.onEnterPressed: {
-                  table.model.setTextFilter(text);
-                }
-                Keys.onReturnPressed: {
-                  table.model.setTextFilter(text);
-                }
-              }
-            }
-          }
 
           model: QFieldCloudProjectsFilterModel {
             projectsModel: cloudProjectsModel
diff --git a/src/qml/SearchBar.qml b/src/qml/SearchBar.qml
new file mode 100644
index 0000000000..bd3174f9e0
--- /dev/null
+++ b/src/qml/SearchBar.qml
@@ -0,0 +1,67 @@
+import QtQuick
+import QtQuick.Controls
+import org.qfield
+import Theme
+
+Rectangle {
+  z: 20
+
+  signal validateFilter(string text)
+
+  Rectangle {
+    width: parent.width
+    height: 40
+    radius: 6
+    border.width: 1
+    color: Theme.mainBackgroundColor
+    border.color: searchBar.activeFocus ? Theme.mainColor : "transparent"
+
+    QfToolButton {
+      id: clearButton
+      anchors.right: parent.right
+      width: 40
+      height: 40
+      iconSource: Theme.getThemeIcon('ic_close_black_24dp')
+      iconColor: Theme.mainTextColor
+      bgcolor: "transparent"
+      visible: searchBar.text !== ""
+      onClicked: {
+        searchBar.text = '';
+        validateFilter(searchBar.text);
+      }
+    }
+
+    QfToolButton {
+      id: searchButton
+      width: 40
+      height: 40
+      anchors.left: parent.left
+      bgcolor: "transparent"
+      iconSource: Theme.getThemeIcon("ic_baseline_search_black")
+      iconColor: Theme.mainTextColor
+      onClicked: {
+        validateFilter(searchBar.text);
+      }
+    }
+
+    TextField {
+      id: searchBar
+      rightPadding: 7
+      anchors.left: searchButton.right
+      anchors.right: clearButton.left
+      anchors.leftMargin: -16
+      anchors.rightMargin: 4
+      height: 40
+      selectByMouse: true
+      placeholderText: (!searchBar.activeFocus && text === "" && displayText === "") ? qsTr("Search for project") : ""
+      background: Item {
+      }
+      Keys.onEnterPressed: {
+        validateFilter(searchBar.text);
+      }
+      Keys.onReturnPressed: {
+        validateFilter(searchBar.text);
+      }
+    }
+  }
+}
diff --git a/src/qml/qml.qrc b/src/qml/qml.qrc
index b4a0917736..0165e94152 100644
--- a/src/qml/qml.qrc
+++ b/src/qml/qml.qrc
@@ -118,5 +118,6 @@
         <file>QFieldGuide.qml</file>
         <file>imports/Theme/QfProgrerssRing.qml</file>
         <file>imports/Theme/QfScrollBar.qml</file>
+        <file>SearchBar.qml</file>
     </qresource>
 </RCC>