diff --git a/src/components/CardDesign3/index.js b/src/components/CardDesign3/index.js
index b016623..0364457 100644
--- a/src/components/CardDesign3/index.js
+++ b/src/components/CardDesign3/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import CustomToast2 from "../CustomToast2";
+import Button from "../Button";
 import TitleSubtitle from "../TitleSubtitle";
 
 const CardDesign3 = () => {
@@ -13,6 +14,10 @@ const CardDesign3 = () => {
         titleDividerBgColor={"bg-[#1FF87D]"}
         titleDividerWidth={"w-1.5"}
       />
+      <Button
+        className={`${btn.className}  border-none px-1 py-0.5 text-xs rounded-sm text-white`}
+        text={btn.name}
+      />
       <CustomToast2 num={4} />
     </div>
   );
diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js
index 982840a..d7ad894 100644
--- a/src/components/CardTrelloDesign/index.js
+++ b/src/components/CardTrelloDesign/index.js
@@ -118,7 +118,6 @@ const CardTrelloDesign = ({
         parentBg={"bg-[#E3E3E3]"}
         childBg={"bg-[#06BACE]"}
       />
-      {/* <div className="hidden bg-[#0000ff] bg-[#00ff00] bg-[#ff0000]  "></div> */}
     </div>
   );
 };
@@ -149,14 +148,14 @@ CardTrelloDesign.defaultProps = {
   tags: [
     {
       title: "29 فروردین",
-      color: "#007987",
-      backgroundColor: "#06BACE33",
+      color: "text-[#007987]",
+      backgroundColor: "bg-[#06BACE33]",
       icon: clock,
     },
     {
       title: "12 از 13",
-      color: "#FFAA00",
-      backgroundColor: "#FFAA0033",
+      color: "text-[#FFAA00]",
+      backgroundColor: "bg-[#FFAA0033]",
       icon: nike,
     },
   ],
diff --git a/src/components/TitleSubtitle/index.js b/src/components/TitleSubtitle/index.js
index 8f5f567..0acf005 100644
--- a/src/components/TitleSubtitle/index.js
+++ b/src/components/TitleSubtitle/index.js
@@ -3,24 +3,16 @@ import React from "react";
 const TitleSubtitle = ({
   title,
   subTitle,
-  titleColor,
-  titleFontWeight,
-  titleFontSize,
-  titleDividerBgColor,
-  titleDividerWidth,
-  titleDividerHeight,
+  titleClassName,
+  titleBorderClassName,
 }) => {
   return (
     <div>
       {/*  page Title */}
       {title && (
         <div className="flex flex-row items-center">
-          <div
-            className={`rounded ml-1 ${titleDividerBgColor} ${titleDividerWidth} ${titleDividerHeight}`}
-          ></div>
-          <h2 className={`${titleColor} ${titleFontWeight} ${titleFontSize}`}>
-            {title}
-          </h2>
+          <div className={`rounded ml-1 ${titleClassName}`}></div>
+          <h2 className={`${titleBorderClassName}`}>{title}</h2>
         </div>
       )}
       {/* page subTitle */}
@@ -39,11 +31,6 @@ export default TitleSubtitle;
 TitleSubtitle.defaultProps = {
   title: "میزان فروش محصولات",
   subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
-
-  titleColor: "text-[#233876]",
-  titleFontWeight: "font-normal",
-  titleFontSize: "text-base",
-  titleDividerBgColor: "bg-blue-600",
-  titleDividerWidth: "w-1",
-  titleDividerHeight: "h-5",
+  titleClassName: "text-base font-normal text-[#233876]",
+  titleBorderClassName: "w-1 h-5 bg-blue-600",
 };