diff --git a/app/Livewire/OnDemand.php b/app/Livewire/OnDemand.php
new file mode 100644
index 0000000..9e933fc
--- /dev/null
+++ b/app/Livewire/OnDemand.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class OnDemand extends Component
+{
+    public function render()
+    {
+        return view('livewire.fuel-price-update.on-demand');
+    }
+}
diff --git a/app/Livewire/Schedule.php b/app/Livewire/Schedule.php
new file mode 100644
index 0000000..1336008
--- /dev/null
+++ b/app/Livewire/Schedule.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class Schedule extends Component
+{
+    public function render()
+    {
+        return view('livewire.fuel-price-update.schedule');
+    }
+}
diff --git a/app/Livewire/TopUpSettings.php b/app/Livewire/TopUpSettings.php
new file mode 100644
index 0000000..1f971dc
--- /dev/null
+++ b/app/Livewire/TopUpSettings.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class TopUpSettings extends Component
+{
+    public function render()
+    {
+        return view('livewire.top-up-setting.top-up-settings');
+    }
+}
diff --git a/app/Livewire/UpdateLogs.php b/app/Livewire/UpdateLogs.php
new file mode 100644
index 0000000..3d63264
--- /dev/null
+++ b/app/Livewire/UpdateLogs.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class UpdateLogs extends Component
+{
+    public $updateLogs = [];
+
+    public function mount()
+    {
+        $this->loadUpdateLogs();  
+    }
+
+    public function loadUpdateLogs()
+    {
+        $this->updateLogs = collect(json_decode(file_get_contents(storage_path('app/update-logs.json')), true));
+    }
+
+    public function render()
+    {
+        return view('livewire.fuel-price-update.update-logs', [
+            'updateLogs' => $this->updateLogs, 
+        ]);
+    }
+}
diff --git a/public/assets/bg_card.png b/public/assets/bg_card.png
new file mode 100644
index 0000000..6b219ab
Binary files /dev/null and b/public/assets/bg_card.png differ
diff --git a/resources/views/livewire/buttons/create-user.blade.php b/resources/views/livewire/buttons/create-user.blade.php
index 2e934de..ddac4cc 100644
--- a/resources/views/livewire/buttons/create-user.blade.php
+++ b/resources/views/livewire/buttons/create-user.blade.php
@@ -20,7 +20,7 @@
     <h3 class="text-5xl font-semibold text-gray-800 mt-4">Create User</h3>
 
     <!-- Bottom border -->
-    <div class="border-b border-gray-300 mt-"></div>
+    <div class="border-b border-gray-300 mt-5"></div>
 
     <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
         <h2 class="text-lg font-semibold mb-4">User Details</h2>
diff --git a/resources/views/livewire/components/table.blade.php b/resources/views/livewire/components/table.blade.php
index 4ae0021..1b5a234 100644
--- a/resources/views/livewire/components/table.blade.php
+++ b/resources/views/livewire/components/table.blade.php
@@ -3,43 +3,46 @@
 
         <div class="flex justify-between items-center mb-4">
             @if ($hasSearch ?? true)
-                <!-- Search bar -->
-                <input
-                    type="text"
-                    wire:model="search"
-                    placeholder="Search..."
-                    class="border rounded px-3 py-2"
-                />
+            <!-- Search bar -->
+            <input
+                type="text"
+                wire:model="search"
+                placeholder="Search..."
+                class="border rounded px-3 py-2" />
             @else
-                <!-- Start Date and End Date filters -->
-                <div class="flex gap-2">
+            <!-- Start Date and End Date filters -->
+            <div class="flex items-center gap-4">
+                <div class="flex items-center gap-2">
+                    <label class="font-medium">Start</label>
                     <input
                         type="date"
                         wire:model="startDate"
-                        class="border rounded px-3 py-2"
-                    />
-                    
+                        class="border rounded px-3 py-2" />
+                </div>
+
+                <div class="flex items-center gap-2">
+                    <label class="font-medium">End</label>
                     <input
                         type="date"
                         wire:model="endDate"
