diff --git a/app/Helpers/Helper.php b/app/Helpers/Helper.php
index dc1cd37..286b89b 100644
--- a/app/Helpers/Helper.php
+++ b/app/Helpers/Helper.php
@@ -415,6 +415,31 @@ function showCatNestedControl($cats, $checked = [], $parent = null)
     }
 }
 
+/**
+ * @param $cats array categories or groups as nested ul li wih checkbox
+ * @param $checked array witch one checked default
+ * @param $parent null|integer parent id
+ * @return string
+ */
+function showCatNested($cats, $parent = null)
+{
+    $ret = "";
+    foreach ($cats as $cat) {
+        if ($cat->parent_id == $parent) {
+            $ret .= "<li>";
+            $ret .= "<a href='".$cat->webUrl()."'>";
+            $ret .= $cat->name . '</a>';
+            $ret .= showCatNested($cats, $cat->id);
+            $ret .= "</li>";
+        }
+    }
+    if ($parent == null) {
+        return $ret;
+    } else {
+        return "<ul class='ps-3'> $ret </ul>";
+    }
+}
+
 /**
  * find model name form morph
  * @param $modelable_type
diff --git a/resources/views/segments/products/ProductGrid/ProductGrid.blade.php b/resources/views/segments/products/ProductGrid/ProductGrid.blade.php
index bbfdf9d..ac1d538 100644
--- a/resources/views/segments/products/ProductGrid/ProductGrid.blade.php
+++ b/resources/views/segments/products/ProductGrid/ProductGrid.blade.php
@@ -1,4 +1,4 @@
-<section class='ProductGrid'>
+<section class='ProductGrid content'>
     <div class="{{gfx()['container']}}">
         <h1>
             {{$title}}
diff --git a/resources/views/segments/products/ProductGrid/ProductGrid.scss b/resources/views/segments/products/ProductGrid/ProductGrid.scss
index 11ba1ef..a95d820 100644
--- a/resources/views/segments/products/ProductGrid/ProductGrid.scss
+++ b/resources/views/segments/products/ProductGrid/ProductGrid.scss
@@ -1,5 +1,4 @@
 .ProductGrid {
-    // scss
     padding: 1rem 0;
 
     img {
diff --git a/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.blade.php b/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.blade.php
new file mode 100644
index 0000000..499367d
--- /dev/null
+++ b/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.blade.php
@@ -0,0 +1,60 @@
+<section class='ProductGridSidebar content'>
+    <div class="{{gfx()['container']}}">
+    <h1>
+        {{$title}}
+    </h1>
+    <div class="row">
+        @if(!getSetting($data->area->name.'_'.$data->part.'_invert'))
+            <div class="col-lg-3 p-lg-1 pt-lg-0">
+                @include('segments.products.ProductGridSidebar.inc.product-sidebar')
+            </div>
+        @endif
+        <div class="col-lg-9">
+            <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()}}">
+                                <i class="ri-heart-line"></i>
+                                <i class="ri-heart-fill"></i>
+                            </a>
+                            <a class="compare-btn" data-slug="{{$product->slug}}">
+                                <i class="ri-scales-3-line"></i>
+                            </a>
+                            <a href="{{$product->webUrl()}}">
+                                <img src="{{$product->imgUrl()}}" alt="{{$product->name}}">
+                                <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>
+                    </div>
+                @endforeach
+            </div>
+            {{$products->links()}}
+
+        </div>
+            @if(getSetting($data->area->name.'_'.$data->part.'_invert'))
+                <div class="col-lg-3">
+                    @include('segments.products.ProductGridSidebar.inc.product-sidebar')
+                </div>
+            @endif
+    </div>
+    </div>
+</section>
diff --git a/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.js b/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.json b/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.json
new file mode 100644
index 0000000..468488e
--- /dev/null
+++ b/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.json
@@ -0,0 +1,10 @@
+{
+    "name": "ProductGridSidebar",
+    "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/products/ProductGridSidebar/ProductGridSidebar.php b/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.php
new file mode 100644
index 0000000..151138d
--- /dev/null
+++ b/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+use App\Models\Setting;
+
+class ProductGridSidebar
+{
+    public static function onAdd(Part $part = null)
+    {
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area->name . '_' . $part->part.'_invert';
+        $setting->value = 0;
+        $setting->size = 12;
+        $setting->type = 'CHECKBOX';
+//        $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
+        $setting->title =  $part->area->name . ' ' . $part->part. ' invert sidebar position';
+        $setting->save();
+    }
+    public static function onRemove(Part $part = null)
+    {
+        Setting::where('key',$part->area->name . '_' . $part->part.'_invert')->first()?->delete();
+    }
+
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}
diff --git a/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.scss b/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.scss
new file mode 100644
index 0000000..f20bfbd
--- /dev/null
+++ b/resources/views/segments/products/ProductGridSidebar/ProductGridSidebar.scss
@@ -0,0 +1,162 @@
+.ProductGridSidebar {
+    padding: 1rem 0;
+
+    h1{
+        font-size: 30px;
+        font-weight: 200;
+        text-align: center;
+        position: relative;
+        margin-bottom: 1rem;
+        padding-bottom: 4px;
+        &:after{
+            position: absolute;
+            content: ' ';
+            height: 1px;
+            width: 70%;
+            bottom: 0;
+            left: 15%;
+            right: 15%;
+            background: linear-gradient(90deg,#ffffff00 0%, var(--xshop-primary) 50%, #ffffff00 100%);
+        }
+    }
+    img {
+        width: 100%;
+        height: 250px;
+        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{
+
+        h4{
+            background: var(--xshop-primary);
+            color: var(--xshop-diff);
+            padding: .5rem 1rem;
+            text-align: center;
+            border-radius: var(--xshop-border-radius);
+            opacity: .75;
+            font-size: 20px;
+            font-weight: 300;
+        }
+
+
+        .side-item{
+            background: #00000010;
+            border-radius: var(--xshop-border-radius);
+            margin-bottom: 1rem;
+            .side-data{
+                padding: 1rem;
+            }
+        }
+
+        .side-list{
+            ul{
+                list-style: none;
+                padding: 0;
+                padding-top: 2px;
+                li{
+                    position: relative;
+                    padding: 2px;
+                    a{
+                        display: block;
+                    }
+                    &:before{
+                        position: absolute;
+                        content: "\F035";
+                        font-family: 'remixicon';
+                        inset-inline-start: -20px;
+                        top: -2px;
+                        color: var(--xshop-secondary);
+                    }
+
+                    &.active{
+                        padding-top: 5px;
+                        padding-bottom: 0;
+                        background: var(--xshop-primary);
+                        a{
+                            color: var(--xshop-diff);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/resources/views/segments/products/ProductGridSidebar/inc/product-sidebar.blade.php b/resources/views/segments/products/ProductGridSidebar/inc/product-sidebar.blade.php
new file mode 100644
index 0000000..439a269
--- /dev/null
+++ b/resources/views/segments/products/ProductGridSidebar/inc/product-sidebar.blade.php
@@ -0,0 +1,25 @@
+<aside class="mt-2">
+    <div class="side-item">
+        <h4>
+            {{__("Search")}}
+        </h4>
+        <form action="" class="side-data">
+            <div class="input-group mb-3">
+                <input type="search" class="form-control" placeholder="{{__('Search')}}...">
+                <button class="btn btn-outline-secondary" type="submit" id="button-addon2">
+                    <i class="ri-search-2-line"></i>
+                </button>
+            </div>
+        </form>
+    </div>
+    <div class="side-item">
+        <h4>
+            {{__("Categories")}}
+        </h4>
+        <div class="side-data side-list">
+            <ul class="ps-3">
+                {!! showCatNested(\App\Models\Category::all(['id','name','parent_id'])) !!}
+            </ul>
+        </div>
+    </div>
+</aside>