diff --git a/resources/js/client-vue/MetaFilter.vue b/resources/js/client-vue/MetaFilter.vue
index 790f9b2..e6b02eb 100644
--- a/resources/js/client-vue/MetaFilter.vue
+++ b/resources/js/client-vue/MetaFilter.vue
@@ -10,32 +10,34 @@
                                name="only">
                         <label class="form-check-label" for="flexSwitchCheckDefault">
                             <!-- WIP translate -->
-                            Only available
+                            {{ translate['only'] }}
                         </label>
                     </div>
                 </li>
                 <li>
                     <label>
-                        Sort by
+                        {{ translate['sort-by'] }}
                     </label>
                     <select name="sort" v-model="sort" class="form-control">
                         <option value="">
-                            Newest
+                            {{ translate['newset'] }}
                         </option>
                         <option value="oldest">
-                            Oldest
+                            {{ translate['oldest'] }}
                         </option>
                         <option value="cheap">
-                            Cheaper
+                            {{ translate['cheaper'] }}
                         </option>
                         <option value="expensive">
-                            More expensive
+                            {{ translate['more-expensive'] }}
+
                         </option>
                         <option value="fav">
-                            Favorite
+                            {{ translate['favorite'] }}
+
                         </option>
                         <option value="sale">
-                            More sale
+                            {{ translate['more-sale'] }}
                         </option>
                     </select>
                 </li>
@@ -57,7 +59,7 @@
                         </template>
                         <template v-if="prop.type == 'color'">
                             <select :id="prop.name" class="form-control color" :name="`meta[${prop.name}]`">
-                                <option value=""> All</option>
+                                <option value="">  {{ translate['all'] }}</option>
                                 <option v-for="op in prop.optionList" :style="`background: ${op.value} ;`"
                                         :value="op.value"> {{ op.title }}
                                 </option>
@@ -65,7 +67,7 @@
                         </template>
                         <template v-if="prop.type == 'select'">
                             <select :id="prop.name" class="form-control color" :name="`meta[${prop.name}]`">
-                                <option value=""> All</option>
+                                <option value="">  {{ translate['all'] }}</option>
                                 <option v-for="op in prop.optionList" :value="op.value"> {{ op.title }}</option>
                             </select>
                         </template>
@@ -79,7 +81,7 @@
                 </template>
             </ul>
             <button type="submit" class="btn btn-outline-primary btn-sm w-100">
-                Apply filter
+                {{ translate['apply-filter'] }}
             </button>
         </form>
 
@@ -152,6 +154,9 @@ export default {
         propsApiLink: {
             required: true,
         },
+        translate: {
+            default: {},
+        }
     },
     async mounted() {
 
diff --git a/resources/js/components/MenuItemInput.vue b/resources/js/components/MenuItemInput.vue
index a8b5b11..8950c2e 100644
--- a/resources/js/components/MenuItemInput.vue
+++ b/resources/js/components/MenuItemInput.vue
@@ -9,7 +9,7 @@
                 </div>
                 <div class="card-body">
                     <div class="row p-0">
-                        <div class="col-md-11">
+                        <div class="col-md-10">
                             <div>
                                 <!-- WIP translate-->
                                 <label :for="`kind-${i}`">
@@ -66,6 +66,9 @@
                             <button type="button" class="btn btn-primary" @click="remItem(i)">
                                 <i class="ri-close-line"></i>
                             </button>
+                            <a class="btn btn-outline-light mx-2" :href="fixLink(item.id)" v-if="transLink !== ''">
+                                <i class="ri-translate"></i>
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -74,6 +77,8 @@
         <button type="button" class="btn btn-primary my-3" @click="addItem">
             <i class="ri-add-line"></i>
         </button>
+
+
         <input type="hidden" name="items" :value="JSON.stringify(this.currentItems)">
         <input type="hidden" name="removed" :value="JSON.stringify(this.removed)">
     </div>
@@ -111,6 +116,9 @@ export default {
         },
         menuId: {
             required: true,
+        },
+        transLink:{
+            default: '',
         }
     },
     mounted() {
@@ -144,6 +152,9 @@ export default {
                 this.removed.push(this.currentItems[i].id);
             }
             this.currentItems.splice(i, 1)
+        },
+        fixLink(id){
+            return this.transLink.split('xxx').join(id);
         }
 
     }
diff --git a/resources/lang/fa.json b/resources/lang/fa.json
index c96cc49..1902298 100644
--- a/resources/lang/fa.json
+++ b/resources/lang/fa.json
@@ -76,6 +76,7 @@
     "Answer": "پاسخ",
     "Answer: <br>": " پاسخ: <br>",
     "Answered": "پاسخ داده شده",
+    "Apply filter": "اعمال صافی",
     "Approve": "تایید کردن",
     "Approved": "تایید شده",
     "Are you sure you want to delete this item?": "آیا برای حذف این مورد مطمئن هستید؟",
@@ -124,6 +125,7 @@
     "Category slug": "نامک دسته",
     "Change items sort": "تغییر ترتیب نمایش",
     "Change latitude and longitude": "تغییر طول و عرض جغرافیایی",
