diff --git a/src/assets/vendor/css/core.css b/src/assets/vendor/css/core.css
index 70f4fb09..3a301b65 100644
--- a/src/assets/vendor/css/core.css
+++ b/src/assets/vendor/css/core.css
@@ -17596,6 +17596,31 @@ html:not([dir=rtl]) .toast.bs-toast .toast-header .btn-close {
   }
 }
 @media (min-width: 768px) {
+    /* width */
+
+  .w-md-auto {
+  width: auto !important;
+}
+
+.w-md-20 {
+  width: 20% !important;
+}
+
+.w-md-25 {
+  width: 25% !important;
+}
+
+.w-md-50 {
+  width: 50% !important;
+}
+
+.w-md-60 {
+  width: 60% !important;
+}
+
+.w-md-75 {
+  width: 75% !important;
+}
   .object-fit-md-contain {
     object-fit: contain !important;
   }
diff --git a/src/components/Tenant/SubScriptionHistory.jsx b/src/components/Tenant/SubScriptionHistory.jsx
index a587a84e..643d2be3 100644
--- a/src/components/Tenant/SubScriptionHistory.jsx
+++ b/src/components/Tenant/SubScriptionHistory.jsx
@@ -43,15 +43,14 @@ const SubScriptionHistory = ({ tenantId }) => {
     );
   }
 
-  // Format dates
+
   const end = plan?.endDate ? new Date(plan.endDate) : null;
   const today = new Date();
 
   const daysLeft = end
-    ? Math.max(0, Math.ceil((end - today) / (1000 * 60 * 60 * 24)))
+    ? Math.max(0, Math.ceil((end - plan?.startDate) / (1000 * 60 * 60 * 24)))
     : 0;
 
