diff --git a/app/Http/Controllers/Admin/AreaController.php b/app/Http/Controllers/Admin/AreaController.php
index f193ca7..602832b 100644
--- a/app/Http/Controllers/Admin/AreaController.php
+++ b/app/Http/Controllers/Admin/AreaController.php
@@ -17,7 +17,7 @@ class AreaController extends Controller
     //
     public function index()
     {
-        $areas = Area::all('name', 'icon')->sortBy('name');
+        $areas = Area::orderByDesc('sort')->orderBy('name')->get();
         return view('admin.areas.area-list', compact('areas'));
     }
 
diff --git a/app/Models/Area.php b/app/Models/Area.php
index 71d8716..cb514f2 100644
--- a/app/Models/Area.php
+++ b/app/Models/Area.php
@@ -46,6 +46,7 @@ class Area extends Model
         'preloader',
         'product',
         'products',
+        'product_grid',
         'products_page',
         'register',
         'questions',
@@ -60,15 +61,23 @@ class Area extends Model
 
     public function getSegmentAttribute()
     {
-        return json_decode($this->valid_segments,true);
+        return json_decode($this->valid_segments, true);
     }
 
 
-    public function getRouteKeyName(){
+    public function getRouteKeyName()
+    {
         return 'name';
     }
 
-    public function parts(){
+    public function parts()
+    {
         return $this->hasMany(Part::class);
     }
+
+    public function defPart()
+    {
+        $p = $this->parts()->first();
+        return 'segments.' . $p->segment . '.' . $p->part . '.' . $p->part;
+    }
 }
diff --git a/database/migrations/2024_07_04_050212_create_areas_table.php b/database/migrations/2024_07_04_050212_create_areas_table.php
index 161657d..948aba7 100644
--- a/database/migrations/2024_07_04_050212_create_areas_table.php
+++ b/database/migrations/2024_07_04_050212_create_areas_table.php
@@ -19,6 +19,7 @@ return new class extends Migration
             $table->json('valid_segments');
             $table->string('preview')->nullable();
             $table->boolean('use_default')->default(true);
+            $table->integer('sort')->default(0);
             $table->timestamps();
         });
     }
diff --git a/database/seeders/AreaSeeder.php b/database/seeders/AreaSeeder.php
index 60ca89d..98e2133 100644
--- a/database/seeders/AreaSeeder.php
+++ b/database/seeders/AreaSeeder.php
@@ -41,6 +41,7 @@ class AreaSeeder extends Seeder
                 'max' => 2,
                 'preview' => null,
                 'icon' => 'ri-window-line',
+                'sort' => 99
             ],
             [
                 'name' => 'defaultFooter',
@@ -50,6 +51,7 @@ class AreaSeeder extends Seeder
                 'max' => 2,
                 'preview' => null,
                 'icon' => 'ri-window-line rotate-180',
+                'sort' => 98
             ],
             [
                 'name' => 'index',
@@ -61,6 +63,7 @@ class AreaSeeder extends Seeder
                 'max' => 10,
                 'preview' => 'client.welcome',
                 'icon' => 'ri-home-smile-line',
+                'sort' => 97
             ],
             [
                 'name' => 'post',
@@ -271,12 +274,22 @@ class AreaSeeder extends Seeder
                 'preview' => null,
                 'icon' => 'ri-mail-open-line',
             ],
+            [
+                'name' => 'product-grid',
+                'valid_segments' => json_encode(
+                    ["product_grid"]
+                ),
+                'max' => 1,
+                'preview' => null,
+                'icon' => 'ri-layout-grid-line',
+            ],
         ];
 
         foreach ($areas as $area) {
             $a = new Area();
             $a->name = $area['name'];
             $a->max = $area['max'];
+            $a->sort = $area['sort']??0;
             $a->valid_segments = $area['valid_segments'];
             $a->icon = $area['icon'];
             $a->preview = $area['preview'];
diff --git a/database/seeders/PartSeeder.php b/database/seeders/PartSeeder.php
index 9d637eb..6bf5af4 100644
--- a/database/seeders/PartSeeder.php
+++ b/database/seeders/PartSeeder.php
@@ -306,6 +306,15 @@ class PartSeeder extends Seeder
         $part->sort = 1;
         $part->save();
 
+        // -------------------------------------------------------------
+
+        $part = new Part();
+        $part->segment = 'product_grid';
+        $part->part = 'DefaultProductGrid';
+        $part->area_id = Area::where('name', 'product-grid')->first()->id;
+        $part->sort = 1;
+        $part->save();
+
 
     }
 }
