diff --git a/addons/point_of_sale/data/point_of_sale_demo.xml b/addons/point_of_sale/data/point_of_sale_demo.xml
index 258154b22b8..4fa9427b13b 100644
--- a/addons/point_of_sale/data/point_of_sale_demo.xml
+++ b/addons/point_of_sale/data/point_of_sale_demo.xml
@@ -36,13 +36,16 @@
 
         <!-- Resource: pos.category -->
         <record id="pos_category_miscellaneous" model="pos.category">
-            <field name="name">Misc</field>
+          <field name="name">Misc</field>
+          <field name="image_128" type="base64" file="point_of_sale/static/img/misc_category.png" />
         </record>
         <record id="pos_category_desks" model="pos.category">
-            <field name="name">Desks</field>
+          <field name="name">Desks</field>
+          <field name="image_128" type="base64" file="point_of_sale/static/img/desk_category.png" />
         </record>
         <record id="pos_category_chairs" model="pos.category">
-            <field name="name">Chairs</field>
+          <field name="name">Chairs</field>
+          <field name="image_128" type="base64" file="point_of_sale/static/img/chair_category.png" />
         </record>
 
         <record model="pos.config" id="pos_config_main">
diff --git a/addons/point_of_sale/data/point_of_sale_onboarding.xml b/addons/point_of_sale/data/point_of_sale_onboarding.xml
index 012014653d8..be12d687bb3 100644
--- a/addons/point_of_sale/data/point_of_sale_onboarding.xml
+++ b/addons/point_of_sale/data/point_of_sale_onboarding.xml
@@ -3,12 +3,15 @@
     <!-- Resource: pos.category -->
     <record id="pos_category_miscellaneous" model="pos.category">
         <field name="name">Misc</field>
+        <field name="image_128" type="base64" file="point_of_sale/static/img/misc_category.png" />
     </record>
     <record id="pos_category_desks" model="pos.category">
         <field name="name">Desks</field>
+        <field name="image_128" type="base64" file="point_of_sale/static/img/desk_category.png" />
     </record>
     <record id="pos_category_chairs" model="pos.category">
         <field name="name">Chairs</field>
+        <field name="image_128" type="base64" file="point_of_sale/static/img/chair_category.png" />
     </record>
 
     <record model="pos.config" id="pos_config_main">
diff --git a/addons/point_of_sale/static/img/chair_category.png b/addons/point_of_sale/static/img/chair_category.png
new file mode 100644
index 00000000000..4d641054a26
Binary files /dev/null and b/addons/point_of_sale/static/img/chair_category.png differ
diff --git a/addons/point_of_sale/static/img/desk_category.png b/addons/point_of_sale/static/img/desk_category.png
new file mode 100644
index 00000000000..f9ef6386544
Binary files /dev/null and b/addons/point_of_sale/static/img/desk_category.png differ
diff --git a/addons/point_of_sale/static/img/misc_category.png b/addons/point_of_sale/static/img/misc_category.png
new file mode 100644
index 00000000000..bbc4721d996
Binary files /dev/null and b/addons/point_of_sale/static/img/misc_category.png differ
diff --git a/addons/point_of_sale/static/src/app/generic_components/category_selector/category_selector.xml b/addons/point_of_sale/static/src/app/generic_components/category_selector/category_selector.xml
index 96c662969a4..600948af9d1 100644
--- a/addons/point_of_sale/static/src/app/generic_components/category_selector/category_selector.xml
+++ b/addons/point_of_sale/static/src/app/generic_components/category_selector/category_selector.xml
@@ -1,23 +1,27 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates id="template" xml:space="preserve">
     <t t-name="point_of_sale.CategorySelector">
