diff --git a/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.blade.php b/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.blade.php
new file mode 100644
index 0000000..1fb14d8
--- /dev/null
+++ b/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.blade.php
@@ -0,0 +1,19 @@
+<section class='MainCategoriesSlider'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{getSetting($data->area_name.'_'.$data->part.'_title')}}
+        </h1>
+        <div id="main-cats">
+            @foreach(\App\Models\Category::whereNull('parent_id')->limit(10)->get() as $category)
+                <div class="item slider-content">
+                    <a class="main-category" href="{{$category->webUrl()}}">
+                        <img src="{{$category->imgUrl()}}" alt="{{$category->name}}" title="{{$category->name}}" >
+                        <h4>
+                            {{$category->name}}
+                        </h4>
+                    </a>
+                </div>
+            @endforeach
+        </div>
+    </div>
+</section>
diff --git a/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.js b/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.js
new file mode 100644
index 0000000..778d456
--- /dev/null
+++ b/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.js
@@ -0,0 +1,41 @@
+import {tns} from "tiny-slider/src/tiny-slider";
+
+var maincatz;
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('#main-cats')?.forEach(function (el) {
+        if (el.classList.contains('.tns-slider')) {
+            console.log('ignore');
+            return 'ignore';
+        }
+        maincatz = tns({
+            container: el,
+            items: 3,
+            autoplay: true,
+            autoplayButton: false,
+            // nextButton: false,
+            controls: false,
+            autoplayHoverPause: true,
+            mouseDrag: true,
+            gutter: 7,
+            slideBy: 1,
+            autoplayTimeout: 5000,
+            responsive: {
+                560: {
+                    items: 1,
+                },
+                768: {
+                    items: 2,
+                },
+                1000: {
+                    items: 2,
+                },
+                1400: {
+                    items: 3,
+                },
+
+            }
+            // speed:10000,
+        });
+    });
+});
diff --git a/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.json b/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.json
new file mode 100644
index 0000000..41aad6e
--- /dev/null
+++ b/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.json
@@ -0,0 +1,10 @@
+{
+    "name": "MainCategoriesSlider",
+    "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/index/MainCategoriesSlider/MainCategoriesSlider.php b/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.php
new file mode 100644
index 0000000..62c6d53
--- /dev/null
+++ b/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+use App\Models\Setting;
+
+class MainCategoriesSlider
+{
+    public static function onAdd(Part $part = null)
+    {
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_title';
+        $setting->value = 'Main categories';
+        $setting->type = 'TEXT';
+        $setting->size = 4;
+        $setting->title =  $part->area_name . ' ' . $part->part .' main categories title';
+        $setting->save();
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+        Setting::where('key',$part->area_name . '_' . $part->part.'_title')->first()?->delete();
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}
diff --git a/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.scss b/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.scss
new file mode 100644
index 0000000..133ce5f
--- /dev/null
+++ b/resources/views/segments/index/MainCategoriesSlider/MainCategoriesSlider.scss
@@ -0,0 +1,43 @@
+.MainCategoriesSlider {
+    // scss
+    h1{
+        font-size: 25px;
+        font-weight: 400;
+    }
+    padding: 3rem 0;
+    border-radius: var(--xshop-border-radius);
+    overflow: hidden;
+
+    .main-category{
+        overflow: hidden;
+        display: block;
+        width: 100%;
+
+        img{
+            width: 100%;
+            height: 400px;
+            object-fit: cover;
+            position: relative;
+            z-index: 5;
+            transition: 500ms;
+        }
+
+        h4{
+            background: var(--xshop-primary);
+            color: var(--xshop-diff);
+            padding: 5px;
+            text-align: center;
+            font-weight: 200;
+            position: relative;
+            z-index: 7;
+            margin: 0;
+
+        }
+
+        &:hover{
+            img{
+                transform: scale(1.2);
+            }
+        }
+    }
+}
diff --git a/resources/views/segments/products/LatestProducts/LatestProducts.blade.php b/resources/views/segments/products/LatestProducts/LatestProducts.blade.php
index 7850281..2a02c0d 100644
--- a/resources/views/segments/products/LatestProducts/LatestProducts.blade.php
+++ b/resources/views/segments/products/LatestProducts/LatestProducts.blade.php
@@ -6,44 +6,7 @@
         <div class="row">
             @foreach(\App\Models\Product::where('status',1)->orderByDesc('id')->limit(4)->get() as $product)
                 <div class="col-lg-3 col-md-6">
-                    <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>