diff --git a/src/components/Project/ProjectOverview.jsx b/src/components/Project/ProjectOverview.jsx
index ee665144..7a8bd59e 100644
--- a/src/components/Project/ProjectOverview.jsx
+++ b/src/components/Project/ProjectOverview.jsx
@@ -133,10 +133,10 @@ const ProjectOverview = ({ project }) => {
         },
       },
       stroke: {
-        lineCap: "round", 
+        lineCap: "round",
       },
-      labels: ["Progress"], 
-      series: [percentage], 
+      labels: ["Progress"],
+      series: [percentage],
     };
   };
   const [radialPercentage, setRadialPercentage] = useState(75); // Initial percentage
@@ -165,7 +165,7 @@ const ProjectOverview = ({ project }) => {
   }, [selectedProject]);
 
   return (
-    <div className="card" style={{ minHeight: "490px" }}>
+    <div className="card h-100">
       <div className="card-header text-start">
         <h5 className="card-action-title mb-0">
           {" "}
@@ -173,75 +173,75 @@ const ProjectOverview = ({ project }) => {
           <span className="ms-2 fw-bold">Project Statistics</span>
         </h5>
       </div>
-     <div className="card-body">
-  <ul className="list-unstyled m-0 p-0">
-    <li className="d-flex flex-wrap">
-      <div className="w-100 d-flex flex-wrap">
-        {/* Centered Chart */}
-        <div className="w-100 d-flex justify-content-center mb-3">
-          <div >
-            <Chart
-              options={radialBarOptions}
-              series={radialBarOptions.series}
-              type="radialBar"
-              height="100%"
-            />
-          </div>
-        </div>
-
-        {/* Info Section */}
-        <div className="mb-2" style={{ flex: "1 1 auto" }}>
-          <div>
-            {/* Tasks Planned */}
-            <div className="d-flex align-items-center mb-3">
-              <div className="avatar me-2">
-                <span className="avatar-initial rounded-2 bg-label-primary">
-                  <i className="bx bx-check text-primary fs-4"></i>
-                </span>
+      <div className="card-body">
+        <ul className="list-unstyled m-0 p-0">
+          <li className="d-flex flex-wrap">
+            <div className="w-100 d-flex flex-wrap">
+              {/* Centered Chart */}
+              <div className="w-100 d-flex justify-content-center mb-3">
+                <div >
+                  <Chart
+                    options={radialBarOptions}
+                    series={radialBarOptions.series}
+                    type="radialBar"
+                    height="100%"
+                  />
+                </div>
               </div>
-              <div className="d-flex flex-column text-start">
-                <small className="fw-bold">Tasks Planned</small>
-                <h5 className="mb-0">
-                  {FormattedNumber(current_project?.plannedWork)}
-                </h5>
+
+              {/* Info Section */}
+              <div className="mb-2" style={{ flex: "1 1 auto" }}>
+                <div>
+                  {/* Tasks Planned */}
+                  <div className="d-flex align-items-center mb-3">
+                    <div className="avatar me-2">
+                      <span className="avatar-initial rounded-2 bg-label-primary">
+                        <i className="bx bx-check text-primary fs-4"></i>
+                      </span>
+                    </div>
+                    <div className="d-flex flex-column text-start">
+                      <small className="fw-bold">Tasks Planned</small>
+                      <h5 className="mb-0">
+                        {FormattedNumber(current_project?.plannedWork)}
+                      </h5>
+                    </div>
+                  </div>
+
+                  {/* Tasks Completed */}
+                  <div className="d-flex align-items-center mb-3">
+                    <div className="avatar me-2">
+                      <span className="avatar-initial rounded-2 bg-label-info">
+                        <i className="bx bx-star text-info fs-4"></i>
+                      </span>
+                    </div>
+                    <div className="d-flex flex-column text-start">
+                      <small className="fw-bold">Tasks Completed</small>
+                      <h5 className="mb-0">
+                        {FormattedNumber(current_project?.completedWork)}
+                      </h5>
+                    </div>
+                  </div>
+
+                  {/* Team Size */}
+                  <div className="d-flex align-items-center">
+                    <div className="avatar me-2">
+                      <span className="avatar-initial rounded-2 bg-label-primary">
+                        <i className="bx bx-group text-primary fs-4"></i>
+                      </span>
+                    </div>
+                    <div className="d-flex flex-column text-start">
+                      <small className="fw-bold">Current Team Size</small>
+                      <h5 className="mb-0">
+                        {FormattedNumber(current_project?.teamSize)}
+                      </h5>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
-
-            {/* Tasks Completed */}
-            <div className="d-flex align-items-center mb-3">
-              <div className="avatar me-2">
-                <span className="avatar-initial rounded-2 bg-label-info">
-                  <i className="bx bx-star text-info fs-4"></i>
-                </span>
-              </div>
-              <div className="d-flex flex-column text-start">
-                <small className="fw-bold">Tasks Completed</small>
-                <h5 className="mb-0">
-                  {FormattedNumber(current_project?.completedWork)}
-                </h5>
-              </div>
-            </div>
-
-            {/* Team Size */}
-            <div className="d-flex align-items-center">
-              <div className="avatar me-2">
-                <span className="avatar-initial rounded-2 bg-label-primary">
-                  <i className="bx bx-group text-primary fs-4"></i>
-                </span>
-              </div>
-              <div className="d-flex flex-column text-start">
-                <small className="fw-bold">Current Team Size</small>
-                <h5 className="mb-0">
-                  {FormattedNumber(current_project?.teamSize)}
-                </h5>
-              </div>
-            </div>
-          </div>
-        </div>
+          </li>
+        </ul>
       </div>
-    </li>
-  </ul>
-</div>
 
     </div>
   );
diff --git a/src/components/collections/AddPayment.jsx b/src/components/collections/AddPayment.jsx
index a47200ee..1ad641b8 100644
--- a/src/components/collections/AddPayment.jsx
+++ b/src/components/collections/AddPayment.jsx
@@ -72,7 +72,7 @@ const AddPayment = ({ onClose }) => {
 
             <div className="col-12 col-md-6  mb-2">
               <Label required>Transaction Date </Label>
-              <DatePicker
+              <DatePicker className="w-100"
                 name="paymentReceivedDate"
                 control={control}
                 minDate={