From eedab5788c8ca431a4a497179ab53306bfa2a9c1 Mon Sep 17 00:00:00 2001
From: sonali <sonali.humbingo@gmail.com>
Date: Thu, 26 Dec 2024 18:46:47 +0530
Subject: [PATCH] " new changes in dashboard "

---
 {src/assets/Image => public}/Background.png   | Bin
 public/index.html                             |  13 +-
 src/assets/Image/bank.png                     | Bin 0 -> 525 bytes
 src/assets/Image/vendor Icon.png              | Bin 0 -> 484 bytes
 src/assets/css/App.css                        |  40 ++-
 .../Dashboard/Invoice/ATMDepositTable.js      |  78 +++--
 .../AppPAges/Dashboard/Invoice/AddInvoice.js  | 228 ++++++++------
 .../AppPAges/Dashboard/Invoice/AtmDeposit.js  |  24 +-
 .../AppPAges/Dashboard/Invoice/BankDeposit.js | 115 ++++---
 .../Dashboard/Invoice/BankDepositTable.js     | 193 +++++++-----
 .../AppPAges/Dashboard/Invoice/Invoice.css    |  59 +++-
 .../Dashboard/Invoice/InvoiceTable.js         | 297 +++++++++++-------
 .../AppPAges/Dashboard/Invoice/PayInvoice.js  | 152 ++++-----
 .../Dashboard/Invoice/PayInvoice_Table.js     | 175 ++++++++---
 .../AppPAges/ManageSettings/ManageSettings.js |  12 +-
 .../ManageSettings/ManageUserTable.js         | 292 ++++++++---------
 .../AppPAges/ManageSettings/ManageUsers.js    |   8 +-
 .../AppPAges/ManageSettings/ManageVendor.js   | 139 ++++----
 .../AppPAges/ManageSettings/ReusableModal.js  |   4 +-
 .../AppPAges/ManageSettings/SettingTable.js   | 120 +++----
 .../AppPAges/ManageSettings/Settings.css      |   5 +-
 .../ManageSettings/StoreInformation.js        |  25 +-
 src/components/common/Header.js               |   2 +-
 23 files changed, 1165 insertions(+), 816 deletions(-)
 rename {src/assets/Image => public}/Background.png (100%)
 create mode 100644 src/assets/Image/bank.png
 create mode 100644 src/assets/Image/vendor Icon.png

diff --git a/src/assets/Image/Background.png b/public/Background.png
similarity index 100%
rename from src/assets/Image/Background.png
rename to public/Background.png
diff --git a/public/index.html b/public/index.html
index 0517f45..68b065e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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-image: url('Background.png');
   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: 'Comfortaa', sans-serif;
+        font-family: "Comfortaa";
+
+        background-position: top;
+        background-repeat: no-repeat;
+        background-size: 100% auto;
 }
 
 
