diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 2637614c..34b06f1f 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -94,8 +94,8 @@
  * @property {string} content - Task detail.
  * @property {boolean} enabled
  * @property {string} status
- * @property {Date} created_datetime
- * @property {Date} updated_datetime
+ * @property {Date} created_time
+ * @property {Date} updated_time
  * @property {string} agent_id - Description.
  * @property {string} agent_name - Task detail.
  * @property {string} [direct_agent_id] - Run task directly in this agent.
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 787690c4..170df44e 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -41,6 +41,7 @@ export const endpoints = {
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,
     agentTaskDetailUrl: `${host}/agent/{agentId}/task/{taskId}`,
+    agentTaskUpdateUrl: `${host}/agent/{agentId}/task/{taskId}`,
 
     // agent instruct
     instructCompletionUrl: `${host}/instruct/{agentId}`,
diff --git a/src/lib/services/task-service.js b/src/lib/services/task-service.js
index 039a3243..fac295ec 100644
--- a/src/lib/services/task-service.js
+++ b/src/lib/services/task-service.js
@@ -27,4 +27,18 @@ export async function getAgentTaskDetail(agentId, taskid) {
     const url = replaceUrl(endpoints.agentTaskDetailUrl, { agentId: agentId, taskId: taskid });
     var response = await axios.get(url);
     return response.data;
+}
+
+/**
+ * Update agent task
+ * @param {string} agentId 
+ * @param {string} taskId 
+ * @param {import('$agentTypes').AgentTaskModel} task
+ */
+export async function updateAgentTask(agentId, taskId, task) {
+    const url = replaceUrl(endpoints.agentTaskUpdateUrl, { agentId: agentId, taskId: taskId });
+    var response = await axios.put(url, {
+        ...task
+    });
+    return response.data;
 }
\ No newline at end of file
diff --git a/src/routes/page/task/+page.svelte b/src/routes/page/task/+page.svelte
index 0e3ab9ce..0943cd95 100644
--- a/src/routes/page/task/+page.svelte
+++ b/src/routes/page/task/+page.svelte
@@ -1,6 +1,9 @@
 <script>
 	import { onMount } from 'svelte';
-	import { _ } from 'svelte-i18n'
+	import { _ } from 'svelte-i18n';
+	import Swal from 'sweetalert2';
+	import 'overlayscrollbars/overlayscrollbars.css';
+    import { OverlayScrollbars } from 'overlayscrollbars';
 	import {
 		Button,
 		Card,
@@ -17,15 +20,12 @@
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import TablePagination from '$lib/common/TablePagination.svelte';
-    import { getAgentTasks } from '$lib/services/task-service';
-	import { utcToLocal } from '$lib/helpers/datetime';
-	import Swal from 'sweetalert2';
-	import { replaceNewLine } from '$lib/helpers/http';
-	import 'overlayscrollbars/overlayscrollbars.css';
-    import { OverlayScrollbars } from 'overlayscrollbars';
+	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+    import { getAgentTasks, updateAgentTask } from '$lib/services/task-service';
 	import { AgentTaskStatus } from '$lib/helpers/enums';
+	import TaskItem from './task-item.svelte';
+	
 
-	let isError = false;
 	const duration = 3000;
 	const firstPage = 1;
 	const pageSize = 10;
@@ -42,6 +42,10 @@
 		}
 	};
 
+	let isLoading = false;
+	let isComplete = false;
+	let successText = "Update completed!";
+
     /** @type {import('$commonTypes').PagedItems<import('$agentTypes').AgentTaskModel>} */
     let tasks = { count: 0, items: [] };
 
@@ -123,42 +127,6 @@
 		refreshPager(tasks.count);
 	}
 
