From a513e3120917a91b7c040025bb6c1fd416769809 Mon Sep 17 00:00:00 2001
From: erishBRBS <erishberboso10@gmail.com>
Date: Thu, 17 Apr 2025 00:13:00 +0800
Subject: [PATCH] header, profile, top-nav components added

---
 app/Livewire/Header.php                       | 18 +++++++
 resources/views/layouts/dashboard.blade.php   | 16 +++---
 .../views/layouts/partials/drawer.blade.php   |  3 --
 .../views/layouts/partials/footer.blade.php   |  3 --
 .../views/layouts/partials/header.blade.php   |  3 --
 .../livewire/about-us/card-type.blade.php     |  2 +
 .../about-us/terms-and-privacy.blade.php      |  2 +
 .../about-us/top-nav/card-type.blade.php      | 20 ++++++++
 .../top-nav/terms-and-privacy.blade.php       | 18 +++++++
 .../views/livewire/header/header.blade.php    | 29 +++++++++++
 .../home-page-mobile/photo-slider.blade.php   |  2 +
 .../top-nav/photo-slider.blade.php            | 20 ++++++++
 .../livewire/main-content-manager.blade.php   |  8 ++-
 .../member-management/card-member.blade.php   |  2 +
 .../locked-account.blade.php                  |  2 +
 .../top-nav/card-member.blade.php             | 20 ++++++++
 .../top-nav/locked-account.blade.php          | 20 ++++++++
 .../livewire/navigation/drawer.blade.php      | 49 ++++++++++---------
 .../notification/notification.blade.php       |  2 +
 .../top-nav/notification.blade.php            | 20 ++++++++
 .../views/livewire/profile/profile.blade.php  | 26 +++++++++-
 .../profile/top-nav/profile.blade.php         | 16 ++++++
 .../livewire/promotion/promotion.blade.php    |  6 ++-
 .../promotion/top-nav/promotion.blade.php     | 20 ++++++++
 .../report/mobile-usage-report.blade.php      |  4 +-
 .../report/registration-report.blade.php      |  4 +-
 .../report/station-rating-report.blade.php    |  4 +-
 .../top-nav/mobile-usage-report.blade.php     | 20 ++++++++
 .../top-nav/registration-report.blade.php     | 20 ++++++++
 .../top-nav/station-rating-report.blade.php   | 20 ++++++++
 .../top-nav/top-up-usage-report.blade.php     | 20 ++++++++
 .../report/top-up-usage-report.blade.php      |  4 +-
 .../livewire/station-locator/branch.blade.php |  2 +
 .../livewire/station-locator/fuel.blade.php   |  2 +
 .../station-locator/station.blade.php         |  6 ++-
 .../station-locator/top-nav/branch.blade.php  | 20 ++++++++
 .../station-locator/top-nav/fuel.blade.php    | 20 ++++++++
 .../station-locator/top-nav/station.blade.php | 20 ++++++++
 .../system-parameter.blade.php                |  2 +
 .../top-nav/system-parameter.blade.php        | 20 ++++++++
 .../livewire/top-up/top-nav/top-up.blade.php  | 20 ++++++++
 .../views/livewire/top-up/top-up.blade.php    |  2 +
 .../top-nav/user-management.blade.php         | 20 ++++++++
 .../user-management/user-management.blade.php |  2 +
 44 files changed, 508 insertions(+), 51 deletions(-)
 create mode 100644 app/Livewire/Header.php
 delete mode 100644 resources/views/layouts/partials/drawer.blade.php
 delete mode 100644 resources/views/layouts/partials/footer.blade.php
 delete mode 100644 resources/views/layouts/partials/header.blade.php
 create mode 100644 resources/views/livewire/about-us/top-nav/card-type.blade.php
 create mode 100644 resources/views/livewire/about-us/top-nav/terms-and-privacy.blade.php
 create mode 100644 resources/views/livewire/header/header.blade.php
 create mode 100644 resources/views/livewire/home-page-mobile/top-nav/photo-slider.blade.php
 create mode 100644 resources/views/livewire/member-management/top-nav/card-member.blade.php
 create mode 100644 resources/views/livewire/member-management/top-nav/locked-account.blade.php
 create mode 100644 resources/views/livewire/notification/top-nav/notification.blade.php
 create mode 100644 resources/views/livewire/profile/top-nav/profile.blade.php
 create mode 100644 resources/views/livewire/promotion/top-nav/promotion.blade.php
 create mode 100644 resources/views/livewire/report/top-nav/mobile-usage-report.blade.php
 create mode 100644 resources/views/livewire/report/top-nav/registration-report.blade.php
 create mode 100644 resources/views/livewire/report/top-nav/station-rating-report.blade.php
 create mode 100644 resources/views/livewire/report/top-nav/top-up-usage-report.blade.php
 create mode 100644 resources/views/livewire/station-locator/top-nav/branch.blade.php
 create mode 100644 resources/views/livewire/station-locator/top-nav/fuel.blade.php
 create mode 100644 resources/views/livewire/station-locator/top-nav/station.blade.php
 create mode 100644 resources/views/livewire/system-parameter/top-nav/system-parameter.blade.php
 create mode 100644 resources/views/livewire/top-up/top-nav/top-up.blade.php
 create mode 100644 resources/views/livewire/user-management/top-nav/user-management.blade.php

