diff --git a/frontend/components/cart/index/CartItem.vue b/frontend/components/cart/index/CartItem.vue
index abb7494..2740d87 100644
--- a/frontend/components/cart/index/CartItem.vue
+++ b/frontend/components/cart/index/CartItem.vue
@@ -59,7 +59,7 @@ const handleDeleteFromCart = () => {
                     },
                 });
             },
-        }
+        },
     );
 };
 
@@ -106,9 +106,9 @@ watch(
                         },
                     });
                 },
-            }
+            },
         );
-    }
+    },
 );
 </script>
 
@@ -117,8 +117,12 @@ watch(
         class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-slate-200 rounded-xl bg-slate-50 overflow-hidden relative"
     >
         <div class="flex items-start justify-start w-full gap-2.5 lg:gap-4">
+            <Skeleton
+                v-if="cartImageIsLoading"
+                class="size-[4rem] lg:!size-[12rem] aspect-square shrink-0 !rounded-xl border border-slate-200"
+            />
             <div
-                v-if="!cartImageIsLoading"
+                v-else
                 class="size-[4rem] lg:size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
             >
                 <NuxtImg
@@ -129,10 +133,6 @@ watch(
                     alt="product"
                 />
             </div>
-            <Skeleton
-                v-else
-                class="!size-[12rem] aspect-square shrink-0 !rounded-xl border border-slate-200"
-            />
 
             <div class="flex flex-col w-full gap-3 lg:gap-4">
                 <div class="flex items-center justify-between gap-3">
@@ -142,7 +142,7 @@ watch(
                     <div class="w-max flex-center gap-2">
                         <div
                             v-if="data.discount > 0"
-                            class="text-white bg-blue-500 px-3 lg:px-4 py-1.5 lg:py-2 text-[10px] lg:text-xs rounded-full flex items-center gap-1"
+                            class="text-white whitespace-pre bg-blue-500 px-3 lg:px-4 py-1.5 lg:py-2 text-[8px] lg:text-xs rounded-full flex items-center gap-1"
                         >
                             {{ data.discount_amount }}
                             تخفیف
@@ -164,7 +164,7 @@ watch(
                     {{ data.product.title }}
                 </NuxtLink>
 
-                <div class="flex items-center justify-start gap-1.5">
+                <div class="flex items-center justify-start flex-wrap gap-1.5">
                     <div
                         v-if="!!data.product.color"
                         class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm flex-center gap-1.5"
@@ -182,7 +182,7 @@ watch(
                         v-if="data.product.product_attributes.length > 0"
                         v-for="(variant, index) in data.product.product_attributes"
                         :index="index"
-                        class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm"
+                        class="px-3 py-1 whitespace-pre rounded-full border border-slate-200 text-xs lg:text-sm"
                     >
                         {{ variant.value }}
                     </span>
@@ -305,7 +305,7 @@ watch(
             <div class="flex flex-col items-end">
                 <span
                     v-if="data.discount > 0"
-                    class="typo-p-xs relative flex-center w-fit line-through text-slate-400"
+                    class="text-[10px] lg:typo-p-xs relative flex-center w-fit line-through text-slate-400"
                 >
                     {{ data.price }}
                 </span>
@@ -315,7 +315,7 @@ watch(
                 >
                     تخفیف ویژه: {{ data.special_discount_amount }}
                 </span>
-                <span class="typo-p-md relative flex-center w-fit font-medium">
+                <span class="typo-p-sm lg:typo-p-md relative flex-center w-fit font-medium">
                     {{ data.final_price }}
                 </span>
             </div>