diff --git a/frontend/components/cart/CartItem.vue b/frontend/components/cart/CartItem.vue
index 2ae5567..88fa21f 100644
--- a/frontend/components/cart/CartItem.vue
+++ b/frontend/components/cart/CartItem.vue
@@ -10,11 +10,11 @@ const handleDeleteFromCart = () => {};
 
 <template>
     <div
-        class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-gray-300 rounded-xl bg-gray-50"
+        class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-slate-200 rounded-xl bg-slate-50"
     >
         <div class="flex items-center justify-start w-full gap-2.5 lg:gap-4">
             <div
-                class="size-[88px] aspect-square shrink-0 rounded-100 border border-gray-300 overflow-hidden"
+                class="size-[10rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
             >
                 <img
                     src="/img/product-1.jpg"
@@ -23,8 +23,12 @@ const handleDeleteFromCart = () => {};
                 />
             </div>
 
-            <div class="flex flex-col w-full gap-4">
-                <span class="font-semibold lg:text-[1.125rem] text-gray-900">
+            <div class="flex flex-col w-full gap-5">
+                <span class="font-semibold typo-sub-h-md text-slate-600">
+                    موبایل
+                </span>
+
+                <span class="font-semibold typo-sub-h-xl text-black">
                     فشارسنج بازویی امرن Omron M3
                 </span>
 
@@ -32,9 +36,9 @@ const handleDeleteFromCart = () => {};
                     <div class="flex items-center">
                         <button
                             @click="counter++"
-                            class="border size-10 flex-center rounded-100 border-gray-400"
+                            class="border size-10 flex-center rounded-100 border-slate-300"
                         >
-                            <Icon name="bi:plus" class="**:stroke-gray-800" />
+                            <Icon name="bi:plus" class="**:stroke-slate-800" />
                         </button>
 
                         <div class="size-10 flex-center">{{ counter }}</div>
@@ -43,7 +47,7 @@ const handleDeleteFromCart = () => {};
                             @click="
                                 counter > 1 ? counter-- : handleDeleteFromCart
                             "
-                            class="border size-10 flex-center rounded-100 border-gray-400"
+                            class="border size-10 flex-center rounded-100 border-slate-300"
                         >
                             <Icon
                                 v-if="counter == 1"
@@ -53,12 +57,12 @@ const handleDeleteFromCart = () => {};
                             <Icon
                                 v-else
                                 name="bi:dash"
-                                class="**:stroke-gray-800"
+                                class="**:stroke-slate-800"
                             />
                         </button>
                     </div>
 
-                    <span class="text-[1.25rem] text-gray-900 font-semibold">
+                    <span class="typo-p-lg text-black font-semibold">
                         ۲,۸۹۱,۰۰۰&nbsp;تومان
                     </span>
                 </div>
@@ -68,14 +72,14 @@ const handleDeleteFromCart = () => {};
         <div class="flex items-center justify-between w-full lg:hidden">
             <div class="flex items-center">
                 <button
-                    class="border size-10 flex-center rounded-100 border-gray-400"
+                    class="border size-10 flex-center rounded-100 border-slate-400"
                 >
                     <svg
                         width="16"
                         height="16"
                         viewBox="0 0 16 16"
                         fill="none"
-                        class="stroke-gray-800"
+                        class="stroke-slate-800"
                         xmlns="http://www.w3.org/2000/svg"
                     >
                         <path
@@ -96,7 +100,7 @@ const handleDeleteFromCart = () => {};
                 <div class="size-10 text-[1.125rem] flex-center">1</div>
 
                 <button
-                    class="border size-10 flex-center rounded-100 border-gray-400"
+                    class="border size-10 flex-center rounded-100 border-slate-400"
                 >
                     <svg
                         width="16"
@@ -128,7 +132,7 @@ const handleDeleteFromCart = () => {};
                 </button>
             </div>
 
-            <span class="text-[1.125rem] text-gray-900 font-semibold">
+            <span class="text-[1.125rem] text-slate-900 font-semibold">
                 ۲,۸۹۱,۰۰۰&nbsp;تومان
             </span>
         </div>