diff --git a/app/Livewire/Header.php b/app/Livewire/Header.php
new file mode 100644
index 0000000..8b04c02
--- /dev/null
+++ b/app/Livewire/Header.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Header extends Component
+{
+
+    public function selectPage($page)
+    {
+        $this->dispatch('navigate-to-page', page: $page);
+    }
+    public function render()
+    {
+        return view('livewire.header.header');
+    }
+}
diff --git a/resources/views/layouts/dashboard.blade.php b/resources/views/layouts/dashboard.blade.php
index fd02da6..b67ed5f 100644
--- a/resources/views/layouts/dashboard.blade.php
+++ b/resources/views/layouts/dashboard.blade.php
@@ -11,13 +11,17 @@
     {{-- Drawer (Livewire component) --}}
     <livewire:drawer />
 
-    {{-- Main Content --}}
-    <div class="flex-1 p-6 bg-gray-100 overflow-auto">
-        @yield('main-content-manager')
-    </div>
+    <div class="flex-1 flex flex-col">
+        {{-- Header --}}
+
+        <livewire:header />
+
+        {{-- Main Content --}}
+        <main class="flex-1 p-6 bg-gray-100 overflow-auto">
+            @yield('main-content-manager')
+        </main>
 
     @livewireScripts
 </body>
 
-</html>
-
+</html>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/drawer.blade.php b/resources/views/layouts/partials/drawer.blade.php
deleted file mode 100644
index c8a6ff6..0000000
--- a/resources/views/layouts/partials/drawer.blade.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<div>
-<h1>This is drawer page</h1>
-</div>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/footer.blade.php b/resources/views/layouts/partials/footer.blade.php
deleted file mode 100644
index 6659c36..0000000
--- a/resources/views/layouts/partials/footer.blade.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<div>
-<h1>This is footer page</h1>
-</div>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/header.blade.php b/resources/views/layouts/partials/header.blade.php
deleted file mode 100644
index e9b5bcd..0000000
--- a/resources/views/layouts/partials/header.blade.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<div>
-<h1>This is header page</h1>
-</div>
\ No newline at end of file
diff --git a/resources/views/livewire/about-us/card-type.blade.php b/resources/views/livewire/about-us/card-type.blade.php
index 69edf04..98cab90 100644
--- a/resources/views/livewire/about-us/card-type.blade.php
+++ b/resources/views/livewire/about-us/card-type.blade.php
@@ -1,3 +1,5 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.about-us.top-nav.card-type')
 <h1>This is card type page</h1>
 </div>
diff --git a/resources/views/livewire/about-us/terms-and-privacy.blade.php b/resources/views/livewire/about-us/terms-and-privacy.blade.php
index f6756c0..b2d92f3 100644
--- a/resources/views/livewire/about-us/terms-and-privacy.blade.php
+++ b/resources/views/livewire/about-us/terms-and-privacy.blade.php
@@ -1,3 +1,5 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.about-us.top-nav.terms-and-privacy')
 <h1>This is terms and privacy page</h1>
 </div>