diff --git a/resources/lang/fa.json b/resources/lang/fa.json
index 7698465..d994f79 100644
--- a/resources/lang/fa.json
+++ b/resources/lang/fa.json
@@ -271,7 +271,7 @@
     "Index image": "تصویر شاخص",
     "Information": "اطلاعات",
     "Interaction": "تعامل",
-    "Invalid area segment": "محیط نامطلوب است",
+    "Invalid area segment": "",
     "Invalid json file!": "فایل جی‌سان معتبر نیست",
     "Invalid morph": "چند ریخیتی نا معتبر",
     "Invoice": "صورت حساب",
@@ -353,6 +353,7 @@
     "Print": "چاپ",
     "Product": "محصول",
     "Product added to compare": "محصول به فهرست مقایسه افزوده شد",
+    "Product grid": "کاشی محصول",
     "Product added to favorites": "محصول به علاقه‌مندی شما افزوده شد",
     "Product removed from compare": "محصول از فهرست مقایسه حذف شد",
     "Product removed from favorites": "محصول از علاقه مندی های شما حذف شد",
diff --git a/resources/views/segments/product/ProductAria/ProductAria.blade.php b/resources/views/segments/product/ProductAria/ProductAria.blade.php
index c397d6f..d4bf5ac 100644
--- a/resources/views/segments/product/ProductAria/ProductAria.blade.php
+++ b/resources/views/segments/product/ProductAria/ProductAria.blade.php
@@ -201,18 +201,13 @@
         <h3 class="mt-4">
             {{__("Related products")}}
         </h3>
-        <div id="rel-products">
+        <div id="rel-products" class="mb-2">
             @foreach($product->category->products()->where('status',1)->limit(10)->get() as $p)
-                <div class="item">
-                    <div class="aria-product-list">
-                        <a href="{{$p->imgUrl()}}">
-                            <img src="{{$p->imgUrl()}}" alt="{{$p->name}}" loading="lazy">
-                            <h5>
-                                {{$p->name}}
-                            </h5>
-                        </a>
+                @foreach($product->category->products()->where('status',1)->limit(10)->get() as $p)
+                    <div class="item">
+                        @include(\App\Models\Area::where('name','product-grid')->first()->defPart(),['$product' => $p])
                     </div>
-                </div>
+                @endforeach
             @endforeach
         </div>
     </div>
diff --git a/resources/views/segments/product/ProductKaren/ProductKaren.blade.php b/resources/views/segments/product/ProductKaren/ProductKaren.blade.php
index 0eb8037..147bfb8 100644
--- a/resources/views/segments/product/ProductKaren/ProductKaren.blade.php
+++ b/resources/views/segments/product/ProductKaren/ProductKaren.blade.php
@@ -197,17 +197,10 @@
         <h3 class="mt-4">
             {{__("Related products")}}
         </h3>
-        <div id="rel-products">
+        <div id="rel-products" class="mb-2">
             @foreach($product->category->products()->where('status',1)->limit(10)->get() as $p)
                 <div class="item">
-                    <div class="karen-product-list">
-                        <a href="{{$p->imgUrl()}}">
-                            <img src="{{$p->imgUrl()}}"  alt="{{$p->name}}" loading="lazy">
-                            <h5>
-                                {{$p->name}}
-                            </h5>
-                        </a>
-                    </div>
+                @include(\App\Models\Area::where('name','product-grid')->first()->defPart(),['$product' => $p])
                 </div>
             @endforeach
         </div>
