diff --git a/public/img/card.png b/public/img/card.png
new file mode 100644
index 0000000..6b219ab
Binary files /dev/null and b/public/img/card.png differ
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index d3a23da..431e30f 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -6,8 +6,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <title>CMS-Laravel
-    </title>
+    <title>CMS-Laravel</title>
     <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
     <link rel="stylesheet" href="{{ asset('css/custom.css') }}">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -17,6 +16,21 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
         integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
 
+    <!-- Inline CSS to fix sidebar spacing -->
+    <style>
+        #sidebar .components li {
+            margin-bottom: 5px; /* Reduce gap between sidebar items */
+        }
+        #sidebar .components li.dropdown {
+            margin-bottom: 0; /* Ensure dropdown items don't add extra space when collapsed */
+        }
+        #sidebar .components li.dropdown .menu {
+            margin-top: 0; /* Remove extra space above dropdown menu */
+        }
+        #sidebar .components li a {
+            padding: 10px 15px; /* Consistent padding for all sidebar links */
+        }
+    </style>
 </head>
 
 <body>
@@ -29,6 +43,7 @@
             $aboutUs = ['card-types', 'terms-and-privacy'];
             $reports = ['registration-report', 'top-up-usage-report', 'mobile-usage-report', 'station-rating-report'];
             $stationLocator = ['branches', 'stations', 'fuels'];
+            $fuelPriceUpdate = ['fuel-price-on-demand', 'fuel-price-schedule', 'fuel-price-update-logs'];
         @endphp
 
         <!-- Sidebar -->
@@ -38,7 +53,6 @@
             </div>
 
             <ul class="list-unstyled components">
-
                 <!-- Static Items -->
                 <li class="{{ Request::is('user-management') ? 'active' : '' }}">
                     <a href="{{ route('user.management') }}" class="dashboard" style="display:flex">
@@ -52,7 +66,7 @@
                 </li>
 
                 <!-- Member Management -->
-                <li class="dropdown {{ in_array(Request::path(), $memberManagement) }}">
+                <li class="dropdown {{ in_array(Request::path(), $memberManagement) ? 'active' : '' }}">
                     <a href="#homeSubmenu1" data-toggle="collapse"
                         aria-expanded="{{ in_array(Request::path(), $memberManagement) ? 'true' : 'false' }}"
                         class="dropdown-toggle" style="display:flex">
@@ -70,7 +84,7 @@
                 </li>
 
                 <!-- Home Page -->
-                <li class="dropdown {{ in_array(Request::path(), $homePage) }}">
+                <li class="dropdown {{ in_array(Request::path(), $homePage) ? 'active' : '' }}">
                     <a href="#pageSubmenu2" data-toggle="collapse"
                         aria-expanded="{{ in_array(Request::path(), $homePage) ? 'true' : 'false' }}"
                         class="dropdown-toggle" style="display:flex">
@@ -96,8 +110,15 @@
                         <i class="fa-solid fa-wallet" style="padding-top:3px"></i><span>Top-Up</span>
                     </a>
                 </li>
+
+                <li class="{{ Request::is('top-up-settings') ? 'active' : '' }}">
+                    <a href="{{ route('top-up-settings') }}" class="dashboard" style="display:flex">
+                        <i class="fa-solid fa-cog" style="padding-top:3px"></i><span>Top Up Settings</span>
+                    </a>
+                </li>
+
                 <!-- About Us -->
-                <li class="dropdown {{ in_array(Request::path(), $aboutUs) }}">
+                <li class="dropdown {{ in_array(Request::path(), $aboutUs) ? 'active' : '' }}">
                     <a href="#pageSubmenu3" data-toggle="collapse"
                         aria-expanded="{{ in_array(Request::path(), $aboutUs) ? 'true' : 'false' }}"
                         class="dropdown-toggle" style="display:flex">
@@ -113,8 +134,9 @@
                         </li>
                     </ul>
                 </li>
+
                 <!-- Reports -->
-                <li class="dropdown {{ in_array(Request::path(), $reports) }}">
+                <li class="dropdown {{ in_array(Request::path(), $reports) ? 'active' : '' }}">
                     <a href="#pageSubmenu4" data-toggle="collapse"
                         aria-expanded="{{ in_array(Request::path(), $reports) ? 'true' : 'false' }}"
                         class="dropdown-toggle" style="display:flex">
@@ -136,14 +158,37 @@
                         </li>
                     </ul>
                 </li>
+
                 <!-- Static -->
                 <li class="{{ Request::is('system-parameters') ? 'active' : '' }}">
                     <a href="{{ route('system-parameters') }}" style="display:flex">
                         <i class="fa-solid fa-sliders" style="padding-top:3px"></i><span>System Parameters</span>
                     </a>
                 </li>