-                        class="border rounded px-3 py-2"
-                    />
+                        class="border rounded px-3 py-2" />
                 </div>
+            </div>
+
             @endif
 
             @if ($hasAddButton ?? true)
-                <!-- Add button -->
-                <a href="{{ $addRoute }}" class="bg-orange-600 text-white px-4 py-2 rounded">
-                    + Add
-                </a>
+            <!-- Add button -->
+            <a href="{{ $addRoute }}" class="bg-orange-600 text-white px-4 py-2 rounded">
+                + Add
+            </a>
             @else
-                <!-- Export button -->
-                <button
-                    wire:click="export"
-                    class="bg-orange-600 text-white px-4 py-2 rounded flex items-center gap-2"
-                >
-                    Export CSV
-                </button>
+            <!-- Export button -->
+            <button
+                wire:click="export"
+                class="bg-orange-600 text-white px-4 py-2 rounded flex items-center gap-2">
+                Export CSV
+            </button>
             @endif
         </div>
 
@@ -63,7 +66,7 @@
                         <span class="ml-2">↑</span>
                         @else
                         <span class="ml-2">↓</span>
-                        @endif 
+                        @endif
                         @else
                         <span class="ml-2">↕</span>
                         @endif
@@ -80,7 +83,7 @@
             <!-- Table Body -->
             <tbody>
                 @php
-                    \Illuminate\Support\Facades\Log::info("Blade rows count: " . count($rows) . ", First Username: " . ($rows[0]['username'] ?? 'N/A'));
+                \Illuminate\Support\Facades\Log::info("Blade rows count: " . count($rows) . ", First Username: " . ($rows[0]['username'] ?? 'N/A'));
                 @endphp
                 @forelse ($rows as $index => $row)
                 <tr class="hover:bg-gray-50 border-b" wire:key="row-{{ $row['id'] }}-{{ $index }}-{{ $renderKey }}">
@@ -144,32 +147,29 @@
             <!-- Pagination -->
             <div class="flex items-center gap-2">
                 <!-- Previous Button -->
-                <button 
-                    wire:click="gotoPage({{ $currentPage - 1 }})" 
+                <button
+                    wire:click="gotoPage({{ $currentPage - 1 }})"
                     class="px-3 py-1 border rounded {{ $currentPage <= 1 ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
-                    {{ $currentPage <= 1 ? 'disabled' : '' }}
-                >
+                    {{ $currentPage <= 1 ? 'disabled' : '' }}>
                     Prev
                 </button>
 
                 <!-- Page Numbers -->
                 @for ($i = 1; $i <= $lastPage; $i++)
-                    <button 
-                        wire:click="gotoPage({{ $i }})" 
-                        class="px-3 py-1 border rounded {{ $currentPage === $i ? 'bg-orange-600 text-white' : 'bg-white hover:bg-gray-100' }}"
-                    >
-                        {{ $i }}
+                    <button
+                    wire:click="gotoPage({{ $i }})"
+                    class="px-3 py-1 border rounded {{ $currentPage === $i ? 'bg-orange-600 text-white' : 'bg-white hover:bg-gray-100' }}">
+                    {{ $i }}
                     </button>
-                @endfor
+                    @endfor
 
-                <!-- Next Button -->
-                <button 
-                    wire:click="gotoPage({{ $currentPage + 1 }})" 
-                    class="px-3 py-1 border rounded {{ $currentPage >= $lastPage ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
-                    {{ $currentPage >= $lastPage ? 'disabled' : '' }}
-                >
-                    Next
-                </button>
+                    <!-- Next Button -->
+                    <button
+                        wire:click="gotoPage({{ $currentPage + 1 }})"
+                        class="px-3 py-1 border rounded {{ $currentPage >= $lastPage ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
+                        {{ $currentPage >= $lastPage ? 'disabled' : '' }}>
+                        Next
+                    </button>
             </div>
 
             <!-- Entries Text -->
