diff --git a/public/Background.png b/public/Background.png
new file mode 100644
index 0000000..744a5e9
Binary files /dev/null and b/public/Background.png differ
diff --git a/public/index.html b/public/index.html
index 110113c..68b065e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="" />
-  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600&display=swap" rel="stylesheet">
 
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
@@ -29,14 +29,13 @@
   <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
   <style>
      body {
-  background-color: #E9ECFF;
-  background-image: url('../src/assets/Image/Pattern.png');
-  background-size: cover;
-  background-repeat: no-repeat;
-  
-  background-position: center;
-  background-blend-mode: overlay;
-  font-family: Manrope;
+  background-image: url('Background.png');
+  background-color: #f9fff6;
+        font-family: "Comfortaa";
+
+        background-position: top;
+        background-repeat: no-repeat;
+        background-size: 100% auto;
 }
 
 
diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index 473ed62..d1a40a9 100644
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -93,25 +93,34 @@ body {
   display: flex;
 
   align-items: center;
-  background-color: #FFFFFF; 
+
  width: 400px;
- height: 90px;
- 
+ height: 81px;
+ background: #FFFFFF;
+ border: 1px solid #EBEAF2;
+ box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
+ border-radius: 20px;
  margin-top: 20px;
  padding: 10px 20px;
- border-radius: 20px;
+
 }
 .navbar {
   margin-top: 20px;
   width: 1200px;
-  height: 90px;
-  background-color: #FFFFFF;
-  padding: 10px 20px;
-  border-radius: 10px;
-  display: flex;
+  height: 81px;
   
+  padding: 10px 20px;
+
+  display: flex;
+
+  background: #FFFFFF;
+  border: 1px solid #EBEAF2;
+  box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
+  border-radius: 20px;
+font-weight: bold;
+  font-size: 16px;
   justify-content: space-between;
-  box-shadow: 0px 0px 10px rgba(66, 71, 76, 0.08);
+
   align-items: center;
   box-sizing: border-box;
   flex: 1; /* Takes the remaining space between navbar-left and the center header */
@@ -123,7 +132,7 @@ body {
 .navbar .nav-item.active .nav-link {
   color: #ffffff; /* Active link color */
   background-color: #282e26;
-  border-radius: 20px;
+  border-radius: 40px;
   padding: 10px 15px;
   font-weight: bold; /* Bold text for active link */
 }
@@ -144,7 +153,7 @@ body {
   align-items: center;
 }
 .nav-link {
-  font-family: "Manrope";
+  font-family: 'Comfortaa', sans-serif;
   font-size: 16px !important;
   color: #002300;
   
@@ -306,7 +315,25 @@ body {
   list-style-type: none;
   padding: 0;
   margin: 0;
-  margin-left: 80%;
+
+  position: absolute;
+  /* margin-left: 140px; */
+  top: 100%; /* Positions dropdown below the parent */
+  left: 0;
+  background-color: #FFFFFF;
+  border: 1px solid #F6F6F6;
+  z-index: 1000;
+  border-radius: 10px;
+  min-width: 120px; /* Optional minimum width */
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+}
+
+.nav-menu-drop {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
   position: absolute;
   /* margin-left: 140px; */
   top: 100%; /* Positions dropdown below the parent */
@@ -414,6 +441,7 @@ body {
 .table-darkcustom td {
   text-align: start;
   vertical-align: middle;
+  
   font-size: 16px;
 }
 /* Styling for the last header cell */
@@ -484,7 +512,7 @@ body {
 
 .search-icon {
   position: absolute;
-  top: 50%;
+  top: 30%;
   left: 15px; /* Adjust as needed */
   transform: translateY(-50%);
   pointer-events: none; /* Prevent clicks on the icon */
@@ -493,6 +521,7 @@ body {
 .search-container {
   position: relative;
   flex: 3;
+  margin-left: 0px;
   max-width: 300px;
 }
 .search-container input {
@@ -501,6 +530,7 @@ body {
   height: 50px;
   background: #f4f4f4;
   border-radius: 50px;
+
   border: none;
   padding-left: 40px;
   font-size: 16px;
@@ -514,8 +544,8 @@ body {
 }
 .search-container-icon {
   position: absolute;
-  left: 10px;
-  top: 50%;
+  left: 12px;
+  top: 47%;
   transform: translateY(-50%);
   pointer-events: none;
 }
@@ -706,6 +736,7 @@ body {
   margin: auto;
   background-color: white;
   width: 90%;
+
   /* Changed from 1600px to a percentage */
   max-width: 1600px;
   /* Maximum width for larger screens */
@@ -725,6 +756,7 @@ h3 {
   box-shadow: none;
   outline: none;
   width: auto;
+
   height: 42px;
   padding: 8px 12px;
   font-size: 16px;
@@ -738,6 +770,7 @@ h3 {
 
 .expense-searchcontainerstart {
   width: 90%;
+ 
 }
 .custbtn {
   box-shadow: none;
@@ -795,13 +828,15 @@ h3 {
 .table-responsive th {
   background-color: #282e26;
   color: white;
+ 
 }
 .table-responsives {
   border: 0.5px solid #f4f4f4;
   border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
 }
 .table-responsive {
-
+  border-left: 1px solid #ebeaf2;
+  border-right: 1px solid #ebeaf2;
   border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
 }
 .expensetableheader th:first-child {
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js b/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js
index a6e8427..30f990d 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js
@@ -304,13 +304,13 @@ const ATMDepositTable = (props) => {
   return (
     <div>
 
-      <div
+<div
         style={{
           display: "flex",
-          gap: "16px",
+          gap: "50px",
           justifyContent: "center",
           alignItems: "center",
-          margin: "20px",
+        marginBottom:"20px"
         }}
       >
         {/* Invoice due this month */}
@@ -318,20 +318,30 @@ const ATMDepositTable = (props) => {
           style={{
             backgroundColor: "#fff8e6",
             border: "1px solid #ffd700",
-            borderRadius: "8px",
+            borderRadius: "20px",
             padding: "16px 24px",
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "flex-start",
-            width: "400px",
+            width: "385px",
+            height: "130px",
             textAlign: "left",
           }}
         >
-          <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: "48px",
+              lineHeight: "27px",
+                  marginTop:"20px"
+            }}
+          >
             $500
           </p>
-          <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
             Invoice due this month
           </p>
         </div>
@@ -341,20 +351,30 @@ const ATMDepositTable = (props) => {
           style={{
             backgroundColor: "#e6ffee",
             border: "1px solid #00b300",
-            borderRadius: "8px",
+            borderRadius: "20px",
             padding: "16px 24px",
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "flex-start",
-            width: "400px",
+            width: "385px",
+            height: "130px",
             textAlign: "left",
           }}
         >
-          <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
-            $19,864,63,521
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: "48px",
+              lineHeight: "27px",
+                  marginTop:"20px"
+            }}
+          >
+            $19,521
           </p>
-          <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
             Last 7 days sale
           </p>
         </div>
@@ -364,20 +384,30 @@ const ATMDepositTable = (props) => {
           style={{
             backgroundColor: "#ffe6e6",
             border: "1px solid #ff4d4d",
-            borderRadius: "8px",
+            borderRadius: "20px",
             padding: "16px 24px",
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "flex-start",
-            width: "400px",
+            width: "385px",
+            height: "130px",
             textAlign: "left",
           }}
         >
-          <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: " 48px",
+              lineHeight: "27px",
+                  marginTop:"20px"
+            }}
+          >
             $0.00
           </p>
-          <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
             Expense this month
           </p>
         </div>
@@ -388,7 +418,7 @@ const ATMDepositTable = (props) => {
         <div className="searchcontainer">
           <div
             className="input-group"
-            style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
+            style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
           >
             <span
               className="input-group-text"
@@ -483,9 +513,16 @@ const ATMDepositTable = (props) => {
           <div
             className="filterbutton"
             style={{
-              marginLeft: "10px",
-              backgroundColor: "#f4f4f4",
-              width: "130px",
+              width: "40px",
+              height: "40px",
+              borderRadius: "60px",
+              padding: "15px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              position: "relative",
+           
+         
               borderRadius: "60px",
               padding: "15px",
               display: "flex",
@@ -503,6 +540,7 @@ const ATMDepositTable = (props) => {
               style={{
                 fontSize: "14px",
                 display: "flex",
+                marginLeft:'6px',
                 alignItems: "center",
                 justifyContent: "center",
                 padding: "0",
@@ -548,7 +586,7 @@ const ATMDepositTable = (props) => {
                   strokeLinejoin="round"
                 />
               </svg>
-              &nbsp; Filter
+              &nbsp; 
             </button>
 
             <ul
@@ -659,7 +697,12 @@ const ATMDepositTable = (props) => {
       {/* Table of Invoices */}
       <table className="table table-borderless table-responsive">
         <thead>
-          <tr>
+          <tr  style={{
+            backgroundColor: '#282e26',
+            color: '#ffffff',
+            height: '30px', // Add height for row spacing
+            textAlign: "center",
+          }}>
             {["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
               (header, index) => (
                 <th
@@ -668,7 +711,7 @@ const ATMDepositTable = (props) => {
                   style={{
                     paddingLeft: index === 0 ? "30px" : "0",
                     cursor: "pointer",
-                    textAlign: "start",
+                    textAlign: "center",
                     alignContent: "center",
                      backgroundColor:'#282e26',
                       color:'#ffffff'
@@ -712,11 +755,11 @@ const ATMDepositTable = (props) => {
           {currentInvoices.length !== 0 ?
             currentInvoices.map((invoice) => (
               <tr key={invoice.id}>
-                <td style={{ cursor: "pointer", textAlign: "left" }}>
+                <td style={{ cursor: "pointer", textAlign: "center" }}>
                   {invoice.date}
                 </td>
 
-                <td style={{ cursor: "pointer", textAlign: "left" }}>
+                <td style={{ cursor: "pointer", textAlign: "center" }}>
                   <span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
                     {invoice.bank_deposite_type
                       ? invoice.bank_deposite_type.charAt(0).toUpperCase() +
@@ -724,8 +767,8 @@ const ATMDepositTable = (props) => {
                       : "N/A"}
                   </span>
                 </td>
-                <td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
-                <td style={{ textAlign: 'left' }}>
+                <td style={{ textAlign: "center" }}>{invoice.total_amount}</td>
+                <td style={{ textAlign: 'center' }}>
                   <span style={getStatusStyle(invoice.transaction_type)}>
                     {invoice.transaction_type ?
                       invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js b/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
index 59b3ba0..0711bed 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
@@ -4,7 +4,7 @@ import React, { useState, useEffect, useContext, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast, ToastContainer } from "react-toastify";
 import "./Invoice.css";
-import { useLocation } from 'react-router-dom';
+import { useLocation } from "react-router-dom";
 import TableComponent from "./InvoiceTable";
 import useApi from "../../../../../utils/api-manager/Helper/useApi";
 import AuthContext from "../../../../../utils/secure-route/AuthContext";
@@ -28,7 +28,7 @@ function AddInvoice() {
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
 
-  const [activeButton, setActiveButton] = useState('');
+  const [activeButton, setActiveButton] = useState("");
 
   const location = useLocation();
 
@@ -48,12 +48,12 @@ function AddInvoice() {
     vendor_department: "",
     vendor_department_name: "",
     invoice_no: "", // This will now have a default value from the last invoice
-    pay_method_status: "",
+    pay_method_status: "pay_now",
     prepaid_tax: false,
     prepaid_tax_percentage: "",
     amount: "",
     remaining_amount: "",
-    pay_method: "",
+    pay_method: "cash",
     due_date: null,
     note: "",
     bank: "",
@@ -81,8 +81,7 @@ function AddInvoice() {
       cheque_no: null,
       type: "",
     });
-  }
-
+  };
 
   useEffect(() => {
     setFormData((prevData) => ({
@@ -95,7 +94,6 @@ function AddInvoice() {
   const [banks, setBanks] = useState([]);
   const [dueDays, setDueDays] = useState([]);
 
-
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -123,9 +121,9 @@ function AddInvoice() {
 
     const invoiceStatus =
       formData.pay_method_status === "pay_now" &&
-        (formData.pay_method === "cash" ||
-          formData.pay_method === "bank" ||
-          formData.pay_method === "cheque")
+      (formData.pay_method === "cash" ||
+        formData.pay_method === "bank" ||
+        formData.pay_method === "cheque")
         ? "paid"
         : "unpaid";
 
@@ -157,25 +155,22 @@ function AddInvoice() {
       }),
     };
 
-
-    await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit).then((response) => {
-      toast.success("Invoice submitted successfully!");
-      // Reload the component by navigating to the same route
-      setReloadData(!reloadData);
-      makeBlank();
-      // navigate(0);
-
-    }).catch((error) => {
-      setReloadData(!reloadData);
-      toast.error(
-        "An error occurred while submitting the invoice. Please check your network and try again."
-      );
-    });
-
+    await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit)
+      .then((response) => {
+        toast.success("Invoice submitted successfully!");
+        // Reload the component by navigating to the same route
+        setReloadData(!reloadData);
+        makeBlank();
+        // navigate(0);
+      })
+      .catch((error) => {
+        setReloadData(!reloadData);
+        toast.error(
+          "An error occurred while submitting the invoice. Please check your network and try again."
+        );
+      });
   };
 
-
-
   const fetchData = async () => {
     try {
       const [dueDaysResponse, vendorResponse, bankResponse] = await Promise.all(
@@ -230,7 +225,6 @@ function AddInvoice() {
         [name]: type === "checkbox" ? checked : value,
       }));
     }
-
   };
   const handlePaymentMethodChange = (e) => {
     const value = e.target.value;
@@ -240,8 +234,8 @@ function AddInvoice() {
       value === "credit_invoice"
         ? "credit_invoice"
         : value === "pay_later"
-          ? "pay_later"
-          : "";
+        ? "pay_later"
+        : "";
 
     setFormData((prevData) => ({
       ...prevData,
@@ -256,7 +250,7 @@ function AddInvoice() {
   };
 
   const handleCancel = () => {
-    makeBlank()
+    makeBlank();
     navigate("/");
   };
 
@@ -280,7 +274,7 @@ function AddInvoice() {
     },
     {
       row: 1,
-      column: "col-md-2",
+      column: "col-md-3",
       label: "Invoice Number",
       type: "invoice_no",
       name: "invoice_no",
@@ -288,7 +282,7 @@ function AddInvoice() {
     },
     {
       row: 2,
-      column: "col-md-3",
+      column: "col-md-2",
       label: "Amount",
       name: "amount",
       type: "prefix-input",
@@ -302,20 +296,20 @@ function AddInvoice() {
       // label: "Payment Method:",
       type: "radio",
       options: [
-        { value: "pay_later", label: "Pay Later" },
         { value: "pay_now", label: "Pay Now" },
+        { value: "pay_later", label: "Pay Later" },
         { value: "credit_invoice", label: "Credit Invoice" },
       ],
     },
     {
       row: 4,
-      column: "col-md-6",
+      column: "col-md-5",
       label: "Payment Method Options",
       type: "payment-method-options",
     },
     {
       row: 4,
-      column: "col-md-6",
+      column: "col-md-5",
       label: "Payment Method Options",
       type: "pay-bank-options",
     },
@@ -331,15 +325,15 @@ function AddInvoice() {
     // The "Notes" field is conditionally rendered based on pay_method_status
     ...(formData.pay_method_status !== "pay_now"
       ? [
-        // {
-        //   row: 5,
-        //   column: "col-md-6",
-        //   label: "Notes",
-        //   type: "text",
-        //   name: "note",
-        //   placeholder: "Notes",
-        // },
-      ]
+          // {
+          //   row: 5,
+          //   column: "col-md-6",
+          //   label: "Notes",
+          //   type: "text",
+          //   name: "note",
+          //   placeholder: "Notes",
+          // },
+        ]
       : []),
     {
       row: 5,
@@ -348,13 +342,12 @@ function AddInvoice() {
       type: "checkbox",
       name: "prepaid_tax",
     },
-
   ];
 
   const paymentMethodOptions = [
     { value: "cash", label: "Cash" },
-    { value: "cheque", label: "Cheque" },
     { value: "bank", label: "Bank Card (ACH/EFT)" },
+    { value: "cheque", label: "Cheque" },
   ];
 
   const groupedFields = fields.reduce((acc, field) => {
@@ -385,7 +378,6 @@ function AddInvoice() {
     setIsOpen(false); // Close the dropdown after clicking a link
 
     navigate(path); // Navigate to the clicked path
-
   };
 
   const renderField = (field) => {
@@ -406,7 +398,7 @@ function AddInvoice() {
               placeholder={field.placeholder}
               value={formData[field.name]}
               onChange={handleChange}
-            // onBlur={handleChange}
+              // onBlur={handleChange}
             />
           </div>
         );
@@ -421,12 +413,11 @@ function AddInvoice() {
               value={formData[field.name]}
               onChange={handleChange}
               maxLength={14} // Set maxLength to 14
-            // onBlur={handleChange}
+              // onBlur={handleChange}
             />
           </div>
         );
 
-
       case "date":
         return (
           <div className="form-group">
@@ -450,7 +441,6 @@ function AddInvoice() {
               borderBottom: "1px solid #f4f4f4",
               paddingBottom: "16px",
               height: "50px",
-          
             }}
           >
             <div className="input-groups">
@@ -459,7 +449,7 @@ function AddInvoice() {
               </span> */}
               <input
                 type="text" // Set input type to 'text' to allow decimals
-                style={{  borderBottom :  "2px solid #e4e5e7" , marginTop:'30px'}}
+                style={{ borderBottom: "2px solid #e4e5e7", marginTop: "30px" }}
                 className="form-control-borderless"
                 name={field.name}
                 placeholder={field.placeholder}
@@ -468,8 +458,8 @@ function AddInvoice() {
                 onInput={(e) => {
                   // Allow only numbers and a decimal point with two digits after it
                   e.target.value = e.target.value
-                    .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
-                    .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
+                    .replace(/[^0-9.]/g, "") // Remove non-numeric characters except the decimal point
+                    .replace(/^(\d*\.?\d{0,2}).*/g, "$1") // Allow only two decimal places
                     .slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
                 }}
               />
@@ -481,7 +471,7 @@ function AddInvoice() {
         return (
           <div className="form-group">
             <select
-              className="form-control-borderless"
+              className="input-select"
               name="vendor_department"
               value={formData.vendor_department}
               onChange={(e) => {
@@ -508,7 +498,6 @@ function AddInvoice() {
                   </option>
                 ))}
             </select>
-
           </div>
         );
 
@@ -582,27 +571,47 @@ function AddInvoice() {
           )
         );
 
-        case "radio":
-          return (
-            <div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
-              <label className="me-4">{field.label}</label>
+      case "radio":
+        return (
+          <div
+            className="d-flex align-items-center"
+            style={{
+              border: "1px solid #ACB4AA",
+              padding: "5px 5px",
+              width: "fit-content",
+              borderRadius: "40px",
+              marginBottom: "20px",
+            }}
+          >
+            <label className="">{field.label}</label>
+            <div className="d-flex">
               {field.options.map((option, index) => (
                 <div
                   key={index}
-                  className="form-check me-4"
+                  className="form-check"
                   style={{
-                    cursor: 'pointer',
-                    backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',              
-                    padding: '5px 15px', // Add padding for better appearance
-                    borderRadius: '20px', // Optional: Round the corners of the label
+                    cursor: "pointer",
+                    backgroundColor:
+                      formData[field.name] === option.value
+                        ? "#4a5546"
+                        : "transparent",
+                    padding: "5px 25px",
+                    borderRadius: "20px",
                   }}
-                  onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })}
+                  onClick={() =>
+                    handlePaymentMethodChange({
+                      target: { name: field.name, value: option.value },
+                    })
+                  }
                 >
                   <label
                     className="form-check-label"
                     style={{
-                      fontWeight: 'normal',
-                      color: formData[field.name] === option.value ? '#ffffff' : '#282e26',
+                      fontWeight: "normal",
+                      color:
+                        formData[field.name] === option.value
+                          ? "#ffffff"
+                          : "#282e26",
                     }}
                   >
                     {option.label}
@@ -610,41 +619,59 @@ function AddInvoice() {
                 </div>
               ))}
             </div>
-          );
-        
+          </div>
+        );
 
-          case "payment-method-options":
-  return (
-    formData.pay_method_status === "pay_now" && (
-      <div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
-        {paymentMethodOptions.map((option, index) => (
-          <div
-            key={index}
-            className="form-check me-4"
-            style={{
-              cursor: 'pointer',
-              backgroundColor: formData.pay_method === option.value ? '#4a5546' : 'transparent',
-              padding: '5px 25px', // Add padding for better appearance
-          borderRadius: '20px', // Optional: Round the corners of the label
-            }}
-            onClick={() => handleChange({ target: { name: 'pay_method', value: option.value } })}
-          >
-            <label
-              className="form-check-label"
+      case "payment-method-options":
+        return (
+          formData.pay_method_status === "pay_now" && (
+            <div
+              className="d-flex align-items-center"
               style={{
-                fontWeight: 'normal',
-                color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
+                border: "2px solid #ACB4AA",
+                padding: "5px 5px", // Add padding to give space on both sides
+                width: "fit-content",
+                borderRadius: "40px",
+                marginBottom: "30px",
               }}
             >
-              {option.label}
-            </label>
-          </div>
-        ))}
-      </div>
-    )
-  );
+              {paymentMethodOptions.map((option, index) => (
+                <div
+                  key={index}
+                  className="form-check "
+                  style={{
+                    cursor: "pointer",
+                    backgroundColor:
+                      formData.pay_method === option.value
+                        ? "#4a5546"
+                        : "transparent",
+                    padding: "5px 25px",
+                    borderRadius: "20px",
+                  }}
+                  onClick={() =>
+                    handleChange({
+                      target: { name: "pay_method", value: option.value },
+                    })
+                  }
+                >
+                  <label
+                    className="form-check-label"
+                    style={{
+                      fontWeight: "normal",
+                      color:
+                        formData.pay_method === option.value
+                          ? "#ffffff"
+                          : "#282e26",
+                    }}
+                  >
+                    {option.label}
+                  </label>
+                </div>
+              ))}
+            </div>
+          )
+        );
 
-          
       case "checkbox":
         return (
           <div className="form-check">
@@ -659,46 +686,47 @@ function AddInvoice() {
           </div>
         );
 
-        case "pay-bank-options":
-          return (
-            (formData.pay_method === "cheque" || formData.pay_method === "bank") && (
-              <div className="row align-items-center">
+      case "pay-bank-options":
+        return (
+          (formData.pay_method === "cheque" ||
+            formData.pay_method === "bank") && (
+            <div className="row align-items-center">
+              <div className="col-md-4">
+                <div className="form-group">
+                  <select
+                    required
+                    className="form-control-borderless"
+                    name="bank"
+                    value={formData.bank}
+                    onChange={handleChange}
+                  >
+                    <option value="">Select Bank</option>
+                    {banks.map((bank) => (
+                      <option key={bank.id} value={bank.id}>
+                        {bank.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              {formData.pay_method === "cheque" && (
                 <div className="col-md-4">
                   <div className="form-group">
-                    <select
+                    <input
                       required
+                      type="text"
                       className="form-control-borderless"
-                      name="bank"
-                      value={formData.bank}
+                      name="cheque_no"
+                      placeholder="Cheque Number"
+                      value={formData.cheque_no}
                       onChange={handleChange}
-                    >
-                      <option value="">Select Bank</option>
-                      {banks.map((bank) => (
-                        <option key={bank.id} value={bank.id}>
-                          {bank.name}
-                        </option>
-                      ))}
-                    </select>
+                      maxLength={20}
+                    />
                   </div>
                 </div>
-        
-                {formData.pay_method === "cheque" && (
-                  <div className="col-md-4">
-                    <div className="form-group">
-                      <input
-                        required
-                        type="text"
-                        className="form-control-borderless"
-                        name="cheque_no"
-                        placeholder="Cheque Number"
-                        value={formData.cheque_no}
-                        onChange={handleChange}
-                        maxLength={20}
-                      />
-                    </div>
-                  </div>
-                )}
-            
+              )}
+
               <div className="col-md-6">
                 <div className="form-group">
                   <input
@@ -709,9 +737,7 @@ function AddInvoice() {
                     onChange={handleChange}
                   />
                 </div>
-
               </div>
-
             </div>
           )
         );
@@ -726,29 +752,31 @@ function AddInvoice() {
       <div className="d-flex justify-content-between mb-4">
         <div className="button-groups">
           <button
-            className={`btn ${activeButton === '/' ? 'active' : ''}`}
-            onClick={() => handleLinkClick('/')}
+            className={`btn ${activeButton === "/" ? "active" : ""}`}
+            onClick={() => handleLinkClick("/")}
           >
-            Add Invoice
+            Add Bill/Invoice
           </button>
           <button
-            className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
-            onClick={() => handleLinkClick('/payInvoice')}
+            className={`btn ${activeButton === "/payInvoice" ? "active" : ""}`}
+            onClick={() => handleLinkClick("/payInvoice")}
           >
-            Pay Invoice
+            Pay Bill/Invoice
           </button>
+
           <button
-            className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
-            onClick={() => handleLinkClick('/bankDeposit')}
-          >
-            Bank Deposit
-          </button>
-          <button
-            className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
-            onClick={() => handleLinkClick('/atmDeposit')}
+            className={`btn ${activeButton === "/atmDeposit" ? "active" : ""}`}
+            onClick={() => handleLinkClick("/atmDeposit")}
           >
             ATM Deposit
           </button>
+
+          <button
+            className={`btn ${activeButton === "/bankDeposit" ? "active" : ""}`}
+            onClick={() => handleLinkClick("/bankDeposit")}
+          >
+            Bank Deposit
+          </button>
         </div>
       </div>
       <div className="formcontainer">
@@ -756,32 +784,37 @@ function AddInvoice() {
           className="container"
           style={{
             backgroundColor: "white",
-            boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
-            borderRadius: "40px"
+            border: "1px solid #EBEAF2",
+            boxShadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157);",
+            borderRadius: "40px",
+            // height: "479px";
           }}
         >
           <form onSubmit={handleSubmit}>
-
             {/* Render Fields */}
             {Object.keys(groupedFields).map((rowKey) => (
-              <div className="row mb-3" key={rowKey}>
+              <div
+                className="row mb-3"
+                style={{
+                  gap: "10%",
+                  paddingLeft: "5%", // Add equal padding
+                  // paddingRight: "%",
+                }}
+                key={rowKey}
+              >
                 {groupedFields[rowKey].map((field, index) => (
                   <div key={index} className={field.column}>
                     {renderField(field)}
                   </div>
-
                 ))}
-
               </div>
-
             ))}
 
             {/* Prepaid Tax Field */}
             {formData.prepaid_tax && (
-              <div className="row mb-3">
-                <div className="col-md-6">
+              <div className="row ">
+                <div className="col-md-3">
                   <div className="form-group">
-                  
                     <input
                       type="text"
                       className="form-control-borderless"
@@ -793,30 +826,47 @@ function AddInvoice() {
                       onInput={(e) => {
                         // Allow only numbers and one decimal point with two digits after it
                         e.target.value = e.target.value
-                          .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
-                          .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Ensure only two decimal places
+                          .replace(/[^0-9.]/g, "") // Remove non-numeric characters except the decimal point
+                          .replace(/^(\d*\.?\d{0,2}).*/g, "$1") // Ensure only two decimal places
                           .slice(0, 12); // Limit input length
                       }}
+                      style={{ marginLeft: "60px" }}
                     />
-
                   </div>
-
                 </div>
-
               </div>
             )}
             <div className="">
               {/* Action Buttons */}
-              <div className="d-flex justify-content-end">
+              <div
+                className="d-flex justify-content-end"
+                style={{ gap: "15px" }}
+              >
                 <button
                   type="button"
                   className="btn btn-contained me-2"
                   onClick={handleCancel}
-                  style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
+                  style={{
+                    border: " 1px solid #282e26",
+                    borderRadius: "20px",
+                    borderRadius: "40px",
+                    width: "181px",
+                    height: "45px",
+                  }}
                 >
                   Cancel
                 </button>
-                <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
+                <button
+                  type="submit"
+                  className="btn"
+                  style={{
+                    color: "white",
+                    backgroundColor: "#282e26",
+                    borderRadius: "40px",
+                    width: "181px",
+                    height: "45px",
+                  }}
+                >
                   Save
                 </button>
               </div>
@@ -841,9 +891,8 @@ function AddInvoice() {
           onVendorAdded={handleVendorAdded}
         />
       </div>
-
     </div>
   );
 }
 
-export default AddInvoice;
\ No newline at end of file
+export default AddInvoice;
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js b/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
index 14e4e3d..2a434e0 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
@@ -148,31 +148,33 @@ function AtmDeposit() {
     <div className="dashboard-container">
       <ToastContainer />
       <div className="d-flex justify-content-between mb-4">
-        <div className="button-groups">
+      <div className="button-groups">
           <button
             className={`btn ${activeButton === '/' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/')}
           >
-            Add Invoice
+         Add Bill/Invoice
           </button>
           <button
             className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/payInvoice')}
           >
-            Pay Invoice
-          </button>
-          <button
-            className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
-            onClick={() => handleLinkClick('/bankDeposit')}
-          >
-            Bank Deposit
+           Pay Bill/Invoice
           </button>
+         
           <button
             className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/atmDeposit')}
           >
             ATM Deposit
           </button>
+
+          <button
+            className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
+            onClick={() => handleLinkClick('/bankDeposit')}
+          >
+            Bank Deposit
+          </button>
         </div>
       </div>
       <div className="formcontainer">
@@ -187,8 +189,13 @@ function AtmDeposit() {
           <form onSubmit={handleSubmit}>
 
 
-            <div className=" col-md-12 row mb-3">
-              <div className="col-md-4 mb-3">
+            <div className=" col-md-12 row mb-3"
+            style={{
+              gap: "6%",
+              paddingLeft: "5%", // Add equal padding
+              // paddingRight: "%",
+          }}>
+              <div className="col-md-3 mb-2">
                 <input
                   type="date"
                   className="form-control-borderless"
@@ -200,13 +207,13 @@ function AtmDeposit() {
               </div>
               <div className="col-md-3 mb-3">
                 <select
-                  className="form-select custom-select"
+                  className="input-select"
                   id="bank_deposite_type"
                   name="bank_deposite_type"
                   value={formData.bank_deposite_type}
                   onChange={handleChange}
                 >
-                  <option value="">Select a type</option>
+                  <option value="">Select Cash type</option>
                   {["Business cash", "Lottery cash", "Gas cash"].map((type) => (
                     <option key={type} value={type}>
                       {type}
@@ -214,14 +221,14 @@ function AtmDeposit() {
                   ))}
                 </select>
               </div>
-              <div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
+              <div className="col-md-3 mb-4">
                 <div className="input-group" style={{ width: "100%" }}>
                   {/* <span className="input-group-text" style={{ border: "none" }}>
                     USD
                   </span> */}
                   <input
                     type="number"
-                    style={{ flex: 1, borderBottom: " 2px solid #e4e5e7" }}
+                    style={{ flex: 1, }}
                     className="form-control-borderless"
                     name="cash_amount"
                     placeholder="Amount"
@@ -237,7 +244,7 @@ function AtmDeposit() {
                 </div>
               </div>
 
-              <div className="mb-3 col-md-4">
+              {/* <div className="mb-3 col-md-4">
                 <input
                   type="text"
                   className="form-control-borderless"
@@ -246,7 +253,7 @@ function AtmDeposit() {
                   onChange={handleChange}
                   placeholder="Notes"
                 />
-              </div>
+              </div> */}
             </div>
 
             <div className="col-md-3 row">
@@ -273,16 +280,16 @@ function AtmDeposit() {
             <div className="">
 
 
-              <div className="d-flex justify-content-end">
+              <div className="d-flex justify-content-end"  style={{ gap: "15px" }}>
                 <button
                   type="button"
                   className="btn btn-contained me-2"
                   onClick={() => navigate("/")}
-                  style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
+                  style={{ border: " 1px solid #282e26", borderRadius: '20px' , borderRadius: '40px' , width: "181px", height:"45px" }}
                 >
                   Cancel
                 </button>
-                <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
+                <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px' , width: "181px", height:"45px" }}>
                   Save
                 </button>
               </div>
@@ -295,6 +302,7 @@ function AtmDeposit() {
         style={{
           backgroundColor: "white",
           boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
+        
         }}
       >
         <ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
index 7d5face..b1423fb 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
@@ -161,26 +161,28 @@ function BankDeposit() {
                         className={`btn ${activeButton === '/' ? 'active' : ''}`}
                         onClick={() => handleLinkClick('/')}
                     >
-                        Add Invoice
+                       Add Bill/Invoice
                     </button>
                     <button
                         className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
                         onClick={() => handleLinkClick('/payInvoice')}
                     >
-                        Pay Invoice
-                    </button>
-                    <button
-                        className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
-                        onClick={() => handleLinkClick('/bankDeposit')}
-                    >
-                        Bank Deposit
+                      Pay Bill/Invoice
                     </button>
+
                     <button
                         className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
                         onClick={() => handleLinkClick('/atmDeposit')}
                     >
                         ATM Deposit
                     </button>
+
+                    <button
+                        className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
+                        onClick={() => handleLinkClick('/bankDeposit')}
+                    >
+                        Bank Deposit
+                    </button>
                 </div>
             </div>
             <div className="formcontainer">
@@ -189,7 +191,9 @@ function BankDeposit() {
                     style={{
                         backgroundColor: "white",
                         boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
-                        borderRadius: "40px"
+                        borderRadius: "40px",
+
+
                     }}
                 >
                     <form onSubmit={handleSubmit}>
@@ -197,8 +201,11 @@ function BankDeposit() {
 
 
 
-                        <div className="col-md-12 row ">
-                            <div className=" col-md-4">
+                        <div className="col-md-12 row " style={{
+                            gap: "4%",
+                           marginLeft:"3px"
+                        }}>
+                            <div className=" col-md-3">
                                 <input
                                     type="date"
                                     className="form-control-borderless"
@@ -208,6 +215,30 @@ function BankDeposit() {
                                     required
                                 />
                             </div>
+
+
+                            <div className="mb-3 col-md-4">
+                                <select
+                                    className="input-select"
+                                    id="bank_deposite_type"
+                                    name="bank_deposite_type"
+                                    value={formData.bank_deposite_type}
+                                    onChange={handleChange}
+                                    style={{     borderBottom: "1px solid #e4e5e7" }}
+                                >
+                                    <option value="" enable>
+                                        Select Cash type
+                                    </option>
+                                    {["Business cash", "Lottery cash", "Gas cash"].map((type) => (
+                                        <option key={type} value={type}>
+                                            {type}
+                                        </option>
+                                    ))}
+                                </select>
+                            </div>
+
+
+
                             <div className="mb-3 col-md-4">
                                 <select
                                     className="form-control-borderless"
@@ -224,51 +255,33 @@ function BankDeposit() {
                                     ))}
                                 </select>
                             </div>
-                            <div className="mb-3 col-md-3">
-                                <select
-                                    className="form-select custom-select"
-                                    id="bank_deposite_type"
-                                    name="bank_deposite_type"
-                                    value={formData.bank_deposite_type}
-                                    onChange={handleChange}
-                                >
-                                    <option value="" enable>
-                                        Select a type
-                                    </option>
-                                    {["Business cash", "Lottery cash", "Gas cash"].map((type) => (
-                                        <option key={type} value={type}>
-                                            {type}
-                                        </option>
-                                    ))}
-                                </select>
-                            </div>
 
 
                             <div
-                                className="col-md-12 mb-12"
+                                className="col-md-12"
                                 style={{
                                     display: "flex",
                                     alignItems: "center",
                                     justifyContent: "space-between", // Adjust spacing between items
                                     gap: "50px", // Add gap for consistent spacing
-                                    // marginBottom:"30px",
+                                  
                                 }}
                             >
                                 <div
-                                    className="form-group "
+                                    className="form-group col-3"
                                     style={{
                                         display: "flex",
                                         alignItems: "center",
-                                        borderBottom: "2px solid #e4e5e7",
-                                        height: "50px",
+                                    
+                                   
                                         flex: "1", // Allow the field to adjust in size
                                     }}
                                 >
                                     <div className="input-group">
                                         <input
                                             type="text"
-                                            style={{ border: "none", width: "100%" }}
-                                            className="form-control-borderless"
+                                            style={{     borderBottom: "1px solid #e4e5e7", width: "100%" }}
+                                            className="form-control"
                                             name="cash_amount"
                                             placeholder="Cash Amount"
                                             value={formData.cash_amount || ""}
@@ -282,16 +295,16 @@ function BankDeposit() {
                                     className="form-group  "
                                     style={{
                                         display: "flex",
-                                        alignItems: "center",
-                                        borderBottom: "2px solid #e4e5e7",
-                                        height: "50px",
+                                 
+                            
+                                      
                                         flex: "1",
                                     }}
                                 >
                                     <div className="input-group">
                                         <input
                                             type="number"
-                                            style={{ border: "none", width: "100%" }}
+                                            style={{     borderBottom: "1px solid #e4e5e7", width: "100%" , marginRight:"5px"  }}
                                             className="form-control-borderless"
                                             name="cheque_amount"
                                             placeholder="Cheque Amount"
@@ -306,12 +319,12 @@ function BankDeposit() {
                                     style={{
                                         display: "flex",
                                         alignItems: "center",
-                                        borderBottom: "2px solid #e4e5e7",
+                                      border:"none",
                                         height: "50px",
                                         flex: "1",
                                     }}
                                 >
-                                    <input
+                                    {/* <input
                                         type="text"
                                         className="form-control-borderless"
                                         name="note"
@@ -322,22 +335,22 @@ function BankDeposit() {
                                             border: "none",
                                             width: "100%",
                                         }}
-                                    />
+                                    /> */}
                                 </div>
                             </div>
                         </div>
 
 
-                        <div className="d-flex justify-content-end">
+                        <div className="d-flex justify-content-end" style={{ gap: "15px" }}>
                             <button
                                 type="button"
                                 className="btn btn-contained me-2"
                                 onClick={() => navigate("/")}
-                                style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
+                                style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
                             >
                                 Cancel
                             </button>
-                            <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
+                            <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
                                 Save
                             </button>
                         </div>
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
index a13585a..26a91d2 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
@@ -309,92 +309,124 @@ const BankDepositTable = (props) => {
 
   return (
     <div>
-      <div
-      style={{
-        display: "flex",
-        gap: "16px",
-        justifyContent: "center",
-        alignItems: "center",
-        margin: "20px",
-      }}
-    >
-      {/* Invoice due this month */}
-      <div
-        style={{
-          backgroundColor: "#fff8e6",
-          border: "1px solid #ffd700",
-          borderRadius: "8px",
-          padding: "16px 24px",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "flex-start",
-          width: "400px",
-          textAlign: "left",
-        }}
-      >
-        <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
-          $500
-        </p>
-        <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
-          Invoice due this month
-        </p>
-      </div>
+    
 
-      {/* Last 7 days sale */}
-      <div
+<div
         style={{
-          backgroundColor: "#e6ffee",
-          border: "1px solid #00b300",
-          borderRadius: "8px",
-          padding: "16px 24px",
           display: "flex",
-          flexDirection: "column",
+          gap: "50px",
           justifyContent: "center",
-          alignItems: "flex-start",
-          width: "400px",
-          textAlign: "left",
+          alignItems: "center",
+          marginBottom:"20px"
         }}
       >
-        <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
-          $19,864,63,521
-        </p>
-        <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
-          Last 7 days sale
-        </p>
-      </div>
+        {/* Invoice due this month */}
+        <div
+          style={{
+            backgroundColor: "#fff8e6",
+            border: "1px solid #ffd700",
+            borderRadius: "20px",
+            padding: "16px 24px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "flex-start",
+            width: "385px",
+            height: "130px",
+            textAlign: "left",
+          }}
+        >
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: "48px",
+              lineHeight: "27px",
+                   marginTop:"20px"
+            }}
+          >
+            $500
+          </p>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
+            Invoice due this month
+          </p>
+        </div>
 
-      {/* Expense this month */}
-      <div
-        style={{
-          backgroundColor: "#ffe6e6",
-          border: "1px solid #ff4d4d",
-          borderRadius: "8px",
-          padding: "16px 24px",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "flex-start",
-          width: "400px",
-          textAlign: "left",
-        }}
-      >
-        <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
-          $0.00
-        </p>
-        <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
-          Expense this month
-        </p>
-      </div>
+        {/* Last 7 days sale */}
+        <div
+          style={{
+            backgroundColor: "#e6ffee",
+            border: "1px solid #00b300",
+            borderRadius: "20px",
+            padding: "16px 24px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "flex-start",
+            width: "385px",
+            height: "130px",
+            textAlign: "left",
+          }}
+        >
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: "48px",
+              lineHeight: "27px",
+                   marginTop:"20px"
+            }}
+          >
+            $19,521
+          </p>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
+            Last 7 days sale
+          </p>
+        </div>
+
+        {/* Expense this month */}
+        <div
+          style={{
+            backgroundColor: "#ffe6e6",
+            border: "1px solid #ff4d4d",
+            borderRadius: "20px",
+            padding: "16px 24px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "flex-start",
+            width: "385px",
+            height: "130px",
+            textAlign: "left",
+          }}
+        >
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: " 48px",
+              lineHeight: "27px",
+                   marginTop:"20px"
+            }}
+          >
+            $0.00
+          </p>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
+            Expense this month
+          </p>
+        </div>
       </div>
 
       
-      <div className="d-flex  align-items-center mb-3">
+      <div className="d-flex  align-items-center mb-3"  style={{ gap: "10px" }}>
         {/* Search Bar */}
-        <div className="searchcontainer">
+        <div className="searchcontainer" >
           <div
             className="input-group"
-            style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
+            style={{width:"300px" , height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
           >
             <span
               className="input-group-text"
@@ -489,9 +521,10 @@ const BankDepositTable = (props) => {
           <div
             className="filterbutton"
             style={{
-              marginLeft: "10px",
-              backgroundColor: "#f4f4f4",
-              width: "130px",
+             
+              
+              width: "40px",
+              height: "40px",
               borderRadius: "60px",
               padding: "15px",
               display: "flex",
@@ -509,6 +542,7 @@ const BankDepositTable = (props) => {
               style={{
                 fontSize: "14px",
                 display: "flex",
+                marginLeft:'6px',
                 alignItems: "center",
                 justifyContent: "center",
                 padding: "0",
@@ -554,7 +588,7 @@ const BankDepositTable = (props) => {
                   strokeLinejoin="round"
                 />
               </svg>
-              &nbsp; Filter
+              &nbsp; 
             </button>
 
             <ul
@@ -666,18 +700,23 @@ const BankDepositTable = (props) => {
       {/* Table of Invoices */}
       <table className="table table-borderless table-responsive">
         <thead>
-          <tr>
+          <tr  style={{
+            backgroundColor: '#282e26',
+            color: '#ffffff',
+            height: '30px', // Add height for row spacing
+            textAlign:"center"
+          }}>
             {["date", "bank_name", "bank_deposite_type", "amount", "Transaction Type","actions"].map(
               (header, index) => (
                 <th
                   key={header}
                   onClick={() => handleSort(header)}
                   style={{
-                    paddingLeft: index === 0 ? "30px" : "0",
+                    paddingLeft: "50px",
                     cursor: "pointer",
                      backgroundColor:'#282e26',
                       color:'#ffffff',
-                    textAlign: "start",
+                      textAlign: "left",
                     alignContent: "center",
                   }}
                 >
@@ -719,13 +758,13 @@ const BankDepositTable = (props) => {
           {currentInvoices.length !== 0 ?
             currentInvoices.map((invoice) => (
               <tr key={invoice.id}>
-                <td style={{ cursor: "pointer", textAlign: "left" }}>
+                <td style={{ cursor: "pointer", textAlign: "center" }}>
                   {invoice.date}
                 </td>
-                <td style={{ cursor: "pointer", textAlign: "left" }}>
+                <td style={{ cursor: "pointer", textAlign: "center" }}>
                   {invoice.bank_name}
                 </td>
-                <td style={{ cursor: "pointer", textAlign: "left" }}>
+                <td style={{ cursor: "pointer", textAlign: "center" }}>
                   <span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
                     {invoice.bank_deposite_type
                       ? invoice.bank_deposite_type.charAt(0).toUpperCase() +
@@ -733,8 +772,8 @@ const BankDepositTable = (props) => {
                     : "N/A"}
                 </span>
               </td>
-              <td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
-              <td style={{ textAlign: 'left' }}>
+              <td style={{ textAlign: "center" }}>{invoice.total_amount}</td>
+              <td style={{ textAlign: 'center' }}>
                 <span style={getStatusStyle(invoice.transaction_type)}>
                     {invoice.transaction_type ?
                         invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css b/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
index f413ba7..6a3ce90 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
@@ -2,6 +2,7 @@
     justify-content: center;
     align-items: center;
     padding: 20px;
+    
 }
 
 .container {
@@ -9,6 +10,20 @@
     border-radius: 40px;
 }
 
+.invoice-table-container {
+    max-width: 1320px;
+    width: 100%;
+
+    border-radius: 40px;
+    height: 735px;
+    display: flex;
+    justify-content: center; /* Horizontal centering */
+    align-items: center;    /* Vertical centering */
+    margin: 0 auto;         /* Ensures centering in case of block layout */
+}
+
+
+
 .dropdown-toggle::after {
     display: none; /* This will remove the default dropdown arrow */
 }
@@ -18,24 +33,27 @@
 }
 .button-groups {
     display: flex;
-    margin-left: 35%;
+    justify-content: space-between; /* Space between buttons */
+    align-items: center; /* Center align buttons vertically */
+    margin: 0 auto; /* Center the entire button group */
     gap: 10px; /* Adjust the spacing between buttons */
-    background-color: #ffffff;
-    width: auto;
+    width: auto; /* Fixed width */
+    height: 60px; /* Fixed height */
+    background: #FFFFFF;
+    border: 1px solid #EBEAF2;
+    box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
     border-radius: 44px;
-    padding: 10px 50px;
-    
+    padding: 0 8px; /* Equal padding on left and right sides */
+}
 
-  }
-  
-
-  /* Active button styles */
-  .btn.active {
+/* Active button styles */
+.btn.active {
     background-color: #ffaf32; /* Yellow background */
-    border-radius: 20px;
+    border-radius: 27px;
     color: black; /* Black text */
-  }
-  
+    padding: 10px 20px; /* Ensure padding consistency for buttons */
+}
+
   
 .form-container {
     width: 1328px;
@@ -56,11 +74,11 @@
 .form-control-borderless {
     display: block;
     width: 100%;
-    padding: .375rem .75rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: #212529;
+   
+    font-size: 16px;
+    font-weight: bold;
+
+    color: #999999;
     background-color: #fff;
     background-clip: padding-box;
     border: none;
@@ -101,19 +119,26 @@
 
 .table th {
     justify-content: center;
-    height: 60px;
+    height: 40px;
+    align-items: center;
+    /* margin-right: 50px; */
     background-color: #ffffff;
     font-weight: bold;
 }
 
 .table td {
     border-bottom: 1px solid #EBEAF2;
-    text-align: left;
+    text-align: center;
+ 
     vertical-align: middle;
+    justify-content: center;
+  
+
 }
 
 .table tbody tr:hover {
     background-color: #f1f1f1;
+
 }
 
 .badge {
@@ -129,8 +154,11 @@
     padding: 10px;
     border-bottom: 2px solid #EBEAF2;
     background-color: #ffffff;
+    border-left: 2px solid #ebeaf2;
+    border-Right: 2px solid #ebeaf2;
     justify-content: center;
     align-items: center;
+    gap: 10px;
 }
 
 .pgbtn {
@@ -139,7 +167,7 @@
     border: #ced4da;
     width: 30px;
     height: 30px;
-    border-radius: 30px;
+    border-radius: 50%;
 }
 
 .active-pgbtn {
@@ -147,11 +175,17 @@
     border: 1px solid #00230007;
     width: 30px;
     height: 30px;
-    border-radius: 30px;
+    border-radius: 50%;
 }
 
 .filterbutton {
-    background-color: #f4f4f4;
+    background: #FFFFFF;
+
+    border: 1px solid #DBDBDB;
+    box-shadow: 0px 0px 10px rgba(187, 187, 187, 0.25);
+    gap:'20px'
+    
+
 }
 
 .dropdown-item {
@@ -324,3 +358,22 @@ input[type="color"]:focus,
     box-shadow: none; /* Remove any shadow */
   }
   
+/* for selct dropdown style --> dashboard // */ 
+
+
+
+.input-select{
+    border: none;
+  border-bottom: 1px solid #ccc;
+  background-color: transparent;
+  color: #999999;
+  width: 100%;
+  outline: none;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 35px;
+}
+
+
+
+  
\ No newline at end of file
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js b/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
index 1bee36d..179d24e 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
@@ -284,86 +284,118 @@ const InvoiceTable = ({ reloadData }) => {
 
   return (
     <div>
-      <div
-      style={{
-        display: "flex",
-        gap: "16px",
-        justifyContent: "center",
-        alignItems: "center",
-        margin: "20px",
-      }}
-    >
-      {/* Invoice due this month */}
-      <div
+     <div>
+
+<div
         style={{
-          backgroundColor: "#fff8e6",
-          border: "1px solid #ffd700",
-          borderRadius: "8px",
-          padding: "16px 24px",
           display: "flex",
-          flexDirection: "column",
+          gap: "50px",
           justifyContent: "center",
-          alignItems: "flex-start",
-          width: "400px",
-          textAlign: "left",
+          alignItems: "center",
+               marginBottom:"20px"
         }}
       >
-        <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
-          $500
-        </p>
-        <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
-          Invoice due this month
-        </p>
+        {/* Invoice due this month */}
+        <div
+          style={{
+            backgroundColor: "#fff8e6",
+            border: "1px solid #ffd700",
+            borderRadius: "20px",
+            padding: "16px 24px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "flex-start",
+            width: "385px",
+            height: "130px",
+            textAlign: "left",
+          }}
+        >
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: "48px",
+              lineHeight: "27px",
+                   marginTop:"20px"
+            }}
+          >
+            $500
+          </p>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
+            Invoice due this month
+          </p>
+        </div>
+
+        {/* Last 7 days sale */}
+        <div
+          style={{
+            backgroundColor: "#e6ffee",
+            border: "1px solid #00b300",
+            borderRadius: "20px",
+            padding: "16px 24px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "flex-start",
+            width: "385px",
+            height: "130px",
+            textAlign: "left",
+          }}
+        >
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: "48px",
+              lineHeight: "27px",
+                   marginTop:"20px"
+            }}
+          >
+            $19,864
+          </p>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
+            Last 7 days sale
+          </p>
+        </div>
+
+        {/* Expense this month */}
+        <div
+          style={{
+            backgroundColor: "#ffe6e6",
+            border: "1px solid #ff4d4d",
+            borderRadius: "20px",
+            padding: "16px 24px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "flex-start",
+            width: "385px",
+            height: "130px",
+            textAlign: "left",
+          }}
+        >
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: " 48px",
+              lineHeight: "27px",
+                   marginTop:"20px"
+            }}
+          >
+            $0.00
+          </p>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
+            Expense this month
+          </p>
+        </div>
       </div>
 
-      {/* Last 7 days sale */}
-      <div
-        style={{
-          backgroundColor: "#e6ffee",
-          border: "1px solid #00b300",
-          borderRadius: "8px",
-          padding: "16px 24px",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "flex-start",
-          width: "400px",
-          textAlign: "left",
-        }}
-      >
-        <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
-          $19,864,63,521
-        </p>
-        <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
-          Last 7 days sale
-        </p>
-      </div>
 
-      {/* Expense this month */}
-      <div
-        style={{
-          backgroundColor: "#ffe6e6",
-          border: "1px solid #ff4d4d",
-          borderRadius: "8px",
-          padding: "16px 24px",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "flex-start",
-          width: "400px",
-          textAlign: "left",
-        }}
-      >
-        <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
-          $0.00
-        </p>
-        <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
-          Expense this month
-        </p>
-      </div>
-    </div>
-
-    <div>
       
     </div>
       <div className="d-flex align-items-center mb-3"style={{gap:"10px"}}>
@@ -373,7 +405,7 @@ const InvoiceTable = ({ reloadData }) => {
           
           <div
             className="input-group flexiblesearch"
-            style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
+            style={{ height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
           >
             <span
               className="input-group-text"
@@ -475,10 +507,8 @@ const InvoiceTable = ({ reloadData }) => {
           <div
             className="filterbutton"
             style={{
-              marginLeft: "10px",
-              backgroundColor: "#f4f4f4",
-              width: "130px",
-              height: "50px",
+              width: "40px",
+              height: "40px",
               borderRadius: "60px",
               padding: "15px",
               display: "flex",
@@ -495,6 +525,7 @@ const InvoiceTable = ({ reloadData }) => {
               aria-expanded="false"
               style={{
                 fontSize: "14px",
+                marginLeft:'6px',
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -505,7 +536,7 @@ const InvoiceTable = ({ reloadData }) => {
               }}
             >
               <FilterButton />
-              &nbsp; Filter
+              &nbsp; 
             </button>
 
             <ul
@@ -620,11 +651,13 @@ const InvoiceTable = ({ reloadData }) => {
       </div>
 
       {/* Table of Invoices */}
-      <div className="">
-        <div className="">
+      {/* <div className="">
+        <div className=""> */}
           <table className="table table-borderless table-responsive">
             <thead>
-              <tr>
+              <tr
+             
+               >
                 {[
                   "date",
                   "vendor Name",
@@ -641,7 +674,7 @@ const InvoiceTable = ({ reloadData }) => {
                       paddingLeft: index === 0 ? "30px" : "0",
                       cursor: "pointer",
                      
-                      textAlign: "start",
+                      textAlign: "center",
                       alignContent: "center",
                       backgroundColor:'#282e26',
                       color:'#ffffff'
@@ -676,18 +709,24 @@ const InvoiceTable = ({ reloadData }) => {
                           .join(" ")}
                       </span>
                     </td>
-                    <td>
-                      <span style={getStatusStyle(invoice.status)}>
-                        {invoice.status
-                          .replace(/_/g, " ")
-                          .split(" ")
-                          .map(
-                            (word) =>
-                              word.charAt(0).toUpperCase() + word.slice(1)
-                          )
-                          .join(" ")}
-                      </span>
-                    </td>
+                    <td
+ style={{
+ 
+
+}}
+
+>
+  <span style={getStatusStyle(invoice.status)}>
+    {invoice.status
+      .replace(/_/g, " ")
+      .split(" ")
+      .map(
+        (word) => word.charAt(0).toUpperCase() + word.slice(1)
+      )
+      .join(" ")}
+  </span>
+</td>
+
                     <td>
                       <div className="dropdown">
                         <button
@@ -740,12 +779,13 @@ const InvoiceTable = ({ reloadData }) => {
               )}
             </tbody>
           </table>
+          {renderPagination()}
         </div>
-      </div>
+      // </div>
 
 
-      {renderPagination()}
-    </div>
+    
+    // </div>
   );
 };
 
@@ -769,44 +809,75 @@ const getPaymentMethodStyle = (method) => ({
 });
 
 const statusStyles = {
-  All: {
-    backgroundColor: "#4545DB",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
-  },
-  paid: {
-    backgroundColor: "#198f51",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
+  draft: {
+    backgroundColor: "#D1D1EF",
+    color: "#fff",
+    borderRadius: "5px",
+    padding: "5px 10px",
+    width: "130px", // Fixed width
+    height: "30px", // Fixed height
+    fontSize: "14px",
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
   },
   unpaid: {
     backgroundColor: "#ff2024",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
+    color: "#fff",
+    borderRadius: "5px",
+    padding: "5px 10px",
+    width: "130px", // Fixed width
+    height: "30px", // Fixed height
+    fontSize: "14px",
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  paid: {
+    backgroundColor: "#198f51",
+    color: "#fff",
+    borderRadius: "5px",
+    padding: "5px 10px",
+    width: "130px", // Fixed width
+    height: "30px", // Fixed height
+    fontSize: "14px",
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
   },
   partially_paid: {
     backgroundColor: "#0c8ce9",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
+    color: "#fff",
+    borderRadius: "5px",
+    padding: "5px 10px",
+    width: "130px", // Fixed width
+    height: "30px", // Fixed height
+    fontSize: "14px",
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
   },
 };
 
 const getStatusStyle = (status) => ({
-  ...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
+  ...(statusStyles[status] || { backgroundColor: "#198f51" }),
+  width: "130px", // Ensure consistent fixed width
+  height: "30px", // Ensure consistent fixed height
   borderRadius: "5px",
-  padding: "5px 20px",
+  padding: "5px 10px",
   textAlign: "center",
-  display: "flex", // Use flexbox for alignment
+  display: "flex", // Flexbox for alignment
   justifyContent: "center", // Center horizontally
   alignItems: "center", // Center vertically
   color: "#fff",
 });
 
 
+
 const getCountClass = (status) => ({
   ...statusStyles[status],
   padding: "10px",
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js
index 8ee63ad..d6da6fd 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js
@@ -48,7 +48,7 @@ function PayInvoice() {
     date: "",
     status: "paid",
     pay_method_status: "pay_now",
-    pay_method: "",
+    pay_method: "cash",
     amount: "",
     remaining_amount: "", // Initialize as empty string or 0
     discount: 0,
@@ -306,26 +306,28 @@ function PayInvoice() {
             className={`btn ${activeButton === '/' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/')}
           >
-            Add Invoice
+            Add Bill/Invoice
           </button>
           <button
             className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/payInvoice')}
           >
-            Pay Invoice
-          </button>
-          <button
-            className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
-            onClick={() => handleLinkClick('/bankDeposit')}
-          >
-            Bank Deposit
+            Pay Bill/Invoice
           </button>
+
           <button
             className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/atmDeposit')}
           >
             ATM Deposit
           </button>
+
+          <button
+            className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
+            onClick={() => handleLinkClick('/bankDeposit')}
+          >
+            Bank Deposit
+          </button>
         </div>
       </div>
       <div className="formcontainer">
@@ -342,8 +344,16 @@ function PayInvoice() {
 
 
             </div>
-            <div className="col-md-12 row" style={{ gap: "15%" }}>
-              <div className="mb-3 col-md-2" >
+            <div
+              className="col-md-12 row"
+              style={{
+                gap: "12%",
+                paddingLeft: "3%", // Add equal padding
+              
+                // paddingRight: "%",
+              }}
+            >
+              <div className="mb-3 col-md-3">
                 <input
                   type="date"
                   className="form-control-borderless"
@@ -355,16 +365,16 @@ function PayInvoice() {
 
               <div className="mb-3 col-md-3">
                 <select
-                  className="form-control-borderless"
+                  className="input-select"
                   name="vendor_department"
                   value={formData.vendor_department}
                   onChange={(e) => {
                     const selectedValue = e.target.value;
                     if (selectedValue === "add-vendor") {
-                      handleShow(); // Modal ko open karne ke liye function
+                      handleShow(); // Function to open modal
                       setFormData((prevData) => ({
                         ...prevData,
-                        vendor_department: "", // Field ko reset karne ke liye
+                        vendor_department: "", // Reset the field
                       }));
                     } else {
                       handleChange(e); // Existing handler for normal options
@@ -373,6 +383,7 @@ function PayInvoice() {
                 >
                   <option value="">Select Vendor</option>
                   <option value="add-vendor">Add Vendor</option>{" "}
+                
                   {/* Add Vendor Option */}
                   {vendors
                     .filter((vendor) => !vendor.is_deleted) // Exclude deleted vendors
@@ -393,25 +404,11 @@ function PayInvoice() {
                   placeholder="Invoice No"
                   onChange={handleChange}
                 />
-                {/* <select
-                  className="form-control-borderless"
-                  onChange={(e) =>
-                    handleInvoiceSelect(
-                      filteredInvoices.find((inv) => inv.id === e.target.value)
-                    )
-                  }
-                >
-                  <option value="">Select Invoice</option>
-                  {filteredInvoices.map((invoice) => (
-                    <option key={invoice.id} value={invoice.id}>
-                      {invoice.invoice_no}
-                    </option>
-                  ))}
-                </select> */}
               </div>
             </div>
-            <div className="mb-3 col-md-12 row mt-3" style={{gap:"70px"}} >
-              <div className="col-md-3">
+
+            <div className="mb-3 col-md-12 row mt-3" style={{ gap: "56px", marginLeft: "2%" }} >
+              <div className="col-md-3 " >
                 <input
                   name="amount"
                   type="text"
@@ -422,7 +419,7 @@ function PayInvoice() {
                   style={{ backgroundColor: "#fafafa" }}
                 />
               </div>
-              <div className="col-md-2">
+              <div className="col-md-2" >
                 <input
 
                   type="text"
@@ -481,8 +478,8 @@ function PayInvoice() {
 
 
 
-            
-                {/* <div className="col-md-3 mt-4">
+
+              {/* <div className="col-md-3 mt-4">
                 <input
                   name="after_discount"
                   type="text"
@@ -495,48 +492,50 @@ function PayInvoice() {
               </div> */}
 
 
-              </div>
-
-              <div className="md-col-12 ">
-                <div
-                  className="d-flex align-items-center"
-                  style={{
-                    border: '2px solid #ACB4AA',
-                    padding: '2px 20px', // Same left and right padding
-                    width: 'fit-content',
-                    borderRadius: '40px',
-                  }}
-                >
-                  {['cash', 'cheque', 'bank'].map((method) => (
-                    <div className="" key={method}>
-                      <input
-                        type="radio"
-                        className="form-check-input"
-                        name="pay_method"
-                        value={method}
-                        checked={formData.pay_method === method}
-                        onChange={handleChange}
-                        id={`pay_method_${method}`} // Unique ID for each radio input
-                        style={{ display: 'none' }} // Hide the actual radio button
-                      />
-                      <label
-                        className="form-check-label cursor-pointer"
-                        htmlFor={`pay_method_${method}`} // Link label to the input
-                        onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
-                        style={{
-                          color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
-                          backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
-                          padding: '5px 25px', // Add padding for better appearance
-                          borderRadius: '20px', // Optional: Round the corners of the label
-                        }}
-                      >
-                        {method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
-                      </label>
-                    </div>
-                  ))}
-                </div>
             </div>
-            <div className="col-md-12 mt-3" >
+
+            <div className="md-col-12 " style={{ marginLeft: "3%", marginTop: "35px" }}>
+              <div
+                className="d-flex align-items-center"
+                style={{
+                  border: '1px solid #ACB4AA',
+                  padding: '5px',
+                  width: "fit-content",
+                  borderRadius: '40px',
+
+                }}
+              >
+                {['cash', 'Bank Card/ACH/EFT', 'cheque',].map((method) => (
+                  <div className="" key={method}>
+                    <input
+                      type="radio"
+                      className="form-check-input"
+                      name="pay_method"
+                      value={method}
+                      checked={formData.pay_method === method}
+                      onChange={handleChange}
+                      id={`pay_method_${method}`} // Unique ID for each radio input
+                      style={{ display: 'none' }} // Hide the actual radio button
+                    />
+                    <label
+                      className="form-check-label cursor-pointer"
+                      htmlFor={`pay_method_${method}`} // Link label to the input
+                      onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
+                      style={{
+                        color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
+                        backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
+                        padding: '5px 25px', // Add padding for better appearance
+                        borderRadius: '20px', // Optional: Round the corners of the label
+
+                      }}
+                    >
+                      {method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="col-md-12 mt-4" style={{ marginLeft: "40px" }} >
 
               {formData.pay_method === "cheque" && (
                 <div className="row "> {/* Use row class for Bootstrap grid */}
@@ -571,16 +570,7 @@ function PayInvoice() {
                 </div>
               )}
 
-
-
-
-
-
-
-
-
-
-              {formData.pay_method === "bank" && (
+              {formData.pay_method === "Bank Card/ACH/EFT" && (
                 <div className="mb-3">
                   <div className="col-md-12 row">
                     <div className="mb-3 col-md-6">
@@ -625,16 +615,16 @@ function PayInvoice() {
                 </div>
               )}
             </div>
-            <div className="d-flex justify-content-end">
+            <div className="d-flex justify-content-end" style={{ gap: "15px" }}>
               <button
                 type="button"
                 className="btn btn-contained me-2"
                 onClick={handleCancel}
-                style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
+                style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
               >
                 Cancel
               </button>
-              <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
+              <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
                 Save
               </button>
             </div>
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js
index 21cd7d2..272585a 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js
@@ -312,13 +312,15 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
   return (
     <div>
       <ToastContainer />
-      <div
+    
+
+        <div
         style={{
           display: "flex",
-          gap: "16px",
+          gap: "50px",
           justifyContent: "center",
           alignItems: "center",
-          margin: "20px",
+         marginBottom:"20px"
         }}
       >
         {/* Invoice due this month */}
@@ -326,20 +328,30 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
           style={{
             backgroundColor: "#fff8e6",
             border: "1px solid #ffd700",
-            borderRadius: "8px",
-            padding: "16px 24px",
+            borderRadius: "20px",
+            padding: "24px",
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "flex-start",
-            width: "400px",
+            width: "385px",
+            height: "130px",
             textAlign: "left",
           }}
         >
-          <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: "48px",
+              lineHeight: "27px",
+          marginTop:"20px"
+            }}
+          >
             $500
           </p>
-          <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
             Invoice due this month
           </p>
         </div>
@@ -349,20 +361,30 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
           style={{
             backgroundColor: "#e6ffee",
             border: "1px solid #00b300",
-            borderRadius: "8px",
+            borderRadius: "20px",
             padding: "16px 24px",
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "flex-start",
-            width: "400px",
+            width: "385px",
+            height: "130px",
             textAlign: "left",
           }}
         >
-          <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
-            $19,864,63,521
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: "48px",
+              lineHeight: "27px",
+                  marginTop:"20px"
+            }}
+          >
+            $19,521
           </p>
-          <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
             Last 7 days sale
           </p>
         </div>
@@ -372,33 +394,42 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
           style={{
             backgroundColor: "#ffe6e6",
             border: "1px solid #ff4d4d",
-            borderRadius: "8px",
+            borderRadius: "20px",
             padding: "16px 24px",
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "flex-start",
-            width: "400px",
+            width: "390px",
+            height: "130px",
             textAlign: "left",
           }}
         >
-          <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
+          <p
+            style={{
+              fontFamily: "Comfortaa",
+              fontStyle: "normal",
+              fontWeight: 700,
+              fontSize: " 48px",
+              lineHeight: "27px",
+                  marginTop:"20px"
+            }}
+          >
             $0.00
           </p>
-          <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
+          <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
             Expense this month
           </p>
         </div>
       </div>
 
 
-
-      <div className="d-flex align-items-center mb-3">
+      <div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
         {/* Search Bar */}
         <div className="searchcontainer" style={{ gap: "10px" }}>
           <div
             className="input-group"
-            style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
+            style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
           >
             <span
               className="input-group-text"
@@ -495,10 +526,10 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
           <div
             className="filterbutton"
             style={{
-              marginLeft: "10px",
-              backgroundColor: "#f4f4f4",
-              width: "130px",
-              height: "50px",
+              // marginLeft: "10px",
+               
+              width: "40px",
+              height: "40px",
               borderRadius: "60px",
               padding: "15px",
               display: "flex",
@@ -516,6 +547,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
               style={{
                 fontSize: "14px",
                 display: "flex",
+                marginLeft:'6px',
                 alignItems: "center",
                 justifyContent: "center",
                 padding: "0",
@@ -561,7 +593,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                   strokeLinejoin="round"
                 />
               </svg>
-              &nbsp; Filter
+              &nbsp; 
             </button>
 
             <ul
@@ -649,7 +681,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                   </div>
                 </div> */}
               </li>
-              <li className="text-center mt-2">
+              <li className="text-center mt-2" >
                 <button
                   className="btn btn-primary"
                   style={{ width: "163px", height: "40px" }}
@@ -673,13 +705,24 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
       {/* Table of Invoices */}
       <table className="table table-borderless table-responsive">
         <thead>
-          <tr>
+          <tr
+         style={{
+          backgroundColor: '#282e26',
+          color: '#ffffff',
+          height: '30px', // Add height for row spacing
+          
+         }}
+           
+  
+          
+       
+          >
             {[
               "date",
               "vendor_department_name",
               "amount",
               "remaining_amount",
-              "updated date",
+              // "updated date",
               "payment_method",
               "status",
               "actions",
@@ -692,8 +735,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                   cursor: "pointer",
                   backgroundColor: '#282e26',
                   color: '#ffffff',
-                  textAlign: "start",
+                  textAlign: "center",
                   alignContent: "center",
+                // Add a border for separation
                 }}
               >
                 {header
@@ -705,6 +749,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
 
             <div className="dropdown">
               <ul className="dropdown-menu" aria-labelledby="actionDropdown">
+                
                 {/* <li>
                   <a
                     className="dropdown-item"
@@ -752,9 +797,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                 >
                   {invoice.remaining_amount}
                 </td>
-                <td onClick={() => handleCellClick(invoice, "updated_at")}>
+                {/* <td onClick={() => handleCellClick(invoice, "updated_at")}>
                   {invoice.updated_at ? invoice.updated_at.split("T")[0] : ""}
-                </td>
+                </td> */}
                 <td onClick={() => handleCellClick(invoice, "payment_method")}>
                   <span style={getPaymentMethodStyle(invoice.pay_method)}>
                     {invoice.pay_method &&
@@ -768,7 +813,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                         .join(" ")}
                   </span>
                 </td>
-                <td onClick={() => handleCellClick(invoice, "status")}>
+                <td onClick={() => handleCellClick(invoice, "status")}
+                 
+                  >
                   <span style={getStatusStyle(invoice.status)}>
                     {invoice.status &&
                       invoice.status
@@ -866,43 +913,71 @@ const getPaymentMethodStyle = (method) => ({
 });
 
 const statusStyles = {
-  All: {
-    backgroundColor: "#4545DB",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
-  },
-  paid: {
-    backgroundColor: "#198f51",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
+  draft: {
+    backgroundColor: "#D1D1EF",
+    color: "#fff",
+    borderRadius: "5px",
+    padding: "5px 10px",
+    width: "130px", // Fixed width
+    height: "30px", // Fixed height
+    fontSize: "14px",
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
   },
   unpaid: {
     backgroundColor: "#ff2024",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
+    color: "#fff",
+    borderRadius: "5px",
+    padding: "5px 10px",
+    width: "130px", // Fixed width
+    height: "30px", // Fixed height
+    fontSize: "14px",
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  paid: {
+    backgroundColor: "#198f51",
+    color: "#fff",
+    borderRadius: "5px",
+    padding: "5px 10px",
+    width: "130px", // Fixed width
+    height: "30px", // Fixed height
+    fontSize: "14px",
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
   },
   partially_paid: {
     backgroundColor: "#0c8ce9",
-    width: "130px", // Set a fixed width
-    height: "30px", // Set a fixed height
-    fontSize:"14px"
+    color: "#fff",
+    borderRadius: "5px",
+    padding: "5px 10px",
+    width: "130px", // Fixed width
+    height: "30px", // Fixed height
+    fontSize: "14px",
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
   },
 };
 
 const getStatusStyle = (status) => ({
-  ...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
+  ...(statusStyles[status] || { backgroundColor: "#198f51" }),
+  width: "130px", // Ensure consistent fixed width
+  height: "30px", // Ensure consistent fixed height
   borderRadius: "5px",
-  padding: "5px 20px",
-  textAlign: "center",
-  display: "flex", // Use flexbox for alignment
-  justifyContent: "center", // Center horizontally
-  alignItems: "center", // Center vertically
+  padding: "5px 10px",
+  
   color: "#fff",
 });
 
+
 const getCountClass = (status) => ({
   ...statusStyles[status],
   padding: "10px",