diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js
index e7c5153..c207247 100644
--- a/src/components/CardTrelloDesign/index.js
+++ b/src/components/CardTrelloDesign/index.js
@@ -9,7 +9,7 @@ import messageText from "./images/message-text.svg";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
 import AnimatedProgressBar from "../AnimatedProgressBar";
 
-const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag }) => {
+const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag,emptyCards,showEmptyCards }) => {
   return (
     <div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
       {/* top */}
@@ -39,6 +39,9 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag }) => {
             text={btn.name}
           />
           )}
+          {showEmptyCards && emptyCards.map((card,idx) => (
+            <div className={`w-5 h-1.5 rounded ${card.backgroundColor}`}></div>
+          ))}
         </div>
       </div>
       {/* middle */}
@@ -111,7 +114,7 @@ CardTrelloDesign.defaultProps = {
       name: "بک اند",
       color: "#C7FF0A"
     }
-  ],
+  ],  
 
   showTag:true,
   tags: [
@@ -128,4 +131,18 @@ CardTrelloDesign.defaultProps = {
       icon: nike
     },
   ],
+
+  showEmptyCards:false,
+  emptyCards: [
+    {
+      backgroundColor: "bg-[#FF0A3C]"
+    },
+    {
+      backgroundColor: "bg-[#0AABFF]"
+    },
+    {
+      backgroundColor: "bg-[#C7FF0A]"
+    },
+  ]
+
 };