diff --git a/resources/views/livewire/fuel-price-update/on-demand.blade.php b/resources/views/livewire/fuel-price-update/on-demand.blade.php
new file mode 100644
index 0000000..1bfc819
--- /dev/null
+++ b/resources/views/livewire/fuel-price-update/on-demand.blade.php
@@ -0,0 +1,38 @@
+<div>
+    {{-- Top Nav --}}
+    @include('livewire.fuel-price-update.top-nav.on-demand')
+
+    <!-- Main Content -->
+    <div class="flex flex-col items-center justify-center w-full mt-10">
+
+        <!-- Import File Section -->
+        <div class="bg-white w-[80%] max-w-lg rounded-md shadow-md p-10 text-center">
+            <h2 class="text-2xl font-semibold mb-8">Import File</h2>
+
+            <div class="flex flex-col items-start gap-6 w-full max-w-md mx-auto">
+
+                <!-- File Upload -->
+                <div class="w-full">
+                    <input
+                        type="file"
+                        class="border rounded px-4 py-2 w-full" />
+                </div>
+
+                <!-- Buttons -->
+                <div class="w-full flex gap-4 mt-6">
+                    <div class="w-1/2">
+                        <button class="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-6 rounded">
+                            Submit
+                        </button>
+                    </div>
+                    <div class="w-1/2">
+                        <button class="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-6 rounded">
+                            Export Fuel Prices
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
diff --git a/resources/views/livewire/fuel-price-update/schedule.blade.php b/resources/views/livewire/fuel-price-update/schedule.blade.php
new file mode 100644
index 0000000..4427875
--- /dev/null
+++ b/resources/views/livewire/fuel-price-update/schedule.blade.php
@@ -0,0 +1,52 @@
+<div>
+    {{-- Top Nav --}}
+    @include('livewire.fuel-price-update.top-nav.schedule')
+
+    <!-- Main Content -->
+    <div class="flex flex-col items-center justify-center w-full mt-10">
+
+        <div class="bg-white w-[80%] max-w-lg rounded-md shadow-md p-10 text-center">
+            <h2 class="text-2xl font-semibold mb-8">Schedule Price Update</h2>
+
+            <div class="flex flex-col items-start gap-6 w-full max-w-md mx-auto">
+
+                <!-- File Upload -->
+                <div class="w-full">
+                    <input
+                        type="file"
+                        class="border rounded px-4 py-2 w-full" />
+                </div>
+
+                <!-- Date Picker -->
+                <div class="w-full">
+                    <label class="block text-left mb-1 font-medium">Date</label>
+                    <input
+                        type="date"
+                        class="border rounded px-4 py-2 w-full" />
+                </div>
+
+                <!-- Time Picker -->
+                <div class="w-full">
+                    <label class="block text-left mb-1 font-medium">Time</label>
+                    <input
+                        type="time"
+                        class="border rounded px-4 py-2 w-full" />
+                </div>
+
+                <!-- Buttons -->
+                <div class="w-full flex gap-4 mt-6">
+                    <div class="w-1/2">
+                        <button class="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-6 rounded">
+                            Submit
+                        </button>
+                    </div>
+                    <div class="w-1/2">
+                        <button class="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-6 rounded">
+                            Export Fuel Prices
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/livewire/fuel-price-update/top-nav/on-demand.blade.php b/resources/views/livewire/fuel-price-update/top-nav/on-demand.blade.php
new file mode 100644
index 0000000..dfdc546
--- /dev/null
+++ b/resources/views/livewire/fuel-price-update/top-nav/on-demand.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/fuel-price/on-demand" class="hover:text-orange-600">
+            On Demand
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">On Demand</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/fuel-price-update/top-nav/schedule.blade.php b/resources/views/livewire/fuel-price-update/top-nav/schedule.blade.php
new file mode 100644
index 0000000..40895ae
--- /dev/null
+++ b/resources/views/livewire/fuel-price-update/top-nav/schedule.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/fuel-price/schedule" class="hover:text-orange-600">
+            Schedule
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Schedule</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/fuel-price-update/top-nav/update-logs.blade.php b/resources/views/livewire/fuel-price-update/top-nav/update-logs.blade.php
new file mode 100644
index 0000000..da3e64b
--- /dev/null
+++ b/resources/views/livewire/fuel-price-update/top-nav/update-logs.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 mr-1" />
+            <span class="leading-none">Home</span>
+        </a>
+        <x-heroicon-o-chevron-right class="w-4 h-4" />
+        <a href="/main/fuel-price/update-logs" class="hover:text-orange-600">
+            Update Logs
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Update Logs</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/fuel-price-update/update-logs.blade.php b/resources/views/livewire/fuel-price-update/update-logs.blade.php
new file mode 100644
index 0000000..6e4eed4
--- /dev/null
+++ b/resources/views/livewire/fuel-price-update/update-logs.blade.php
@@ -0,0 +1,20 @@
+<div>
+    {{-- Top Nav --}}
+    @include('livewire.fuel-price-update.top-nav.update-logs')
+    <livewire:components.table
+        :columns="[
+            ['label' => 'Schedule', 'field' => 'schedule'],
+            ['label' => 'Is Completed', 'field' => 'is_completed'],
+            ['label' => 'Is Success', 'field' => 'is_success'],
+            ['label' => 'Note', 'field' => 'note'],
+            ['label' => 'Updated By', 'field' => 'updated_by'],
+            ['label' => 'Created At', 'field' => 'created_at'],
+        ]"
+        :rows="$updateLogs"
+        :hasSearch="false"
+        :hasCheckbox="false"
+        :hasActions="false"
+        :hasDelete="false"
+        :hasAddButton="false"
+        :isViewPage="false" />
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/main-content-manager.blade.php b/resources/views/livewire/main-content-manager.blade.php
index ca0142e..8a25c04 100644
--- a/resources/views/livewire/main-content-manager.blade.php
+++ b/resources/views/livewire/main-content-manager.blade.php
@@ -81,7 +81,25 @@
         @case('fuel')
             <livewire:fuel />
             @break
