diff --git a/resources/views/components/grocery/popular-products.blade.php b/resources/views/components/grocery/popular-products.blade.php
index 059483b..a4a200e 100644
--- a/resources/views/components/grocery/popular-products.blade.php
+++ b/resources/views/components/grocery/popular-products.blade.php
@@ -1,8 +1,8 @@
-<section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
+<section class="container-fluid pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
     <div class="row">
 
         <!-- Categories list -->
-        <div class="col-lg-3 pb-2 pb-sm-3 pb-md-4 mb-5 mb-lg-0">
+        <div class="col-lg-3 col-xl-2 pb-2 pb-sm-3 pb-md-4 mb-5 mb-lg-0">
             <h2 class="h3 border-bottom pb-3 pb-md-4 mb-4">{{ __('home_popular_products.category') }}</h2>
             <div class="row nav g-3 g-sm-4">
 
@@ -32,7 +32,7 @@
             </div>
         </div>
 
-        <div class="col-lg-9">
+        <div class="col-lg-9 col-xl-10">
             <div class="d-flex align-items-center justify-content-between border-bottom pb-3 pb-md-4 mb-3 mb-lg-4">
                 <h2 class="h3 mb-0">{{ __('home_popular_products.title') }}</h2>
                 <div class="nav ms-3">
@@ -44,7 +44,7 @@
             </div>
 
             <!-- Products grid -->
-            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-3 row-cols-xl-4 g-4">
+            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-3 row-cols-xl-5 row-cols-xxl-6 g-4">
 
                 @foreach ($products as $key => $value)
                     <!-- Item -->