diff --git a/src/components/account_view/AccountViewCom.jsx b/src/components/account_view/AccountViewCom.jsx
index 64b5e8e..ae3720d 100644
--- a/src/components/account_view/AccountViewCom.jsx
+++ b/src/components/account_view/AccountViewCom.jsx
@@ -14,12 +14,12 @@ import CustomerPaymentsView from "./CustomerPaymentsView";
 
 export default function AccountViewCom() {
 
-    const {state:{memberUID}} = useLocation()
+    const {state} = useLocation()
     const navigate = useNavigate()
 
     useEffect(()=>{
-        if(!memberUID){
-            navigate(RouteLinks.customerPage, {replace: true})
+        if(!state?.memberUID){
+            navigate(RouteLinks.homePage, {replace: true})
         }
     },[])
 
@@ -28,7 +28,7 @@ export default function AccountViewCom() {
         queryFn: () => {
             // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
             const reqData = {
-                member_uid: memberUID
+                member_uid: state?.memberUID
                 // page,
                 // ...filterData
             }
@@ -45,7 +45,7 @@ export default function AccountViewCom() {
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title={`Account View [${memberUID}]`} paths={['Dashboard', 'Account View']}/>
+            <BreadcrumbCom title={`Account View [${state?.memberUID}]`} paths={['Dashboard', 'Account View']}/>
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                 {isFetching ? 
@@ -58,7 +58,7 @@ export default function AccountViewCom() {
                         <>
                             <CustomerAccountView accountInfo={account_info} />
                             <AccountProfileView profile={account_profile} />
-                            <CustomerSubscriptionsView subscriptions={subscriptions} memberUID={memberUID} />
+                            <CustomerSubscriptionsView subscriptions={subscriptions} />
                             <CustomerPaymentsView payments={payments} />
                         </>
 
diff --git a/src/components/account_view/CustomerSubscriptionsView.jsx b/src/components/account_view/CustomerSubscriptionsView.jsx
index d4336c4..507b6e8 100644
--- a/src/components/account_view/CustomerSubscriptionsView.jsx
+++ b/src/components/account_view/CustomerSubscriptionsView.jsx
@@ -3,7 +3,7 @@ import RouteLinks from "../../RouteLinks";
 import Icons from "../Icons";
 import {Link} from 'react-router-dom'
 
-export default function CustomerSubscriptionsView({subscriptions, memberUID}) {
+export default function CustomerSubscriptionsView({subscriptions}) {
     return <>
         <div className="pb-5">
             <div className="flex flex-col gap-1">
@@ -70,7 +70,7 @@ export default function CustomerSubscriptionsView({subscriptions, memberUID}) {
                                             <div className='flex items-center justify-end gap-3 md:gap-4'>
                                                 <div
                                                     className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                    <Link to={`/subscription-view/${item?.subscription_uid}`} state={{customerID: item?.id, memberUID}}>
+                                                    <Link to={`/subscription-view/${item?.subscription_uid}`} state={{customerID: item?.id, subscriptionUID: item?.subscription_uid}}>
                                                         <Icons name='eye'/>
                                                     </Link>
                                                 </div>
diff --git a/src/components/home/HomeCom.jsx b/src/components/home/HomeCom.jsx
index 8beceb4..09247ac 100644
--- a/src/components/home/HomeCom.jsx
+++ b/src/components/home/HomeCom.jsx
@@ -155,7 +155,9 @@ export default function HomeCom() {
                                                             <div className='flex items-center justify-end gap-3 md:gap-4'>
                                                                 <div
                                                                     className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                                    <Link to={`/subscription-view/${item?.uid}`}>
+                                                                    <Link to={`/subscription-view/${item?.uid}`}
+                                                                        state={{subscriptionUID: item?.uid}}
+                                                                    >
                                                                         <Icons name='eye'/>
                                                                     </Link>
                                                                 </div>
diff --git a/src/components/subscription_view/SubscriptionViewCom.jsx b/src/components/subscription_view/SubscriptionViewCom.jsx
index e1d7c0c..8db7abd 100644
--- a/src/components/subscription_view/SubscriptionViewCom.jsx
+++ b/src/components/subscription_view/SubscriptionViewCom.jsx
@@ -1,47 +1,96 @@
 import {useLocation, useNavigate, Link} from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { FaCaretDown } from "react-icons/fa";
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import {useEffect} from 'react';
+import RouteLinks from '../../RouteLinks';
+import { getSubscriptionsView } from '../../services/siteServices'
+import queryKeys from '../../services/queryKeys'
 
 export default function SubscriptionViewCom() {
 
-    const subscriptionUID = "63554d40-9ba1-4afe-80c2-ca147236f7ee";
 
-    const {state: {memberUID}} = useLocation()
+    const {state} = useLocation()
     const navigate = useNavigate()
 
     useEffect(() => {
-        if (!memberUID) {
-            navigate(`/account-view/${memberUID}`, {replace: true, state: {memberUID}})
+        if (!state?.subscriptionUID) {
+            navigate(RouteLinks.homePage, {replace: true})
         }
     }, [])
 
+        const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.subscriptions_view,
+        queryFn: () => {
+            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                subscription_uid: state?.subscriptionUID
+                // page,
+                // ...filterData
+            }
+            return getSubscriptionsView(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const subscriptionViewData = data?.data // ACCOUNT VIEW DATA
+    console.log('subscriptionViewData', subscriptionViewData)
+
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title={`Subscription View [${memberUID}]`} paths={['Dashboard', 'Subscription View']}/>
+            <BreadcrumbCom title={`Subscription View [${state?.subscriptionUID}]`} paths={['Dashboard', 'Subscription View']}/>
 
-            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+            {isFetching ? 
+            <>
+                <p className='text-slate-800'>Loading...</p>
+            </>
+            : isError ?
+                <p className='text-red-500'>{error.message}</p>
+            :
+                <>
+                    <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
 
-                <div>
-                    Repeat the Subscription at the top
+                        <div>
+                            Repeat the Subscription at the top
 
-                </div>
-            </div>
+                        </div>
+                    </div>
 
-            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                    <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
 
-                <div>
-                    <b>Assign Template</b>
+                        <div className='w-full'>
+                            <label className='font-medium'>Assign Template</label>
+                            <div className='flex flex-col md:flex-row md:items-center gap-2'>
+                                <div className='w-full relative'>
+                                    <select className='w-full p-2'>
+                                        <option value=''>None</option>
+                                    </select>
+                                    <FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2' />
+                                </div>
+                                <button>Update</button>
+                            </div>
 
-                </div>
-            </div>
+                        </div>
+                    </div>
 
-            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                    <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
 
-                <div>
-                    <b>Assign Custom Template</b>
+                        <div className='w-full'>
+                            <label className='font-medium'>Assign Custom Template</label>
+                            <div className='flex flex-col md:flex-row md:items-center gap-2'>
+                                <div className='w-full relative'>
+                                    <select className='w-full p-2'>
+                                        <option value=''>None</option>
+                                    </select>
+                                    <FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2' />
+                                </div>
+                                <button>Update</button>
+                            </div>
+
+                        </div>
+                    </div>
+                </>
+            }
 
-                </div>
-            </div>
 
         </div>
     )
diff --git a/src/components/transactions/SubscriptionsCom.jsx b/src/components/transactions/SubscriptionsCom.jsx
index 271461c..aacb4fa 100644
--- a/src/components/transactions/SubscriptionsCom.jsx
+++ b/src/components/transactions/SubscriptionsCom.jsx
@@ -146,7 +146,7 @@ export default function SubscriptionsCom() {
                                                             <div
                                                                 className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
                                                                 <Link to={`/subscription-view/${item?.subscription_uid}`}
-                                                                    // state={{customerID: item?.id, memberUID: item?.member_uid}}
+                                                                    state={{customerID: item?.id, subscriptionUID: item?.subscription_uid}}
                                                                 >
                                                                     <Icons name='eye'/>
                                                                 </Link>
diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js
index 887a02f..77f2a05 100644
--- a/src/services/queryKeys.js
+++ b/src/services/queryKeys.js
@@ -20,6 +20,7 @@ const queryKeys = {
     products_template: ['products_template'],
     custom_template: ['custom_template'],
     account_view: ['account_view'],
+    subscriptions_view: ['subscriptions_view'],
     users_admin: ['users_admin'],
 }
 
diff --git a/src/services/siteServices.js b/src/services/siteServices.js
index 3ab7350..11c4bc8 100644
--- a/src/services/siteServices.js
+++ b/src/services/siteServices.js
@@ -116,6 +116,12 @@ export const getAccountView = (reqData) => {
     return getAuxEnd(`/account-view`, postData)
 }
 
+// FUNCTION TO GET SUBSCRIPTIONS VIEW DATA
+export const getSubscriptionsView = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/subcription-view`, postData)
+}
+
 
 // FUNCTION TO GET LOANS TABLE
 export const getLoans = (reqData) => {