diff --git a/resources/views/livewire/about-us/top-nav/card-type.blade.php b/resources/views/livewire/about-us/top-nav/card-type.blade.php
new file mode 100644
index 0000000..319f978
--- /dev/null
+++ b/resources/views/livewire/about-us/top-nav/card-type.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/about-us/card-type" class="hover:text-orange-600">
+            Card Types
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Card Types</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/about-us/top-nav/terms-and-privacy.blade.php b/resources/views/livewire/about-us/top-nav/terms-and-privacy.blade.php
new file mode 100644
index 0000000..40668c8
--- /dev/null
+++ b/resources/views/livewire/about-us/top-nav/terms-and-privacy.blade.php
@@ -0,0 +1,18 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/about-us/terms-and-privacy" class="hover:text-orange-600">Terms & Privacy</a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Terms & Privacy</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/header/header.blade.php b/resources/views/livewire/header/header.blade.php
new file mode 100644
index 0000000..1ae3ba5
--- /dev/null
+++ b/resources/views/livewire/header/header.blade.php
@@ -0,0 +1,29 @@
+<div class="bg-orange-600 text-white p-5">
+<div class="flex items-center justify-end text-white text-xl px-4 py-3 relative">
+
+    <!-- Right section: User dropdown -->
+    <div class="relative" x-data="{ open: false }">
+        <button @click="open = !open" class="flex items-center space-x-2 focus:outline-none">
+            <x-heroicon-s-user-circle class="w-10 h-10" />
+            <span class="text-white">LBTek Systems</span>
+            <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+        </button>
+
+        <!-- Dropdown Menu -->
+        <div x-show="open" @click.away="open = false"
+             class="absolute right-0 mt-2 w-48 bg-white text-gray-800 rounded-md shadow-lg z-50 py-2">
+            <a href="/main/profile" class="flex items-center px-4 py-2 hover:bg-gray-100">
+                <x-heroicon-o-user-circle class="w-8 h-8 mr-5"/>
+                <span> My Profile</span>
+            </a>
+            <a href="/login" class="flex items-center px-4 py-2 hover:bg-gray-100">
+                <x-heroicon-o-arrow-left-start-on-rectangle class="w-8 h-8 mr-5" />
+                <span>Logout</span>
+            </a>
+        </div>
+    </div>
+</div>
+
+</div>
diff --git a/resources/views/livewire/home-page-mobile/photo-slider.blade.php b/resources/views/livewire/home-page-mobile/photo-slider.blade.php
index 9eeffb2..aeebaa6 100644
--- a/resources/views/livewire/home-page-mobile/photo-slider.blade.php
+++ b/resources/views/livewire/home-page-mobile/photo-slider.blade.php
@@ -1,3 +1,5 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.home-page-mobile.top-nav.photo-slider')
 <h1>This is photo slider page</h1>
 </div>
diff --git a/resources/views/livewire/home-page-mobile/top-nav/photo-slider.blade.php b/resources/views/livewire/home-page-mobile/top-nav/photo-slider.blade.php
new file mode 100644
index 0000000..47565a1
--- /dev/null
+++ b/resources/views/livewire/home-page-mobile/top-nav/photo-slider.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/home-page/photo-slider" class="hover:text-orange-600">
+            Photo Sliders
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Photo Sliders</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/main-content-manager.blade.php b/resources/views/livewire/main-content-manager.blade.php
index 808e6a2..5a32877 100644
--- a/resources/views/livewire/main-content-manager.blade.php
+++ b/resources/views/livewire/main-content-manager.blade.php
@@ -1,5 +1,10 @@
 <div>
     @switch($activePage)
+
+        @case('profile')
+            <livewire:profile />
+            @break
+            
         @case('user-management')
             <livewire:user-management />
             @break
@@ -78,8 +83,7 @@
             @break
         <!-- end -->
 
-
         @default
-            <h1>Page not found.</h1>
+            <livewire: profile />
     @endswitch
 </div>
