diff --git a/app/Http/Controllers/PhotoSliderViewController.php b/app/Http/Controllers/PhotoSliderViewController.php
new file mode 100644
index 0000000..e90a974
--- /dev/null
+++ b/app/Http/Controllers/PhotoSliderViewController.php
@@ -0,0 +1,59 @@
+<?php
+namespace App\Http\Controllers;
+
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Facades\Log;
+
+class PhotoSliderViewController extends Controller
+{
+    protected $apiBaseUrl;
+
+    public function __construct()
+    {
+        $this->apiBaseUrl = config('services.api.base_url'); // put your base URL in config/services.php
+    }
+
+    public function index()
+    {
+        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.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/cms/photoSlider");
+
+            $json = $response->json();
+            Log::info('Photo Slider API Response: ', $json);
+
+            if ($response->successful() && isset($json['data']) && is_array($json['data'])) {
+                $sliders = array_map(function ($slider) {
+                    return [
+                        'id' => $slider['id'],
+                        'title' => $slider['title'],
+                        'type' => $slider['type'],
+                        'startDate' => $slider['start_date'],
+                        'endDate' => $slider['end_date'],
+                    ];
+                }, $json['data']);
+
+                return view('pages.home page.photo-slider', [
+                    'sliders' => $sliders,
+                ]);
+            } else {
+                Log::warning('No slider data found or invalid API response: ', $json);
+                return view('pages.home page.photo-slider', ['sliders' => []]);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching photo slider data: ' . $e->getMessage());
+            return view('pages.home page.photo-slider', ['sliders' => []]);
+        }
+    }
+}
diff --git a/app/Http/Controllers/UserManagementController.php b/app/Http/Controllers/UserManagementController.php
index b6e8a7d..62284f3 100644
--- a/app/Http/Controllers/UserManagementController.php
+++ b/app/Http/Controllers/UserManagementController.php
@@ -9,15 +9,11 @@ use Illuminate\Support\Facades\Session;
 
 class UserManagementController extends Controller
 {
-    protected $apiBaseUrl = 'http://192.168.100.6:8081/api'; // Same as in AuthController
+    protected $apiBaseUrl = 'http://192.168.100.6:8081/api';
 
-    /**
-     * Display the user management page with user data
-     */
     public function index()
     {
         try {
-            // Fetch the access token from the session
             $user = Session::get('user');
             $accessToken = $user['access_token'] ?? null;
 
@@ -26,7 +22,6 @@ class UserManagementController extends Controller
                 return redirect()->route('login')->with('error', 'Please log in to view user management.');
             }
 
-            // Make the API call to fetch admin users
             $response = Http::withHeaders([
                 'Accept' => 'application/json',
                 'Authorization' => 'Bearer ' . $accessToken,
@@ -37,34 +32,340 @@ class UserManagementController extends Controller
             Log::info('User Management API Response: ', $json);
 
             if ($response->successful() && isset($json['data']) && is_array($json['data'])) {
-                // Transform the API response into the format expected by the table component
                 $users = array_map(function ($admin) {
                     return [
-                        
+                        'admin_uuid' => $admin['admin_uuid'],
                         'username' => $admin['username'],
                         'firstName' => $admin['firstname'],
                         'lastName' => $admin['lastname'],
-                        'role' => 'Admin', // Adjust if the API provides role data
+                        'role' => 'Admin',
                         'email' => $admin['email'],
-                        // 'status' => $admin['is_active'] ? 'Active' : 'Inactive',
+                        'status' => $admin['status'] ? 'Active' : 'Inactive',
                     ];
                 }, $json['data']);
 
-                // Pass the transformed data to the view
                 return view('pages.user-management', [
                     'users' => $users,
                 ]);
             } else {
                 Log::warning('No user data found or invalid API response: ', $json);
                 return view('pages.user-management', [
-                    'users' => [], // Pass an empty array if no data
+                    'users' => [],
                 ]);
             }
         } catch (\Exception $e) {
             Log::error('Error fetching user data: ' . $e->getMessage());
             return view('pages.user-management', [
-                'users' => [], // Pass an empty array on error
+                'users' => [],
             ]);
         }
     }
+
+    public function create()
+    {
+        return view('pages.user-management.add-user');
+    }
+
+    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 user.');
+            }
+
+            $validated = $request->validate([
+                'username' => 'required|string|max:255',
+                'firstName' => 'required|string|max:255',
+                'lastName' => 'required|string|max:255',
+                'role' => 'required|in:0,1',
+                'email' => 'required|email|max:255',
+                'status' => 'required|in:active,inactive',
+            ]);
+
+            // Generate password via API
+            $passwordResponse = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->post("{$this->apiBaseUrl}/cms/generatePassword");
+
+            $passwordJson = $passwordResponse->json();
+
+            if (!$passwordResponse->successful() || !isset($passwordJson['data']['password'])) {
+                Log::error('Failed to generate password: ', $passwordJson);
+                return redirect()->back()->with('error', 'Failed to generate password.');
+            }
+
+            $generatedPassword = $passwordJson['data']['password'];
+
+            $payload = [
+                'username' => $validated['username'],
+                'firstname' => $validated['firstName'],
+                'lastname' => $validated['lastName'],
+                'role' => $validated['role'],
+                'email' => $validated['email'],
+                'password' => $generatedPassword,
+                'status' => $validated['status'], // Send as 'active' or 'inactive'
+            ];
+
+            Log::info('API Payload for creating user: ', $payload);
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->post("{$this->apiBaseUrl}/cms/admin", $payload);
+
+            $json = $response->json();
+
+            if ($response->successful()) {
+                Log::info('User created successfully: ', $json);
+                return redirect()->route('user.management')
+                    ->with('success', "User added successfully. Generated password: {$generatedPassword}");
+            } else {
+                Log::error('Failed to create user: ', $json);
+                return redirect()->back()->with('error', $json['message'] ?? 'Failed to add user.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error creating user: ' . $e->getMessage());
+            return redirect()->back()->with('error', 'An error occurred while adding the user.');
+        }
+    }
+
+    public function show($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return response()->json(['error' => 'Unauthorized'], 401);
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/cms/admin/{$uuid}");
+
+            $json = $response->json();
+
+            if ($response->successful() && isset($json['data'])) {
+                $userData = [
+                    'admin_uuid' => $json['data']['admin_uuid'],
+                    'username' => $json['data']['username'],
+                    'firstName' => $json['data']['firstname'],
+                    'lastName' => $json['data']['lastname'],
+                    'role' => 'Admin',
+                    'email' => $json['data']['email'],
+                    'status' => $json['data']['status'] ? 'Active' : 'Inactive',
+                    'generated_password' => $json['data']['generated_password'] ?? null,
+                ];
+                return response()->json(['data' => $userData]);
+            } else {
+                Log::warning('User not found: ', $json);
+                return response()->json(['error' => $json['message'] ?? 'User not found'], 404);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching user: ' . $e->getMessage());
+            return response()->json(['error' => 'An error occurred'], 500);
+        }
+    }
+
+    public function edit($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                Log::info('No access token found, redirecting to login from user-management edit');
+                return redirect()->route('login')->with('error', 'Please log in to edit a user.');
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->get("{$this->apiBaseUrl}/cms/admin/{$uuid}");
+
+            $json = $response->json();
+
+            if ($response->successful() && isset($json['data'])) {
+                $userData = [
+                    'admin_uuid' => $json['data']['admin_uuid'],
+                    'username' => $json['data']['username'],
+                    'firstName' => $json['data']['firstname'],
+                    'lastName' => $json['data']['lastname'],
+                    'role' => 'Admin',
+                    'email' => $json['data']['email'],
+                    'status' => $json['data']['status'] ? 'Active' : 'Inactive',
+                ];
+                return view('pages.user-management.edit-user', [
+                    'user' => $userData,
+                ]);
+            } else {
+                Log::warning('User not found: ', $json);
+                return redirect()->route('user-management.index')->with('error', $json['message'] ?? 'User not found.');
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching user for edit: ' . $e->getMessage());
+            return redirect()->route('user-management.index')->with('error', 'An error occurred while fetching the user.');
+        }
+    }
+
+    public function update(Request $request, $uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return response()->json(['error' => 'Unauthorized'], 401);
+            }
+
+            $validated = $request->validate([
+                'username' => 'required|string|max:255',
+                'firstName' => 'required|string|max:255',
+                'lastName' => 'required|string|max:255',
+                'email' => 'required|email|max:255',
+                'password' => 'nullable|string|min:8',
+                'status' => 'required|in:active,inactive',
+            ]);
+
+            $data = [
+                'username' => $validated['username'],
+                'firstname' => $validated['firstName'],
+                'lastname' => $validated['lastName'],
+                'email' => $validated['email'],
+                'status' => $validated['status'],
+            ];
+
+            if (!empty($validated['password'])) {
+                $data['password'] = $validated['password'];
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->put("{$this->apiBaseUrl}/cms/admin/{$uuid}", $data);
+
+            $json = $response->json();
+
+            if ($response->successful()) {
+                Log::info('User updated successfully: ', $json);
+                return response()->json(['message' => $json['message'] ?? 'User updated successfully']);
+            } else {
+                Log::error('Failed to update user: ', $json);
+                return response()->json(['error' => $json['message'] ?? 'Failed to update user'], 400);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error updating user: ' . $e->getMessage());
+            return response()->json(['error' => 'An error occurred'], 500);
+        }
+    }
+
+    public function destroy($uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return response()->json(['error' => 'Unauthorized'], 401);
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->delete("{$this->apiBaseUrl}/cms/admin/{$uuid}");
+
+            $json = $response->json();
+
+            if ($response->successful()) {
+                Log::info('User deleted successfully: ', $json);
+                return response()->json(['message' => $json['message'] ?? 'User deleted successfully']);
+            } else {
+                Log::error('Failed to delete user: ', $json);
+                return response()->json(['error' => $json['message'] ?? 'Failed to delete user'], 400);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error deleting user: ' . $e->getMessage());
+            return response()->json(['error' => 'An error occurred'], 500);
+        }
+    }
+
+    public function batchDelete(Request $request)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return response()->json(['error' => 'Unauthorized'], 401);
+            }
+
+            $uuids = $request->input('admin_uuid', []);
+
+            if (empty($uuids)) {
+                return response()->json(['error' => 'No users selected'], 400);
+            }
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->delete("{$this->apiBaseUrl}/cms/adminBatchDelete", [
+                'admin_uuid' => $uuids,
+            ]);
+
+            $json = $response->json();
+
+            if ($response->successful()) {
+                Log::info('Batch delete successful for UUIDs: ' . implode(',', $uuids));
+                return response()->json(['message' => $json['message'] ?? 'Users deleted successfully']);
+            } else {
+                Log::error('Failed to batch delete users: ', $json);
+                return response()->json(['error' => $json['message'] ?? 'Failed to delete users'], 400);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error in batch delete: ' . $e->getMessage());
+            return response()->json(['error' => 'An error occurred'], 500);
+        }
+    }
+
+    public function changeStatus(Request $request, $uuid)
+    {
+        try {
+            $user = Session::get('user');
+            $accessToken = $user['access_token'] ?? null;
+
+            if (!$accessToken) {
+                return response()->json(['error' => 'Unauthorized'], 401);
+            }
+
+            $validated = $request->validate([
+                'status' => 'required|in:active,inactive',
+            ]);
+
+            $response = Http::withHeaders([
+                'Accept' => 'application/json',
+                'Authorization' => 'Bearer ' . $accessToken,
+            ])->post("{$this->apiBaseUrl}/cms/adminChangeStatus", [
+                'admin_uuid' => $uuid,
+                'status' => $validated['status'],
+            ]);
+
+            $json = $response->json();
+
+            if ($response->successful()) {
+                Log::info('Status changed successfully for UUID: ' . $uuid);
+                return response()->json(['message' => $json['message'] ?? 'Status updated successfully']);
+            } else {
+                Log::error('Failed to change status: ', $json);
+                return response()->json(['error' => $json['message'] ?? 'Failed to update status'], 400);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error changing status: ' . $e->getMessage());
+            return response()->json(['error' => 'An error occurred'], 500);
+        }
+    }
 }
