diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
index ce26278b..66834093 100644
--- a/src/lib/helpers/types.js
+++ b/src/lib/helpers/types.js
@@ -131,7 +131,7 @@
  */
 
 /**
- * @typedef {Object} AgentTaskViewModel
+ * @typedef {Object} AgentTaskModel
  * @property {string} id - Task id.
  * @property {string} name - Task name.
  * @property {string} description - Description.
@@ -141,6 +141,7 @@
  * @property {Date} updated_datetime
  * @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 0974cd9a..f4f1f128 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -25,6 +25,7 @@ export const endpoints = {
     
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,
+    agentTaskDetailUrl: `${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 a852a3eb..32c91adc 100644
--- a/src/lib/services/task-service.js
+++ b/src/lib/services/task-service.js
@@ -15,4 +15,16 @@ export async function getAgentTasks(filter) {
         }
     });
     return response.data;
+}
+
+/**
+ * Get task detail
+ * @param {string} agentId 
+ * @param {string} taskid 
+ * @returns {Promise<import('$types').AgentTaskModel>}
+ */
+export async function getAgentTaskDetail(agentId, taskid) {
+    const url = replaceUrl(endpoints.agentTaskDetailUrl, { agentId: agentId, taskId: taskid });
+    var response = await axios.get(url);
+    return response.data;
 }
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/task/+page.svelte b/src/routes/page/agent/[agentId]/task/+page.svelte
deleted file mode 100644
index ab65c4e8..00000000
--- a/src/routes/page/agent/[agentId]/task/+page.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script>
-    import { Col, Row } from '@sveltestrap/sveltestrap';
-    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-    import HeadTitle from '$lib/common/HeadTitle.svelte';
-    import { getAgents } from '$lib/services/agent-service.js';
-    import TaskFlow from './task-flow.svelte'
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores';
-    const params = $page.params;
-  
-    /** @type {import('$types').AgentModel} */
-    let agent;
-    let isRouterNodeSelected = false;
-    let isAgentNodeSelected = false;
-  
-    /** @type {import('$types').AgentFilter} */
-    const filter = {
-		    pager: { page: 1, size: 20, count: 0 },
-        agentIds: [params.agentId],
-	  };
-  
-    onMount(async () => {
-      const response = await getAgents(filter);
-        agent = response.items[0];
-    });
-
-    function handleUserNodeSelected() {
-      isRouterNodeSelected = false;
-      isAgentNodeSelected = false;
-    }
-  
-  </script>
-  
-  <HeadTitle title="Task Flow" />
-  <Breadcrumb title="Agent" pagetitle="Task" />
-  
-  {#if agent}
-  <Row>
-    <Col>
-      <TaskFlow agent={agent}
-        on:userNodeSelected={(e) => handleUserNodeSelected()}/>
-    </Col>    
-  </Row>
-  {/if}   
-  
-  
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/task/[template]/+page.svelte b/src/routes/page/agent/[agentId]/task/[template]/+page.svelte
deleted file mode 100644
index 90ccf585..00000000
--- a/src/routes/page/agent/[agentId]/task/[template]/+page.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-    import HeadTitle from '$lib/common/HeadTitle.svelte';
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores';
-    import { executeAgentInstruction } from '$lib/services/instruct-service.js';
-    const params = $page.params;
-    let agentId = params.agentId;
-    let template = params.template;
-  
-    onMount(async () => {
-        /** @type {import('$types').InstructMessageModel} */
-        let inst = {
-            template: template
-        };
-        await executeAgentInstruction(agentId, inst);
-    });
-  </script>
-  
-  <HeadTitle title="Task Execution" />
-  <Breadcrumb title="Task" pagetitle={template} />
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/task/task-flow.svelte b/src/routes/page/agent/[agentId]/task/task-flow.svelte
deleted file mode 100644
index 4ed11106..00000000
--- a/src/routes/page/agent/[agentId]/task/task-flow.svelte
+++ /dev/null
@@ -1,165 +0,0 @@
-<script>
-    import Drawflow from 'drawflow';
-    import 'drawflow/dist/drawflow.min.css';
-    import '$lib/drawflow/drawflow.css';
-    import { onMount, createEventDispatcher } from 'svelte';
-    import { replaceNewLine } from '$lib/helpers/http';
-    import { newConversation } from '$lib/services/conversation-service';
-    import { conversationStore } from '$lib/helpers/store.js';
-    import { sendMessageToHub } from '$lib/services/conversation-service.js';
-	import 'overlayscrollbars/overlayscrollbars.css';
-    import { OverlayScrollbars } from 'overlayscrollbars';
-
-    /** @type {import('$types').AgentModel} */
-    export let agent;
-    /** @type {import('$types').AgentTemplate[]} */
-    let taskNodes = [];
-
-    /** @type {Drawflow} */
-    let editor;
-    /** @type {DrawflowNode} */
-    let selectedNode;
-
-    let lastPosX = 0;
-
-    const dispatch = createEventDispatcher();
-    
-    onMount(async () => {
-        const container = document.getElementById("drawflow");
-        if (container) {
-            editor = new Drawflow(container);
-            editor.reroute = true;
-            editor.reroute_fix_curvature = true;
-            editor.start();
-            editor.on('nodeCreated', function(id) {
-                let node = editor.getNodeFromId(id);
-                node.data.nid = id;
-                console.log(`Node created ${id} ${node.data.agent}`);
-                taskNodes.push(node.data);
-            });
-            editor.on('nodeSelected', function(id) {
-                console.log("Node selected " + id);
-                // emit event
-                selectedNode = editor.getNodeFromId(id);
-            });
-            renderTaskFlow(editor);
-        }
-
-        const options = {
-            scrollbars: {
-                visibility: 'auto',
-                autoHide: 'move',
-                autoHideDelay: 100,
-                dragScroll: true,
-                clickScroll: false,
-                theme: 'os-theme-dark',
-                pointers: ['mouse', 'touch', 'pen']
-            }
-        };        
-        const scrollElements = document.querySelectorAll('.scrollbar');
-		scrollElements.forEach((item) => {
-			OverlayScrollbars(item, options);
-		});
-    });    
-
-    /** @param {Drawflow} editor */
-    function renderTaskFlow(editor){
-        let posX = 0;
-        const nodeSpaceX = 250, nodeSpaceY = 150;
-
-        const templates = agent.templates.filter(t => t.name.startsWith("task."));
-        let posY = nodeSpaceY * (templates.length + 1) / 2;
-
-        // add agent node
-        let agentNodeHtml = agent.icon_url ? `<img src=${agent.icon_url} height="30" />` : "";
-        agentNodeHtml += `<span class="h5 ms-2">${agent.name}</span>`;
-        let agentNodeId = editor.addNode('agent', 0, 1, posX, posY, 'agent', 
-        {
-            is_agent: true,
-            agent: agent.name
-        }, agentNodeHtml, false);
-
-        posY = 100;
-        posX += nodeSpaceX;
-
-        // render tasks
-        templates.forEach(template => {
-            const actionLink = `page/agent/${agent.id}/task/${template.name}`;
-            let html = `<span class="h5">${template.name}</span>`;
-            html += `<hr/><div class="scrollbar" style="max-height: 150px;"><i class="bx bx-script"></i>${replaceNewLine(template.content)}</div>`;
-            
-            const data = {
-                agent: agent.name,
-                task: template.name,
-                content: template.content
-            };
-            let nid = editor.addNode('agent', 1, 0, posX, posY, 'task-node', data, html, false);
-            editor.addConnection(agentNodeId, nid, "output_1", "input_1");
-
-            posY += nodeSpaceY;
-            posX += 50;
-        });
-
-        lastPosX = posX + nodeSpaceX;
-    }
-    
-    /** @param {import('$types').AgentModel} agent */
-    function getPlannerName(agent) {
-        const planner = agent.routing_rules.find(p => p.type == "planner");
-        return planner?.field ?? "NaviePlanner";
-    }
-
-    async function handleTestInChat() {
-        window.location.href = `chat/${agent.id}`;
-    }
-
-    /** @type {string} */
-    let cid;
-    /** @type {string} */
-    let mid;
-    async function handleRunTask() {
-        // clean added nodes
-        if (mid) {
-            editor.removeNodeId(`node-${mid}`);
-        }
-
-        if (cid) {
-            editor.removeNodeId(`node-${cid}`);
-            editor.removeNodeOutput(selectedNode.id, "output_1");
-        }
-
-        // new conversation
-        const conversation = await newConversation(agent.id);
-        conversationStore.set(conversation);
-
-        // draw conversation node
-        let posX = lastPosX + 100, posY = 100;
-        let html = "Initialize session";
-        editor.addNodeOutput(selectedNode.id);
-        cid = editor.addNode('conversation', 1, 1, posX, posY, 'conversation', {}, html, false);
-        editor.addConnection(selectedNode.id, cid, "output_1", "input_1");
-
-        // send message
-        posY += 100;
-        html = "Execute task";
-        await sendMessageToHub(agent.id, conversation.id, selectedNode.data.content);
-        mid = editor.addNode('message', 1, 0, posX, posY, 'message', {}, html, false);
-        editor.addConnection(cid, mid, "output_1", "input_1");
-    }
-</script>
-
-<div>
-    {#if selectedNode && selectedNode.data.is_agent}
-    <button class="btn btn-primary" on:click={handleTestInChat}><i class="bx bx-chat"></i> Test in chat</button>
-    {/if}
-    <button class="btn btn-primary" on:click={handleRunTask}><i class="bx bx-run"></i> Run: 
-        {#if selectedNode && selectedNode.data.task}
-            {selectedNode.data.task}
-        {:else}
-            select a task to run
-        {/if}
-    </button>
-</div>
-
-<div id="drawflow" style="height: 75vh; width: 100%">
-</div>
\ No newline at end of file
diff --git a/src/routes/page/task/+page.svelte b/src/routes/page/task/+page.svelte
index fd3780ba..7ef17126 100644
--- a/src/routes/page/task/+page.svelte
+++ b/src/routes/page/task/+page.svelte
@@ -28,7 +28,7 @@
 	const firstPage = 1;
 	const pageSize = 10;
 
-    /** @type {import('$types').PagedItems<import('$types').AgentTaskViewModel>} */
+    /** @type {import('$types').PagedItems<import('$types').AgentTaskModel>} */
     let tasks = { count: 0, items: [] };
 
 	/** @type {import('$types').AgentTaskFilter} */
@@ -198,7 +198,7 @@
 								<th scope="col">Name</th>
 								<th scope="col">Description</th>
 								<th scope="col">Agent</th>
-								<th scope="col">Content</th>
+								<th scope="col">Details</th>
 								<th scope="col">Updated Date</th>
 								<th scope="col">Status</th>
 								<th scope="col">Action</th>
@@ -217,6 +217,11 @@
 								<td><span class="badge bg-success">{task.enabled ? "Enabled" : "Disabled"}</span></td>
 								<td>
 									<ul class="list-unstyled hstack gap-1 mb-0">
+										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Execute">
+											<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" />
diff --git a/src/routes/page/task/[taskId]/+page.svelte b/src/routes/page/task/[taskId]/+page.svelte
new file mode 100644
index 00000000..2d05cc6d
--- /dev/null
+++ b/src/routes/page/task/[taskId]/+page.svelte
@@ -0,0 +1,18 @@
+<script>
+    import { onMount } from 'svelte';
+    import ExecutionFlow from './execution-flow.svelte';
+    import { page } from '$app/stores';
+    const params = $page.params;
+    const agentId = $page.url.searchParams.get('agentId')
+    const taskId = params.taskId;
+
+    onMount(async () => {
+        const container = document.getElementById("drawflow");
+        if (container) {
+
+        }
+        
+    }); 
+</script>
+
+<ExecutionFlow /> 
\ No newline at end of file
diff --git a/src/routes/page/task/[taskId]/execution-flow.svelte b/src/routes/page/task/[taskId]/execution-flow.svelte
new file mode 100644
index 00000000..9b00940b
--- /dev/null
+++ b/src/routes/page/task/[taskId]/execution-flow.svelte
@@ -0,0 +1,140 @@
+<script>
+    import Drawflow from 'drawflow';
+    import 'drawflow/dist/drawflow.min.css';
+    import '$lib/drawflow/drawflow.css';
+    import { onMount, createEventDispatcher } from 'svelte';
+    import { newConversation } from '$lib/services/conversation-service';
+    import { conversationStore } from '$lib/helpers/store.js';
+    import { getAgentTaskDetail } from '$lib/services/task-service';
+    import { sendMessageToHub } from '$lib/services/conversation-service.js';
+	import 'overlayscrollbars/overlayscrollbars.css';
+    import { page } from '$app/stores';
+	import { replaceNewLine } from '$lib/helpers/http';
+
+    /** @type {import('$types').AgentTaskModel} */
+    let task;
+
+    /** @type {import('$types').AgentTemplate[]} */
+    let taskNodes = [];
+
+    /** @type {Drawflow} */
+    let editor;
+
+    /** @type {string} */
+    let tid;
+    /** @type {string} */
+    let cid;
+    /** @type {string} */
+    let mid;    
+    let lastPosX = 120;
+    let lastPosY = 100;
+    const nodeSpaceX = 50, nodeSpaceY = 120;
+
+    onMount(async () => {
+        const container = document.getElementById("drawflow");
+        if (container) {
+            editor = new Drawflow(container);
+            editor.reroute = true;
+            editor.reroute_fix_curvature = true;
+            editor.start();
+            editor.on('nodeCreated', function(id) {
+                let node = editor.getNodeFromId(id);
+                node.data.nid = id;
+                console.log(`Node created ${id} ${node.data.agent}`);
+                taskNodes.push(node.data);
+            });
+            editor.on('nodeSelected', function(id) {
+                console.log("Node selected " + id);
+            });            
+        }
+        const params = $page.params;
+        const agentId = $page.url.searchParams.get('agentId');
+        const taskId = params.taskId;
+        task = await getAgentTaskDetail(agentId, taskId);
+
+        renderTaskNode();
+    });    
+
+    function renderTaskNode() {
+        let posX = 0;
+        let posY = 200;
+
+        // draw task node
+        let html = `<span class="h5 ms-2">${task.name}</span><hr><p>${replaceNewLine(task.content)}</p>`;
+        tid = editor.addNode('task', 0, 0, posX, posY, 'task', 
+        {
+            
+        }, html, false);
+
+        lastPosX = posX;
+        lastPosY = posY;
+    }
+
+    /** @param {import('$types').ConversationModel} conversation */
+    function renderConversationNode(conversation) {
+        let posX = lastPosX + 250, posY = lastPosX + 20;
+        let html = "Initialize session";
+        editor.addNodeOutput(tid);
+        cid = editor.addNode('conversation', 1, 0, posX, posY, 'conversation', {}, html, false);
+        editor.addConnection(tid, cid, "output_1", "input_1");
+        lastPosX = posX;
+        lastPosY = posY;
+        mid = cid;
+    }
+
+    /** @param {string} message */
+    function renderMessageNode(message) {
+        let posX = lastPosX + nodeSpaceX, posY = lastPosY + nodeSpaceY;
+        let html = `${message}`;
+        editor.addNodeOutput(mid);
+        let new_mid = editor.addNode('message', 1, 0, posX, posY, 'message', {}, html, false);
+        editor.addConnection(mid, new_mid, "output_1", "input_1");
+
+        lastPosX = posX;
+        lastPosY = posY;
+        mid = new_mid;
+    }
+
+    async function handleRunTaskSequentiallyInServer() {
+        // clean nodes
+        editor.clear();
+        renderTaskNode();
+
+        // new conversation
+        const conversation = await newConversation(task.agent_id);
+        conversationStore.set(conversation);
+        renderConversationNode(conversation);
+        
+        await sendMessageToHub(task.agent_id, conversation.id, task.content);
+        renderMessageNode(task.content);
+    }
+
+    async function handleRunTaskInteractively() {
+        // clean nodes
+        editor.clear();
+        renderTaskNode();
+
+        // new conversation
+        const conversation = await newConversation(task.direct_agent_id);
+        conversationStore.set(conversation);
+        renderConversationNode(conversation);
+
+        // split task into steps
+        let steps = task.content.split('\n');
+        for (let i = 0; i < steps.length; i++) {
+            let step = steps[i];
+            await sendMessageToHub(task.direct_agent_id, conversation.id, step);
+            renderMessageNode(step);
+        }        
+    }
+</script>
+
+<div>
+    <button class="btn btn-primary me-2" on:click={handleRunTaskSequentiallyInServer}><i class="bx bx-run"></i> Execute in {task?.agent_name}</button>
+    {#if task?.direct_agent_id}
+    <button class="btn btn-primary" on:click={handleRunTaskInteractively}><i class="bx bx-rocket"></i> Execute Interactively</button>
+    {/if}
+</div>
+
+<div id="drawflow" style="height: 75vh; width: 100%">
+</div>
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index 1419b8be..a8b50a3d 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -46,6 +46,8 @@ const config = {
 				"/page/agent/[agentId]/train",
 				"/page/conversation",
 				"/page/conversation/[conversationId]",
+				"/page/task",
+				"/page/task/[taskId]",
 				"/page/knowledge-base",
 				"/page/plugin",
 				"/page/plugin/[pluginId]",