-  // Render logic for subscription history table
   const renderSubscriptionHistory = () => {
     if (!subscriptionHistory || subscriptionHistory.length === 0) {
       return (
@@ -72,23 +71,35 @@ const SubScriptionHistory = ({ tenantId }) => {
           <table className="table border-top dataTable text-nowrap align-middle">
             <thead className="align-middle">
               <tr>
-                <th>Date</th>
-                <th>Type</th>
+                <th>Invoice</th>
                 <th>Amount</th>
-                <th>Plan Name</th>
-                <th className="text-center">Action</th>
+                <th>Date</th>
+                <th>Status</th>
+                <th className="text-center actions-col">Action</th>
               </tr>
             </thead>
             <tbody className="align-middle">
               {sortedHistory.map((item) => (
                 <tr key={item.id}>
-                  <td>{formatUTCToLocalTime(item?.createdAt)}</td>
-                  <td>{SUBSCRIPTION_PLAN_FREQUENCIES[item.frequency] || "N/A"}</td>
-                  <td>
+                  <td className="fw-medium">{item.planName}</td>
+
+                  <td className="fw-medium">
                     {item.currency?.symbol || "₹"} {item.price}
                   </td>
-                  <td>{item.planName}</td>
-                  <td className="text-center">
+                  <td>
+                    <span className="text-tiny small text-muted">
+                      {formatUTCToLocalTime(item?.createdAt)} by,{" "}
+                      {item?.createdBy?.firstName}
+                    </span>
+                  </td>
+                  <td>
+                    <div className="d-flex align-items-center">
+                      <p className="p-1 my-0 mx-1 rounded-circle bg-success"></p>{" "}
+                      <small className="fw-medium">Paid</small>
+                    </div>
+                  </td>
+
+                  <td className="text-center  actions-col">
                     <div className="dropdown">
                       <button
                         className="btn btn-icon btn-sm dropdown-toggle hide-arrow"
@@ -97,9 +108,7 @@ const SubScriptionHistory = ({ tenantId }) => {
                         <i className="bx bx-dots-vertical-rounded"></i>
                       </button>
                       <div className="dropdown-menu dropdown-menu-end">
-                        <button
-                          className="dropdown-item py-1"
-                        >
+                        <button className="dropdown-item py-1">
                           <i className="bx bx-detail bx-sm"></i> View
                         </button>
                         <button
@@ -108,7 +117,8 @@ const SubScriptionHistory = ({ tenantId }) => {
                             console.log("Download clicked for", item.id)
                           }
                         >
-                          <i className="bx bx-cloud-download bx-sm"></i> Download
+                          <i className="bx bx-cloud-download bx-sm"></i>{" "}
+                          Download
                         </button>
                       </div>
                     </div>
@@ -120,100 +130,172 @@ const SubScriptionHistory = ({ tenantId }) => {
         </div>
 
         {/* Card-based view for smaller screens */}
-     
       </>
     );
   };
 
   return (
-    <div className="p-2 p-md-4">
-      <div className="row g-4">
-        {/* Left Card: Active Subscription */}
-        <div className="col-12 col-lg-6">
-          <div className="card shadow-sm border rounded p-3 h-100 text-start">
-            <div className="divider text-start mb-3">
-              <div className="divider-text">Active Subscription</div>
-            </div>
-
-            <p className="text-primary fw-bold m-0 fs-4">
-              {plan.planName || "N/A"}
-            </p>
-            {plan.description && (
-              <p className="m-0 text-muted small">{plan.description}</p>
-            )}
-
-            <div className="mt-2">
-              <h3 className="m-0">
-                {plan.currency?.symbol || "₹"} {plan.price}
-              </h3>
-              <small className="text-muted">
-                {SUBSCRIPTION_PLAN_FREQUENCIES[plan.frequency] || ""}
+    <div className="text-start">
+      <div className="row d-flex justify-content-between py-1">
+        <div className="col-md-4 d-flex flex-column gap-6">
+          <div className="">
+            <p className=" d-bolck fw-semibold fs-6">Current Plan</p>
+            <small className="d-bolck">
+              You can update your plan anytime for best benifit from the product
+              and track your projct
+            </small>
+          </div>
+          <p className="fw-semibold text-primary">Switch Plan</p>
+        </div>
+        <div className="col-md-6 ">
+          <div className="row border bg-light-primary p-3">
+            <div className="col-1">
+              <small>
+                <i className="bx bxs-package"></i>
               </small>
             </div>
-
-            <div className="mt-3 small text-muted">
-              <div>
-                Activated Since:{" "}
-                {plan.startDate ? formatUTCToLocalTime(plan.startDate) : "N/A"} (
-                {daysLeft} days left)
+            <div className="col-11">
+              <div className="d-flex justify-content-between">
+                <div className="d-flex flex-row gap-4">
+                  <small className="fw-bold">{plan.planName || "N/A"}</small>
+                  <small className="fw-bold text-primary">
+                    {" "}
+                    {plan.currency?.symbol || "₹"} {plan.price}
+                  </small>
+                  <small className=" text-primary">
+                    {" "}
+                    {SUBSCRIPTION_PLAN_FREQUENCIES[plan.frequency] || ""}
+                  </small>
+                </div>
+                <span className=" bg-primary rounded-circle">
+                  <i className="bx bx-md bx-check text-white"></i>
+                </span>
               </div>
-              <div className="mt-1">
-                Ends on:{" "}
-                {plan.endDate ? formatUTCToLocalTime(plan.endDate) : "N/A"}
+              <div className="col-12">
+                <p className="m-0 text-muted text-tiny">
+                  Includes up to 100 userss, 10GB individual cloud storage and
+                  access maximum features
+                </p>
+                <div className="mt-1">
+                  Activated Since:{" "}
+                  <span className="fw-semibold">
+                    {" "}
+                    {plan.startDate
+                      ? formatUTCToLocalTime(plan.startDate)
+                      : "N/A"}{" "}
+                    ({daysLeft} days left)
+                  </span>
+                </div>
               </div>
             </div>
-
-            {/* Features list */}
-            <div className="mt-4">
-              <h6 className="text-secondary">Features</h6>
-              <div className="row g-2">
-                {features?.modules &&
-                  Object.entries(features.modules).map(([key, mod]) => {
-                    if (!mod?.name) return null;
-                    return (
-                      <div
-                        key={key}
-                        className="col-12 col-sm-6 d-flex align-items-center"
-                      >
-                        <i
-                          className={`fa-regular ${
-                            mod.enabled
-                              ? "fa-circle-check text-success"
-                              : "fa-circle-xmark text-danger"
-                          }`}
-                        ></i>
-                        <span className="ms-2">{mod.name}</span>
-                      </div>
-                    );
-                  })}
-              </div>
-            </div>
-
-            <div className="mt-3 text-end">
-              <button
-                className="btn btn-sm btn-primary"
-                onClick={handleUpgradePlan}
-              >
-                Upgrade Plan
-              </button>
-            </div>
           </div>
         </div>
+      </div>
 
-        {/* Right Card: Subscription History */}
-        <div className="col-12 col-lg-6">
-          <div className="card shadow-sm border rounded p-3 h-100">
-            <div className="divider text-start mb-3">
-              <div className="divider-text">
-                <i className="bx bx-history"></i> <small>History</small>
-              </div>
-            </div>
-            {renderSubscriptionHistory()}
+      <hr className="divider border-2 my-2" />
+
+      <div className="row d-flex justify-content-between py-1">
+        <div className="col-md-4 d-flex flex-column gap-6">
+          <div className="">
+            <p className=" d-bolck fw-semibold fs-6">Billing History</p>
+            <small className="d-bolck">
+              Sumary on the payment history for the subscription plan of the
+              application
+            </small>
           </div>
+          <p className="fw-semibold text-primary">Billing History</p>
         </div>
+        <div className="col-md-6 ">{renderSubscriptionHistory()}</div>
       </div>
     </div>
   );
 };
 
-export default SubScriptionHistory;
\ No newline at end of file
+export default SubScriptionHistory;
+
+// <div className="p-2 p-md-4">
+//     <div className="row g-4">
+//       {/* Left Card: Active Subscription */}
+//       <div className="col-12 col-lg-6">
+//         <div className="card shadow-sm border rounded p-3 h-100 text-start">
+//           <div className="divider text-start mb-3">
+//             <div className="divider-text">Active Subscription</div>
+//           </div>
+
+//           <p className="text-primary fw-bold m-0 fs-4">
+//             {plan.planName || "N/A"}
+//           </p>
+//           {plan.description && (
+//             <p className="m-0 text-muted small">{plan.description}</p>
+//           )}
+
+//           <div className="mt-2">
+//             <h3 className="m-0">
+//               {plan.currency?.symbol || "₹"} {plan.price}
+//             </h3>
+//             <small className="text-muted">
+//               {SUBSCRIPTION_PLAN_FREQUENCIES[plan.frequency] || ""}
+//             </small>
+//           </div>
+
+//           <div className="mt-3 small text-muted">
+//             <div>
+//               Activated Since:{" "}
+//               {plan.startDate ? formatUTCToLocalTime(plan.startDate) : "N/A"} (
+//               {daysLeft} days left)
+//             </div>
+//             <div className="mt-1">
+//               Ends on:{" "}
+//               {plan.endDate ? formatUTCToLocalTime(plan.endDate) : "N/A"}
+//             </div>
+//           </div>
+
+//           {/* Features list */}
+//           <div className="mt-4">
+//             <h6 className="text-secondary">Features</h6>
+//             <div className="row g-2">
+//               {features?.modules &&
+//                 Object.entries(features.modules).map(([key, mod]) => {
+//                   if (!mod?.name) return null;
+//                   return (
+//                     <div
+//                       key={key}
+//                       className="col-12 col-sm-6 d-flex align-items-center"
+//                     >
+//                       <i
+//                         className={`fa-regular ${
+//                           mod.enabled
+//                             ? "fa-circle-check text-success"
+//                             : "fa-circle-xmark text-danger"
+//                         }`}
+//                       ></i>
+//                       <span className="ms-2">{mod.name}</span>
+//                     </div>
+//                   );
+//                 })}
+//             </div>
+//           </div>
+
+//           <div className="mt-3 text-end">
+//             <button
+//               className="btn btn-sm btn-primary"
+//               onClick={handleUpgradePlan}
+//             >
+//               Upgrade Plan
+//             </button>
+//           </div>
+//         </div>
+//       </div>
+
+//       <div className="col-12 col-lg-6">
+//         <div className="card shadow-sm border rounded p-3 h-100">
+//           <div className="divider text-start mb-3">
+//             <div className="divider-text">
+//               <i className="bx bx-history"></i> <small>History</small>
+//             </div>
+//           </div>
+//           {renderSubscriptionHistory()}
+//         </div>
+//       </div>
+//     </div>
+//   </div>
diff --git a/src/components/UserSubscription/ProcessedPayment.jsx b/src/components/UserSubscription/ProcessedPayment.jsx
index 9f7ed25b..c08c813c 100644
--- a/src/components/UserSubscription/ProcessedPayment.jsx
+++ b/src/components/UserSubscription/ProcessedPayment.jsx
@@ -37,7 +37,10 @@ const ProcessedPayment = ({
   const {
     data: plans,
     isError: isPlanError,
-    isLoading,isError,isRefetching,refetch
+    isLoading,
+    isError,
+    isRefetching,
+    refetch,
   } = useSubscription(frequency);
   useEffect(() => {
     if (!plans || !selectedPlanId) return;
@@ -77,7 +80,11 @@ const ProcessedPayment = ({
       alert("Failed to load Razorpay SDK");
       return;
     }
-    MakePayment({ amount: selectedPlan?.price });
+    let price = 0;
+    price =
+      frequencyLabel(selectedPlan?.frequency, true, true)?.planDurationInInt *
+      selectedPlan?.price;
+    MakePayment({ amount: price });
   };
 
   const handleRetry = () => {
@@ -188,21 +195,27 @@ const ProcessedPayment = ({
                     <div className="custom-option custom-option-basic text-start w-100 bg-light-primary border border-primary shadow-md p-3 rounded-3">
                       <div className="custom-option-header d-flex justify-content-between align-items-center">
                         <span className="h6 mb-0">
-                          {selectedPlan?.planName}
+                          {selectedPlan?.description}
                         </span>
                         <i className="bx bx-check-circle text-primary fs-4"></i>
                       </div>
 
                       <div className="d-flex justify-content-between mt-1">
-                        <small className="text-muted">
-                          {selectedPlan?.currency?.symbol} {selectedPlan?.price}{" "}
-                          /{frequencyLabel(frequency, false)}
+                        <small>
+                          Price -{" "}
+                          <span className="fw-medium">
+                            {selectedPlan.currency?.symbol} {selectedPlan.price}{" "}
+                            per {frequencyLabel(frequency)}
+                          </span>
                         </small>
                       </div>
 
-                      <span className="custom-option-body d-block mt-1">
-                        <small>{selectedPlan?.description}</small>
-                      </span>
+                      <div className="d-flex flex-row gap-3 mt-1 align-items-center">
+                        <small>{selectedPlan?.planName}</small>
+                        <small className="d-block mt-1 text-xs border border-primary text-center rounded text-secondary w-min text-nowrap px-1">
+                          billed {frequencyLabel(frequency, true)}
+                        </small>
+                      </div>
                     </div>
                   </div>
                 )}
@@ -307,11 +320,18 @@ const ProcessedPayment = ({
                               <div className="d-flex justify-content-between">
                                 <h6 className="fs-4">Total Price</h6>
                                 <h5 className="fs-3">
-                                  {formatFigure(selectedPlan?.price, {
-                                    type: "currency",
-                                    currency:
-                                      selectedPlan?.currency.currencyCode,
-                                  })}
+                                  {formatFigure(
+                                    frequencyLabel(
+                                      selectedPlan?.frequency,
+                                      true,
+                                      true
+                                    )?.planDurationInInt * price,
+                                    {
+                                      type: "currency",
+                                      currency:
+                                        selectedPlan?.currency.currencyCode,
+                                    }
+                                  )}
                                 </h5>
                               </div>
                             </div>
@@ -375,26 +395,28 @@ const ProcessedPayment = ({
           )}
         </div>
       </div>
-      <div className="col-12 d-flex justify-content-between">
+      <div className="col-12 d-flex flex-column flex-md-row justify-content-between gap-2 mt-3">
         <button
           type="submit"
-          className="btn btn-label-primary d-flex align-items-center me-2"
+          className="btn btn-label-primary d-flex align-items-center justify-content-center  w-md-auto"
           onClick={handlPrevious}
         >
-          <i className="bx bx-chevron-left"></i> Previous
+          <i className="bx bx-chevron-left me-1"></i> Previous
         </button>
+
         <button
           type="submit"
-          className="btn btn-label-primary d-flex align-items-center me-2"
+          className="btn btn-label-primary d-flex align-items-center justify-content-center  w-md-auto"
           onClick={() => ProcessToPayment(currentPlan?.price)}
+          disabled={isPending}
         >
           {isPending ? (
-            <span>
-              <i className="bx bx-loader-alt bx-md bx-spin me-2"></i>Please
+            <>
+              <i className="bx bx-loader-alt bx-md bx-spin me-2"></i> Please
               Wait...
-            </span>
+            </>
           ) : (
-            "Processed To Payment"
+            "Proceed To Payment"
           )}
         </button>
       </div>
diff --git a/src/components/UserSubscription/SelectPlan.jsx b/src/components/UserSubscription/SelectPlan.jsx
index 71b85f5e..e60abc38 100644
--- a/src/components/UserSubscription/SelectPlan.jsx
+++ b/src/components/UserSubscription/SelectPlan.jsx
@@ -6,9 +6,12 @@ import { formatFigure, frequencyLabel } from "../../utils/appUtils";
 import { setSelfTenant } from "../../slices/localVariablesSlice";
 import SelectedPlanSkeleton from "./SelectedPlanSkeleton";
 import { error } from "pdf-lib";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CouponDiscount } from "../../pages/Home/HomeSchema";
 
 const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
-  const { frequency, planName } = useParams();
+  const { frequency, planId } = useParams();
   const [selectedFrequency, setSelectedFrequency] = useState(
     parseInt(frequency)
   );
@@ -17,7 +20,7 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
   const client = useSelector(
     (store) => store.localVariables.selfTenant.details
   );
-  const [selectedPlan, setSelectedPlan] = useState(planName);
+  const [selectedPlan, setSelectedPlan] = useState(planId);
   const [currentPlan, setCurrentPlan] = useState(null);
   const [failPayment, setFailPayment] = useState(null);
 
@@ -30,25 +33,51 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
     isRefetching,
   } = useSubscription(selectedFrequency);
 
-  const handleChange = (e) => setSelectedPlan(e.target.value);
+  const handleChange = (e) => {
+    setSelectedPlan(e.target.value);
+  };
 
   useEffect(() => {
-    if (!plans || !selectedPlan) return;
-    const selected = plans.find((p) => p.planName === selectedPlan);
-    if (selected) {
-      setCurrentPlan(selected);
-      dispatch(
-        setSelfTenant({ planId: selected.id, frequency: selectedFrequency })
-      );
-    }
-  }, [plans, selectedPlan, dispatch, selectedFrequency]);
+    if (!plans || plans.length === 0) return;
+
+    // Prefer route param if exists, else default to first plan
+    const matchingPlan = plans.find((p) => p.planId === planId) || plans[0];
+
+    setSelectedPlan(matchingPlan.id);
+    setCurrentPlan(matchingPlan);
+
+    // Dispatch correct plan + frequency only once data is ready
+    dispatch(
+      setSelfTenant({
+        planId: matchingPlan.id,
+        frequency: selectedFrequency,
+      })
+    );
+  }, [plans, selectedFrequency, planId, dispatch]);
 
   const handleNextStep = () => {
-    dispatch(setSelfTenant({ frequency: selectedFrequency }));
+    if (!selectedPlan) {
+      toast.warning("Please select a plan before continuing.");
+      return;
+    }
+
+    dispatch(
+      setSelfTenant({
+        planId: selectedPlan,
+        frequency: selectedFrequency,
+      })
+    );
+
     setStepStatus((prev) => ({ ...prev, 2: "success" }));
     onNext();
   };
 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({ resolver: zodResolver(CouponDiscount) });
+
   return (
     <div className="container text-start ">
       <div className="row  gy-5 align-items-center justify-content-around">
@@ -171,51 +200,59 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
               <SelectedPlanSkeleton />
             ) : (
               <>
-              <div className="row">
+                <div className="row">
                   {plans?.map((plan) => (
-                  <div key={plan?.id} className="col-12 col-md-4 mb-md-3 mb-2">
                     <div
-                      className={`form-check custom-option custom-option-basic text-start w-100 bg-light-primary ${
-                        selectedPlan === plan?.planName
-                          ? "border border-primary shadow-md"
-                          : ""
-                      }`}
+                      key={plan?.id}
+                      className="col-12 col-md-4 mb-md-3 mb-2"
                     >
-                      <label
-                        className="form-check-label custom-option-content w-100"
-                        htmlFor={`customRadioTemp${plan?.id}`}
+                      <div
+                        className={`form-check custom-option custom-option-basic text-start w-100 bg-light-primary ${
+                          selectedPlan === plan?.id
+                            ? "border border-primary shadow-md"
+                            : ""
+                        }`}
                       >
-                        <input
-                          name="customRadioTemp"
-                          className="form-check-input"
-                          type="radio"
-                          value={plan?.planName}
-                          id={`customRadioTemp${plan?.id}`}
-                          checked={selectedPlan === plan?.planName}
-                          onChange={handleChange}
-                        />
-                        <span className="custom-option-header d-flex justify-content-between align-items-center">
-                          <span className="h6 mb-0">{plan?.planName}</span>
-                          <span>
-                            {plan.currency?.symbol} {plan.price} /{" "}
-                            {frequencyLabel(selectedFrequency)}
+                        <label
+                          className="form-check-label custom-option-content w-100"
+                          htmlFor={`customRadioTemp${plan?.id}`}
+                        >
+                          <input
+                            name="customRadioTemp"
+                            className="form-check-input"
+                            type="radio"
+                            value={plan?.id}
+                            id={`customRadioTemp${plan?.id}`}
+                            checked={selectedPlan === plan?.id}
+                            onChange={handleChange}
+                          />
+                          <span className="custom-option-header d-flex justify-content-between align-items-center">
+                            <span className="h6 mb-0">{plan?.description}</span>
                           </span>
-                        </span>
-                        <span className="custom-option-body d-block mt-1">
-                          <small>{plan?.description}</small>
-                        </span>
-                      </label>
+                          <span className="custom-option-body d-block ">
+                            <small>
+                              Price -{" "}
+                              <span className="fw-medium">
+                                {plan.currency?.symbol} {plan.price} per{" "}
+                                {frequencyLabel(selectedFrequency)}
+                              </span>
+                            </small>
+                            <small className="d-block mt-1 text-xs border border-primary text-center rounded text-secondary w-min text-nowrap px-1">
+                              billed {frequencyLabel(selectedFrequency, true)}
+                            </small>
+                          </span>
+                        </label>
+                      </div>
                     </div>
-                  </div>
-                ))}
-              </div>
+                  ))}
+                </div>
 
                 {selectedPlan && (
                   <div className="col-12 text-start">
                     <div className="border-warning mt-3">
                       {(() => {
                         const selected = plans?.find(
-                          (p) => p.planName === selectedPlan
+                          (p) => p.id === selectedPlan
                         );
                         if (!selected) return null;
 
@@ -251,7 +288,6 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
                                 </div>
                               </div>
                             </div>
-
                             <h6 className="fw-bold text-secondary mb-2">
                               Included Features
                             </h6>
@@ -275,7 +311,6 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
                                     </div>
                                   ))}
                             </div>
-
                             <h6 className="fw-bold text-secondary mt-3 mb-2">
                               Support
                             </h6>
@@ -299,8 +334,29 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
                                 </li>
                               )}
                             </ul>
-
-                            <hr className="divider border-2" />
+                            <div className="d-flex flex-row align-items-end gap-2 mt-1">
+                              <div className="">
+                                <label className="form-lable ">
+                                  Apply Coupon
+                                  <input
+                                    type="text"
+                                    {...register("coupon")}
+                                    className="form-control form-control-sm mt-1"
+                                  />
+                                </label>
+                              </div>
+                              <div>
+                                {" "}
+                                <button className="btn btn-primary btn-sm">
+                                  Apply
+                                </button>
+                              </div>
+                            </div>
+                            {/* {errors.coupon && (<small>{error.coupon.message}</small>)} */}{" "}
+                            <small className="m-0">
+                              Currently, no coupon codes are available!{" "}
+                            </small>
+                            <hr className="divider border-2 my-1" />
                             <div className="d-flex flex-column co-12">
                               <div className="d-flex justify-content-between">
                                 <h6 className="fs-6 m-0">Duration</h6>
@@ -312,10 +368,17 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
                               <div className="d-flex justify-content-between">
                                 <h6 className="fs-4">Total Price</h6>
                                 <h5 className="fs-3">
-                                  {formatFigure(price, {
-                                    type: "currency",
-                                    currency: currency.currencyCode,
-                                  })}
+                                  {formatFigure(
+                                    frequencyLabel(
+                                      selectedFrequency,
+                                      true,
+                                      true
+                                    )?.planDurationInInt * price,
+                                    {
+                                      type: "currency",
+                                      currency: currency.currencyCode,
+                                    }
+                                  )}
                                 </h5>
                               </div>
                             </div>
diff --git a/src/components/UserSubscription/SubscriptionLayout.jsx b/src/components/UserSubscription/SubscriptionLayout.jsx
index a9145a3d..bf37176b 100644
--- a/src/components/UserSubscription/SubscriptionLayout.jsx
+++ b/src/components/UserSubscription/SubscriptionLayout.jsx
@@ -8,7 +8,7 @@ const SubscriptionLayout = ({
 }) => {
   return (
     <div className="container-fluid stepper-container align-items-start my-4 w-100">
-      <ul className="timeline-horizontal list-unstyled d-flex justify-content-between align-items-center position-relative w-75">
+      <ul className="timeline-horizontal list-unstyled d-flex justify-content-between align-items-center position-relative  w-md-75">
         {configStep.map((step, index) => {
           const stepNumber = index + 1;
           const status = stepStatus[stepNumber] || "pending";
diff --git a/src/pages/Home/HomeSchema.jsx b/src/pages/Home/HomeSchema.jsx
index 53f14edc..2343b788 100644
--- a/src/pages/Home/HomeSchema.jsx
+++ b/src/pages/Home/HomeSchema.jsx
@@ -24,4 +24,8 @@ export const OrganizationSchema = z.object({
 
 export const OrganizationDefaultValue = {
   
-}
\ No newline at end of file
+}
+
+export const CouponDiscount = z.object({
+  coupon:z.string().optional()
+})
\ No newline at end of file
diff --git a/src/pages/Home/MakeSubscription.jsx b/src/pages/Home/MakeSubscription.jsx
index 7173b51c..12456155 100644
--- a/src/pages/Home/MakeSubscription.jsx
+++ b/src/pages/Home/MakeSubscription.jsx
@@ -8,7 +8,7 @@ import SelectPlan from "../../components/UserSubscription/SelectPlan";
 import Review from "../../components/UserSubscription/Review";
 
 const MakeSubscription = () => {
-  const [currentStep, setCurrentStep] = useState(1);
+  const [currentStep, setCurrentStep] = useState(2);
   const [responsePayment, setResponsePayment] = useState(null);
 
   const [stepStatus, setStepStatus] = useState({
diff --git a/src/pages/Home/SubscriptionPlans.jsx b/src/pages/Home/SubscriptionPlans.jsx
index f7725946..17faa7a4 100644
--- a/src/pages/Home/SubscriptionPlans.jsx
+++ b/src/pages/Home/SubscriptionPlans.jsx
@@ -113,7 +113,7 @@ const SubscriptionPlans = () => {
                 {/* Button */}
                <div className="mt-auto">
   <Link
-    to={`/auth/subscripe/${frequency}/${plan.planName}`}
+    to={`/auth/subscripe/${frequency}/${plan.id}`}
     className="btn btn-outline-primary w-100 fw-bold mb-2"
   >
     Subscribe
diff --git a/src/pages/Tenant/TenantDetails.jsx b/src/pages/Tenant/TenantDetails.jsx
index d799522e..26e3ca90 100644
--- a/src/pages/Tenant/TenantDetails.jsx
+++ b/src/pages/Tenant/TenantDetails.jsx
@@ -122,8 +122,8 @@ const TenantDetails = ({
             />
           )}
 
-          <div className="nav-align-left nav-tabs-shadow mb-6">
-            <ul className="nav nav-tabs py-2 page-min-h" role="tablist">
+          <div className="nav-align-top nav-tabs-shadow mb-6">
+            <ul className="nav nav-tabs  " >
               {tabs.map((tab, index) => (
                 <li key={tab.id} className="nav-item">
                   <button
diff --git a/src/router/AppRoutes.jsx b/src/router/AppRoutes.jsx
index 55be4098..cb55742d 100644
--- a/src/router/AppRoutes.jsx
+++ b/src/router/AppRoutes.jsx
@@ -74,7 +74,7 @@ const router = createBrowserRouter(
       ],
     },
     { path: "/auth/switch/org", element: <TenantSelectionPage /> },
-    { path: "/auth/subscripe/:frequency/:planName", element: <MakeSubscription /> },
+    { path: "/auth/subscripe/:frequency/:planId", element: <MakeSubscription /> },
     {
       element: <ProtectedRoute />,
       errorElement: <ErrorPage />,
diff --git a/src/utils/appUtils.js b/src/utils/appUtils.js
index 6f2291fb..d6ec6e52 100644
--- a/src/utils/appUtils.js
+++ b/src/utils/appUtils.js
@@ -113,7 +113,7 @@ export const formatFigure = (
     type = "number",
     currency = "INR",
     locale = "en-US",
-    notation = "standard",    // standard or compact
+    notation = "standard", // standard or compact
     compactDisplay = "short",
     minimumFractionDigits = 0,
     maximumFractionDigits = 2,
@@ -122,7 +122,12 @@ export const formatFigure = (
   if (amount == null || isNaN(amount)) return "-";
 
   const formatterOptions = {
-    style: type === "currency" ? "currency" : type === "percent" ? "percent" : "decimal",
+    style:
+      type === "currency"
+        ? "currency"
+        : type === "percent"
+        ? "percent"
+        : "decimal",
     notation: notation,
     compactDisplay,
     minimumFractionDigits,
@@ -136,17 +141,52 @@ export const formatFigure = (
   return new Intl.NumberFormat(locale, formatterOptions).format(amount);
 };
 
-export const frequencyLabel = (freq, isLong = false) => {
-    const frequency = parseInt(freq, 10);
+export const frequencyLabel = (
+  freq,
+  isLong = false,
+  isMonthRequired = false
+) => {
+  const frequency = parseInt(freq, 10);
   switch (frequency) {
     case 0:
-      return isLong ? "1 Month" : "1 mo";
+      if (isLong && isMonthRequired) {
+        return { planDurationInString: "1 Month", planDurationInInt: 1 };
+      }
+      if (isLong) {
+        return "1 Month";
+      } else {
+        return "1 mon";
+      }
     case 1:
-      return isLong ? "Quarterly (3 Months)" : "3 mo";
+      if (isLong && isMonthRequired) {
+        return {
+          planDurationInString: "Quarterly (3 Months)",
+          planDurationInInt: 3,
+        };
+      }
+      if (isLong) {
+        return "Quarterly (3 Months)";
+      } else {
+        return "3 mon";
+      }
     case 2:
-      return isLong ? "6 Months" : "6 mo";
+      if (isLong && isMonthRequired) {
+        return { planDurationInString: "6 Month", planDurationInInt: 6 };
+      }
+      if (isLong) {
+        return "6 Month";
+      } else {
+        return "6 mon";
+      }
     case 3:
-      return isLong ? "1 Year" : "1 yr";
+      if (isLong && isMonthRequired) {
+        return { planDurationInString: "1 Year", planDurationInInt: 12 };
+      }
+      if (isLong) {
+        return "1 Year";
+      } else {
+        return "1 yr";
+      }
     default:
       return isLong ? "Unknown" : "N/A";
   }