diff --git a/src/lib/common/Breadcrumb.svelte b/src/lib/common/Breadcrumb.svelte
index bb590189..438bcc74 100644
--- a/src/lib/common/Breadcrumb.svelte
+++ b/src/lib/common/Breadcrumb.svelte
@@ -13,7 +13,7 @@
 			<div class="page-title-right">
 				<ol class="breadcrumb m-0">
 					<BreadcrumbItem>
-						<Link href="#">{title}</Link>
+						<Link disabled>{title}</Link>
 					</BreadcrumbItem>
 					<BreadcrumbItem active>
 						{pagetitle}
diff --git a/src/lib/common/NotificationDropdown.svelte b/src/lib/common/NotificationDropdown.svelte
index 2af6bcc9..b8bd8639 100644
--- a/src/lib/common/NotificationDropdown.svelte
+++ b/src/lib/common/NotificationDropdown.svelte
@@ -37,12 +37,12 @@
 					<h6 class="m-0">{$_('Notifications')}</h6>
 				</div>
 				<div class="col-auto">
-					<Link href="#!" class="small">{$_('View All')}</Link>
+					<Link class="small" disabled>{$_('View All')}</Link>
 				</div>
 			</div>
 		</div>
 			<div style="max-height: 230px;" id="notification">
-			<Link href="javascript: void(0);" class="text-reset notification-item">
+				<Link href="javascript: void(0);" class="text-reset notification-item" disabled>
 					<div class="d-flex">
 						<div class="avatar-xs me-3">
 							<span class="avatar-title bg-primary rounded-circle font-size-16">
diff --git a/src/lib/common/ProfileDropdown.svelte b/src/lib/common/ProfileDropdown.svelte
index 0ae88a33..3dd7953c 100644
--- a/src/lib/common/ProfileDropdown.svelte
+++ b/src/lib/common/ProfileDropdown.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '@sveltestrap/sveltestrap';
+	import { resetLocalStorage } from '$lib/helpers/store';
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
 	import { _ } from 'svelte-i18n';
@@ -10,7 +11,7 @@
 	 export let user;
 	function logout() {
 		if (browser){	
-			localStorage.removeItem('user');
+			resetLocalStorage(true);
 		}
 		goto('login');
 	};
@@ -29,14 +30,14 @@
 	</DropdownToggle>
 	<DropdownMenu end>
 		<!-- item-->
-		<DropdownItem href="page/user/me"
-			><i class="bx bx-user font-size-16 align-middle me-1" />
+		<DropdownItem href="page/user/me">
+			<i class="bx bx-user font-size-16 align-middle me-1" />
 			<span>{$_('Profile')}</span>
 		</DropdownItem>
-		<DropdownItem href="#"
-			><span class="badge bg-success float-end">11</span><i
-				class="bx bx-wrench font-size-16 align-middle me-1"
-			/> <span key="t-settings">{$_('Settings')}</span>
+		<DropdownItem href="#" disabled>
+			<span class="badge bg-success float-end">11</span>
+			<i class="bx bx-wrench font-size-16 align-middle me-1"/>
+			<span key="t-settings">{$_('Settings')}</span>
 		</DropdownItem>
 		<DropdownItem divider />
 		<DropdownItem href="#">
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 2ff50761..5cf8a7a1 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -55,7 +55,8 @@ axios.interceptors.response.use(
 /** @param {import('axios').InternalAxiosRequestConfig<any>} config */
 function skipLoader(config) {
     const postRegexes = [
-        new RegExp('http(s*)://(.*?)/conversation/(.*?)/(.*?)', 'g')
+        new RegExp('http(s*)://(.*?)/conversation/(.*?)/(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/agent', 'g')
     ];
 
     const getRegexes = [
diff --git a/src/lib/helpers/store.js b/src/lib/helpers/store.js
index 5ab0c4cb..61808697 100644
--- a/src/lib/helpers/store.js
+++ b/src/lib/helpers/store.js
@@ -152,4 +152,17 @@ const createConversationUserAttachmentStore = () => {
     }
 };
 
-export const conversationUserAttachmentStore = createConversationUserAttachmentStore();
\ No newline at end of file
+export const conversationUserAttachmentStore = createConversationUserAttachmentStore();
+
+
+export function resetLocalStorage(resetUser = false) {
+    conversationUserStateStore.reset();
+    conversationSearchOptionStore.reset();
+    conversationUserMessageStore.reset();
+    conversationUserAttachmentStore.reset();
+    localStorage.removeItem('conversation');
+
+    if (resetUser) {
+        localStorage.removeItem('user');
+    }
+}
\ No newline at end of file
diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
index ef584ac0..05fd9ac9 100644
--- a/src/lib/helpers/types.js
+++ b/src/lib/helpers/types.js
@@ -129,6 +129,7 @@
  * @property {Object[]} responses
  * @property {RoutingRule[]} routing_rules
  * @property {AgentWelcomeInfo} welcome_info - Welcome information.
+ * @property {boolean} editable
  */
 
 /**
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index dd1cc702..5d5d52b8 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -48,6 +48,15 @@ export async function saveAgent(agent) {
     await axios.put(url, agent);
 }
 
+/**
+ * Delete agent detail
+ * @param {string} agentId
+ */
+export async function deleteAgent(agentId) {
+    let url = endpoints.agentDetailUrl.replace("{id}", agentId);
+    await axios.delete(url);
+}
+
 /**
  * Refresh agent data
  */
diff --git a/src/routes/(authentication)/login/+page.svelte b/src/routes/(authentication)/login/+page.svelte
index ae686027..c268bcf8 100644
--- a/src/routes/(authentication)/login/+page.svelte
+++ b/src/routes/(authentication)/login/+page.svelte
@@ -31,12 +31,7 @@
 		PUBLIC_AUTH_ENABLE_FIND_PWD,
 	} from '$env/static/public';
 	import { onMount } from 'svelte';
-	import {
-		conversationSearchOptionStore,
-		conversationUserAttachmentStore,
-		conversationUserMessageStore,
-		conversationUserStateStore
-	} from '$lib/helpers/store';
+	import { resetLocalStorage } from '$lib/helpers/store';
 
 	let username = PUBLIC_ADMIN_USERNAME;
 	let password = PUBLIC_ADMIN_PASSWORD;
@@ -71,7 +66,7 @@
 			status = 'success';
 			const redirectUrl = $page.url.searchParams.get('redirect');
 			isSubmitting = false;
-			resetStorage();
+			resetLocalStorage();
 			if (redirectUrl) {
 				window.location.href = decodeURIComponent(redirectUrl);
 			} else {
@@ -105,13 +100,6 @@
 			icon.className = 'mdi mdi-eye-outline';
 		}
 	}