diff --git a/resources/views/livewire/member-management/card-member.blade.php b/resources/views/livewire/member-management/card-member.blade.php
index ac4f465..7f79557 100644
--- a/resources/views/livewire/member-management/card-member.blade.php
+++ b/resources/views/livewire/member-management/card-member.blade.php
@@ -1,3 +1,5 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.member-management.top-nav.card-member')
 <h1>This is card member page</h1>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/member-management/locked-account.blade.php b/resources/views/livewire/member-management/locked-account.blade.php
index 22fbb2d..a4538aa 100644
--- a/resources/views/livewire/member-management/locked-account.blade.php
+++ b/resources/views/livewire/member-management/locked-account.blade.php
@@ -1,4 +1,6 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.member-management.top-nav.locked-account')
     <div>
         <h1>This is locked account page</h1>
     </div>
diff --git a/resources/views/livewire/member-management/top-nav/card-member.blade.php b/resources/views/livewire/member-management/top-nav/card-member.blade.php
new file mode 100644
index 0000000..17c0896
--- /dev/null
+++ b/resources/views/livewire/member-management/top-nav/card-member.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/member-management/card-member" class="hover:text-orange-600">
+            Card Members
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Card Members</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/member-management/top-nav/locked-account.blade.php b/resources/views/livewire/member-management/top-nav/locked-account.blade.php
new file mode 100644
index 0000000..cf24dd7
--- /dev/null
+++ b/resources/views/livewire/member-management/top-nav/locked-account.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/member-management/locked-account" class="hover:text-orange-600">
+            Locked Accounts
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Locked Accounts</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/navigation/drawer.blade.php b/resources/views/livewire/navigation/drawer.blade.php
index 3152e28..697e710 100644
--- a/resources/views/livewire/navigation/drawer.blade.php
+++ b/resources/views/livewire/navigation/drawer.blade.php
@@ -1,7 +1,8 @@
-<div class="w-80 bg-gray-800 text-white flex-shrink-0">
-    <div class="text-center mb-10">
+<div class="w-80 bg-slate-50 text-black flex-shrink-0">
+    <div class="text-center mb-5">
         <img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto max-w-md mt-5">
     </div>
+    
     <nav class="flex flex-col space-y-2 p-4">
         @php
             function activeClass($path) {
@@ -9,19 +10,19 @@
             }
         @endphp
 
-    <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/user-management') }}">
+    <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/user-management') }}">
         <x-heroicon-o-user class="w-5 h-5 {{ activeClass('main/user-management') }}" />
         <span class="{{ activeClass('main/user-management') }}">User Management</span>
     </a>
 
-    <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/notification') }}">
+    <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/notification') }}">
         <x-heroicon-o-bell class="w-5 h-5 {{ activeClass('main/notification') }}" />
         <span class="{{ activeClass('main/notification') }}">Notifications</span>
     </a>
 
     <!-- Dropdown: Member Management -->
     <div x-data="{ open: $persist(false).as('dropdown-member-management') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
+        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-orange-200 p-2 rounded">
             <div class="flex items-center gap-2">
                 <x-heroicon-o-credit-card class="w-5 h-5 {{ activeClass('main/member-management*') }}" />
                 <span class="{{ activeClass('main/member-management*') }}">Member Management</span>
@@ -31,14 +32,14 @@
             </svg>
         </button>
         <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/member-management/card-member" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/member-management/card-member') }}">Card Member</a>
-            <a wire:navigate href="/main/member-management/locked-account" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/member-management/locked-account') }}">Locked Accounts</a>
+            <a wire:navigate href="/main/member-management/card-member" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/card-member') }}">Card Member</a>
+            <a wire:navigate href="/main/member-management/locked-account" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/locked-account') }}">Locked Accounts</a>
         </div>
     </div>
 
     <!-- Dropdown: Home Page (Mobile) -->
     <div x-data="{ open: $persist(false).as('dropdown-home-page') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
+        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-orange-200 p-2 rounded">
             <div class="flex items-center gap-2">
                 <x-heroicon-o-home class="w-5 h-5 {{ activeClass('main/home-page-mobile*') }}" />
                 <span class="{{ activeClass('main/home-page-mobile*') }}">Home Page (Mobile)</span>
@@ -48,23 +49,23 @@
             </svg>
         </button>
         <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/home-page-mobile/photo-slider" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/home-page-mobile/photo-slider') }}">Photo Sliders</a>
