diff --git a/ui/ui/sections/footer.tpl b/ui/ui/sections/footer.tpl
new file mode 100644
index 0000000..825e3e3
--- /dev/null
+++ b/ui/ui/sections/footer.tpl
@@ -0,0 +1,121 @@
+            </div>
+        </div>
+        <!--**********************************
+                Content body end
+        ***********************************-->
+
+        <!--**********************************
+                Footer start
+            ***********************************-->
+        <div class="footer">
+            <div class="copyright">
+    <p>Designed & Developed with <span class="heart"></span> by <a href="https://www.nestict.africa/" target="_blank" rel="noopener noreferrer">NESTICT</a>
+ &copy; <span id="year"></span></p>
+</div>
+
+<script>
+  document.getElementById('year').textContent = new Date().getFullYear();
+</script>
+            </div>
+        </div>
+        <!--**********************************
+                Footer end
+        ***********************************-->
+        </div>
+        <!--**********************************
+            Scripts
+        ***********************************-->
+        <script src="ui/ui/scripts/jquery.min.js"></script>
+        <script src="ui/ui/assets/vendor/global/global.min.js"></script>
+        <script src="ui/ui/scripts/bootstrap.min.js"></script>
+    	<script src="ui/ui/assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
+    	<script src="ui/ui/assets/vendor/chart.js/Chart.bundle.min.js"></script>
+    	
+    	<!-- Chart piety plugin files -->
+        <script src="ui/ui/assets/vendor/peity/jquery.peity.min.js"></script>
+    	
+    	<!-- Apex Chart -->
+    	<!--<script src="ui/ui/assets/vendor/apexchart/apexchart.js"></script>-->
+    	
+    	<!-- Dashboard 1 -->
+    	<script src="ui/ui/assets/js/dashboard/dashboard-1.js"></script>
+    	
+        <script src="ui/ui/assets/js/custom.min.js"></script>
+    	<script src="ui/ui/assets/js/deznav-init.js"></script>
+    	<script src="ui/ui/assets/js/demo.js"></script>
+        <!--<script src="ui/ui/assets/js/styleSwitcher.js"></script>   -->
+        
+        
+        <script src="ui/ui/scripts/plugins/select2.min.js"></script>
+        <script src="ui/ui/scripts/pace.min.js"></script>
+        <script src="ui/ui/scripts/custom.js"></script>
+
+
+
+        {if isset($xfooter)}
+            {$xfooter}
+        {/if}
+        {literal}
+            <script>
+                $(document).ready(function() {
+                // Select2 initialization
+                $('.select2').select2({
+                    width: '100%',
+                    height: '52px',
+                    containerCssClass: ':all:'
+                });
+                $('.select2tag').select2({
+                    width: '100%',
+                    height: '52px',
+                    tags: true,
+                    containerCssClass: ':all:'
+                });
+    
+                // Button click event listeners
+                var listAtts = document.querySelectorAll(`button[type="submit"]`);
+                listAtts.forEach(function(el) {
+                    if (el.addEventListener) {
+                        el.addEventListener("click", function() {
+                            $(this).html(`<span class="loading"></span>`);
+                        }, false);
+                    } else {
+                        if (el.attachEvent) {
+                            el.attachEvent("click", function() {
+                                $(this).html(`<span class="loading"></span>`);
+                            });
+                        }
+                    }
+                });
+
+                var listAtts = document.querySelectorAll(`[api-get-text]`);
+                listAtts.forEach(function(el) {
+                    $.get(el.getAttribute('api-get-text'), function(data) {
+                        el.innerHTML = data;
+                    });
+                });
+
+                function setCookie(name, value, days) {
+                    var expires = "";
+                    if (days) {
+                        var date = new Date();
+                        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+                        expires = "; expires=" + date.toUTCString();
+                    }
+                    document.cookie = name + "=" + (value || "") + expires + "; path=/";
+                }
+
+                function getCookie(name) {
+                    var nameEQ = name + "=";
+                    var ca = document.cookie.split(';');
+                    for (var i = 0; i < ca.length; i++) {
+                        var c = ca[i];
+                        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+                        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+                    }
+                    return null;
+                }
+            </script>
+        {/literal}
+    </body>
+
+</html>
\ No newline at end of file
diff --git a/ui/ui/sections/header.tpl b/ui/ui/sections/header.tpl
new file mode 100644
index 0000000..c4ca2d1
--- /dev/null
+++ b/ui/ui/sections/header.tpl
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="shortcut icon" href="https://laravel.com/img/favicon/favicon-16x16.png" type='image/x-icon'>
+        <title>{$_title} - {$_c['CompanyName']}</title>
+        <link rel="stylesheet" href="ui/ui/assets/vendor/chartist/css/chartist.min.css">
+        <link href="ui/ui/assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
+        <link href="ui/ui/assets/css/style.css" rel="stylesheet">
+        <link rel="stylesheet" href="ui/ui/fonts/ionicons/css/ionicons.min.css">
+        <link rel="stylesheet" href="ui/ui/fonts/font-awesome/css/font-awesome.min.css">
+        <link rel="stylesheet" href="ui/ui/styles/select2.min.css" />
+        <link rel="stylesheet" href="ui/ui/styles/select2-bootstrap.min.css" />
+        <link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
+        <link rel="stylesheet" href="ui/ui/styles/plugins/pace.css" />
+        <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
+        
+            <style>
+        ::-moz-selection {
+             Code for Firefox 
+            color: red;
+            background: yellow;
+        }
+
+        ::selection {
+            color: red;
+            background: yellow;
+        }
+
+        .select2-container .select2-selection--single .select2-selection__rendered {
+            margin-top: 0px !important;
+        }
+
+        @media (min-width: 768px) {
+            .outer {
+                height: 200px
+                    /* Or whatever */
+            }
+        }
+
+        th:first-child,
+        td:first-child {
+            position: sticky;
+            left: 0px;
+            background-color: #f9f9f9;
+        }
+
+
+        .text1line {
+            display: block;
+            /* or inline-block */
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+            overflow: hidden;
+            max-height: 1em;
+            line-height: 1em;
+        }
+
+
+        .loading {
+            pointer-events: none;
+            opacity: 0.7;
+        }
+
+        .loading::after {
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            vertical-align: middle;
+            margin-left: 10px;
+            border: 2px solid #fff;
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: spin 0.8s infinite linear;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+       /*
+         * maintenance top-bar 
+         */
+
+         .notification-top-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 40px;
+            line-height: 40px;
+            width: 100%;
+            background: #ec2106;
+            text-align: center;
+            color: #FFFFFF;
+            font-family: serif;
+            font-weight: bolder;
+            font-size: 14px;
+            z-index: 9999;
+            box-sizing: border-box;
+            padding: 0 10px;
+        }
+
+        .notification-top-bar p {
+            padding: 0;
+            margin: 0;
+        }
+
+        .notification-top-bar p a {
+            padding: 5px 10px;
+            border-radius: 3px;
+            background: #FFF;
+            color: #1ABC9C;
+            font-weight: bold;
+            text-decoration: none;
+            display: inline;
+            font-size: inherit;
+        }
+
+        @media (max-width: 600px) {
+            .notification-top-bar {
+                font-size: 12px;
+                height: auto;
+                line-height: normal;
+                padding: 10px;
+            }
+
+            .notification-top-bar p a {
+                padding: 5px 10px;
+                margin: 5px 0;
+                font-size: 10px;
+                display: inline-block;
+            }
+        }
+    </style>
+        {if isset($xheader)}
+        {$xheader}
+        {/if}
+    </head>
+
+    <body>
+        <!--**********************************
+            Main wrapper start
+                ***********************************-->
+        <div id="main-wrapper">
+
+            <!--**********************************
+                    Nav header start
+                ***********************************-->
+			<div class="nav-header">
+				<a href="#" class="brand-logo">
+					<i class="logo-abbr fa-brands fa-stumbleupon"></i>
+					<p class="brand-title" width="124px" height="33px"  style="font-size: 30px;">Admin</p>
+				</a>
+				<div class="nav-control">
+					<div class="hamburger">
+						<span class="line"></span><span class="line"></span><span class="line"></span>
+					</div>
+				</div>
+			</div>
+            <!--**********************************
+                    Nav header end
+                ***********************************-->
+
+
+
+            <!--**********************************
+                    Header start
+                ***********************************-->
+            <div class="header">
+                <div class="header-content">
+                    <nav class="navbar navbar-expand">
+                        <div class="collapse navbar-collapse justify-content-between">
+                            <div class="header-left">
+                                <div class="dashboard_bar">
+                                    {$_c['CompanyName']}
+                                </div>
+                            </div>
+                            <ul class="navbar-nav header-right">
+                                <li class="nav-item">
+                                    <div class="input-group search-area d-lg-inline-flex d-none">
+                                        <div class="input-group-append">
+                                            <span class="input-group-text"><a href="javascript:void(0)"><i
+                                                        class="flaticon-381-search-2"></i></a></span>
+                                        </div>
+                                        <input type="text" class="form-control" placeholder="Search here...">
+                                    </div>
+                                </li>
+                                <li class="nav-item dropdown header-profile">
+                                    <a class="nav-link" href="javascript:void(0);" role="button" data-bs-toggle="dropdown">
+                                        <img src="https://robohash.org/{$_admin['id']}?set=set3&size=100x100&bgset=bg1"
+                                    onerror="this.src='{$UPLOAD_PATH}/admin.default.png'" class="user-image"
+                                    alt="Avatar">
+                                        <div class="header-info">
+                                            <p>
+                                                {$_admin['fullname']}
+                                                <small>{Lang::T($_admin['user_type'])}</small>
+                                            </p>
+                                        </div>
+                                    </a>
+                                    <div class="dropdown-menu dropdown-menu-end">
+                                        <a class="dropdown-item ai-icon" href="{$_url}settings/change-password"><i class="fa fa-settings"></i>
+                                            {Lang::T('Change Password')}</a>
+                                        <a class="dropdown-item ai-icon" href="{$_url}settings/users-view/{$_admin['id']}">
+                                            <i class="fa fa-person"></i> {Lang::T('My Account')}</a>
+                                        <a href="{$_url}logout" class="dropdown-item ai-icon btn btn-primary btn-flat"><i
+                                            class="fa fa-power"></i> {Lang::T('Logout')}</a>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+            <!--**********************************
+                    Header end ti-comment-alt
+                ***********************************-->
+
+            <!--**********************************
+                    Sidebar start
+                ***********************************-->
+            <div class="deznav">
+                <div class="deznav-scroll dz-demo-content">
+                    <ul class="metismenu" id="menu" data-widget="tree">
+                        <li {if $_system_menu eq 'dashboard' }class="active" {/if}>
+                            <a href="{$_url}dashboard">
+                                <i class="flaticon-layout"></i> <span class="nav-text">{Lang::T('Dashboard')}</span>
+                            </a>
+                        </li>
+                        {$_MENU_AFTER_DASHBOARD}
+                        {if !in_array($_admin['user_type'],['Report'])}
+                        <li class="{if in_array($_system_menu, ['customers', 'map'])}active{/if} treeview">
+                            <a href="#">
+                                <i class="flaticon-381-user-2"></i> <span class="nav-text">{Lang::T('Clients')}</span>
+                                <span class="pull-right-container">
+                                    <i class="fa fa-angle-down pull-right"></i>
+                                </span>
+                            </a>
+                            <ul class="treeview-menu">
+                                <li {if $_system_menu eq 'customers' }class="active" {/if}><a
+                                        href="{$_url}customers">{Lang::T('All Clients')}</a></li>
+                                <li {if $_system_menu eq 'map' }class="active" {/if}><a
+                                        href="{$_url}map/customer">{Lang::T('Clients Map')}</a></li>
+                                {$_MENU_CUSTOMERS}
+                            </ul>
+                        </li>
+                        {$_MENU_AFTER_CUSTOMERS}
+                        <li class="{if $_system_menu eq 'onlineusers'}active{/if} treeview">
+                            <a href="#">
+                                <i class="fa fa-signal"></i> <span class="nav-text">{Lang::T('Online Clients')}</span>
+                                <span class="pull-right-container">
+                                    <i class="fa fa-angle-down pull-right"></i>
+                                </span>
+                            </a>
+                            <ul class="treeview-menu">
+                                <li {if $_routes[1] eq 'hotspot' }class="active" {/if}><a
+                                        href="{$_url}onlineusers/hotspot">{Lang::T('Hotspot Client')}</a></li>
+                                <li {if $_routes[1] eq 'pppoe' }class="active" {/if}><a
+                                    href="{$_url}plugin/pppoe">{Lang::T('Pppoe Clients')}</a></li>
+                                {$_MENU_ONLINEUSERS}
+                            </ul>
+                        </li>
+                        <li class="{if $_system_menu eq 'plan'}active{/if} treeview">
+                            <a href="#">
+                                <i class="flaticon-381-layer"></i> <span class="nav-text">{Lang::T('Services')}</span>
+                                <span class="pull-right-container">
+                                    <i class="fa fa-angle-down pull-right"></i>
+                                </span>
+                            </a>
+                            <ul class="treeview-menu">
+                                <li {if $_routes[1] eq 'list' }class="active" {/if}><a
+                                        href="{$_url}plan/list">{Lang::T('Active Clients')}</a></li>
+                                {if $_c['disable_voucher'] != 'yes'}
+                                    <li {if $_routes[1] eq 'voucher' }class="active" {/if}><a
+                                            href="{$_url}plan/voucher">{Lang::T('Vouchers')}</a></li>
+                                    <li {if $_routes[1] eq 'refill' }class="active" {/if}><a
+                                            href="{$_url}plan/refill">{Lang::T('Refill Client')}</a></li>
+                                {/if}
+                                <li {if $_routes[1] eq 'recharge' }class="active" {/if}><a
+                                        href="{$_url}plan/recharge">{Lang::T('Recharge Client')}</a></li>
+                                {if $_c['enable_balance'] == 'yes'}
+                                    <li {if $_routes[1] eq 'deposit' }class="active" {/if}><a
+                                            href="{$_url}plan/deposit">{Lang::T('Refill Balance')}</a></li>
+                                {/if}
+                                {$_MENU_SERVICES}
+                            </ul>
+                        </li>
+                    {/if}
+                    {$_MENU_AFTER_SERVICES}
+                    {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
+                        <li class="{if $_system_menu eq 'services'}active{/if} treeview">
+                            <a href="#">
+                                <i class="flaticon-381-network-3"></i> <span class="nav-text">{Lang::T('Internet Plan')}</span>
+                                <span class="pull-right-container">
+                                    <i class="fa fa-angle-down pull-right"></i>
+                                </span>
+                            </a>
+                            <ul class="treeview-menu">
+                                <li {if $_routes[1] eq 'hotspot' }class="active" {/if}><a
+                                        href="{$_url}services/hotspot">{Lang::T('Hotspot')}</a></li>
+                                <li {if $_routes[1] eq 'pppoe' }class="active" {/if}><a
+                                        href="{$_url}services/pppoe">{Lang::T('PPPOE')}</a></li>
+                                <li {if $_routes[1] eq 'list' }class="active" {/if}><a
+                                        href="{$_url}bandwidth/list">{Lang::T('Bandwidth')}</a></li>
+                                {if $_c['enable_balance'] == 'yes'}
+                                    <li {if $_routes[1] eq 'balance' }class="active" {/if}><a
+                                            href="{$_url}services/balance">{Lang::T('Balance')}</a></li>
+                                {/if}
+                                {$_MENU_PLANS}
+                            </ul>
+                        </li>
+                    {/if}
+                    {$_MENU_AFTER_PLANS}
+                    <li class="{if $_system_menu eq 'reports'}active{/if} treeview">
+                        <a href="#">
+                            <i class="flaticon-381-bookmark"></i> <span class="nav-text">{Lang::T('Reports')}</span>
+                            <span class="pull-right-container">
+                                <i class="fa fa-angle-down pull-right"></i>
+                            </span>
+                        </a>
+                        <ul class="treeview-menu">
+                            <li {if $_routes[1] eq 'daily-report' }class="active" {/if}><a
+                                    href="{$_url}reports/daily-report">{Lang::T('Daily Reports')}</a></li>
+                            <li {if $_routes[1] eq 'by-period' }class="active" {/if}><a
+                                    href="{$_url}reports/by-period">{Lang::T('Period Reports')}</a></li>
+                            <li {if $_routes[1] eq 'activation' }class="active" {/if}><a
+                                    href="{$_url}reports/activation">{Lang::T('Activation History')}</a></li>
+                            {$_MENU_REPORTS}
+                        </ul>
+                    </li>
+                    {$_MENU_AFTER_REPORTS}
+                    <li class="{if $_system_menu eq 'message'}active{/if} treeview">
+                        <a href="#">
+                            <i class="flaticon-381-send-1"></i> <span class="nav-text">{Lang::T('Send Message')}</span>
+                            <span class="pull-right-container">
+                                <i class="fa fa-angle-down pull-right"></i>
+                            </span>
+                        </a>
+                        <ul class="treeview-menu">
+                            <li {if $_routes[1] eq 'send' }class="active" {/if}><a
+                                    href="{$_url}message/send">{Lang::T('Single Customer')}</a></li>
+                            <li {if $_routes[1] eq 'send_bulk' }class="active" {/if}><a
+                                    href="{$_url}message/send_bulk">{Lang::T('Bulk Customers')}</a></li>
+                            <li {if $_routes[1] eq 'messages' }class="active" {/if}><a
+                            href="{$_url}messages">{Lang::T('Sent Messages')}</a></li>
+                            {$_MENU_MESSAGE}
+                        </ul>
+                    </li>
+                    {$_MENU_AFTER_MESSAGE}
+                    {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
+                        <li class="{if $_system_menu eq 'network'}active{/if} treeview">
+                            <a href="#">
+                                <i class="flaticon-381-internet"></i> <span class="nav-text">{Lang::T('Network')}</span>
+                                <span class="pull-right-container">
+                                    <i class="fa fa-angle-down pull-right"></i>
+                                </span>
+                            </a>
+                            <ul class="treeview-menu">
+                                <li {if $_routes[0] eq 'routers' and $_routes[1] eq 'list' }class="active" {/if}><a
+                                        href="{$_url}routers/list">{Lang::T('Routers')}</a></li>
+                                <li {if $_routes[0] eq 'pool' and $_routes[1] eq 'list' }class="active" {/if}><a
+                                        href="{$_url}pool/list">{Lang::T('IP Pool')}</a></li>
+                                {$_MENU_NETWORK}
+                            </ul>
+                        </li>
+                        {$_MENU_AFTER_NETWORKS}
+                        {if $_c['radius_enable']}
+                            <li class="{if $_system_menu eq 'radius'}active{/if} treeview">
+                                <a href="#">
+                                    <i class="flaticon-381-network"></i> <span class="nav-text">{Lang::T('Radius')}</span>
+                                    <span class="pull-right-container">
+                                        <i class="fa fa-angle-down pull-right"></i>
+                                    </span>
+                                </a>
+                                <ul class="treeview-menu">
+                                    <li {if $_routes[0] eq 'radius' and $_routes[1] eq 'nas-list' }class="active" {/if}><a
+                                            href="{$_url}radius/nas-list">{Lang::T('Radius NAS')}</a></li>
+                                    {$_MENU_RADIUS}
+                                </ul>
+                            </li>
+                        {/if}
+                        {$_MENU_AFTER_RADIUS}
+                        <li class="{if $_system_menu eq 'pages'}active{/if} treeview">
+                            <a href="#">
+                                <i class="flaticon-381-folder"></i> <span class="nav-text">{Lang::T("Announcement")}</span>
+                                <span class="pull-right-container">
+                                    <i class="fa fa-angle-down pull-right"></i>
+                                </span>
+                            </a>
+                            <ul class="treeview-menu">
+                                <!--<li {if $_routes[1] eq 'Order_Voucher' }class="active" {/if}><a
+                                        href="{$_url}pages/Order_Voucher">{Lang::T('Order Voucher')}</a></li>
+                                <li {if $_routes[1] eq 'Voucher' }class="active" {/if}><a
+                                        href="{$_url}pages/Voucher">{Lang::T('Voucher')} Template</a></li>-->
+                                <li {if $_routes[1] eq 'Announcement' }class="active" {/if}><a
+                                        href="{$_url}pages/Announcement">{Lang::T('Announcement')}</a></li>
+                                <li {if $_routes[1] eq 'Announcement_Customer' }class="active" {/if}><a
+                                        href="{$_url}pages/Announcement_Customer">{Lang::T('Customer Announcement')}</a>
+                                </li>
+                                <!--<li {if $_routes[1] eq 'Registratfa_Info' }class="active" {/if}><a
+                                        href="{$_url}pages/Registration_Info">{Lang::T('Registration Info')}</a></li>
+                                <li {if $_routes[1] eq 'Privacy_Policy' }class="active" {/if}><a
+                                        href="{$_url}pages/Privacy_Policy">{Lang::T('Privacy Policy')}</a></li>
+                                <li {if $_routes[1] eq 'Terms_and_Conditions' }class="active" {/if}><a
+                                        href="{$_url}pages/Terms_and_Conditions">{Lang::T('Terms and Conditions')}</a></li>-->
+                                {$_MENU_PAGES}
+                            </ul>
+                        </li>
+                    {/if}
+                    {$_MENU_AFTER_PAGES}
+                    <li
+                        class="{if $_system_menu eq 'settings' || $_system_menu eq 'paymentgateway' }active{/if} treeview">
+                        <a href="#">
+                            <i class="flaticon-381-settings-1"></i> <span class="nav-text">{Lang::T('Settings')}</span>
+                            <span class="pull-right-container">
+                                <i class="fa fa-angle-down pull-right"></i>
+                            </span>
+                        </a>
+                        <ul class="treeview-menu">
+                            {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
+                                <li {if $_routes[1] eq 'app' }class="active" {/if}><a
+                                        href="{$_url}settings/app">{Lang::T('General Settings')}</a></li>
+                                <li {if $_routes[1] eq 'localisation' }class="active" {/if}><a
+                                        href="{$_url}settings/localisation">{Lang::T('Localisation')}</a></li>
+                                <li {if $_routes[1] eq 'maintenance' }class="active" {/if}><a
+                                    href="{$_url}settings/maintenance">{Lang::T('Maintenance Mode')}</a></li>
+                                <li {if $_routes[1] eq 'notifications' }class="active" {/if}><a
+                                        href="{$_url}settings/notifications">{Lang::T('User Notification')}</a></li>
+                            {/if}
+                            {if in_array($_admin['user_type'],['SuperAdmin','Admin','Agent'])}
+                                <li {if $_routes[1] eq 'users' }class="active" {/if}><a
+                                        href="{$_url}settings/users">{Lang::T('Admin Users')}</a></li>
+                            {/if}
+                            {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
+                                <li {if $_routes[1] eq 'dbstatus' }class="active" {/if}><a
+                                        href="{$_url}settings/dbstatus">{Lang::T('Backup/Restore')}</a></li>
+                                <li {if $_system_menu eq 'paymentgateway' }class="active" {/if}>
+                                    <a href="{$_url}paymentgateway">
+                                        <span class="text">{Lang::T('Payment Setup')}</span>
+                                    </a>
+                                </li>
+                                {$_MENU_SETTINGS}
+                            {/if}
+                        </ul>
+                    </li>
+                    {$_MENU_AFTER_SETTINGS}
+                    {if in_array($_admin['user_type'],['SuperAdmin','Admin'])}
+                        <li class="{if $_system_menu eq 'logs' }active{/if} treeview">
+                            <a href="#">
+                                <i class="flaticon-381-clock"></i> <span class="nav-text">{Lang::T('Logs')}</span>
+                                <span class="pull-right-container">
+                                    <i class="fa fa-angle-down pull-right"></i>
+                                </span>
+                            </a>
+                            <ul class="treeview-menu">
+                                <li {if $_routes[1] eq 'list' }class="active" {/if}><a
+                                        href="{$_url}logs/{$_c['CompanyName']}">{$_c['CompanyName']}</a></li>
+                                {if $_c['radius_enable']}
+                                    <li {if $_routes[1] eq 'radius' }class="active" {/if}><a
+                                            href="{$_url}logs/radius">Radius</a>
+                                    </li>
+                                {/if}
+                            </ul>
+                            {$_MENU_LOGS}
+                        </li>
+                    {/if}
+                    {$_MENU_AFTER_LOGS}
+                    </ul>
+                </div>
+            </div>
+            <!--**********************************
+                    Sidebar end
+                ***********************************-->
+            {if $_c['maintenance_mode'] == 1}
+                <div class="notification-top-bar">
+                    <p>{Lang::T('The website is currently in maintenance mode, this means that some or all functionality may be
+                        unavailable to regular users during this time.')}<small> &nbsp;&nbsp;<a
+                                href="{$_url}settings/maintenance">{Lang::T('Turn Off')}</a></small></p>
+                </div>
+            {/if}
+            <!--**********************************
+                    Content body start
+                ***********************************-->
+            <div class="content-body">
+                    {if isset($notify)}
+                        <script>
+                            // Display SweetAlert toast notification
+                            Swal.fire({
+                                icon: '{if $notify_t == "s"}success{else}error{/if}',
+                                title: '{$notify}',
+                                toast: true,
+                                position: 'top-end',
+                                showConfirmButton: false,
+                                timer: 5000,
+                                timerProgressBar: true,
+                                didOpen: (toast) => {
+                                    toast.addEventListener('mouseenter', Swal.stopTimer)
+                                    toast.addEventListener('mouseleave', Swal.resumeTimer)
+                                }
+                            });
+                        </script>
+                    {/if}
diff --git a/ui/ui/sections/index.html b/ui/ui/sections/index.html
new file mode 100644
index 0000000..9757970
--- /dev/null
+++ b/ui/ui/sections/index.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+	<title>403 Forbidden</title>
+</head>
+<body>
+<p>Directory access is forbidden.</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/ui/ui/sections/user-footer.tpl b/ui/ui/sections/user-footer.tpl
new file mode 100644
index 0000000..ad02970
--- /dev/null
+++ b/ui/ui/sections/user-footer.tpl
@@ -0,0 +1,31 @@
+        </div>
+    </div>
+        <!-- Content body end -->
+
+        <!-- Footer start -->
+        <div class="footer">
+            <div class="copyright">
+                <p>© Designed & Developed &amp; by <a href="#" target="_blank">Codevibe</a> 2024</p>
+            </div>
+        </div>
+        <!-- Footer end -->
+    </div>
+    <!-- Required vendors -->
+    <script src="ui/ui/Ass/vendor/global/global.min.js"></script>
+    <script src="ui/ui/Ass/vendor/chart.js/Chart.bundle.min.js"></script>
+    <script src="ui/ui/Ass/vendor/jquery-nice-select/js/jquery.nice-select.min.js"></script>
+    <!-- Apex Chart -->
+    <script src="ui/ui/Ass/vendor/apexchart/apexchart.js"></script>
+    <script src="ui/ui/Ass/vendor/nouislider/nouislider.min.js"></script>
+    <script src="ui/ui/Ass/vendor/wnumb/wNumb.js"></script>
+    <!-- Dashboard 1 -->
+    <script src="ui/ui/Ass/js/dashboard/dashboard-1.js"></script>
+
+    <script src="ui/ui/Ass/js/custom.min.js"></script>
+    <script src="ui/ui/Ass/js/dlabnav-init.js"></script>
+    <script src="ui/ui/Ass/js/demo.js"></script>
+    <script src="ui/ui/Ass/js/styleSwitcher.js"></script>
+    <script src="ui/ui/scripts/pace.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ui/ui/sections/user-header.tpl b/ui/ui/sections/user-header.tpl
new file mode 100644
index 0000000..ba4eb2f
--- /dev/null
+++ b/ui/ui/sections/user-header.tpl
@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Customer</title>
+    <link href="ui/ui/Ass/vendor/jquery-nice-select/css/nice-select.css" rel="stylesheet">
+    <link rel="stylesheet" href="ui/ui/Ass/vendor/nouislider/nouislider.min.css">
+    <link href="ui/ui/Ass/css/style.css" rel="stylesheet">
+    <link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
+    <link rel="stylesheet" href="ui/ui/styles/plugins/pace.css" />
+    <script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
+    <style>
+        ::-moz-selection {
+            /* Code for Firefox */
+            color: red;
+            background: yellow;
+        }
+
+        ::selection {
+            color: red;
+            background: yellow;
+        }
+
+        .select2-container .select2-selection--single .select2-selection__rendered {
+            margin-top: 0px !important;
+        }
+
+        @media (min-width: 768px) {
+            .outer {
+                height: 200px
+                    /* Or whatever */
+            }
+        }
+
+        th:first-child,
+        td:first-child {
+            position: sticky;
+            left: 0px;
+            background-color: #f9f9f9;
+        }
+
+
+        .text1line {
+            display: block;
+            /* or inline-block */
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+            overflow: hidden;
+            max-height: 1em;
+            line-height: 1em;
+        }
+
+
+        .loading {
+            pointer-events: none;
+            opacity: 0.7;
+        }
+
+        .loading::after {
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            vertical-align: middle;
+            margin-left: 10px;
+            border: 2px solid #fff;
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: spin 0.8s infinite linear;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+       /*
+         * maintenance top-bar 
+         */
+
+         .notification-top-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 40px;
+            line-height: 40px;
+            width: 100%;
+            background: #ec2106;
+            text-align: center;
+            color: #FFFFFF;
+            font-family: serif;
+            font-weight: bolder;
+            font-size: 14px;
+            z-index: 9999;
+            box-sizing: border-box;
+            padding: 0 10px;
+        }
+
+        .notification-top-bar p {
+            padding: 0;
+            margin: 0;
+        }
+
+        .notification-top-bar p a {
+            padding: 5px 10px;
+            border-radius: 3px;
+            background: #FFF;
+            color: #1ABC9C;
+            font-weight: bold;
+            text-decoration: none;
+            display: inline;
+            font-size: inherit;
+        }
+
+        @media (max-width: 600px) {
+            .notification-top-bar {
+                font-size: 12px;
+                height: auto;
+                line-height: normal;
+                padding: 10px;
+            }
+
+            .notification-top-bar p a {
+                padding: 5px 10px;
+                margin: 5px 0;
+                font-size: 10px;
+                display: inline-block;
+            }
+        }
+    </style>
+</head>
+
+<body>
+
+    <!-- Preloader start -->
+    <div id="preloader">
+        <div class="waviy">
+            <span style="--i:1">L</span>
+            <span style="--i:2">o</span>
+            <span style="--i:3">a</span>
+            <span style="--i:4">d</span>
+            <span style="--i:5">i</span>
+            <span style="--i:6">n</span>
+            <span style="--i:7">g</span>
+            <span style="--i:8">.</span>
+            <span style="--i:9">.</span>
+            <span style="--i:10">.</span>
+        </div>
+    </div>
+    <!-- Preloader end -->
+    <!-- Main wrapper start -->
+    <div id="main-wrapper">
+        <!-- Header start -->
+        <div class="header">
+            <div class="header-content">
+                <nav class="navbar navbar-expand">
+                    <div class="collapse navbar-collapse justify-content-between">
+                        <div class="header-left">
+                            <div class="dashboard_bar">
+                                Dashboard
+                            </div>
+                        </div>
+                        <ul class="navbar-nav header-right">
+                            <li class="nav-item dropdown notification_dropdown">
+                                <a class="nav-link  ai-icon" href="javascript:void(0);" role="button"
+                                    data-bs-toggle="dropdown">
+                                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path fill-rule="evenodd" clip-rule="evenodd"
+                                            d="M12.638 4.9936V2.3C12.638 1.5824 13.2484 1 14.0006 1C14.7513 1 15.3631 1.5824 15.3631 2.3V4.9936C17.3879 5.2718 19.2805 6.1688 20.7438 7.565C22.5329 9.2719 23.5384 11.5872 23.5384 14V18.8932L24.6408 20.9966C25.1681 22.0041 25.1122 23.2001 24.4909 24.1582C23.8709 25.1163 22.774 25.7 21.5941 25.7H15.3631C15.3631 26.4176 14.7513 27 14.0006 27C13.2484 27 12.638 26.4176 12.638 25.7H6.40705C5.22571 25.7 4.12888 25.1163 3.50892 24.1582C2.88759 23.2001 2.83172 22.0041 3.36039 20.9966L4.46268 18.8932V14C4.46268 11.5872 5.46691 9.2719 7.25594 7.565C8.72068 6.1688 10.6119 5.2718 12.638 4.9936ZM14.0006 7.5C12.1924 7.5 10.4607 8.1851 9.18259 9.4045C7.90452 10.6226 7.18779 12.2762 7.18779 14V19.2C7.18779 19.4015 7.13739 19.6004 7.04337 19.7811C7.04337 19.7811 6.43703 20.9381 5.79662 22.1588C5.69171 22.3603 5.70261 22.6008 5.82661 22.7919C5.9506 22.983 6.16996 23.1 6.40705 23.1H21.5941C21.8298 23.1 22.0492 22.983 22.1732 22.7919C22.2972 22.6008 22.3081 22.3603 22.2031 22.1588C21.5627 20.9381 20.9564 19.7811 20.9564 19.7811C20.8624 19.6004 20.8133 19.4015 20.8133 19.2V14C20.8133 12.2762 20.0953 10.6226 18.8172 9.4045C17.5391 8.1851 15.8073 7.5 14.0006 7.5Z"
+                                            fill="#4f7086" />
+                                    </svg>
+                                    <span class="badge light text-white bg-primary rounded-circle">12</span>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="javascript:void(0);" class="btn btn-primary d-sm-inline-block d-none">{Lang::moneyFormat($_user['balance'])}</a>
+                            </li>
+                            <li class="nav-item">
+								<div class="dropdown">
+									<a href="javascript:void(0);" class="btn-link" data-bs-toggle="dropdown" aria-expanded="false">
+										<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+											<path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+											<path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+											<path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="#575757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+										</svg>
+									</a>
+									<div class="dropdown-menu dropdown-menu-right" style="right: 0; left: auto;">
+										<a class="dropdown-item" href="{$_url}accounts/profile">{Lang::T('My Account')}</a>
+										<a class="dropdown-item" href="{$_url}accounts/change-password">{Lang::T('Change Password')}</a>
+										<a class="dropdown-item" href="{$_url}logout">{Lang::T('Logout')}</a>
+									</div>
+								</div>
+							</li>
+                        </ul>
+                    </div>
+                </nav>
+            </div>
+        </div>
+        <!-- Header end ti-comment-alt -->
+        <!-- Nav header start -->
+        <div class="nav-header">
+            <a href="{$_url}home" class="brand-logo">
+                <svg class="logo-abbr" width="53" height="53" viewBox="0 0 53 53">
+                    <path class="svg-logo-primary-path"
+                        d="M48.3418 41.8457H41.0957C36.8148 41.8457 33.332 38.3629 33.332 34.082C33.332 29.8011 36.8148 26.3184 41.0957 26.3184H48.3418V19.2275C48.3418 16.9408 46.4879 15.0869 44.2012 15.0869H4.14062C1.85386 15.0869 0 16.9408 0 19.2275V48.8594C0 51.1462 1.85386 53 4.14062 53H44.2012C46.4879 53 48.3418 51.1462 48.3418 48.8594V41.8457Z"
+                        fill="#5BCFC5" />
+                    <path class="svg-logo-primary-path"
+                        d="M51.4473 29.4238H41.0957C38.5272 29.4238 36.4375 31.5135 36.4375 34.082C36.4375 36.6506 38.5272 38.7402 41.0957 38.7402H51.4473C52.3034 38.7402 53 38.0437 53 37.1875V30.9766C53 30.1204 52.3034 29.4238 51.4473 29.4238ZM41.0957 35.6348C40.2382 35.6348 39.543 34.9396 39.543 34.082C39.543 33.2245 40.2382 32.5293 41.0957 32.5293C41.9532 32.5293 42.6484 33.2245 42.6484 34.082C42.6484 34.9396 41.9532 35.6348 41.0957 35.6348Z"
+                        fill="#5BCFC5" />
+                </svg>
+                <p class="brand-title" width="124px" height="33px" style="font-size: 24px;">{$_c['CompanyName']}</p>
+            </a>
+            <div class="nav-control">
+                <div class="hamburger">
+                    <span class="line"></span><span class="line"></span><span class="line"></span>
+                </div>
+            </div>
+        </div>
+        <!-- Nav header end -->
+        <!-- Sidebar start -->
+        <div class="dlabnav">
+            <div class="dlabnav-scroll">
+                <ul class="metismenu" id="menu">
+                    <li class="dropdown header-profile">
+                        <a class="nav-link" href="javascript:void(0);" role="button" data-bs-toggle="dropdown">
+                             <img src="https://robohash.org/{$_user['id']}?set=set3&size=100x100&bgset=bg1"
+                                    onerror="this.src='{$UPLOAD_PATH}/user.default.jpg'" class="user-image"
+                                    alt="User Image">
+                            <div class="header-info ms-3">
+                                <span class="font-w600 ">Hi,<b>{$_user['fullname']}</b></span>
+                                <small class="text-end font-w400">{$_user['phonenumber']}</small>
+                            </div>
+                        </a>
+                    </li>
+                    <li {if $_system_menu eq 'home'}class="active" {/if}><a href="{$_url}home" aria-expanded="false">
+                            <i class="bi-menu-app-fill"></i>
+                            <span class="nav-text">{Lang::T('Dashboard')}</span>
+                        </a>
+                    </li>
+                    {$_MENU_AFTER_DASHBOARD}
+                    {if $_c['disable_voucher'] != 'yes'}
+                        <li {if $_system_menu eq 'voucher'}class="active" {/if}><a href="{$_url}voucher/activation" aria-expanded="false">
+                                <i class="bi-cart-plus-fill"></i>
+                                <span class="nav-text">Activate Voucher</span>
+                            </a>
+                        </li>
+                     {/if}
+                    {if $_c['payment_gateway'] != 'none' or $_c['payment_gateway'] == '' }
+                        {if $_c['enable_balance'] == 'yes'}
+                            <li {if $_system_menu eq 'balance'}class="active" {/if}><a href="{$_url}order/balance" aria-expanded="false">
+                                    <i class="bi-wallet-fill"></i>
+                                    <span class="nav-text">Balance Top Up</span>
+                                </a>
+                            </li>
+                        {/if}
+                        <li {if $_system_menu eq 'package'}class="active" {/if}><a href="{$_url}order/package" aria-expanded="false">
+                                <i class="bi-basket2-fill"></i>
+                                <span class="nav-text">Buy Package</span>
+                            </a>
+                        </li>
+                        <li {if $_system_menu eq 'history'}class="active" {/if}><a href="{$_url}order/history" aria-expanded="false">
+                                <i class="bi-bar-chart-fill"></i>
+                                <span class="nav-text">Reports</span>
+                            </a>
+                        </li>
+                    {/if}
+                    {$_MENU_AFTER_ORDER}
+                    {$_MENU_AFTER_HISTORY}
+                </ul>
+            </div>
+        </div>
+        <!-- Sidebar end -->
+
+        <!-- Content body start -->
+        <div class="content-body">
+            {if isset($notify)}
+                        <script>
+                            // Display SweetAlert toast notification
+                            Swal.fire({
+                                icon: '{if $notify_t == "s"}success{else}error{/if}',
+                                title: '{$notify}',
+                                toast: true,
+                                position: 'top-end',
+                                showConfirmButton: false,
+                                timer: 5000,
+                                timerProgressBar: true,
+                                didOpen: (toast) => {
+                                    toast.addEventListener('mouseenter', Swal.stopTimer)
+                                    toast.addEventListener('mouseleave', Swal.resumeTimer)
+                                }
+                            });
+                        </script>
+                    {/if}
+            <!-- row -->
+            <div class="container-fluid">
\ No newline at end of file