diff --git a/src/App.js b/src/App.js
index 103afff..4e45b02 100644
--- a/src/App.js
+++ b/src/App.js
@@ -213,7 +213,7 @@ function App() {
 
         {/* <GridListTable /> */}
 
-        <PopupCard />
+        {/* <PopupCard /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <CircleInCircle /> */}
diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js
index 203bf2c..6a49c28 100644
--- a/src/components/CardTrelloDesign/index.js
+++ b/src/components/CardTrelloDesign/index.js
@@ -31,12 +31,8 @@ const CardTrelloDesign = ({
         {/* right */}
         {circle && (
           <CircleInCircle
-            parentWidth={"w-5"}
-            parentHeight={"h-5"}
-            chidlWidth={"w-2"}
-            chidlHeight={"h-2"}
-            parentBg={"bg-[#FF000044]"}
-            childBg={"bg-[#FF0000]"}
+            parentClassName={"bg-[#FF000044]"}
+            childClassName={"bg-[#FF0000]"}
           />
         )}
         {/* left */}
@@ -58,10 +54,7 @@ const CardTrelloDesign = ({
         </div>
       </div>
       {/* middle */}
-      <p
-        style={{ color: "#00253A" }}
-        className="text-sm leading-6 text-justify mt-3"
-      >
+      <p className="text-sm leading-6 text-justify mt-3 text-[#00253A]">
         طراحی رابط کاربری و تجربه کاربر پروژه اندیشمند به همراه موارد اطلاحی
         پروژه دانوین
       </p>
@@ -69,11 +62,7 @@ const CardTrelloDesign = ({
       <div className="flex flex-row justify-between items-center mt-3">
         {/* right */}
         <div className="flex flex-row items-center gap-x-1">
-          <ProfilePicNextToEachOther
-            num={3}
-            marginLeft={"3px"}
-            width={"w-10"}
-          />
+          <ProfilePicNextToEachOther num={3} />
         </div>
         {/* left */}
         <div className="flex flex-row items-center gap-x-1">
@@ -93,7 +82,6 @@ const CardTrelloDesign = ({
               </div>
             </div>
           )}
-
           {showTag &&
             tags.map((tag) => (
               <NewTagDesign
diff --git a/src/components/CircleInCircle/index.js b/src/components/CircleInCircle/index.js
index b74f16a..48a10bb 100644
--- a/src/components/CircleInCircle/index.js
+++ b/src/components/CircleInCircle/index.js
@@ -1,19 +1,10 @@
 import React from "react";
 
-const CircleInCircle = ({
-  parentWidth,
-  parentHeight,
-  chidlWidth,
-  chidlHeight,
-  parentBg,
-  childBg,
-}) => {
+const CircleInCircle = ({ parentClassName, childClassName }) => {
   return (
-    <div
-      className={` ${parentBg} ${parentWidth} ${parentHeight} rounded-full relative `}
-    >
+    <div className={` ${parentClassName} w-5 h-5 rounded-full relative `}>
       <div
-        className={`${childBg} ${chidlWidth} ${chidlHeight} rounded-full absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2`}
+        className={`${childClassName} w-2 h-2 rounded-full absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2`}
       ></div>
     </div>
   );
@@ -22,10 +13,6 @@ const CircleInCircle = ({
 export default CircleInCircle;
 
 CircleInCircle.defaultProps = {
-  parentWidth: "w-5",
-  parentHeight: "h-5",
-  chidlWidth: "w-2",
-  chidlHeight: "h-2",
-  parentBg: "bg-red-200",
-  childBg: "bg-red-600",
+  parentClassName: "bg-red-200",
+  childClassName: "bg-red-600",
 };
diff --git a/src/components/PopupCard/index.js b/src/components/PopupCard/index.js
index ab0a90c..87c3dd2 100644
--- a/src/components/PopupCard/index.js
+++ b/src/components/PopupCard/index.js
@@ -97,7 +97,7 @@ const PopupCard = ({ selectedChecklist, buttons }) => {
                       <span className="text-sm mr-2">چک لیست ها</span>
                     </div>
                     {/* progress bar */}
-                    <div className="flex flex-row items-center mt-3">
+                    <div className="flex flex-row items-center my-3">
                       <div className="bg-[#DBDBDB77] h-2 w-full rounded">
                         <div
                           className="bg-[#06BACE] h-2 rounded transition delay-150"
@@ -116,22 +116,24 @@ const PopupCard = ({ selectedChecklist, buttons }) => {
                       borderClassname={`border-2 border-[#06BACE] `}
                       inputClassname={`px-4 py-2 text-[#0F0543] focus:bg-white`}
                       activePlaceholderClass={"text-[#06BACE] bg-white"}
-                    />{" "}
-                    {selectedChecklist.slice(0, 3).map((item, index) => (
-                      <div key={index} className="">
-                        <input
-                          disabled={checklist >= 100}
-                          type="checkbox"
-                          className="form-checkbox text-blue-500"
-                          onClick={(e) =>
-                            e.target.checked
-                              ? setChecklist(checklist + 10)
-                              : setChecklist(checklist - 10)
-                          }
-                        />
-                        <span className="text-sm mr-2">{item.title}</span>
-                      </div>
-                    ))}
+                    />
+                    <div className="mt-3">
+                      {selectedChecklist.slice(0, 3).map((item, index) => (
+                        <div key={index} className="">
+                          <input
+                            disabled={checklist >= 100}
+                            type="checkbox"
+                            className="form-checkbox text-blue-500"
+                            onClick={(e) =>
+                              e.target.checked
+                                ? setChecklist(checklist + 10)
+                                : setChecklist(checklist - 10)
+                            }
+                          />
+                          <span className="text-sm mr-2">{item.title}</span>
+                        </div>
+                      ))}
+                    </div>
                   </div>
                 </div>
                 {/* left */}
@@ -169,10 +171,13 @@ const PopupCard = ({ selectedChecklist, buttons }) => {
                   </div>
                   {/* divider */}
                   <div className="border border-[#DBDBDB77] rounded my-5 w-full"></div>
-                  <span className="text-xs text-[#B3B3B3] mb-3 text-light ">
-                    پیوست ها
-                  </span>
-                  <div className="relative flex flex-row items-center justify-around border-2 border-dashed border-[#65A9FF] w-full p-4 rounded-md">
+                  <TitleSubtitle
+                    title={false}
+                    subTitle={"پیوست ها"}
+                    subtitleBorderClassName={""}
+                    subtitleClassName={"text-[#B3B3B3]"}
+                  />
+                  <div className="mt-3 relative flex flex-row items-center justify-around border-2 border-dashed border-[#65A9FF] w-full p-4 rounded-md">
                     <img src={documentCloud} alt="" />
                     <input
                       type="file"
@@ -186,8 +191,6 @@ const PopupCard = ({ selectedChecklist, buttons }) => {
                       </span>
                     </p>
                   </div>
-                  {/* divider */}
-                  <div className="border border-[#DBDBDB77] rounded my-5 w-full"></div>
                 </div>
               </div>
             </div>
diff --git a/src/components/TimeLineComponent/index.js b/src/components/TimeLineComponent/index.js
index 2269c0a..2ec791b 100644
--- a/src/components/TimeLineComponent/index.js
+++ b/src/components/TimeLineComponent/index.js
@@ -15,7 +15,7 @@ const TimeLineComponent = ({ data }) => {
     <div className="px-10 py-4 mx-auto bg-white">
       <div className="flex flex-row items-start justify-between">
         <div>
-          <TitleSubtitle subTitle={false} titleBorderClassName={"ml-2"} />
+          <TitleSubtitle subTitle={false} />
           <SelectYear />
         </div>
         <div className="flex-1">