+            <a wire:navigate href="/main/home-page-mobile/photo-slider" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/home-page-mobile/photo-slider') }}">Photo Sliders</a>
         </div>
     </div>
 
-    <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/promotion') }}">
+    <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/promotion') }}">
         <x-heroicon-o-tag class="w-5 h-5 {{ activeClass('main/promotion') }}" />
         <span class="{{ activeClass('main/promotion') }}">Promotions</span>
     </a>
 
-    <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/top-up') }}">
+    <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/top-up') }}">
         <x-heroicon-o-plus-circle class="w-5 h-5 {{ activeClass('main/top-up') }}" />
         <span class="{{ activeClass('main/top-up') }}">Top Up</span>
     </a>
 
     <!-- Dropdown: About Us -->
     <div x-data="{ open: $persist(false).as('dropdown-about-us') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
+        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-orange-200 p-2 rounded">
             <div class="flex items-center gap-2">
                 <x-heroicon-o-information-circle class="w-5 h-5 {{ activeClass('main/about-us*') }}" />
                 <span class="{{ activeClass('main/about-us*') }}">About Us</span>
@@ -74,14 +75,14 @@
             </svg>
         </button>
         <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/about-us/card-type" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/about-us/card-type') }}">Card Type</a>
-            <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/about-us/terms-and-privacy') }}">Terms & Privacy</a>
+            <a wire:navigate href="/main/about-us/card-type" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/card-type') }}">Card Types</a>
+            <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/terms-and-privacy') }}">Terms & Privacy</a>
         </div>
     </div>
 
     <!-- Dropdown: Reports -->
     <div x-data="{ open: $persist(false).as('dropdown-report') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
+        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-orange-200 p-2 rounded">
             <div class="flex items-center gap-2">
                 <x-heroicon-o-document class="w-5 h-5 {{ activeClass('main/report*') }}" />
                 <span class="{{ activeClass('main/report*') }}">Reports</span>
@@ -91,21 +92,21 @@
             </svg>
         </button>
         <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/report/registration-report" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/report/registration-report') }}">Registration Report</a>
-            <a wire:navigate href="/main/report/top-up-usage-report" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/report/top-up-usage-report') }}">Top Up Usage Report</a>
-            <a wire:navigate href="/main/report/mobile-usage-report" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/report/mobile-usage-report') }}">Mobile Usage Report</a>
-            <a wire:navigate href="/main/report/station-rating-report" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/report/station-rating-report') }}">Station Rating Report</a>
+            <a wire:navigate href="/main/report/registration-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/registration-report') }}">Registration Report</a>
+            <a wire:navigate href="/main/report/top-up-usage-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/top-up-usage-report') }}">Top Up Usage Report</a>
+            <a wire:navigate href="/main/report/mobile-usage-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/mobile-usage-report') }}">Mobile Usage Report</a>
+            <a wire:navigate href="/main/report/station-rating-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/station-rating-report') }}">Station Rating Report</a>
         </div>
     </div>
 
-    <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/system-parameter') }}">
+    <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/system-parameter') }}">
         <x-heroicon-o-cog-6-tooth class="w-5 h-5 {{ activeClass('main/system-parameter') }}" />
         <span class="{{ activeClass('main/system-parameter') }}">System Parameters</span>
     </a>
 
     <!-- Dropdown: Station Locator -->
     <div x-data="{ open: $persist(false).as('dropdown-station-locator') }" class="relative">
-        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
+        <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-orange-200 p-2 rounded">
             <div class="flex items-center gap-2">
                 <x-heroicon-o-map-pin class="w-5 h-5 {{ activeClass('main/station-locator*') }}" />
                 <span class="{{ activeClass('main/station-locator*') }}">Station Locator</span>
@@ -115,9 +116,9 @@
             </svg>
         </button>
         <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-            <a wire:navigate href="/main/station-locator/branch" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/station-locator/branch') }}">Branches</a>
