diff --git a/app/Livewire/Branch.php b/app/Livewire/Branch.php
index 6d50d48..4e4355a 100644
--- a/app/Livewire/Branch.php
+++ b/app/Livewire/Branch.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class Branch extends Component
 {
     public function render()
diff --git a/app/Livewire/CardMember.php b/app/Livewire/CardMember.php
index a05060d..0af1943 100644
--- a/app/Livewire/CardMember.php
+++ b/app/Livewire/CardMember.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class CardMember extends Component
 {
     public function render()
diff --git a/app/Livewire/CardType.php b/app/Livewire/CardType.php
index 977f482..6bf42d1 100644
--- a/app/Livewire/CardType.php
+++ b/app/Livewire/CardType.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class CardType extends Component
 {
     public function render()
diff --git a/app/Livewire/Drawer.php b/app/Livewire/Drawer.php
index 9920bfe..dc9edeb 100644
--- a/app/Livewire/Drawer.php
+++ b/app/Livewire/Drawer.php
@@ -8,10 +8,6 @@ class Drawer extends Component
 {
     public function selectPage($page)
     {
-        // // Log the selected page to Laravel's log file (you'll find this in storage/logs/laravel.log)
-        // logger('Page selected:', [$page]);
-
-        // Dispatch the navigate-to-page event to update the active page in the MainContentManager component
         $this->dispatch('navigate-to-page', page: $page);
     }
 
diff --git a/app/Livewire/Fuel.php b/app/Livewire/Fuel.php
index 168dbcf..a4c8ec4 100644
--- a/app/Livewire/Fuel.php
+++ b/app/Livewire/Fuel.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class Fuel extends Component
 {
     public function render()
diff --git a/app/Livewire/LockedAccount.php b/app/Livewire/LockedAccount.php
index 70f8163..6749e8c 100644
--- a/app/Livewire/LockedAccount.php
+++ b/app/Livewire/LockedAccount.php
@@ -3,11 +3,13 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class LockedAccount extends Component
 {
     public function render()
     {
-        return view('livewire.member-management.card-member');
+        return view('livewire.member-management.locked-account');
     }
 }
diff --git a/app/Livewire/MainContentManager.php b/app/Livewire/MainContentManager.php
index 2cdd35b..54d93a5 100644
--- a/app/Livewire/MainContentManager.php
+++ b/app/Livewire/MainContentManager.php
@@ -1,18 +1,24 @@
 <?php
 
 namespace App\Livewire;
-
 use Livewire\Component;
+use Illuminate\Support\Facades\Request;
 
 class MainContentManager extends Component
 {
-    public $activePage = 'user-management'; // default page
+    public $activePage;
+
+    public function mount()
+    {
+        $segments = request()->segments();
+        // Get the last part of the URL path
+        $this->activePage = end($segments) ?? 'user-management';
+    }
 
     protected $listeners = ['navigate-to-page' => 'setPage'];
 
     public function setPage($page)
     {
-        // dd($page);  // To check the value of $page
         $this->activePage = $page;
     }
 
diff --git a/app/Livewire/MobileUsageReport.php b/app/Livewire/MobileUsageReport.php
index e2b49bb..2484854 100644
--- a/app/Livewire/MobileUsageReport.php
+++ b/app/Livewire/MobileUsageReport.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class MobileUsageReport extends Component
 {
     public function render()
diff --git a/app/Livewire/Notification.php b/app/Livewire/Notification.php
index 9ecb8df..0211a4f 100644
--- a/app/Livewire/Notification.php
+++ b/app/Livewire/Notification.php
@@ -3,7 +3,6 @@
 namespace App\Livewire;
 
 use Livewire\Component;
-
 class Notification extends Component
 {
     public function render()
diff --git a/app/Livewire/PhotoSlider.php b/app/Livewire/PhotoSlider.php
index aeb274b..d79531c 100644
--- a/app/Livewire/PhotoSlider.php
+++ b/app/Livewire/PhotoSlider.php
@@ -3,11 +3,13 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class PhotoSlider extends Component
 {
     public function render()
     {
-        return view('livewire.photo-slider');
+        return view('livewire.home-page-mobile.photo-slider');
     }
 }
diff --git a/app/Livewire/Promotion.php b/app/Livewire/Promotion.php
index f52fe65..0680f9c 100644
--- a/app/Livewire/Promotion.php
+++ b/app/Livewire/Promotion.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class Promotion extends Component
 {
     public function render()
diff --git a/app/Livewire/RegistrationReport.php b/app/Livewire/RegistrationReport.php
index 51fddfc..bd0f44a 100644
--- a/app/Livewire/RegistrationReport.php
+++ b/app/Livewire/RegistrationReport.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class RegistrationReport extends Component
 {
     public function render()
diff --git a/app/Livewire/Station.php b/app/Livewire/Station.php
index 1bcff66..7dc8dc0 100644
--- a/app/Livewire/Station.php
+++ b/app/Livewire/Station.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class Station extends Component
 {
     public function render()
diff --git a/app/Livewire/StationRatingReport.php b/app/Livewire/StationRatingReport.php
index 072374b..0fc9708 100644
--- a/app/Livewire/StationRatingReport.php
+++ b/app/Livewire/StationRatingReport.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class StationRatingReport extends Component
 {
     public function render()
diff --git a/app/Livewire/SystemParameter.php b/app/Livewire/SystemParameter.php
index 229f71a..00e1aaa 100644
--- a/app/Livewire/SystemParameter.php
+++ b/app/Livewire/SystemParameter.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class SystemParameter extends Component
 {
     public function render()
diff --git a/app/Livewire/TermsAndPrivacy.php b/app/Livewire/TermsAndPrivacy.php
index 79674d8..d322f9c 100644
--- a/app/Livewire/TermsAndPrivacy.php
+++ b/app/Livewire/TermsAndPrivacy.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class TermsAndPrivacy extends Component
 {
     public function render()
diff --git a/app/Livewire/TopUp.php b/app/Livewire/TopUp.php
index 17c8cdb..fde724d 100644
--- a/app/Livewire/TopUp.php
+++ b/app/Livewire/TopUp.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class TopUp extends Component
 {
     public function render()
diff --git a/app/Livewire/TopUpUsageReport.php b/app/Livewire/TopUpUsageReport.php
index 387b9d9..2f7d39b 100644
--- a/app/Livewire/TopUpUsageReport.php
+++ b/app/Livewire/TopUpUsageReport.php
@@ -3,7 +3,9 @@
 namespace App\Livewire;
 
 use Livewire\Component;
+use Livewire\Attributes\Layout;  // Required for layout declaration
 
+#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class TopUpUsageReport extends Component
 {
     public function render()
diff --git a/app/Livewire/UserManagement.php b/app/Livewire/UserManagement.php
index 2a55207..a06b058 100644
--- a/app/Livewire/UserManagement.php
+++ b/app/Livewire/UserManagement.php
@@ -1,15 +1,13 @@
 <?php
 
-namespace App\Livewire;  // Laravel 11 uses App\Livewire namespace
+namespace App\Livewire;
 
 use Livewire\Component;
-use Livewire\Attributes\Layout;  // Required for layout declaration
 
-#[Layout('layouts.dashboard')]  // Attribute syntax for Laravel 11
 class UserManagement extends Component
 {
     public function render()
     {
         return view('livewire.user-management.user-management');
     }
-}
\ No newline at end of file
+}
diff --git a/config/livewire.php b/config/livewire.php
index 0d2ba89..76347cb 100644
--- a/config/livewire.php
+++ b/config/livewire.php
@@ -38,7 +38,7 @@ return [
     |
     */
 
-    'layout' => 'components.layouts.app',
+    'layout' => 'layouts.app',
 
     /*
     |---------------------------------------------------------------------------
diff --git a/package-lock.json b/package-lock.json
index a268819..c073b36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@alpinejs/persist": "^3.14.9",
                 "alpinejs": "^3.14.9"
             },
             "devDependencies": {
@@ -30,6 +31,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@alpinejs/persist": {
+            "version": "3.14.9",
+            "resolved": "https://registry.npmjs.org/@alpinejs/persist/-/persist-3.14.9.tgz",
+            "integrity": "sha512-Td9hWEUtFFguYCRjXhq06sDultW21wXUnVro7YWJm+vjGu/nV/v3hepOXyYVjkGvH/F+zjx5UkzWXXzr3UiQ/w==",
+            "license": "MIT"
+        },
         "node_modules/@esbuild/aix-ppc64": {
             "version": "0.25.2",
             "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.2.tgz",
diff --git a/package.json b/package.json
index 186f339..5a9ade4 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
         "vite": "^6.0.11"
     },
     "dependencies": {
+        "@alpinejs/persist": "^3.14.9",
         "alpinejs": "^3.14.9"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index 8cef84c..5125bc0 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,4 +1,8 @@
 import './bootstrap';
 import Alpine from 'alpinejs';
+import persist from '@alpinejs/persist';
 
-Alpine.start();
\ No newline at end of file
+Alpine.plugin(persist);
+
+window.Alpine = Alpine;
+Alpine.start();
diff --git a/resources/views/layouts/dashboard.blade.php b/resources/views/layouts/dashboard.blade.php
index 7831202..fd02da6 100644
--- a/resources/views/layouts/dashboard.blade.php
+++ b/resources/views/layouts/dashboard.blade.php
@@ -13,10 +13,11 @@
 
     {{-- Main Content --}}
     <div class="flex-1 p-6 bg-gray-100 overflow-auto">
-        @yield('main-page-content')
+        @yield('main-content-manager')
     </div>
 
     @livewireScripts
 </body>
+
 </html>
 
diff --git a/resources/views/livewire/auth/login-form.blade.php b/resources/views/livewire/auth/login-form.blade.php
index 9b64a77..a2eea2a 100644
--- a/resources/views/livewire/auth/login-form.blade.php
+++ b/resources/views/livewire/auth/login-form.blade.php
@@ -7,17 +7,17 @@
                 <p class="text-gray-600 text-sm">Sign in to continue</p>
             </div>
 
-            <form wire:submit.prevent="submit" class="mb-8">
+            <form wire:submit="submit" class="mb-8">
                 @csrf
                 <div class="mb-4">
                     <label for="username" class="block text-sm font-bold text-gray-700">Username</label>
-                    <input wire:model="username" type="text" id="username" placeholder="Username" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
+                    <input wire:model.live="username" type="text" id="username" placeholder="Username" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                     @error('username') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                 </div>
 
                 <div class="mb-4">
                     <label for="password" class="block text-sm font-bold text-gray-700">Password</label>
-                    <input wire:model="password" type="password" id="password" placeholder="Password" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
+                    <input wire:model.live="password" type="password" id="password" placeholder="Password" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                     @error('password') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                 </div>
 
diff --git a/resources/views/livewire/member-management/locked-account.blade.php b/resources/views/livewire/member-management/locked-account.blade.php
index 0c6b60b..22fbb2d 100644
--- a/resources/views/livewire/member-management/locked-account.blade.php
+++ b/resources/views/livewire/member-management/locked-account.blade.php
@@ -1,4 +1,5 @@
 <div>
-<div>
-<h1>This is locked account page</h1>
-</div></div>
+    <div>
+        <h1>This is locked account page</h1>
+    </div>
+</div>
diff --git a/resources/views/livewire/navigation/drawer.blade.php b/resources/views/livewire/navigation/drawer.blade.php
index 4776ea2..3431ede 100644
--- a/resources/views/livewire/navigation/drawer.blade.php
+++ b/resources/views/livewire/navigation/drawer.blade.php
@@ -1,22 +1,21 @@
-
-
-
 <div class="w-80 bg-gray-800 text-white flex-shrink-0">
-    <div class="text-center mb-10"> <!-- logo and title container-->
+    <div class="text-center mb-10">
         <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">
-        <button wire:click="selectPage('user-management')" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
+
+    <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
             <x-heroicon-o-user class="w-5 h-5" />
             <span>User Management</span>
-        </button>
+        </a>
 
-        <button wire:click="selectPage('notification')" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
+        <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
             <x-heroicon-o-bell class="w-5 h-5" />
             <span>Notifications</span>
-        </button>
+        </a>
 
-        <div x-data="{ open: false }" class="relative">
+        <!-- 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">
                 <div class="flex items-center gap-2">
                     <x-heroicon-o-credit-card class="w-5 h-5" />
@@ -26,14 +25,14 @@
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                 </svg>
             </button>
-
-            <div x-show="open" x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-                <button wire:click="selectPage('card-member')" class="text-left hover:bg-gray-700 p-2 rounded">Card Member</button>
-                <button wire:click="selectPage('locked-account')" class="text-left hover:bg-gray-700 p-2 rounded">Locked Accounts</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">Card Member</a>
+                <a wire:navigate href="/main/member-management/locked-account" class="text-left hover:bg-gray-700 p-2 rounded">Locked Accounts</a>
             </div>
         </div>
-        
-        <div x-data="{ open: false }" class="relative">
+
+        <!-- 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">
                 <div class="flex items-center gap-2">
                     <x-heroicon-o-home class="w-5 h-5" />
@@ -43,23 +42,23 @@
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                 </svg>
             </button>
-
-            <div x-show="open" x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-                <button wire:click="selectPage('photo-slider')" class="text-left hover:bg-gray-700 p-2 rounded">Photo Sliders</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">Photo Sliders</a>
             </div>
         </div>
 
-        <button wire:click="selectPage('promotion')" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
+        <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
             <x-heroicon-o-tag class="w-5 h-5" />
             <span>Promotions</span>
-        </button>
+        </a>
 
-        <button wire:click="selectPage('top-up')" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
+        <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
             <x-heroicon-o-plus-circle class="w-5 h-5" />
             <span>Top Up</span>
-        </button>
+        </a>
 
-        <div x-data="{ open: false }" class="relative">
+        <!-- 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">
                 <div class="flex items-center gap-2">
                     <x-heroicon-o-information-circle class="w-5 h-5" />
@@ -69,13 +68,14 @@
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                 </svg>
             </button>
-            <div x-show="open" x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-                <button wire:click="selectPage('about-card-type')" class="text-left hover:bg-gray-700 p-2 rounded">Card Type</button>
-                <button wire:click="selectPage('terms-and-privacy')" class="text-left hover:bg-gray-700 p-2 rounded">Terms & Privacy</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">Card Type</a>
+                <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left hover:bg-gray-700 p-2 rounded">Terms & Privacy</a>
             </div>
         </div>
 
-        <div x-data="{ open: false }" class="relative">
+        <!-- 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">
                 <div class="flex items-center gap-2">
                     <x-heroicon-o-document class="w-5 h-5" />
@@ -85,22 +85,22 @@
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                 </svg>
             </button>
-            <div x-show="open" x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-                <button wire:click="selectPage('registration-report')" class="text-left hover:bg-gray-700 p-2 rounded">Registration Report</button>
-                <button wire:click="selectPage('top-up-usage-report')" class="text-left hover:bg-gray-700 p-2 rounded">Top Up Usage Report</button>
-                <button wire:click="selectPage('mobile-usage-report')" class="text-left hover:bg-gray-700 p-2 rounded">Mobile Usage Report</button>
-                <button wire:click="selectPage('station-rating-report')" class="text-left hover:bg-gray-700 p-2 rounded">Station Rating Report</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">Registration Report</a>
+                <a wire:navigate href="/main/report/top-up-usage-report" class="text-left hover:bg-gray-700 p-2 rounded">Top Up Usage Report</a>
+                <a wire:navigate href="/main/report/mobile-usage-report" class="text-left hover:bg-gray-700 p-2 rounded">Mobile Usage Report</a>
+                <a wire:navigate href="/main/report/station-rating-report" class="text-left hover:bg-gray-700 p-2 rounded">Station Rating Report</a>
             </div>
         </div>
 
-
-        <button wire:click="selectPage('system-parameter')" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
+        <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
             <x-heroicon-o-cog-6-tooth class="w-5 h-5" />
             <span>System Parameters</span>
-        </button>
+        </a>
 
-        <div x-data="{ open: false }" class="relative">
-            <button @click.stop="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
+        <!-- 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">
                 <div class="flex items-center gap-2">
                     <x-heroicon-o-map-pin class="w-5 h-5" />
                     <span>Station Locator</span>
@@ -109,13 +109,11 @@
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                 </svg>
             </button>
-            <div x-show="open" x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
-                <button wire:click="selectPage('branch')" class="text-left hover:bg-gray-700 p-2 rounded">Branches</button>
-                <button wire:click="selectPage('station')" class="text-left hover:bg-gray-700 p-2 rounded">Stations</button>
-                <button wire:click="selectPage('fuel')" class="text-left hover:bg-gray-700 p-2 rounded">Fuels</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">Branches</a>
+                <a wire:navigate href="/main/station-locator/station" class="text-left hover:bg-gray-700 p-2 rounded">Stations</a>
+                <a wire:navigate href="/main/station-locator/fuel" class="text-left hover:bg-gray-700 p-2 rounded">Fuels</a>git asdasd
             </div>
         </div>
-
     </nav>
 </div>
-
diff --git a/resources/views/livewire/user-management/user-management.blade.php b/resources/views/livewire/user-management/user-management.blade.php
index 3ae08e2..9eaa7a7 100644
--- a/resources/views/livewire/user-management/user-management.blade.php
+++ b/resources/views/livewire/user-management/user-management.blade.php
@@ -1,3 +1,3 @@
 <div>
-<h1>This is user management page</h1>
+    This is the user management page.
 </div>
diff --git a/resources/views/main/dashboard.blade.php b/resources/views/main/dashboard.blade.php
index beee3ae..a087006 100644
--- a/resources/views/main/dashboard.blade.php
+++ b/resources/views/main/dashboard.blade.php
@@ -1,5 +1,6 @@
 @extends('layouts.dashboard')
 
-@section('main-page-content')
+@section('main-content-manager')
     <livewire:main-content-manager />
 @endsection
+
diff --git a/routes/web.php b/routes/web.php
index 283907c..ac23c63 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,22 @@
 <?php
 
+use App\Livewire\Branch;
+use App\Livewire\CardMember;
+use App\Livewire\CardType;
+use App\Livewire\Fuel;
+use App\Livewire\LockedAccount;
+use App\Livewire\MobileUsageReport;
+use App\Livewire\TopUp;
+use App\Livewire\Profile;
+use App\Livewire\Promotion;
+use App\Livewire\Notification;
+use App\Livewire\PhotoSlider;
+use App\Livewire\RegistrationReport;
+use App\Livewire\Station;
+use App\Livewire\StationRatingReport;
+use App\Livewire\SystemParameter;
+use App\Livewire\TermsAndPrivacy;
+use App\Livewire\TopUpUsageReport;
 use App\Livewire\UserManagement;
 use Illuminate\Support\Facades\Route;
 
@@ -11,4 +28,27 @@ Route::get('/login', function () {
 
 Route::get('/dashboard', function () {
     return view('main.dashboard'); // This view extends layouts.dashboard
-});
\ No newline at end of file
+});
+
+// Route::get('/main/profile', Profile::class);
+// Route::get('/main/user-management', UserManagement::class);
+// Route::get('/main/notification', Notification::class);
+// Route::get('/main/member-management/card-member', CardMember::class);
+// Route::get('/main/member-management/locked-account', LockedAccount::class);
+// Route::get('/main/home-page-mobile/photo-slider', PhotoSlider::class);
+// Route::get('/main/promotion', Promotion::class);
+// Route::get('/main/top-up', TopUp::class);
+// Route::get('/main/about-us/card-type', CardType::class);
+// Route::get('/main/about-us/terms-and-privacy', TermsAndPrivacy::class);
+// Route::get('/main/report/registration-report', RegistrationReport::class);
+// Route::get('/main/report/top-up-usage-report', TopUpUsageReport::class);
+// Route::get('/main/report/mobile-usage-report', MobileUsageReport::class);
+// Route::get('/main/report/station-rating-report', StationRatingReport::class);
+// Route::get('/main/system-parameter', SystemParameter::class);
+// Route::get('/main/station-locator/branch', Branch::class);
+// Route::get('/main/station-locator/station', Station::class);
+// Route::get('/main/station-locator/fuel', Fuel::class);
+
+Route::get('/main/{page?}', function () {
+    return view('main.dashboard');
+})->where('page', '.*');
\ No newline at end of file