diff --git a/src/components/CardDesgin/CardTrelloDesign/index.js b/src/components/CardDesgin/CardTrelloDesign/index.js
index 5d002dd..d2d0b30 100644
--- a/src/components/CardDesgin/CardTrelloDesign/index.js
+++ b/src/components/CardDesgin/CardTrelloDesign/index.js
@@ -28,8 +28,8 @@ const CardTrelloDesign = ({
         {/* right */}
         {circle && (
           <CircleInCircle
-            parentClassName={"bg-[#FF000044]"}
-            childClassName={"bg-[#FF0000]"}
+            parentClassName={"bg-primaryDark"}
+            childClassName={"bg-primaryLight"}
           />
         )}
         {/* left */}
@@ -66,14 +66,14 @@ const CardTrelloDesign = ({
           {/* comment Icon */}
           {commnets && (
             <div class="flex flex-row items-center ml-1">
-              <span className="text-xs ml-0.5 text-[10px] text-[#707070]">
+              <span className="text-xs ml-0.5 text-[10px] text-primaryDark">
                 10
               </span>
               <CommentIcon
                 icon="images/CardTrelloDesignmessage-text.svg"
                 commentClassName="w-5"
                 commentNum={false}
-                className="w-2.5 h-2.5 bg-[#0AABFF] absolute top-0 left-0 transfrom -translate-x-0.5 border-white"
+                className="w-2.5 h-2.5 bg-primary absolute top-0 left-0 transfrom -translate-x-0.5 border-surface"
               />
             </div>
           )}
diff --git a/src/components/CardDesgin/index.js b/src/components/CardDesgin/index.js
index a9ebea2..d788a84 100644
--- a/src/components/CardDesgin/index.js
+++ b/src/components/CardDesgin/index.js
@@ -28,7 +28,7 @@ function CardDesgin() {
   return (
     <div className="w-full flex flex-col items-center">
       <select
-        className="mb-10 w-20 bg-gray-200"
+        className="mb-10 w-20 bg-surface border border-surfaceBorder"
         onChange={(e) => setType(e.target.value)}
       >
         {Object.keys(list).map((option, index) => (