-            <a wire:navigate href="/main/station-locator/station" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/station-locator/station') }}">Stations</a>
-            <a wire:navigate href="/main/station-locator/fuel" class="text-left hover:bg-gray-700 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</a>
+            <a wire:navigate href="/main/station-locator/branch" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/branch') }}">Branches</a>
+            <a wire:navigate href="/main/station-locator/station" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/station') }}">Stations</a>
+            <a wire:navigate href="/main/station-locator/fuel" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</a>
         </div>
     </div>
 </nav>
diff --git a/resources/views/livewire/notification/notification.blade.php b/resources/views/livewire/notification/notification.blade.php
index 3025ffe..1fe53c4 100644
--- a/resources/views/livewire/notification/notification.blade.php
+++ b/resources/views/livewire/notification/notification.blade.php
@@ -1,3 +1,5 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.notification.top-nav.notification')
 <h1>This is notification page</h1>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/notification/top-nav/notification.blade.php b/resources/views/livewire/notification/top-nav/notification.blade.php
new file mode 100644
index 0000000..adf60b5
--- /dev/null
+++ b/resources/views/livewire/notification/top-nav/notification.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/notification" class="hover:text-orange-600">
+            Notifications
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Notifications</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/profile/profile.blade.php b/resources/views/livewire/profile/profile.blade.php
index b592b1a..49fdc78 100644
--- a/resources/views/livewire/profile/profile.blade.php
+++ b/resources/views/livewire/profile/profile.blade.php
@@ -1,3 +1,25 @@
+<!-- profile/profile.blade.php -->
 <div>
-<h1>This is profile page</h1>
-</div>
\ No newline at end of file
+    {{-- Top Nav --}}
+    @include('livewire.profile.top-nav.profile')
+
+    <div class="mt-10">
+            <div class="flex items-center space-x-4 px-5 py-10 bg-gray-300">
+                <x-heroicon-s-user-circle class="w-[120px] h-[120px] mr-5 text-gray-500"/>
+                <h3 class="text-5xl font-semibold text-gray-800">LBTek Systems</h3>
+            </div>
+
+            <div class="text-xl px-5 bg-white">
+                <div>
+                    <h4 class="font-bold mb-5">My Information</h4>
+                    <p><span class="font-semibold">Username:</span> lbteksupport</p>
+                    <p><span class="font-semibold">Email:</span> <a href="mailto:support@lbteksystems.com"
+                            class="text-blue-600 hover:underline">support@lbteksystems.com</a></p>
+                </div>
+                <div>
+                    <h4 class="font-bold mt-10">Access Role</h4>
+                    <p><span class="font-semibold">Role:</span> System Admin</p>
+                </div>
+            </div>
+    </div>
+</div>
diff --git a/resources/views/livewire/profile/top-nav/profile.blade.php b/resources/views/livewire/profile/top-nav/profile.blade.php
new file mode 100644
index 0000000..06de3e0
--- /dev/null
+++ b/resources/views/livewire/profile/top-nav/profile.blade.php
@@ -0,0 +1,16 @@
+<!-- top-nav/profile.blade.php -->
+<div>
+    <!-- Home breadcrumb and page title stacked vertically -->
+    <div class="flex flex-col gap-6">
+        <!-- Home link -->
+        <a href="/main/profile"
+           class="flex items-center w-fit text-sm text-gray-600 hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+
+        <!-- Page Title -->
+        <h3 class="text-5xl font-semibold text-gray-800">My Profile</h3>
+    </div>
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/promotion/promotion.blade.php b/resources/views/livewire/promotion/promotion.blade.php
index 1dc49fb..83334d9 100644
--- a/resources/views/livewire/promotion/promotion.blade.php
+++ b/resources/views/livewire/promotion/promotion.blade.php
@@ -1,3 +1,5 @@
 <div>
-<h1>This is promotion page</h1>
-</div>
\ No newline at end of file
+{{-- Top Nav --}}
+@include('livewire.promotion.top-nav.promotion')
+<h1>This is card type page</h1>
+</div>
diff --git a/resources/views/livewire/promotion/top-nav/promotion.blade.php b/resources/views/livewire/promotion/top-nav/promotion.blade.php
new file mode 100644
index 0000000..076654b
--- /dev/null
+++ b/resources/views/livewire/promotion/top-nav/promotion.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/promotion" class="hover:text-orange-600">
+            Promotions
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Promotions</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/report/mobile-usage-report.blade.php b/resources/views/livewire/report/mobile-usage-report.blade.php
index 8fade45..39218d8 100644
--- a/resources/views/livewire/report/mobile-usage-report.blade.php
+++ b/resources/views/livewire/report/mobile-usage-report.blade.php
@@ -1,3 +1,5 @@
 <div>
