diff --git a/app/Http/Controllers/PhotoSliderController.php b/app/Http/Controllers/PhotoSliderController.php
new file mode 100644
index 0000000..07da682
--- /dev/null
+++ b/app/Http/Controllers/PhotoSliderController.php
@@ -0,0 +1,329 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Session;
+
+class PhotoSliderController extends Controller
+{
+    protected $apiBaseUrl = 'http://192.168.100.6:8081/api';
+
+    public function index(Request $request)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                Log::info('No access token found, redirecting to login from photo-slider');
+                return redirect()->route('login')->with('error', 'Please log in to view photo sliders.');
+            }
+
+            $page = $request->input('page', 1);
+            $pageSize = 5;
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/cms/photoSlider", [
+                'page' => $page,
+                'page_size' => $pageSize,
+                '_search' => $request->input('_search', null),
+            ]);
+
+            if ($response->status() === 401 || $response->status() === 403) {
+                Log::warning('Unauthorized or Forbidden API response: ', $response->json());
+                return redirect()->route('login')->with('error', 'Your session has expired. Please log in again.');
+            }
+
+            $json = $response->json();
+
+            Log::info("PhotoSlider API Response (Page {$page}): ", $json);
+
+            if ($response->successful() && isset($json['data']) && is_array($json['data'])) {
+                $sliders = array_map(function ($slider) {
+                    Log::info('Processing photo slider record: ', $slider);
+                    return [
+                        'photoslider_uuid' => $slider['photoslider_uuid'] ?? $slider['id'] ?? null,
+                        'title' => $slider['title'] ?? 'Untitled',
+                        'type' => $slider['promo_type'] ?? 'Unknown',
+                        'startDate' => $slider['date_start'] ?? null,
+                        'endDate' => $slider['date_end'] ?? null,
+                        'isActive' => $slider['is_active'] ?? 0,
+                        'image' => $slider['image'] ?? null, // Include image field
+                    ];
+                }, $json['data']);
+
+                $total = $json['meta']['total'] ?? count($sliders);
+                $lastPage = $json['meta']['last_page'] ?? ceil($total / $pageSize);
+
+                return view('pages.home page.photo-slider', [
+                    'sliders' => $sliders,
+                    'currentPage' => $page,
+                    'lastPage' => $lastPage,
+                    'total' => $total,
+                ]);
+            } else {
+                Log::warning('No photo slider data found or invalid API response: ', $json);
+                return view('pages.home page.photo-slider', [
+                    'sliders' => [],
+                    'currentPage' => 1,
+                    'lastPage' => 1,
+                    'total' => 0,
+                ]);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching photo slider data: ' . $e->getMessage());
+            return view('pages.home page.photo-slider', [
+                'sliders' => [],
+                'currentPage' => 1,
+                'lastPage' => 1,
+                'total' => 0,
+            ]);
+        }
+    }
+
+    public function create()
+    {
+        return view('pages.photo-slider-create');
+    }
+
+    public function store(Request $request)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to add a photo slider.');
+            }
+
+            // Validate the request
+            $request->validate([
+                'image' => 'required|file|mimes:jpeg,png,jpg,gif|max:2048', // Adjust max size as needed
+            ]);
+
+            $data = [
+                'title' => $request->input('title'),
+                'description' => $request->input('description'),
+                'promo_type' => $request->input('type'),
+                'date_start' => $request->input('startDate'),
+                'date_end' => $request->input('endDate'),
+                'is_active' => $request->input('isActive', 0),
+            ];
+
+            // Attach the image file
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->attach(
+                'image', file_get_contents($request->file('image')->getRealPath()), $request->file('image')->getClientOriginalName()
+            )->post("{$this->apiBaseUrl}/cms/photoSlider", $data);
+
+            if ($response->successful()) {
+                return redirect()->route('photo-slider')->with('success', 'Photo slider created successfully.');
+            } else {
+                Log::warning('Failed to create photo slider: ', $response->json());
+                return redirect()->back()->with('error', $response->json()['message'] ?? 'Failed to create photo slider. Please try again.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error creating photo slider: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while creating the photo slider: ' . $e->getMessage());
+        }
+    }
+
+    public function edit($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to edit a photo slider.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/cms/photoSlider/{$uuid}");
+
+            $json = $response->json();
+
+            if ($response->successful() && isset($json['data'])) {
+                $slider = [
+                    'photo_slider_uuid' => $json['data']['photoslider_uuid'] ?? $json['data']['id'] ?? null,
+                    'title' => $json['data']['title'] ?? 'Untitled',
+                    'description' => $json['data']['description'] ?? '',
+                    'type' => $json['data']['promo_type'] ?? 'Unknown',
+                    'startDate' => $json['data']['date_start'] ?? null,
+                    'endDate' => $json['data']['date_end'] ?? null,
+                    'isActive' => $json['data']['is_active'] ?? 0,
+                    'image' => $json['data']['image'] ?? null,
+                ];
+                return view('pages.photo-slider-edit', ['slider' => $slider]);
+            } else {
+                Log::warning('No photo slider found or invalid API response: ', $json);
+                return redirect()->route('photo-slider')->with('error', 'Photo slider not found.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching photo slider for edit: ' . $e->getMessage());
+            return redirect()->route('photo-slider')->with('error', 'An error occurred while loading the photo slider.');
+        }
+    }
+
+    public function update(Request $request, $uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to update a photo slider.');
+            }
+
+            // Validate the request (image is optional for updates)
+            $request->validate([
+                'image' => 'nullable|file|mimes:jpeg,png,jpg,gif|max:2048',
+            ]);
+
+            $data = [
+                'title' => $request->input('title'),
+                'description' => $request->input('description'),
+                'promo_type' => $request->input('type'),
+                'date_start' => $request->input('startDate'),
+                'date_end' => $request->input('endDate'),
+                'is_active' => $request->input('isActive', 0),
+            ];
+
+            $client = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ]);
+
+            // Attach the image if provided
+            if ($request->hasFile('image')) {
+                $client = $client->attach(
+                    'image',
+                    file_get_contents($request->file('image')->getRealPath()),
+                    $request->file('image')->getClientOriginalName()
+                );
+            }
+
+            $response = $client->post("{$this->apiBaseUrl}/cms/updatePhotoSlider/{$uuid}", $data);
+
+            if ($response->successful()) {
+                return redirect()->route('photo-slider')->with('success', 'Photo slider updated successfully.');
+            } else {
+                Log::warning('Failed to update photo slider: ', $response->json());
+                return redirect()->back()->with('error', $response->json()['message'] ?? 'Failed to update photo slider. Please try again.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error updating photo slider: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while updating the photo slider: ' . $e->getMessage());
+        }
+    }
+
+    public function show($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to view a photo slider.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/cms/photoSlider/{$uuid}");
+
+            $json = $response->json();
+
+            if ($response->successful() && isset($json['data'])) {
+                $slider = [
+                    'photo_slider_uuid' => $json['data']['photoslider_uuid'] ?? $json['data']['id'] ?? null,
+                    'title' => $json['data']['title'] ?? 'Untitled',
+                    'description' => $json['data']['description'] ?? '',
+                    'type' => $json['data']['promo_type'] ?? 'Unknown',
+                    'startDate' => $json['data']['date_start'] ?? null,
+                    'endDate' => $json['data']['date_end'] ?? null,
+                    'isActive' => $json['data']['is_active'] ?? 0,
+                    'image' => $json['data']['image'] ?? null,
+                ];
+                return view('pages.photo-slider-view', ['slider' => $slider]);
+            } else {
+                Log::warning('No photo slider found or invalid API response: ', $json);
+                return redirect()->route('photo-slider')->with('error', 'Photo slider not found.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching photo slider for view: ' . $e->getMessage());
+            return redirect()->route('photo-slider')->with('error', 'An error occurred while loading the photo slider.');
+        }
+    }
+
+    public function destroy($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to delete a photo slider.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->delete("{$this->apiBaseUrl}/cms/photoSlider/{$uuid}");
+
+            if ($response->successful()) {
+                return redirect()->route('photo-slider')->with('success', 'Photo slider deleted successfully.');
+            } else {
+                Log::warning('Failed to delete photo slider: ', $response->json());
+                return redirect()->back()->with('error', 'Failed to delete photo slider. Please try again.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error deleting photo slider: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while deleting the photo slider.');
+        }
+    }
+
+    public function batchDelete(Request $request)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return redirect()->route('login')->with('error', 'Please log in to delete photo sliders.');
+            }
+
+            $uuids = $request->input('photoslider_uuid');
+
+            if (!is_array($uuids) || empty($uuids)) {
+                return redirect()->back()->with('error', 'No photo sliders selected for deletion.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->delete("{$this->apiBaseUrl}/cms/photoSliderBatchDelete", [
+                'photoslider_uuid' => $uuids,
+            ]);
+
+            if ($response->successful()) {
+                return redirect()->route('photo-slider')->with('success', 'Photo sliders deleted successfully.');
+            } else {
+                Log::warning('Failed to batch delete photo sliders: ', $response->json());
+                return redirect()->back()->with('error', 'Failed to delete photo sliders. Please try again.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error batch deleting photo sliders: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while deleting photo sliders.');
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/views/components/photo-slider-component.blade.php b/resources/views/components/photo-slider-component.blade.php
new file mode 100644
index 0000000..2d5e22b
--- /dev/null
+++ b/resources/views/components/photo-slider-component.blade.php
@@ -0,0 +1,512 @@
+@props([
+    'pageTitle' => '',
+    'data' => [],
+    'columns' => [],
+    'actions' => [],
+    'showAddButton' => false,
+    'addButtonUrl' => '#',
+    'showCheckboxes' => false,
+    'showBatchDelete' => false,
+    'showEditModal' => false,
+    'showViewModal' => false,
+    'currentPage' => 1,
+    'lastPage' => 1,
+    'total' => 0,
+])
+
+<div class="card-header border-0 bg-transparent">
+    <div class="d-flex justify-content-between align-items-center">
+        <h5 class="mb-0 fw-bold text-dark">{{ $pageTitle }}</h5>
+        @if ($showAddButton)
+            <a href="{{ $addButtonUrl }}" class="btn btn-primary btn-sm px-3">
+                <i class="fa-solid fa-plus me-1"></i> Add {{ $pageTitle }}
+            </a>
+        @endif
+    </div>
+</div>
+<div class="card-body">
+    <!-- Search and Filters -->
+    <div class="row mb-3 align-items-center">
+        <div class="col-12 col-md-6 mb-2 mb-md-0">
+            <div class="input-group input-group-sm">
+                <span class="input-group-text bg-light border-end-0">
+                    <i class="fa-solid fa-magnifying-glass text-muted"></i>
+                </span>
+                <input type="text" class="form-control border-start-0" placeholder="Search..." id="searchInput" data-search-param="_search">
+            </div>
+        </div>
+        <div class="col-12 col-md-6 d-flex justify-content-end">
+            <button class="btn btn-outline-secondary btn-sm" id="clearFilters">
+                <i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
+            </button>
+        </div>
+    </div>
+
+    <!-- Table -->
+    <div class="table-container">
+        <table class="table table-hover align-middle">
+            <thead class="table-light">
+                <tr>
+                    @if ($showCheckboxes)
+                        <th class="text-center" style="width: 40px;">
+                            <input type="checkbox" id="selectAll">
+                        </th>
+                    @endif
+                    @foreach ($columns as $index => $column)
+                        <th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index + 1 }}">
+                            {{ $column['name'] }}
+                            @if ($column['sortable'])
+                                <i class="fa-solid fa-sort"></i>
+                            @endif
+                        </th>
+                    @endforeach
+                    @if (!empty($actions))
+                        <th class="text-center" style="width: 120px;">Action</th>
+                    @endif
+                </tr>
+            </thead>
+            <tbody id="tableBody"></tbody>
+        </table>
+    </div>
+
+    <!-- Batch Delete and Pagination -->
+    <div class="d-flex justify-content-between align-items-center mt-4">
+        @if ($showBatchDelete)
+            <div>
+                <button class="btn btn-danger btn-sm" id="deleteSelected" disabled>
+                    <i class="fa-solid fa-trash-can me-1"></i> Delete Selected
+                </button>
+            </div>
+        @endif
+        <nav aria-label="Page navigation">
+            <ul class="pagination pagination-sm" id="pagination"></ul>
+        </nav>
+    </div>
+</div>
+
+<style>
+    .card,
+    .table,
+    .btn,
+    .form-control,
+    .input-group-text {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        font-weight: 400;
+        line-height: 1.5;
+    }
+    .card-header h5 {
+        font-weight: 500;
+    }
+    .table thead th {
+        font-weight: 500;
+        font-size: 0.8rem;
+    }
+    .form-label {
+        font-weight: 500;
+        font-size: 0.9rem;
+    }
+    .card {
+        border-radius: 10px;
+    }
+    .card-header {
+        background-color: transparent;
+    }
+    .btn-primary {
+        background-color: #E74610;
+        border-color: #E74610;
+    }
+    .btn-primary:hover {
+        background-color: #E74610;
+        border-color: #E74610;
+    }
+    .sortable {
+        cursor: pointer;
+    }
+    .sortable:hover {
+        background-color: #f1f3f5;
+    }
+    .table {
+        font-size: 0.85rem;
+        width: 100%;
+        table-layout: auto;
+    }
+    .table th,
+    .table td {
+        padding: 0.5rem;
+        vertical-align: middle;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .table th:first-child,
+    .table td:first-child {
+        width: 40px;
+        text-align: center;
+    }
+    .table th:last-child,
+    .table td:last-child {
+        width: 120px;
+        text-align: center;
+    }
+    .table td:nth-child(5),
+    .table th:nth-child(5) {
+        width: 100px;
+    }
+    .table td:nth-child(6),
+    .table th:nth-child(6) {
+        max-width: 200px;
+    }
+    .table td:nth-child(7),
+    .table th:nth-child(7) {
+        width: 120px;
+    }
+    .edit-btn {
+        border-color: #E74610;
+        color: #E74610;
+    }
+    .edit-btn:hover {
+        background-color: #E74610;
+        border-color: #E74610;
+        color: #fff;
+    }
+    .table-hover tbody tr:hover {
+        cursor: pointer;
+        background-color: #f8f9fa;
+    }
+    @media (max-width: 576px) {
+        .table {
+            font-size: 0.75rem;
+        }
+        .table thead th {
+            font-size: 0.75rem;
+        }
+        .table th,
+        .table td {
+            padding: 0.3rem;
+        }
+        .btn-sm {
+            padding: 0.2rem 0.4rem;
+            font-size: 0.75rem;
+        }
+        .input-group-sm>.form-control {
+            font-size: 0.75rem;
+        }
+        .pagination-sm .page-link {
+            padding: 0.2rem 0.4rem;
+            font-size: 0.75rem;
+        }
+        .table td:nth-child(6) {
+            max-width: 150px;
+        }
+        .form-control,
+        .form-select {
+            font-size: 0.85rem;
+        }
+    }
+</style>
+
+<script>
+    const tableConfig = {
+        data: @json($data),
+        columns: @json($columns),
+        actions: @json($actions),
+        showCheckboxes: {{ json_encode($showCheckboxes) }},
+        showBatchDelete: {{ json_encode($showBatchDelete) }},
+        showEditModal: {{ json_encode($showEditModal) }},
+        showViewModal: {{ json_encode($showViewModal) }},
+        pageTitle: @json($pageTitle),
+        csrfToken: '{{ csrf_token() }}',
+        currentPage: {{ $currentPage }},
+        lastPage: {{ $lastPage }},
+        total: {{ $total }},
+    };
+
+    const rowsPerPage = 5; // Fixed at 5 per page
+    let currentPage = tableConfig.currentPage; // Initialize with server-side page
+    let filteredRows = [...tableConfig.data];
+    let originalRows = [...tableConfig.data].map(row => ({ ...row }));
+    let sortDirection = {};
+
+    function renderTable() {
+        const tableBody = document.getElementById('tableBody');
+        if (!tableBody) return;
+        tableBody.innerHTML = '';
+
+        // Use the data passed from the server (already paginated to 5)
+        const paginatedRows = filteredRows; // No client-side slicing needed
+
+        paginatedRows.forEach(row => {
+            const tr = document.createElement('tr');
+            tr.setAttribute('data-id', row.photoslider_uuid || row.id); // Use photoslider_uuid
+            tr.classList.add('clickable-row');
+            let rowHtml = '';
+
+            if (tableConfig.showCheckboxes) {
+                rowHtml += `<td class="text-center"><input type="checkbox" class="rowCheckbox"></td>`;
+            }
+
+            tableConfig.columns.forEach(col => {
+                let value = row[col.key] || '';
+                if (col.key === 'startDate' || col.key === 'endDate') {
+                    value = value ? new Date(value).toLocaleString() : 'N/A';
+                }
+                rowHtml += `<td>${value}</td>`;
+            });
+
+            if (tableConfig.actions.length > 0) {
+                rowHtml += `<td class="text-center">`;
+                tableConfig.actions.forEach(action => {
+                    if (action === 'edit') {
+                        rowHtml += `
+                            <a href="{{ route('photo-slider.edit', '') }}/${row.photoslider_uuid || row.id}" class="btn btn-sm edit-btn me-1" title="Edit">
+                                <i class="fa-solid fa-pen-to-square"></i>
+                            </a>`;
+                    } else if (action === 'view') {
+                        rowHtml += `
+                            <a href="{{ route('photo-slider.show', '') }}/${row.photoslider_uuid || row.id}" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View">
+                                <i class="fa-solid fa-eye"></i>
+                            </a>`;
+                    } else if (action === 'delete') {
+                        rowHtml += `
+                            <button class="btn btn-sm btn-outline-danger delete-btn" title="Delete" data-id="${row.photoslider_uuid || row.id}">
+                                <i class="fa-solid fa-trash-can"></i>
+                            </button>`;
+                    }
+                });
+                rowHtml += `</td>`;
+            }
+
+            tr.innerHTML = rowHtml;
+            tableBody.appendChild(tr);
+        });
+
+        attachEventListeners();
+        updateDeleteButtonState();
+        updateNoDataMessage();
+    }
+
+    function renderPagination() {
+        const pagination = document.getElementById('pagination');
+        if (!pagination) return;
+        pagination.innerHTML = '';
+
+        const prevLi = document.createElement('li');
+        prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
+        prevLi.innerHTML = `<a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>`;
+        prevLi.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (currentPage > 1) {
+                window.location.href = `{{ route('photo-slider') }}?page=${currentPage - 1}`;
+            }
+        });
+        pagination.appendChild(prevLi);
+
+        for (let i = 1; i <= tableConfig.lastPage; i++) {
+            const li = document.createElement('li');
+            li.className = `page-item ${currentPage === i ? 'active' : ''}`;
+            li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
+            li.addEventListener('click', (e) => {
+                e.preventDefault();
+                window.location.href = `{{ route('photo-slider') }}?page=${i}`;
+            });
+            pagination.appendChild(li);
+        }
+
+        const nextLi = document.createElement('li');
+        nextLi.className = `page-item ${currentPage === tableConfig.lastPage ? 'disabled' : ''}`;
+        nextLi.innerHTML = `<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>`;
+        nextLi.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (currentPage < tableConfig.lastPage) {
+                window.location.href = `{{ route('photo-slider') }}?page=${currentPage + 1}`;
+            }
+        });
+        pagination.appendChild(nextLi);
+    }
+
+    function updateNoDataMessage() {
+        const noDataMessage = document.getElementById('no-data-message');
+        if (noDataMessage) {
+            noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
+        }
+    }
+
+    function attachEventListeners() {
+        // Search
+        const searchInput = document.getElementById('searchInput');
+        if (searchInput) {
+            searchInput.addEventListener('input', function() {
+                const searchTerm = this.value.toLowerCase();
+                filteredRows = tableConfig.data.filter(row => {
+                    return Object.values(row).some(value =>
+                        value && value.toString().toLowerCase().includes(searchTerm)
+                    );
+                });
+                currentPage = 1; // Reset to first page on search
+                renderTable();
+                renderPagination();
+                // Update URL with search parameter
+                const url = new URL(window.location);
+                if (searchTerm) {
+                    url.searchParams.set('_search', searchTerm);
+                } else {
+                    url.searchParams.delete('_search');
+                }
+                window.history.pushState({}, '', url);
+            });
+        }
+
+        // Sort
+        document.querySelectorAll('.sortable').forEach(header => {
+            header.addEventListener('click', function() {
+                const columnIndex = parseInt(this.getAttribute('data-column')) - (tableConfig.showCheckboxes ? 1 : 0);
+                const key = tableConfig.columns[columnIndex].key;
+
+                sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
+
+                document.querySelectorAll('.sortable i').forEach(icon => {
+                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
+                    icon.classList.add('fa-sort');
+                });
+                const icon = this.querySelector('i');
+                if (icon) {
+                    icon.classList.remove('fa-sort');
+                    icon.classList.add(sortDirection[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
+                }
+
+                filteredRows.sort((a, b) => {
+                    let aValue = (a[key] || '').toString().toLowerCase();
+                    let bValue = (b[key] || '').toString().toLowerCase();
+                    if (key === 'startDate' || key === 'endDate') {
+                        aValue = new Date(a[key] || '1970-01-01').getTime();
+                        bValue = new Date(b[key] || '1970-01-01').getTime();
+                        return sortDirection[columnIndex] === 'asc' ? aValue - bValue : bValue - aValue;
+                    }
+                    return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+                });
+
+                currentPage = 1; // Reset to first page on sort
+                renderTable();
+                renderPagination();
+            });
+        });
+
+        // Clear Filters
+        const clearFilters = document.getElementById('clearFilters');
+        if (clearFilters) {
+            clearFilters.addEventListener('click', function() {
+                if (searchInput) searchInput.value = '';
+                document.querySelectorAll('.sortable i').forEach(icon => {
+                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
+                    icon.classList.add('fa-sort');
+                });
+                sortDirection = {};
+                filteredRows = [...tableConfig.data];
+                currentPage = 1;
+                renderTable();
+                renderPagination();
+                // Clear search parameter from URL
+                const url = new URL(window.location);
+                url.searchParams.delete('_search');
+                window.history.pushState({}, '', url);
+            });
+        }
+
+        // Checkboxes
+        if (tableConfig.showCheckboxes) {
+            const selectAll = document.getElementById('selectAll');
+            if (selectAll) {
+                selectAll.addEventListener('change', function() {
+                    const checkboxes = document.querySelectorAll('.rowCheckbox');
+                    checkboxes.forEach(checkbox => {
+                        checkbox.checked = this.checked;
+                    });
+                    updateDeleteButtonState();
+                });
+            }
+
+            document.querySelectorAll('.rowCheckbox').forEach(checkbox => {
+                checkbox.addEventListener('change', updateDeleteButtonState);
+            });
+        }
+
+        // Batch Delete
+        if (tableConfig.showBatchDelete) {
+            const deleteSelected = document.getElementById('deleteSelected');
+            if (deleteSelected) {
+                deleteSelected.addEventListener('click', function() {
+                    const checkboxes = document.querySelectorAll('.rowCheckbox:checked');
+                    const selectedIds = Array.from(checkboxes)
+                        .map(cb => cb.closest('tr').getAttribute('data-id'));
+
+                    if (selectedIds.length === 0) {
+                        alert('Please select at least one photo slider to delete.');
+                        return;
+                    }
+
+                    if (confirm('Are you sure you want to delete the selected photo sliders?')) {
+                        axios.delete('{{ route('photo-slider.batchDelete') }}', {
+                            headers: {
+                                'X-CSRF-TOKEN': tableConfig.csrfToken
+                            },
+                            data: {
+                                photoslider_uuid: selectedIds // Match API parameter
+                            }
+                        }).then(response => {
+                            window.location.reload(); // Reload to fetch new data
+                        }).catch(error => {
+                            console.error('Batch delete error:', error);
+                            alert(error.response?.data?.message || 'Failed to delete photo sliders.');
+                        });
+                    }
+                });
+            }
+        }
+
+        // Delete
+        document.querySelectorAll('.delete-btn').forEach(button => {
+            button.addEventListener('click', function(e) {
+                e.stopPropagation();
+                const sliderId = this.getAttribute('data-id');
+                if (confirm('Are you sure you want to delete this photo slider?')) {
+                    axios.delete(`{{ route('photo-slider.destroy', '') }}/${sliderId}`, {
+                        headers: {
+                            'X-CSRF-TOKEN': tableConfig.csrfToken
+                        }
+                    }).then(response => {
+                        window.location.reload(); // Reload to fetch new data
+                    }).catch(error => {
+                        console.error('Delete error:', error);
+                        alert(error.response?.data?.message || 'Failed to delete photo slider.');
+                    });
+                }
+            });
+        });
+
+        // Row click to view
+        document.querySelectorAll('.clickable-row').forEach(row => {
+            row.addEventListener('click', function(e) {
+                if (e.target.closest('.rowCheckbox, .edit-btn, .view-btn, .delete-btn')) {
+                    return;
+                }
+                const sliderId = this.getAttribute('data-id');
+                window.location.href = `{{ route('photo-slider.show', '') }}/${sliderId}`;
+            });
+        });
+    }
+
+    function updateDeleteButtonState() {
+        if (tableConfig.showBatchDelete) {
+            const checkboxes = document.querySelectorAll('.rowCheckbox');
+            const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
+            const deleteButton = document.getElementById('deleteSelected');
+            if (deleteButton) {
+                deleteButton.disabled = checkedCount < 1;
+            }
+        }
+    }
+
+    renderTable();
+    renderPagination();
+</script>
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
\ No newline at end of file
diff --git a/resources/views/components/table-component.blade.php b/resources/views/components/table-component.blade.php
new file mode 100644
index 0000000..ee4460b
--- /dev/null
+++ b/resources/views/components/table-component.blade.php
@@ -0,0 +1,488 @@
+@props([
+    'pageTitle' => '',
+    'data' => [],
+    'columns' => [],
+    'actions' => [],
+    'showAddButton' => false,
+    'addButtonUrl' => '#',
+    'showCheckboxes' => false,
+    'showBatchDelete' => false,
+    'currentPage' => 1,
+    'lastPage' => 1,
+    'total' => 0,
+])
+
+<div class="card-header border-0 bg-transparent">
+    <div class="d-flex justify-content-between align-items-center">
+        <h5 class="mb-0 fw-bold text-dark">{{ $pageTitle }}</h5>
+        @if ($showAddButton)
+            <a href="{{ $addButtonUrl }}" class="btn btn-primary btn-sm px-3">
+                <i class="fa-solid fa-plus me-1"></i> Add {{ $pageTitle }}
+            </a>
+        @endif
+    </div>
+</div>
+<div class="card-body">
+    <!-- Search and Filters -->
+    <div class="row mb-3 align-items-center">
+        <div class="col-12 col-md-6 mb-2 mb-md-0">
+            <div class="input-group input-group-sm">
+                <span class="input-group-text bg-light border-end-0">
+                    <i class="fa-solid fa-magnifying-glass text-muted"></i>
+                </span>
+                <input type="text" class="form-control border-start-0" placeholder="Search..." id="searchInput">
+            </div>
+        </div>
+        <div class="col-12 col-md-6 d-flex justify-content-end">
+            <button class="btn btn-outline-secondary btn-sm" id="clearFilters">
+                <i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
+            </button>
+        </div>
+    </div>
+
+    <!-- Table -->
+    <div class="table-container">
+        <table class="table table-hover align-middle">
+            <thead class="table-light">
+                <tr>
+                    @if ($showCheckboxes)
+                        <th class="text-center" style="width: 40px;">
+                            <input type="checkbox" id="selectAll">
+                        </th>
+                    @endif
+                    @foreach ($columns as $index => $column)
+                        <th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index + 1 }}">
+                            {{ $column['name'] }}
+                            @if ($column['sortable'])
+                                <i class="fa-solid fa-sort"></i>
+                            @endif
+                        </th>
+                    @endforeach
+                    @if (!empty($actions))
+                        <th class="text-center" style="width: 120px;">Action</th>
+                    @endif
+                </tr>
+            </thead>
+            <tbody id="tableBody"></tbody>
+        </table>
+    </div>
+
+    <!-- Batch Delete and Pagination -->
+    <div class="d-flex justify-content-between align-items-center mt-4">
+        @if ($showBatchDelete)
+            <div>
+                <button class="btn btn-danger btn-sm" id="deleteSelected" disabled>
+                    <i class="fa-solid fa-trash-can me-1"></i> Delete Selected
+                </button>
+            </div>
+        @endif
+        <nav aria-label="Page navigation">
+            <ul class="pagination pagination-sm" id="pagination"></ul>
+        </nav>
+    </div>
+</div>
+
+<style>
+    .card,
+    .table,
+    .btn,
+    .form-control,
+    .input-group-text {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        font-weight: 400;
+        line-height: 1.5;
+    }
+    .card-header h5 {
+        font-weight: 500;
+    }
+    .table thead th {
+        font-weight: 500;
+        font-size: 0.8rem;
+    }
+    .form-label {
+        font-weight: 500;
+        font-size: 0.9rem;
+    }
+    .card {
+        border-radius: 10px;
+    }
+    .card-header {
+        background-color: transparent;
+    }
+    .btn-primary {
+        background-color: #E74610;
+        border-color: #E74610;
+    }
+    .btn-primary:hover {
+        background-color: #E74610;
+        border-color: #E74610;
+    }
+    .sortable {
+        cursor: pointer;
+    }
+    .sortable:hover {
+        background-color: #f1f3f5;
+    }
+    .table {
+        font-size: 0.85rem;
+        width: 100%;
+        table-layout: auto;
+    }
+    .table th,
+    .table td {
+        padding: 0.5rem;
+        vertical-align: middle;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .table th:first-child,
+    .table td:first-child {
+        width: 40px;
+        text-align: center;
+    }
+    .table th:last-child,
+    .table td:last-child {
+        width: 120px;
+        text-align: center;
+    }
+    .table td:nth-child(5),
+    .table th:nth-child(5) {
+        width: 100px;
+    }
+    .table td:nth-child(6),
+    .table th:nth-child(6) {
+        max-width: 200px;
+    }
+    .table td:nth-child(7),
+    .table th:nth-child(7) {
+        width: 120px;
+    }
+    .edit-btn {
+        border-color: #E74610;
+        color: #E74610;
+    }
+    .edit-btn:hover {
+        background-color: #E74610;
+        border-color: #E74610;
+        color: #fff;
+    }
+    .table-hover tbody tr:hover {
+        cursor: pointer;
+        background-color: #f8f9fa;
+    }
+    @media (max-width: 576px) {
+        .table {
+            font-size: 0.75rem;
+        }
+        .table thead th {
+            font-size: 0.75rem;
+        }
+        .table th,
+        .table td {
+            padding: 0.3rem;
+        }
+        .btn-sm {
+            padding: 0.2rem 0.4rem;
+            font-size: 0.75rem;
+        }
+        .input-group-sm>.form-control {
+            font-size: 0.75rem;
+        }
+        .pagination-sm .page-link {
+            padding: 0.2rem 0.4rem;
+            font-size: 0.75rem;
+        }
+        .table td:nth-child(6) {
+            max-width: 150px;
+        }
+        .form-control,
+        .form-select {
+            font-size: 0.85rem;
+        }
+    }
+</style>
+
+<script>
+    const tableConfig = {
+        data: @json($data),
+        columns: @json($columns),
+        actions: @json($actions),
+        showCheckboxes: {{ json_encode($showCheckboxes) }},
+        showBatchDelete: {{ json_encode($showBatchDelete) }},
+        pageTitle: @json($pageTitle),
+        csrfToken: '{{ csrf_token() }}',
+        currentPage: {{ $currentPage }},
+        lastPage: {{ $lastPage }},
+        total: {{ $total }},
+    };
+
+    const rowsPerPage = 5; // Fixed at 5 per page
+    let currentPage = tableConfig.currentPage; // Initialize with server-side page
+    let filteredRows = [...tableConfig.data];
+    let originalRows = [...tableConfig.data].map(row => ({ ...row }));
+    let sortDirection = {};
+
+    function renderTable() {
+        const tableBody = document.getElementById('tableBody');
+        if (!tableBody) return;
+        tableBody.innerHTML = '';
+
+        // Use the data passed from the server (already paginated to 5)
+        const paginatedRows = filteredRows; // No client-side slicing needed
+
+        paginatedRows.forEach(row => {
+            const tr = document.createElement('tr');
+            tr.setAttribute('data-id', row.topup_uuid || row.id);
+            tr.classList.add('clickable-row');
+            let rowHtml = '';
+
+            if (tableConfig.showCheckboxes) {
+                rowHtml += `<td class="text-center"><input type="checkbox" class="rowCheckbox"></td>`;
+            }
+
+            tableConfig.columns.forEach(col => {
+                let value = row[col.key] || '';
+                rowHtml += `<td>${value}</td>`;
+            });
+
+            if (tableConfig.actions.length > 0) {
+                rowHtml += `<td class="text-center">`;
+                tableConfig.actions.forEach(action => {
+                    if (action === 'edit') {
+                        rowHtml += `
+                            <a href="{{ route('top-up.edit', '') }}/${row.topup_uuid || row.id}" class="btn btn-sm edit-btn me-1" title="Edit">
+                                <i class="fa-solid fa-pen-to-square"></i>
+                            </a>`;
+                    } else if (action === 'view') {
+                        rowHtml += `
+                            <a href="{{ route('top-up.show', '') }}/${row.topup_uuid || row.id}" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View">
+                                <i class="fa-solid fa-eye"></i>
+                            </a>`;
+                    } else if (action === 'delete') {
+                        rowHtml += `
+                            <button class="btn btn-sm btn-outline-danger delete-btn" title="Delete" data-id="${row.topup_uuid || row.id}">
+                                <i class="fa-solid fa-trash-can"></i>
+                            </button>`;
+                    }
+                });
+                rowHtml += `</td>`;
+            }
+
+            tr.innerHTML = rowHtml;
+            tableBody.appendChild(tr);
+        });
+
+        attachEventListeners();
+        updateDeleteButtonState();
+        updateNoDataMessage();
+    }
+
+    function renderPagination() {
+        const pagination = document.getElementById('pagination');
+        if (!pagination) return;
+        pagination.innerHTML = '';
+
+        const prevLi = document.createElement('li');
+        prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
+        prevLi.innerHTML = `<a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>`;
+        prevLi.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (currentPage > 1) {
+                window.location.href = `{{ route('top-up') }}?page=${currentPage - 1}`;
+            }
+        });
+        pagination.appendChild(prevLi);
+
+        for (let i = 1; i <= tableConfig.lastPage; i++) {
+            const li = document.createElement('li');
+            li.className = `page-item ${currentPage === i ? 'active' : ''}`;
+            li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
+            li.addEventListener('click', (e) => {
+                e.preventDefault();
+                window.location.href = `{{ route('top-up') }}?page=${i}`;
+            });
+            pagination.appendChild(li);
+        }
+
+        const nextLi = document.createElement('li');
+        nextLi.className = `page-item ${currentPage === tableConfig.lastPage ? 'disabled' : ''}`;
+        nextLi.innerHTML = `<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>`;
+        nextLi.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (currentPage < tableConfig.lastPage) {
+                window.location.href = `{{ route('top-up') }}?page=${currentPage + 1}`;
+            }
+        });
+        pagination.appendChild(nextLi);
+    }
+
+    function updateNoDataMessage() {
+        const noDataMessage = document.getElementById('no-data-message');
+        if (noDataMessage) {
+            noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
+        }
+    }
+
+    function attachEventListeners() {
+        // Search
+        const searchInput = document.getElementById('searchInput');
+        if (searchInput) {
+            searchInput.addEventListener('input', function() {
+                const searchTerm = this.value.toLowerCase();
+                filteredRows = tableConfig.data.filter(row => {
+                    return Object.values(row).some(value =>
+                        value && value.toString().toLowerCase().includes(searchTerm)
+                    );
+                });
+                currentPage = 1; // Reset to first page on search
+                renderTable();
+                renderPagination();
+            });
+        }
+
+        // Sort
+        document.querySelectorAll('.sortable').forEach(header => {
+            header.addEventListener('click', function() {
+                const columnIndex = parseInt(this.getAttribute('data-column')) - (tableConfig.showCheckboxes ? 1 : 0);
+                const key = tableConfig.columns[columnIndex].key;
+
+                sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
+
+                document.querySelectorAll('.sortable i').forEach(icon => {
+                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
+                    icon.classList.add('fa-sort');
+                });
+                const icon = this.querySelector('i');
+                if (icon) {
+                    icon.classList.remove('fa-sort');
+                    icon.classList.add(sortDirection[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
+                }
+
+                filteredRows.sort((a, b) => {
+                    const aValue = (a[key] || '').toString().toLowerCase();
+                    const bValue = (b[key] || '').toString().toLowerCase();
+                    return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+                });
+
+                currentPage = 1; // Reset to first page on sort
+                renderTable();
+                renderPagination();
+            });
+        });
+
+        // Clear Filters
+        const clearFilters = document.getElementById('clearFilters');
+        if (clearFilters) {
+            clearFilters.addEventListener('click', function() {
+                if (searchInput) searchInput.value = '';
+                document.querySelectorAll('.sortable i').forEach(icon => {
+                    icon.classList.remove('fa-sort-up', 'fa-sort-down');
+                    icon.classList.add('fa-sort');
+                });
+                sortDirection = {};
+                filteredRows = [...tableConfig.data];
+                currentPage = 1;
+                renderTable();
+                renderPagination();
+            });
+        }
+
+        // Checkboxes
+        if (tableConfig.showCheckboxes) {
+            const selectAll = document.getElementById('selectAll');
+            if (selectAll) {
+                selectAll.addEventListener('change', function() {
+                    const checkboxes = document.querySelectorAll('.rowCheckbox');
+                    checkboxes.forEach(checkbox => {
+                        checkbox.checked = this.checked;
+                    });
+                    updateDeleteButtonState();
+                });
+            }
+
+            document.querySelectorAll('.rowCheckbox').forEach(checkbox => {
+                checkbox.addEventListener('change', updateDeleteButtonState);
+            });
+        }
+
+        // Batch Delete
+        if (tableConfig.showBatchDelete) {
+            const deleteSelected = document.getElementById('deleteSelected');
+            if (deleteSelected) {
+                deleteSelected.addEventListener('click', function() {
+                    const checkboxes = document.querySelectorAll('.rowCheckbox:checked');
+                    const selectedIds = Array.from(checkboxes)
+                        .map(cb => cb.closest('tr').getAttribute('data-id'));
+
+                    if (selectedIds.length === 0) {
+                        alert('Please select at least one top-up to delete.');
+                        return;
+                    }
+
+                    if (confirm('Are you sure you want to delete the selected top-ups?')) {
+                        axios.delete('{{ route('top-up.batchDelete') }}', {
+                            headers: {
+                                'X-CSRF-TOKEN': tableConfig.csrfToken
+                            },
+                            data: {
+                                topup_uuid: selectedIds
+                            }
+                        }).then(response => {
+                            window.location.reload(); // Reload to fetch new data
+                        }).catch(error => {
+                            console.error('Batch delete error:', error);
+                            alert(error.response?.data?.message || 'Failed to delete top-ups.');
+                        });
+                    }
+                });
+            }
+        }
+
+        // Delete
+        document.querySelectorAll('.delete-btn').forEach(button => {
+            button.addEventListener('click', function(e) {
+                e.stopPropagation();
+                const topupId = this.getAttribute('data-id');
+                if (confirm('Are you sure you want to delete this top-up?')) {
+                    axios.delete(`{{ route('top-up.destroy', '') }}/${topupId}`, {
+                        headers: {
+                            'X-CSRF-TOKEN': tableConfig.csrfToken
+                        }
+                    }).then(response => {
+                        window.location.reload(); // Reload to fetch new data
+                    }).catch(error => {
+                        console.error('Delete error:', error);
+                        alert(error.response?.data?.message || 'Failed to delete top-up.');
+                    });
+                }
+            });
+        });
+
+        // Row click to view
+        document.querySelectorAll('.clickable-row').forEach(row => {
+            row.addEventListener('click', function(e) {
+                if (e.target.closest('.rowCheckbox, .edit-btn, .view-btn, .delete-btn')) {
+                    return;
+                }
+                const topupId = this.getAttribute('data-id');
+                window.location.href = `{{ route('top-up.show', '') }}/${topupId}`;
+            });
+        });
+    }
+
+    function updateDeleteButtonState() {
+        if (tableConfig.showBatchDelete) {
+            const checkboxes = document.querySelectorAll('.rowCheckbox');
+            const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
+            const deleteButton = document.getElementById('deleteSelected');
+            if (deleteButton) {
+                deleteButton.disabled = checkedCount < 1;
+            }
+        }
+    }
+
+    renderTable();
+    renderPagination();
+</script>
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
\ No newline at end of file
diff --git a/resources/views/pages/home page/photo-slider.blade.php b/resources/views/pages/home page/photo-slider.blade.php
index 85315bf..dd128b3 100644
--- a/resources/views/pages/home page/photo-slider.blade.php	
+++ b/resources/views/pages/home page/photo-slider.blade.php	
@@ -3,21 +3,41 @@
 @section('page_title', 'Photo Slider')
 
 @section('content')
-    @include('components.table-component', [
-        'pageTitle' => 'Photo Slider',
-        // 'data' => $sliders,
-        'columns' => [
-            ['name' => 'Title', 'key' => 'title', 'sortable' => true],
-            ['name' => 'Type', 'key' => 'type', 'sortable' => true],
-            ['name' => 'Start Date', 'key' => 'startDate', 'sortable' => true],
-            ['name' => 'End Date', 'key' => 'endDate', 'sortable' => true]
-        ],
-        'actions' => ['edit', 'view', 'delete'],
-        'showAddButton' => true,
-        'addButtonUrl' => '/add-photo-slider',
-        'showCheckboxes' => true,
-        'showBatchDelete' => true,
-        'showEditModal' => true,
-        'showViewModal' => true
-    ])
-@endsection
+    <div id="photo-slider-table">
+        @if (session('success'))
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+                {{ session('success') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @if (session('error'))
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                {{ session('error') }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+        @include('components.photo-slider-component', [
+            'pageTitle' => 'Photo Slider',
+            'data' => $sliders,
+            'columns' => [
+                ['name' => 'Title', 'key' => 'title', 'sortable' => true],
+                ['name' => 'Type', 'key' => 'type', 'sortable' => true],
+                ['name' => 'Start Date', 'key' => 'startDate', 'sortable' => true],
+                ['name' => 'End Date', 'key' => 'endDate', 'sortable' => true]
+            ],
+            'actions' => ['edit', 'view', 'delete'],
+            'showAddButton' => true,
+            'addButtonUrl' => route('photo-slider.create'),
+            'showCheckboxes' => true,
+            'showBatchDelete' => true,
+            'showEditModal' => true,
+            'showViewModal' => true,
+            'currentPage' => $currentPage ?? 1,
+            'lastPage' => $lastPage ?? 1,
+            'total' => $total ?? 0,
+        ])
+        <div id="no-data-message" style="display: {{ empty($sliders) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
+            <p>No photo sliders found.</p>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/photo-slider-create.blade.php b/resources/views/pages/photo-slider-create.blade.php
new file mode 100644
index 0000000..a353dc3
--- /dev/null
+++ b/resources/views/pages/photo-slider-create.blade.php
@@ -0,0 +1,52 @@
+@extends('layouts.app')
+
+@section('page_title', 'Add Photo Slider')
+
+@section('content')
+    <div class="card">
+        <div class="card-header">
+            <h5 class="mb-0 fw-bold text-dark">Add New Photo Slider</h5>
+        </div>
+        <div class="card-body">
+            @if (session('error'))
+                <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                    {{ session('error') }}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+            @endif
+            <form action="{{ route('photo-slider.store') }}" method="POST" enctype="multipart/form-data">
+                @csrf
+                <div class="mb-3">
+                    <label for="title" class="form-label">Title</label>
+                    <input type="text" class="form-control" id="title" name="title" required>
+                </div>
+                <div class="mb-3">
+                    <label for="description" class="form-label">Description</label>
+                    <textarea class="form-control" id="description" name="description" rows="3"></textarea>
+                </div>
+                <div class="mb-3">
+                    <label for="type" class="form-label">Type</label>
+                    <input type="text" class="form-control" id="type" name="type" required>
+                </div>
+                <div class="mb-3">
+                    <label for="image" class="form-label">Image</label>
+                    <input type="file" class="form-control" id="image" name="image" required>
+                </div>
+                <div class="mb-3">
+                    <label for="startDate" class="form-label">Start Date</label>
+                    <input type="datetime-local" class="form-control" id="startDate" name="startDate" required>
+                </div>
+                <div class="mb-3">
+                    <label for="endDate" class="form-label">End Date</label>
+                    <input type="datetime-local" class="form-control" id="endDate" name="endDate" required>
+                </div>
+                <div class="mb-3 form-check">
+                    <input type="checkbox" class="form-check-input" id="isActive" name="isActive">
+                    <label class="form-check-label" for="isActive">Active</label>
+                </div>
+                <button type="submit" class="btn btn-primary">Save</button>
+                <a href="{{ route('photo-slider') }}" class="btn btn-secondary">Cancel</a>
+            </form>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/photo-slider-edit.blade.php b/resources/views/pages/photo-slider-edit.blade.php
new file mode 100644
index 0000000..73405b1
--- /dev/null
+++ b/resources/views/pages/photo-slider-edit.blade.php
@@ -0,0 +1,53 @@
+@extends('layouts.app')
+
+@section('page_title', 'Edit Photo Slider')
+
+@section('content')
+    <div class="card">
+        <div class="card-header">
+            <h5 class="mb-0 fw-bold text-dark">Edit Photo Slider</h5>
+        </div>
+        <div class="card-body">
+            @if (session('error'))
+                <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                    {{ session('error') }}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+            @endif
+            <form action="{{ route('photo-slider.update', $slider['photo_slider_uuid']) }}" method="POST" enctype="multipart/form-data">
+                @method('PUT')
+                @csrf
+                <div class="mb-3">
+                    <label for="title" class="form-label">Title</label>
+                    <input type="text" class="form-control" id="title" name="title" value="{{ $slider['title'] }}" required>
+                </div>
+                <div class="mb-3">
+                    <label for="description" class="form-label">Description</label>
+                    <textarea class="form-control" id="description" name="description" rows="3">{{ $slider['description'] }}</textarea>
+                </div>
+                <div class="mb-3">
+                    <label for="type" class="form-label">Type</label>
+                    <input type="text" class="form-control" id="type" name="type" value="{{ $slider['type'] }}" required>
+                </div>
+                <div class="mb-3">
+                    <label for="image" class="form-label">Image (optional - upload new to replace)</label>
+                    <input type="file" class="form-control" id="image" name="image">
+                </div>
+                <div class="mb-3">
+                    <label for="startDate" class="form-label">Start Date</label>
+                    <input type="datetime-local" class="form-control" id="startDate" name="startDate" value="{{ $slider['startDate'] }}" required>
+                </div>
+                <div class="mb-3">
+                    <label for="endDate" class="form-label">End Date</label>
+                    <input type="datetime-local" class="form-control" id="endDate" name="endDate" value="{{ $slider['endDate'] }}" required>
+                </div>
+                <div class="mb-3 form-check">
+                    <input type="checkbox" class="form-check-input" id="isActive" name="isActive" {{ $slider['isActive'] ? 'checked' : '' }}>
+                    <label class="form-check-label" for="isActive">Active</label>
+                </div>
+                <button type="submit" class="btn btn-primary">Update</button>
+                <a href="{{ route('photo-slider') }}" class="btn btn-secondary">Cancel</a>
+            </form>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/photo-slider-view.blade.php b/resources/views/pages/photo-slider-view.blade.php
new file mode 100644
index 0000000..7d7bf01
--- /dev/null
+++ b/resources/views/pages/photo-slider-view.blade.php
@@ -0,0 +1,40 @@
+@extends('layouts.app')
+
+@section('page_title', 'View Photo Slider')
+
+@section('content')
+    <div class="card">
+        <div class="card-header">
+            <h5 class="mb-0 fw-bold text-dark">View Photo Slider</h5>
+        </div>
+        <div class="card-body">
+            <div class="mb-3">
+                <strong>Title:</strong> {{ $slider['title'] }}
+            </div>
+            <div class="mb-3">
+                <strong>Description:</strong> {{ $slider['description'] }}
+            </div>
+            <div class="mb-3">
+                <strong>Type:</strong> {{ $slider['type'] }}
+            </div>
+            <div class="mb-3">
+                <strong>Image:</strong>
+                @if ($slider['image'])
+                    <img src="{{ $slider['image'] }}" alt="{{ $slider['title'] }}" style="max-width: 200px; height: auto;">
+                @else
+                    No image available.
+                @endif
+            </div>
+            <div class="mb-3">
+                <strong>Start Date:</strong> {{ $slider['startDate'] }}
+            </div>
+            <div class="mb-3">
+                <strong>End Date:</strong> {{ $slider['endDate'] }}
+            </div>
+            <div class="mb-3">
+                <strong>Active:</strong> {{ $slider['isActive'] ? 'Yes' : 'No' }}
+            </div>
+            <a href="{{ route('photo-slider') }}" class="btn btn-secondary">Back</a>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index c140fb0..ba30758 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -4,7 +4,7 @@ use Illuminate\Support\Facades\Route;
 use Illuminate\Support\Facades\Http;
 use App\Http\Controllers\AuthController;
 use App\Http\Controllers\UserManagementController;
-use App\Http\Controllers\PhotoSliderViewController;
+use App\Http\Controllers\PhotoSliderController;
 use App\Http\Controllers\TopUpController;
 
 
@@ -26,9 +26,6 @@ Route::get('/dashboard', function () {
     return view('dashboard');
 });
 
-
-Route::get('/photo-slider', [PhotoSliderViewController::class, 'index'])->name('photo-slider.index');
-
 Route::get('/notification', function () {
     return view('pages.notification');
 })->name('notification');
@@ -115,9 +112,6 @@ Route::get('/add-promotions', function () {
     return view('pages.add-promotions');
 })->name('add-promotions');
 
-Route::get('/add-top-up', function () {
-    return view('pages.add-top-up');
-})->name('add-top-up');
 
 Route::get('/add-card-types', function () {
     return view('pages.add-card-types');
@@ -177,3 +171,13 @@ Route::get('/top-up/{uuid}/edit', [TopUpController::class, 'edit'])->name('top-u
 Route::put('/top-up/{uuid}', [TopUpController::class, 'update'])->name('top-up.update');
 Route::delete('/top-up/{uuid}', [TopUpController::class, 'destroy'])->name('top-up.destroy');
 Route::delete('/top-up/batch', [TopUpController::class, 'batchDelete'])->name('top-up.batchDelete');
+
+//Photo Slider
+Route::get('/photo-slider', [PhotoSliderController::class, 'index'])->name('photo-slider');
+Route::get('/photo-slider/create', [PhotoSliderController::class, 'create'])->name('photo-slider.create');
+Route::post('/photo-slider', [PhotoSliderController::class, 'store'])->name('photo-slider.store');
+Route::get('/photo-slider/{id}/edit', [PhotoSliderController::class, 'edit'])->name('photo-slider.edit');
+Route::put('/photo-slider/{id}', [PhotoSliderController::class, 'update'])->name('photo-slider.update');
+Route::get('/photo-slider/{id}', [PhotoSliderController::class, 'show'])->name('photo-slider.show');
+Route::delete('/photo-slider/{id}', [PhotoSliderController::class, 'destroy'])->name('photo-slider.destroy');
+Route::delete('/photo-slider/batch', [PhotoSliderController::class, 'batchDelete'])->name('photo-slider.batchDelete');