diff --git a/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.blade.php b/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.blade.php
new file mode 100644
index 0000000..2cde60c
--- /dev/null
+++ b/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.blade.php
@@ -0,0 +1,37 @@
+<div class="DefaultProductGrid">
+    <a class="fav-btn" data-slug="{{$product->slug}}" data-is-fav="{{$product->isFav()}}"
+       data-bs-custom-class="custom-tooltip"
+       data-bs-toggle="tooltip" data-bs-placement="auto" title="{{__("Add to / Remove from favorites")}}">
+        <i class="ri-heart-line"></i>
+        <i class="ri-heart-fill"></i>
+    </a>
+    <a class="compare-btn" data-slug="{{$product->slug}}"
+       data-bs-custom-class="custom-tooltip"
+       data-bs-toggle="tooltip" data-bs-placement="auto"
+       title="{{__("Add to/ Remove from compare list")}}">
+        <i class="ri-scales-3-line"></i>
+    </a>
+    <a href="{{$product->webUrl()}}">
+        <img src="{{$product->imgUrl()}}" alt="{{$product->name}}" loading="lazy">
+        <h3>
+            {{$product->name}}
+        </h3>
+        <div class="prices">
+            @if($product->hasDiscount())
+                <span class="old-price">
+                    {{$product->oldPrice()}}
+                </span>
+            @endif
+            <span class="price">
+                {{$product->getPrice()}}
+            </span>
+        </div>
+        <div class="p-2">
+            <a href="{{ route('client.product-card-toggle',$product->slug) }}"
+               class="btn btn-outline-primary w-100 add-to-card">
+                <i class="ri-shopping-bag-3-line"></i>
+                {{__("Add to card")}}
+            </a>
+        </div>
+    </a>
+</div>
diff --git a/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.js b/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.json b/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.json
new file mode 100644
index 0000000..6c223e2
--- /dev/null
+++ b/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.json
@@ -0,0 +1,10 @@
+{
+    "name": "DefaultProductGrid",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}
\ No newline at end of file
diff --git a/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.php b/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.php
new file mode 100644
index 0000000..c25576e
--- /dev/null
+++ b/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class DefaultProductGrid
+{
+    public static function onAdd(Part $part = null)
+    {
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}
diff --git a/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.scss b/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.scss
new file mode 100644
index 0000000..672b697
--- /dev/null
+++ b/resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.scss
@@ -0,0 +1,84 @@
+.DefaultProductGrid {
+    border: 1px solid silver;
+    box-shadow: var(--xshop-shadow);
+    border-radius: var(--xshop-border-radius);
+    position: relative;
+    overflow: hidden;
+
+    img{
+        width: 100%;
+    }
+
+    h3 {
+        margin-top: 1rem;
+        text-align: center;
+        font-size: 20px;
+        font-weight: 300;
+        color: var(--xshop-text);
+        height: 2.1em;
+        overflow: hidden;
+    }
+
+    .prices {
+        display: grid;
+        grid-auto-columns: minmax(0, 1fr);
+        grid-auto-flow: column;
+        text-align: center;
+
+        span {
+            display: block;
+            padding: .5rem;
+        }
+
+        .old-price{
+            text-decoration: red line-through;
+            color: gray;
+        }
+    }
+
+    .fav-btn, .compare-btn {
+        position: absolute;
+        inset-inline-start: -12%;
+        top: 3%;
+        width: 40px;
+        height: 40px;
+        background: #ffffff55;
+        font-size: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        z-index: 4;
+        cursor: pointer;
+        transition: .4s;
+
+        &:hover {
+            background: var(--xshop-primary);
+            color: var(--xshop-diff);
+        }
+    }
+
+    .fav-btn {
+        top: calc(3% + 50px);
+
+        &[data-is-fav="-1"]{
+            display: none;
+        }
+        &[data-is-fav="1"]{
+            .ri-heart-line{
+                display: none;
+            }
+        }
+        &[data-is-fav="0"]{
+            .ri-heart-fill{
+                display: none;
+            }
+        }
+    }
+
+    &:hover {
+        .fav-btn, .compare-btn {
+            inset-inline-start: 3%;
+        }
+    }
+}
diff --git a/resources/views/segments/product_grid/DefaultProductGrid/screenshot.png b/resources/views/segments/product_grid/DefaultProductGrid/screenshot.png
new file mode 100644
index 0000000..16ee2a5
Binary files /dev/null and b/resources/views/segments/product_grid/DefaultProductGrid/screenshot.png differ
diff --git a/resources/views/segments/products_page/ProductGrid/ProductGrid.blade.php b/resources/views/segments/products_page/ProductGrid/ProductGrid.blade.php
index 16c1c8b..6458bb4 100644
--- a/resources/views/segments/products_page/ProductGrid/ProductGrid.blade.php
+++ b/resources/views/segments/products_page/ProductGrid/ProductGrid.blade.php
@@ -6,41 +6,7 @@
         <div class="row">
             @foreach($products as $product)
                 <div class="col-md-4 p-2">
-                    <div class="product-item">
-                        <a class="fav-btn" data-slug="{{$product->slug}}" data-is-fav="{{$product->isFav()}}"
-                           data-bs-custom-class="custom-tooltip"
-                           data-bs-toggle="tooltip" data-bs-placement="auto" title="{{__("Add to / Remove from favorites")}}">
-                            <i class="ri-heart-line"></i>
-                            <i class="ri-heart-fill"></i>
-                        </a>
-                        <a class="compare-btn" data-slug="{{$product->slug}}"
-                           data-bs-custom-class="custom-tooltip"
-                           data-bs-toggle="tooltip" data-bs-placement="auto" title="{{__("Add to/ Remove from compare list")}}">
-                            <i class="ri-scales-3-line"></i>
-                        </a>
-                        <a href="{{$product->webUrl()}}">
-                            <img src="{{$product->imgUrl()}}" alt="{{$product->name}}" loading="lazy">
-                            <h3>
-                                {{$product->name}}
-                            </h3>
-                            <div class="prices">
-                                @if($product->hasDiscount())
-                                    <span class="old-price">
-                                        {{$product->oldPrice()}}
-                                    </span>
-                                @endif
-                                <span class="price">
-                                    {{$product->getPrice()}}
-                                </span>
-                            </div>
-                            <div class="p-2">
-                                <a href="{{ route('client.product-card-toggle',$product->slug) }}" class="btn btn-outline-primary w-100 add-to-card">
-                                    <i class="ri-shopping-bag-3-line"></i>
-                                    {{__("Add to card")}}
-                                </a>
-                            </div>
-                        </a>
-                    </div>
+                    @include(\App\Models\Area::where('name','product-grid')->first()->defPart(),compact('product'))
                 </div>
             @endforeach
         </div>
diff --git a/resources/views/segments/products_page/ProductGrid/ProductGrid.scss b/resources/views/segments/products_page/ProductGrid/ProductGrid.scss
index a95d820..648052f 100644
--- a/resources/views/segments/products_page/ProductGrid/ProductGrid.scss
+++ b/resources/views/segments/products_page/ProductGrid/ProductGrid.scss
@@ -7,82 +7,4 @@
         object-fit: cover;
     }
 
