diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
index 06af8793..af4db401 100644
--- a/src/lib/helpers/enums.js
+++ b/src/lib/helpers/enums.js
@@ -125,6 +125,8 @@ export const UserPermission = Object.freeze(userPermission);
 
 const userAction = {
     Edit: "edit",
+    Train: "train",
+    Evaluate: "evaluate",
     Chat: "chat"
 };
 export const UserAction = Object.freeze(userAction);
diff --git a/src/lib/helpers/types/roleTypes.js b/src/lib/helpers/types/roleTypes.js
index 8ff08ccf..1e036b99 100644
--- a/src/lib/helpers/types/roleTypes.js
+++ b/src/lib/helpers/types/roleTypes.js
@@ -3,9 +3,32 @@
  * @property {string} id - The user id.
  * @property {string} [name] - Role name
  * @property {string[]} permissions - Permissions.
+ * @property {RoleAgentAction[]} agent_actions - Agent actions
  * @property {string} [create_date] - The user create date.
  * @property {string} [update_date] - The user update date.
+ * @property {boolean} [open_detail]
  */
 
+/**
+ * @typedef {Object} RoleAgentAction
+ * @property {string?} [id] - The id
+ * @property {string} agent_id - The agent id
+ * @property {import('$agentTypes').AgentModel} [agent] - The agent details
+ * @property {string[]} actions - The actions
+ */
+
+/**
+ * @typedef {Object} RoleAgentInnerAction
+ * @property {string?} [id] - The id
+ * @property {string} agent_id - The agent id
+ * @property {string} [agent_name] - The agent name
+ * @property {import('$agentTypes').AgentModel} [agent] - The agent details
+ * @property {{ key: string, value: string, checked: boolean }[]} actions - The actions
+ */
+
+/**
+ * @typedef {Object} RoleFilter
+ * @property {string[]} [names] - The role names.
+ */
 
 export default {};
\ No newline at end of file
diff --git a/src/lib/helpers/types/userTypes.js b/src/lib/helpers/types/userTypes.js
index 529afe2b..e48a8517 100644
--- a/src/lib/helpers/types/userTypes.js
+++ b/src/lib/helpers/types/userTypes.js
@@ -44,6 +44,7 @@
  * @property {string[]} [user_ids] - The user ids.
  * @property {string[]} [user_names] - The user names
  * @property {string[]} [roles] - The roles.
+ * @property {string[]} [types] - The types.
  * @property {string[]} [sources] - The sources.
  * @property {string[]} [external_ids] - The external ids.
  */
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
index 7d112623..604f0c2d 100644
--- a/src/lib/scss/app.scss
+++ b/src/lib/scss/app.scss
@@ -94,6 +94,7 @@ File: Main Css File
 @import "custom/pages/agent";
 @import "custom/pages/knowledgebase";
 @import "custom/pages/users";
+@import "custom/pages/roles";
 
 // Common
 @import "custom/common/animation";