-<h1>This is mobile usage report page</h1>
+{{-- Top Nav --}}
+@include('livewire.report.top-nav.mobile-usage-report')
+<h1>This is card type page</h1>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/report/registration-report.blade.php b/resources/views/livewire/report/registration-report.blade.php
index 5ee9ebf..07c2dad 100644
--- a/resources/views/livewire/report/registration-report.blade.php
+++ b/resources/views/livewire/report/registration-report.blade.php
@@ -1,3 +1,5 @@
 <div>
-<h1>This is registration report page</h1>
+{{-- Top Nav --}}
+@include('livewire.report.top-nav.registration-report')
+<h1>This is card type page</h1>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/report/station-rating-report.blade.php b/resources/views/livewire/report/station-rating-report.blade.php
index 5084569..1b55835 100644
--- a/resources/views/livewire/report/station-rating-report.blade.php
+++ b/resources/views/livewire/report/station-rating-report.blade.php
@@ -1,3 +1,5 @@
 <div>
-<h1>This is station rating report page</h1>
+{{-- Top Nav --}}
+@include('livewire.report.top-nav.station-rating-report')
+<h1>This is card type page</h1>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/report/top-nav/mobile-usage-report.blade.php b/resources/views/livewire/report/top-nav/mobile-usage-report.blade.php
new file mode 100644
index 0000000..9082667
--- /dev/null
+++ b/resources/views/livewire/report/top-nav/mobile-usage-report.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/report/mobile-usage-report" class="hover:text-orange-600">
+            Mobile Usage Report
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Mobile Usage Report</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/report/top-nav/registration-report.blade.php b/resources/views/livewire/report/top-nav/registration-report.blade.php
new file mode 100644
index 0000000..548985b
--- /dev/null
+++ b/resources/views/livewire/report/top-nav/registration-report.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/report/registration-report" class="hover:text-orange-600">
+            Registration Report
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Registration Report</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/report/top-nav/station-rating-report.blade.php b/resources/views/livewire/report/top-nav/station-rating-report.blade.php
new file mode 100644
index 0000000..d0bbb3b
--- /dev/null
+++ b/resources/views/livewire/report/top-nav/station-rating-report.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/report/station-rating-report" class="hover:text-orange-600">
+            Station Rating Report
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Station Rating Report</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/report/top-nav/top-up-usage-report.blade.php b/resources/views/livewire/report/top-nav/top-up-usage-report.blade.php
new file mode 100644
index 0000000..caa027e
--- /dev/null
+++ b/resources/views/livewire/report/top-nav/top-up-usage-report.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/report/top-up-usage-report" class="hover:text-orange-600">
+            Top-Up Usage Report
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Top-Up Usage Report</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/report/top-up-usage-report.blade.php b/resources/views/livewire/report/top-up-usage-report.blade.php
index 38a3f64..5f8055d 100644
--- a/resources/views/livewire/report/top-up-usage-report.blade.php
+++ b/resources/views/livewire/report/top-up-usage-report.blade.php
@@ -1,3 +1,5 @@
 <div>
-<h1>This is top up usage page</h1>
+{{-- Top Nav --}}
+@include('livewire.report.top-nav.top-up-usage-report')
+<h1>This is card type page</h1>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/station-locator/branch.blade.php b/resources/views/livewire/station-locator/branch.blade.php
index 4cfc76e..7d58844 100644
--- a/resources/views/livewire/station-locator/branch.blade.php
+++ b/resources/views/livewire/station-locator/branch.blade.php
@@ -1,3 +1,5 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.station-locator.top-nav.branch')
 <h1>This is branch page</h1>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/station-locator/fuel.blade.php b/resources/views/livewire/station-locator/fuel.blade.php
