diff --git a/src/RouteLinks.js b/src/RouteLinks.js
index 7370a33..0fce794 100644
--- a/src/RouteLinks.js
+++ b/src/RouteLinks.js
@@ -2,6 +2,7 @@ const RouteLinks = {
     loginPage: '/auth/login',
     homePage: '/',
     customerPage: '/customer',
+    accountDetails: '/account-view/*',
     subscriptions: '/subscriptions',
     billings: '/billings',
     recentSignup: '/recent-signup',
@@ -9,6 +10,8 @@ const RouteLinks = {
     transactionsPage: '/transactions',
     products: '/products',
     usersAdmin: '/users-admin',
+    productTemplates: '/products',
+    customTemplates: '/products',
     transaction_details_page: '/transaction/details',
     errorPage: '*',
 }
diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx
index f571d47..d145ba4 100644
--- a/src/SiteRoutes.jsx
+++ b/src/SiteRoutes.jsx
@@ -16,7 +16,8 @@ import ProductsPage from './pages/ProductsPage' // PRODUCTS PAGE
 import ErrorPage from './pages/ErrorPage';
 
 import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
-import TransactionDetailsPage from './pages/TransactionDetailsPage' // TRANSACTION DETAILS PAGE
+import TransactionDetailsPage from './pages/TransactionDetailsPage'
+import AccountDetailsPage from "./pages/AccountDetailsPage"; // TRANSACTION DETAILS PAGE
 
 
 
@@ -32,6 +33,7 @@ export default function SiteRoutes() {
         <Route path={RouteLinks.recentSignup} element={<RecentSignupPage />} /> {`*/RECENT SIGNUP PAGE*/`}
         <Route path={RouteLinks.subscriptions} element={<SubscriptionsPage />} /> {`*/SUBSCRIPTIONS PAGE*/`}
         <Route path={RouteLinks.customerPage} element={<CustomerPage />} /> {`*/CUSTOMER PAGE*/`}
+        <Route path={RouteLinks.accountDetails} element={<AccountDetailsPage />} /> {`*/CUSTOMER PAGE*/`}
         <Route path={RouteLinks.billings} element={<BillingsPage />} /> {`*/BILLINGS PAGE*/`}
         <Route path={RouteLinks.products} element={<ProductsPage />} /> {`*/PRODUCTS PAGE*/`}
         <Route path={RouteLinks.usersAdmin} element={<UsersAdminPage />} /> {`*/ADMIN USERS PAGE*/`}
diff --git a/src/components/account_view/AccountViewCom.jsx b/src/components/account_view/AccountViewCom.jsx
new file mode 100644
index 0000000..f573961
--- /dev/null
+++ b/src/components/account_view/AccountViewCom.jsx
@@ -0,0 +1,18 @@
+import {useEffect, useState} from 'react'
+import {Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+
+export default function AccountViewCom() {
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Account View [PUT MEMBER_UID]' paths={['Dashboard', 'Account View']}/>
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+
+
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/customer/CustomerCom.jsx b/src/components/customer/CustomerCom.jsx
index 44e472c..0fafef7 100644
--- a/src/components/customer/CustomerCom.jsx
+++ b/src/components/customer/CustomerCom.jsx
@@ -133,7 +133,8 @@ export default function CustomerCom() {
                                                         <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={''} state={{customerID: item?.id}}>
+                                                                <Link to={`/account-view/${item?.member_uid}`}
+                                                                      state={{customerID: item?.id}}>
                                                                     <Icons name='eye'/>
                                                                 </Link>
                                                             </div>
diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx
index 1c8a873..d2fbc4f 100644
--- a/src/components/layouts/aside/DashboardAside.jsx
+++ b/src/components/layouts/aside/DashboardAside.jsx
@@ -158,6 +158,8 @@ const asideNavLinks = [
             {
                 name: 'Configurations', status: 1, icon: 'arrow-right', subLinks: [
                     {name: 'Product Settings', status: 1, icon: 'dot', to: RouteLinks.products},
+                    {name: 'Product Templates', status: 1, icon: 'dot', to: RouteLinks.productTemplates},
+                    {name: 'Custom Templates', status: 1, icon: 'dot', to: RouteLinks.customTemplates},
                     {name: 'Admin Manager', status: 1, icon: 'dot', to: RouteLinks.usersAdmin},
                 ]
             },
diff --git a/src/components/users_admin/UsersAdmin.jsx b/src/components/users_admin/UsersAdmin.jsx
index 027b4e1..a490a87 100644
--- a/src/components/users_admin/UsersAdmin.jsx
+++ b/src/components/users_admin/UsersAdmin.jsx
@@ -62,12 +62,13 @@ export default function UsersAdmin() {
                 :
                 <>
                     {/* filter section */}
-                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2' >
                         <Icons name='filter' className='text-3xl' />
                         <div className='w-full sm:max-w-48'>
                             <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
                                 <option value=''>All</option>
                                 <option value='name'>Name</option>
+                                <option value='username'>Username</option>
                             </select>
                         </div>
                         <div className='w-full sm:max-w-48'>
@@ -90,7 +91,7 @@ export default function UsersAdmin() {
                                         Added
                                     </th>
                                     <th scope="col" className="px-2">
-                                        Firstnane
+                                        Firstname
                                     </th>
                                     <th scope="col" className="px-2">
                                         Lastname
diff --git a/src/pages/AccountDetailsPage.jsx b/src/pages/AccountDetailsPage.jsx
new file mode 100644
index 0000000..b710ca8
--- /dev/null
+++ b/src/pages/AccountDetailsPage.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import AccountViewCom from "../components/account_view/AccountViewCom";
+export default function AccountDetailsPage() {
+    return (
+        <AccountViewCom />
+    )
+}