diff --git a/app/Config/Filters.php b/app/Config/Filters.php
index 12122f8..e3cea33 100644
--- a/app/Config/Filters.php
+++ b/app/Config/Filters.php
@@ -71,7 +71,7 @@ class Filters extends BaseFilters
     public array $globals = [
         'before' => [
 			'auth' => [ 'except' => [
-				'auth/*', 'setup'
+				'auth/*', 'setup', 'api/*'
 			]]
             // 'honeypot',
             // 'csrf',
diff --git a/app/Config/Routes.php b/app/Config/Routes.php
index d6d4027..8fcc801 100644
--- a/app/Config/Routes.php
+++ b/app/Config/Routes.php
@@ -35,4 +35,7 @@ $routes->get('/dict_tests/', 'Dict_tests::index');
 $routes->get('/auth/logout', 'Auth::logout');
 $routes->get('/auth/loginTD', 'Auth::loginTD');
 $routes->match(['get','post'], '/auth/login', 'Auth::login');
-$routes->match(['get','post'], '/auth/setpass/(:any)', 'Auth::setpass/$1');
\ No newline at end of file
+$routes->match(['get','post'], '/auth/setpass/(:any)', 'Auth::setpass/$1');
+
+// API
+$routes->get('/api/userroles/index', 'Api::userroles_index');
\ No newline at end of file
diff --git a/app/Controllers/Api.php b/app/Controllers/Api.php
new file mode 100644
index 0000000..3fc90f0
--- /dev/null
+++ b/app/Controllers/Api.php
@@ -0,0 +1,28 @@
+<?php
+namespace App\Controllers;
+
+use CodeIgniter\RESTful\ResourceController;
+
+class Api extends ResourceController {
+	protected $format    = 'json';
+
+	public function userroles_index()	{
+		$db = \Config\Database::connect();
+		$sql = "select * from cmod.dbo.CM_USERROLES";
+		$query = $db->query($sql);
+		$results = $query->getResultArray();
+		$data['userroles'] = $results;
+		
+		return $this->respond($data, 200);
+	}
+	
+	public function userroles_edit($userroleid)	{
+		$db = \Config\Database::connect();
+		$sql = "select * from cmod.dbo.CM_USERROLES where USERROLEID='$userroleid'";
+		$query = $db->query($sql);
+		$results = $query->getResultArray();
+		$data['userroles'] = $results;
+		
+		return $this->respond($data, 200);
+	}
+}
\ No newline at end of file
diff --git a/app/Controllers/Userroles.php b/app/Controllers/Userroles.php
index a9ba93b..28f3614 100644
--- a/app/Controllers/Userroles.php
+++ b/app/Controllers/Userroles.php
@@ -8,53 +8,6 @@ class Userroles extends BaseController {
         return view('userroles_index');
     }
 	
-	public function fetchAll() {
-		$db = \Config\Database::connect();
-		$sql = "select * from cmod.dbo.CM_USERROLES";
-		$query = $db->query($sql);
-		$results = $query->getResultArray();
-		$userroles = $results;
-		
-		$data = "
-		<button class='btn btn-sm btn-success mx-3 my-2 create'><i class='bi bi-plus-circle'></i> Create New</button>
-		<div class=\"table-responsive\">
-			<table id=\"table_dashboard\" class=\"table\">
-				<thead>
-					<tr>
-						<th>#</th>
-						<th>Code</th>
-						<th>Name</th>
-						<th>Action</th>
-					</tr>
-				</thead>
-				<tbody>
-		";
-		$i = 1;
-		foreach ($userroles as $qdata) {
-			$userrolecode = $qdata['USERROLECODE'];
-			$userrolename = $qdata['USERROLENAME'];
-			$data.= "
-				<tr class=\"table-row\">
-					<td>$i</td>
-					<td>$userrolecode</td>
-					<td>$userrolename</td>
-				
-					<td>
-						<button class='badge text-bg-warning edit' data-userrolecode='$userrolecode'>edit</button>
-					</td>
-				</tr>";
-			$i++;
-		}
-		$data .= "
-				</tbody>
-			</table>
-		</div>";
-		return $this->response->setJSON([
-			'error' => false,
-			'message' => $data
-		]);
-	}
-	
 	public function edit($userrolecode) {
 		$db = \Config\Database::connect();
 		$data = array();
diff --git a/app/Controllers/Users.php b/app/Controllers/Users.php
index c90b61f..700c910 100644
--- a/app/Controllers/Users.php
+++ b/app/Controllers/Users.php
@@ -6,14 +6,13 @@ class Users extends BaseController {
 	
 	public function index(): string {
 		$db = \Config\Database::connect();
-		$sql = "select u.USERID, u.USERNAME, u1.USERROLECODE from cmod.dbo.CM_USERS u1 
+		$sql = "select u.USERID, u.USERNAME, u1.USERROLEID from cmod.dbo.CM_USERS u1 
 	full join USERS u on u.USERID=u1.USERID
 	where ( u.LOCKEDACCOUNT is null or u.LOCKEDACCOUNT=0 )";
 		$query = $db->query($sql);
 		$results = $query->getResultArray();
 		
 		$data['users'] = $results;
-		$data['userrole'] = $this->userrole;
         return view('users_index', $data);
     }
 	
diff --git a/app/Views/userroles_index.php b/app/Views/userroles_index.php
index 330b59d..5d79d99 100644
--- a/app/Views/userroles_index.php
+++ b/app/Views/userroles_index.php
@@ -3,13 +3,45 @@
 <?= $this->section('content') ?>
 <div class="card border-0">
 	<div class="body-card">
-		<div id='show_data'>
+		<button class='btn btn-sm btn-success mx-3 my-2' onclick='create()'><i class='bi bi-plus-circle'></i> Create New</button>
+		<div class="table-responsive">
+			<table id="table_dashboard" class="table">
+				<thead>
+					<tr>
+						<th>#</th>
+						<th>Code</th>
+						<th>Name</th>
+						<th>Action</th>
+					</tr>
+				</thead>
+				<tbody id='table-body'>
+				</tbody>
+			</table>
 		</div>
 	</div>
 </div>
-<div class="modal fade" id="modal" aria-hidden="true" tabindex="-1">
+
+<div class="modal fade" id="modal_crud" aria-hidden="true" tabindex="-1">
 	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
 		<div class="modal-content">
+			<div class="modal-header">
+				<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Edit UserRoles</h1>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" ></button>
+			</div>
+			<div class="modal-body" style='background-color:#F4F6FF'>
+				<div class="row">
+					<div class="col-12">
+						<table class="table table-sm table-borderless">
+							<tr class="align-middle"> <th>User Role Code</th> <th>:</th> 
+								<td><input class='form-control' type='text' id='userrolecode' oninput='this.value = this.value.toUpperCase();'/></td>
+							</tr>
+							<tr class="align-middle"> <th>User Role Name</th> <th>:</th> <td><input class='form-control' type='text' id='userrolename'/></td> </tr>
+						</table>
+						<button class='btn btn-sm btn-primary' onclick='save()'>Save</button>
+						<button class='btn btn-sm btn-secondary' data-bs-dismiss="modal">Cancel</button>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
@@ -17,26 +49,58 @@
 
 <?= $this->section('script') ?>
 <script>
-$('.create').on('click',function(){
-	var userrolecode = $(this).data('userrolecode');
-	$('.modal-content').load('<?=base_url();?>userroles/create/', function(){
-		$('#modal').modal('show');
-	});
-});
+function create() {
+	$("#alert-div").html("");
+	$("#error-div").html("");   
+	$("#update_id").val("");
+	$("#userrolecode").val("");
+	$("#userrolename").val("");
+	$("#modal_crud").modal('show'); 
+}
 
-$('.edit').on('click',function(){
-	var userrolecode = $(this).data('userrolecode');
-	$('.modal-content').load('<?=base_url();?>userroles/edit/'+userrolecode, function(){
-		$('#modal').modal('show');
+function edit(userroleid) {
+	let url = '<?=base_url('');?>api/userroles/'+userroleid ;
+	$.ajax({
+		url: url,
+		method: "GET",
+		success: function(response) {
+			let data = response
+			$("#alert-div").html("");
+			$("#error-div").html("");   
+			$("#update_userroleid").val(userroleid);
+			$("#userrolecode").val(userrolecode);
+			$("#userrolename").val(data.userrolename);
+			$("#modal_crud").modal('show'); 
+		},
+		error: function(response) {
+			console.log(response.responseJSON)
+		}
 	});
-});
+}
 
 fetchData();
 function fetchData() {
-$.ajax({
-	url: '<?=base_url('');?>userroles/fetchAll',
-	method: 'get',
-	success: function(response) { $("#show_data").html(response.message); }
+	let url = '<?=base_url('');?>api/userroles/index';
+	$.ajax({
+		url: url,
+		method: 'get',
+		success: function(response) {
+			$("#table-body").html("");
+				var data = response['userroles'];
+				console.log(data);
+				for (var i = 0; i < data.length; i++) {
+					let editBtn =  '<button class="btn btn-sm btn-success" ' + ' onclick="edit(' + data[i].USERROLECODE + ')">Edit' + '</button> ';
+					let deleteBtn =  '<button class="btn btn-sm btn-danger" ' + ' onclick="delete(' + data[i].USERROLECODE + ')">Delete' + '</button>';
+
+					let datarow = '<tr class="align-middle">' + 
+						'<td>' + data[i].USERROLEID + '</td>' + '<td>' + data[i].USERROLECODE+ '</td>' + '<td>' + data[i].USERROLENAME+ '</td>' + '<td>' + editBtn + deleteBtn + '</td>' +
+					'</tr>';
+					$("#table-body").append(datarow);
+				}
+			},
+			error: function(response) {
+			console.log(response.responseJSON)
+			}
 	});
 }
 </script>
diff --git a/app/Views/users_index.php b/app/Views/users_index.php
index f918890..f067dec 100644
--- a/app/Views/users_index.php
+++ b/app/Views/users_index.php
@@ -20,7 +20,7 @@
 					foreach ($users as $data) {
 						$userid = $data['USERID'];
 						$username = $data['USERNAME'];
-						$userrolecode = $data['USERROLECODE'];
+						$userrolecode = $data['USERROLEID'];
 					?>
 					<tr class="table-row">
 						<td><?=$i;?></td>