diff --git a/src/component/subscription/Subscription.jsx b/src/component/subscription/Subscription.jsx
index e1ebcdd..78faab5 100644
--- a/src/component/subscription/Subscription.jsx
+++ b/src/component/subscription/Subscription.jsx
@@ -1,18 +1,18 @@
 import React from 'react'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import getImage from "../../utils/getImage";
-import { getSubscriptions } from '../../services/services';
-import { useQuery } from '@tanstack/react-query';
+import {getSubscriptions} from '../../services/services';
+import {useQuery} from '@tanstack/react-query';
 import queryKeys from '../../services/queryKeys';
 import siteLinks from "../../links/siteLinks";
-import { Link, useNavigate } from 'react-router-dom'
+import {Link, useNavigate} from 'react-router-dom'
 
 export default function Subscription() {
     const navigate = useNavigate()
-    const pricingFields ={
-        starter: { name: 'Starter', price:  5.99, active: true },
-        basic:   { name: 'Basic',   price: 12.99, active: true },
-        premium: { name: 'Premium', price: 20.00, active: true },
+    const pricingFields = {
+        starter: {name: 'Starter', price: 5.99, active: true},
+        basic: {name: 'Basic', price: 12.99, active: true},
+        premium: {name: 'Premium', price: 20.00, active: true},
     }
 
     const {data, isFetching, isError, error} = useQuery({
@@ -32,59 +32,69 @@ export default function Subscription() {
 
     return (
         <>
-            <BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']} />
-
-        {isFetching ? 
-            <>
-                <div className="col-12">
-                    <p className='text-mute'>Loading...</p>
-                </div>
-            </>
-            : isError ?
-            <div className="col-12">
-                <p className='text-danger'>{error.message}</p>
-            </div>
-            :
-            <div className="row">
-                <div className="col-12 col-lg-6 col-xl-3">
-                    <div className="card card-statistics text-center py-3" style={{backgroundColor: '#e6f5f4'}}>
-                        <div className="card-body pricing-content">
-                            <div className="pricing-content-card" style={{minHeight: '350px'}}>
-                                <h5>Your Subscription(s)</h5>
-                                <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+            <BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']}/>
 
+            {isFetching ?
                 <>
-                    {Object.entries(otherSubscriptions)?.map(([key, value]) => (
-
-                    <div key={key} className="col-12 col-lg-6 col-xl-3">
-                        <div className="card card-statistics text-center py-3">
-                            <div className="card-body pricing-content">
-                                <div className="pricing-content-card" style={{minHeight: '350px'}}>
-                                    <h5>{value.display_name}</h5>
-                                    <h2 className="text-primary pt-3">${value.monthly}</h2>
-                                    <p className="text-primary pb-3">/ Monthly</p>
-                                        <ol className="py-2" style={{fontSize: '14px', fontWeight:'bold', textAlign:'left'}}>
-                                            {value?.items?.map(item =>(
-                                            <li key={item.description}>{item.description}</li>
-                                            ))}
-                                        </ol>
-                                    <div className="pt-2">
-                                        <button  onClick={()=>{navigate(siteLinks.subscribe, {state:{selectedSubscription: value}})}} className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </>
+                : isError ?
+                    <div className="col-12">
+                        <p className='text-danger'>{error.message}</p>
+                    </div>
+                    :
+                    <div className="row">
+                        <div className="col-12 col-lg-6 col-xl-3">
+                            <div className="card card-statistics text-center py-3" style={{backgroundColor: '#e6f5f4'}}>
+                                <div className="card-body pricing-content">
+                                    <div className="pricing-content-card" style={{minHeight: '350px'}}>
+                                        <h5>Your Subscription(s)</h5>
+                                        <h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
+                                    </div>
+                                    <div className="pt-2" style={{textAlign: 'left'}}>
+                                        <div style={{fontSize: '10px'}}>
+                                            Next Payment: {currentSubscription?.next_payment}
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
+
+                        <>
+                            {Object.entries(otherSubscriptions)?.map(([key, value]) => (
+
+                                <div key={key} className="col-12 col-lg-6 col-xl-3">
+                                    <div className="card card-statistics text-center py-3">
+                                        <div className="card-body pricing-content">
+                                            <div className="pricing-content-card" style={{minHeight: '350px'}}>
+                                                <h5>{value.display_name}</h5>
+                                                <h2 className="text-primary pt-3">${value.monthly}</h2>
+                                                <p className="text-primary pb-3">/ Monthly</p>
+                                                <ol className="py-2"
+                                                    style={{fontSize: '16px', fontWeight: 'bold', textAlign: 'left'}}>
+                                                    {value?.items?.map(item => (
+                                                        <li key={item.description}>{item.description}</li>
+                                                    ))}
+                                                </ol>
+
+                                            </div>
+                                        </div>
+                                        <div className="pt-2">
+                                            <button onClick={() => {
+                                                navigate(siteLinks.subscribe, {state: {selectedSubscription: value}})
+                                            }}
+                                                    className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            ))}
+                        </>
+
                     </div>
-
-                    ))}
-                </>
-
-            </div>
-        }
+            }
         </>
     )
 }
\ No newline at end of file