diff --git a/src/pages/Home/SubscriptionPlans.jsx b/src/pages/Home/SubscriptionPlans.jsx
index 0d44472c..7c06a751 100644
--- a/src/pages/Home/SubscriptionPlans.jsx
+++ b/src/pages/Home/SubscriptionPlans.jsx
@@ -1,113 +1,3 @@
-// // src/components/SubscriptionPlans.jsx
-// import React, { useState, useEffect } from "react";
-// import axios from "axios";
-
-// const SubscriptionPlans = () => {
-//   const [plans, setPlans] = useState([]);
-//   const [frequency, setFrequency] = useState(1); // 1=Monthly, 2=Quarterly, 3=Half-Yearly, 4=Yearly
-//   const [loading, setLoading] = useState(false);
-
-//   useEffect(() => {
-//     const fetchPlans = async () => {
-//       try {
-//         setLoading(true);
-//         const res = await axios.get(
-//           `/api/market/list/subscription-plan?frequency=${frequency}`
-//         );
-//         setPlans(res.data?.data || []);
-//       } catch (err) {
-//         console.error("Error fetching plans:", err);
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     fetchPlans();
-//   }, [frequency]);
-
-//   return (
-//     <div className="container py-5">
-//       {/* Frequency Switcher */}
-//       <div className="text-center mb-4">
-//         <div className="btn-group" role="group" aria-label="Plan frequency">
-//           {["Monthly", "Quarterly", "Half-Yearly", "Yearly"].map((label, idx) => (
-//             <button
-//               key={idx}
-//               type="button"
-//               className={`btn btn-${frequency === idx + 1 ? "primary" : "outline-secondary"}`}
-//               onClick={() => setFrequency(idx + 1)}
-//             >
-//               {label}
-//             </button>
-//           ))}
-//         </div>
-//       </div>
-
-//       {/* Cards */}
-//       <div className="row g-4">
-//         {loading ? (
-//           <div className="text-center">Loading...</div>
-//         ) : plans.length === 0 ? (
-//           <div className="text-center">No plans found</div>
-//         ) : (
-//           plans.map((plan) => (
-//             <div key={plan.id} className="col-xl-4 col-lg-6 col-md-6">
-//               <div className="card h-100 shadow-sm">
-//                 <div className="card-header text-center">
-//                   <h4 className="mb-1">{plan.planName}</h4>
-//                   <p className="text-muted small">{plan.description}</p>
-//                   <div className="d-flex align-items-center justify-content-center">
-//                     <span className="h2 text-primary fw-bold mb-0">
-//                       {plan.currency?.symbol}
-//                       {plan.price}
-//                     </span>
-//                     <sub className="h6 text-muted mb-n1 ms-1">/mo</sub>
-//                   </div>
-//                   <div className="text-muted">
-//                     Max Users: {plan.maxUser} | Storage: {plan.maxStorage} MB
-//                   </div>
-//                 </div>
-
-//                 <div className="card-body">
-//                   <ul className="list-unstyled">
-//                     {plan.features?.modules &&
-//                       Object.values(plan.features.modules).map((mod) => (
-//                         <li key={mod.id} className="mb-2">
-//                           <i className="bx bx-check text-success me-2"></i>
-//                           {mod.name}{" "}
-//                           {mod.enabled ? (
-//                             <span className="badge bg-success ms-2">Enabled</span>
-//                           ) : (
-//                             <span className="badge bg-secondary ms-2">Disabled</span>
-//                           )}
-//                         </li>
-//                       ))}
-//                     <li className="mb-2">
-//                       <i className="bx bx-support text-primary me-2"></i>
-//                       Support:{" "}
-//                       {plan.features?.supports?.prioritySupport
-//                         ? "Priority"
-//                         : plan.features?.supports?.phoneSupport
-//                         ? "Phone & Email"
-//                         : "Email Only"}
-//                     </li>
-//                   </ul>
-//                 </div>
-
-//                 <div className="card-footer text-center">
-//                   <button className="btn btn-primary w-100">Get Started</button>
-//                 </div>
-//               </div>
-//             </div>
-//           ))
-//         )}
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default SubscriptionPlans;
-
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 
@@ -120,11 +10,10 @@ const SubscriptionPlans = () => {
     const fetchPlans = async () => {
       try {
         setLoading(true);
-        const res = await axios.get(`http://localhost:5032/api/market/list/subscription-plan?frequency=${frequency}`, {
-          headers: {
-            "Content-Type": "application/json"
-          }
-        });
+        const res = await axios.get(
+          `http://localhost:5032/api/market/list/subscription-plan?frequency=${frequency}`,
+          { headers: { "Content-Type": "application/json" } }
+        );
         setPlans(res.data?.data || []);
       } catch (err) {
         console.error("Error fetching plans:", err);
@@ -155,7 +44,7 @@ const SubscriptionPlans = () => {
               key={idx}
               type="button"
               className={`btn btn-${frequency === idx ? "primary" : "outline-secondary"}`}
-              onClick={() => setFrequency(idx)} // use idx directly (0,1,2,3)
+              onClick={() => setFrequency(idx)}
             >
               {label}
             </button>
@@ -163,7 +52,6 @@ const SubscriptionPlans = () => {
         </div>
       </div>
 
-
       {/* Cards */}
       <div className="row g-4">
         {loading ? (
@@ -173,54 +61,65 @@ const SubscriptionPlans = () => {
         ) : (
           plans.map((plan) => (
             <div key={plan.id} className="col-xl-4 col-lg-6 col-md-6">
-              <div className="card h-100 shadow-sm">
-                <div className="card-header text-center">
-                  <h4 className="mb-1">{plan.planName}</h4>
-                  <p className="text-muted small">{plan.description}</p>
-                  <div className="d-flex align-items-center justify-content-center">
-                    <span className="h2 text-primary fw-bold mb-0">
-                      {plan.currency?.symbol}{plan.price}
-                    </span>
-                    <sub className="h6 text-muted mb-n1 ms-1">/{frequencyLabel(frequency)}</sub>
-                  </div>
-                  <div className="text-muted">
-                    Max Users: {plan.maxUser} | Storage: {plan.maxStorage} MB
+              <div className="card h-100 shadow-sm border-0 p-3">
+                {/* Header */}
+                <div className="d-flex align-items-center gap-3 mb-3">
+                  <i className="bx bxs-package text-primary fs-1"></i>
+                  <div>
+                    <p className="card-title fs-4 fw-bold mb-1 me-6">
+                      {plan.planName}
+                    </p>
+                    <p className="text-muted mb-0">{plan.description}</p>
                   </div>
                 </div>
 
-                <div className="card-body">
-                  <ul className="list-unstyled">
-                    {plan.features?.modules &&
-                      Object.values(plan.features.modules).map((modGroup) =>
-                        Object.values(modGroup).map((mod) =>
-                          mod && mod.name ? (
-                            <li key={mod.id} className="mb-2">
-                              <i className="bx bx-check text-success me-2"></i>
-                              {mod.name}{" "}
-                              {mod.enabled ? (
-                                <span className="badge bg-success ms-2">Enabled</span>
-                              ) : (
-                                <span className="badge bg-secondary ms-2">Disabled</span>
-                              )}
-                            </li>
-                          ) : null
-                        )
-                      )}
-
-                    <li className="mb-2">
-                      <i className="bx bx-support text-primary me-2"></i>
-                      Support:{" "}
-                      {plan.features?.supports?.prioritySupport
-                        ? "Priority"
-                        : plan.features?.supports?.phoneSupport
-                          ? "Phone & Email"
-                          : "Email Only"}
-                    </li>
-                  </ul>
+                {/* Price */}
+                <div className="text-start mb-3">
+                  <h4 className="fw-semibold mt-auto mb-3">
+                    {plan.currency?.symbol} {plan.price}
+                  </h4>
                 </div>
 
-                <div className="card-footer text-center">
-                  <button className="btn btn-primary w-100">Get Started</button>
+                {/* Storage & Trial */}
+                <div className="text-start text-muted mb-3">
+                  <div className="mb-1">
+                    <i className="fa-solid fa-hdd me-2"></i>
+                    Storage {plan.maxStorage} MB
+                  </div>
+                  <div>
+                    <i className="fa-regular fa-calendar-check text-success me-2"></i>
+                    Trial Days {plan.trialDays}
+                  </div>
+                </div>
+
+                {/* Features */}
+                <h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-start">
+                  Features
+                </h6>
+                <ul className="list-unstyled text-start mb-4">
+                  {plan.features?.modules &&
+                    Object.values(plan.features.modules).map((mod) =>
+                      mod && mod.name ? (
+                        <li
+                          key={mod.id}
+                          className="d-flex align-items-center mb-2"
+                        >
+                          {mod.enabled ? (
+                            <i className="fa-regular fa-circle-check text-success me-2"></i>
+                          ) : (
+                            <i className="fa-regular fa-circle-xmark text-danger me-2"></i>
+                          )}
+                          {mod.name}
+                        </li>
+                      ) : null
+                    )}
+                </ul>
+
+                {/* Button */}
+                <div className="mt-auto">
+                  <button className="btn btn-outline-primary w-100 fw-bold">
+                    Select Plan
+                  </button>
                 </div>
               </div>
             </div>
@@ -232,4 +131,3 @@ const SubscriptionPlans = () => {
 };
 
 export default SubscriptionPlans;
-