\ No newline at end of file
diff --git a/resources/views/components/user-management-component.blade.php b/resources/views/components/user-management-component.blade.php
new file mode 100644
index 0000000..7330f08
--- /dev/null
+++ b/resources/views/components/user-management-component.blade.php
@@ -0,0 +1,607 @@
+@props([
+    'pageTitle' => '',
+    'data' => [],
+    'columns' => [],
+    'actions' => [],
+    'showAddButton' => false,
+    'addButtonUrl' => '#',
+    'showCheckboxes' => false,
+    'showBatchDelete' => false,
+    'showEditModal' => false,
+    'showViewModal' => false
+])
+
+<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=open('') 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;
+    }
+    .status-btn {
+        font-size: 0.75rem;
+        padding: 0.2rem 0.5rem;
+    }
+    .dropdown-menu-sm {
+        min-width: 120px;
+    }
+    .dropdown-item {
+        font-size: 0.85rem;
+    }
+    .table thead .sortable i {
+        font-size: 0.7rem;
+        vertical-align: middle;
+    }
+    .table-container {
+        overflow-x: hidden;
+    }
+    .pagination-sm .page-link {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.85rem;
+        border-color: #E74610;
+        color: #E74610;
+    }
+    .pagination-sm .page-item.active .page-link {
+        background-color: #E74610;
+        border-color: #E74610;
+        color: #fff;
+    }
+    .pagination-sm .page-link:hover {
+        background-color: #E74610;
+        border-color: #E74610;
+        color: #fff;
+    }
+    .pagination-sm .page-item.disabled .page-link {
+        border-color: #dee2e6;
+        color: #6c757d;
+    }
+    .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;
+        }
+        .status-btn {
+            font-size: 0.65rem;
+        }
+        .dropdown-item {
+            font-size: 0.75rem;
+        }
+        .table thead .sortable i {
+            font-size: 0.65rem;
+        }
+        .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() }}'
+    };
+
+    const rowsPerPage = 5;
+    let currentPage = 1;
+    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 = '';
+
+        const start = (currentPage - 1) * rowsPerPage;
+        const end = start + rowsPerPage;
+        const paginatedRows = filteredRows.slice(start, end);
+
+        paginatedRows.forEach(row => {
+            const tr = document.createElement('tr');
+            tr.setAttribute('data-id', row.admin_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 => {
+                if (col.key === 'status') {
+                    rowHtml += `
+                        <td>
+                            <div class="dropdown">
+                                <button class="btn btn-sm btn-outline-secondary status-btn" type="button" id="statusDropdown${row.admin_uuid}" data-bs-toggle="dropdown" aria-expanded="false">
+                                    <span class="status-text">${row[col.key]}</span>
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" aria-labelledby="statusDropdown${row.admin_uuid}">
+                                    <li>
+                                        <a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Active">
+                                            <i class="fa-solid fa-check text-success" style="font-size: 14px;"></i>
+                                            <span>Active</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Inactive">
+                                            <i class="fa-solid fa-xmark text-danger" style="font-size: 14px;"></i>
+                                            <span>Inactive</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </td>`;
+                } else {
+                    rowHtml += `<td>${row[col.key] || ''}</td>`;
+                }
+            });
+
+            if (tableConfig.actions.length > 0) {
+                rowHtml += `<td class="text-center">`;
+                tableConfig.actions.forEach(action => {
+                    if (action === 'edit') {
+                        rowHtml += `
+                            <a href="{{ route('user-management.edit', '') }}/${row.admin_uuid}" 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('user-management.show', '') }}/${row.admin_uuid}" 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.admin_uuid}">
+                                <i class="fa-solid fa-trash-can"></i>
+                            </button>`;
+                    }
+                });
+                rowHtml += `</td>`;
+            }
+
+            tr.innerHTML = rowHtml;
+            tableBody.appendChild(tr);
+        });
+
+        attachEventListeners();
+        updateDeleteButtonState();
+    }
+
+    function renderPagination() {
+        const pagination = document.getElementById('pagination');
+        if (!pagination) return;
+        pagination.innerHTML = '';
+
+        const pageCount = Math.ceil(filteredRows.length / rowsPerPage);
+
+        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) {
+                currentPage--;
+                renderTable();
+                renderPagination();
+            }
+        });
+        pagination.appendChild(prevLi);
+
+        for (let i = 1; i <= pageCount; 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();
+                currentPage = i;
+                renderTable();
+                renderPagination();
+            });
+            pagination.appendChild(li);
+        }
+
+        const nextLi = document.createElement('li');
+        nextLi.className = `page-item ${currentPage === pageCount ? '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 < pageCount) {
+                currentPage++;
+                renderTable();
+                renderPagination();
+            }
+        });
+        pagination.appendChild(nextLi);
+    }
+
+    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;
+                renderTable();
+                renderPagination();
+            });
+        }
+
+        // Sort
+        document.querySelectorAll('.sortable').forEach(header => {
+            header.addEventListener('click', function() {
+                const columnIndex = parseInt(this.getAttribute('data-column')) - 1;
+                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;
+                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() {
+                    if (confirm('Are you sure you want to delete the selected items?')) {
+                        const checkboxes = document.querySelectorAll('.rowCheckbox');
+                        const selectedIds = Array.from(checkboxes)
+                            .filter(cb => cb.checked)
+                            .map(cb => cb.closest('tr').getAttribute('data-id'));
+
+                        axios.delete('{{ route('user-management.batchDelete') }}', {
+                            headers: {
+                                'X-CSRF-TOKEN': tableConfig.csrfToken
+                            },
+                            data: {
+                                admin_uuid: selectedIds
+                            }
+                        }).then(response => {
+                            filteredRows = filteredRows.filter(row => !selectedIds.includes(row.admin_uuid));
+                            tableConfig.data = tableConfig.data.filter(row => !selectedIds.includes(row.admin_uuid));
+                            originalRows = originalRows.filter(row => !selectedIds.includes(row.admin_uuid));
+
+                            const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
+                            if (currentPage > maxPage) {
+                                currentPage = maxPage || 1;
+                            }
+
+                            renderTable();
+                            renderPagination();
+                            if (selectAll) selectAll.checked = false;
+                            alert(response.data.message || 'Users deleted successfully');
+                        }).catch(error => {
+                            console.error('Batch delete error:', error);
+                            alert(error.response?.data?.message || 'Failed to delete users. You may have included your own account.');
+                        });
+                    }
+                });
+            }
+        }
+
+        // Status
+        document.querySelectorAll('.status-option').forEach(option => {
+            option.addEventListener('click', function(e) {
+                e.preventDefault();
+                const newStatus = this.getAttribute('data-status');
+                const row = this.closest('tr');
+                const userId = row.getAttribute('data-id');
+                const statusText = row.querySelector('.status-text');
+
+                if (statusText) {
+                    statusText.textContent = newStatus;
+                }
+
+                const rowData = filteredRows.find(r => r.admin_uuid === userId);
+                if (rowData) {
+                    rowData.status = newStatus;
+                    axios.post(`{{ route('user-management.changeStatus', '') }}/${userId}`, {
+                        status: newStatus,
+                        _token: tableConfig.csrfToken
+                    }).then(response => {
+                        alert(response.data.message || `User account is ${newStatus.toLowerCase()}`);
+                    }).catch(error => {
+                        console.error('Status update error:', error);
+                        alert(error.response?.data?.message || 'Failed to update status. You cannot update your own account.');
+                        // Revert status on error
+                        statusText.textContent = rowData.status;
+                    });
+                }
+            });
+        });
+
+        // Delete
+        document.querySelectorAll('.delete-btn').forEach(button => {
+            button.addEventListener('click', function(e) {
+                e.stopPropagation();
+                const userId = this.getAttribute('data-id');
+                if (confirm('Are you sure you want to delete this item?')) {
+                    axios.delete(`{{ route('user-management.destroy', '') }}/${userId}`, {
+                        headers: {
+                            'X-CSRF-TOKEN': tableConfig.csrfToken
+                        }
+                    }).then(response => {
+                        filteredRows = filteredRows.filter(row => row.admin_uuid !== userId);
+                        tableConfig.data = tableConfig.data.filter(row => row.admin_uuid !== userId);
+                        originalRows = originalRows.filter(row => row.admin_uuid !== userId);
+
+                        const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
+                        if (currentPage > maxPage) {
+                            currentPage = maxPage || 1;
+                        }
+
+                        renderTable();
+                        renderPagination();
+                        alert(response.data.message || 'User deleted successfully');
+                    }).catch(error => {
+                        console.error('Delete error:', error);
+                        alert(error.response?.data?.message || 'Failed to delete user. You cannot delete your own account.');
+                    });
+                }
+            });
+        });
+
+        // Row click to view
+        document.querySelectorAll('.clickable-row').forEach(row => {
+            row.addEventListener('click', function(e) {
+                if (e.target.closest('.rowCheckbox, .status-btn, .edit-btn, .view-btn, .delete-btn, .dropdown-menu')) {
+                    return;
+                }
+                const userId = this.getAttribute('data-id');
+                window.location.href = `{{ route('user-management.show', '') }}/${userId}`;
+            });
+        });
+    }
+
+    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 54b43f2..85315bf 100644
--- a/resources/views/pages/home page/photo-slider.blade.php	
+++ b/resources/views/pages/home page/photo-slider.blade.php	
@@ -3,56 +3,9 @@
 @section('page_title', 'Photo Slider')
 
 @section('content')
-    @php
-        $sliders = [
-            [
-                'id' => 1,
-                'title' => 'Homepage Banner',
-                'type' => 'Banner',
-                'startDate' => '2025-04-10',
-                'endDate' => '2025-04-20'
-            ],
-            [
-                'id' => 2,
-                'title' => 'Product Carousel',
-                'type' => 'Carousel',
-                'startDate' => '2025-04-15',
-                'endDate' => '2025-04-25'
-            ],
-            [
-                'id' => 3,
-                'title' => 'Seasonal Promo',
-                'type' => 'Banner',
-                'startDate' => '2025-04-20',
-                'endDate' => '2025-05-01'
-            ],
-            [
-                'id' => 4,
-                'title' => 'Flash Sale Slider',
-                'type' => 'Slider',
-                'startDate' => '2025-04-22',
-                'endDate' => '2025-04-24'
-            ],
-            [
-                'id' => 5,
-                'title' => 'New Arrivals',
-                'type' => 'Carousel',
-                'startDate' => '2025-04-25',
-                'endDate' => '2025-05-05'
-            ],
-            [
-                'id' => 6,
-                'title' => 'Event Highlight',
-                'type' => 'Banner',
-                'startDate' => '2025-04-30',
-                'endDate' => '2025-05-10'
-            ]
-        ];
-    @endphp
-
     @include('components.table-component', [
         'pageTitle' => 'Photo Slider',
-        'data' => $sliders,
+        // 'data' => $sliders,
         'columns' => [
             ['name' => 'Title', 'key' => 'title', 'sortable' => true],
             ['name' => 'Type', 'key' => 'type', 'sortable' => true],
@@ -67,14 +20,4 @@
         'showEditModal' => true,
         'showViewModal' => true
     ])
-
-    <script>
-        const storedSliders = JSON.parse(sessionStorage.getItem('sliders') || '[]');
-        if (storedSliders.length > 0) {
-            const tableConfig = window.tableConfig || {};
-            tableConfig.data = [...tableConfig.data, ...storedSliders];
-            window.renderTable();
-            window.renderPagination();
-        }
-    </script>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/pages/user-management.blade.php b/resources/views/pages/user-management.blade.php
index 57a7608..67fa014 100644
--- a/resources/views/pages/user-management.blade.php
+++ b/resources/views/pages/user-management.blade.php
@@ -1,31 +1,30 @@
-<!-- resources/views/pages/user-management.blade.php -->
 @extends('layouts.app')
 
 @section('page_title', 'User Management')
 
 @section('content')
     <div id="user-table">
-        @include('components.table-component', [
+        @include('components.user-management-component', [
             'pageTitle' => 'User Management',
-            'data' => $users, // Use the data passed from the controller
+            'data' => $users,
             'columns' => [
                 ['name' => 'Username', 'key' => 'username', 'sortable' => true],
                 ['name' => 'First Name', 'key' => 'firstName', 'sortable' => true],
                 ['name' => 'Last Name', 'key' => 'lastName', 'sortable' => true],
                 ['name' => 'User Role', 'key' => 'role', 'sortable' => true],
                 ['name' => 'Email', 'key' => 'email', 'sortable' => true],
-                ['name' => 'Status', 'key' => 'status', 'sortable' => true]
+                ['name' => 'Status', 'key' => 'status', 'sortable' => true],
             ],
             'actions' => ['edit', 'view', 'delete'],
             'showAddButton' => true,
-            'addButtonUrl' => '/add-user',
+            'addButtonUrl' => route('user-management.create'),
             'showCheckboxes' => true,
             'showBatchDelete' => true,
-            'showEditModal' => true,
-            'showViewModal' => true
+            'showEditModal' => false,
+            'showViewModal' => false,
         ])
         <div id="no-data-message" style="display: {{ empty($users) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
-            <p>No Data Found</p>
+            <p>No users found.</p>
         </div>
     </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/pages/user-management/add-user.blade.php b/resources/views/pages/user-management/add-user.blade.php
index 4dca9a4..e527d40 100644
--- a/resources/views/pages/user-management/add-user.blade.php
+++ b/resources/views/pages/user-management/add-user.blade.php
@@ -1,84 +1,72 @@
 @extends('layouts.app')
 
-@section('page_title', 'Add User')
-
 @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 New User</h5>
+<div class="container-fluid py-4">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header border-0 bg-transparent">
+                    <h5 class="mb-0">Add New User</h5>
+                </div>
+                <div class="card-body">
+                    <form id="addUserForm" action="{{ route('user-management.store') }}" method="POST">
+                        @csrf
+                        <div class="mb-3">
+                            <label class="form-label">Username</label>
+                            <input type="text" class="form-control" id="username" name="username" required>
+                            @error('username')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">First Name</label>
+                            <input type="text" class="form-control" id="firstName" name="firstName" required>
+                            @error('firstName')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">Last Name</label>
+                            <input type="text" class="form-control" id="lastName" name="lastName" required>
+                            @error('lastName')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">Email</label>
+                            <input type="email" class="form-control" id="email" name="email" required>
+                            @error('email')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">User Role</label>
+                            <select class="form-control" id="role" name="role" required>
+                                <option value="1">Admin</option>
+                                <option value="0">User</option>
+                            </select>
+                            @error('role')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">Status</label>
+                            <select class="form-control" id="status" name="status" required>
+                                <option value="active">Active</option>
+                                <option value="inactive">Inactive</option>
+                            </select>
+                            @error('status')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="text-end">
+                            <a href="{{ route('user.management') }}" class="btn btn-secondary">Cancel</a>
+                            <button type="submit" class="btn btn-primary">Add User</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
         </div>
-        <div class="card-body py-2">
-            <form action="#" method="POST" id="addUserForm">
-                @csrf
-                <div class="mb-2">
-                    <label for="username" class="form-label mb-1">Username</label>
-                    <input type="text" class="form-control form-control-sm" id="username" name="username" required>
-                </div>
-                <div class="mb-2">
-                    <label for="firstName" class="form-label mb-1">First Name</label>
-                    <input type="text" class="form-control form-control-sm" id="firstName" name="firstName" required>
-                </div>
-                <div class="mb-2">
-                    <label for="lastName" class="form-label mb-1">Last Name</label>
-                    <input type="text" class="form-control form-control-sm" id="lastName" name="lastName" required>
-                </div>
-                <div class="mb-2">
-                    <label for="role" class="form-label mb-1">User Role</label>
- <select class="form-select form-select-sm" id="status" name="status" required>
-                        <option value="1">1</option>
-                        <option value="0">0</option>
-                    </select>                </div>
-                <div class="mb-2">
-                    <label for="email" class="form-label mb-1">Email</label>
-                    <input type="email" class="form-control form-control-sm" id="email" name="email" required>
-                </div>
-                <div class="mb-2">
-                    <label for="status" class="form-label mb-1">Status</label>
-                    <select class="form-select form-select-sm" id="status" name="status" required>
-                        <option value="Active">Active</option>
-                        <option value="Inactive">Inactive</option>
-                    </select>
-                </div>
-                <div class="d-flex justify-content-end mt-3">
-                    <a href="{{ url('user-management') }}" class="btn btn-outline-secondary btn-sm me-2" style="margin-right:5px">Cancel</a>
-                    <button type="submit" class="btn btn-primary btn-sm">Add User</button>
-                </div>
-            </form>
-        </div>
-   
-
-    <style>
-        .card {
-            border-radius: 8px;
-        }
-        .form-control,
-        .form-select {
-            font-size: 0.85rem;
-            border-radius: 4px;
-            padding: 0.375rem 0.75rem;
-        }
-        .form-label {
-            font-weight: 500;
-            font-size: 0.85rem;
-            line-height: 1.2;
-        }
-        .btn-primary {
-            background-color: #E74610;
-            border-color: #E74610;
-            font-size: 0.85rem;
-            padding: 0.375rem 0.75rem;
-        }
-        .btn-primary:hover {
-            background-color: #d63f0e;
-            border-color: #d63f0e;
-        }
-        .btn-outline-secondary {
-            font-size: 0.85rem;
-            padding: 0.375rem 0.75rem;
-        }
-        .form-control-sm,
-        .form-select-sm {
-            height: calc(1.5em + 0.5rem + 2px);
-        }
-    </style>
+    </div>
+</div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/pages/user-management/edit-user.blade.php b/resources/views/pages/user-management/edit-user.blade.php
new file mode 100644
index 0000000..22f7198
--- /dev/null
+++ b/resources/views/pages/user-management/edit-user.blade.php
@@ -0,0 +1,93 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container-fluid py-4">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header border-0 bg-transparent">
+                    <h5 class="mb-0">Edit User</h5>
+                </div>
+                <div class="card-body">
+                    <form id="editUserForm" action="{{ route('user-management.update', $user['admin_uuid']) }}" method="POST">
+                        @csrf
+                        @method('PUT')
+                        <div class="mb-3">
+                            <label class="form-label">Username</label>
+                            <input type="text" class="form-control" id="username" name="username" value="{{ $user['username'] }}" required>
+                            @error('username')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">First Name</label>
+                            <input type="text" class="form-control" id="firstName" name="firstName" value="{{ $user['firstName'] }}" required>
+                            @error('firstName')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">Last Name</label>
+                            <input type="text" class="form-control" id="lastName" name="lastName" value="{{ $user['lastName'] }}" required>
+                            @error('lastName')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">Email</label>
+                            <input type="email" class="form-control" id="email" name="email" value="{{ $user['email'] }}" required>
+                            @error('email')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">Password (leave blank to keep unchanged)</label>
+                            <input type="password" class="form-control" id="password" name="password">
+                            @error('password')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">Status</label>
+                            <select class="form-control" id="status" name="status" required>
+                                <option value="Active" {{ $user['status'] === 'Active' ? 'selected' : '' }}>Active</option>
+                                <option value="Inactive" {{ $user['status'] === 'Inactive' ? 'selected' : '' }}>Inactive</option>
+                            </select>
+                            @error('status')
+                                <span class="text-danger">{{ $message }}</span>
+                            @enderror
+                        </div>
+                        <div class="text-end">
+                            <a href="{{ route('user-management.index') }}" class="btn btn-secondary">Cancel</a>
+                            <button type="submit" class="btn btn-primary">Update User</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+document.getElementById('editUserForm').addEventListener('submit', async function(e) {
+    e.preventDefault();
+    const form = this;
+    const formData = new FormData(form);
+
+    try {
+        const response = await axios.post(form.action, formData, {
+            headers: {
+                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+            }
+        });
+        alert(response.data.message || 'User updated successfully');
+        window.location.href = '{{ route('user-management.index') }}';
+    } catch (error) {
+        console.error('Update error:', error);
+        alert(error.response?.data?.error || 'Failed to update user');
+    }
+});
+</script>
+@endpush
+@endsection
\ No newline at end of file
diff --git a/resources/views/pages/user-management/show-user.blade.php b/resources/views/pages/user-management/show-user.blade.php
new file mode 100644
index 0000000..03633aa
--- /dev/null
+++ b/resources/views/pages/user-management/show-user.blade.php
@@ -0,0 +1,82 @@
+@extends('layouts.app')
+
+@section('page_title', 'View User')
+
+@section('content')
+<div class="container mt-4">
+    <div class="card">
+        <div class="card-header border-0 bg-transparent">
+            <h5 class="mb-0 fw-bold text-dark">View User Details</h5>
+        </div>
+        <div class="card-body">
+            <div class="view-details">
+                <p><strong>Username:</strong> <span>{{ $user['username'] }}</span></p>
+                <p><strong>First Name:</strong> <span>{{ $user['firstName'] }}</span></p>
+                <p><strong>Last Name:</strong> <span>{{ $user['lastName'] }}</span></p>
+                <p><strong>User Role:</strong> <span>{{ $user['role'] }}</span></p>
+                <p><strong>Email:</strong> <span>{{ $user['email'] }}</span></p>
+                <p><strong>Status:</strong> <span>{{ $user['status'] }}</span></p>
+            </div>
+            <div class="d-flex justify-content-end mt-4">
+                <a href="{{ route('user-management.edit', $user['admin_uuid']) }}" class="btn btn-primary me-2">
+                    <i class="fa-solid fa-pen-to-square me-1"></i> Edit
+                </a>
+                <a href="{{ route('user-management.index') }}" class="btn btn-outline-secondary">
+                    <i class="fa-solid fa-arrow-left me-1"></i> Back
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .card,
+    .btn {
+        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;
+    }
+    .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;
+    }
+    .view-details p {
+        margin-bottom: 0.75rem;
+        font-size: 0.9rem;
+    }
+    .view-details strong {
+        display: inline-block;
+        width: 120px;
+        font-weight: 500;
+        color: #343a40;
+    }
+    .view-details span {
+        color: #495057;
+    }
+    @media (max-width: 576px) {
+        .view-details p {
+            font-size: 0.85rem;
+        }
+        .view-details strong {
+            width: 100px;
+        }
+        .btn {
+            padding: 0.2rem 0.4rem;
+            font-size: 0.75rem;
+        }
+    }
+</style>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 616780c..f4452c2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -4,6 +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;
 
 
 
@@ -24,7 +25,8 @@ Route::get('/dashboard', function () {
     return view('dashboard');
 });
 
-Route::get('/user-management', [UserManagementController::class, 'index'])->name('user.management');
+
+Route::get('/photo-slider', [PhotoSliderViewController::class, 'index'])->name('photo-slider.index');
 
 Route::get('/notification', function () {
     return view('pages.notification');
@@ -38,9 +40,7 @@ Route::get('/locked-accounts', function () {
     return view('pages.member management.locked-accounts');
 })->name('locked-accounts');
 
-Route::get('/photo-slider', function () {
-    return view('pages.home page.photo-slider');
-})->name('photo-slider');
+
 
 Route::get('/promotions', function () {
     return view('pages.promotions');
@@ -156,3 +156,13 @@ Route::get('/fuel-price-update-logs', function () {
     return view('pages.fuel-price-update-logs');
 })->name('fuel-price-update-logs'); 
 
+//User
+Route::get('user-management', [UserManagementController::class, 'index'])->name('user.management');
+Route::get('user-management/create', [UserManagementController::class, 'create'])->name('user-management.create');
+Route::post('user-management', [UserManagementController::class, 'store'])->name('user-management.store');
+Route::get('user-management/{uuid}', [UserManagementController::class, 'show'])->name('user-management.show');
+Route::get('user-management/{uuid}/edit', [UserManagementController::class, 'edit'])->name('user-management.edit');
+Route::put('user-management/{uuid}', [UserManagementController::class, 'update'])->name('user-management.update');
+Route::delete('user-management/{uuid}', [UserManagementController::class, 'destroy'])->name('user-management.destroy');
+Route::delete('user-management/batch', [UserManagementController::class, 'batchDelete'])->name('user-management.batchDelete');
+Route::post('user-management/{uuid}/status', [UserManagementController::class, 'changeStatus'])->name('user-management.changeStatus');
\ No newline at end of file