-        <div t-attf-class="{{props.class}} d-flex overflow-auto">
-            <div t-foreach="props.categories" t-as="category" t-key="category.id"
-                class="d-flex align-items-center">
-                <i  t-if="category.separator"
-                    t-attf-class="px-2 fa {{category.separator}}" 
-                    aria-hidden="true"/>
-                <button class="category-button btn btn-light h-100 fw-bolder" 
-                    t-on-click="() => props.onClick(category.id)">
-                    <div t-if="category.imageUrl"
-                        class="category-img">
-                        <img t-att-src="category.imageUrl" alt="Category" />
-                    </div>
-                    <i  t-if="category.icon"
-                        t-attf-class="fa {{category.icon}}" 
+        <div t-attf-class="{{props.class}} d-flex overflow-auto w-100 flex-grow-1">
+            <div class="d-flex flex-fill gap-3 align-content-start p-2 bg-view overflow-auto">
+                <div t-foreach="props.categories" t-as="category" t-key="category.id"
+                    class="d-flex align-items-center">
+                    <i  t-if="category.separator"
+                        t-attf-class="px-2 fa {{category.separator}}" 
                         aria-hidden="true"/>
-                    <t t-esc="category.name" />
-                </button>
+                    <button
+                        class="category-button btn btn-light d-flex flex-column align-items-center justify-content-center category-item p-1 overflow-hidden h-100"
+                        t-on-click="() => props.onClick(category.id)">
+                        <img t-if="category.imageUrl"
+                        class="rounded h-75"
+                        t-att-src="category.imageUrl"
+                        alt="Category" />
+                        <i  t-if="category.icon"
+                            t-attf-class="fa {{category.icon}}" 
+                            aria-hidden="true"/>
+                        <span t-if="category.name" class="w-100 text-center fs-5" t-esc="category.name" />
+                    </button>
+                </div>
+                
             </div>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss
new file mode 100644
index 00000000000..34a86e8a35c
--- /dev/null
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.scss
@@ -0,0 +1,3 @@
+.h-12 {
+    height: 12%;
+}
\ No newline at end of file
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
index 34e1036ad08..8f84609cbc4 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/control_panel/control_panel.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ProductsWidgetControlPanel">
-        <div class="products-widget-control d-flex bg-view shadow-sm" t-ref="products-widget-control">
+        <div class="products-widget-control d-flex bg-view shadow-sm" t-att-class="{'h-12': categoriesHasImages}" t-ref="products-widget-control">
             <CategorySelector
                 categories="getCategories()"
                 onClick="(id) => this.pos.setSelectedCategoryId(id)"
@@ -14,8 +14,8 @@
                     <i t-attf-class="fa {{state.mobileSearchBarIsShown ? 'fa-arrow-right' : 'fa-search'}}"/>
                 </button>
                 <t t-if="!state.isMobile || state.mobileSearchBarIsShown">
-                    <div class="input-group h-100">
-                        <div class="pos-search-bar form-control d-flex align-items-center py-1 bg-view border-0 rounded-0 border-start">
+                    <div class="input-group border-bottom p-2 m-2" t-att-class="{'h-50': categoriesHasImages}">
+                        <div class="pos-search-bar form-control d-flex align-items-center py-1 bg-view border-0 rounded-0">
                             <i class="oi oi-search me-2"/>
                             <input class="flex-grow-1 w-auto h-100 border-0 px-2 me-4" t-model="this.pos.searchProductWord" placeholder="Search Products..." type="text" autofocus="autofocus" t-on-keyup="updateSearch" />
                             <i t-if="this.pos.searchProductWord" class="fa fa-times position-absolute end-0 me-2 pe-1 cursor-pointer" t-on-click="_clearSearch"/>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.js b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.js
index 46de715ddc0..6d4baa2b52f 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.js
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.js
@@ -57,6 +57,15 @@ export class ProductsWidget extends Component {
                 };
             });
     }
+    get categoriesHasImages() {
+        const categories = this.getCategories();
+        for (const category of categories) {
+            if (category.imageUrl) {
+                return true;
+            }
+        }
+        return false;
+    }
     get posHasValidProduct() {
         return this.pos.posHasValidProduct();
     }
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
index 4e45988f5ed..b47b92c4c24 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.scss
@@ -7,3 +7,11 @@
         grid-template-columns: repeat(3, 1fr);
     }
 }
+
+.button-no-demo {
+    color: #017e84 !important;
+}
+
+.h-12 {
+    height: 12%;
+}
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
index 98af7567435..4ddf53fcbcf 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/product_list/product_list.xml
@@ -3,13 +3,13 @@
 
     <t t-name="point_of_sale.ProductsWidget">
         <div class="products-widget d-flex flex-column flex-grow-1 overflow-auto">
