diff --git a/src/App.js b/src/App.js
index 5372a67..58ad719 100644
--- a/src/App.js
+++ b/src/App.js
@@ -100,7 +100,7 @@ function App() {
   return (
     <Provider store={store}>
       <div className="App">
-        <ProductDesign />
+        {/* <ProductDesign /> */}
         {/* <VodProductDesign /> */}
         {/* <VodProduct /> */}
         {/* <VodProductNew /> */}
@@ -118,7 +118,7 @@ function App() {
         <BlogDesign5 />
         <BlogDesign6 /> */}
 
-        <Button />
+        {/* <Button /> */}
         {/* <ButtonDivTag /> */}
 
         {/* ---------------------------- not usable ---------------------------- */}
diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js
index 42683ba..b9af401 100644
--- a/src/components/CardTrelloDesign/index.js
+++ b/src/components/CardTrelloDesign/index.js
@@ -115,7 +115,7 @@ const CardTrelloDesign = ({
       {/* progressBar */}
       <AnimatedProgressBar
         rangeWidth={"10%"}
-        parentBg={"bg-[#E3E3E3] ltr"}
+        parentBg={"bg-[#E3E3E3] ltr mt-3"}
         childBg={"bg-[#06BACE]"}
       />
     </div>
diff --git a/src/components/ProductSalesAmount/Design2/index.js b/src/components/ProductSalesAmount/Design2/index.js
index 71d7b63..38f32ce 100644
--- a/src/components/ProductSalesAmount/Design2/index.js
+++ b/src/components/ProductSalesAmount/Design2/index.js
@@ -13,7 +13,11 @@ const Design2 = ({ incomes }) => {
       {incomes.map((income, index) => (
         <div key={index} className="flex flex-row items-center mt-4">
           <img src={income.image} alt="" className="w-14 rounded-full" />
-          <AnimatedProgressBar />
+          <AnimatedProgressBar
+            rangeWidth={"10%"}
+            parentBg={"bg-[#E3E3E3] mx-2"}
+            childBg={"bg-[#06BACE]"}
+          />
           <p>{income.percentNumb}</p>
         </div>
       ))}