diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 8d344d03..b68a9b0d 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -49,7 +49,8 @@
  * @property {boolean} allow_routing
  * @property {string} icon_url - Icon
  * @property {string[]} profiles - The agent profiles.
- * @property {string[]} utilities - The agent utilities.
+ * @property {boolean} merge_utility - Merge utility
+ * @property {AgentUtility[]} utilities - The agent utilities.
  * @property {Date} created_datetime
  * @property {Date} updated_datetime
  * @property {AgentLlmConfig} llm_config - LLM settings.
@@ -59,10 +60,7 @@
  * @property {Object[]} responses
  * @property {RoutingRule[]} routing_rules
  * @property {AgentWelcomeInfo} welcome_info - Welcome information.
- * @property {boolean} editable
- * @property {boolean} chatable
- * @property {boolean} trainable
- * @property {boolean} evaluable
+ * @property {string[]?} [actions]
  */
 
 
@@ -119,4 +117,17 @@
  */
 
 
+/**
+ * @typedef {Object} AgentUtility
+ * @property {string} name 
+ * @property {boolean} disabled 
+ * @property {UtilityBase[]} functions
+ * @property {UtilityBase[]} templates
+ */
+
+/**
+ * @typedef {Object} UtilityBase
+ * @property {string} name
+ */
+
 export default {};
\ No newline at end of file
diff --git a/src/lib/helpers/utils/agent.js b/src/lib/helpers/utils/agent.js
new file mode 100644
index 00000000..143e42ec
--- /dev/null
+++ b/src/lib/helpers/utils/agent.js
@@ -0,0 +1,44 @@
+import { UserAction } from '../enums';
+
+export const AgentExtensions = {
+    chatable: (/** @type {import('$agentTypes').AgentModel} */ agent) => {
+        if (agent == null || agent.id == null) {
+            return false;
+        }
+
+        if (agent.actions == null) {
+            return true;
+        }
+        return agent.actions.includes(UserAction.Chat);
+    },
+    editable: (/** @type {import('$agentTypes').AgentModel} */ agent) => {
+        if (agent == null || agent.id == null) {
+            return false;
+        }
+
+        if (agent.actions == null) {
+            return true;
+        }
+        return agent.actions.includes(UserAction.Edit);
+    },
+    trainable: (/** @type {import('$agentTypes').AgentModel} */ agent) => {
+        if (agent == null || agent.id == null) {
+            return false;
+        }
+
+        if (agent.actions == null) {
+            return true;
+        }
+        return agent.actions.includes(UserAction.Train);
+    },
+    evaluable: (/** @type {import('$agentTypes').AgentModel} */ agent) => {
+        if (agent == null || agent.id == null) {
+            return false;
+        }
+
+        if (agent.actions == null) {
+            return true;
+        }
+        return agent.actions.includes(UserAction.Edit);
+    },
+};
\ No newline at end of file
diff --git a/src/lib/helpers/utils/chat.js b/src/lib/helpers/utils/chat.js
index 165548df..33a362bf 100644
--- a/src/lib/helpers/utils/chat.js
+++ b/src/lib/helpers/utils/chat.js
@@ -12,15 +12,4 @@ export function sendToChatBot(action, chatFrameId, text = null, data = null) {
         // @ts-ignore
         chatFrame.contentWindow.postMessage(content, "*");
     }
-}
-
-/**
- * @param {() => void} func
- */
-export function addChatBoxMountEventListener(func) {
-    window.addEventListener("message", e => {
-        if (e.data.event === 'chat-box-mounted') {
-            func();
-        }
-    });
 }
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index 9ae91149..2845446e 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -37,7 +37,6 @@
 
             i {
                 cursor: pointer;
-                font-size: 18px;
                 color: red;
             }
         }
@@ -102,4 +101,91 @@
             }
         }
     }