+        
+        @case('top-up-settings')
+            <livewire:top-up-settings />
+            @break
 
+	<!-- Fuel Price Update -->
+        @case('on-demand')
+            <livewire:on-demand />
+            @break
+
+        @case('schedule')
+            <livewire:schedule />
+            @break
+
+        @case('update-logs')
+            <livewire:update-logs />
+            @break
+
+        <!-- Create/Add Routes -->
         @case('user-create')
                 <livewire:buttons.create-user />
             @break
diff --git a/resources/views/livewire/navigation/drawer.blade.php b/resources/views/livewire/navigation/drawer.blade.php
index bf5c809..e781881 100644
--- a/resources/views/livewire/navigation/drawer.blade.php
+++ b/resources/views/livewire/navigation/drawer.blade.php
@@ -5,9 +5,9 @@
 
     <nav class="flex flex-col space-y-2 p-4">
         @php
-            function activeClass($path) {
-                return request()->is($path) ? 'text-orange-500' : '';
-            }
+        function activeClass($path) {
+        return request()->is($path) ? 'text-orange-500' : '';
+        }
         @endphp
 
         <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/user-management') }}">
@@ -100,7 +100,7 @@
         </div>
 
         <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left text-sm 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') }}" />
+            <x-heroicon-o-adjustments-horizontal class="w-5 h-5 {{ activeClass('main/system-parameter') }}" />
             <span x-show="!collapsed" class="{{ activeClass('main/system-parameter') }}">System Parameters</span>
         </a>
 
@@ -121,5 +121,29 @@
                 <a wire:navigate href="/main/station-locator/fuel" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</a>
             </div>
         </div>