-	/** @param {string} taskId */
-    function handleTaskDeletion(taskId) {
-        /*deleteConversation(conversationId).then(async () => {
-			isLoading = false;
-			isComplete = true;
-			setTimeout(() => {
-				isComplete = false;
-			}, duration);
-			await reloadConversations();
-		}).catch(err => {
-			isLoading = false;
-			isComplete = false;
-			isError = true;
-			setTimeout(() => {
-				isError = false;
-			}, duration);
-		});*/
-    }
-
-	/** @param {string} taskId */
-	function openDeleteModal(taskId) {
-		// @ts-ignore
-		Swal.fire({
-            title: 'Are you sure?',
-            text: "You won't be able to revert this!",
-            icon: 'warning',
-			customClass: 'custom-modal',
-            showCancelButton: true,
-            confirmButtonText: 'Yes, delete it!'
-        }).then((result) => {
-            if (result.value) {
-				handleTaskDeletion(taskId);
-            }
-        });
-	}
-
 	/**
 	 * @param {any} e
 	 */
@@ -200,10 +168,99 @@
 			};
 		}
 	}
+
+	/** @param {any} e */
+	function onTaskSaved(e) {
+		const task = e.detail.task;
+		if (!task) return;
+
+		openSaveModal(task);
+	}
+
+	/** @param {import('$agentTypes').AgentTaskModel} task */
+	function openSaveModal(task) {
+		// @ts-ignore
+		Swal.fire({
+            title: 'Are you sure?',
+            text: "You can change it back.",
+            icon: 'warning',
+			customClass: 'custom-modal',
+            showCancelButton: true,
+            confirmButtonText: 'Yes, save it!'
+        }).then((result) => {
+            if (result.value) {
+				handleTaskSave(task);
+            }
+        });
+	}
+
+	/** @param {import('$agentTypes').AgentTaskModel} task */
+    function handleTaskSave(task) {
+        updateAgentTask(task.agent_id, task.id, task).then(async () => {
+			isLoading = false;
+			isComplete = true;
+			successText = "Update completed!";
+			setTimeout(() => {
+				isComplete = false;
+				successText = '';
+			}, duration);
+		}).catch(() => {
+			isLoading = false;
+			isComplete = false;
+			successText = '';
+		});
+    }
+
+	
+
+	/** @param {any} e */
+	function onTaskDeleted(e) {
+		const task = e.detail.task;
+		if (!task) return;
+
+		openDeleteModal(task.id);
+	}
+
+	/** @param {string} taskId */
+	function openDeleteModal(taskId) {
+		// @ts-ignore
+		Swal.fire({
+            title: 'Are you sure?',
+            text: "You won't be able to revert this!",
+            icon: 'warning',
+			customClass: 'custom-modal',
+            showCancelButton: true,
+            confirmButtonText: 'Yes, delete it!'
+        }).then((result) => {
+            if (result.value) {
+				handleTaskDeletion(taskId);
+            }
+        });
+	}
+
+	/** @param {string} taskId */
+    function handleTaskDeletion(taskId) {
+        /*deleteConversation(conversationId).then(async () => {
+			isLoading = false;
+			isComplete = true;
+			setTimeout(() => {
+				isComplete = false;
+			}, duration);
+			await reloadConversations();
+		}).catch(err => {
+			isLoading = false;
+			isComplete = false;
+			isError = true;
+			setTimeout(() => {
+				isError = false;
+			}, duration);
+		});*/
+    }
 </script>
 
 <HeadTitle title="{$_('Task List')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Task')}" />
+<LoadingToComplete isLoading={isLoading} isComplete={isComplete} />
 
 <Row>
 	<Col lg="12">
@@ -263,7 +320,7 @@
 								<th scope="col">{$_('Description')}</th>
 								<th scope="col">{$_('Agent')}</th>
 								<th scope="col">{$_('Details')}</th>
-								<th scope="col">{$_('Updated Date')}</th>
+								<th scope="col">{$_('Updated Time')}</th>
 								<th scope="col">{$_('Enabled')}</th>
 								<th scope="col">{$_('Status')}</th>
 								<th scope="col">{$_('Action')}</th>
