diff --git a/package-lock.json b/package-lock.json
index 0711eda..df0e41d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@fortawesome/react-fontawesome": "^0.2.2",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.7.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "faker": "^6.6.6",
@@ -6121,6 +6122,31 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -19087,6 +19113,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/package.json b/package.json
index dacab03..8700f5c 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "faker": "^6.6.6",
diff --git a/src/App.js b/src/App.js
index 34022b5..6daae42 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,24 @@
-import Home from "./Pages/Client/NewMember/Home";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Membershipform from "./Pages/Client/NewMember/Membershipform";
 import Payment from "./Pages/Client/NewMember/Payment";
-import Updateform from "./Pages/Client/NewMember/Updateform";
+import Existing from "./Pages/Client/ExistingMember/Existing";
 import Membershipform2 from "./Pages/Client/NewMember/Membershipform2";
 import Submittedform from "./Pages/Client/NewMember/Submittedform";
+import Submittedpayment from "./Pages/Client/NewMember/Submittedpayment";
 import Login from "./Pages/Client/ExistingMember/Login";
 function App() {
   return (
     <Router>
       <div>
         <Routes>
-          <Route path="/" element={<Home />} />
           <Route path="/membershipform" element={<Membershipform />} />
-          <Route path="/Payment" element={<Payment />} />
-          <Route path="/updateform" element={<Updateform />} />
+          <Route path="/payment" element={<Payment />} />
+          <Route path="/updateform" element={<Existing />} />
           <Route path="/membershipform2" element={<Membershipform2 />} />
           <Route path="/submitted" element={<Submittedform />} />
 
           <Route path="/login" element={<Login />} />
+          <Route path="/submittedpayment" element={<Submittedpayment />} />
         </Routes>
       </div>
     </Router>
diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
deleted file mode 100644
index 3190c9e..0000000
--- a/src/Components/Navbar.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { useState } from "react";
-import logo from "../Assets/icci.jpg";
-import { Link } from "react-router-dom";
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-const Navbar = () => {
-  const [token, setToken] = useState("");
-
-  return (
-    <div className="flex px-20 items-center justify-evenly">
-      <div className="w-fit">
-        <img src={logo} alt="" className="h-[20%] w-[80%]" />
-      </div>
-      <div className="w-full ml-36">
-        <ul className="flex justify-evenly items-center">
-          <li className="hover:cursor-pointer">Home</li>
-          <li className="hover:cursor-pointer">
-            <a
-              href="https://iccicbe.in/wp-content/uploads/2024/04/Application-Form-.pdf"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Download Application
-            </a>
-          </li>
-          {token ? (
-            <li className="hover:cursor-pointer">Logout</li>
-          ) : (
-            <Link to="/membershipform">
-              <li className="px-7  hover:bg-transparent border-2 cursor-pointer transition-all text-white font-bold hover:text-black border-blue-600 py-2 bg-blue-600 hover:rounded-none rounded-lg">
-                To know about application
-                <FontAwesomeIcon icon={faArrowRight} className="ml-3" />
-              </li>
-            </Link>
-          )}
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-export default Navbar;
diff --git a/src/Pages/Client/ExistingMember/Existing.jsx b/src/Pages/Client/ExistingMember/Existing.jsx
index e69de29..d0f8c55 100644
--- a/src/Pages/Client/ExistingMember/Existing.jsx
+++ b/src/Pages/Client/ExistingMember/Existing.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Existing = () => {
+  return <div>Existing</div>;
+};
+
+export default Existing;
diff --git a/src/Pages/Client/ExistingMember/Login.jsx b/src/Pages/Client/ExistingMember/Login.jsx
index ec6a29d..0ca0cbb 100644
--- a/src/Pages/Client/ExistingMember/Login.jsx
+++ b/src/Pages/Client/ExistingMember/Login.jsx
@@ -2,10 +2,10 @@ import React from "react";
 import icci from "../../../Assets/icci.jpg";
 const Login = () => {
   return (
-    <div>
+    <div className=" bg-slate-200 h-screen">
       <div className="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-          <img className="mx-auto h-10 w-auto" src={icci} alt="Chamber" />
+          <img className="mx-auto h-20 w-auto" src={icci} alt="Chamber" />
           <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
             Log in to your account
           </h2>
@@ -16,9 +16,9 @@ const Login = () => {
             <div>
               <label
                 for="email"
-                className="block text-sm font-medium leading-6 text-gray-900"
+                className="block text-sm leading-6 text-black font-bold"
               >
-                Pan Card
+                Email Id
               </label>
               <div className="mt-2">
                 <input
@@ -32,6 +32,25 @@ const Login = () => {
               </div>
             </div>
 
+            <div>
+              <label
+                for="aadhar"
+                className="block text-sm leading-6 text-black font-bold"
+              >
+                Aadhar Number
+              </label>
+              <div className="mt-2">
+                <input
+                  id="aadhar"
+                  name="aadhar"
+                  type="aadhar"
+                  autocomplete="aadhar"
+                  required
+                  className="block px-3 w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+              </div>
+            </div>
+
             <div>
               <button
                 type="submit"
diff --git a/src/Pages/Client/NewMember/Home.jsx b/src/Pages/Client/NewMember/Home.jsx
deleted file mode 100644
index 8ce85a7..0000000
--- a/src/Pages/Client/NewMember/Home.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import Navbar from "../../../Components/Navbar";
-
-const Home = () => {
-  return (
-    <div>
-      <Navbar />
-      <div>
-        <h1>MEMBERSHIP SERVICES</h1>
-      </div>
-    </div>
-  );
-};
-
-export default Home;
diff --git a/src/Pages/Client/NewMember/Payment.jsx b/src/Pages/Client/NewMember/Payment.jsx
index 6698742..f5b0b22 100644
--- a/src/Pages/Client/NewMember/Payment.jsx
+++ b/src/Pages/Client/NewMember/Payment.jsx
@@ -1,9 +1,292 @@
-import React from 'react'
+import React, { useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+const MembershipPrices = {
+  General: {
+    2950: 2950,
+    4130: 4130,
+    5900: 5900,
+    8260: 8260,
+  },
+  professional: 2950,
+  associations: 2360,
+  lifeMembership: 88500,
+  admissionFee: 3540,
+};
 
 const Payment = () => {
+  const [selectedMembership, setSelectedMembership] = useState(null);
+  const [selectedTurnover, setSelectedTurnover] = useState(null);
+  const [totalAmount, setTotalAmount] = useState(0);
+  const navigate = useNavigate();
+
+  const handleMembershipChange = (type) => {
+    setSelectedMembership(type);
+    calculateTotalAmount(type, selectedTurnover);
+  };
+
+  const handleTurnoverChange = (turnover) => {
+    setSelectedTurnover(turnover);
+    calculateTotalAmount(selectedMembership, turnover);
+    updateProperty("sales_turnover", turnover);
+  };
+
+  const calculateTotalAmount = (type, turnover) => {
+    let total = 0;
+    let selectedMembershipAmount = 0;
+    console.log("turnover", turnover);
+    console.log("turnover", MembershipPrices);
+
+    if (type === "life") {
+      total = MembershipPrices.lifeMembership;
+    } else {
+      if (type === "General") {
+        selectedMembershipAmount = MembershipPrices.General[turnover];
+        total += selectedMembershipAmount;
+      } else {
+        selectedMembershipAmount = MembershipPrices[type];
+        total += selectedMembershipAmount;
+      }
+    }
+
+    setTotalAmount(total);
+    updateProperty("total_amount", total);
+    updateProperty("selected_membership_amount", selectedMembershipAmount);
+  };
+
+  const [formData, setFormData] = useState({
+    membership_type: "", // Set the default value based on your logic
+    sales_turnover: "", // Set the default value based on your logic
+    card_number: "",
+    expiry_date: "",
+    cvv: "",
+    cardholder_name: "",
+    entrance_fee: MembershipPrices.admissionFee, // Initial value based on admission fee
+    selected_membership_amount: 0, // Initial value (to be calculated based on logic)
+    total_amount: 0, // Initial value (to be calculated based on logic)
+  });
+
+  const updateProperty = (propertyName, value) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      [propertyName]: value,
+    }));
+  };
+
+  const [formData2, setFormData2] = useState();
+  const accessToken = localStorage.getItem("token");
+
+  console.log(accessToken);
+  console.log(formData);
+  console.log("AccessToken:", accessToken);
+
+  const handlePaymentSuccess = async () => {
+    navigate("/submittedpayment");
+  };
+
   return (
-    <div>Payment</div>
-  )
-}
+    <div>
+      <div className="pt-12 pb-20 flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-500">
+        <div className="text-white text-center">
+          <h1 className="text-4xl font-bold mb-4">Membership Application</h1>
+          <p className="text-lg">
+            Complete the form below to apply for membership. Select your
+            membership type and other details.
+          </p>
+        </div>
+      </div>
+      <div className="flex items-center justify-center pt-[5%] w-full">
+        <div className="bg-white shadow-md rounded-md w-[80%] grid grid-cols-2 gap-12 p-8">
+          {/* Left Side - Form */}
+          <div>
+            <h1 className="text-3xl font-bold mb-6 text-center">
+              Membership Details
+            </h1>
+            <div className="mb-6">
+              <label className="block text-sm font-semibold mb-2">
+                Membership Type
+              </label>
+              <div className="flex items-center space-x-2">
+                <input
+                  type="radio"
+                  name="membershipType"
+                  value="General"
+                  onChange={() => {
+                    updateProperty("membership_type", "General");
+                    handleMembershipChange("General");
+                  }}
+                />
+                <span>General</span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <input
+                  type="radio"
+                  name="membershipType"
+                  value="professional"
+                  onChange={() => {
+                    updateProperty("membership_type", "professional");
+                    handleMembershipChange("professional");
+                  }}
+                />
+                <span>Professional</span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <input
+                  type="radio"
+                  name="membershipType"
+                  value="associations"
+                  onChange={() => {
+                    updateProperty("membership_type", "associations");
+                    handleMembershipChange("associations");
+                  }}
+                />
+                <span>Associations</span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <input
+                  type="radio"
+                  name="membershipType"
+                  value="life"
+                  onChange={() => {
+                    updateProperty("membership_type", "life");
+                    handleMembershipChange("life");
+                  }}
+                />
+                <span>Life Membership</span>
+              </div>
+            </div>
+            {selectedMembership === "General" && (
+              <div className="mb-6">
+                <label className="block text-sm font-semibold mb-2">
+                  Sales Turnover
+                </label>
+                <select
+                  className="border p-2 rounded-md w-full"
+                  onChange={(e) => handleTurnoverChange(e.target.value)}
+                >
+                  <option value="2950">Up to Rs. 5 Crore</option>
+                  <option value="4130">
+                    Above Rs. 5 Crore up to Rs. 10 Crore
+                  </option>
+                  <option value="5900">
+                    Above Rs. 10 Crore up to Rs. 25 Crore
+                  </option>
+                  <option value="8260">Above Rs. 25 Crore</option>
+                </select>
+              </div>
+            )}
+            <div className="grid grid-cols-2 gap-6 mb-6">
+              <div>
+                <label className="block text-sm font-semibold mb-2">
+                  Card Number
+                </label>
+                <input
+                  type="text"
+                  placeholder="Enter card number"
+                  className="border p-2 rounded-md w-full"
+                  onChange={(e) =>
+                    updateProperty("card_number", e.target.value)
+                  }
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-semibold mb-2">
+                  Expiry Date (MM/YY)
+                </label>
+                <input
+                  type="date"
+                  placeholder="MM/YY"
+                  className="border p-2 rounded-md w-full"
+                  onChange={(e) =>
+                    updateProperty("expiry_date", e.target.value)
+                  }
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-semibold mb-2">CVV</label>
+                <input
+                  type="text"
+                  placeholder="CVV"
+                  className="border p-2 rounded-md w-full"
+                  onChange={(e) => updateProperty("cvv", e.target.value)}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-semibold mb-2">
+                  Cardholder Name
+                </label>
+                <input
+                  type="text"
+                  placeholder="Cardholder Name"
+                  className="border p-2 rounded-md w-full"
+                  onChange={(e) =>
+                    updateProperty("cardholder_name", e.target.value)
+                  }
+                />
+              </div>
+            </div>
+          </div>
+          {/* Right Side - Bill */}
+          <div>
+            <h2 className="text-2xl font-bold mb-6 text-center">
+              Membership Bill
+            </h2>
+            <div className="mb-6">
+              <div className="flex justify-between items-center mb-4">
+                <div>
+                  <p className="text-sm">Entrance Fee</p>
+                  <p className="font-bold text-lg text-green-700">
+                    Rs. {MembershipPrices.admissionFee}
+                  </p>
+                </div>
+                {selectedMembership !== "life" && (
+                  <div>
+                    <p className="text-sm">Selected Membership Amount</p>
+                    <p className="font-bold text-lg text-green-700">
+                      Rs. {totalAmount}
+                    </p>
+                  </div>
+                )}
+              </div>
+              <div className="mb-4">
+                <label className="block text-sm font-semibold mb-2">
+                  Subscription for Co-Chamber Journal
+                  <span className="ml-2 text-red-500">
+                    Rs. {MembershipPrices.journalSubscription}
+                  </span>
+                </label>
+              </div>
+              <div className="mb-4">
+                {/* Remove the checkbox for chamber day celebrations */}
+                <label className="block text-sm font-semibold mb-2">
+                  Chamber Day Celebrations
+                  <span className="ml-2 text-red-500">
+                    Rs. {MembershipPrices.chamberDayCelebrations}
+                  </span>
+                </label>
+              </div>
+              <div className="flex justify-between items-center mb-4">
+                <div>
+                  <p className="text-sm">Total Amount</p>
+                  <p className="font-bold text-lg text-green-700">
+                    Rs.{" "}
+                    {totalAmount + MembershipPrices.admissionFee + 295 + 1180}
+                  </p>
+                </div>
+              </div>
+              <button
+                onClick={handlePaymentSuccess}
+                className="bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600"
+              >
+                Pay Now
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default Payment
\ No newline at end of file
+export default Payment;
diff --git a/src/Pages/Client/NewMember/Submittedpayment.jsx b/src/Pages/Client/NewMember/Submittedpayment.jsx
new file mode 100644
index 0000000..db37ebc
--- /dev/null
+++ b/src/Pages/Client/NewMember/Submittedpayment.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+const SubmittedPayment = () => {
+  return (
+    <div className="flex justify-center items-center h-screen bg-gray-100">
+      <div className="bg-white p-8 rounded shadow">
+        <h1 className="text-2xl font-bold mb-4">Payment Submitted</h1>
+        <p className="text-gray-700">Thank you for your payment!</p>
+      </div>
+    </div>
+  );
+};
+
+export default SubmittedPayment;
diff --git a/src/Pages/Client/NewMember/Updateform.jsx b/src/Pages/Client/NewMember/Updateform.jsx
deleted file mode 100644
index f70daa9..0000000
--- a/src/Pages/Client/NewMember/Updateform.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Updateform = () => {
-  return (
-    <div>Updateform</div>
-  )
-}
-
-export default Updateform
\ No newline at end of file