+    "Cheaper": "ارزاتر",
     "Check": "بررسی",
     "Check all": "انتخاب همه",
     "Check authenticate code": "بررسی کد احراز هویت",
@@ -171,6 +173,7 @@
     "Date": "تاریخ",
     "Date of born": "تاریخ تولد",
     "Datetime": "تاریخ و زمان",
+    "Day(s)": "روز",
     "Default": "پیش‌فرض",
     "Default admin email is :E1 (developer) or :E2 (admin) and default password is: :P": "در نگارش آزمایشی رایانامه توسعه دهنده :E1 است و رایانامه مدیر عادی :E2 و گذرواژه هر دو :P است",
     "DefaultFooter": "فوتر پیش‌فرض",
@@ -238,6 +241,7 @@
     "Failed Invoices": "صورت حساب‌های ناموفق",
     "False": "خیر",
     "Fast contact form": "دسترسی سریع تماس",
+    "Favorite": "علاقه‌مندی",
     "Favorites": "علاقه‌مندی‌ها",
     "Feature image": "تصویر شاخص",
     "Female": "مونث",
@@ -275,6 +279,7 @@
     "Hello world": "سلام دنیا",
     "Hide in menu": "عدم نمایش در فهرست (منو)",
     "Home": "خانه",
+    "Hour(s)": "ساعت",
     "ID": "",
     "Icon": "نماد",
     "If not choose expire expire time will be unlimited": "اگر زمان انقصا را انتخاب نکنید، هرگز منقضی نخواهد شد",
@@ -347,17 +352,23 @@
     "Message": "پیام",
     "Message replay": "پاسخ پیام",
     "Message...": "پیام...",
+    "Minute(s)": "دقیقه",
     "Mobile": "موبایل",
     "Model": "ماژول",
     "Model ID": "ID مدل",
+    "More expensive": "گرانترین",
+    "More sale": "بیشترین فروش",
     "Name": "نام",
     "Name and lastname": "نام و نام‌خانوادگی",
     "Need process orders": "سفارشات نیازمند رسیدگی",
     "Needs Improvement": "نیازمند بهینه‌تر شدن",
+    "Newest": "جدیدترین",
     "Next": "بعدی",
     "No parent": "بدون والد",
     "Not available": "نا موجود",
     "Not required": "غیر ضرروری",
+    "Oldest": "قدیمی‌ترین",
+    "Only available": "فقط کالاهای موجود",
     "Order removed successfully": "سفارش با موفقیت حذف شد",
     "Orders": "سفارشاات",
     "Orders count": "تعداد سفارش",
@@ -451,6 +462,7 @@
     "Search for": "جستجو برای",
     "Search word is too short": "واژه مورد جستجو بسیار کوتاه است",
     "Searchable": "قابل جستجو",
+    "Second(s)": "ثانیه",
     "Section": "بخش",
     "Sections": "بخش‌ها",
     "Sell": "فروش",
@@ -488,6 +500,7 @@
     "Slug": "نامک",
     "Sort": "ترتیب",
     "Sort & filter": "ترتیب و صافی",
+    "Sort by": "ترتیب",
     "State": "استان",
     "States": "استان‌ها",
     "States list": "فهرست استان‌ها",
@@ -543,6 +556,7 @@
     "True": "بلی",
     "Type": "نوع",
     "Unavailable": "ناموجود",
+    "Under Construction": "در دست ساخت",
     "Under construction": "در دست ساخت",
     "Unit": "واحد",
     "Unknown bulk action : :ACTION": "کار دسته جمعی تعریف نشده :ACTION",
diff --git a/resources/views/admin/menus/menu-form.blade.php b/resources/views/admin/menus/menu-form.blade.php
index 7962305..6bd1d12 100644
--- a/resources/views/admin/menus/menu-form.blade.php
+++ b/resources/views/admin/menus/menu-form.blade.php
@@ -93,6 +93,7 @@
                     <menu-item-input
                         :morphs='@json(\App\Models\Menu::$mrohps)'
                         morph-search-link="{{route('v1.morph.search')}}"
+                        @if(config('app.xlang.active')) trans-link="{{route('admin.lang.model',['xxx',\App\Models\Item::class])}}" @endif
                         xlang="{{config('app.locale')}}"
                         :items='@json($item->items)'
                         menu-id="{{$item->id}}"