-    .product-item {
-        border: 1px solid silver;
-        box-shadow: var(--xshop-shadow);
-        border-radius: var(--xshop-border-radius);
-        position: relative;
-        overflow: hidden;
-
-        h3 {
-            margin-top: 1rem;
-            text-align: center;
-            font-size: 20px;
-            font-weight: 300;
-            color: var(--xshop-text);
-        }
-
-        .prices {
-            display: grid;
-            grid-auto-columns: minmax(0, 1fr);
-            grid-auto-flow: column;
-            text-align: center;
-
-            span {
-                display: block;
-                padding: .5rem;
-            }
-
-            .old-price{
-                text-decoration: red line-through;
-                color: gray;
-            }
-        }
-
-        .fav-btn, .compare-btn {
-            position: absolute;
-            inset-inline-start: -12%;
-            top: 3%;
-            width: 40px;
-            height: 40px;
-            background: #ffffff55;
-            font-size: 25px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50%;
-            z-index: 4;
-            cursor: pointer;
-            transition: .4s;
-
-            &:hover {
-                background: var(--xshop-primary);
-                color: var(--xshop-diff);
-            }
-        }
-
-        .fav-btn {
-            top: calc(3% + 50px);
-
-            &[data-is-fav="-1"]{
-                display: none;
-            }
-            &[data-is-fav="1"]{
-                .ri-heart-line{
-                    display: none;
-                }
-            }
-            &[data-is-fav="0"]{
-                .ri-heart-fill{
-                    display: none;
-                }
-            }
-        }
-
-        &:hover {
-            .fav-btn, .compare-btn {
-                inset-inline-start: 3%;
-            }
-        }
-    }
 }
