diff --git a/src/RouteLinks.js b/src/RouteLinks.js
index 3b838e3..5c2b75c 100644
--- a/src/RouteLinks.js
+++ b/src/RouteLinks.js
@@ -3,6 +3,7 @@ const RouteLinks = {
     homePage: '/',
     customerPage: '/customer',
     accountDetails: '/account-view/*',
+    subscriptionDetails: '/subscription-view/*',
     subscriptions: '/subscriptions',
     billings: '/billings',
     recentSignup: '/recent-signup',
diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx
index 1048150..792a00d 100644
--- a/src/SiteRoutes.jsx
+++ b/src/SiteRoutes.jsx
@@ -19,7 +19,8 @@ import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
 import TransactionDetailsPage from './pages/TransactionDetailsPage'
 import AccountDetailsPage from "./pages/AccountDetailsPage";
 import ProductTemplatePage from "./pages/ProductTemplatePage";
-import CustomTemplatePage from "./pages/CustomTemplatePage"; // TRANSACTION DETAILS PAGE
+import CustomTemplatePage from "./pages/CustomTemplatePage";
+import SubscriptionDetailsPage from "./pages/SubscriptionDetailsPage"; // TRANSACTION DETAILS PAGE
 
 
 // const Home = lazy(() => import('./pages/Home'));
@@ -45,6 +46,7 @@ export default function SiteRoutes() {
                 <Route path={RouteLinks.loansPage} element={<LoansPage/>}/> {`*/LOANS PAGE*/`}
                 <Route path={RouteLinks.transaction_details_page}
                        element={<TransactionDetailsPage/>}/> {`*/TRANSACTION PAGE*/`}
+                <Route path={RouteLinks.subscriptionDetails} element={<SubscriptionDetailsPage/>} />
             </Route>
 
             {/* ERROR PAGE */}
diff --git a/src/components/subscription_view/SubscriptionViewCom.jsx b/src/components/subscription_view/SubscriptionViewCom.jsx
new file mode 100644
index 0000000..06ee951
--- /dev/null
+++ b/src/components/subscription_view/SubscriptionViewCom.jsx
@@ -0,0 +1,20 @@
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+
+export default function SubscriptionViewCom() {
+
+    const subscriptionUID = "63554d40-9ba1-4afe-80c2-ca147236f7ee";
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title={`Subscription View [${subscriptionUID}]`} paths={['Dashboard', 'Subscription View']}/>
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+
+                        <>
+                            Show all here
+                        </>
+
+
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/SubscriptionDetailsPage.jsx b/src/pages/SubscriptionDetailsPage.jsx
new file mode 100644
index 0000000..a1343cd
--- /dev/null
+++ b/src/pages/SubscriptionDetailsPage.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import SubscriptionViewCom from "../components/subscription_view/SubscriptionViewCom";
+export default function SubscriptionDetailsPage() {
+    return (
+        <SubscriptionViewCom />
+    )
+}