diff --git a/package.json b/package.json
index a8d64bf..06fc1ed 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,7 @@
   },
   "scripts": {
     "start": "react-scripts start -e .env.development",
-    "build": "react-scripts start -e .env.development",
-    "build_real": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
diff --git a/src/component/subscribe/Subscribe.jsx b/src/component/subscribe/Subscribe.jsx
index 964098f..4b216cc 100644
--- a/src/component/subscribe/Subscribe.jsx
+++ b/src/component/subscribe/Subscribe.jsx
@@ -6,6 +6,9 @@ import { useQuery } from '@tanstack/react-query';
 import queryKeys from '../../services/queryKeys';
 import siteLinks from "../../links/siteLinks";
 import { Link, useNavigate } from 'react-router-dom'
+import SubscribeNewCard from "./SubscribeNewCard";
+import SubscribePreviousCard from "./SubscribePreviousCard";
+import SubcribePaymentOptions from "./SubcribePaymentOptions";
 
 export default function Subscribe() {
     const navigate = useNavigate()
@@ -30,9 +33,11 @@ export default function Subscribe() {
     const otherSubscriptions = data?.data?.options
     console.log('urlData', data?.data)
 
+    const subscriptionSelection  = otherSubscriptions?.starter;
+
     return (
         <>
-            <BreadcrumbComBS title='Activate your subscription' paths={['Dashboard', 'subscribe']} />
+            <BreadcrumbComBS title='Activate or Update your Subscription' paths={['Dashboard', 'subscribe']} />
 
             {isFetching ?
                 <>
@@ -46,41 +51,46 @@ export default function Subscribe() {
                     </div>
                     :
                     <div className="row">
-                        <div className="col-12 col-lg-6 col-xl-3">
+                        <div className="col-12 col-lg-6 col-xl-6">
                             <div className="card card-statistics text-center py-3">
                                 <div className="card-body pricing-content">
                                     <div className="pricing-content-card">
                                         <h5>Current Subscription(s)</h5>
-                                        <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
+                                        {/*<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>*/}
+                                            <SubcribePaymentOptions />
+
+                                            <SubscribeNewCard />
+                                            <SubscribePreviousCard />
+
                                     </div>
                                 </div>
                             </div>
                         </div>
 
                         <>
-                            {Object.entries(otherSubscriptions)?.map(([key, value]) => (
 
-                                <div key={key} className="col-12 col-lg-6 col-xl-3">
+
+                                <div key="basic" className="col-12 col-lg-6 col-xl-6">
                                     <div className="card card-statistics text-center py-3">
                                         <div className="card-body pricing-content">
                                             <div className="pricing-content-card">
-                                                <h5>{value.display_name}</h5>
-                                                <h2 className="text-primary pt-3">${value.monthly}</h2>
+                                                <h5>{subscriptionSelection.display_name}</h5>
+                                                <h2 className="text-primary pt-3">${subscriptionSelection.monthly}</h2>
                                                 <p className="text-primary pb-3">/ Monthly</p>
                                                 <ul className="py-2">
-                                                    {value?.items?.map(item =>(
+                                                    {subscriptionSelection?.items?.map(item =>(
                                                         <li key={item}>{item}</li>
                                                     ))}
                                                 </ul>
-                                                <div className="pt-2">
-                                                    <button   className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
-                                                </div>
+                                                {/*<div className="pt-2">*/}
+                                                {/*    <button   className="btn btn-inverse-secondary btn-round btn-sm">Go {subscriptionSelection.display_name}</button>*/}
+                                                {/*</div>*/}
                                             </div>
                                         </div>
                                     </div>
                                 </div>
 
-                            ))}
+
                         </>
 
                     </div>