-
-	function resetStorage() {
-		conversationUserStateStore.reset();
-		conversationSearchOptionStore.reset();
-		conversationUserMessageStore.reset();
-		conversationUserAttachmentStore.reset();
-	}
 </script>
 
 <Headtitle title="Login" />
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index c9126041..4983f274 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -127,6 +127,7 @@
 	let loadTextEditor = false;
 	let loadFileEditor = false;
 	let autoScrollLog = false;
+	let disableAction = false;
 
 	$: {
 		const editor = lastBotMsg?.rich_content?.editor || '';
@@ -135,6 +136,10 @@
 		loadEditor = !isSendingMsg && !isThinking && (loadTextEditor || loadFileEditor);
 	}
 
+	$: {
+		disableAction = currentUser?.role !== UserRole.Admin && currentUser?.id !== conversationUser?.id;
+	}
+
 	setContext('chat-window-context', {
 		autoScrollToBottom: autoScrollToBottom
 	});
@@ -914,12 +919,26 @@
 														</DropdownToggle>
 														<DropdownMenu>
 															{#if !isLoadStateLog}
-															<DropdownItem on:click={() => toggleStateLog()}>View States</DropdownItem>
+															<DropdownItem
+																on:click={() => toggleStateLog()}
+															>
+																View States
+															</DropdownItem>
 															{/if}
 															{#if !isOpenUserAddStateModal}
-															<DropdownItem on:click={() => toggleUserAddStateModal()}>Add States</DropdownItem>
+															<DropdownItem
+																disabled={disableAction}
+																on:click={() => toggleUserAddStateModal()}
+															>
+																Add States
+															</DropdownItem>
 															{/if}
-															<DropdownItem on:click={() => clearUserAddStates()}>Clear States</DropdownItem>
+															<DropdownItem
+																disabled={disableAction}
+																on:click={() => clearUserAddStates()}
+															>
+																Clear States
+															</DropdownItem>
 														</DropdownMenu>
 													</Dropdown>
 												</li>
@@ -932,6 +951,7 @@
 									<li class="list-inline-item d-md-inline-block">
 										<button
 											class="btn btn-primary btn-rounded btn-sm chat-send waves-effect waves-light"
+											disabled={disableAction}
 											on:click={() => endChat()}
 										>
 											<span class="d-none d-sm-inline-block me-2" >End Conversation</span> <i class="mdi mdi-window-close"></i>
@@ -986,7 +1006,7 @@
 										</div>
 											{#if !isLite}
 												<Dropdown>
-													<DropdownToggle class="dropdown-toggle" tag="span" disabled={isSendingMsg || isThinking}>
+													<DropdownToggle class="dropdown-toggle" tag="span" disabled={isSendingMsg || isThinking || disableAction}>
 														<i class="bx bx-dots-vertical-rounded" />
 													</DropdownToggle>
 													<DropdownMenu class="dropdown-menu-end">
@@ -1055,7 +1075,7 @@
 								<button
 									type="submit"
 									class="btn btn-primary btn-rounded waves-effect waves-light"
-									disabled={isSendingMsg || isThinking}
+									disabled={isSendingMsg || isThinking || disableAction}
 									on:click={startListen}
 								>
 									<i class="mdi mdi-{microphoneIcon} md-36" />
@@ -1066,13 +1086,13 @@
 									<ChatTextArea
 										className={`chat-input ${loadFileEditor ? 'chat-uploader' : ''}`}
 										bind:text={text}
-										disabled={isSendingMsg || isThinking}
+										disabled={isSendingMsg || isThinking || disableAction}
 										editor={lastBotMsg?.rich_content?.editor || ''}
 										onKeyDown={e => onSendMessage(e)}
 									/>
 									{#if loadFileEditor}
 										<div class="chat-input-links">
-											<ChatImageUploader />
+											<ChatImageUploader disabled={disableAction} />
 										</div>
 									{/if}
 								</div>
@@ -1081,7 +1101,7 @@
 								<button
 									type="submit"
 									class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
-									disabled={!!!_.trim(text) || isSendingMsg || isThinking}
+									disabled={!!!_.trim(text) || isSendingMsg || isThinking || disableAction}
 									on:click={() => sentTextMessage()}
 								><span class="d-none d-md-inline-block me-2">Send</span>
 									<i class="mdi mdi-send" />
diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte
index f1b08b83..a461b353 100644
--- a/src/routes/page/agent/+page.svelte
+++ b/src/routes/page/agent/+page.svelte
@@ -6,9 +6,13 @@
   	import { createAgent, getAgents } from '$lib/services/agent-service.js';
   	import { onMount } from 'svelte';
 	import PlainPagination from '$lib/common/PlainPagination.svelte';
+	import { UserRole } from '$lib/helpers/enums';
 	import { _ } from 'svelte-i18n'
 	import { goto } from '$app/navigation';
-
+	import { myInfo } from '$lib/services/auth-service';
+	import Swal from 'sweetalert2/dist/sweetalert2.js';
+    import "sweetalert2/src/sweetalert2.scss";
+	
   	const firstPage = 1;
 	const pageSize = 12;
 
@@ -26,8 +30,12 @@
 	/** @type {import('$types').Pagination} */
 	let pager = filter.pager;
 
+	/** @type {import('$types').UserModel} */
+	let user;
+
 	onMount(async () => {
 		await getPagedAgents();
+		user = await myInfo();
 	});
 
   	async function getPagedAgents() {
@@ -35,7 +43,24 @@
 		refresh();
 	}
 
-	async function createAndEditAgent() {
+	function createNewAgent() {
+		// @ts-ignore
+        Swal.fire({
+            title: 'Are you sure?',
+            text: "Are you sure you want to create a new agent?",
+            icon: 'warning',
+            showCancelButton: true,
+			cancelButtonText: 'No',
+            confirmButtonText: 'Yes'
+        // @ts-ignore
+        }).then(async (result) => {
+            if (result.value) {
+                await handleCreateNewAgent();
+            }
+        });
+	}
+
+	async function handleCreateNewAgent() {
 		const newAgent = {
 			name: 'New Agent',
 			description: 'New Agent Description',
@@ -87,9 +112,12 @@
 
 <HeadTitle title="{$_('List')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('List')}" />
-<Button class="mb-4" color="primary" on:click={() => createAndEditAgent()}>
+
+{#if !!user && user.role == UserRole.Admin}
+<Button class="mb-4" color="primary" on:click={() => createNewAgent()}>
 	<i class="bx bx-copy" /> {$_('New Agent')}
 </Button>
+{/if}
 
 <Row>
 	<CardAgent agents={agents.items} />
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index d3ad0bc3..37d2057b 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -13,10 +13,12 @@
     import AgentFunction from './agent-function.svelte';
     import AgentLlmConfig from './agent-llm-config.svelte';
     import { page } from '$app/stores';
-    import { getAgent, saveAgent } from '$lib/services/agent-service.js';
+    import { deleteAgent, getAgent, saveAgent } from '$lib/services/agent-service.js';
     import { onMount } from 'svelte';
-    const params = $page.params;
     import { _ } from 'svelte-i18n'  
+    import Swal from 'sweetalert2/dist/sweetalert2.js';
+    import "sweetalert2/src/sweetalert2.scss";
+	import { goto } from '$app/navigation';
 	
 	
     /** @type {import('$types').AgentModel} */
@@ -28,13 +30,32 @@
     let isLoading = false;
     let isComplete = false;
     let isError = false;
+
     const duration = 3000;
+    const params = $page.params;
 
     onMount(async () => {
         agent = await getAgent(params.agentId);
     });
 
-    async function handleAgentUpdate() {
+    function updateCurrentAgent() {
+        // @ts-ignore
+        Swal.fire({
+            title: 'Are you sure?',
+            text: "Are you sure you want to update these changes?",
+            icon: 'warning',
+            showCancelButton: true,
+			cancelButtonText: 'No',
+            confirmButtonText: 'Yes'
+        // @ts-ignore
+        }).then(async (result) => {
+            if (result.value) {
+                handleAgentUpdate();
+            }
+        });
+    }
+
+    function handleAgentUpdate() {
         fetchJsonContent();
         isLoading = true;
         saveAgent(agent).then(res => {
@@ -64,14 +85,37 @@
         agent.templates = textContent?.templates?.length > 0 ? textContent.templates :
                             (jsonContent?.templates?.length > 0 ? jsonContent?.templates : []);
     }
+
+    function deleteCurrentAgent() {
+        // @ts-ignore
+        Swal.fire({
+            title: 'Are you sure?',
+            text: "Are you sure you want to delete this agent?",
+            icon: 'warning',
+            showCancelButton: true,
+			cancelButtonText: 'No',
+            confirmButtonText: 'Yes'
+        // @ts-ignore
+        }).then(async (result) => {
+            if (result.value) {
+                handleAgentDelete();
+            }
+        });
+    }
+
+    function handleAgentDelete() {
+        deleteAgent(agent?.id).then(res => {
+            goto(`page/agent`);
+        });
+    }
 </script>
 
 <HeadTitle title="{$_('Agent Overview')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Agent Overview')}" />
 <LoadingToComplete isLoading={isLoading} isComplete={isComplete} isError={isError} />
 
+{#if agent}
 <Row>
-    {#if agent}
     <Col style="flex: 30%;">
         <AgentOverview agent={agent} />
         <AgentLlmConfig agent={agent} />
@@ -85,10 +129,13 @@
     <Col style="flex: 30%;">
         <AgentFunction bind:this={agentFunctionCmp} agent={agent} />
     </Col>    
-    {/if}
-</Row>
-<Row>
-    <div class="hstack gap-2 my-4">
-        <Button class="btn btn-soft-primary" on:click={handleAgentUpdate}>{$_('Save Agent')}</Button>
-    </div>
 </Row>
+    {#if !!agent?.editable}
+    <Row>
+        <div class="hstack gap-2 my-4">
+            <Button class="btn btn-soft-primary" on:click={updateCurrentAgent}>{$_('Save Agent')}</Button>
+            <Button class="btn btn-danger" on:click={deleteCurrentAgent}>{$_('Delete Agent')}</Button>
+        </div>
+    </Row>
+    {/if}
+{/if}
\ 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 dde36196..794c7b3b 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -66,20 +66,20 @@
             {format(agent.updated_datetime, 'short-date')}
           </li>
           <li class="list-inline-item me-1">
-            <a href= "page/agent/{agent.id}/build" class="btn btn-primary btn-sm" target="_blank">
+            <Link href="page/agent/{agent.id}/build" class="btn btn-primary btn-sm" target="_blank" disabled>
               <i class="bx bx-wrench" /> {$_('Build')}
-            </a>
+            </Link>
           </li>
           {#if agent.is_public }      
           <li class="list-inline-item me-1">
-            <a href= "page/agent/{agent.id}/train" class="btn btn-primary btn-sm" target="_blank">
+            <Link href="page/agent/{agent.id}/train" class="btn btn-primary btn-sm" target="_blank" disabled>
               <i class="bx bx-book-open" /> {$_('Train')}
-            </a>
+            </Link>
           </li>
           <li class="list-inline-item me-1">
-            <a 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">
               <i class="bx bx-chat" /> {$_('Test')}
-            </a>
+            </Link>
           </li>
           {/if}
         </ul>
diff --git a/src/routes/page/conversation/[conversationId]/+page.svelte b/src/routes/page/conversation/[conversationId]/+page.svelte
index 380edb70..036a98e1 100644
--- a/src/routes/page/conversation/[conversationId]/+page.svelte
+++ b/src/routes/page/conversation/[conversationId]/+page.svelte
@@ -41,7 +41,7 @@
 
 </script>
 
-<HeadTitle title={conversation?.title} />
+<HeadTitle title={conversation?.title || 'Not found'} />
 <Breadcrumb title="{$_('Conversation')}" pagetitle="{$_('Conversation Detail')}" />
 
 {#if conversation}
@@ -54,9 +54,9 @@
         <Dialog conversation={conversation} />        
     </Col>
 </Row>
-{/if}
 <Row>
     <div class="mb-4">
         <Button class="btn btn-danger btn-hover rounded" on:click={() => handleConversationDeletion()}><i class="mdi mdi-delete"></i>{$_('Delete Conversation')}</Button>
     </div>
 </Row>
+{/if}