diff --git a/src/components/ProductSalesAmount/Design1/index.js b/src/components/ProductSalesAmount/Design1/index.js
index 86aa6a7..a8895c6 100644
--- a/src/components/ProductSalesAmount/Design1/index.js
+++ b/src/components/ProductSalesAmount/Design1/index.js
@@ -15,9 +15,12 @@ const Design1 = ({ title, price, incomes }) => {
         <span className="mr-1">تومان</span>
       </p>
       {/* card */}
-      <div className="flex flex-row flex-wrap items-center">
+      <div className="mx-auto w-fit flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse  p-4 py-7 ">
         {incomes.map((income, index) => (
-          <div style={{ width: "33%" }} className="flex flex-row my-2">
+          <div
+            key={index}
+            className="flex-grow flex-1 flex flex-col gap-y-4 px-4"
+          >
             <div className="flex flex-col border-gray-200 p-3">
               <p className="text-base">{income.name}</p>
               <p className="text-lg font-bold text-center my-2">