diff --git a/frontend/pages/products/[...slug].vue b/frontend/pages/products/[...slug].vue
index 09ed89f..d113dce 100644
--- a/frontend/pages/products/[...slug].vue
+++ b/frontend/pages/products/[...slug].vue
@@ -45,8 +45,8 @@ useSeoMeta({
 
 <template>
     <div class="w-full container flex flex-col">
-        <div class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5">
-            <div class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full">
+        <div class="w-full flex flex-col lg:flex-row justify-end items-end py-14 lg:py-20 gap-10 lg:gap-5">
+            <div class="flex flex-col items-center lg:items-start gap-4 lg:gap-6 text-black w-full">
                 <div class="flex gap-2 items-center">
                     <NuxtImg
                         src="/img/poducts-list-section.gif"
@@ -61,12 +61,12 @@ useSeoMeta({
                     placeholder="جست و جو محصول ..."
                     v-model="search"
                     variant="outlined"
-                    class="!rounded-xl w-full lg:w-8/12"
+                    class="rounded-xl! w-full lg:w-8/12"
                 >
                     <template #endItem>
                         <div class="flex items-center gap-1">
                             <Icon
-                                class="translate-y-[-1px] text-[20px] lg:text-[24px]"
+                                class="-translate-y-px text-[20px] lg:text-[24px]"
                                 name="ci:search"
                             />
                         </div>
@@ -79,7 +79,7 @@ useSeoMeta({
                         </template>
                     </FilterButton>
                     <template #fallback>
-                        <Skeleton class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-xl" />
+                        <Skeleton class="size-11! lg:w-[10.35rem]! lg:h-[3.35rem]! shrink-0 rounded-xl!" />
                     </template>
                 </Suspense>
             </div>
@@ -98,10 +98,10 @@ useSeoMeta({
                     :key="i"
                     class="w-full"
                     :class="{
-                        '!h-[11.9rem] lg:!h-[17.25rem] !rounded-2xl': i == 1,
-                        '!h-[1.4rem] lg:!h-[1.5rem] !rounded-sm': [2, 3].includes(i),
-                        '!w-1/2 lg:!w-full': i == 2,
-                        'lg:!w-1/2': i == 3,
+                        'h-[11.9rem]! lg:h-69! rounded-2xl!': i == 1,
+                        'h-[1.4rem]! lg:h-6! rounded-sm!': [2, 3].includes(i),
+                        'w-1/2! lg:w-full!': i == 2,
+                        'lg:w-1/2!': i == 3,
                     }"
                 />
             </div>
@@ -112,7 +112,7 @@ useSeoMeta({
         >
             <div
                 v-if="!products?.length"
-                class="flex flex-grow w-full"
+                class="flex grow w-full"
             >
                 <Placeholder
                     title="محصولی یافت نشد :("
@@ -122,7 +122,7 @@ useSeoMeta({
             <ProductsGrid
                 :with-header="false"
                 :products="products!"
-                class="!p-0"
+                class="p-0!"
             />
             <div
                 v-if="data && paginationData && data.count > 15"