diff --git a/src/components/CardDesgin/CardDesign3/index.js b/src/components/CardDesgin/CardDesign3/index.js
index 72f4a17..471f05b 100644
--- a/src/components/CardDesgin/CardDesign3/index.js
+++ b/src/components/CardDesgin/CardDesign3/index.js
@@ -10,19 +10,19 @@ import SearchBox from "../../SearchDesign/SearchBox";
 
 const CardDesign3 = () => {
   return (
-    <div className="max-h-[600px] w-fit p-4 overflow-y-auto scrollYDesign flex flex-col bg-white shadow-sm border border-[#d2d2d2] rounded">
+    <div className="max-h-[600px] w-fit p-4 overflow-y-auto scrollYDesign flex flex-col bg-surface shadow-sm border border-surfaceBorder rounded">
       <TitleSubtitle
         subTitle={false}
         title={"افراد حاضر در این سالن"}
-        titleClassName={"font-sansbold text-[#0F0543]"}
-        titleBorderClassName={"w-1.5 h-7 bg-[#1F8CF9] ml-2"}
+        titleClassName={"font-bold text-primaryText"}
+        titleBorderClassName={"w-1.5 h-7 bg-primary ml-2"}
       />
       <div className="mt-7">
         <SearchBox
           searchIcon={"images/CardDesign3search-icon.svg"}
           placeholder={"جستجو برا اساس اسم یا کد ملی"}
           className={
-            "p-4 border-[#ddd] focus:border-gray-200 focus:ring-gray-200"
+            "p-4 border-surfaceBorder focus:border-gray-200 focus:ring-gray-200"
           }
         />
       </div>
diff --git a/src/components/CardDesgin/CustomToast2/index.js b/src/components/CardDesgin/CustomToast2/index.js
index 15fd0fd..0544e5a 100644
--- a/src/components/CardDesgin/CustomToast2/index.js
+++ b/src/components/CardDesgin/CustomToast2/index.js
@@ -6,7 +6,7 @@ const CustomToast2 = ({ items, num }) => {
       {items.slice(0, num).map((item, index) => (
         <div
           key={index}
-          className="flex flex-row items-center p-4 bg-[#F8F8F8] border border-[#C9E2B3] rounded mt-4"
+          className="flex flex-row items-center p-4 bg-surface border border-success rounded mt-4"
         >
           {/* right */}
           <div className="flex flex-row items-center flex-1 ">
@@ -16,12 +16,12 @@ const CustomToast2 = ({ items, num }) => {
               alt={item.profilePic}
             />
             <div className="flex flex-col mr-2">
-              <p className="text-sm text-[#0F0543]">{item.name}</p>
-              <p className="text-xs mt-1.5 mb-1 text-[#2A527A]">
+              <p className="text-sm text-primaryText">{item.name}</p>
+              <p className="text-xs mt-1.5 mb-1 text-primaryLight">
                 <span className="ml-1">تاریخ ورود:</span>
                 {item.enteryData}
               </p>
-              <p className="text-xs text-[#2A527A]">
+              <p className="text-xs text-primaryLight">
                 <span>کد ملی</span>
                 {item.idCard}
               </p>
@@ -29,7 +29,7 @@ const CustomToast2 = ({ items, num }) => {
           </div>
           {/* left */}
           <div className="flex flex-row items-center">
-            <span className="px-2 py-0.5 mr-2 rounded-sm bg-[#C9E2B388] text-[#468722] font-sansbold">
+            <span className="px-2 py-0.5 mr-2 rounded-sm bg-[#C9E2B388] text-[#468722] font-bold">
               {item.number}
             </span>
             <img
diff --git a/src/components/CardDesgin/ProductStatusCard/index.js b/src/components/CardDesgin/ProductStatusCard/index.js
index 5468062..11132c7 100644
--- a/src/components/CardDesgin/ProductStatusCard/index.js
+++ b/src/components/CardDesgin/ProductStatusCard/index.js
@@ -6,8 +6,8 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
   console.log(items.alertIcon);
 
   return (
-    <section className="bg-white p-4 w-fit">
-      <div className="flex flex-col bg-gray-200 rounded px-4 py-2">
+    <>
+      <div className="w-full flex flex-col bg-surface rounded px-4 py-2">
         {items.map((item, index) => (
           <>
             <div
@@ -18,13 +18,13 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
                 <img src={item.icon} alt="" className="w-8" />
                 <div className="flex flex-col mr-3">
                   <p className="text-sm">
-                    <span className="font-sansbold">{item.subtitle}</span>
+                    <span className="font-bold">{item.subtitle}</span>
                     {item.title}
                   </p>
                   {item.customerSatisfaction && (
                     <p className="text-xs mt-1">
                       رضایت خریداران:
-                      <span className="font-sansbold text-green-500 mr-2">
+                      <span className="font-bold text-primaryDark mr-2">
                         {item.customerSatisfactionPercent}
                       </span>
                     </p>
@@ -40,16 +40,16 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
               )}
             </div>
             {Number(index) !== items.length - 1 && (
-              <div className="border-b border-gray-300"></div>
+              <div className="border-b border-surfaceBorder"></div>
             )}
           </>
         ))}
         <div className="flex flex-col items-center">
-          <p className="text-lg text-blue-600 mt-5 mb-2">
+          <p className="text-lg text-primary mt-5 mb-2">
             {productPrice}
-            <span className="text-sm text-gray-700 font-light">تومان</span>
+            <span className="text-sm text-primaryText">تومان</span>
           </p>
-          <p className="text-xs font-light text-gray-600">
+          <p className="text-xs text-primaryText">
             با خرید این کالا
             <span>{discountPrice}</span>
             صرفه جویی کنید
@@ -58,11 +58,11 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
         <div className="w-full flex flex-col items-center">
           <Button
             text={"افزودن به سبد خرید"}
-            className="my-4 text-white rounded-sm text-sm p-2 bg-blue-400 hover:bg-blue-600 hover:bg-opacity-90"
+            className="my-4 text-white rounded text-sm p-2 bg-primary hover:bg-primaryDark hover:bg-opacity-90"
           />
         </div>
       </div>
-      <div className="bg-gray-200 rounded px-4 py-2 mt-2 flex flex-row items-center">
+      <div className="w-full bg-surface rounded px-4 py-2 mt-2 flex flex-row items-center">
         <div>
           <img
             src="images/ProductStatusCardarrow-icon.svg"
@@ -71,16 +71,16 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
           />
         </div>
         <div className="flex flex-col mr-5">
-          <h2 className="text-sm font-sansbold text-blue-900">
+          <h2 className="text-sm font-bold text-primaryText">
             بازگشت بی چون و چرا
           </h2>
-          <p className="text-xs mt-2 leading-5 text-justify">
+          <p className="text-xs mt-2 leading-5 text-justify text-primaryText">
             از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی
             خوشتون نیومده میتونید بی قید و شرط پس بدید
           </p>
         </div>
       </div>
-    </section>
+    </>
   );
 };