diff --git a/resources/views/pages/add-fuels.blade.php b/resources/views/pages/add-fuels.blade.php
new file mode 100644
index 0000000..39d56b9
--- /dev/null
+++ b/resources/views/pages/add-fuels.blade.php
@@ -0,0 +1,69 @@
+@extends('layouts.app')
+
+@section('page_title', 'Add Fuel')
+
+@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;">Add Fuel</h5>
+    </div>
+    <div class="row justify-content-center">
+        <div class="card-body p-3">
+            <form id="addFuelForm">
+                <div class="mb-3">
+                    <label for="fuelName" class="form-label">Fuel Name</label>
+                    <input type="text" class="form-control" id="fuelName" placeholder="Enter fuel name" required>
+                </div>
+                <div class="d-flex justify-content-end mt-3">
+                    <button type="button" class="btn btn-outline-secondary me-2" style="margin-right:5px">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Add Fuel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <style>
+        .card {
+            border-radius: 5px;
+            border: 1px solid #dee2e6;
+        }
+        .form-label {
+            font-size: 0.95rem;
+        }
+        .form-control {
+            font-size: 0.9rem;
+            width: 100%;
+        }
+    </style>
+
+    <script>
+        document.getElementById('addFuelForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const fuelName = document.getElementById('fuelName').value;
+
+            if (!fuelName) {
+                alert('Please fill out the required field.');
+                return;
+            }
+
+            const currentDate = new Date().toISOString().split('T')[0]; // e.g., "2025-04-16"
+            const newFuel = {
+                id: Date.now(),
+                fuelName,
+                dateCreated: currentDate,
+                dateModified: currentDate
+            };
+
+            let fuels = JSON.parse(sessionStorage.getItem('fuels') || '[]');
+            fuels.push(newFuel);
+            sessionStorage.setItem('fuels', JSON.stringify(fuels));
+
+            alert('Fuel added successfully!');
+            window.location.href = '/fuels';
+        });
+
+        document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
+            window.location.href = '/fuels';
+        });
+    </script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/station locator/fuels.blade.php b/resources/views/pages/station locator/fuels.blade.php
index c798f74..cbbec8a 100644
--- a/resources/views/pages/station locator/fuels.blade.php	
+++ b/resources/views/pages/station locator/fuels.blade.php	
@@ -1,14 +1,75 @@
 @extends('layouts.app')
 
-@section('page_title', 'Station Locator')
+@section('page_title', 'Fuels')
 
 @section('content')
-<div class="card" style="min-height: 500px;">
-    <div class="card-header">
-        <i class="fa-solid fa-location-dot" style="color:gray;"> Fuels</i>
-    </div>
-    <div class="card-body">
-        <p>This is the Fuels page content.</p>
-    </div>
-</div>
-@endsection
+    @php
+        $fuels = [
+            [
+                'id' => 1,
+                'fuelName' => 'Unleaded 91',
+                'dateCreated' => '2025-01-01',
+                'dateModified' => '2025-04-01'
+            ],
+            [
+                'id' => 2,
+                'fuelName' => 'Unleaded 95',
+                'dateCreated' => '2025-02-01',
+                'dateModified' => '2025-04-10'
+            ],
+            [
+                'id' => 3,
+                'fuelName' => 'Diesel',
+                'dateCreated' => '2025-03-01',
+                'dateModified' => '2025-03-01'
+            ],
+            [
+                'id' => 4,
+                'fuelName' => 'Premium Unleaded 98',
+                'dateCreated' => '2025-01-15',
+                'dateModified' => '2025-04-05'
+            ],
+            [
+                'id' => 5,
+                'fuelName' => 'Kerosene',
+                'dateCreated' => '2025-02-15',
+                'dateModified' => '2025-02-15'
+            ],
+            [
+                'id' => 6,
+                'fuelName' => 'Biofuel E10',
+                'dateCreated' => '2025-03-15',
+                'dateModified' => '2025-04-12'
+            ]
+        ];
+    @endphp
+
+    @include('components.table-component', [
+        'pageTitle' => 'Fuels',
+        'data' => $fuels,
+        'columns' => [
+            ['name' => 'Fuel Name', 'key' => 'fuelName', 'sortable' => true],
+            ['name' => 'Date Created', 'key' => 'dateCreated', 'sortable' => true],
+            ['name' => 'Date Modified', 'key' => 'dateModified', 'sortable' => true]
+        ],
+        'allFields' => [
+            ['name' => 'Fuel Name', 'key' => 'fuelName', 'type' => 'text', 'required' => true]
+        ],
+        'actions' => ['edit', 'delete'],
+        'showAddButton' => true,
+        'addButtonUrl' => '/add-fuels',
+        'showCheckboxes' => false,
+        'showBatchDelete' => false,
+        'showEditModal' => true,
+        'showViewModal' => false
+    ])
+
+    <script>
+        const storedFuels = JSON.parse(sessionStorage.getItem('fuels') || '[]');
+        if (storedFuels.length > 0) {
+            tableConfig.data = [...tableConfig.data, ...storedFuels];
+            renderTable();
+            renderPagination();
+        }
+    </script>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 22f5882..d520e45 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -122,4 +122,8 @@ Route::get('/add-terms-and-privacy', function () {
 
 Route::get('/add-branches', function () {
     return view('pages.add-branches');
-})->name('add-branches');
\ No newline at end of file
+})->name('add-branches');
+
+Route::get('/add-fuels', function () {
+    return view('pages.add-fuels');
+})->name('add-fuels');
\ No newline at end of file