index 13f5c0d..0b5e92a 100644
--- a/resources/views/livewire/station-locator/fuel.blade.php
+++ b/resources/views/livewire/station-locator/fuel.blade.php
@@ -1,3 +1,5 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.station-locator.top-nav.fuel')
 <h1>This is fuel page</h1>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/station-locator/station.blade.php b/resources/views/livewire/station-locator/station.blade.php
index c09e8eb..ed744b3 100644
--- a/resources/views/livewire/station-locator/station.blade.php
+++ b/resources/views/livewire/station-locator/station.blade.php
@@ -1,3 +1,5 @@
 <div>
-<h1>This is station page</h1>
-</div>
\ No newline at end of file
+{{-- Top Nav --}}
+@include('livewire.station-locator.top-nav.station')
+<h1>This is card type page</h1>
+</div>
diff --git a/resources/views/livewire/station-locator/top-nav/branch.blade.php b/resources/views/livewire/station-locator/top-nav/branch.blade.php
new file mode 100644
index 0000000..b34269d
--- /dev/null
+++ b/resources/views/livewire/station-locator/top-nav/branch.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/station-locator/branch" class="hover:text-orange-600">
+            Branch
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Branch</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/station-locator/top-nav/fuel.blade.php b/resources/views/livewire/station-locator/top-nav/fuel.blade.php
new file mode 100644
index 0000000..f1dc45c
--- /dev/null
+++ b/resources/views/livewire/station-locator/top-nav/fuel.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/station-locator/fuel" class="hover:text-orange-600">
+            Fuel
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Fuel</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/station-locator/top-nav/station.blade.php b/resources/views/livewire/station-locator/top-nav/station.blade.php
new file mode 100644
index 0000000..0b891f7
--- /dev/null
+++ b/resources/views/livewire/station-locator/top-nav/station.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/station-locator/station" class="hover:text-orange-600">
+            Station
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Station</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/system-parameter/system-parameter.blade.php b/resources/views/livewire/system-parameter/system-parameter.blade.php
index e97ee8d..87fddc2 100644
--- a/resources/views/livewire/system-parameter/system-parameter.blade.php
+++ b/resources/views/livewire/system-parameter/system-parameter.blade.php
@@ -1,3 +1,5 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.system-parameter.top-nav.system-parameter')
 <h1>This is system parameter page</h1>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/system-parameter/top-nav/system-parameter.blade.php b/resources/views/livewire/system-parameter/top-nav/system-parameter.blade.php
new file mode 100644
index 0000000..a84b0f8
--- /dev/null
+++ b/resources/views/livewire/system-parameter/top-nav/system-parameter.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/system-parameter" class="hover:text-orange-600">
+            System Parameters
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">System Parameters</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/top-up/top-nav/top-up.blade.php b/resources/views/livewire/top-up/top-nav/top-up.blade.php
new file mode 100644
index 0000000..64cb292
--- /dev/null
+++ b/resources/views/livewire/top-up/top-nav/top-up.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/top-up" class="hover:text-orange-600">
+            Top Up
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Top Up</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/top-up/top-up.blade.php b/resources/views/livewire/top-up/top-up.blade.php
index ad63c4a..de0e9ff 100644
--- a/resources/views/livewire/top-up/top-up.blade.php
+++ b/resources/views/livewire/top-up/top-up.blade.php
@@ -1,3 +1,5 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.top-up.top-nav.top-up')
 <h1>This is top up page</h1>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/user-management/top-nav/user-management.blade.php b/resources/views/livewire/user-management/top-nav/user-management.blade.php
new file mode 100644
index 0000000..dd073ef
--- /dev/null
+++ b/resources/views/livewire/user-management/top-nav/user-management.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-4 h-4 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/user-management" class="hover:text-orange-600">
+            User Management
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">User Management</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/user-management/user-management.blade.php b/resources/views/livewire/user-management/user-management.blade.php
index 9eaa7a7..4048318 100644
--- a/resources/views/livewire/user-management/user-management.blade.php
+++ b/resources/views/livewire/user-management/user-management.blade.php
@@ -1,3 +1,5 @@
 <div>
+{{-- Top Nav --}}
+@include('livewire.user-management.top-nav.user-management')
     This is the user management page.
 </div>