diff --git a/resources/views/segments/groups/GridGroup/GridGroup.scss b/resources/views/segments/groups/GridGroup/GridGroup.scss
new file mode 100644
index 0000000..463a005
--- /dev/null
+++ b/resources/views/segments/groups/GridGroup/GridGroup.scss
@@ -0,0 +1,130 @@
+.GridGroup {
+    // scss
+    // scss
+    padding: 3rem 0;
+
+    .grid-grp-container {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 10px;
+        grid-template-rows: repeat(2, 1fr);
+        height: 70vh; // Set the height of the grid
+        width: 100%; // Full width of the container
+    }
+
+    .grid-grp-item {
+        border-radius: var(--xshop-border-radius);
+        overflow: hidden;
+        position: relative;
+
+        i{
+            position: absolute;
+            top: 1rem;
+            inset-inline-end: 1rem;
+            z-index: 3;
+            padding: .3rem;
+            background: #ffffff66;
+            font-size: 30px;
+            display: inline-block;
+            border-radius: var(--xshop-border-radius);
+            backdrop-filter: blur(7px);
+        }
+        h3{
+            position: absolute;
+            top: 50%;
+            left: 0;
+            right: 0;
+            text-align: center;
+            background: var(--xshop-diff);
+            padding: 1rem;
+            background: #ffffff66;
+            color: black;
+            backdrop-filter: blur(7px);
+            opacity: 0;
+            transition: 400ms;
+            transform: translateY(-50%);
+        }
+        img {
+            object-fit: cover;
+            transition: 400ms;
+            width: 100%;
+            height: 100%;
+        }
+
+        &:hover{
+            h3{
+                opacity: 1;
+            }
+
+            img{
+                transform: rotateZ(3deg) scale(1.3) ;
+                filter: contrast(1.7) grayscale(.75);
+            }
+        }
+
+        // First item (half of the grid)
+        &:nth-child(1) {
+            grid-column: 1 / 3; // Span columns 1 and 2
+            grid-row: 1 / 3; // First row
+        }
+
+        // Second item (25% width, 50% height)
+        &:nth-child(2) {
+            grid-column: 3; // Third column
+            grid-row: 1 / 2; // First row
+        }
+
+        // Third item (25% width, 50% height)
+        &:nth-child(3) {
+            grid-column: 3; // Fourth column
+            grid-row: 2 / 3; // First row
+        }
+
+        // Fourth item (full height, 25% width)
+        &:nth-child(4) {
+            grid-column: 4; // Third column
+            grid-row: 1 / 3; // Second row
+        }
+    }
+
+    /*-992px width*/
+    @media (max-width: 992px) {
+
+        .grid-grp-container {
+            grid-template-columns: repeat(4, 1fr);
+            gap: 10px;
+            grid-template-rows: repeat(4, 1fr);
+        }
+
+        .grid-grp-item {
+
+            // First item (half of the grid)
+            &:nth-child(1) {
+                grid-column: 1 / 5; // Span columns 1 and 2
+                grid-row: 1 / 3; // First row
+            }
+
+            // Second item (25% width, 50% height)
+            &:nth-child(2) {
+                grid-column: 1  / 3; // Third column
+                grid-row: 3 / 4; // First row
+            }
+
+            // Third item (25% width, 50% height)
+            &:nth-child(3) {
+                grid-column: 1 / 3; // Fourth column
+                grid-row: 4 / 5; // First row
+            }
+
+            // Fourth item (full height, 25% width)
+            &:nth-child(4) {
+                grid-column:  3 / 5; // Third column
+                grid-row: 3 / 5; // Second row
+            }
+        }
+
+        h3{
+            font-size: 17px;
+        }
+    }
+}
diff --git a/resources/views/segments/products_page/ProductGridHiddenSidebar/inc/product-sidebar-filter.blade.php b/resources/views/segments/products_page/ProductGridHiddenSidebar/inc/product-sidebar-filter.blade.php
index 8328eca..2fee293 100644
--- a/resources/views/segments/products_page/ProductGridHiddenSidebar/inc/product-sidebar-filter.blade.php
+++ b/resources/views/segments/products_page/ProductGridHiddenSidebar/inc/product-sidebar-filter.blade.php
@@ -9,6 +9,18 @@
                 @if(isset($category))
                     category="{{$category->id}}"
                 @endif
+                :translate='{{vueTranslate([
+                    'only' => __('Only available'),
+                    'all' => __('All'),
+                    "sort-by" => __('Sort by'),
+                    "newset" => __('Newest'),
+                    "oldest" => __('Oldest'),
+                    'more-expensive' => __('More expensive'),
+                    'cheaper' => __('Cheaper'),
+                    'favorite' => __('Favorite'),
+                    'more-sale' => __('More sale'),
+                    'apply-filter' => __('Apply filter'),
+                ])}}'
             >
             </meta-filter>
         </div>
diff --git a/resources/views/segments/products_page/ProductGridSidebar/inc/product-sidebar.blade.php b/resources/views/segments/products_page/ProductGridSidebar/inc/product-sidebar.blade.php
index 62187e5..85b72c3 100644
--- a/resources/views/segments/products_page/ProductGridSidebar/inc/product-sidebar.blade.php
+++ b/resources/views/segments/products_page/ProductGridSidebar/inc/product-sidebar.blade.php
@@ -34,6 +34,18 @@
                 @if(isset($category))
                     category="{{$category->id}}"
                 @endif
+                :translate='{{vueTranslate([
+                    'only' => __('Only available'),
+                    'all' => __('All'),
+                    "sort-by" => __('Sort by'),
+                    "newset" => __('Newest'),
+                    "oldest" => __('Oldest'),
+                    'more-expensive' => __('More expensive'),
+                    'cheaper' => __('Cheaper'),
+                    'favorite' => __('Favorite'),
+                    'more-sale' => __('More sale'),
+                    'apply-filter' => __('Apply filter'),
+                ])}}'
             >
             </meta-filter>
         </div>