@@ -271,31 +328,11 @@
 						</thead>
 						<tbody>
 							{#each tasks.items as task}
-							<tr>
-								<td scope="row">
-									<a href="page/conversation/{task.id}">{task.name}</a>
-								</td>
-								<td>{task.description}</td>
-								<td>{task.agent_name}</td>
-								<td><div style="max-height: 100px;" class="scrollbar">{@html replaceNewLine(task.content)}</div></td>
-								<td>{utcToLocal(task.updated_datetime)}</td>
-								<td><span class="badge bg-success">{task.enabled ? $_("Enabled") : $_("Disabled")}</span></td>
-								<td><span class="badge bg-info">{task.status}</span></td>
-								<td>
-									<ul class="list-unstyled hstack gap-1 mb-0">
-										<li data-bs-toggle="tooltip" data-bs-placement="top" title="View">
-											<a href="page/task/{task.id}?agentId={task.agent_id}" target="_blank" class="btn btn-sm btn-soft-danger">
-                                                <i class="mdi mdi-eye-outline" />
-                                            </a>
-										</li>
-										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
-											<Button on:click={() => openDeleteModal(task.id)} class="btn btn-sm btn-soft-danger">
-                                                <i class="mdi mdi-delete-outline" />
-                                            </Button>
-										</li>
-									</ul>
-								</td>
-							</tr>
+								<TaskItem
+									task={task}
+									on:save={e => onTaskSaved(e)}
+									on:delete={e => onTaskDeleted(e)}
+								/>
 							{/each}
 						</tbody>
 					</Table>
diff --git a/src/routes/page/task/task-item.svelte b/src/routes/page/task/task-item.svelte
new file mode 100644
index 00000000..f3c7577c
--- /dev/null
+++ b/src/routes/page/task/task-item.svelte
@@ -0,0 +1,70 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { _ } from 'svelte-i18n';
+    import { Button } from "@sveltestrap/sveltestrap";
+	import { utcToLocal } from "$lib/helpers/datetime";
+	import { replaceNewLine } from "$lib/helpers/http";
+
+    const svelteDispatch = createEventDispatcher();
+
+    /** @type {import('$agentTypes').AgentTaskModel} */
+    export let task;
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+    function toggleTask() {
+        task.enabled = !task.enabled;
+    }
+
+    function handleSaveTask() {
+        svelteDispatch("save", {
+            task: task
+        });
+    }
+
+    function handleDeleteTask() {
+        svelteDispatch("delete", {
+            task: task
+        });
+    }
+</script>
+
+<tr>
+    <td scope="row" class="text-primary">{task.name}</td>
+    <td>{task.description}</td>
+    <td>{task.agent_name}</td>
+    <td><div style="max-height: 100px;" class="scrollbar">{@html replaceNewLine(task.content)}</div></td>
+    <td>{utcToLocal(task.updated_time)}</td>
+    <td>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <span class="clickable" on:click={() => toggleTask()}>
+            {#if task.enabled}
+                <span class="badge bg-success">{$_("Enabled")}</span>
+            {:else}
+                <span class="badge bg-danger">{$_("Disabled")}</span>
+            {/if}
+        </span>
+    </td>
+    <td><span class="badge bg-info">{task.status}</span></td>
+    <td>
+        <ul class="list-unstyled hstack gap-1 mb-0">
+            <li data-bs-toggle="tooltip" data-bs-placement="top" title="View">
+                <a href="page/task/{task.id}?agentId={task.agent_id}" target="_blank" class="btn btn-sm btn-soft-primary">
+                    <i class="mdi mdi-eye-outline" />
+                </a>
+            </li>
+            <li data-bs-toggle="tooltip" data-bs-placement="top" title="Save">
+                <Button on:click={() => handleSaveTask()} class="btn btn-sm btn-soft-info">
+                    <i class="mdi mdi-content-save-all" />
+                </Button>
+            </li>
+            <li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
+                <Button on:click={() => handleDeleteTask()} class="btn btn-sm btn-soft-danger">
+                    <i class="mdi mdi-delete-outline" />
+                </Button>
+            </li>
+        </ul>
+    </td>
+</tr>
\ No newline at end of file