diff --git a/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.blade.php b/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.blade.php
index 5d4f98a..1a6f2bc 100644
--- a/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.blade.php
+++ b/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.blade.php
@@ -13,43 +13,7 @@
                 <div class="row">
                     @foreach($products as $product)
                         <div class="col-md-4 p-2">
-                            <div class="product-item">
-                                <a class="fav-btn" data-slug="{{$product->slug}}" data-is-fav="{{$product->isFav()}}"
-                                   data-bs-custom-class="custom-tooltip"
-                                   data-bs-toggle="tooltip" data-bs-placement="auto" title="{{__("Add to / Remove from favorites")}}">
-                                    <i class="ri-heart-line"></i>
-                                    <i class="ri-heart-fill"></i>
-                                </a>
-                                <a class="compare-btn" data-slug="{{$product->slug}}"
-                                   data-bs-custom-class="custom-tooltip"
-                                   data-bs-toggle="tooltip" data-bs-placement="auto"
-                                   title="{{__("Add to/ Remove from compare list")}}">
-                                    <i class="ri-scales-3-line"></i>
-                                </a>
-                                <a href="{{$product->webUrl()}}">
-                                    <img src="{{$product->imgUrl()}}" alt="{{$product->name}}" loading="lazy">
-                                    <h3>
-                                        {{$product->name}}
-                                    </h3>
-                                    <div class="prices">
-                                        @if($product->hasDiscount())
-                                            <span class="old-price">
-                                        {{$product->oldPrice()}}
-                                    </span>
-                                        @endif
-                                        <span class="price">
-                                    {{$product->getPrice()}}
-                                </span>
-                                    </div>
-                                    <div class="p-2">
-                                        <a href="{{ route('client.product-card-toggle',$product->slug) }}"
-                                           class="btn btn-outline-primary w-100 add-to-card">
-                                            <i class="ri-shopping-bag-3-line"></i>
-                                            {{__("Add to card")}}
-                                        </a>
-                                    </div>
-                                </a>
-                            </div>
+                            @include(\App\Models\Area::where('name','product-grid')->first()->defPart(),compact('product'))
                         </div>
                     @endforeach
                 </div>
diff --git a/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.scss b/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.scss
index f20bfbd..b2c697d 100644
--- a/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.scss
+++ b/resources/views/segments/products_page/ProductGridSidebar/ProductGridSidebar.scss
@@ -25,84 +25,6 @@
         object-fit: cover;
     }
 
-    .product-item {
-        border: 1px solid silver;
-        box-shadow: var(--xshop-shadow);
-        border-radius: var(--xshop-border-radius);
-        position: relative;
-        overflow: hidden;
-
-        h3 {
-            margin-top: 1rem;
-            text-align: center;
-            font-size: 20px;
-            font-weight: 300;
-            color: var(--xshop-text);
-        }
-
-        .prices {
-            display: grid;
-            grid-auto-columns: minmax(0, 1fr);
-            grid-auto-flow: column;
-            text-align: center;
-
-            span {
-                display: block;
-                padding: .5rem;
-            }
-
-            .old-price{
-                text-decoration: red line-through;
-                color: gray;
-            }
-        }
-
-        .fav-btn, .compare-btn {
-            position: absolute;
-            inset-inline-start: -12%;
-            top: 3%;
-            width: 40px;
-            height: 40px;
-            background: #ffffff55;
-            font-size: 25px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50%;
-            z-index: 4;
-            cursor: pointer;
-            transition: .4s;
-
-            &:hover {
-                background: var(--xshop-primary);
-                color: var(--xshop-diff);
-            }
-        }
-
-        .fav-btn {
-            top: calc(3% + 50px);
-
-            &[data-is-fav="-1"]{
-                display: none;
-            }
-            &[data-is-fav="1"]{
-                .ri-heart-line{
-                    display: none;
-                }
-            }
-            &[data-is-fav="0"]{
-                .ri-heart-fill{
-                    display: none;
-                }
-            }
-        }
-
-        &:hover {
-            .fav-btn, .compare-btn {
-                inset-inline-start: 3%;
-            }
-        }
-    }
 
     aside{