diff --git a/resources/views/pages/add-top-up.blade.php b/resources/views/pages/add-top-up.blade.php
new file mode 100644
index 0000000..781a58e
--- /dev/null
+++ b/resources/views/pages/add-top-up.blade.php
@@ -0,0 +1,93 @@
+@extends('layouts.app')
+
+@section('page_title', 'Add Top-Up')
+
+@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 Top-Up</h5>
+    </div>
+    <div class="row justify-content-center">
+        <div class="card-body p-3">
+            <form id="addTopUpForm">
+                <div class="mb-3">
+                    <label for="freeCode" class="form-label">Free Code</label>
+                    <input type="text" class="form-control" id="freeCode" placeholder="Enter free code" required>
+                </div>
+                <div class="mb-3">
+                    <label for="name" class="form-label">Name</label>
+                    <input type="text" class="form-control" id="name" placeholder="Enter name" required>
+                </div>
+                <div class="mb-3">
+                    <label for="value" class="form-label">Value</label>
+                    <input type="number" class="form-control" id="value" placeholder="Enter value" step="0.01" required>
+                </div>
+                <div class="mb-3">
+                    <label for="type" class="form-label">Type</label>
+                    <select class="form-select" id="type" required>
+                        <option value="" disabled selected>Select type</option>
+                        <option value="Prepaid">Prepaid</option>
+                        <option value="Postpaid">Postpaid</option>
+                        <option value="Bonus">Bonus</option>
+                    </select>
+                </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 Top-Up</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <style>
+        .card {
+            border-radius: 5px;
+            border: 1px solid #dee2e6;
+        }
+        .form-label {
+            font-size: 0.95rem;
+        }
+        .form-control,
+        .form-select {
+            font-size: 0.9rem;
+            width: 100%;
+        }
+    </style>
+
+    <script>
+        document.getElementById('addTopUpForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const freeCode = document.getElementById('freeCode').value;
+            const name = document.getElementById('name').value;
+            const value = document.getElementById('value').value;
+            const type = document.getElementById('type').value;
+
+            if (!freeCode || !name || !value || !type) {
+                alert('Please fill out all fields.');
+                return;
+            }
+
+            // Simulate adding top-up (frontend-only)
+            const newTopUp = {
+                id: Date.now(),
+                freeCode: freeCode,
+                name: name,
+                value: value,
+                type: type
+            };
+
+            // Store in sessionStorage
+            let topups = JSON.parse(sessionStorage.getItem('topups') || '[]');
+            topups.push(newTopUp);
+            sessionStorage.setItem('topups', JSON.stringify(topups));
+
+            alert('Top-Up added successfully!');
+            window.location.href = '/top-up';
+        });
+
+        // Cancel button click handler
+        document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
+            window.location.href = '/top-up';
+        });
+    </script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/top-up.blade.php b/resources/views/pages/top-up.blade.php
index def97a6..b29679a 100644
--- a/resources/views/pages/top-up.blade.php
+++ b/resources/views/pages/top-up.blade.php
@@ -3,12 +3,78 @@
 @section('page_title', 'Top-Up')
 
 @section('content')
-<div class="card" style="min-height: 500px;">
-    <div class="card-header">
-        <i class="fa-solid fa-wallet" style="color:gray;"> Top-Up</i>
-    </div>
-    <div class="card-body">
-        <p>This is the Top-Up page content.</p>
-    </div>
-</div>
-@endsection
+    @php
+        $topups = [
+            [
+                'id' => 1,
+                'freeCode' => 'CODE123',
+                'name' => 'Monthly Top-Up',
+                'value' => '100.00',
+                'type' => 'Prepaid'
+            ],
+            [
+                'id' => 2,
+                'freeCode' => 'CODE456',
+                'name' => 'Annual Plan',
+                'value' => '500.00',
+                'type' => 'Postpaid'
+            ],
+            [
+                'id' => 3,
+                'freeCode' => 'CODE789',
+                'name' => 'Welcome Bonus',
+                'value' => '50.00',
+                'type' => 'Bonus'
+            ],
+            [
+                'id' => 4,
+                'freeCode' => 'CODE101',
+                'name' => 'Data Boost',
+                'value' => '200.00',
+                'type' => 'Prepaid'
+            ],
+            [
+                'id' => 5,
+                'freeCode' => 'CODE202',
+                'name' => 'Family Plan',
+                'value' => '300.00',
+                'type' => 'Postpaid'
+            ],
+            [
+                'id' => 6,
+                'freeCode' => 'CODE303',
+                'name' => 'Loyalty Credit',
+                'value' => '75.00',
+                'type' => 'Bonus'
+            ]
+        ];
+    @endphp
+
+    @include('components.table-component', [
+        'pageTitle' => 'Top-Up',
+        'data' => $topups,
+        'columns' => [
+            ['name' => 'Free Code', 'key' => 'freeCode', 'sortable' => true],
+            ['name' => 'Name', 'key' => 'name', 'sortable' => true],
+            ['name' => 'Value', 'key' => 'value', 'sortable' => true],
+            ['name' => 'Type', 'key' => 'type', 'sortable' => true]
+        ],
+        'actions' => ['edit', 'view', 'delete'],
+        'showAddButton' => true,
+        'addButtonUrl' => '/add-top-up',
+        'showCheckboxes' => true,
+        'showBatchDelete' => true,
+        'showEditModal' => true,
+        'showViewModal' => true
+    ])
+
+    <script>
+        const storedTopups = JSON.parse(sessionStorage.getItem('topups') || '[]');
+        if (storedTopups.length > 0) {
+            const tableConfig = window.tableConfig || {};
+            tableConfig.data = [...tableConfig.data, ...storedTopups];
+            window.renderTable();
+            window.renderPagination();
+        }
+    </script>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index bef2910..8c235f0 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -106,4 +106,8 @@ Route::get('/add-photo-slider', function () {
 
 Route::get('/add-promotions', function () {
     return view('pages.add-promotions');
-})->name('add-promotions');
\ No newline at end of file
+})->name('add-promotions');
+
+Route::get('/add-top-up', function () {
+    return view('pages.add-top-up');
+})->name('add-top-up');
\ No newline at end of file