-            <div class="products-widget-control d-flex bg-view shadow-sm">
+            <div class="products-widget-control d-flex bg-view shadow-sm" t-att-class="{'h-12': categoriesHasImages}">
                 <CategorySelector
                     categories="getCategories()"
                     onClick="(id) => this.pos.setSelectedCategoryId(id)"
                 />
                 <Input tModel="[pos, 'searchProductWord']"
-                    class="'ms-auto'"
+                    class="'ms-auto p-2 m-2'"
                     isSmall="ui.isSmall"
                     placeholder="'Search products...'"
                     icon="{type: 'fa', value: 'fa-search'}"
@@ -38,7 +38,7 @@
                         </t>
                         <t t-else="">
                             <div t-if="!state.loadingDemo">
-                                <p class="text-large">No products available. Explore <a role="button" class="fw-bold text-muted" t-on-click="loadDemoDataProducts">demo data</a> or <a role="button" class="fw-bold text-muted" t-on-click="createNewProducts">create your own</a></p>
+                                <p class="text-large">No products available. Explore <a role="button" class="button-no-demo fw-bolder" t-on-click="loadDemoDataProducts">demo data</a> or <a role="button" class="button-no-demo fw-bolder" t-on-click="createNewProducts">create your own</a>.</p>
                             </div>
                             <div t-else="" class="block-top-header position-absolute top-0 start-0 bg-black opacity-50 w-100 h-100 z-1000">
                                 <div class="d-flex h-100 w-100 text-white flex-row align-items-center justify-content-center">
diff --git a/addons/pos_restaurant/data/pos_restaurant_demo.xml b/addons/pos_restaurant/data/pos_restaurant_demo.xml
index 66778253648..a3a48600758 100644
--- a/addons/pos_restaurant/data/pos_restaurant_demo.xml
+++ b/addons/pos_restaurant/data/pos_restaurant_demo.xml
@@ -2,6 +2,7 @@
     <data noupdate="1">
         <record id="drinks" model="pos.category">
             <field name="name">Drinks</field>
+            <field name="image_128" type="base64" file="pos_restaurant/static/img/drink_category.png" />
         </record>
     
         <record id="product_category_pos_food" model="product.category">
@@ -10,7 +11,8 @@
         </record>
     
         <record id="food" model="pos.category">
-                <field name="name">Food</field>
+            <field name="name">Food</field>
+            <field name="image_128" type="base64" file="pos_restaurant/static/img/food_category.png" />
         </record>
 
         <!-- Food -->
diff --git a/addons/pos_restaurant/data/pos_restaurant_onboarding.xml b/addons/pos_restaurant/data/pos_restaurant_onboarding.xml
index f020e8345d2..6c68199fd3c 100644
--- a/addons/pos_restaurant/data/pos_restaurant_onboarding.xml
+++ b/addons/pos_restaurant/data/pos_restaurant_onboarding.xml
@@ -2,11 +2,13 @@
 
     <record id="drinks" model="pos.category">
         <field name="name">Drinks</field>
+        <field name="image_128" type="base64" file="pos_restaurant/static/img/drink_category.png" />
     </record>
 
     <record id="product_category_pos_food" model="product.category">
         <field name="parent_id" ref="point_of_sale.product_category_pos"/>
         <field name="name">Food</field>
+        <field name="image_128" type="base64" file="pos_restaurant/static/img/food_category.png" />
     </record>
 
     <record id="food" model="pos.category">
diff --git a/addons/pos_restaurant/static/img/drink_category.png b/addons/pos_restaurant/static/img/drink_category.png
new file mode 100644
index 00000000000..90def8a9250
Binary files /dev/null and b/addons/pos_restaurant/static/img/drink_category.png differ
diff --git a/addons/pos_restaurant/static/img/food_category.png b/addons/pos_restaurant/static/img/food_category.png
new file mode 100644
index 00000000000..e03504ffc21
Binary files /dev/null and b/addons/pos_restaurant/static/img/food_category.png differ