diff --git a/app/Http/Controllers/UserManagementController.php b/app/Http/Controllers/UserManagementController.php
new file mode 100644
index 0000000..b6e8a7d
--- /dev/null
+++ b/app/Http/Controllers/UserManagementController.php
@@ -0,0 +1,70 @@
+<?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 UserManagementController extends Controller
+{
+    protected $apiBaseUrl = 'http://192.168.100.6:8081/api'; // Same as in AuthController
+
+    /**
+     * 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;
+
+            if (!$accessToken) {
+                Log::info('No access token found, redirecting to login from user-management');
+                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,
+            ])->get("{$this->apiBaseUrl}/cms/admin");
+
+            $json = $response->json();
+
+            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 [
+                        
+                        'username' => $admin['username'],
+                        'firstName' => $admin['firstname'],
+                        'lastName' => $admin['lastname'],
+                        'role' => 'Admin', // Adjust if the API provides role data
+                        'email' => $admin['email'],
+                        // 'status' => $admin['is_active'] ? '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
+                ]);
+            }
+        } catch (\Exception $e) {
+            Log::error('Error fetching user data: ' . $e->getMessage());
+            return view('pages.user-management', [
+                'users' => [], // Pass an empty array on error
+            ]);
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/views/pages/user-management.blade.php b/resources/views/pages/user-management.blade.php
index d011e47..57a7608 100644
--- a/resources/views/pages/user-management.blade.php
+++ b/resources/views/pages/user-management.blade.php
@@ -1,3 +1,4 @@
+<!-- resources/views/pages/user-management.blade.php -->
 @extends('layouts.app')
 
 @section('page_title', 'User Management')
@@ -6,7 +7,7 @@
     <div id="user-table">
         @include('components.table-component', [
             'pageTitle' => 'User Management',
-            'data' => [],
+            'data' => $users, // Use the data passed from the controller
             'columns' => [
                 ['name' => 'Username', 'key' => 'username', 'sortable' => true],
                 ['name' => 'First Name', 'key' => 'firstName', 'sortable' => true],
@@ -23,54 +24,8 @@
             'showEditModal' => true,
             'showViewModal' => true
         ])
-        <div id="no-data-message" style="display: none; text-align: center; margin-top: 20px;">
+        <div id="no-data-message" style="display: {{ empty($users) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
             <p>No Data Found</p>
         </div>
     </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const apiBaseUrl = '{{ config('app.api_base_url') }}'; // Fetch base URL from config/app.php
-            const apiEndpoint = `${apiBaseUrl}/api/cms/admin`; // Construct the full API URL
-
-            fetch(apiEndpoint, {
-                method: 'GET',
-                headers: {
-                    'Accept': 'application/json',
-                    'Authorization': 'Bearer ' + localStorage.getItem('token') // Adjust if authentication is needed
-                }
-            })
-            .then(response => response.json())
-            .then(data => {
-                const noDataMessage = document.getElementById('no-data-message');
-                const tableComponent = document.querySelector('table-component');
-
-                if (data.data && Array.isArray(data.data) && data.data.length > 0) {
-                    const users = data.data.map(admin => ({
-                        id: admin.admin_id,
-                        username: admin.username,
-                        firstName: admin.firstname,
-                        lastName: admin.lastname,
-                        role: 'Admin', // Adjust if the API provides roles
-                        email: admin.email,
-                        status: admin.is_active ? 'Active' : 'Inactive'
-                    }));
-
-                    // Update the table component with the fetched data
-                    if (tableComponent) {
-                        tableComponent.setAttribute('data', JSON.stringify(users));
-                    }
-                    noDataMessage.style.display = 'none'; // Hide the message
-                } else {
-                    console.log('No data found or invalid response:', data);
-                    noDataMessage.style.display = 'block'; // Show the message
-                }
-            })
-            .catch(error => {
-                console.error('Error fetching data:', error);
-                const noDataMessage = document.getElementById('no-data-message');
-                noDataMessage.style.display = 'block'; // Show the message on error
-            });
-        });
-    </script>
 @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 b6f4856..4dca9a4 100644
--- a/resources/views/pages/user-management/add-user.blade.php
+++ b/resources/views/pages/user-management/add-user.blade.php
@@ -24,8 +24,10 @@
                 </div>
                 <div class="mb-2">
                     <label for="role" class="form-label mb-1">User Role</label>
-                    <input type="text" class="form-control form-control-sm" id="role" name="role" required>
-                </div>
+ <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>
diff --git a/routes/web.php b/routes/web.php
index 632c353..616780c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,7 +3,7 @@
 use Illuminate\Support\Facades\Route;
 use Illuminate\Support\Facades\Http;
 use App\Http\Controllers\AuthController;
-
+use App\Http\Controllers\UserManagementController;
 
 
 
@@ -24,10 +24,7 @@ Route::get('/dashboard', function () {
     return view('dashboard');
 });
 
-Route::get('/user-management', function () {
-    return view('pages.user-management');
-})->name('user.management');
-
+Route::get('/user-management', [UserManagementController::class, 'index'])->name('user.management');
 
 Route::get('/notification', function () {
     return view('pages.notification');