+}
+
+.agent-utility-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .merge-utility {
+        display: flex;
+        gap: 3px;
+
+        input {
+            outline: none !important;
+            box-shadow: none !important;
+        }
+    }
+    
+    .utility-wrapper {
+        border: 1px dotted var(--bs-primary);
+        border-radius: 5px;
+        padding: 10px;
+
+        .utility-row {
+
+            .utility-label {
+                width: 30%;
+            }
+
+            .utility-value {
+                width: 70%;
+                display: flex;
+                gap: 5px;
+
+                .add-list {
+                    font-size: 20px;
+                }
+            }
+
+            .utility-input {
+                width: 95%;
+            }
+
+            .utility-delete {
+                width: 5%;
+            }
+        }
+
+        .utility-row-primary {
+            display: flex;
+
+            .utility-label {
+                display: flex;
+                gap: 10px;
+
+                .utility-tooltip {
+                    display: flex;
+                }
+
+                input {
+                    outline: none !important;
+                    box-shadow: none !important;
+                }
+            }
+        }
+
+        .utility-row-secondary {
+            display: flex;
+            flex-direction: column;
+
+            .utility-content {
+                display: flex;
+                flex-direction: column;
+                gap: 3px;
+                border-top: 1px dotted var(--bs-primary);
+                margin-top: 10px;
+                padding-top: 10px;
+
+                .utility-list-item {
+                    display: flex;
+
+                    .utility-label {
+                        font-size: 12px;
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
index b9835833..e537165c 100644
--- a/src/lib/scss/custom/pages/_chat.scss
+++ b/src/lib/scss/custom/pages/_chat.scss
@@ -534,7 +534,6 @@
                 .log-collapse {
                     overflow-y: hidden;
                     height: fit-content;
-                    min-height: 100px;
                     max-height: 200px;
                     display: -webkit-box;
                     -webkit-box-orient: vertical;
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index bd121bbd..7005546a 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -84,10 +84,10 @@ export async function createAgent(agent) {
 
 /**
  * Get agent utilities
- * @returns {Promise<string[]>}
+ * @returns {Promise<import('$agentTypes').AgentUtility[]>}
  */
-export async function getAgentUtilities() {
-    const url = endpoints.agentUtilitiesUrl;
+export async function getAgentUtilityOptions() {
+    const url = endpoints.agentUtilityOptionsUrl;
     const response = await axios.get(url);
     return response.data;
 }
\ No newline at end of file
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 85ac8c79..d5ebc3ba 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -33,7 +33,7 @@ export const endpoints = {
     agentDetailUrl: `${host}/agent/{id}`,
     agentRefreshUrl: `${host}/refresh-agents`,
     agentCreateUrl: `${host}/agent`,
-    agentUtilitiesUrl: `${host}/agent/utilities`,
+    agentUtilityOptionsUrl: `${host}/agent/utility/options`,
     
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index c9ceba1a..8220910d 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -53,12 +53,13 @@
 	import LoadingDots from '$lib/common/LoadingDots.svelte';
 	import StateModal from '$lib/common/StateModal.svelte';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import ChatTextArea from './chat-util/chat-text-area.svelte';
 	import AudioSpeaker from '$lib/common/audio-player/AudioSpeaker.svelte';
+	import { AgentExtensions } from '$lib/helpers/utils/agent';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { replaceNewLine } from '$lib/helpers/http';
 	import { isAudio, isExcel, isPdf } from '$lib/helpers/utils/file';
 	import { ChatAction, ConversationTag, EditorType, FileSourceType, SenderAction, UserRole } from '$lib/helpers/enums';
+	import ChatTextArea from './chat-util/chat-text-area.svelte';
 	import RichContent from './rich-content/rich-content.svelte';
 	import RcMessage from "./rich-content/rc-message.svelte";
 	import RcDisclaimer from './rich-content/rc-disclaimer.svelte';
@@ -203,7 +204,7 @@
 	}
 
 	$: {
-		disableAction = !ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id || !agent?.chatable;
+		disableAction = !ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id || !AgentExtensions.chatable(agent);
 	}
 
 	setContext('chat-window-context', {
@@ -1657,7 +1658,7 @@
 																	text={message?.rich_content?.message?.text || message?.text}
 																/>
 															{/if}
-															{#if PUBLIC_LIVECHAT_ENABLE_TRAINING === 'true' && agent?.trainable}
+															{#if PUBLIC_LIVECHAT_ENABLE_TRAINING === 'true' && AgentExtensions.trainable(agent)}
 																{#if message?.function}
 																	<div class="line-align-center" style="font-size: 17px;">
 																		<!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
index ea470f28..5db267eb 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
@@ -32,9 +32,8 @@
             isMultiSelect = true;
         } else if (richType === RichType.Generic) {
             options = message?.rich_content?.message?.elements;
-            isComplexElement = true;
             // @ts-ignore
-            // isComplexElement = message?.rich_content?.message?.elements?.some(x => x.buttons?.length > 0) || false;
+            isComplexElement = message?.rich_content?.message?.elements?.some(x => x.buttons?.length > 0) || false;
         } else if (message?.rich_content?.editor === EditorType.File) {
             options = message?.rich_content?.message?.buttons;
         }
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 84cc4bd0..89421c4d 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -18,6 +18,8 @@
     import { _ } from 'svelte-i18n'  
     import Swal from 'sweetalert2'
 	import { goto } from '$app/navigation';
+	import AgentUtility from './agent-utility.svelte';
+	import { AgentExtensions } from '$lib/helpers/utils/agent';
 	
 	
     /** @type {import('$agentTypes').AgentModel} */
@@ -26,6 +28,8 @@
     let agentFunctionCmp = null;
     /** @type {any} */
     let agentPromptCmp = null;
+    /** @type {any} */
+    let agentUtilityCmp = null;
 
     /** @type {boolean} */
     let isLoading = false;
@@ -65,6 +69,7 @@
     function handleAgentUpdate() {
         fetchJsonContent();
         fetchPrompts();
+        fetchUtilties();
 
         agent = {
             ...agent,
@@ -72,7 +77,7 @@
             instruction: agent.instruction || '',
             channel_instructions: agent.channel_instructions || [],
             profiles: agent.profiles?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || [],
-            utilities: agent.utilities?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || []
+            utilities: agent.utilities || []
         };
         isLoading = true;
         saveAgent(agent).then(res => {
@@ -110,6 +115,11 @@
         agent.channel_instructions = obj.channelPrompts || [];
     }
 
+    function fetchUtilties() {
+        const list = agentUtilityCmp?.fetchUtilities();
+        agent.utilities = list || [];
+    }
+
     function refreshChannelPrompts() {
         agentPromptCmp?.refreshChannelPrompts();
     }
@@ -145,15 +155,17 @@
     <Row class="agent-detail-sections">
         <Col class="section-min-width agent-overview" style="flex: 35%;">
             <div class="agent-detail-section">
-                <AgentOverview agent={agent} profiles={agent.profiles || []} utilities={agent.utilities || []} />
+                <AgentOverview agent={agent} profiles={agent.profiles || []} />
             </div>
-
             <div class="agent-detail-section">
                 <AgentLlmConfig agent={agent} />
                 {#if agent.routing_rules?.length > 0}
                     <AgentRouting agent={agent} />
                 {/if}
             </div>
+            <div class="agent-detail-section">
+                <AgentUtility bind:this={agentUtilityCmp} agent={agent} />
+            </div>
         </Col>
         <Col class="section-min-width" style="flex: 65%;">
             <div class="agent-detail-section">
@@ -165,7 +177,7 @@
         </Col>
     </Row>
 
-    {#if !!agent?.editable}
+    {#if !!AgentExtensions.editable(agent)}
         <Row>
             <div class="hstack gap-2 my-4">
                 <Button class="btn btn-soft-primary" on:click={() => updateCurrentAgent()}>{$_('Save Agent')}</Button>
diff --git a/src/routes/page/agent/[agentId]/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-llm-config.svelte
index 26db5c79..9dbb3dab 100644
--- a/src/routes/page/agent/[agentId]/agent-llm-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-llm-config.svelte
@@ -1,8 +1,8 @@
 <script>
-    import { Button, Card, CardBody, CardHeader, Col, Input } from '@sveltestrap/sveltestrap';
-    import { getLlmProviders, getLlmProviderModels } from '$lib/services/llm-provider-service';
     import { onMount } from 'svelte';
-
+    import { Card, CardBody, Input } from '@sveltestrap/sveltestrap';
+    import { getLlmProviders, getLlmProviderModels } from '$lib/services/llm-provider-service';
+    
     /** @type {string[]} */
     let providers = [];
 
@@ -110,7 +110,14 @@
                 Maximum recursive depth
             </label>
             <div class="col-md-9">
-                <Input type="number" min={lowerLimit} max={upperLimit} style="text-align: center;" value={config.max_recursion_depth} on:change={e => changeMaxRecursiveDepth(e)} />              
+                <Input
+                    style="text-align: center;"
+                    type="number"
+                    min={lowerLimit}
+                    max={upperLimit}
+                    value={config.max_recursion_depth}
+                    on:change={e => changeMaxRecursiveDepth(e)}
+                />              
             </div>
         </div>
     </CardBody>
diff --git a/src/routes/page/agent/[agentId]/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-overview.svelte
index e4a5e5c9..08f2eb53 100644
--- a/src/routes/page/agent/[agentId]/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-overview.svelte
@@ -4,7 +4,10 @@
     import InPlaceEdit from '$lib/common/InPlaceEdit.svelte'
     import { format } from '$lib/helpers/datetime';
 	import { AgentType } from '$lib/helpers/enums';
-	import { getAgentUtilities } from '$lib/services/agent-service';
+	import { AgentExtensions } from '$lib/helpers/utils/agent';
+
+    const profileLimit = 10;
+
 
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
@@ -12,21 +15,7 @@
     /** @type {string[]} */
     export let profiles = [];
 
-    /** @type {string[]} */
-    export let utilities = [];
-
-    /** @type {string[]} */
-    let utilityOptions = [];
-
-    const profileLimit = 10;
-    const utilityLimit = 10;
-
-    onMount(() => {
-        getAgentUtilities().then(data => {
-            const list = data?.filter(x => x?.trim()?.length > 0) || [];
-            utilityOptions = ["", ...list];
-        });
-    });
+    onMount(() => {});
 
     function addProfile() {
         if (!!!agent) return;
@@ -43,21 +32,6 @@
         agent.profiles = profiles;
     }
 
-    function addUtility() {
-        if (!!!agent) return;
-
-        utilities = [...utilities, ''];
-        agent.utilities = utilities;
-    }
-
-    /**
-	 * @param {number} index
-	 */
-    function removeUtility(index) {
-        utilities = utilities.filter((x, idx) => idx !== index);
-        agent.utilities = utilities;
-    }
-
     function chatWithAgent() {
         if (!!!agent?.id) return;
         
@@ -75,7 +49,7 @@
                     height="50"
                     class="mx-auto d-block"
                 />
-                {#if !!agent.chatable}
+                {#if !!AgentExtensions.chatable(agent)}
                     <Button
                         class="btn btn-sm btn-soft-info agent-chat"
                         on:click={() => chatWithAgent()}
@@ -86,7 +60,7 @@
                 {/if}
             </div>
             <h5 class="mt-1 mb-1 div-center"><InPlaceEdit bind:value={agent.name} /></h5>
-            <p class="text-muted mb-0">Updated at {format(agent.updated_datetime, 'time')}</p>
+            <p class="text-muted mb-0">{`Updated at ${format(agent.updated_datetime, 'time')}`}</p>
         </div>
     </CardHeader>
     <CardBody>
@@ -165,42 +139,7 @@
                             </div>
                         </td>
                     </tr>
-                    <tr>
-                        <th class="agent-prop-key">Utilities</th>
-                        <td>
-                            <div class="agent-prop-list-container">
-                                {#each utilities as utility, index}
-                                <div class="edit-wrapper">
-                                    <Input type="select" class="edit-text-box" bind:value={utility}>
-                                        {#each utilityOptions as option}
-                                            <option selected={utility === option}>{option}</option>
-                                        {/each}
-                                    </Input>
-                                    <div class="delete-icon">
-                                        <i
-                                            class="bx bxs-no-entry"
-                                            role="link"
-                                            tabindex="0"
-                                            on:keydown={() => {}}
-                                            on:click={() => removeUtility(index)}
-                                        />
-                                    </div>
-                                </div>
-                                {/each}
-                                {#if utilities?.length < utilityLimit}
-                                <div class="list-add">
-                                    <i
-                                        class="bx bx bx-list-plus"
-                                        role="link"
-                                        tabindex="0"
-                                        on:keydown={() => {}}
-                                        on:click={() => addUtility()}
-                                    />
-                                </div>
-                                {/if}
-                            </div>
-                        </td>
-                    </tr>
+                    
                     <tr>
                         <th class="agent-prop-key">Status</th>
                         <td>							
diff --git a/src/routes/page/agent/[agentId]/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-utility.svelte
new file mode 100644
index 00000000..20c7f3c1
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-utility.svelte
@@ -0,0 +1,413 @@
+<script>
+    import { onMount } from 'svelte';
+    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
+    import { getAgentUtilityOptions } from '$lib/services/agent-service';
+
+    const limit = 5;
+    const maxLength = 30;
+
+    /** @type {import('$agentTypes').AgentModel} */
+    export let agent;
+
+    export const fetchUtilities = () => {
+        const candidates = innerUtilities?.filter(x => !!x.name)?.map(x => {
+            /** @type {import('$agentTypes').UtilityBase[]} */
+            const functions = [];
+            /** @type {import('$agentTypes').UtilityBase[]} */
+            const templates = [];
+
+            const uniqueFns = new Set();
+            const uniqueTps = new Set();
+            const fns = x.functions.filter(f => !!f.name);
+            const tps = x.templates.filter(t => !!t.name);
+
+            fns.forEach(f => {
+                if (!uniqueFns.has(f.name)) {
+                    functions.push({ ...f });
+                    uniqueFns.add(f.name);
+                }
+            });
+
+            tps.forEach(t => {
+                if (!uniqueTps.has(t.name)) {
+                    templates.push({ ...t });
+                    uniqueTps.add(t.name);
+                }
+            });
+
+            return {
+                name: x.name,
+                disabled: x.disabled,
+                functions: functions,
+                templates: templates
+            };
+        });
+
+        refresh(candidates);
+        return candidates;
+    }
+
+    /** @type {any} */
+    let utilityMapper = {};
+
+    /** @type {string[]} */
+    let utilityOptions = [];
+
+    /** @type {import('$agentTypes').AgentUtility[]} */
+    let innerUtilities = [];
+
+    onMount(async () =>{
+        getAgentUtilityOptions().then(data => {
+            const list = data || [];
+            list.forEach(item => {
+                const fns = item.functions.map(f => f.name);
+                const tps = item.templates.map(t => t.name);
+
+                if (!utilityMapper[item.name]) {
+                    utilityMapper[item.name] = {
+                        functions: ["", ...fns],
+                        templates: ["", ...tps]
+                    };
+                } else {
+                    const prevFns = utilityMapper[item.name].functions;
+                    const prevTps = utilityMapper[item.name].templates;
+                    utilityMapper[item.name].functions = [...prevFns, fns];
+                    utilityMapper[item.name].templates = [...prevTps, tps];
+                }
+            });
+            const names = list.map(x => x.name) || [];
+            utilityOptions = ["", ...names];
+        });
+        init();
+    });
+
+    function init() {
+        refresh(agent.utilities);
+    }
+
+    /**
+	 * @param {any} e
+	 * @param {number} idx
+	 */
+    function changeUtility(e, idx) {
+        const found = innerUtilities.find((_, index) => index === idx);
+        if (!found) return;
+        
+        const name = e.target.value;
+        found.name = name;
+        found.functions = [
+            // @ts-ignore
+            ...utilityMapper[name].functions?.filter(x => !!x)?.map(x => ({ name: x })) || []
+        ];
+        found.templates = [
+            // @ts-ignore
+            ...utilityMapper[name].templates?.filter(x => !!x)?.map(x => ({ name: x })) || []
+        ];
+        refresh(innerUtilities);
+    }
+
+    function addUtility() {
+        innerUtilities = [
+            ...innerUtilities,
+            {
+                name: '',
+                disabled: false,
+                functions: [],
+                templates: []
+            }
+        ];
+    }
+
+    /** @param {number} idx */
+    function deleteUtility(idx) {
+        innerUtilities = innerUtilities.filter((_, index) => index !== idx);
+    }
+
+    /**
+	 * @param {number} uid
+	 * @param {string} type
+	 */
+    function addUtilityContent(uid, type) {
+        const found = innerUtilities.find((_, index) => index === uid);
+        if (!found || found.disabled) return;
+
+        if (type === 'function') {
+            found.functions.push({ name: '' });
+        } else if (type === 'template') {
+            found.templates.push({ name: '' });
+        }
+
+        refresh(innerUtilities);
+    }
+
+    /**
+	 * @param {number} uid
+	 * @param {number} id
+     * @param {string} type
+	 */
+    function deleteUtilityContent(uid, id, type) {
+        const found = innerUtilities.find((_, index) => index === uid);
+        if (!found || found.disabled) return;
+
+        if (type === 'function') {
+            const fns = found.functions?.filter((_, index) => index !== id) || [];
+            found.functions = fns;
+        } else if (type === 'template') {
+            const tps = found.templates?.filter((_, index) => index !== id) || [];
+            found.templates = tps;
+        }
+        
+        refresh(innerUtilities);
+    }
+
+    
+    /**
+     * @param {any} e
+	 * @param {number} uid
+     * @param {number} idx
+     * @param {string} type
+	 */
+    function selectContent(e, uid, idx, type) {
+        const found = innerUtilities.find((_, index) => index === uid);
+        if (!found) return;
+
+        if (type === 'function') {
+            const fn = found.functions?.find((_, index) => index === idx);
+            if (fn) {
+                fn.name = e.target.value;
+            }
+        } else if (type === 'template') {
+            const tp = found.templates?.find((_, index) => index === idx);
+            if (tp) {
+                tp.name = e.target.value;
+            }
+        }
+        refresh(innerUtilities);
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} uid
+	 */
+    function toggleUtility(e, uid) {
+        const found = innerUtilities.find((_, index) => index === uid);
+        if (!found) return;
+
+        found.disabled = !e.target.checked;
+        refresh(innerUtilities);
+    }
+
+
+    /** @param {import('$agentTypes').AgentUtility[]} list */
+    function refresh(list) {
+        innerUtilities = list?.map(x => {
+            return {
+                name: x.name,
+                disabled: x.disabled,
+                functions: x.functions.map(f => ({ ...f })),
+                templates: x.templates.map(t => ({ ...t }))
+            }
+        }) || [];
+    }
+
+
+    /** @param {any} e */
+    function toggleMergeUtility(e) {
+        const checked = e.target.checked;
+        if (!!agent) {
+            agent.merge_utility = checked;
+        }
+    }
+</script>
+
+<Card>
+    <CardBody>
+        <div class="text-center">
+            <h5 class="mt-1 mb-3">Utilities</h5>
+        </div>
+
+        <div class="agent-utility-container">
+            <div class="merge-utility">
+                <Input
+					type="checkbox"
+					checked={agent?.merge_utility || false}
+					on:change={e => toggleMergeUtility(e)}
+				/>
+                <div class="fw-bold">
+                    Merge utilities
+                </div>
+                <div
+                    class="line-align-center"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    title="Merge with entry agent utilities"
+                >
+                    <i class="bx bx-info-circle" />
+                </div>
+            </div>
+
+            {#each innerUtilities as utility, uid (uid)}
+                <div class="utility-wrapper">
+                    <div class="utility-row utility-row-primary">
+                        <div class="utility-label fw-bold">
+                            <div class="line-align-center">{`Utility #${uid + 1}`}</div>
+                            <div class="utility-tooltip">
+                                <div class="line-align-center">
+                                    <Input
+                                        type="checkbox"
+                                        checked={!utility.disabled}
+                                        on:change={e => toggleUtility(e, uid)}
+                                    />
+                                </div>
+                                <div
+                                    class="line-align-center"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-placement="top"
+                                    title="Uncheck to disable utility"
+                                >
+                                    <i class="bx bx-info-circle" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="utility-value">
+                            <div class="utility-input line-align-center">
+                                <Input
+                                    type="select"
+                                    value={utility.name}
+                                    disabled={utility.disabled}
+                                    on:change={e => changeUtility(e, uid)}
+                                >
+                                    {#each utilityOptions as option}
+                                        <option value={option} selected={option == utility.name}>{option}</option>
+                                    {/each}
+                                </Input>
+                            </div>
+                            <div class="utility-delete line-align-center">
+                                <i
+                                    class="bx bxs-no-entry text-danger clickable"
+                                    role="link"
+                                    tabindex="0"
+                                    on:keydown={() => {}}
+                                    on:click={() => deleteUtility(uid)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="utility-row utility-row-secondary">
+                        <div class="utility-content">
+                            {#each utility.functions as fn, fid (fid)}
+                                <div class="utility-list-item">
+                                    <div class="utility-label line-align-center">
+                                        {fid === 0 ? 'Functions' : ''}
+                                    </div>
+                                    <div class="utility-value">
+                                        <div class="utility-input line-align-center">
+                                            <Input
+                                                type="select"
+                                                value={fn.name}
+                                                disabled={utility.disabled}
+                                                on:change={e => selectContent(e, uid, fid, 'function')}
+                                            >
+                                                {#each (utilityMapper[utility.name]?.functions || []) as option}
+                                                    <option value={option} selected={option == fn.name}>{option}</option>
+                                                {/each}
+                                            </Input>
+                                        </div>
+                                        <div class="utility-delete line-align-center">
+                                            <i
+                                                class="bx bxs-no-entry text-danger clickable"
+                                                role="link"
+                                                tabindex="0"
+                                                on:keydown={() => {}}
+                                                on:click={() => deleteUtilityContent(uid, fid, 'function')}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            {/each}
+
+                            {#if utility.functions?.length < limit}
+                                <div class="utility-list-item">
+                                    <div class="utility-label">
+                                        {utility.functions.length === 0 ? 'Functions' : ''}
+                                    </div>
+                                    <div class="utility-value">
+                                        <i
+                                            class="bx bx-list-plus add-list clickable"
+                                            role="link"
+                                            tabindex="0"
+                                            on:keydown={() => {}}
+                                            on:click={() => addUtilityContent(uid, 'function')}
+                                        />
+                                    </div>
+                                </div>
+                            {/if}
+                        </div>
+
+                        <div class="utility-content">
+                            {#each utility.templates as tp, tid (tid)}
+                                <div class="utility-list-item">
+                                    <div class="utility-label line-align-center">
+                                        {tid === 0 ? 'Templates' : ''}
+                                    </div>
+                                    <div class="utility-value">
+                                        <div class="utility-input line-align-center">
+                                            <Input
+                                                type="select"
+                                                value={tp.name}
+                                                disabled={utility.disabled}
+                                                on:change={e => selectContent(e, uid, tid, 'template')}
+                                            >
+                                                {#each (utilityMapper[utility.name]?.templates || []) as option}
+                                                    <option value={option} selected={option == tp.name}>{option}</option>
+                                                {/each}
+                                            </Input>
+                                        </div>
+                                        <div class="utility-delete line-align-center">
+                                            <i
+                                                class="bx bxs-no-entry text-danger clickable"
+                                                role="link"
+                                                tabindex="0"
+                                                on:keydown={() => {}}
+                                                on:click={() => deleteUtilityContent(uid, tid, 'template')}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            {/each}
+
+                            {#if utility.templates?.length < limit}
+                                <div class="utility-list-item">
+                                    <div class="utility-label">
+                                        {utility.templates.length === 0 ? 'Templates' : ''}
+                                    </div>
+                                    <div class="utility-value">
+                                        <i
+                                            class="bx bx-list-plus add-list clickable"
+                                            role="link"
+                                            tabindex="0"
+                                            on:keydown={() => {}}
+                                            on:click={() => addUtilityContent(uid, 'template')}
+                                        />
+                                    </div>
+                                </div>
+                            {/if}
+                        </div>
+                    </div>
+                </div>
+            {/each}
+
+            {#if innerUtilities.length < limit}
+                <div class="add-utility">
+                    <Button color="primary" on:click={() => addUtility()}>
+                        <span>
+                            <i class="bx bx-plus" />
+                            <span>Add utility</span>
+                        </span>
+                    </Button>
+                </div>
+            {/if}
+        </div>
+    </CardBody>
+</Card>
\ No newline at end of file
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
index 831639e9..0c4db673 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -4,6 +4,7 @@
   import { format } from '$lib/helpers/datetime';
   import { _ } from 'svelte-i18n';
 	import { LEARNER_ID } from "$lib/helpers/constants";
+	import { AgentExtensions } from "$lib/helpers/utils/agent";
 
   /** @type {import('$agentTypes').AgentModel[]} */
   export let agents;
@@ -78,7 +79,7 @@
             </Link>
           </li>
           <li class="list-inline-item me-1">
-            <Link href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank" disabled={!agent.chatable}>
+            <Link href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank" disabled={!AgentExtensions.chatable(agent)}>
               <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 344ad98b..0d29eea1 100644
--- a/src/routes/page/roles/+page.svelte
+++ b/src/routes/page/roles/+page.svelte
@@ -121,7 +121,7 @@
 					isComplete = false;
 				}, duration);
 			} else {
-				throw "error when saving user.";
+				throw "error when saving role.";
 			}
 		}).catch(() => {
 			isLoading = false;