diff --git a/src/assets/Image/bank.png b/src/assets/Image/bank.png
new file mode 100644
index 0000000000000000000000000000000000000000..388a0624cc8182628c377306130930175ee68224
GIT binary patch
literal 525
zcmV+o0`mQdP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0isDnK~#7F?Up?+
z1W^=*U&L34LY7Xm3ZdIVL_<WP)`;zdXhlQ4@e@SoL_;Dp3V(q{A}R?9g+#U4U5ogP
z<vp1@+#PpzXEN(*=1rbt&zyVjIXiP^&H<vSNnu@eWQN=-=14s(X^fnbPY-8g9Dk@j
za$pGT<&gBFhDwk%^5zNjK-S5I`mOukl`nw^Y9>qM4(5M4qOBeESyLd(>a4($0-GY&
z@W0Jj!@g{V^>Ws<I=iBV$PubP=MR$9_9fM|YWt4Kus3KU$-pVFQh-BTF5tY1!exkk
zB^4{9Vj~q|bFE3q$0HA?YHdqm=G~&`B<--PM?C?r<h>u%>}N7hu9Tf7i}<N(xt*(I
zSJ}N}leB1OoR9?s)IEMbue9dhHu!fmf7;+LngUsCAn^GH*h~O%0&xOy0&xOi63AD%
zR*2~TmR~dKCOw)h&FEaSrO6DSycvoAMO!2OR?WVFVU*Jom?X0ZFt<gNB)bJ?Dk{?+
z>`g-ZZqNoebJ+@+fHRobkc{bFa0cN2p9yp174{`Db8f+PkT%%W6DfWHBQ*EL44`)(
P00000NkvXXu0mjfcIo0o

literal 0
HcmV?d00001

diff --git a/src/assets/Image/vendor Icon.png b/src/assets/Image/vendor Icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d6b266728a9d9d52feac1d2d9786ad6a035ea09
GIT binary patch
literal 484
zcmV<A0UQ2_P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0eMM8K~#7F&6mw9
zL{S*VpFtT)K8vN9HL@jtg0f*t$ww^w6UvU2Vq<A7Woe_7BC$~;O4*GlB3ujC^SVym
zH233t)%@zWxlQMp_dTcg+zaHVKnLkMt<ZqJ(+j#uhv9)1x<$WenBoR)g(D<%FC#GS
zF71W`wlzYPtFWX@KMjIEXen*s2Bfn<o1ssU&cT8+=vS*efdy5I;A+~!S*;FXP5_JG
z3e35KMesh%Ie-OS^cnj5`$9Wm$%;YnG8`b=v8E9!zb(Kav-B|~@QF_5T}=0%wb5xh
zPJ0k_<DMST9r}uTN2lU`Iz-!PW9+%KS?*~${kQZ64v<#Lu)jpUgY`{M=?t=GL?R=9
zi<r*pb2<u577-1B&{A1rDQD(yn*s-+O4<L3tk4qNR9dU@a#E-qhC>gb%HyQqF^{3j
zfq0dQDfnmp{{tB$*YIEQ6>W+K_aS;E^&KpqJiQXAS}kL+2>-}eNk=^R4bd&*n+HT!
aD}Df<%~J=w84Cme0000<MNUMnLSTYv@XWUW

literal 0
HcmV?d00001

diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index 7c10520..c43cd1d 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 */
 }
@@ -502,7 +511,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 */
@@ -511,6 +520,7 @@ body {
 .search-container {
   position: relative;
   flex: 3;
+  margin-left: 0px;
   max-width: 300px;
 }
 .search-container input {
@@ -725,6 +735,7 @@ body {
   margin: auto;
   background-color: white;
   width: 90%;
+
   /* Changed from 1600px to a percentage */
   max-width: 1600px;
   /* Maximum width for larger screens */
@@ -758,6 +769,7 @@ h3 {
 
 .expense-searchcontainerstart {
   width: 90%;
+ 
 }
 .custbtn {
   box-shadow: none;
@@ -815,13 +827,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 b8d8663..83e38ee 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",
+          margin: "10px",
         }}
       >
         {/* Invoice due this month */}
@@ -324,14 +324,23 @@ const ATMDepositTable = (props) => {
             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",
+            }}
+          >
             $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>
@@ -347,14 +356,23 @@ const ATMDepositTable = (props) => {
             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",
+            }}
+          >
+            $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>
@@ -370,14 +388,23 @@ const ATMDepositTable = (props) => {
             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",
+            }}
+          >
             $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 +415,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 +510,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 +537,7 @@ const ATMDepositTable = (props) => {
               style={{
                 fontSize: "14px",
                 display: "flex",
+                marginLeft:'6px',
                 alignItems: "center",
                 justifyContent: "center",
                 padding: "0",
@@ -548,7 +583,7 @@ const ATMDepositTable = (props) => {
                   strokeLinejoin="round"
                 />
               </svg>
-              &nbsp; Filter
+              &nbsp; 
             </button>
 
             <ul
@@ -659,7 +694,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
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js b/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
index a35b705..10c6f0f 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
@@ -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: "",
@@ -280,7 +280,7 @@ function AddInvoice() {
     },
     {
       row: 1,
-      column: "col-md-2",
+      column: "col-md-3",
       label: "Invoice Number",
       type: "invoice_no",
       name: "invoice_no",
@@ -288,7 +288,7 @@ function AddInvoice() {
     },
     {
       row: 2,
-      column: "col-md-3",
+      column: "col-md-2",
       label: "Amount",
       name: "amount",
       type: "prefix-input",
@@ -302,20 +302,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",
     },
@@ -353,8 +353,9 @@ function AddInvoice() {
 
   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) => {
@@ -450,7 +451,7 @@ function AddInvoice() {
               borderBottom: "1px solid #f4f4f4",
               paddingBottom: "16px",
               height: "50px",
-          
+
             }}
           >
             <div className="input-groups">
@@ -459,7 +460,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}
@@ -582,21 +583,35 @@ 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: '2px solid #ACB4AA',
+              padding: '5px 0px', // Add padding to give space on both sides
+              width: "fit-content",
+              borderRadius: '40px',
+            }}
+          >
+            <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
+                    backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
+                    padding: '5px 25px',
+                    borderRadius: '20px',
+                    margin: '0 10px', // Apply margin to both sides
                   }}
-                  onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })}
+                  onClick={() =>
+                    handlePaymentMethodChange({
+                      target: { name: field.name, value: option.value },
+                    })
+                  }
                 >
                   <label
                     className="form-check-label"
@@ -610,41 +625,50 @@ function AddInvoice() {
                 </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"
-              style={{
-                fontWeight: 'normal',
-                color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
-              }}
-            >
-              {option.label}
-            </label>
           </div>
-        ))}
-      </div>
-    )
-  );
+        );
+
+
+
+      case "payment-method-options":
+        return (
+          formData.pay_method_status === "pay_now" && (
+            <div className="d-flex align-items-center" style={{
+              border: '2px solid #ACB4AA',
+              padding: '5px 10px', // Add padding to give space on both sides
+              width: "fit-content",
+              borderRadius: '40px',
+              marginBottom:"20px"
+            }}>
+              {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 +683,46 @@ 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
@@ -729,15 +753,15 @@ function AddInvoice() {
             className={`btn ${activeButton === '/' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/')}
           >
-            Add Invoice
+            Add Bill/Invoice
           </button>
           <button
             className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/payInvoice')}
           >
-            Pay Invoice
+            Pay Bill/Invoice
           </button>
-         
+
           <button
             className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/atmDeposit')}
@@ -758,15 +782,24 @@ 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)}
@@ -780,10 +813,10 @@ function AddInvoice() {
 
             {/* 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"
@@ -799,6 +832,7 @@ function AddInvoice() {
                           .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Ensure only two decimal places
                           .slice(0, 12); // Limit input length
                       }}
+                      style={{marginLeft:"60px"}}
                     />
 
                   </div>
@@ -809,16 +843,16 @@ function AddInvoice() {
             )}
             <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>
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js b/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
index 51152f7..81212d5 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
@@ -153,13 +153,13 @@ function AtmDeposit() {
             className={`btn ${activeButton === '/' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/')}
           >
-            Add Invoice
+         Add Bill/Invoice
           </button>
           <button
             className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/payInvoice')}
           >
-            Pay Invoice
+           Pay Bill/Invoice
           </button>
          
           <button
@@ -189,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"
@@ -208,7 +213,7 @@ function AtmDeposit() {
                   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}
@@ -275,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>
@@ -293,10 +298,11 @@ function AtmDeposit() {
         </div>
       </div>
       <div
-        className="container mt-5"
+        className="invoice-table-container mt-5"
         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 2d2dcd5..a9305f1 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
@@ -156,42 +156,44 @@ function BankDeposit() {
         <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 === '/atmDeposit' ? 'active' : ''}`}
-            onClick={() => handleLinkClick('/atmDeposit')}
-          >
-            ATM Deposit
-          </button>
+                <div className="button-groups">
+                    <button
+                        className={`btn ${activeButton === '/' ? 'active' : ''}`}
+                        onClick={() => handleLinkClick('/')}
+                    >
+                       Add Bill/Invoice
+                    </button>
+                    <button
+                        className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
+                        onClick={() => handleLinkClick('/payInvoice')}
+                    >
+                      Pay Bill/Invoice
+                    </button>
 
-          <button
-            className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
-            onClick={() => handleLinkClick('/bankDeposit')}
-          >
-            Bank Deposit
-          </button>
-        </div>
-      </div>
+                    <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">
                 <div
                     className="container"
                     style={{
                         backgroundColor: "white",
                         boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
-                        borderRadius: "40px"
+                        borderRadius: "40px",
+
+
                     }}
                 >
                     <form onSubmit={handleSubmit}>
@@ -199,8 +201,12 @@ function BankDeposit() {
 
 
 
-                        <div className="col-md-12 row ">
-                            <div className=" col-md-4">
+                        <div className="col-md-12 row " style={{
+                            gap: "4%",
+                            paddingLeft: "2%", // Add equal padding
+                            // paddingRight: "%",
+                        }}>
+                            <div className=" col-md-3">
                                 <input
                                     type="date"
                                     className="form-control-borderless"
@@ -210,6 +216,29 @@ function BankDeposit() {
                                     required
                                 />
                             </div>
+
+
+                            <div className="mb-3 col-md-4">
+                                <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 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"
@@ -226,24 +255,6 @@ 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
@@ -330,16 +341,16 @@ function BankDeposit() {
                         </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 26f6744..587d914 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
@@ -309,92 +309,121 @@ 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: "20px",
-          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: "20px",
-          padding: "16px 24px",
           display: "flex",
-          flexDirection: "column",
+          gap: "50px",
           justifyContent: "center",
-          alignItems: "flex-start",
-          width: "400px",
-          textAlign: "left",
+          alignItems: "center",
+          margin: "10px",
         }}
       >
-        <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",
+            }}
+          >
+            $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: "20px",
-          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",
+            }}
+          >
+            $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",
+            }}
+          >
+            $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 +518,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 +539,7 @@ const BankDepositTable = (props) => {
               style={{
                 fontSize: "14px",
                 display: "flex",
+                marginLeft:'6px',
                 alignItems: "center",
                 justifyContent: "center",
                 padding: "0",
@@ -554,7 +585,7 @@ const BankDepositTable = (props) => {
                   strokeLinejoin="round"
                 />
               </svg>
-              &nbsp; Filter
+              &nbsp; 
             </button>
 
             <ul
@@ -666,7 +697,11 @@ 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
+          }}>
             {["date", "bank_name", "bank_deposite_type", "amount", "Transaction Type","actions"].map(
               (header, index) => (
                 <th
@@ -677,7 +712,7 @@ const BankDepositTable = (props) => {
                     cursor: "pointer",
                      backgroundColor:'#282e26',
                       color:'#ffffff',
-                    textAlign: "start",
+                      textAlign: "start",
                     alignContent: "center",
                   }}
                 >
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css b/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
index c78bb64..2191ce4 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,21 +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 20px; /* Equal padding on left and right sides */
-  }
-  
-  /* Active button styles */
-  .btn.active {
+    padding: 0 20px; /* Equal padding on left and right sides */
+}
+
+/* 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;
@@ -98,15 +119,19 @@
 
 .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 {
@@ -149,7 +174,13 @@
 }
 
 .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 {
diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js b/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
index 321b636..623139c 100644
--- a/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
+++ b/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
@@ -284,86 +284,115 @@ 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: "20px",
-          padding: "16px 24px",
           display: "flex",
-          flexDirection: "column",
+          gap: "50px",
           justifyContent: "center",
-          alignItems: "flex-start",
-          width: "400px",
-          textAlign: "left",
+          alignItems: "center",
+          margin: "10px",
         }}
       >
-        <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",
+            }}
+          >
+            $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",
+            }}
+          >
+            $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",
+            }}
+          >
+            $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: "20px",
-          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: "20px",
-          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 +402,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 +504,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 +522,7 @@ const InvoiceTable = ({ reloadData }) => {
               aria-expanded="false"
               style={{
                 fontSize: "14px",
+                marginLeft:'6px',
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -505,7 +533,7 @@ const InvoiceTable = ({ reloadData }) => {
               }}
             >
               <FilterButton />
-              &nbsp; Filter
+              &nbsp; 
             </button>
 
             <ul
@@ -624,7 +652,14 @@ const InvoiceTable = ({ reloadData }) => {
         <div className="">
           <table className="table table-borderless table-responsive">
             <thead>
-              <tr>
+              <tr
+               style={{
+                backgroundColor: '#282e26',
+                color: '#ffffff',
+                height: '30px', // Add height for row spacing
+                
+               }}
+               >
                 {[
                   "date",
                   "vendor Name",
@@ -641,7 +676,7 @@ const InvoiceTable = ({ reloadData }) => {
                       paddingLeft: index === 0 ? "30px" : "0",
                       cursor: "pointer",
                      
-                      textAlign: "start",
+                      textAlign: "center",
                       alignContent: "center",
                       backgroundColor:'#282e26',
                       color:'#ffffff'
@@ -676,18 +711,25 @@ 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={{
+    display: "flex", // Use flexbox for centering
+    justifyContent: "center", // Center content horizontally
+    alignItems: "center", // Center content vertically
+    height: "100%", // Ensure the cell takes full height of the row
+  }}
+>
+  <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
@@ -769,44 +811,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 042639a..e2e3224 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,
@@ -301,20 +301,20 @@ function PayInvoice() {
   return (
     <div className="dashboard-container">
       <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
+            Pay Bill/Invoice
           </button>
-         
+
           <button
             className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
             onClick={() => handleLinkClick('/atmDeposit')}
@@ -344,8 +344,15 @@ 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: "10%",
+                paddingLeft: "5%", // Add equal padding
+                // paddingRight: "%",
+              }}
+            >
+              <div className="mb-3 col-md-3">
                 <input
                   type="date"
                   className="form-control-borderless"
@@ -363,10 +370,10 @@ function PayInvoice() {
                   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
@@ -395,25 +402,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: "30px", marginLeft: "4%" }} >
+              <div className="col-md-3 " >
                 <input
                   name="amount"
                   type="text"
@@ -424,7 +417,7 @@ function PayInvoice() {
                   style={{ backgroundColor: "#fafafa" }}
                 />
               </div>
-              <div className="col-md-2">
+              <div className="col-md-2" >
                 <input
 
                   type="text"
@@ -483,8 +476,8 @@ function PayInvoice() {
 
 
 
-            
-                {/* <div className="col-md-3 mt-4">
+
+              {/* <div className="col-md-3 mt-4">
                 <input
                   name="after_discount"
                   type="text"
@@ -497,48 +490,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: "5%", marginTop: "30px" }}>
+              <div
+                className="d-flex align-items-center"
+                style={{
+                  border: '2px solid #ACB4AA',
+                  padding: '5px 10px', // Add padding to give space on both sides
+                  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-3" style={{ marginLeft: "55px" }} >
 
               {formData.pay_method === "cheque" && (
                 <div className="row "> {/* Use row class for Bootstrap grid */}
@@ -573,16 +568,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">
@@ -627,16 +613,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 0fb2bba..b0c4aca 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",
+          margin: "10px",
         }}
       >
         {/* Invoice due this month */}
@@ -332,14 +334,23 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
             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",
+            }}
+          >
             $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>
@@ -355,14 +366,23 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
             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",
+            }}
+          >
+            $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>
@@ -378,27 +398,35 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
             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",
+            }}
+          >
             $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 +523,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 +544,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
               style={{
                 fontSize: "14px",
                 display: "flex",
+                marginLeft:'6px',
                 alignItems: "center",
                 justifyContent: "center",
                 padding: "0",
@@ -561,7 +590,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                   strokeLinejoin="round"
                 />
               </svg>
-              &nbsp; Filter
+              &nbsp; 
             </button>
 
             <ul
@@ -649,7 +678,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 +702,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
+            textAlign: 'center', // Align text to the center horizontally
+      
+           
+          }}
+          
+       
+          >
             {[
               "date",
               "vendor_department_name",
               "amount",
               "remaining_amount",
-              "updated date",
+              // "updated date",
               "payment_method",
               "status",
               "actions",
@@ -692,8 +732,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                   cursor: "pointer",
                   backgroundColor: '#282e26',
                   color: '#ffffff',
-                  textAlign: "start",
+                  textAlign: "center",
                   alignContent: "center",
+                // Add a border for separation
                 }}
               >
                 {header
@@ -752,9 +793,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 +809,14 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
                         .join(" ")}
                   </span>
                 </td>
-                <td onClick={() => handleCellClick(invoice, "status")}>
+                <td onClick={() => handleCellClick(invoice, "status")}
+                  style={{
+                    display: "flex", // Use flexbox for centering
+                    justifyContent: "center", // Center content horizontally
+                    alignItems: "center", // Center content vertically
+                    height: "100%", // Ensure the cell takes full height of the row
+                  }}
+                  >
                   <span style={getStatusStyle(invoice.status)}>
                     {invoice.status &&
                       invoice.status
@@ -866,43 +914,74 @@ 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/ManageSettings/ManageSettings.js b/src/components/Pages/AppPAges/ManageSettings/ManageSettings.js
index 8b78741..18fbb06 100644
--- a/src/components/Pages/AppPAges/ManageSettings/ManageSettings.js
+++ b/src/components/Pages/AppPAges/ManageSettings/ManageSettings.js
@@ -10,6 +10,8 @@ import { toast, ToastContainer } from "react-toastify";
 import AuthContext from "../../../../utils/secure-route/AuthContext";
 import useApi from "../../../../utils/api-manager/Helper/useApi";
 import CustomSwitch from "./CustomSwitch";
+import BankIcon from '../../../../assets/Image/bank.png'
+
 const ManageSettings = () => {
   let { user } = useContext(AuthContext);
   const storeId = user.store;
@@ -472,10 +474,16 @@ const ManageSettings = () => {
         <div className="header-row">
           <div className="setting-title">Manage Bank</div>
           <button
-            className="bank-add-button"
+            className="btn cus d-flex align-items-center justify-content-between"
             onClick={() => handleShow("bank")}
           >
-            + Add Bank
+             Add Bank
+             <img
+                src={BankIcon}
+                alt="Bank Icon"
+                style={{ width: "20px", height: "20px" }}
+              />
+    
           </button>
         </div>
         <div className="second-container">
diff --git a/src/components/Pages/AppPAges/ManageSettings/ManageUserTable.js b/src/components/Pages/AppPAges/ManageSettings/ManageUserTable.js
index c3d6734..a808697 100644
--- a/src/components/Pages/AppPAges/ManageSettings/ManageUserTable.js
+++ b/src/components/Pages/AppPAges/ManageSettings/ManageUserTable.js
@@ -103,15 +103,15 @@ const ManageUserTable = ({
 
   const statusStyles = {
     enable: {
-      backgroundColor: "#6CBE1C", // Green background for Enable
+      backgroundColor: "#198F51", // Green background for Enable
       color: "#fff",
-      borderRadius: "30px",
+      borderRadius: "10px",
       padding: "5px 10px",
     },
     disable: {
-      backgroundColor: "#6c757d", // Red background for Disable
-      color: "#000",
-      borderRadius: "30px",
+      backgroundColor: "#FF2024", // Red background for Disable
+      color: "#fff",
+      borderRadius: "10px",
       padding: "5px 10px",
     },
 
@@ -168,18 +168,18 @@ const ManageUserTable = ({
     borderRadius: "4px",
     zIndex: "1",
   };
- // Calculate the total net sales from the data
-//  const totalNetSales = data.reduce((acc, item) => {
-//   const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
-//   return acc + amount;
-// }, 0).toFixed(2); //
+  // Calculate the total net sales from the data
+  //  const totalNetSales = data.reduce((acc, item) => {
+  //   const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
+  //   return acc + amount;
+  // }, 0).toFixed(2); //
   return (
     <div className="data-table-container">
       <div className="d-flex mb-3">
         <div className="expense-searchcontainerstart d-flex">
           <div className="search-container">
             <input
-              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)" }}
               type="text"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
@@ -252,7 +252,7 @@ const ManageUserTable = ({
               Export To Excel
             </button>
           )}
-            {showFilter && (
+          {showFilter && (
             <div className="filter-button-container" style={{ position: "relative" }}>
               <button className="btn custbtn2" type="button" onClick={handleFilterClick}>
                 <svg
@@ -277,64 +277,70 @@ const ManageUserTable = ({
             </div>
           )}
         </div>
-       
-        <div
-  className="expense-search d-flex align-items-center"
-  style={{
-    display: "flex",
-    alignItems: "center",
-    backgroundColor: "#FFFFFF",
-    border: "1px solid #DBDBDB",
-    borderRadius: "10px",
-    cursor: "pointer",
-    width: "200px",
-   
-  }}
->
-  <span
-    style={{
-      fontFamily: "'Comfortaa'",
-      fontStyle: "normal",
-      fontWeight: "400",
-      fontSize: "14px", // Compact text
-      color: "#000000",
-      marginLeft:"10px"
-    }}
-  >
-    Show Rows:
-  </span>
-  <select
-    name="option"
-    id="pageSelect"
-    className="selectoptions"
-    style={{
-      backgroundColor: "#282E26", // Match background color
-      color: "#FFFFFF", // White text color
-      fontFamily: "'Comfortaa'",
-      fontStyle: "normal",
-      fontWeight: "700",
-      fontSize: "14px",
-      lineHeight: "16px",
-      padding: "4px 10px", // Adjust padding for the dropdown
-      border: "none", // No border
-      borderRadius: "0 10px 10px 0", // Rounded on the right side only
-      cursor: "pointer",
-      marginLeft: "auto", // Push to the right
-    }}
-    value={rowsPerPage}
-    onChange={(e) => {
-      setRowsPerPage(Number(e.target.value));
-      setCurrentPage(1); // Reset to the first page on change
-    }}
-  >
-    <option value={5}>5</option>
-    <option value={10}>10</option>
-    <option value={15}>15</option>
-    <option value={20}>20</option>
-  </select>
-</div>
 
-          
+        <div style={{ marginRight: "68%" }}>
+
+          <div
+            className="expense-search d-flex align-items-center"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              backgroundColor: "#FFFFFF",
+              border: "1px solid #DBDBDB",
+              borderRadius: "10px",
+              cursor: "pointer",
+              width: "180px",
+              height: "40px"
+
+            }}
+          >
+            <span
+              style={{
+                fontFamily: "'Comfortaa'",
+                fontStyle: "normal",
+                fontWeight: "800",
+                fontSize: "14px", // Compact text
+                color: "#000000",
+                marginLeft: "18px",
+
+              }}
+            >
+              Show Rows:
+            </span>
+            <select
+              name="option"
+              id="pageSelect"
+              className="selectoptions"
+              style={{
+                backgroundColor: "#282E26", // Match background color
+                color: "#FFFFFF", // White text color
+                fontFamily: "'Comfortaa'",
+                fontStyle: "normal",
+                fontWeight: "700",
+                fontSize: "14px",
+                lineHeight: "16px",
+                padding: "4px 10px", // Adjust padding for the dropdown
+                border: "none", // No border
+                borderRadius: "0 10px 10px 0", // Rounded on the right side only
+                cursor: "pointer",
+                height: "40px",
+                marginLeft: "auto", // Push to the right
+              }}
+              value={rowsPerPage}
+              onChange={(e) => {
+                setRowsPerPage(Number(e.target.value));
+                setCurrentPage(1); // Reset to the first page on change
+              }}
+            >
+              <option value={5}>5</option>
+              <option value={10}>10</option>
+              <option value={15}>15</option>
+              <option value={20}>20</option>
+            </select>
+          </div>
+        </div>
+
+
 
 
 
@@ -382,81 +388,81 @@ const ManageUserTable = ({
           </tr>
         </thead>
         <tbody className="table-body">
-  {sortedDisplayedData.length === 0 ? (
-    <tr>
-      <td colSpan={columns.length + (showAction ? 2 : 1)} 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>
-  ) : (
-    sortedDisplayedData.map((item) => (
-      <tr key={item.id || item.index}>
-        <td>
-          {(currentPage - 1) * rowsPerPage + sortedDisplayedData.indexOf(item) + 1}
-        </td>
-        {columns.map((col, colIndex) => (
-          <td key={colIndex}>
+          {sortedDisplayedData.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length + (showAction ? 2 : 1)} 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>
+          ) : (
+            sortedDisplayedData.map((item) => (
+              <tr key={item.id || item.index}>
+                <td>
+                  {(currentPage - 1) * rowsPerPage + sortedDisplayedData.indexOf(item) + 1}
+                </td>
+                {columns.map((col, colIndex) => (
+                  <td key={colIndex}>
 
-             {col.field === "is_active" ? (
-             <div
-             style={{
-               ...item.is_active === false ? statusStyles.disable : statusStyles.enable,
-               display: 'flex',
-               justifyContent: 'center',
-               alignItems: 'center',
-               height: '100%',  // Make sure the height of the div is sufficient
-             }}
-           >
-             {item.is_active === false ? "Disable" : "Enable"}
-           </div>
-            ) : col.field === "joining_date" ? (
-              // Format the 'joining_date' in 'mm-dd-yyyy' format
-              new Date(item.joining_date).toLocaleDateString("en-US")
-            ) : item[col.field] !== undefined && item[col.field] !== null ? (
-              typeof item[col.field] === "function" ? item[col.field]() : item[col.field]
-            ) : (
-              "-"
-            )}
-          </td>
-        ))}
-        {showAction && (
-          <td className="action-column">
-            <button className="action-button" onClick={() => onEdit(item)}>
-              {/* Edit icon */}
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M13.8067 4.695C14.0667 4.435 14.0667 4.00167 13.8067 3.755L12.2467 2.195C12 1.935 11.5667 1.935 11.3067 2.195L10.08 3.415L12.58 5.915M2 11.5017V14.0017H4.5L11.8733 6.62167L9.37333 4.12167L2 11.5017Z"
-                  fill="#002300"
-                />
-              </svg>
-            </button>
-            <button className="action-button" onClick={() => onDelete(item.id)}>
-              {/* Delete icon */}
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.00016 12.6667C4.00016 13.4 4.60016 14 5.3335 14H10.6668C11.4002 14 12.0002 13.4 12.0002 12.6667V6C12.0002 5.26667 11.4002 4.66667 10.6668 4.66667H5.3335C4.60016 4.66667 4.00016 5.26667 4.00016 6V12.6667ZM12.0002 2.66667H10.3335L9.86016 2.19333C9.74016 2.07333 9.56683 2 9.3935 2H6.60683C6.4335 2 6.26016 2.07333 6.14016 2.19333L5.66683 2.66667H4.00016C3.6335 2.66667 3.3335 2.96667 3.3335 3.33333C3.3335 3.7 3.6335 4 4.00016 4H12.0002C12.3668 4 12.6668 3.7 12.6668 3.33333C12.6668 2.96667 12.3668 2.66667 12.0002 2.66667Z"
-                  fill="#002300"
-                />
-              </svg>
-            </button>
-          </td>
-        )}
-      </tr>
-    ))
-  )}
-</tbody>
+                    {col.field === "is_active" ? (
+                      <div
+                        style={{
+                          ...item.is_active === false ? statusStyles.disable : statusStyles.enable,
+                          display: 'flex',
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                          height: '100%',  // Make sure the height of the div is sufficient
+                        }}
+                      >
+                        {item.is_active === false ? "Disabled" : "Enabled"}
+                      </div>
+                    ) : col.field === "joining_date" ? (
+                      // Format the 'joining_date' in 'mm-dd-yyyy' format
+                      new Date(item.joining_date).toLocaleDateString("en-US")
+                    ) : item[col.field] !== undefined && item[col.field] !== null ? (
+                      typeof item[col.field] === "function" ? item[col.field]() : item[col.field]
+                    ) : (
+                      "-"
+                    )}
+                  </td>
+                ))}
+                {showAction && (
+                  <td className="action-column">
+                    <button className="action-button" onClick={() => onEdit(item)}>
+                      {/* Edit icon */}
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M13.8067 4.695C14.0667 4.435 14.0667 4.00167 13.8067 3.755L12.2467 2.195C12 1.935 11.5667 1.935 11.3067 2.195L10.08 3.415L12.58 5.915M2 11.5017V14.0017H4.5L11.8733 6.62167L9.37333 4.12167L2 11.5017Z"
+                          fill="#002300"
+                        />
+                      </svg>
+                    </button>
+                    <button className="action-button" onClick={() => onDelete(item.id)}>
+                      {/* Delete icon */}
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M4.00016 12.6667C4.00016 13.4 4.60016 14 5.3335 14H10.6668C11.4002 14 12.0002 13.4 12.0002 12.6667V6C12.0002 5.26667 11.4002 4.66667 10.6668 4.66667H5.3335C4.60016 4.66667 4.00016 5.26667 4.00016 6V12.6667ZM12.0002 2.66667H10.3335L9.86016 2.19333C9.74016 2.07333 9.56683 2 9.3935 2H6.60683C6.4335 2 6.26016 2.07333 6.14016 2.19333L5.66683 2.66667H4.00016C3.6335 2.66667 3.3335 2.96667 3.3335 3.33333C3.3335 3.7 3.6335 4 4.00016 4H12.0002C12.3668 4 12.6668 3.7 12.6668 3.33333C12.6668 2.96667 12.3668 2.66667 12.0002 2.66667Z"
+                          fill="#002300"
+                        />
+                      </svg>
+                    </button>
+                  </td>
+                )}
+              </tr>
+            ))
+          )}
+        </tbody>
 
       </table>
       {showFooter && (
diff --git a/src/components/Pages/AppPAges/ManageSettings/ManageUsers.js b/src/components/Pages/AppPAges/ManageSettings/ManageUsers.js
index 8e47476..a460919 100644
--- a/src/components/Pages/AppPAges/ManageSettings/ManageUsers.js
+++ b/src/components/Pages/AppPAges/ManageSettings/ManageUsers.js
@@ -394,8 +394,8 @@ function ManageUsers() {
         <div className="header-row">
           <div className="setting-title">Manage Users</div>
           <div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
-           
-           
+
+
             <button
               style={{
                 backgroundColor: "#4A5546",
@@ -435,7 +435,7 @@ function ManageUsers() {
               }}
               onClick={() => handleShowStoreModal()} // Open modal for adding a user
             >
-            Add New Store
+              Add New Store
               <img
                 src={storeIcon}
                 alt="store Icon"
@@ -446,7 +446,7 @@ function ManageUsers() {
               className="btn cus d-flex align-items-center"
               onClick={() => handleShowUserModal()} // Open modal for adding a user
             >
-          Add New User   
+              Add New User
               <img
                 src={userIcon}
                 alt="user Icon"
diff --git a/src/components/Pages/AppPAges/ManageSettings/ManageVendor.js b/src/components/Pages/AppPAges/ManageSettings/ManageVendor.js
index 47572a0..a848848 100644
--- a/src/components/Pages/AppPAges/ManageSettings/ManageVendor.js
+++ b/src/components/Pages/AppPAges/ManageSettings/ManageVendor.js
@@ -2,10 +2,12 @@
 import React, { useState, useEffect, useContext } from "react";
 import ReusableModal from "./ReusableModal";
 import "./Settings.css";
+import vendorIcon from '../../../../assets/Image/vendor Icon.png'
+
 
 import AuthContext from "../../../../utils/secure-route/AuthContext";
 import useApi from "../../../../utils/api-manager/Helper/useApi";
-import { toast , ToastContainer} from "react-toastify";
+import { toast, ToastContainer } from "react-toastify";
 import SettingTable from "./SettingTable";
 import Swal from "sweetalert2";
 
@@ -21,8 +23,8 @@ function ManageVendor() {
   const [serviceData, setServiceData] = useState([]);
   const [editVendorId, setEditVendorId] = useState(null);
 
-  
-  const { Get, Post, Put, Delete , Patch } = useApi();
+
+  const { Get, Post, Put, Delete, Patch } = useApi();
 
   useEffect(() => {
     const fetchData = async () => {
@@ -63,17 +65,17 @@ function ManageVendor() {
     try {
       // Fetch the current list of vendors
       const existingVendors = await Get("vendorDepartmentData");
-  
+
       // Check if a vendor with the same name already exists
       const isDuplicate = existingVendors.some(
         (vendor) => vendor.name.toLowerCase() === vendorName.toLowerCase() && vendor.id !== editVendorId
       );
-  
+
       if (isDuplicate) {
         toast.error("Vendor with the same name already exists!");
         return; // Exit the function early
       }
-  
+
       const payload = {
         name: vendorName,
         type: vendorType,
@@ -82,7 +84,7 @@ function ManageVendor() {
         store: storeId,
         is_deleted: false,
       };
-  
+
       if (editVendorId) {
         const updatedVendor = await Put("vendorDepartmentData", editVendorId, payload);
         // Assuming `updatedVendor` contains the updated vendor data
@@ -95,14 +97,14 @@ function ManageVendor() {
         setVendors((prev) => [...prev, response.data]);
         toast.success("Vendor added successfully!");
       }
-  
+
       handleClose();
     } catch (error) {
       console.error("Error saving vendor:", error);
       toast.error("Error saving vendor!");
     }
   };
-  
+
   const filteredVendors = vendors.filter(vendor => !vendor.is_deleted);
 
   // const handleDelete = async (id) => {
@@ -129,10 +131,10 @@ function ManageVendor() {
   // };
 
 
-// is deleted is true with condition (backend side false )//
+  // is deleted is true with condition (backend side false )//
   const handleDelete = async (id) => {
-    console.log("Vendor ID to delete:", id); 
-    
+    console.log("Vendor ID to delete:", id);
+
     const result = await Swal.fire({
       title: "Are you sure?",
       text: "You won't be able to revert this!",
@@ -142,12 +144,12 @@ function ManageVendor() {
       cancelButtonColor: "#3085d6",
       confirmButtonText: "Yes, delete it!",
     });
-  
+
     // Check if the user clicked the confirm button
-    if (!result.isConfirmed) {   
-      return; 
+    if (!result.isConfirmed) {
+      return;
     }
-  
+
     try {
       const payload = { is_deleted: true };
       const response = await Patch("vendorDepartmentData", id, payload);
@@ -159,8 +161,8 @@ function ManageVendor() {
       toast.error("Error deleting vendor!");
     }
   };
-  
- 
+
+
 
   const handleDepartmentChange = (event) => {
     const value = event.target.value;
@@ -184,16 +186,31 @@ function ManageVendor() {
   return (
     <>
       <div className="due-days">
-        <ToastContainer/>
+        <ToastContainer />
 
 
         <div className="header-row">
           <div className="setting-title">Manage Vendor</div>
           <div className="btn-position">
-            <button className="btn cus d-flex align-items-center" style={{marginBottom:"10px"}} onClick={handleShow}>
-               Add Vendor
+            <button
+              className="btn cus d-flex align-items-center justify-content-between"
+              style={{
+                marginBottom: "10px",
+                width: "170px",
+                padding: "8px",
+                textAlign: "left"
+              }}
+              onClick={handleShow}
+            >
+              <span>Add Vendor</span>
+              <img
+                src={vendorIcon}
+                alt="Vendor Icon"
+                style={{ width: "20px", height: "20px" }}
+              />
             </button>
           </div>
+
         </div>
         <SettingTable
           showFooter={true}
@@ -232,11 +249,12 @@ function ManageVendor() {
                 placeholder="Vendor Name"
                 value={vendorName}
                 onChange={(e) => setVendorName(e.target.value)}
-                style={{ width: "400px", marginRight: "10px", height: "44px" ,   backgroundColor: "#ffffff",
+                style={{
+                  width: "400px", marginRight: "10px", height: "44px", backgroundColor: "#ffffff",
                   border: "none", // Remove all borders
                   borderBottom: "2px solid #ccc", // Set bottom border
                   borderRadius: "0px", // Remove border radius
-                   }}
+                }}
               />
               <select
                 id="vendorType"
@@ -247,11 +265,12 @@ function ManageVendor() {
                   setVendorDepartments([]); // Reset departments when type changes
                   setOpeningBalance("");
                 }}
-                style={{ width: "400px", marginRight: "10px", height: "44px" ,   backgroundColor: "#ffffff",
+                style={{
+                  width: "400px", marginRight: "10px", height: "44px", backgroundColor: "#ffffff",
                   border: "none", // Remove all borders
                   borderBottom: "2px solid #ccc", // Set bottom border
                   borderRadius: "0px", // Remove border radius
-                   }}
+                }}
               >
                 <option value="">Vendor Type</option>
                 <option value="purchase">Purchase</option>
@@ -280,40 +299,40 @@ function ManageVendor() {
                   })}
                 </div>
                 <select
-  id="vendorDepartment"
-  className="input-field "
-  onChange={handleDepartmentChange}
-  style={{
-    width: "400px",
-    marginRight: "10px",
-    height: "44px",
-    border: "none", // Remove all borders
-    borderBottom: "2px solid #ccc", // Set bottom border
-    borderRadius: "0px", // Remove border radius
-    marginLeft:"45px"
-    
-  }}
->
-  <option value="">
-    {vendorType === "purchase"
-      ? "Select Vendor Department"
-      : "Select Expense Type"}
-  </option>
-  {(vendorType === "purchase"
-    ? departmentOptions
-    : expenseTypeOptions
-  ).length === 0 ? (
-    <option value="" disabled>No Vendor / Department found</option> // This is the new option
-  ) : (
-    (vendorType === "purchase" ? departmentOptions : expenseTypeOptions).map(
-      (service) => (
-        <option key={service.id} value={service.id}>
-          {service.title}
-        </option>
-      )
-    )
-  )}
-</select>
+                  id="vendorDepartment"
+                  className="input-field "
+                  onChange={handleDepartmentChange}
+                  style={{
+                    width: "400px",
+                    marginRight: "10px",
+                    height: "44px",
+                    border: "none", // Remove all borders
+                    borderBottom: "2px solid #ccc", // Set bottom border
+                    borderRadius: "0px", // Remove border radius
+                    marginLeft: "45px"
+
+                  }}
+                >
+                  <option value="">
+                    {vendorType === "purchase"
+                      ? "Select Vendor Department"
+                      : "Select Expense Type"}
+                  </option>
+                  {(vendorType === "purchase"
+                    ? departmentOptions
+                    : expenseTypeOptions
+                  ).length === 0 ? (
+                    <option value="" disabled>No Vendor / Department found</option> // This is the new option
+                  ) : (
+                    (vendorType === "purchase" ? departmentOptions : expenseTypeOptions).map(
+                      (service) => (
+                        <option key={service.id} value={service.id}>
+                          {service.title}
+                        </option>
+                      )
+                    )
+                  )}
+                </select>
 
                 {vendorType === "purchase" && (
                   <input
@@ -348,7 +367,7 @@ function ManageVendor() {
                   cursor: "pointer",
                   width: "181px",
                   height: "45px",
-                 
+
                   fontSize: "18px",
                 }}
               >
diff --git a/src/components/Pages/AppPAges/ManageSettings/ReusableModal.js b/src/components/Pages/AppPAges/ManageSettings/ReusableModal.js
index 95cd9d3..81792a3 100644
--- a/src/components/Pages/AppPAges/ManageSettings/ReusableModal.js
+++ b/src/components/Pages/AppPAges/ManageSettings/ReusableModal.js
@@ -70,8 +70,8 @@ const ReusableModal = ({
 
 
   const titleStyle = {
-    fontFamily: "'Manrope', sans-serif",
-    fontWeight: "600",
+    fontFamily: "'Comfortaa', sans-serif",
+    fontWeight: "300",
     fontSize: "20px",
     color: "#002300",
     margin: 0,
diff --git a/src/components/Pages/AppPAges/ManageSettings/SettingTable.js b/src/components/Pages/AppPAges/ManageSettings/SettingTable.js
index f0dfcad..71f5c67 100644
--- a/src/components/Pages/AppPAges/ManageSettings/SettingTable.js
+++ b/src/components/Pages/AppPAges/ManageSettings/SettingTable.js
@@ -200,7 +200,7 @@ const SettingTable = ({
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               placeholder="Search"
-              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)" }}
             />
             <svg
               className="search-container-icon"
@@ -294,65 +294,67 @@ const SettingTable = ({
             </div>
           )}
         </div>
-        <div style={{ marginRight: "1%" }}>
-        <div
-  className="expense-search d-flex align-items-center"
-  style={{
-    display: "flex",
-    alignItems: "center",
-    backgroundColor: "#FFFFFF",
-    border: "1px solid #DBDBDB",
-    borderRadius: "10px",
-    cursor: "pointer",
-    width: "200px",
-  
-   
-  }}
->
-  <span
-    style={{
-      fontFamily: "'Comfortaa'",
-      fontStyle: "normal",
-      fontWeight: "400",
-      fontSize: "14px", // Compact text
-      color: "#000000",
-      marginLeft:"10px"
-    }}
-  >
-    Show Rows:
-  </span>
-  <select
-    name="option"
-    id="pageSelect"
-    className="selectoptions"
-    style={{
-      backgroundColor: "#282E26", // Match background color
-      color: "#FFFFFF", // White text color
-      fontFamily: "'Comfortaa'",
-      fontStyle: "normal",
-      fontWeight: "700",
-      fontSize: "14px",
-      lineHeight: "16px",
-      padding: "2px 10px", // Adjust padding for the dropdown
-      border: "none", // No border
-      borderRadius: "0 10px 10px 0", // Rounded on the right side only
-      cursor: "pointer",
-      marginLeft: "auto", // Push to the right
-    }}
-    value={rowsPerPage}
-    onChange={(e) => {
-      setRowsPerPage(Number(e.target.value));
-      setCurrentPage(1); // Reset to the first page on change
-    }}
-  >
-    <option value={5}>5</option>
-    <option value={10}>10</option>
-    <option value={15}>15</option>
-    <option value={20}>20</option>
-  </select>
-</div>
+        <div style={{ marginRight: "68%" }}>
 
-</div>
+          <div
+            className="expense-search d-flex align-items-center"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              backgroundColor: "#FFFFFF",
+              border: "1px solid #DBDBDB",
+              borderRadius: "10px",
+              cursor: "pointer",
+              width: "180px",
+              height: "40px"
+
+            }}
+          >
+            <span
+              style={{
+                fontFamily: "'Comfortaa'",
+                fontStyle: "normal",
+                fontWeight: "800",
+                fontSize: "14px", // Compact text
+                color: "#000000",
+                marginLeft: "18px",
+
+              }}
+            >
+              Show Rows:
+            </span>
+            <select
+              name="option"
+              id="pageSelect"
+              className="selectoptions"
+              style={{
+                backgroundColor: "#282E26", // Match background color
+                color: "#FFFFFF", // White text color
+                fontFamily: "'Comfortaa'",
+                fontStyle: "normal",
+                fontWeight: "700",
+                fontSize: "14px",
+                lineHeight: "16px",
+                padding: "4px 10px", // Adjust padding for the dropdown
+                border: "none", // No border
+                borderRadius: "0 10px 10px 0", // Rounded on the right side only
+                cursor: "pointer",
+                height: "40px",
+                marginLeft: "auto", // Push to the right
+              }}
+              value={rowsPerPage}
+              onChange={(e) => {
+                setRowsPerPage(Number(e.target.value));
+                setCurrentPage(1); // Reset to the first page on change
+              }}
+            >
+              <option value={5}>5</option>
+              <option value={10}>10</option>
+              <option value={15}>15</option>
+              <option value={20}>20</option>
+            </select>
+          </div>
+        </div>
       </div>
       
       <table className="data-table custom-table" style={{borderRadius:"none"}} >
diff --git a/src/components/Pages/AppPAges/ManageSettings/Settings.css b/src/components/Pages/AppPAges/ManageSettings/Settings.css
index 9103704..e125524 100644
--- a/src/components/Pages/AppPAges/ManageSettings/Settings.css
+++ b/src/components/Pages/AppPAges/ManageSettings/Settings.css
@@ -441,8 +441,8 @@ border-radius: 14px;
   /* Set card width */
   height: 400px;
   /* Set card height */
-  border: 1px solid rgba(69, 69, 219, 0.3);
-  box-shadow: 12px 4px 4px rgba(0, 0, 0, 0.18);
+  border: 1px solid #DBDBDB;
+  box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
   border-radius: 20px;
   position: relative;
 }
@@ -667,6 +667,7 @@ input[type="date"] {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 5px;
+  margin-left: 45px;
   /* Space between chips and dropdown */
   max-width: 483px;
   /* Match the dropdown width */
diff --git a/src/components/Pages/AppPAges/ManageSettings/StoreInformation.js b/src/components/Pages/AppPAges/ManageSettings/StoreInformation.js
index 658673f..c2604d2 100644
--- a/src/components/Pages/AppPAges/ManageSettings/StoreInformation.js
+++ b/src/components/Pages/AppPAges/ManageSettings/StoreInformation.js
@@ -163,7 +163,9 @@ function StoreInformation() {
               style={{
                 color: "#002300",
                 fontSize: "18px",
-                fontFamily: "Manrope",
+                fontFamily: " 'Comfortaa', sans-serif",
+                border:"1px solid #E9E9E9",
+                backgroundColor:"#FAFAFA"
               }}
               value={user ? user.selected_store_name : ""}
               placeholder="Store Name"
@@ -176,7 +178,9 @@ function StoreInformation() {
               style={{
                 color: "#002300",
                 fontSize: "18px",
-                fontFamily: "Manrope",
+                fontFamily: " 'Comfortaa', sans-serif",
+                  border:"1px solid #E9E9E9",
+                backgroundColor:"#FAFAFA"
               }}
               value={user ? user.email : ""}
               placeholder="Email"
@@ -268,14 +272,14 @@ function StoreInformation() {
       key={index}
       className={`card-store ${plan.title.toLowerCase()} ${currentPlan === plan.title ? "selected" : ""}`}
       style={{
-        border: currentPlan === plan.title ? '2px solid #6666ff' : '1px solid #e5e5e5',
-        borderRadius: '10px',
+        border: currentPlan === plan.title ? '2px solid #4A5546' : '1px solid #e5e5e5',
+        borderRadius: '40px',
         padding: '20px',
         textAlign: 'start',
         flex: '1 1 calc(30% - 20px)',
         maxWidth: '25%',
         minWidth: '300px',
-        backgroundColor: '#f4f6ff',
+        backgroundColor: '#ffffff',
         cursor: 'pointer',
         display: 'flex',
         flexDirection: 'column',
@@ -285,9 +289,9 @@ function StoreInformation() {
       }}
       onClick={() => handlePlanChange(plan.title)}
     >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <p style={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}>{plan.title}</p>
-        <p style={{ fontSize: '24px', fontWeight: 'bold', color: '#333', position: 'relative' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',  }}>
+        <p style={{ fontSize: '20px', fontWeight: 'bold', color: '#333' }}>{plan.title}</p>
+        <p style={{ fontSize: '18px', fontWeight: 'bold', color: '#333', position: 'relative', marginRight:"10px" }}>
           <span style={{
             position: 'absolute',
             top: -8,
@@ -298,14 +302,15 @@ function StoreInformation() {
           {parseFloat(plan.amount).toFixed(2)}
         </p>
       </div>
-      <div className="features" style={{ overflowY: 'auto', padding: '10px 0', flex: '1' }}>
-        <p style={{ fontWeight: 'bold', fontSize: '16px' }}>Features</p>
+      <div className="features" style={{ overflowY: 'auto', padding: '0px 0', flex: '1',  }}>
+        <p style={{ fontWeight: 'bold', fontSize: '16px', marginBottom:"15px" }}>Features</p>
         <div style={{
           display: 'flex',
           flexDirection: 'column',
           gap: '10px',
           paddingLeft: '20px',
           color: '#555',
+        
         }}>
           {plan.inc_features_titles.map((features, index) => (
             <div key={index} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
index 940456b..b0da56a 100644
--- a/src/components/common/Header.js
+++ b/src/components/common/Header.js
@@ -184,7 +184,7 @@ const Header = () => {
                 closeDropdowns();
               }}
             >
-              Owner Dashboard
+              Home
             </Link>
           </li>
         )}