diff --git a/resources/views/pages/add-branches.blade.php b/resources/views/pages/add-branches.blade.php
new file mode 100644
index 0000000..5200113
--- /dev/null
+++ b/resources/views/pages/add-branches.blade.php
@@ -0,0 +1,83 @@
+@extends('layouts.app')
+
+@section('page_title', 'Add Branch')
+
+@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 Branch</h5>
+    </div>
+    <div class="row justify-content-center">
+        <div class="card-body p-3">
+            <form id="addBranchForm">
+                <div class="mb-3">
+                    <label for="branchCode" class="form-label">Branch Code</label>
+                    <input type="text" class="form-control" id="branchCode" placeholder="Enter branch code" required>
+                </div>
+                <div class="mb-3">
+                    <label for="branchName" class="form-label">Branch Name</label>
+                    <input type="text" class="form-control" id="branchName" placeholder="Enter branch name" required>
+                </div>
+                <div class="mb-3">
+                    <label for="details" class="form-label">Details</label>
+                    <textarea class="form-control" id="details" rows="6" placeholder="Enter details" required></textarea>
+                </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 Branch</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <style>
+        .card {
+            border-radius: 5px;
+            border: 1px solid #dee2e6;
+        }
+        .form-label {
+            font-size: 0.95rem;
+        }
+        .form-control,
+        textarea.form-control {
+            font-size: 0.9rem;
+            width: 100%;
+        }
+    </style>
+
+    <script>
+        document.getElementById('addBranchForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const branchCode = document.getElementById('branchCode').value;
+            const branchName = document.getElementById('branchName').value;
+            const details = document.getElementById('details').value;
+
+            if (!branchCode || !branchName || !details) {
+                alert('Please fill out all required fields.');
+                return;
+            }
+
+            const currentDate = new Date().toISOString().split('T')[0]; // e.g., "2025-04-15"
+            const newBranch = {
+                id: Date.now(),
+                branchCode,
+                branchName,
+                details,
+                dateCreated: currentDate,
+                createdBy: 'Admin',
+                dateModified: currentDate
+            };
+
+            let branches = JSON.parse(sessionStorage.getItem('branches') || '[]');
+            branches.push(newBranch);
+            sessionStorage.setItem('branches', JSON.stringify(branches));
+
+            alert('Branch added successfully!');
+            window.location.href = '/branches';
+        });
+
+        document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
+            window.location.href = '/branches';
+        });
+    </script>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/station locator/branches.blade.php b/resources/views/pages/station locator/branches.blade.php
index a31a5bb..94e7d93 100644
--- a/resources/views/pages/station locator/branches.blade.php	
+++ b/resources/views/pages/station locator/branches.blade.php	
@@ -1,14 +1,98 @@
 @extends('layouts.app')
 
-@section('page_title', 'Station Locator')
+@section('page_title', 'Branches')
 
 @section('content')
-<div class="card" style="min-height: 500px;">
-    <div class="card-header">
-        <i class="fa-solid fa-location-dot" style="color:gray;"> Branches</i>
-    </div>
-    <div class="card-body">
-        <p>This is the Branches page content.</p>
-    </div>
-</div>
-@endsection
+    @php
+        $branches = [
+            [
+                'id' => 1,
+                'branchCode' => 'BR001',
+                'branchName' => 'Main Branch',
+                'details' => 'Located at downtown, open 9 AM to 5 PM.',
+                'dateCreated' => '2025-01-01',
+                'createdBy' => 'Admin',
+                'dateModified' => '2025-04-01'
+            ],
+            [
+                'id' => 2,
+                'branchCode' => 'BR002',
+                'branchName' => 'Westside Branch',
+                'details' => 'Serves western district, parking available.',
+                'dateCreated' => '2025-02-01',
+                'createdBy' => 'Admin',
+                'dateModified' => '2025-04-10'
+            ],
+            [
+                'id' => 3,
+                'branchCode' => 'BR003',
+                'branchName' => 'East End Branch',
+                'details' => 'Newly opened, extended hours.',
+                'dateCreated' => '2025-03-01',
+                'createdBy' => 'Admin',
+                'dateModified' => '2025-03-01'
+            ],
+            [
+                'id' => 4,
+                'branchCode' => 'BR004',
+                'branchName' => 'North Branch',
+                'details' => 'Located near industrial area.',
+                'dateCreated' => '2025-01-15',
+                'createdBy' => 'Admin',
+                'dateModified' => '2025-04-05'
+            ],
+            [
+                'id' => 5,
+                'branchCode' => 'BR005',
+                'branchName' => 'South Branch',
+                'details' => 'Family-friendly, open weekends.',
+                'dateCreated' => '2025-02-15',
+                'createdBy' => 'Admin',
+                'dateModified' => '2025-02-15'
+            ],
+            [
+                'id' => 6,
+                'branchCode' => 'BR006',
+                'branchName' => 'Central Branch',
+                'details' => 'Central location, 24/7 ATM.',
+                'dateCreated' => '2025-03-15',
+                'createdBy' => 'Admin',
+                'dateModified' => '2025-04-12'
+            ]
+        ];
+    @endphp
+
+    @include('components.table-component', [
+        'pageTitle' => 'Branches',
+        'data' => $branches,
+        'columns' => [
+            ['name' => 'Branch Code', 'key' => 'branchCode', 'sortable' => true],
+            ['name' => 'Branch Name', 'key' => 'branchName', 'sortable' => true],
+            ['name' => 'Details', 'key' => 'details', 'sortable' => true],
+            ['name' => 'Date Created', 'key' => 'dateCreated', 'sortable' => true],
+            ['name' => 'Created By', 'key' => 'createdBy', 'sortable' => true],
+            ['name' => 'Date Modified', 'key' => 'dateModified', 'sortable' => true]
+        ],
+        'allFields' => [
+            ['name' => 'Branch Code', 'key' => 'branchCode', 'type' => 'text', 'required' => true],
+            ['name' => 'Branch Name', 'key' => 'branchName', 'type' => 'text', 'required' => true],
+            ['name' => 'Details', 'key' => 'details', 'type' => 'textarea', 'required' => true]
+        ],
+        'actions' => ['edit', 'delete'],
+        'showAddButton' => true,
+        'addButtonUrl' => '/add-branches',
+        'showCheckboxes' => false,
+        'showBatchDelete' => false,
+        'showEditModal' => true,
+        'showViewModal' => false
+    ])
+
+    <script>
+        const storedBranches = JSON.parse(sessionStorage.getItem('branches') || '[]');
+        if (storedBranches.length > 0) {
+            tableConfig.data = [...tableConfig.data, ...storedBranches];
+            renderTable();
+            renderPagination();
+        }
+    </script>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 3d4a716..22f5882 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -118,4 +118,8 @@ Route::get('/add-card-types', function () {
 
 Route::get('/add-terms-and-privacy', function () {
     return view('pages.add-terms-and-privacy');
-})->name('add-terms-and-privacy');
\ No newline at end of file
+})->name('add-terms-and-privacy');
+
+Route::get('/add-branches', function () {
+    return view('pages.add-branches');
+})->name('add-branches');
\ No newline at end of file