+
+                <!-- Fuel Price Update -->
+                <li class="dropdown {{ in_array(Request::path(), $fuelPriceUpdate) ? 'active' : '' }}">
+                    <a href="#pageSubmenu6" data-toggle="collapse"
+                        aria-expanded="{{ in_array(Request::path(), $fuelPriceUpdate) ? 'true' : 'false' }}"
+                        class="dropdown-toggle" style="display:flex">
+                        <i class="fa-solid fa-gas-pump" style="padding-top:3px"></i><span>Fuel Price Update</span>
+                    </a>
+                    <ul class="collapse list-unstyled menu {{ in_array(Request::path(), $fuelPriceUpdate) ? 'show' : '' }}"
+                        id="pageSubmenu6">
+                        <li class="{{ Request::is('fuel-price-on-demand') ? 'active' : '' }}">
+                            <a href="{{ route('fuel-price-on-demand') }}">On-Demand</a>
+                        </li>
+                        <li class="{{ Request::is('fuel-price-schedule') ? 'active' : '' }}">
+                            <a href="{{ route('fuel-price-schedule') }}">Schedule</a>
+                        </li>
+                        <li class="{{ Request::is('fuel-price-update-logs') ? 'active' : '' }}">
+                            <a href="{{ route('fuel-price-update-logs') }}">Update Logs</a>
+                        </li>
+                    </ul>
+                </li>
+
                 <!-- Station Locator -->
-                <li class="dropdown {{ in_array(Request::path(), $stationLocator) }}">
+                <li class="dropdown {{ in_array(Request::path(), $stationLocator) ? 'active' : '' }}">
                     <a href="#pageSubmenu5" data-toggle="collapse"
                         aria-expanded="{{ in_array(Request::path(), $stationLocator) ? 'true' : 'false' }}"
                         class="dropdown-toggle" style="display:flex">
@@ -164,12 +209,13 @@
                 </li>
             </ul>
         </nav>
-        <!-- Page Content  -->
+
+        <!-- Page Content -->
         <div id="content">
             <div class="top-navbar">
                 <nav class="navbar navbar-expand-lg" style="background-color:rgba(231, 70, 16, 0.84)">
                     <div class="container-fluid">
-                        <button type="button" id="sidebarCollapse" class="d-xl-block d-lg-block d-md-mone d-none">
+                        <button type="button" id="sidebarCollapse" class="d-xl-block d-lg-block d-md-none d-none">
                             <span class="fa-solid fa-arrow-left"></span>
                         </button>
                         <button class="d-inline-block d-lg-none ml-auto more-button" type="button"
@@ -223,7 +269,7 @@
             </div>
         </div>
     </div>
