diff --git a/public/index.html b/public/index.html
index 7e1c132..6f189cc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,10 +28,18 @@
 
   <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
   <style>
-    body {
-      background-color: #E9ECFF;
-      font-family: Manrope;
-    }
+   body {
+  background-color: #f9fff6;
+  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;
+}
+
+
 
     @media (min-width: 768px) {
       .hideonmobile {
diff --git a/src/assets/Image/Background.png b/src/assets/Image/Background.png
new file mode 100644
index 0000000..744a5e9
Binary files /dev/null and b/src/assets/Image/Background.png differ
diff --git a/src/assets/Image/Pattern.png b/src/assets/Image/Pattern.png
new file mode 100644
index 0000000..191aea0
Binary files /dev/null and b/src/assets/Image/Pattern.png differ
diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index 2e2b4a9..50a0fc6 100644
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -226,7 +226,7 @@ body {
   display: flex;
   align-items: center;
   position: relative;
- gap:120px;
+ gap:10px;
 }
 .avatar {
 
@@ -293,14 +293,16 @@ body {
 }
 .nav-menu-drop {
   white-space: nowrap; /* Prevent wrapping */
+
 }
 
 .nav-menu-drop {
   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;
@@ -318,7 +320,7 @@ body {
   color: #002300;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   display: block;
-
+   
   width: auto;
   box-sizing: border-box;
   border-bottom: 1px solid rgba(230, 230, 230, 0.3);
@@ -356,11 +358,14 @@ body {
   display: block;
   margin-bottom: 10px;
   width: 100%;
+
 }
 /* Grid system */
 .row {
   display: flex;
   flex-wrap: wrap;
+  gap: 40px;
+
 }
 .col-2 {
   flex: 0 0 16.6667%;
@@ -621,10 +626,16 @@ body {
   height: 18px;
   background-color: #4545db;
   border-color: #4545db;
+  border-radius: 50%;
 }
 .form-check-input[type="radio"] {
   border-radius: 50%;
 }
+ 
+.form-check-input[type=checkbox] {
+  border-radius: 50%;
+}
+
 .filter-button {
   background-color: transparent;
   border: none;
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js b/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js
index e6232db..a6e8427 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js
@@ -4,6 +4,7 @@
 import React, { useEffect, useState } from "react";
 import "./Invoice.css";
 import Swal from "sweetalert2";
+import { DatePicker } from "antd";
 import { toast } from "react-toastify";
 import useApi from "../../../../../utils/api-manager/Helper/useApi";
 
@@ -18,15 +19,20 @@ const ATMDepositTable = (props) => {
   const [vendors, setVendors] = useState([]);
   const [fromDate, setFromDate] = useState("");
   const [toDate, setToDate] = useState("");
+  const [dateRange, setDateRange] = useState([]);
+
+
   const { Get, Delete } = useApi();
+
+
   function filterByTransactionType(dataArray, transactionType) {
     return dataArray.filter(record => record.transaction_type === transactionType);
-}
+  }
   useEffect(() => {
     const fetchInvoices = async () => {
       await Get("transactionData")
         .then((response) => {
-            let type = (props.transaction_type)?props.transaction_type:"Bank Deposit";
+          let type = (props.transaction_type) ? props.transaction_type : "Bank Deposit";
           setInvoices(filterByTransactionType(response, type));
           const uniqueVendors = [
             ...new Set(response.map((invoice) => invoice.vendor_department_name)),
@@ -39,31 +45,39 @@ const ATMDepositTable = (props) => {
     };
     fetchInvoices();
   }, [props.reloadData]);
+
+  useEffect(() => {
+    let filteredInvoices = invoices;
+
+    // Filter by date range
+    if (dateRange.length === 2) {
+      const [start, end] = dateRange;
+      filteredInvoices = filteredInvoices.filter((invoice) => {
+        const invoiceDate = new Date(invoice.date);
+        return invoiceDate >= start && invoiceDate <= end;
+      });
+    }
+
+    setInvoices(filteredInvoices);
+  }, [dateRange, invoices]);
+
   const applyFilters = () => {
     let filteredInvoices = invoices;
 
+    // Apply status filter
     if (selectedStatus !== "All") {
       filteredInvoices = filteredInvoices.filter(
         (invoice) => invoice.status === selectedStatus
       );
     }
+
+    // Apply vendor filter
     if (selectedVendor) {
       filteredInvoices = filteredInvoices.filter(
         (invoice) => invoice.vendor_department_name === selectedVendor
       );
     }
 
-    if (fromDate) {
-      filteredInvoices = filteredInvoices.filter(
-        (invoice) => new Date(invoice.date) >= new Date(fromDate)
-      );
-    }
-    if (toDate) {
-      filteredInvoices = filteredInvoices.filter(
-        (invoice) => new Date(invoice.date) <= new Date(toDate)
-      );
-    }
-
     setInvoices(filteredInvoices);
   };
 
@@ -118,37 +132,37 @@ const ATMDepositTable = (props) => {
   };
   const handleDelete = async (id) => {
     const result = await Swal.fire({
-        title: "Are you sure?",
-        text: "You won't be able to revert this!",
-        icon: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#d33",
-        cancelButtonColor: "#3085d6",
-        confirmButtonText: "Yes, delete it!",
+      title: "Are you sure?",
+      text: "You won't be able to revert this!",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#d33",
+      cancelButtonColor: "#3085d6",
+      confirmButtonText: "Yes, delete it!",
     });
 
     // Check if the user clicked the confirm button
     if (!result.isConfirmed) return; // Exit if the user cancels
 
     try {
-        await Delete(`transactionData`, id);
+      await Delete(`transactionData`, id);
 
-        const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
-        setInvoices(updatedInvoices);
+      const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
+      setInvoices(updatedInvoices);
 
-        // Show success notification
-        toast.success("Invoice successfully deleted!");
+      // Show success notification
+      toast.success("Invoice successfully deleted!");
     } catch (error) {
-        if (error.response) {
-            toast.error(`Error deleting invoice: ${error.response.data}`);
-            toast.error(`Status code: ${error.response.status}`);
-        } else if (error.request) {
-            toast.error("No response received");
-        } else {
-            toast.error(`Error setting up request: ${error.message}`);
-        }
+      if (error.response) {
+        toast.error(`Error deleting invoice: ${error.response.data}`);
+        toast.error(`Status code: ${error.response.status}`);
+      } else if (error.request) {
+        toast.error("No response received");
+      } else {
+        toast.error(`Error setting up request: ${error.message}`);
+      }
     }
-};
+  };
 
 
   const handleEdit = (invoice) => {
@@ -250,7 +264,7 @@ const ATMDepositTable = (props) => {
 
     return (
       <div className="pagination">
-        <button
+        {/* <button
           className="pgbtn"
           onClick={handlePrevPage}
           disabled={currentPage === 1}
@@ -264,11 +278,11 @@ const ATMDepositTable = (props) => {
           >
             <path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
           </svg>
-        </button>
+        </button> */}
 
         {paginationItems}
 
-        <button
+        {/* <button
           className="pgbtn"
           onClick={handleNextPage}
           disabled={currentPage === totalPages}
@@ -282,19 +296,99 @@ const ATMDepositTable = (props) => {
           >
             <path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
           </svg>
-        </button>
+        </button> */}
       </div>
     );
   };
 
   return (
     <div>
-      <div className="d-flex justify-content-between align-items-center mb-3">
+
+      <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
+          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 className="d-flex  align-items-center mb-3" style={{ gap: "10px" }}>
         {/* Search Bar */}
         <div className="searchcontainer">
           <div
             className="input-group"
-            style={{ width: "300px", height: "50px" }}
+            style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
           >
             <span
               className="input-group-text"
@@ -333,8 +427,8 @@ const ATMDepositTable = (props) => {
           </div>
         </div>
 
-         <div className="d-flex align-items-center">
-          <div
+        <div className="d-flex align-items-center">
+          {/* <div
             className="filtercontainer"
             style={{
               backgroundColor: "#f4f4f4",
@@ -384,7 +478,7 @@ const ATMDepositTable = (props) => {
                 </span>
               </button>
             ))}
-          </div>
+          </div> */}
 
           <div
             className="filterbutton"
@@ -470,7 +564,7 @@ const ATMDepositTable = (props) => {
               }}
             >
               <li>
-              <div className="mb-2">
+                <div className="mb-2">
                   <select
                     id="selectStatus"
                     className="form-select"
@@ -510,7 +604,7 @@ const ATMDepositTable = (props) => {
                   className="row col-md-12"
                   style={{ width: "100%", justifyContent: "space-around" }}
                 >
-                  <div className="col-5">
+                  {/* <div className="col-5">
                     <input
                       style={{
                         borderRadius: "60px",
@@ -537,7 +631,7 @@ const ATMDepositTable = (props) => {
                       value={toDate}
                       onChange={(e) => setToDate(e.target.value)}
                     />
-                  </div>
+                  </div> */}
                 </div>
               </li>
               <li className="text-center mt-2">
@@ -552,14 +646,21 @@ const ATMDepositTable = (props) => {
             </ul>
           </div>
         </div>
-
+        {/* Date Filters using Ant Design RangePicker */}
+        <div>
+          <DatePicker.RangePicker
+            style={{ borderRadius: "60px", height: "40px", width: "300px" }}
+            onChange={(dates) => setDateRange(dates || [])} // Handle null case
+            format="YYYY-MM-DD"
+          />
+        </div>
       </div>
 
       {/* Table of Invoices */}
       <table className="table table-borderless table-responsive">
         <thead>
           <tr>
-            {["date", "bank_deposite_type", "amount","Transaction Type", "actions"].map(
+            {["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
               (header, index) => (
                 <th
                   key={header}
@@ -567,12 +668,10 @@ const ATMDepositTable = (props) => {
                   style={{
                     paddingLeft: index === 0 ? "30px" : "0",
                     cursor: "pointer",
-                    borderTopLeftRadius: index === 0 ? "60px" : "0",
-                    borderBottomLeftRadius: index === 0 ? "60px" : "0",
-                    borderTopRightRadius: index === 4 ? "60px" : "0",
-                    borderBottomRightRadius: index === 4 ? "60px" : "0",
                     textAlign: "start",
                     alignContent: "center",
+                     backgroundColor:'#282e26',
+                      color:'#ffffff'
                   }}
                 >
                   {header
@@ -610,49 +709,49 @@ const ATMDepositTable = (props) => {
           </tr>
         </thead>
         <tbody style={{ textAlign: "center" }}>
-          {currentInvoices.length !== 0?
+          {currentInvoices.length !== 0 ?
             currentInvoices.map((invoice) => (
-            <tr key={invoice.id}>
-              <td style={{ cursor: "pointer", textAlign: "left" }}>
-                {invoice.date}
-              </td>
+              <tr key={invoice.id}>
+                <td style={{ cursor: "pointer", textAlign: "left" }}>
+                  {invoice.date}
+                </td>
 
-              <td style={{ cursor: "pointer", textAlign: "left" }}>
-                <span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
-                  {invoice.bank_deposite_type
-                    ? invoice.bank_deposite_type.charAt(0).toUpperCase() +
+                <td style={{ cursor: "pointer", textAlign: "left" }}>
+                  <span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
+                    {invoice.bank_deposite_type
+                      ? invoice.bank_deposite_type.charAt(0).toUpperCase() +
                       invoice.bank_deposite_type.slice(1)
-                    : "N/A"}
-                </span>
-              </td>
-              <td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
-              <td style={{ textAlign: 'left' }}>
-                <span style={getStatusStyle(invoice.transaction_type)}>
+                      : "N/A"}
+                  </span>
+                </td>
+                <td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
+                <td style={{ textAlign: 'left' }}>
+                  <span style={getStatusStyle(invoice.transaction_type)}>
                     {invoice.transaction_type ?
-                        invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
-                        'N/A'}
-                </span>
-            </td>
-              <td>
-                <div className="dropdown">
-                  <button
-                    className="btn btn-sm btn-outline-secondary dropdown-vertical "
-                    type="button"
-                    id={`actionDropdown-${invoice.id}`} // Unique ID for each dropdown
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
+                      invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
+                      'N/A'}
+                  </span>
+                </td>
+                <td>
+                  <div className="dropdown">
+                    <button
+                      className="btn btn-sm btn-outline-secondary dropdown-vertical "
+                      type="button"
+                      id={`actionDropdown-${invoice.id}`} // Unique ID for each dropdown
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
 
-                  >
-                    <i
-                      className="bi bi-three-dots"
-                      style={{ transform: "rotate(90deg)", display: "block" }}
-                    ></i>
-                  </button>
-                  <ul
-                    className="dropdown-menu"
-                    aria-labelledby={`actionDropdown-${invoice.id}`}
-                  >
-                    {/* <li>
+                    >
+                      <i
+                        className="bi bi-three-dots"
+                        style={{ transform: "rotate(90deg)", display: "block" }}
+                      ></i>
+                    </button>
+                    <ul
+                      className="dropdown-menu"
+                      aria-labelledby={`actionDropdown-${invoice.id}`}
+                    >
+                      {/* <li>
                       <a
                         className="dropdown-item"
                         onClick={() => handleEdit(invoice)}
@@ -660,34 +759,34 @@ const ATMDepositTable = (props) => {
                         Edit
                       </a>
                     </li> */}
-                    <li>
-                      <a
-                        className="dropdown-item"
-                        onClick={() => handleDelete(invoice.id)}
-                      >
-                        Delete
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </td>
-            </tr>
-          ))
+                      <li>
+                        <a
+                          className="dropdown-item"
+                          onClick={() => handleDelete(invoice.id)}
+                        >
+                          Delete
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </td>
+              </tr>
+            ))
 
-          :(
-            <tr>
-              <td colSpan="7" style={{
-                textAlign: "center", fontFamily: 'Manrope',
-                fontWeight: '600',
-                fontSize: '40px',
-                background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
-                WebkitBackgroundClip: 'text',
-                WebkitTextFillColor: 'transparent',
-              }}>
-                No data found
-              </td>
-            </tr>
-          )
+            : (
+              <tr>
+                <td colSpan="7" style={{
+                  textAlign: "center", fontFamily: 'Manrope',
+                  fontWeight: '600',
+                  fontSize: '40px',
+                  background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                }}>
+                  No data found
+                </td>
+              </tr>
+            )
           }
         </tbody>
       </table>
@@ -720,8 +819,8 @@ const getPaymentMethodStyle = (method) => ({
 const statusStyles = {
   All: { backgroundColor: "#4545DB" },
   "Business cash": { backgroundColor: "#38400B" },
- "Lottery cash": { backgroundColor: "#CAC59D" },
- "Gas cash": { backgroundColor: "#57A09C" },
+  "Lottery cash": { backgroundColor: "#CAC59D" },
+  "Gas cash": { backgroundColor: "#57A09C" },
 };
 
 const getStatusStyle = (status) => ({
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js b/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
index 4cc6ee8..fb269e5 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
@@ -9,6 +9,8 @@ import TableComponent from "./InvoiceTable";
 import useApi from "../../../../../utils/api-manager/Helper/useApi";
 import AuthContext from "../../../../../utils/secure-route/AuthContext";
 import AddVendorModal from "../../ReusableForm/AddVendorModal";
+import { colors } from "@mui/material";
+import { Space } from "antd";
 
 function AddInvoice() {
   const { Get, Post } = useApi();
@@ -269,7 +271,7 @@ function AddInvoice() {
     },
     {
       row: 1,
-      column: "col-md-5",
+      column: "col-md-4",
       label: "Vendor",
       type: "select-vendor",
       name: "vendor_department_name",
@@ -278,7 +280,7 @@ function AddInvoice() {
     },
     {
       row: 1,
-      column: "col-md-5",
+      column: "col-md-2",
       label: "Invoice Number",
       type: "invoice_no",
       name: "invoice_no",
@@ -286,9 +288,18 @@ function AddInvoice() {
     },
     {
       row: 2,
-      column: "col-md-12",
+      column: "col-md-5",
+      label: "Amount",
+      name: "amount",
+      type: "prefix-input",
+      placeholder: "Amount",
+      prefixText: "USD",
+    },
+    {
+      row: 2,
+      column: "col-md-5",
       name: "pay_method_status",
-      label: "Payment Method:",
+      // label: "Payment Method:",
       type: "radio",
       options: [
         { value: "pay_later", label: "Pay Later" },
@@ -297,7 +308,7 @@ function AddInvoice() {
       ],
     },
     {
-      row: 3,
+      row: 4,
       column: "col-md-12",
       label: "Payment Method Options",
       type: "payment-method-options",
@@ -337,15 +348,7 @@ function AddInvoice() {
       type: "checkbox",
       name: "prepaid_tax",
     },
-    {
-      row: 6,
-      column: "col-md-6",
-      label: "Amount",
-      name: "amount",
-      type: "prefix-input",
-      placeholder: "Amount",
-      prefixText: "USD",
-    },
+
   ];
 
   const paymentMethodOptions = [
@@ -382,7 +385,7 @@ function AddInvoice() {
     setIsOpen(false); // Close the dropdown after clicking a link
 
     navigate(path); // Navigate to the clicked path
-   
+
   };
 
   const renderField = (field) => {
@@ -580,7 +583,7 @@ function AddInvoice() {
 
       case "radio":
         return (
-          <div className="form-group d-flex">
+          <div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '10px 10px', width: "fit-content", borderRadius: '20px', }}>
             <label className="me-4">{field.label}</label>
             {field.options.map((option, index) => (
               <div key={index} className="form-check me-4">
@@ -602,9 +605,9 @@ function AddInvoice() {
       case "payment-method-options":
         return (
           formData.pay_method_status === "pay_now" && (
-            <div className="form-group d-flex">
+            <div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '10px 10px', width: "fit-content", borderRadius: '20px' }}>
               {/* Align items vertically */}
-              <label className="me-4">Payment Method Options:</label>{" "}
+              {/* <label className="me-4">Payment Method Options:</label>{" "} */}
               {/* Extra space after the main label */}
               {paymentMethodOptions.map((option, index) => (
                 <div key={index} className="form-check me-4">
@@ -644,7 +647,7 @@ function AddInvoice() {
         return (
           (formData.pay_method === "cheque" ||
             formData.pay_method === "bank") && (
-            <div className="row mb-3">
+            <div className="row mb-3" >
               <div className="col-md-6">
                 <div className="form-group">
                   <select
@@ -690,7 +693,9 @@ function AddInvoice() {
                     onChange={handleChange}
                   />
                 </div>
+
               </div>
+
             </div>
           )
         );
@@ -702,117 +707,127 @@ function AddInvoice() {
 
   return (
     <div className="dashboard-container">
- <div className="d-flex justify-content-between mb-4">
-      <div className="button-groups">
-        <button
-          className={`btn ${activeButton === '/' ? 'active' : ''}`}
-          onClick={() => handleLinkClick('/')}
-        >
-          Add 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
-        </button>
-        <button
-          className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
-          onClick={() => handleLinkClick('/atmDeposit')}
-        >
-          ATM Deposit
-        </button>
+      <div className="d-flex justify-content-between mb-4">
+        <div className="button-groups">
+          <button
+            className={`btn ${activeButton === '/' ? 'active' : ''}`}
+            onClick={() => handleLinkClick('/')}
+          >
+            Add 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
+          </button>
+          <button
+            className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
+            onClick={() => handleLinkClick('/atmDeposit')}
+          >
+            ATM Deposit
+          </button>
+        </div>
       </div>
-    </div>
-    <div className="formcontainer">
+      <div className="formcontainer">
+        <div
+          className="container"
+          style={{
+            backgroundColor: "white",
+            boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
+            borderRadius: "40px"
+          }}
+        >
+          <form onSubmit={handleSubmit}>
+
+            {/* Render Fields */}
+            {Object.keys(groupedFields).map((rowKey) => (
+              <div className="row mb-3" 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="form-group">
+                    <label htmlFor="prepaid_amount">Prepaid Tax</label>
+                    <input
+                      type="text"
+                      className="form-control-borderless"
+                      name="prepaid_amount"
+                      id="prepaid_amount"
+                      placeholder="Enter Prepaid Tax"
+                      value={formData.prepaid_amount}
+                      onChange={handleChange}
+                      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
+                          .slice(0, 12); // Limit input length
+                      }}
+                    />
+
+                  </div>
+
+                </div>
+
+              </div>
+            )}
+            <div className="">
+              {/* Action Buttons */}
+              <div className="d-flex justify-content-end">
+                <button
+                  type="button"
+                  className="btn btn-contained me-2"
+                  onClick={handleCancel}
+                  style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
+                >
+                  Cancel
+                </button>
+                <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
+                  Save
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <ToastContainer />
+
       <div
-        className="container"
+        className="container mt-5"
         style={{
           backgroundColor: "white",
           boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
         }}
       >
-        <form onSubmit={handleSubmit}>
-          <div className="">
-          {/* Action Buttons */}
-          <div className="d-flex justify-content-end">
-            <button
-              type="button"
-              className="btn btn-contained me-2"
-              onClick={handleCancel}
-            >
-              Cancel
-            </button>
-            <button type="submit" className="btn btn-primary">
-              Save
-            </button>
-          </div>
-          </div>
-          {/* Render Fields */}
-          {Object.keys(groupedFields).map((rowKey) => (
-            <div className="row mb-3" 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="form-group">
-                  <label htmlFor="prepaid_amount">Prepaid Tax</label>
-                  <input
-                    type="text"
-                    className="form-control-borderless"
-                    name="prepaid_amount"
-                    id="prepaid_amount"
-                    placeholder="Enter Prepaid Tax"
-                    value={formData.prepaid_amount}
-                    onChange={handleChange}
-                    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
-                        .slice(0, 12); // Limit input length
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-          )}
-        </form>
+        <TableComponent reloadData={reloadData} />
+        <AddVendorModal
+          show={showModal}
+          handleClose={handleClose}
+          onVendorAdded={handleVendorAdded}
+        />
       </div>
-    </div>
 
-    <ToastContainer />
-    
-    <div
-      className="container mt-5"
-      style={{
-        backgroundColor: "white",
-        boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
-      }}
-    >
-      <TableComponent reloadData={reloadData} />
-      <AddVendorModal
-        show={showModal}
-        handleClose={handleClose}
-        onVendorAdded={handleVendorAdded}
-      />
     </div>
-  </div>
-);
+  );
 }
 
 export default AddInvoice;
\ No newline at end of file
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js b/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
index f4fe8e9..53cbb1c 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
@@ -17,13 +17,13 @@ function AtmDeposit() {
   const navigate = useNavigate();
   const today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD
 
-   const [activeButton, setActiveButton] = useState('');
-  
-    const location = useLocation();
-  
-    useEffect(() => {
-      setActiveButton(location.pathname); // Set the active button based on the current location
-    }, [location.pathname]);
+  const [activeButton, setActiveButton] = useState('');
+
+  const location = useLocation();
+
+  useEffect(() => {
+    setActiveButton(location.pathname); // Set the active button based on the current location
+  }, [location.pathname]);
 
   const [isOpen, setIsOpen] = useState(false);
   const [banks, setBanks] = useState([]);
@@ -148,61 +148,47 @@ function AtmDeposit() {
     <div className="dashboard-container">
       <ToastContainer />
       <div className="d-flex justify-content-between mb-4">
-      <div className="button-groups">
-        <button
-          className={`btn ${activeButton === '/' ? 'active' : ''}`}
-          onClick={() => handleLinkClick('/')}
-        >
-          Add 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
-        </button>
-        <button
-          className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
-          onClick={() => handleLinkClick('/atmDeposit')}
-        >
-          ATM Deposit
-        </button>
+        <div className="button-groups">
+          <button
+            className={`btn ${activeButton === '/' ? 'active' : ''}`}
+            onClick={() => handleLinkClick('/')}
+          >
+            Add 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
+          </button>
+          <button
+            className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
+            onClick={() => handleLinkClick('/atmDeposit')}
+          >
+            ATM Deposit
+          </button>
+        </div>
       </div>
-    </div>
       <div className="formcontainer">
         <div
           className="container"
           style={{
             backgroundColor: "white",
             boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
+            borderRadius: "40px"
           }}
         >
           <form onSubmit={handleSubmit}>
-            <div className="">
-             
 
-              <div className="d-flex justify-content-end">
-                <button
-                  type="button"
-                  className="btn btn-contained me-2"
-                  onClick={() => navigate("/")}
-                >
-                  Cancel
-                </button>
-                <button type="submit" className="btn btn-primary">
-                  Save
-                </button>
-              </div>
-            </div>
 
-            <div className="col-md-12 row mb-3">
-              <div className="mb-3 col-md-4">
+            <div className=" col-md-12 row mb-3">
+              <div className="col-md-4 mb-3">
                 <input
                   type="date"
                   className="form-control-borderless"
@@ -212,6 +198,44 @@ function AtmDeposit() {
                   required
                 />
               </div>
+              <div className="col-md-3 mb-3">
+                <select
+                  className="form-select custom-select"
+                  id="bank_deposite_type"
+                  name="bank_deposite_type"
+                  value={formData.bank_deposite_type}
+                  onChange={handleChange}
+                >
+                  <option value="">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-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
+                <div className="input-group" style={{ width: "100%" }}>
+                  <span className="input-group-text" style={{ border: "none" }}>
+                    USD
+                  </span>
+                  <input
+                    type="number"
+                    style={{ border: "none", flex: 1 }}
+                    className="form-control-borderless"
+                    name="cash_amount"
+                    placeholder="Amount"
+                    value={formData.cash_amount}
+                    onChange={handleChange}
+                    onInput={(e) => {
+                      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
+                        .slice(0, 12); // Limit input length
+                    }}
+                  />
+                </div>
+              </div>
 
               <div className="mb-3 col-md-4">
                 <input
@@ -225,31 +249,9 @@ function AtmDeposit() {
               </div>
             </div>
 
-            <div className="col-md-12 row">
-              <div className="mb-3 col-md-12" style={{ marginLeft: "10px" }}>
-                <div className="d-flex flex-row">
-                  Type: &nbsp;&nbsp;&nbsp;&nbsp;
-                  {["Business cash", "Lottery cash", "Gas cash"].map((type) => (
-                    <div className="form-check me-3" key={type}>
-                      <input
-                        className="form-check-input"
-                        type="radio"
-                        name="bank_deposite_type"
-                        id={`type-${type.toLowerCase().replace(" ", "-")}`}
-                        value={type}
-                        checked={formData.bank_deposite_type === type}
-                        onChange={handleChange}
-                      />
-                      <label
-                        className="form-check-label"
-                        htmlFor={`type-${type.toLowerCase().replace(" ", "-")}`}
-                      >
-                        {type}
-                      </label>
-                    </div>
-                  ))}
-                </div>
-              </div>
+            <div className="col-md-3 row">
+
+
               {/* <div className="mb-3 mt-2 col-md-4 ">
                 <select
                   className="form-control-borderless"
@@ -267,37 +269,22 @@ function AtmDeposit() {
                 </select>
               </div> */}
             </div>
-            <div
-              className="form-group col-md-5 mt-3"
-              style={{
-                display: "flex",
-                alignItems: "center",
-                borderBottom: "1px solid #f4f4f4",
-                paddingBottom: "16px",
-                height: "50px",
-              }}
-            >
-              <div className="input-group">
-                <span className="input-group-text" style={{ border: "none" }}>
-                  USD
-                </span>
-                <input
-                  type="number"
-                  style={{ border: "none" }}
-                  className="form-control-borderless"
-                  name="cash_amount"
-                  placeholder="Amount"
-                  value={formData.cash_amount}
-                  onChange={handleChange}
-                  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
-                      .slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
-                  }}
-                
-                />
+
+            <div className="">
+
+
+              <div className="d-flex justify-content-end">
+                <button
+                  type="button"
+                  className="btn btn-contained me-2"
+                  onClick={() => navigate("/")}
+                  style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
+                >
+                  Cancel
+                </button>
+                <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
+                  Save
+                </button>
               </div>
             </div>
           </form>
@@ -310,7 +297,7 @@ function AtmDeposit() {
           boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
         }}
       >
-        <ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData}/>
+        <ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />
       </div>
     </div>
   );
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
index b7e2d55..05a6e68 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
@@ -188,25 +188,14 @@ function BankDeposit() {
                     className="container"
                     style={{
                         backgroundColor: "white",
-                        boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)"
+                        boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
+                        borderRadius:"40px"
                     }}
                 >
                     <form onSubmit={handleSubmit}>
-                        <div className="">
+                       
              
-                            <div className="d-flex justify-content-end">
-                                <button
-                                    type="button"
-                                    className="btn btn-contained me-2"
-                                    onClick={() => navigate("/")}
-                                >
-                                    Cancel
-                                </button>
-                                <button type="submit" className="btn btn-primary">
-                                    Save
-                                </button>
-                            </div>
-                        </div>
+                           
 
                         <div className="col-md-12 row mb-3">
                             <div className="mb-3 col-md-4">
@@ -332,6 +321,20 @@ function BankDeposit() {
                                 </div>
                             </div>
                         </div>
+                        <div className="d-flex justify-content-end">
+                                <button
+                                    type="button"
+                                    className="btn btn-contained me-2"
+                                    onClick={() => navigate("/")}
+                                    style={{border: " 1px solid #282e26", borderRadius:'20px' }}
+                                >
+                                    Cancel
+                                </button>
+                                <button type="submit" className="btn"  style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}>
+                                    Save
+                                </button>
+                            </div>
+                      
                     </form>
                 </div>
             </div>
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
index d1bb014..9ddd464 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
@@ -4,6 +4,7 @@
 import React, { useEffect, useState } from "react";
 import "./Invoice.css";
 import Swal from "sweetalert2";
+import { DatePicker } from "antd";
 import { toast } from "react-toastify";
 import useApi from "../../../../../utils/api-manager/Helper/useApi";
 
@@ -18,7 +19,8 @@ const BankDepositTable = (props) => {
   const [vendors, setVendors] = useState([]);
   const [fromDate, setFromDate] = useState("");
   const [toDate, setToDate] = useState("");
-
+    const [dateRange, setDateRange] = useState([]); 
+  const { RangePicker } = DatePicker;
   const { Get, Delete } = useApi();
   function filterByTransactionType(dataArray, transactionType) {
     return dataArray.filter(record => record.transaction_type === transactionType);
@@ -40,34 +42,47 @@ const BankDepositTable = (props) => {
     };
     fetchInvoices();
   }, [props.reloadData]);
-  const applyFilters = () => {
+  useEffect(() => {
     let filteredInvoices = invoices;
 
+    // Apply date range filter
+    if (dateRange.length === 2) {
+      const [start, end] = dateRange;
+      filteredInvoices = filteredInvoices.filter((invoice) => {
+        const invoiceDate = new Date(invoice.date);
+        return invoiceDate >= start && invoiceDate <= end;
+      });
+    }
+
+    // Apply other filters on top of date filtering
+    applyFilters(filteredInvoices);
+  }, [dateRange]);
+
+  const applyFilters = (filteredInvoices = invoices) => {
+    let updatedInvoices = filteredInvoices;
+
+    // Apply status filter
     if (selectedStatus !== "All") {
-      filteredInvoices = filteredInvoices.filter(
+      updatedInvoices = updatedInvoices.filter(
         (invoice) => invoice.bank_deposite_type === selectedStatus
       );
     }
+
+    // Apply vendor filter
     if (selectedVendor) {
-      filteredInvoices = filteredInvoices.filter(
+      updatedInvoices = updatedInvoices.filter(
         (invoice) => invoice.vendor_department_name === selectedVendor
       );
     }
 
-    if (fromDate) {
-      filteredInvoices = filteredInvoices.filter(
-        (invoice) => new Date(invoice.date) >= new Date(fromDate)
-      );
-    }
-    if (toDate) {
-      filteredInvoices = filteredInvoices.filter(
-        (invoice) => new Date(invoice.date) <= new Date(toDate)
-      );
-    }
-
-    setInvoices(filteredInvoices);
+    setInvoices(updatedInvoices);
   };
 
+  // Update filters when status or vendor changes
+  useEffect(() => {
+    applyFilters();
+  }, [selectedStatus, selectedVendor]);
+
   const handleSort = (column) => {
     const direction =
       sortOrder.column === column && sortOrder.direction === "asc"
@@ -294,12 +309,92 @@ const BankDepositTable = (props) => {
 
   return (
     <div>
-      <div className="d-flex justify-content-between align-items-center mb-3">
+      <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
+        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 className="d-flex  align-items-center mb-3">
         {/* Search Bar */}
         <div className="searchcontainer">
           <div
             className="input-group"
-            style={{ width: "300px", height: "50px" }}
+            style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
           >
             <span
               className="input-group-text"
@@ -339,7 +434,7 @@ const BankDepositTable = (props) => {
         </div>
 
          <div className="d-flex align-items-center">
-          <div
+          {/* <div
             className="filtercontainer"
             style={{
               backgroundColor: "#f4f4f4",
@@ -389,7 +484,7 @@ const BankDepositTable = (props) => {
                 </span>
               </button>
             ))}
-          </div>
+          </div> */}
 
           <div
             className="filterbutton"
@@ -511,7 +606,7 @@ const BankDepositTable = (props) => {
                 </div>
               </li> */}
               <li className="mt-2">
-                <div
+                {/* <div
                   className="row col-md-12"
                   style={{ width: "100%", justifyContent: "space-around" }}
                 >
@@ -543,7 +638,7 @@ const BankDepositTable = (props) => {
                       onChange={(e) => setToDate(e.target.value)}
                     />
                   </div>
-                </div>
+                </div> */}
               </li>
               <li className="text-center mt-2">
                 <button
@@ -557,6 +652,15 @@ const BankDepositTable = (props) => {
             </ul>
           </div>
         </div>
+        <div>
+        <div>
+          <RangePicker
+            style={{ borderRadius: "60px", height: "40px", width: "300px" }}
+            onChange={(dates) => setDateRange(dates || [])} // Handle null case
+            format="YYYY-MM-DD"
+          />
+        </div>
+        </div>
       </div>
 
       {/* Table of Invoices */}
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css b/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
index 74dd668..81dc0b9 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
@@ -6,7 +6,7 @@
 
 .container {
     padding: 30px;
-    border-radius: 10px;
+    border-radius: 40px;
 }
 
 .dropdown-toggle::after {
@@ -22,7 +22,7 @@
     gap: 10px; /* Adjust the spacing between buttons */
     background-color: #ffffff;
     width: auto;
-    border-radius: 20px;
+    border-radius: 44px;
     padding: 10px 50px;
     
 
@@ -37,44 +37,10 @@
   }
   
   
-.dash-drop-menu {
-    white-space: nowrap; /* Prevent wrapping */
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    position: absolute;
-    top: 100%; /* Positions dropdown below the parent */
-    left: 0;
-    background-color: #FFFFFF;
-    border: 1px solid #F6F6F6;
-    z-index: 1000;
-    border-radius: 10px;
-    min-width: 190px; /* Optional minimum width */
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
-}
-
-.dash-drop-menu-item {
-    padding: 10px 15px;
-    text-decoration: none;
-    color: #002300;
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
-    display: block;
-    width: auto;
-    font-size: 16px;
-    box-sizing: border-box;
-    border-bottom: 1px solid rgba(230, 230, 230, 0.3);
-    transition: none;
-}
-
-.dash-drop-menu-item:hover {
-    background-color: transparent; /* Prevent background change */
-    color: #002300; /* Maintain original text color */
-    cursor: default; /* Maintain default cursor */
-}
-
 .form-container {
     width: 1328px;
     height: 461px;
+
 }
 
 .form-group {
@@ -344,3 +310,19 @@ input[type="color"]:focus,
         width:.30%; /* Make it 30% smaller (i.e., 70% width) */
     }
 }
+
+
+.custom-select {
+    border: none; /* Remove default borders */
+    border-bottom: 2px solid #e4e5e7; /* Add a bottom border */
+    border-radius: 0; /* Remove border radius for a flat look */
+    outline: none; /* Remove the outline on focus */
+    padding: 0.375rem 0.75rem; /* Adjust padding if necessary */
+  }
+  
+  .custom-select:focus {
+    border-bottom: 2px solid #e4e5e7; /* Change color on focus */
+    box-shadow: none; /* Remove any shadow */
+  }
+  
+  
\ 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 931398d..1c63487 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
@@ -4,7 +4,7 @@
 import React, { useEffect, useState } from "react";
 import "./Invoice.css";
 import Swal from "sweetalert2";
-
+import { DatePicker } from "antd";
 import { toast } from "react-toastify";
 import useApi from "../../../../../utils/api-manager/Helper/useApi";
 import { FilterButton } from "../../../../../utils/api-manager/Forms/SvgIcons";
@@ -23,6 +23,7 @@ const InvoiceTable = ({ reloadData }) => {
   const [fromDate, setFromDate] = useState("");
   const [toDate, setToDate] = useState("");
   const [originalInvoices, setOriginalInvoices] = useState([]);
+  const [dateRange, setDateRange] = useState([]); 
 
   const [reloaData, setReloadData] = useState(false);
 
@@ -53,6 +54,22 @@ const InvoiceTable = ({ reloadData }) => {
     fetchInvoices();
   }, [reloadData]);
 
+  useEffect(() => {
+    let filteredInvoices = originalInvoices;
+
+    // Filter by date range
+    if (dateRange.length === 2) {
+      const [start, end] = dateRange;
+      filteredInvoices = filteredInvoices.filter((invoice) => {
+        const invoiceDate = new Date(invoice.date);
+        return invoiceDate >= start && invoiceDate <= end;
+      });
+    }
+
+    setInvoices(filteredInvoices);
+
+  }, [dateRange, originalInvoices]);
+
   const applyFilters = () => {
     let filteredInvoices = originalInvoices;
 
@@ -70,22 +87,10 @@ const InvoiceTable = ({ reloadData }) => {
       );
     }
 
-    // Apply date filters
-    if (fromDate) {
-      filteredInvoices = filteredInvoices.filter(
-        (invoice) => new Date(invoice.date) >= new Date(fromDate)
-      );
-    }
-    if (toDate) {
-      filteredInvoices = filteredInvoices.filter(
-        (invoice) => new Date(invoice.date) <= new Date(toDate)
-      );
-    }
-
-    // Update the state with filtered invoices
     setInvoices(filteredInvoices);
   };
 
+
   const handleSort = (column) => {
     const direction =
       sortOrder.column === column && sortOrder.direction === "asc"
@@ -279,15 +284,100 @@ const InvoiceTable = ({ reloadData }) => {
 
   return (
     <div>
-      <div className="d-flex justify-content-between align-items-center mb-3">
+      <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
+        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"}}>
+  
+
         <div className="searchcontainer">
+          
           <div
             className="input-group flexiblesearch"
-            style={{ height: "50px" }}
+            style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
           >
             <span
               className="input-group-text"
-              style={{ border: "none", backgroundColor: "transparent" }}
+              style={{ border: "none", backgroundColor: "transparent"  }}
             >
               <svg
                 width="22"
@@ -317,13 +407,20 @@ const InvoiceTable = ({ reloadData }) => {
               className="form-control"
               placeholder="Search"
               value={searchQuery}
+             
               onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
+          
         </div>
-
+       
         <div className="d-flex align-items-center">
-          <div
+       
+        <div className="date-filters d-flex justify-content-between mb-3 ">
+       
+
+      </div>
+          {/* <div
             className="filtercontainer"
             style={{
               backgroundColor: "#f4f4f4",
@@ -373,7 +470,7 @@ const InvoiceTable = ({ reloadData }) => {
                 </span>
               </button>
             ))}
-          </div>
+          </div> */}
 
           <div
             className="filterbutton"
@@ -462,8 +559,9 @@ const InvoiceTable = ({ reloadData }) => {
                   </select>
                 </div>
               </li>
+              
               <li className="mt-2">
-                <div
+                {/* <div
                   className="row col-md-12"
                   style={{ width: "100%", justifyContent: "space-around" }}
                 >
@@ -495,7 +593,7 @@ const InvoiceTable = ({ reloadData }) => {
                       onChange={(e) => setToDate(e.target.value)}
                     />
                   </div>
-                </div>
+                </div> */}
               </li>
               <li className="text-center mt-2">
                 <button
@@ -508,7 +606,17 @@ const InvoiceTable = ({ reloadData }) => {
               </li>
             </ul>
           </div>
+          
         </div>
+          {/* Date Filters using Ant Design RangePicker */}
+          <div>
+  <DatePicker.RangePicker
+    style={{ borderRadius: "60px", height: "40px", width: "300px" }}
+    onChange={(dates) => setDateRange(dates || [])} // Handle null case
+    format="YYYY-MM-DD"
+  />
+</div>
+
       </div>
 
       {/* Table of Invoices */}
@@ -642,21 +750,21 @@ const InvoiceTable = ({ reloadData }) => {
 };
 
 const paymentMethodStyles = {
-  bank: { backgroundColor: "#57A09C" },
-  "Business Cash": { backgroundColor: "#38400B" },
-  "Credit Card": { backgroundColor: "#28a745" },
-  cash: { backgroundColor: "#CAC59D" },
-  cheque: { backgroundColor: "#38400B" },
-  pay_later: { backgroundColor: "#E55477" },
-  pay_now: { backgroundColor: "#A9B0F0" },
-  credit_invoice: { backgroundColor: "#CFCC76" },
+  bank: { backgroundColor: "" },
+  "Business Cash": { backgroundColor: "" },
+  "Credit Card": { backgroundColor: "" },
+  cash: { backgroundColor: "" },
+  cheque: { backgroundColor: "" },
+  pay_later: { backgroundColor: "" },
+  pay_now: { backgroundColor: "" },
+  credit_invoice: { backgroundColor: "" },
 };
 
 const getPaymentMethodStyle = (method) => ({
   ...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
   borderRadius: "5px",
   padding: "10px 20px",
-  color: "#fff",
+  color: "#000",
 });
 
 const statusStyles = {
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js
index 7da52ca..08d8b96 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js
@@ -334,26 +334,16 @@ function PayInvoice() {
           style={{
             backgroundColor: "white",
             boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
+            borderRadius:"40px"
           }}
         >
           <form onSubmit={handleSubmit}>
             <div className="">
              
-              <div className="d-flex justify-content-end">
-                <button
-                  type="button"
-                  className="btn btn-contained me-2"
-                  onClick={handleCancel}
-                >
-                  Cancel
-                </button>
-                <button type="submit" className="btn btn-primary">
-                  Save
-                </button>
-              </div>
+             
             </div>
-            <div className="col-md-12 row">
-              <div className="mb-3 col-md-3">
+            <div className="col-md-12 row" style={{gap:"10%"}}>
+              <div className="mb-3 col-md-2" >
                 <input
                   type="date"
                   className="form-control-borderless"
@@ -420,47 +410,6 @@ function PayInvoice() {
                 </select> */}
               </div>
             </div>
-            <div
-              className="mb-3 d-flex align-items-center"
-              style={{ paddingLeft: "10px" }}
-            >
-              <span className="me-4">Payment Method:</span>
-              <div className="form-check me-3">
-                <input
-                  type="radio"
-                  className="form-check-input"
-                  name="pay_method"
-                  value="cash"
-                  checked={formData.pay_method === "cash"}
-                  onChange={handleChange}
-                />
-                <label className="form-check-label">Cash</label>
-              </div>
-              <div className="form-check me-3">
-                <input
-                  type="radio"
-                  className="form-check-input"
-                  name="pay_method"
-                  value="cheque"
-                  checked={formData.pay_method === "cheque"}
-                  onChange={handleChange}
-                />
-                <label className="form-check-label">Cheque</label>
-              </div>
-              <div className="form-check">
-                <input
-                  required
-                  type="radio"
-                  className="form-check-input"
-                  name="pay_method"
-                  value="bank"
-                  checked={formData.pay_method === "bank"}
-                  onChange={handleChange}
-                />
-                <label className="form-check-label">Bank Card (ACH/EFT)</label>
-              </div>
-            </div>
-
             <div className="mb-3 col-md-12 row">
               <div className="col-md-2">
                 <input
@@ -508,8 +457,69 @@ function PayInvoice() {
                   
             
               </div>
-              <div className="mb-3 col-md-12 row mt-3">
-              <div className="col-md-3 mt-4">
+            
+              <div className="col-md-3">
+  <input
+    type="text"
+    className="form-control"
+    placeholder="Grand Total"
+    value={grandTotal || ""}
+    readOnly
+    style={{
+      border: 'none', // Remove all borders
+      backgroundColor:'transparent',
+      borderBottom: '1px solid #ACB4AA', // Add only the bottom border
+    
+      outline: 'none', // Remove outline
+      padding: '6px 0', // Optional: Add padding to the top and bottom
+    }}
+  />
+</div>
+
+            
+            
+            
+            <div
+  className=" d-flex align-items-center"
+  style={{
+    border: '2px solid #ACB4AA',
+    padding: '5px 40px',
+    width: 'fit-content',
+    borderRadius: '40px',
+  }}
+>
+  {['cash', 'cheque', 'bank'].map((method) => (
+    <div className="me-3" 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 className="">
+              {/* <div className="col-md-3 mt-4">
                 <input
                   name="after_discount"
                   type="text"
@@ -519,22 +529,14 @@ function PayInvoice() {
                   placeholder="After Discount Amount"
                   readOnly
                 />
-              </div>
+              </div> */}
 
-              <div className="col-md-3">
-                <label>Grand Total:</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  value={grandTotal || ""}
-                  readOnly
-                />
-              </div>
+            
               </div>
             </div>
-            <div className="col-md-12">
+            <div className="col-md-6">
               {formData.pay_method === "cheque" && (
-                <div className="mb-3">
+                <div className="">
                   <div className="col-md-12 row">
                     <div className="mb-3 col-md-6">
                       <select
@@ -612,6 +614,19 @@ function PayInvoice() {
                 </div>
               )}
             </div>
+            <div className="d-flex justify-content-end">
+                <button
+                  type="button"
+                  className="btn btn-contained me-2"
+                  onClick={handleCancel}
+                  style={{border: " 1px solid #282e26", borderRadius:'20px' }}
+                >
+                  Cancel
+                </button>
+                <button type="submit" className="btn"  style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}> 
+                  Save
+                </button>
+              </div>
           </form>
         </div>
       </div>
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js
index f6c2a1f..6b1797a 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js
@@ -5,6 +5,7 @@ import "./Invoice.css";
 import { toast, ToastContainer } from "react-toastify";
 import useApi from "../../../../../utils/api-manager/Helper/useApi";
 import Swal from "sweetalert2";
+import { DatePicker } from "antd";
 const PayInvoiceTable = ({ onEdit, reloadData }) => {
   const { Get, Delete } = useApi();
 
@@ -18,7 +19,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
   const [vendors, setVendors] = useState([]);
   const [fromDate, setFromDate] = useState("");
   const [toDate, setToDate] = useState("");
-
+  const [dateRange, setDateRange] = useState([]);
 
 
   const fetchInvoices = async () => {
@@ -43,34 +44,39 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
     fetchInvoices();
   }, [reloadData]);
 
+  useEffect(() => {
+    let filteredInvoices = invoices;
+
+    // Filter by date range
+    if (dateRange.length === 2) {
+      const [start, end] = dateRange;
+      filteredInvoices = filteredInvoices.filter((invoice) => {
+        const invoiceDate = new Date(invoice.date);
+        return invoiceDate >= start && invoiceDate <= end;
+      });
+    }
+
+    setInvoices(filteredInvoices);
+
+  }, [dateRange, invoices]);
+
   const applyFilters = () => {
     let filteredInvoices = invoices;
 
+    // Apply status filter
     if (selectedStatus !== "All") {
       filteredInvoices = filteredInvoices.filter(
         (invoice) => invoice.status === selectedStatus
       );
     }
 
+    // Apply vendor filter
     if (selectedVendor) {
       filteredInvoices = filteredInvoices.filter(
         (invoice) => invoice.vendor_department_name === selectedVendor
       );
     }
 
-    // Apply date filters
-    if (fromDate) {
-      filteredInvoices = filteredInvoices.filter(
-        (invoice) => new Date(invoice.date) >= new Date(fromDate)
-      );
-    }
-    if (toDate) {
-      filteredInvoices = filteredInvoices.filter(
-        (invoice) => new Date(invoice.date) <= new Date(toDate)
-      );
-    }
-
-    // Update the state with filtered invoices
     setInvoices(filteredInvoices);
   };
 
@@ -140,11 +146,11 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
       await Delete(`invoiceData`, id)
         .then((resp) => {
           const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
-          
+
           setInvoices(updatedInvoices);
           onEdit(null);
           toast.success("Invoice successfully deleted!");
-          
+
         })
         .catch((error) => {
           if (error.response) {
@@ -266,7 +272,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
 
     return (
       <div className="pagination">
-        <button
+        {/* <button
           className="pgbtn"
           onClick={handlePrevPage}
           disabled={currentPage === 1}
@@ -280,11 +286,11 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
           >
             <path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
           </svg>
-        </button>
+        </button> */}
 
         {paginationItems}
 
-        <button
+        {/* <button
           className="pgbtn"
           onClick={handleNextPage}
           disabled={currentPage === totalPages}
@@ -298,20 +304,101 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
           >
             <path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
           </svg>
-        </button>
+        </button> */}
       </div>
     );
   };
 
   return (
     <div>
-      <ToastContainer/>
-      <div className="d-flex justify-content-between align-items-center mb-3">
+      <ToastContainer />
+      <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
+          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 className="d-flex align-items-center mb-3">
         {/* Search Bar */}
-        <div className="searchcontainer">
+        <div className="searchcontainer" style={{ gap: "10px" }}>
           <div
             className="input-group"
-            style={{ width: "300px", height: "50px" }}
+            style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
           >
             <span
               className="input-group-text"
@@ -352,7 +439,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
 
         {/* Filter and Actions */}
         <div className="d-flex align-items-center">
-          <div
+          {/* <div
             className="filtercontainer"
             style={{
               backgroundColor: "#f4f4f4",
@@ -403,7 +490,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                 </span>
               </button>
             ))}
-          </div>
+          </div> */}
 
           <div
             className="filterbutton"
@@ -528,7 +615,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                 </div>
               </li>
               <li className="mt-2">
-                <div
+                {/* <div
                   className="row col-md-12"
                   style={{ width: "100%", justifyContent: "space-around" }}
                 >
@@ -560,7 +647,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                       onChange={(e) => setToDate(e.target.value)}
                     />
                   </div>
-                </div>
+                </div> */}
               </li>
               <li className="text-center mt-2">
                 <button
@@ -574,6 +661,13 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
             </ul>
           </div>
         </div>
+        <div>
+          <DatePicker.RangePicker
+            style={{ borderRadius: "60px", height: "40px", width: "300px" }}
+            onChange={(dates) => setDateRange(dates || [])} // Handle null case
+            format="YYYY-MM-DD"
+          />
+        </div>
       </div>
 
       {/* Table of Invoices */}
@@ -596,10 +690,8 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                 style={{
                   paddingLeft: index === 0 ? "30px" : "0",
                   cursor: "pointer",
-                  borderTopLeftRadius: index === 0 ? "60px" : "0",
-                  borderBottomLeftRadius: index === 0 ? "60px" : "0",
-                  borderTopRightRadius: index === 7 ? "60px" : "0",
-                  borderBottomRightRadius: index === 7 ? "60px" : "0",
+                  backgroundColor: '#282e26',
+                  color: '#ffffff',
                   textAlign: "start",
                   alignContent: "center",
                 }}
@@ -756,34 +848,34 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
 };
 
 const paymentMethodStyles = {
-  bank: { backgroundColor: "#57A09C" },
-  "Business Cash": { backgroundColor: "#38400B" },
-  "Credit Card": { backgroundColor: "#28a745" },
-  cash: { backgroundColor: "#CAC59D" },
-  cheque: { backgroundColor: "#38400B" },
-  pay_later: { backgroundColor: "#E55477" },
-  pay_now: { backgroundColor: "#A9B0F0" },
-  credit_invoice: { backgroundColor: "#CFCC76" },
+  bank: { backgroundColor: "" },
+  "Business Cash": { backgroundColor: "" },
+  "Credit Card": { backgroundColor: "" },
+  cash: { backgroundColor: "" },
+  cheque: { backgroundColor: "" },
+  pay_later: { backgroundColor: "" },
+  pay_now: { backgroundColor: "" },
+  credit_invoice: { backgroundColor: "" },
 };
 
 const getPaymentMethodStyle = (method) => ({
-  ...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
-  borderRadius: "30px",
-  padding: "5px 10px",
-  color: "#fff",
+  ...(paymentMethodStyles[method] || { backgroundColor: "#6c757d", }),
+  borderRadius: "5px",
+  padding: "10px 20px",
+  color: "#000",
 });
 
 const statusStyles = {
   All: { backgroundColor: "#4545DB" },
   // draft: { backgroundColor: "#4545DB7C" },
-  unpaid: { backgroundColor: "#EF3E49" },
-  partially_paid: { backgroundColor: "#4545DB7C" },
+  unpaid: { backgroundColor: "#ff2024" },
+  partially_paid: { backgroundColor: "#0c8ce9" },
 };
 
 const getStatusStyle = (status) => ({
-  ...(statusStyles[status] || { backgroundColor: "#6c757d" }),
-  borderRadius: "30px",
-  padding: "5px 10px",
+  ...(statusStyles[status] || { backgroundColor: "#198f51" }),
+  borderRadius: "5px",
+  padding: "10px 20px",
   color: "#fff",
 });
 
diff --git a/src/components/Pages/AppPAges/ManageSettings/Settings.css b/src/components/Pages/AppPAges/ManageSettings/Settings.css
index d0d40dc..d06d49e 100644
--- a/src/components/Pages/AppPAges/ManageSettings/Settings.css
+++ b/src/components/Pages/AppPAges/ManageSettings/Settings.css
@@ -52,6 +52,7 @@
   background-color: #ffffff;
 }
 .form-check-input {
+  
   cursor: pointer;
 }
 /*===========================================================================Bank container=================================================================*/
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
index 0762401..940456b 100644
--- a/src/components/common/Header.js
+++ b/src/components/common/Header.js
@@ -14,7 +14,7 @@ import shopeKeeper from "../../assets/img/shopkeeper.png";
 
 const Header = () => {
   const { logOutUser } = useContext(AuthContext);
-  const [avatarDropdownOpen, setAvatarDropdownOpen] = useState(false);
+  const [settingsDropOpen, setsettingsDropOpen] = useState(false);
   const [settingsDropdownOpen, setSettingsDropdownOpen] = useState(false);
   const [generalDropdownOpen, setGeneralDropdownOpen] = useState(false);
   const [expenseDropdownOpen, setExpenseDropdownOpen] = useState(false);
@@ -47,6 +47,7 @@ const Header = () => {
       try {
         const checkuser = await Get(`checkUserType`);
         setUserRole(checkuser.role_name);
+        // console.log()
       } catch (error) {
         console.error(error);
       }
@@ -82,7 +83,7 @@ const Header = () => {
       const response = await Post("selectStore", { store_id: storeId });
       navigate("/");
       setDropdownVisible(false);
-      setAvatarDropdownOpen(false);
+      setsettingsDropOpen(false);
     } catch (error) {
       console.error("Error selecting store:", error);
     } finally {
@@ -133,7 +134,7 @@ const Header = () => {
     }
   };
   const closeDropdowns = () => {
-    setAvatarDropdownOpen(false);
+    setsettingsDropOpen(false);
     setSettingsDropdownOpen(false);
     setGeneralDropdownOpen(false);
     setExpenseDropdownOpen(false);
@@ -577,25 +578,25 @@ const Header = () => {
       src={shopeKeeper}
       className="avatar"
       alt="User Avatar"
-      onClick={() => {
-        closeDropdowns();
-        setAvatarDropdownOpen(!avatarDropdownOpen);
-      }}
+     
     />
-   
+    {/* Display role_name here */}
+    <div className="user-role">
+      {userRole && <span>{userRole}</span>}
+    </div>
     {/* Settings Icon Button */}
     <button
       className="settings-button"
       onClick={(e) => {
         e.stopPropagation(); // Prevent the click from triggering the avatar's click
         closeDropdowns();
-        setAvatarDropdownOpen(!avatarDropdownOpen); // Toggle dropdown
+        setsettingsDropOpen(!settingsDropOpen); // Toggle dropdown
       }}
     >
-     
+      {/* Optional: Add an icon here */}
     </button>
-    
-    {avatarDropdownOpen && (
+
+    {settingsDropOpen  && (
       <ul className="nav-menu-drop">
         <li>
           <Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}>
@@ -658,6 +659,7 @@ const Header = () => {
 </div>
 
 
+
     </header>
   );
 };