diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 4e9f4b352f7..1d5145cb3be 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -3431,19 +3431,21 @@ td {
 
 /* Product Screen Search Bar */
 
-.search-bar-portal {
+.search-bar-portal,
+.search-bar-portal .search-box {
     display: flex;
+    flex: 1;
 }
 
 .search-bar-portal .search-box {
     font-size: medium;
     position: relative;
-    display: flex;
     align-items: center;
     margin: 0 15px;
 }
 
 .search-bar-portal .search-box input {
+    flex: 1;
     font-size: medium;
     height: 30px;
     border: none;
@@ -3629,6 +3631,13 @@ td {
     background: rgb(104,69,95);
 }
 
+@media screen and (max-width: 768px) {
+
+    .pos .search-bar-portal .search-box .icon .fa-search {
+        color: #f0f0f0;
+    }
+}
+
 /** CashMovePopup **/
 
 .cash-move {
diff --git a/addons/point_of_sale/static/src/js/Chrome.js b/addons/point_of_sale/static/src/js/Chrome.js
index 66882855536..673178fc281 100644
--- a/addons/point_of_sale/static/src/js/Chrome.js
+++ b/addons/point_of_sale/static/src/js/Chrome.js
@@ -31,6 +31,7 @@ odoo.define('point_of_sale.Chrome', function(require) {
             useExternalListener(window, 'beforeunload', this._onBeforeUnload);
             useListener('show-main-screen', this.__showScreen);
             useListener('toggle-debug-widget', debounce(this._toggleDebugWidget, 100));
+            useListener('toggle-mobile-searchbar', this._toggleMobileSearchBar);
             useListener('show-temp-screen', this.__showTempScreen);
             useListener('close-temp-screen', this.__closeTempScreen);
             useListener('close-pos', this._closePos);
@@ -46,6 +47,7 @@ odoo.define('point_of_sale.Chrome', function(require) {
             this.state = useState({
                 uiState: 'LOADING', // 'LOADING' | 'READY' | 'CLOSING'
                 debugWidgetIsShown: true,
+                mobileSearchBarIsShown: false,
                 hasBigScrollBars: false,
                 sound: { src: null },
                 notification: {
@@ -98,6 +100,16 @@ odoo.define('point_of_sale.Chrome', function(require) {
         get clientScreenButtonIsShown() {
             return this.env.pos.config.iface_customer_facing_display;
         }
+
+        /**
+         * Used to give the `state.mobileSearchBarIsShown` value to main screen props
+         */
+        get mainScreenPropsFielded() {
+            return Object.assign({}, this.mainScreenProps, {
+                mobileSearchBarIsShown: this.state.mobileSearchBarIsShown,
+            });
+        }
+
         /**
          * Startup screen can be based on pos config so the startup screen
          * is only determined after pos data is completely loaded.
@@ -298,6 +310,13 @@ odoo.define('point_of_sale.Chrome', function(require) {
         _toggleDebugWidget() {
             this.state.debugWidgetIsShown = !this.state.debugWidgetIsShown;
         }
+        _toggleMobileSearchBar({ detail: isSearchBarEnabled }) {
+            if (isSearchBarEnabled !== null) {
+                this.state.mobileSearchBarIsShown = isSearchBarEnabled;
+            } else {
+                this.state.mobileSearchBarIsShown = !this.state.mobileSearchBarIsShown;
+            }
+        }
         _onPlaySound({ detail: name }) {
             let src;
             if (name === 'error') {
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js
index 10834b3f3c9..8271fb12c96 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js
@@ -25,6 +25,7 @@ odoo.define('point_of_sale.ProductsWidget', function(require) {
         }
         willUnmount() {
             this.env.pos.off('change:selectedCategoryId', null, this);
+            this.trigger('toggle-mobile-searchbar', false);
         }
         get selectedCategoryId() {
             return this.env.pos.get('selectedCategoryId');
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js
index 819d5ce8cc4..9ebfa77f60a 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js
@@ -39,6 +39,9 @@ odoo.define('point_of_sale.ProductsWidgetControlPanel', function(require) {
             this.trigger('switch-category', 0);
             this.trigger('update-search', productName);
         }
+        _toggleMobileSearchbar() {
+            this.trigger('toggle-mobile-searchbar');
+        }
         async loadProductFromDB() {
             if(!this.searchWordInput.el.value)
                 return;
diff --git a/addons/point_of_sale/static/src/xml/Chrome.xml b/addons/point_of_sale/static/src/xml/Chrome.xml
index 088f1f27663..1708de8bc19 100644
--- a/addons/point_of_sale/static/src/xml/Chrome.xml
+++ b/addons/point_of_sale/static/src/xml/Chrome.xml
@@ -13,9 +13,9 @@
                     <TicketButton isTicketScreenShown="isTicketScreenShown" />
                 </div>
                 <div class="pos-rightheader">
-                    <TicketButton isTicketScreenShown="isTicketScreenShown" t-if="env.isMobile" />
+                    <TicketButton isTicketScreenShown="isTicketScreenShown" t-if="env.isMobile and !state.mobileSearchBarIsShown" />
                     <div class="search-bar-portal" />
-                    <div class="status-buttons-portal" />
+                    <div class="status-buttons-portal" t-att-class="{ oe_hidden: state.mobileSearchBarIsShown }"/>
                 </div>
             </div>
             <t t-if="state.uiState === 'READY'">
@@ -35,7 +35,7 @@
                             <div class="subwindow-container">
                                 <div class="subwindow-container-fix screens">
                                     <t isShown="!tempScreen.isShown" t-component="mainScreen.component"
-                                       t-props="mainScreenProps" t-key="mainScreen.name" />
+                                       t-props="mainScreenPropsFielded" t-key="mainScreen.name" />
                                     <t t-if="tempScreen.isShown" t-component="tempScreen.component"
                                        t-props="tempScreenProps" t-key="tempScreen.name" />
                                 </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
index ec5a5bfc70b..6a08c9cf08c 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
@@ -23,7 +23,7 @@
                     </t>
                 </div>
                 <div class="rightpane" t-if="!env.isMobile || mobile_pane === 'right'">
-                    <ProductsWidget/>
+                    <ProductsWidget mobileSearchBarIsShown="props.mobileSearchBarIsShown"/>
                     <t t-if="env.isMobile">
                         <MobileOrderWidget pane="mobile_pane" t-on-switchpane="switchPane"/>
                     </t>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml
index 3dfd52766fa..fbd056b2f92 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml
@@ -3,7 +3,7 @@
 
     <t t-name="ProductsWidget" owl="1">
       <div class="products-widget">
-            <ProductsWidgetControlPanel breadcrumbs="breadcrumbs" subcategories="subcategories" hasNoCategories="hasNoCategories" />
+            <ProductsWidgetControlPanel mobileSearchBarIsShown="props.mobileSearchBarIsShown" breadcrumbs="breadcrumbs" subcategories="subcategories" hasNoCategories="hasNoCategories" />
             <ProductList products="productsToDisplay" searchWord="searchWord" />
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
index e44943716af..a763bbf680d 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
@@ -38,16 +38,21 @@
             </t>
             <Portal target="'.pos .search-bar-portal'">
                 <div class="search-box">
-                    <span class="icon"><i class="fa fa-search"></i></span>
-
-                    <span t-on-click="clearSearch" class="clear-icon">
-                        <i class="fa fa-times" aria-hidden="true"></i>
+                    <span t-if="env.isMobile" class="icon" t-on-click="_toggleMobileSearchbar">
+                        <i t-attf-class="fa {{props.mobileSearchBarIsShown ? 'fa-arrow-left' : 'fa-search'}}"/>
                     </span>
-                    <span class="database-icon">
-                        <i class="fa fa-database" t-on-click="loadProductFromDB"/>
+                    <span t-else="" class="icon">
+                        <i class="fa fa-search"/>
                     </span>
-                    <input t-ref="search-word-input" type="text" placeholder="Search Products..." t-on-keyup="updateSearch" />
-
+                    <t t-if="!env.isMobile || props.mobileSearchBarIsShown">
+                        <span t-on-click="clearSearch" class="clear-icon">
+                            <i class="fa fa-times" aria-hidden="true"/>
+                        </span>
+                        <span class="database-icon">
+                            <i class="fa fa-database" t-on-click="loadProductFromDB"/>
+                        </span>
+                        <input t-ref="search-word-input" autofocus="autofocus" type="text" placeholder="Search Products..." t-on-keyup="updateSearch" />
+                    </t>
                 </div>
             </Portal>
         </div>
diff --git a/addons/pos_restaurant/static/src/xml/Chrome.xml b/addons/pos_restaurant/static/src/xml/Chrome.xml
index 86032c07017..c8f6f3a8731 100644
--- a/addons/pos_restaurant/static/src/xml/Chrome.xml
+++ b/addons/pos_restaurant/static/src/xml/Chrome.xml
@@ -3,7 +3,7 @@
 
     <t t-name="Chrome" t-inherit="point_of_sale.Chrome" t-inherit-mode="extension" owl="1">
         <xpath expr="//div[hasclass('search-bar-portal')]" position="before">
-            <BackToFloorButton />
+            <BackToFloorButton t-att-class="{ oe_hidden: state.mobileSearchBarIsShown }"/>
         </xpath>
     </t>