-    </div>
+
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="js/jquery-3.3.1.slim.min.js"></script>
@@ -244,4 +290,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/resources/views/pages/fuel-price-on-demand.blade.php b/resources/views/pages/fuel-price-on-demand.blade.php
new file mode 100644
index 0000000..c1279da
--- /dev/null
+++ b/resources/views/pages/fuel-price-on-demand.blade.php
@@ -0,0 +1,84 @@
+@extends('layouts.app')
+
+@section('page_title', 'Fuel Price On-Demand')
+
+@section('content')
+<div class="card-header border-0 bg-transparent py-2">
+    <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;font-weight:500">Fuel Price On-Demand</h5>
+</div>
+    <div class="row justify-content-center align-items-center">
+        <div class="col-12 col-md-8 col-lg-6">
+            <div class="card-body p-3">
+                <form id="fuelPriceForm">
+                    <!-- Import File Section -->
+                    <div class="mb-3">
+                        <label class="form-label fw-bold" style="font-size: 1.5rem;">Import File</label>
+                        <div class="input-group mb-3">
+                            <input type="file" class="form-control" id="fuelPriceFile" style="font-size: 0.9rem; margin: 10px;">
+                        </div>
+                    </div>
+                   
+
+                    <!-- Buttons -->
+                    <div class="d-flex justify-content-center gap-3" >
+                        <button type="submit" class="btn btn-primary d-flex align-items-center" style="background-color: #E74610; border-color: #E74610; font-size: 1.2rem; padding: 10px 20px;">
+                            SUBMIT <i class="fas fa-paper-plane ms-2"></i>
+                        </button>
+                        <button type="button" id="exportFuelPrices" class="btn btn-secondary d-flex align-items-center" style="font-size: 1.2rem; padding: 10px 20px;">
+                            EXPORT FUEL PRICES <i class="fas fa-cloud-download-alt ms-2"></i>
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <style>
+        .card {
+            border-radius: 5px;
+            border: 1px solid #dee2e6;
+        }
+        .form-label {
+            font-size: 1.2rem;
+        }
+        .form-control {
+            font-size: 1.2rem;
+        }
+        .btn-primary:hover {
+            background-color: #e07b30;
+            border-color: #e07b30;
+        }
+        .btn-secondary {
+            background-color: #6c757d;
+            border-color: #6c757d;
+        }
+        .btn-secondary:hover {
+            background-color: #5a6268;
+            border-color: #5a6268;
+        }
+        .d-flex.justify-content-center {
+            gap: 1rem; /* Space between buttons */
+        }
+    </style>
+
+    <script>
+        document.getElementById('fuelPriceForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const fileInput = document.getElementById('fuelPriceFile');
+            if (!fileInput.files.length) {
+                alert('Please select a file to import.');
+                return;
+            }
+
+            // Simulate file import (frontend-only)
+            alert('File imported successfully!');
+            fileInput.value = ''; // Reset file input
+        });
+
+        document.getElementById('exportFuelPrices').addEventListener('click', function() {
+            // Simulate export action (frontend-only)
+            alert('Fuel prices exported successfully!');
+        });
+    </script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/fuel-price-schedule.blade.php b/resources/views/pages/fuel-price-schedule.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/pages/fuel-price-update-logs.blade.php b/resources/views/pages/fuel-price-update-logs.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/pages/top-up-settings.blade.php b/resources/views/pages/top-up-settings.blade.php
new file mode 100644
index 0000000..9627996
--- /dev/null
+++ b/resources/views/pages/top-up-settings.blade.php
@@ -0,0 +1,83 @@
+@extends('layouts.app')
+
+@section('page_title', 'Top-Up Settings')
+
+@section('content')
+<div class="card-header border-0 bg-transparent py-2">
+    <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;font-weight:500">Top-Up Settings</h5>
+</div>
+    <div class="row justify-content-center align-items-center">
+        <div class="col-12 col-md-8 col-lg-6">
+            <div class="card-body p-3">
+                <form id="topUpSettingsForm">
+                    <!-- Current Discount Display -->
+                    <div class="mb-2">
+                        <label class="form-label fw-bold" style="font-size: 1.5rem;">
+                            Current Discount: <span style="color: #E74610;">2%</span>
+                        </label>
+                    </div>
+
+                    <!-- Top Up Discount Input -->
+                    <div class="mb-2">
+                        <label for="discount" class="form-label" style="font-size: 1.2rem;">Top Up Discount (%)</label>
+                        <div class="d-flex align-items-center">
+                            <input type="number" class="form-control me-2" id="discount" placeholder="Enter discount percentage" value="3" step="0.01" required style="width: 300px; font-size: 1.2rem; padding: 10px;">
+                            <button type="submit" class="btn btn-primary" style="background-color: #E74610; border-color: #E74610; font-size: 1.2rem; padding: 10px 20px;">SUBMIT</button>
+                        </div>
+                    </div>
+
+                    <!-- Card Image -->
+                    <div class="mt-3 text-center">
+                        <img src="{{ asset('img/card.png') }}" alt="Loyalty Card" style="max-width: 300px;">
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <style>
+        .card {
+            border-radius: 5px;
+            border: 1px solid #dee2e6;
+        }
+        .form-label {
+            font-size: 1.2rem;
+        }
+        .form-control {
+            font-size: 1.2rem;
+        }
+        .btn-primary:hover {
+            background-color: #e07b30;
+            border-color: #e07b30;
+        }
+        /* Ensure the input and button are closely aligned */
+        .d-flex.align-items-center {
+            gap: 0.5rem; /* Small gap between input and button */
+        }
+    </style>
+
+    <script>
+        document.getElementById('topUpSettingsForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const discount = document.getElementById('discount').value;
+
+            if (!discount || discount < 0) {
+                alert('Please enter a valid discount percentage.');
+                return;
+            }
+
+            // Simulate updating the discount (frontend-only)
+            sessionStorage.setItem('topUpDiscount', discount);
+
+            alert('Discount updated successfully!');
+            window.location.reload(); // Reload to reflect the new "Current Discount"
+        });
+
+        // On page load, update the current discount display if stored in sessionStorage
+        window.addEventListener('load', function() {
+            const storedDiscount = sessionStorage.getItem('topUpDiscount') || '2';
+            document.querySelector('.form-label.fw-bold span').textContent = `${storedDiscount}%`;
+        });
+    </script>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index f25e379..0d0cea2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -130,4 +130,22 @@ Route::get('/add-fuels', function () {
 
 Route::get('/add-station', function () {
     return view('pages.add-station');
-})->name('add-station'); 
\ No newline at end of file
+})->name('add-station'); 
+
+//CMS-extension
+
+Route::get('/top-up-settings', function () {
+    return view('pages.top-up-settings');
+})->name('top-up-settings'); 
+
+Route::get('/fuel-price-on-demand', function () {
+    return view('pages.fuel-price-on-demand');
+})->name('fuel-price-on-demand'); 
+
+Route::get('/fuel-price-schedule', function () {
+    return view('pages.fuel-price-schedule');
+})->name('fuel-price-schedule'); 
+
+Route::get('/fuel-price-update-logs', function () {
+    return view('pages.fuel-price-update-logs');
+})->name('fuel-price-update-logs'); 
\ No newline at end of file