diff --git a/src/lib/scss/custom/pages/_roles.scss b/src/lib/scss/custom/pages/_roles.scss
new file mode 100644
index 00000000..076c2695
--- /dev/null
+++ b/src/lib/scss/custom/pages/_roles.scss
@@ -0,0 +1,119 @@
+.roles-table {
+    .role-plain-col {
+        width: 10%;
+        max-width: 100px;
+    }
+
+    .role-permission-col {
+        width: 40%;
+        max-width: 300px;
+    }
+
+    .role-detail {
+        padding: 2px 5px;
+        border-radius: 3px;
+        border-color: var(--#{$prefix}light) !important;
+        background-color: var(--#{$prefix}light) !important;
+        position: relative;
+
+        ul {
+            li {
+                margin: 2px 0px;
+            }
+        }
+
+        .wrappable {
+            white-space: wrap !important;
+        }
+
+        .basic-info {
+            margin: 15px 0px 0px 0px;
+            display: flex;
+            flex-wrap: wrap;
+
+            li {
+                flex: 0 0 50%;
+
+                .inline-edit {
+                    display: flex;
+                    gap: 3px;
+                }
+            }
+        }
+
+        .role-permission-container {
+            display: flex;
+            gap: 5px;
+
+            .permission-wrapper {
+                display: flex;
+                flex-direction: column;
+                gap: 3px;
+
+                .edit-wrapper {
+                    display: flex;
+                    gap: 3px;
+                }
+                
+                input[type="text"] {
+                    height: 30px;
+                    font-size: 12px;
+                }
+            }
+
+            
+            .list-add {
+                font-size: 18px;
+            }
+        }
+
+        .role-agent-container {
+            margin: 20px 0px;
+            padding: 0px 2rem;
+
+            .action-row-wrapper {
+                overflow-y: auto;
+                scrollbar-width: thin;
+                height: fit-content;
+                max-height: 300px;
+            }
+
+            .action-row {
+                display: flex;
+            }
+
+            .action-col {
+                padding: 3px 0px;
+
+                input[type='checkbox'] {
+                    outline: none !important;
+                    box-shadow: none !important;
+                }
+            }
+
+            .action-title {
+                .action-title-wrapper {
+                    display: flex;
+                    gap: 3px;
+                    justify-content: center;
+                    text-transform: capitalize;
+                    text-align: center;
+                    border-bottom: 2px solid var(--bs-primary);
+                }
+            }
+
+            .action-center {
+                display: flex;
+                justify-content: center;
+            }
+        }
+
+        .edit-btn {
+            display: flex;
+            justify-content: flex-end;
+            font-size: 16px;
+            margin-top: 3px;
+            margin-right: 5px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_users.scss b/src/lib/scss/custom/pages/_users.scss
index 84ecd8a0..e948ee1b 100644
--- a/src/lib/scss/custom/pages/_users.scss
+++ b/src/lib/scss/custom/pages/_users.scss
@@ -8,11 +8,6 @@
         width: 20%;
         max-width: 300px;
     }
-    
-    .user-agent-col {
-        width: 25%;
-        max-width: 350px;
-    }
 
     .user-detail {
         padding: 2px 5px;
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 265d761b..7c9929c4 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -6,6 +6,7 @@ export const endpoints = {
     roleOptionsUrl: `${host}/role/options`,
     rolesUrl: `${host}/roles`,
     roleDetailUrl: `${host}/role/{id}/details`,
+    roleUpdateUrl: `${host}/role`,
 
     // user
     tokenUrl: `${host}/token`,
diff --git a/src/lib/services/role-service.js b/src/lib/services/role-service.js
index 0fa83395..15f40116 100644
--- a/src/lib/services/role-service.js
+++ b/src/lib/services/role-service.js
@@ -11,7 +11,15 @@ export async function getRoleOptions() {
 }
 
 
-
+/**
+ * Get role list
+ * @param {import('$roleTypes').RoleFilter?} [filter]
+ * @returns {Promise<import('$roleTypes').RoleModel[]>}
+ */
+export async function getRoles(filter = null) {
+    const response = await axios.post(endpoints.rolesUrl, filter);
+    return response.data;
+}
 
 
 /**
@@ -24,3 +32,14 @@ export async function getRoleDetails(id) {
     const response = await axios.get(url);
     return response.data;
 }
+
+
+/**
+ * Update role
+ * @param {import('$roleTypes').RoleModel} model
+ * @returns {Promise<boolean>}
+ */
+export async function updateRole(model) {
+    const response = await axios.put(endpoints.roleUpdateUrl, { ...model });
+    return response.data;
+}
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 7f42d0ed..8b8e4a3a 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -202,7 +202,7 @@
 	}
 
 	$: {
-		disableAction = !ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id;
+		disableAction = !ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id || !agent?.chatable;
 	}
 
 	setContext('chat-window-context', {
diff --git a/src/routes/page/agent/[agentId]/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-overview.svelte
index 4975286d..e4a5e5c9 100644
--- a/src/routes/page/agent/[agentId]/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-overview.svelte
@@ -75,7 +75,7 @@
                     height="50"
                     class="mx-auto d-block"
                 />
-                {#if 1}
+                {#if !!agent.chatable}
                     <Button
                         class="btn btn-sm btn-soft-info agent-chat"
                         on:click={() => chatWithAgent()}
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
index 059539aa..831639e9 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -78,7 +78,7 @@
             </Link>
           </li>
           <li class="list-inline-item me-1">
-            <Link href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank">
+            <Link href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank" disabled={!agent.chatable}>
               <i class="bx bx-chat" /> {$_('Test')}
             </Link>
           </li>
diff --git a/src/routes/page/roles/+page.svelte b/src/routes/page/roles/+page.svelte
index 339712a2..6d395244 100644
--- a/src/routes/page/roles/+page.svelte
+++ b/src/routes/page/roles/+page.svelte
@@ -1,5 +1,187 @@
 <script>
+    import { onDestroy, onMount } from 'svelte';
+    import {
+		Card,
+		CardBody,
+		Col,
+		Row,
+		Table
+	} from '@sveltestrap/sveltestrap';
+    import { _ } from 'svelte-i18n';
+    import moment from 'moment';
+	import HeadTitle from "$lib/common/HeadTitle.svelte";
+	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import { getAgents } from '$lib/services/agent-service';
+	import { globalEventStore } from '$lib/helpers/store';
+	import { GlobalEvent } from '$lib/helpers/enums';
+	import { getRoleOptions, getRoles, updateRole } from '$lib/services/role-service';
+	import RoleItem from './role-item.svelte';
+	
+    const duration = 3000;
 
+    let isLoading = false;
+	let isComplete = false;
+	let isError = false;
+    let successText = 'Role has been updated!';
+    let errorText = 'Failed to update role!';
+
+    /** @type {import('$roleTypes').RoleFilter} */
+    let filter = {};
+
+    /** @type {import('$roleTypes').RoleModel[]} */
+    let roleItems = [];
+
+    /** @type {import('$commonTypes').IdName[]} */
+	let agents = [];
+
+	/** @type {string[]} */
+	let roleOptions = [];
+
+	/** @type {any} */
+	let unsubscriber;
+
+    onMount(async () => {
+		init();
+
+		unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
+			if (event.name !== GlobalEvent.Search) return;
+
+			const names = event.payload ? [event.payload] : undefined;
+			filter = {
+				names: names
+			};
+			getAllRoles();
+		});
+    });
+
+	onDestroy(() => {
+		unsubscriber?.();
+	});
+
+	function init() {
+		isLoading = true;
+		getRoleOptions().then(roles => {
+			roleOptions = [...roles];
+			getPagedAgents().then(() => {
+				getAllRoles().then(() => {
+					isLoading = false;
+				});
+			});
+		});
+	}
+
+    function getAllRoles() {
+        roleItems = [];
+        isLoading = true;
+        return new Promise((resolve, reject) => {
+            getRoles(filter).then(res => {
+                refresh(res);
+                resolve(res);
+            }).finally(() => {
+                isLoading = false;
+            });
+        });
+	}
+
+    function getPagedAgents() {
+        return new Promise((resolve, reject) => {
+            getAgents({ pager: { page: 1, size: 100, count: 0 } }).then(res => {
+                agents = res?.items?.map(x => {
+                    return {
+                        id: x.id,
+                        name: x.name
+                    };
+                })?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+                resolve(agents);
+            });
+        });
+    }
+
+    /** @param {import('$roleTypes').RoleModel[]} roles */
+    function refresh(roles) {
+		refreshRoles(roles);
+	}
+
+    /** @param {import('$roleTypes').RoleModel[]} roles */
+	function refreshRoles(roles) {
+        roleItems = [ ...roles ];
+	}
+
+    /** @param {any} e */
+    function saveRole(e) {
+        const data = e.detail.updatedData;
+        isLoading = true;
+        updateRole(data).then(res => {
+			if (res) {
+				isLoading = false;
+				isComplete = true;
+				postUpdate(data);
+				setTimeout(() => {
+					isComplete = false;
+				}, duration);
+			} else {
+				throw "error when saving user.";
+			}
+		}).catch(() => {
+			isLoading = false;
+			isComplete = false;
+			isError = true;
+			setTimeout(() => {
+				isError = false;
+			}, duration);
+		});
+    }
+
+    /** @param {import('$roleTypes').RoleModel} data */
+    function postUpdate(data) {
+        roleItems = roleItems?.map(x => {
+            if (x.id === data.id) {
+                return { ...data, update_date: moment.utc().toString(), open_detail: true };
+            }
+            return x;
+        }) || [];
+    }
 </script>
 
-<div></div>
\ No newline at end of file
+
+<HeadTitle title="{$_('User List')}" />
+<Breadcrumb title="{$_('Management')}" pagetitle="{$_('Users')}" />
+<LoadingToComplete isLoading={isLoading} isComplete={isComplete} isError={isError} successText={successText} errorText={errorText} />
+
+
+<Row>
+	<Col lg="12">
+		<Card>
+			<CardBody class="border-bottom">
+				<div class="d-flex align-items-center">
+					<h5 class="mb-0 card-title flex-grow-1">{$_('Role List')}</h5>
+				</div>
+			</CardBody>
+			<CardBody>
+				<div class="table-responsive thin-scrollbar">
+					<Table class="align-middle nowrap roles-table" bordered>
+						<thead>
+							<tr>
+								<th scope="col">{$_('Name')}</th>
+								<th scope="col" class="role-permission-col">{$_('Permissions')}</th>
+                                <th scope="col">{$_('Update Date')}</th>
+								<th scope="col">{$_('')}</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each roleItems as item, idx (idx)}
+                                <RoleItem
+                                    item={item}
+                                    agents={agents}
+                                    open={item.open_detail}
+                                    on:save={e => saveRole(e)}
+                                />
+                            {/each}
+						</tbody>
+					</Table>
+				</div>
+			</CardBody>
+		</Card>
+	</Col>
+</Row>
\ No newline at end of file
diff --git a/src/routes/page/roles/role-item.svelte b/src/routes/page/roles/role-item.svelte
new file mode 100644
index 00000000..6929fb02
--- /dev/null
+++ b/src/routes/page/roles/role-item.svelte
@@ -0,0 +1,380 @@
+<script>
+	import { createEventDispatcher, onMount } from 'svelte';
+    import { fly } from 'svelte/transition';
+    import { Button, Input } from '@sveltestrap/sveltestrap';
+    import { v4 as uuidv4 } from 'uuid';
+    import moment from "moment";
+    import Swal from 'sweetalert2';
+    import Loader from '$lib/common/Loader.svelte';
+	import { UserAction } from '$lib/helpers/enums';
+	import { getRoleDetails } from '$lib/services/role-service';
+    
+	
+    const svelteDispatch = createEventDispatcher();
+
+
+    /** @type {import('$roleTypes').RoleModel} */
+    export let item;
+
+    /** @type {boolean} */
+    export let open = false;
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+    /** @type {import('$commonTypes').IdName[]} */
+    export let agents = [];
+
+
+    /** @type {boolean} */
+    let isLoading = false;
+
+    /** @type {import('$roleTypes').RoleModel} */
+    let innerItem = { ...item };
+
+    /** @type {import('$roleTypes').RoleAgentInnerAction[]} */
+    let innerActions = [];
+
+    let allActions = [
+        {
+            name: UserAction.Edit,
+            value: UserAction.Edit,
+            checked: false
+        },
+        {
+            name: UserAction.Train,
+            value: UserAction.Train,
+            checked:false
+        },
+        {
+            name: UserAction.Evaluate,
+            value: UserAction.Evaluate,
+            checked:false
+        },
+        {
+            name: UserAction.Chat,
+            value: UserAction.Chat,
+            checked:false
+        }
+    ];
+
+    const colStyle = `flex: 0 0 ${allActions.length > 2 ? Math.floor(1 / (allActions.length + 1) * 100) - 1 : 32}%;`;
+
+    $: {
+        allActions = allActions.map(x => {
+            const list = innerActions.flatMap(a => a.actions.filter(y => y.value === x.value));
+            x.checked = list.every(a => !!a.checked);
+            return { ...x };
+        });
+    }
+
+    onMount(() => {
+        initInnerItem();
+        initAgentActions();
+    });
+
+    function initInnerItem() {
+        innerItem = { ...item };
+    }
+
+    function initAgentActions() {
+        const agentActions = innerItem.agent_actions || [];
+        const handledActions = agents.map(x => {
+            const found = agentActions.find(a => a.agent_id === x.id);
+            if (!found) {
+                return {
+                    id: null,
+                    agent_id: x.id,
+                    agent_name: x.name,
+                    actions: allActions.map(a => {
+                        return {
+                            key: uuidv4(),
+                            value: a.value,
+                            checked: false
+                        };
+                    })
+                }
+            }
+
+            const actions = allActions.map(a => {
+                const checked = !!found.actions.find(y => y === a.value) || false;
+                return {
+                    key: uuidv4(),
+                    value: a.value,
+                    checked: checked
+                };
+            });
+
+            return {
+                id: found.id,
+                agent_id: x.id,
+                agent_name: x.name,
+                actions: actions
+            }
+        });
+
+        innerActions = handledActions.filter(Boolean);
+    }
+
+    function toggleRoleDetail() {
+        open = !open;
+        if (open) {
+            if (item.id != null) {
+                isLoading = true;
+                getRoleDetails(item.id).then(res => {
+                    if (!!res) {
+                        innerItem = { ...res };
+                    }
+                    initAgentActions();
+                }).finally(() => {
+                    isLoading = false;
+                });
+            }
+        }
+    }
+
+
+    /**
+	 * @param {any} e
+	 * @param {import('$roleTypes').RoleAgentInnerAction} agentActionItem
+	 * @param {any} actionItem
+	 */
+    function checkAction(e, agentActionItem, actionItem) {
+        const checked = e.target.checked;
+        const found = innerActions.find(x => x.agent_id === agentActionItem.agent_id);
+        // @ts-ignore
+        const action = found?.actions?.find(x => x.key === actionItem.key);
+        if (action) {
+            action.checked = checked;
+        }
+
+        innerActions = [ ...innerActions ];
+    }
+
+    /**
+	 * @param {any} e
+     * @param {any} title
+	 */
+    function checkAll(e, title) {
+        const checked = e.target.checked;
+        allActions = allActions.map(x => {
+            if (x.value === title.value) {
+                x.checked = checked;
+            }
+            return { ...x };
+        });
+
+        innerActions = innerActions.map(x => {
+            const actions = x.actions.map(a => {
+                if (a.value === title.value) {
+                    a.checked = checked;
+                }
+                return { ...a };
+            });
+
+            return {
+                ...x,
+                actions: actions
+            };
+        });
+    }
+
+    function save() {
+        Swal.fire({
+            title: 'Are you sure?',
+            text: `Are you sure you want to update role "${item.name}"?`,
+            icon: 'warning',
+            showCancelButton: true,
+            cancelButtonText: 'No',
+            confirmButtonText: 'Yes'
+        }).then(async (result) => {
+            if (result.value) {
+                const data = formatUpdatedData();
+                svelteDispatch("save", {
+                    updatedData: data
+                });
+            }
+        });
+    }
+
+    function formatUpdatedData() {
+        /** @type {any[]} */
+        const list = [];
+        innerActions.forEach(x => {
+            // @ts-ignore
+            const items = x.actions.filter(a => !!a.checked);
+            if (x.id || items.length > 0) {
+                list.push({
+                    ...x,
+                    // @ts-ignore
+                    actions: items.map(i => i.value)
+                });
+            }
+        });
+
+        const updated = {
+            ...innerItem,
+            permissions: innerItem.permissions.filter(x => x?.length > 0),
+            agent_actions: list
+        };
+        innerItem = { ...updated };
+        return updated;
+    }
+
+    function addPermission() {
+        innerItem = {
+            ...innerItem,
+            permissions: [ ...innerItem.permissions, '' ]
+        };
+    }
+
+    /** @param {number} index */
+    function deletePermission(index) {
+        const permissions = innerItem.permissions.filter((_, idx) => idx !== index);
+        innerItem = {
+            ...innerItem,
+            permissions: permissions
+        };
+    }
+</script>
+
+<tr in:fly={{ y: -5, duration: 800 }}>
+    <td>{item.name}</td>
+    <td class="role-permission-col">
+        <div class="ellipsis">
+            {item.permissions?.length > 0 ? item.permissions.join(', ') : 'N/A'}
+        </div>
+    </td>
+    <td>
+        {item.update_date != null ? moment.utc(item.update_date).local().format('MMM D YYYY, hh:mm A') : 'N/A'}
+    </td>
+    <td>
+        <ul class="list-unstyled hstack gap-1 mb-0" style="justify-content: center;">
+            <li data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
+                <Button
+                    class="btn btn-sm btn-soft-warning"
+                    disabled={disabled}
+                    on:click={() => toggleRoleDetail()}
+                >
+                    <i class="bx bxs-edit" />
+                </Button>
+            </li>
+        </ul>
+    </td>
+</tr>
+
+{#if open}
+    <tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
+        {#if isLoading}
+            <td colspan="12">
+                <Loader disableDefaultStyles size={30} containerStyles={'display: flex; justify-content: center;'} />
+            </td>
+        {:else}
+            <td colspan="12">
+                <div class="role-detail">
+                    <div class="edit-btn">
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <!-- svelte-ignore a11y-no-static-element-interactions -->
+                        <div
+                            class="text-primary clickable"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Save"
+                            on:click={() => save()}
+                        >
+                            <i class="mdi mdi-content-save-all" />
+                        </div>
+                    </div>
+                    <ul class="basic-info">
+                        <li>
+                            <div class="wrappable">
+                                <span class="fw-bold text-primary">{'Name:'}</span>
+                                <span>{item.name}</span>
+                            </div>
+                        </li>
+                    </ul>
+                    <ul>
+                        <li>
+                            <div class="role-permission-container">
+                                <div class="fw-bold text-primary">{'Permissions:'}</div>
+                                <div class="permission-wrapper">
+                                    {#each innerItem.permissions as permission, index}
+                                        <div class="edit-wrapper">
+                                            <Input
+                                                type="text"
+                                                class="edit-text-box"
+                                                bind:value={permission}
+                                            />
+                                            <div class="line-align-center">
+                                                <i
+                                                    class="bx bxs-no-entry text-danger clickable"
+                                                    role="link"
+                                                    tabindex="0"
+                                                    on:keydown={() => {}}
+                                                    on:click={() => deletePermission(index)}
+                                                />
+                                            </div>
+                                        </div>
+                                    {/each}
+                                    {#if innerItem.permissions?.length < 5}
+                                        <div class="list-add line-align-center">
+                                            <i
+                                                class="bx bx bx-list-plus text-primary clickable"
+                                                role="link"
+                                                tabindex="0"
+                                                on:keydown={() => {}}
+                                                on:click={() => addPermission()}
+                                            />
+                                        </div>
+                                    {/if}
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+
+                    {#if innerActions.length > 0}
+                        <div class="role-agent-container">
+                            <div class="action-row action-title">
+                                <div class="action-col action-title-wrapper fw-bold" style={colStyle}>
+                                    {'Agent'}
+                                </div>
+                                {#each allActions as title}
+                                    <div class="action-col action-title-wrapper fw-bold" style={colStyle}>
+                                        <div>{title.name}</div>
+                                        <div>
+                                            <Input
+                                                type="checkbox"
+                                                class="action-center"
+                                                checked={title.checked}
+                                                on:change={e => checkAll(e, title)}
+                                            />
+                                        </div>
+                                    </div>
+                                {/each}
+                            </div>
+                            <div class="action-row-wrapper">
+                                {#each innerActions as agentActionItem}
+                                    <div class="action-row">
+                                        <div class="action-col fw-bold" style={colStyle}>
+                                            {agentActionItem.agent_name}
+                                        </div>
+                                        {#each agentActionItem.actions as actionItem}
+                                            <div class="action-col action-center" style={colStyle}>
+                                                <Input
+                                                    type="checkbox"
+                                                    class="action-center"
+                                                    checked={actionItem.checked}
+                                                    on:change={e => checkAction(e, agentActionItem, actionItem)}
+                                                />
+                                            </div>
+                                        {/each}
+                                    </div>
+                                {/each}
+                            </div>
+                        </div>
+                    {/if}
+                </div>
+            </td>
+        {/if}
+    </tr>
+{/if}
\ No newline at end of file
diff --git a/src/routes/page/users/+page.svelte b/src/routes/page/users/+page.svelte
index 8fc2034a..399330c9 100644
--- a/src/routes/page/users/+page.svelte
+++ b/src/routes/page/users/+page.svelte
@@ -5,8 +5,6 @@
 		Card,
 		CardBody,
 		Col,
-		Dropdown,
-		DropdownToggle,
 		Input,
 		Row,
 		Table
@@ -58,7 +56,7 @@
 		userName: '',
 		externalId: '',
 		role: '',
-		source: '',
+		type: '',
 	};
 
     onMount(async () => {
@@ -149,7 +147,7 @@
         const userName = searchOption.userName?.trim();
         const externalId = searchOption.externalId?.trim();
         const role = searchOption.role?.trim();
-        const source = searchOption.source?.trim();
+        const type = searchOption.type?.trim();
 
         filter = {
             ...filter,
@@ -157,7 +155,7 @@
             user_names: !!userName ? [userName] : [],
             external_ids: !!externalId ? [externalId] : [],
             roles: !!role ? [role] : [],
-            sources: !!source ? [source] : []
+            types: !!type ? [type] : []
         };
     }
 
@@ -179,7 +177,7 @@
 			if (res) {
 				isLoading = false;
 				isComplete = true;
-				postUpdateUser(data);
+				postUpdate(data);
 				setTimeout(() => {
 					isComplete = false;
 				}, duration);
@@ -197,7 +195,7 @@
     }
 
     /** @param {import('$userTypes').UserModel} data */
-    function postUpdateUser(data) {
+    function postUpdate(data) {
         userItems = userItems?.map(x => {
             if (x.id === data.id) {
                 return { ...data, open_detail: true };
@@ -219,19 +217,6 @@
 			<CardBody class="border-bottom">
 				<div class="d-flex align-items-center">
 					<h5 class="mb-0 card-title flex-grow-1">{$_('User List')}</h5>
-					<div class="flex-shrink-0">
-						<Button
-							class="btn btn-light"
-							on:click={() => {}}
-						>
-							<i class="mdi mdi-magnify" />
-						</Button>
-						<Dropdown class="dropdown d-inline-block">
-							<DropdownToggle type="menu" class="btn" id="dropdownMenuButton1">
-								<i class="mdi mdi-dots-vertical" />
-							</DropdownToggle>
-						</Dropdown>
-					</div>
 				</div>
 			</CardBody>
 			<CardBody class="border-bottom">
@@ -246,7 +231,7 @@
 						<Input bind:value={searchOption.role} maxlength={maxLength} placeholder={'Search role...'} />
 					</Col>
 					<Col lg="2">
-						<Input bind:value={searchOption.source} maxlength={maxLength} placeholder={'Search source...'} />
+						<Input bind:value={searchOption.type} maxlength={maxLength} placeholder={'Search type...'} />
 					</Col>
 					<Col lg="1">
 						<Button
@@ -270,7 +255,7 @@
 								<th scope="col">{$_('Full Name')}</th>
 								<th scope="col">{$_('External Id')}</th>
 								<th scope="col" class="user-plain-col">{$_('Role')}</th>
-								<th scope="col">{$_('Source')}</th>
+								<th scope="col">{$_('Type')}</th>
 								<th scope="col" class="user-permission-col">{$_('Permissions')}</th>
 								<th scope="col">{$_('')}</th>
 							</tr>
diff --git a/src/routes/page/users/user-item.svelte b/src/routes/page/users/user-item.svelte
index 855f93d3..476ee9f5 100644
--- a/src/routes/page/users/user-item.svelte
+++ b/src/routes/page/users/user-item.svelte
@@ -44,6 +44,16 @@
             value: UserAction.Edit,
             checked: false
         },
+        {
+            name: UserAction.Train,
+            value: UserAction.Train,
+            checked:false
+        },
+        {
+            name: UserAction.Evaluate,
+            value: UserAction.Evaluate,
+            checked:false
+        },
         {
             name: UserAction.Chat,
             value: UserAction.Chat,
@@ -247,7 +257,7 @@
     <td class="user-plain-col">
         <div class="ellipsis">{item.role}</div>
     </td>
-    <td>{item.source}</td>
+    <td>{item.type}</td>
     <td class="user-permission-col">
         <div class="ellipsis">
             {item.permissions?.length > 0 ? item.permissions.join(', ') : 'N/A'}
@@ -269,7 +279,6 @@
 </tr>
 
 {#if open}
-    
     <tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
         {#if isLoading}
             <td colspan="12">
@@ -351,7 +360,7 @@
                                             />
                                             <div class="line-align-center">
                                                 <i
-                                                    class="bx bxs-no-entry text-danger"
+                                                    class="bx bxs-no-entry text-danger clickable"
                                                     role="link"
                                                     tabindex="0"
                                                     on:keydown={() => {}}