+
+        <!-- Top-Up Settings -->
+        <a wire:navigate href="/main/top-up-settings" class="flex items-center gap-2 text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/top-up-settings') }}">
+            <x-heroicon-o-cog-6-tooth class="w-5 h-5 {{ activeClass('main/top-up-settings') }}" />
+            <span x-show="!collapsed" class="{{ activeClass('main/top-up-settings') }}">Top-Up Settings</span>
+        </a>
+
+        <!-- Dropdown: Fuel Price Update -->
+        <div x-data="{ open: $persist(false).as('dropdown-fuel-price') }" class="relative">
+            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left text-sm hover:bg-orange-200 p-2 rounded">
+                <div class="flex items-center gap-2">
+                    <x-heroicon-o-arrow-path class="w-5 h-5 {{ activeClass('main/fuel-price*') }}" />
+                    <span x-show="!collapsed" class="{{ activeClass('main/fuel-price*') }}">Fuel Price Update</span>
+                </div>
+                <svg x-show="!collapsed" :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" 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>
+            <div x-show="open && !collapsed" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
+                <a wire:navigate href="/main/fuel-price/on-demand" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/fuel-price/on-demand') }}">On-Demand</a>
+                <a wire:navigate href="/main/fuel-price/schedule" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/fuel-price/schedule') }}">Schedule</a>
+                <a wire:navigate href="/main/fuel-price/update-logs" class="text-left text-sm hover:bg-orange-200 p-2 rounded {{ activeClass('main/fuel-price/update-logs') }}">Update Logs</a>
+            </div>
+        </div>
     </nav>
-</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/top-up-setting/top-nav/top-up-settings.blade.php b/resources/views/livewire/top-up-setting/top-nav/top-up-settings.blade.php
new file mode 100644
index 0000000..e193196
--- /dev/null
+++ b/resources/views/livewire/top-up-setting/top-nav/top-up-settings.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <!-- anchor tag horizontally -->
+    <div class="flex items-center gap-2 text-xs text-gray-600">
+        <!-- Home link -->
+        <a href="/main/profile" class="flex items-center hover:text-orange-600">
+            <x-heroicon-o-home class="w-3 h-3 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 Settings
+        </a>
+    </div>
+
+    <!-- Page Title -->
+    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Top-Up Settings</h3>
+
+    <!-- Bottom border -->
+    <div class="border-b border-gray-300 mt-5"></div>
+</div>
diff --git a/resources/views/livewire/top-up-setting/top-up-settings.blade.php b/resources/views/livewire/top-up-setting/top-up-settings.blade.php
new file mode 100644
index 0000000..4129942
--- /dev/null
+++ b/resources/views/livewire/top-up-setting/top-up-settings.blade.php
@@ -0,0 +1,35 @@
+<div>
+    {{-- Top Nav --}}
+    @include('livewire.top-up-setting.top-nav.top-up-settings')
+
+    <!-- Main Content -->
+    <div class="flex flex-col items-center justify-center w-full mt-10 ">
+
+        <!-- Discount Section -->
+        <div class="bg-white w-[80%] rounded-md shadow-md p-10 text-center">
+            <h2 class="text-2xl font-semibold mb-6">Current Discount: 
+                <span class="text-orange-500 font-bold">0%</span>
+            </h2>
+
+            <div class="flex items-center justify-center gap-4 mb-8">
+                <label class="font-medium">Discount (%):</label>
+                <input 
+                    type="text" 
+                    wire:model="last_name" 
+                    class="border rounded px-4 py-2 w-32 text-center" 
+                    placeholder="Enter discount" 
+                    value="0"
+                >
+                <button class="bg-orange-500 hover:bg-orange-600 text-white font-medium py-2 px-6 rounded">
+                    Submit
+                </button>
+            </div>
+
+            <!-- Loyalty Card Image -->
+            <div class="flex justify-center">
+                <img src="/assets/bg_card.png" alt="Loyalty Card">
+            </div>
+        </div>
+
+    </div>
+</div>