diff --git a/src/lib/helpers/types/instructTypes.js b/src/lib/helpers/types/instructTypes.js
index 14054cf6..ee8ea9f3 100644
--- a/src/lib/helpers/types/instructTypes.js
+++ b/src/lib/helpers/types/instructTypes.js
@@ -11,7 +11,32 @@
  * @property {string} [instruction]
  * @property {string} [provider]
  * @property {string} [model]
+ * @property {string?} [template]
  * @property {import('$conversationTypes').ConversationStateModel[]} [states]
  */
 
+/**
+ * @typedef {Object} InstructLogFilter
+ * @property {number} page - The page number
+ * @property {number} size - The page size
+ * @property {string[]?} [agentIds]
+ * @property {string[]?} [providers]
+ * @property {string[]?} [models]
+ * @property {string[]?} [templateNames]
+ */
+
+/**
+ * @typedef {Object} InstructionLogModel
+ * @property {string} [id]
+ * @property {string?} [agent_id]
+ * @property {string?} [agent_name]
+ * @property {string} provider
+ * @property {string} model
+ * @property {string?} [template_name]
+ * @property {string} user_message
+ * @property {string?} [system_instruction]
+ * @property {string} completion_text
+ * @property {Date} created_time
+ */
+
 export default {};
\ No newline at end of file
diff --git a/src/lib/helpers/utils/common.js b/src/lib/helpers/utils/common.js
index d3ae5566..823e8821 100644
--- a/src/lib/helpers/utils/common.js
+++ b/src/lib/helpers/utils/common.js
@@ -67,4 +67,13 @@ export function truncateByPrefix(str, prefix) {
     }
 
     return str.replace(prefix, '');
+}
+
+
+/**
+ * @param {any[]} arr
+ * @param {string | number} key
+ */
+export function removeDuplicates(arr, key) {
+    return [...new Map(arr.map(item => [item[key], item])).values()];
 }
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_instruction.scss b/src/lib/scss/custom/pages/_instruction.scss
index 067f6d1f..f80a81a5 100644
--- a/src/lib/scss/custom/pages/_instruction.scss
+++ b/src/lib/scss/custom/pages/_instruction.scss
@@ -82,4 +82,21 @@
         gap: 30px;
         justify-content: center;
     }
+}
+
+.instruction-log-col {
+    max-width: 150px;
+}
+
+.instruction-log-detail-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 10px 5px;
+
+    .instruction-log-message {
+        overflow-y: auto;
+        max-height: 350px;
+        scrollbar-width: none;
+    }
 }
\ No newline at end of file
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index ddcf3e20..26cf2212 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -45,6 +45,7 @@ export const endpoints = {
     // agent instruct
     instructCompletionUrl: `${host}/instruct/{agentId}`,
     chatCompletionUrl: `${host}/instruct/chat-completion`,
+    instructLogUrl: `${host}/logger/instruction/log`,
 
     // agent realtime interaction
     agentInitRealtimeSessionUrl: `${host}/agent/{agentId}/realtime/session`,
diff --git a/src/lib/services/instruct-service.js b/src/lib/services/instruct-service.js
index f9bf8ff3..2b4a4a10 100644
--- a/src/lib/services/instruct-service.js
+++ b/src/lib/services/instruct-service.js
@@ -22,3 +22,23 @@ export async function sendChatCompletion(request) {
     const response = await axios.post(url, request);
     return response.data;
 }
+
+
+/**
+ * Get instruction logs
+ * @param {import('$instructTypes').InstructLogFilter} filter
+ * @returns {Promise<import('$commonTypes').PagedItems<import('$instructTypes').InstructionLogModel>>}
+ */
+export async function getInstructionLogs(filter) {
+    const url = endpoints.instructLogUrl;
+    const response = await axios.get(url, {
+        params: {
+            ...filter
+        },
+        paramsSerializer: {
+            dots: true,
+            indexes: null,
+        }
+    });
+    return response.data;
+}
diff --git a/src/routes/page/instruction/+page.svelte b/src/routes/page/instruction/+page.svelte
index 7705c9ff..af0e8011 100644
--- a/src/routes/page/instruction/+page.svelte
+++ b/src/routes/page/instruction/+page.svelte
@@ -47,6 +47,9 @@
 
     /** @type {string | null} */
     let selectedModel = null;
+
+    /** @type {string | null} */
+    let selectedTemplate = null;
     
     /** @type {import('$agentTypes').AgentModel[]} */
     let agents = [];
@@ -87,6 +90,7 @@
             agentId: selectedAgent?.id,
             provider: selectedProvider?.provider || DEFAULT_PROVIDER,
             model: selectedModel || DEFAULT_MODEL,
+            template: selectedTemplate,
             states: formattedStates
         }).then(res => {
             result = res || '';
@@ -137,6 +141,7 @@
         instruction = selectedAgent?.instruction || '';
 
         const template = e.detail.template || null;
+        selectedTemplate = template?.name || null;
         if (!!template) {
             instruction = template?.content || '';
         }
diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
new file mode 100644
index 00000000..0410ca33
--- /dev/null
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -0,0 +1,283 @@
+<script>
+    import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+    import util from "lodash";
+	import { Button, Card, CardBody, Col, Input, Row, Table } from '@sveltestrap/sveltestrap';
+	import HeadTitle from '$lib/common/HeadTitle.svelte';
+    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	import TablePagination from '$lib/common/TablePagination.svelte';
+	import { getAgentOptions } from '$lib/services/agent-service';
+	import { getLlmConfigs } from '$lib/services/llm-provider-service';
+	import { getInstructionLogs } from '$lib/services/instruct-service';
+	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import LogItem from './log-item.svelte';
+	import { removeDuplicates } from '$lib/helpers/utils/common';
+
+    const firstPage = 1;
+	const pageSize = 15;
+    let isLoading = false;
+
+    const initPager = { page: firstPage, size: pageSize };
+
+    /** @type {import('$commonTypes').Pagination} */
+	let pager = { page: firstPage, size: pageSize, count: 0 }
+
+    /** @type {import('$instructTypes').InstructLogFilter} */
+    let filter = { ... initPager };
+
+    /** @type {import('$instructTypes').InstructionLogModel[]} */
+	let logItems = [];
+
+    /** @type {import('$commonTypes').IdName[]} */
+	let agentOptions = [];
+
+    /** @type {import('$commonTypes').LlmConfig[]} */
+    let llmConfigs = [];
+
+    /** @type {any[]} */
+    let providerOptions = [];
+
+    /** @type {any[]} */
+    let modelOptions = [];
+
+    /** @type {any} */
+	let searchOption = {
+		agentId: null,
+		provider: null,
+		model: null,
+        template: ''
+	};
+
+    onMount(async () => {
+        Promise.all([
+            initAgentOptions(),
+            initLlmConfigs(),
+            initLogs()
+        ]);
+    });
+
+    function initAgentOptions() {
+		return new Promise((resolve, reject) => {
+			getAgentOptions().then(res => {
+				agentOptions = res?.map(x => {
+					return {
+						id: x.id,
+						name: x.name
+					};
+				}) || [];
+				resolve(agentOptions);
+			}).catch((error) => {
+				agentOptions = [];
+				reject(error);
+			});
+		});
+	}
+
+    function initLlmConfigs() {
+        return new Promise((resolve, reject) => {
+			getLlmConfigs().then(res => {
+				llmConfigs = res || [];
+                providerOptions = llmConfigs.map(x => ({
+                    id: x.provider,
+                    name: x.provider,
+                    models: x.models || []
+                })).sort((a, b) => a.name.localeCompare(b.name));
+                modelOptions = [];
+				resolve(llmConfigs);
+			}).catch((error) => {
+				llmConfigs = [];
+                providerOptions = [];
+                modelOptions = []
+				reject(error);
+			});
+		});
+    }
+
+    function initLogs() {
+        filter = {
+            ...initPager
+        };
+        return getPagedInstructionLogs();
+    }
+
+    function getPagedInstructionLogs() {
+        logItems = [];
+        isLoading = true;
+        return new Promise((resolve, reject) => {
+            getInstructionLogs(filter).then(res => {
+                refresh(res);
+                resolve(res);
+            }).finally(() => {
+                isLoading = false;
+            });
+        });
+    }
+
+    /** @param {import('$commonTypes').PagedItems<import('$instructTypes').InstructionLogModel>} logs */
+    function refresh(logs) {
+		refreshLogs(logs);
+		refreshPager(logs.count, filter.page, filter.size);
+	}
+
+    /** @param {import('$commonTypes').PagedItems<import('$instructTypes').InstructionLogModel>} logs */
+	function refreshLogs(logs) {
+        logItems = [ ...logs.items ];
+	}
+
+	/** @param {number} totalItemsCount */
+	function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
+		pager = {
+			page: page,
+			size: pageCount,
+			count: totalItemsCount
+		};
+	}
+
+
+    /**
+	 * @param {any} e
+	 * @param {string} type
+	 */
+	function changeOption(e, type) {
+        const value = e.target.value;
+		if (type === 'agent') {
+			searchOption = {
+				...searchOption,
+				agentId: value || null
+			};
+		} else if (type === 'provider') {
+			searchOption = {
+				...searchOption,
+				provider: value || null,
+                model: null,
+			};
+
+            const models = llmConfigs.find(x => x.provider === value)?.models?.map(x => ({
+                id: x.name,
+                name: x.name
+            })) || [];
+            const uniqueModels = removeDuplicates(models, 'id');
+            modelOptions = uniqueModels.sort((a, b) => a.name.localeCompare(b.name)) || [];
+		} else if (type === 'model') {
+            searchOption = {
+				...searchOption,
+				model: value || null
+			};
+        }
+	}
+
+
+    function search() {
+        prepareFilter();
+        getPagedInstructionLogs();
+    }
+
+    function prepareFilter() {
+        const agentId = searchOption.agentId || null;
+        const provider = searchOption.provider || null;
+        const model = searchOption.model || null;
+        const template = util.trim(searchOption.template) || null;
+
+        filter = {
+            ...filter,
+            page: firstPage,
+            agentIds: agentId ? [agentId] : null,
+            providers: provider ? [provider] : null,
+            models: model ? [model] : null,
+            templateNames: template ? [template] : null
+        };
+    }
+
+    /** @param {number} pageNum */
+	function pageTo(pageNum) {
+		filter = {
+			...filter,
+			page: pageNum,
+            size: pageSize
+		};
+		getPagedInstructionLogs();
+	}
+</script>
+
+
+<HeadTitle title="{$_('Instruction Log')}" />
+<Breadcrumb pagetitle="{$_('Instruction Log')}" title="{$_('Instruction')}"/>
+<LoadingToComplete isLoading={isLoading} />
+
+<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">{$_('Log List')}</h5>
+				</div>
+			</CardBody>
+			<CardBody class="border-bottom">
+				<Row class="g-3">
+					<Col lg="3">
+						<select class="form-select" id="idAgent" value={searchOption.agentId} on:change={e => changeOption(e, 'agent')}>
+							<option value={null}>{$_('Select Agent')}</option>
+							{#each agentOptions as op}
+								<option value={`${op.id}`} selected={op.id === searchOption.agentId}>{$_(`${op.name}`)}</option>
+							{/each}
+						</select>
+					</Col>
+					<Col lg="2">
+						<select class="form-select" id="idProvider" value={searchOption.provider} on:change={e => changeOption(e, 'provider')}>
+							<option value={null}>{$_('Select Llm Provider')}</option>
+							{#each providerOptions as op}
+								<option value={`${op.id}`} selected={op.id === searchOption.provider}>{$_(`${op.name}`)}</option>
+							{/each}
+						</select>
+					</Col>					
+					<Col lg="3">
+						<select class="form-select" id="idModel" value={searchOption.model} on:change={e => changeOption(e, 'model')}>
+							<option value={null}>{$_('Select Llm Model')}</option>
+							{#each modelOptions as op}
+								<option value={`${op.id}`} selected={op.id === searchOption.model}>{$_(`${op.name}`)}</option>
+							{/each}
+						</select>
+					</Col>
+					<Col lg="3">
+						<Input bind:value={searchOption.template} maxlength={100} placeholder={'Search template...'} />
+					</Col>
+					<Col lg="1">
+						<Button
+							type="button"
+							color="secondary"
+							class="btn-soft-secondary w-100"
+							on:click={(e) => search()}
+						>
+							<i class="mdi mdi-filter-outline align-middle" />
+							<span class="d-none">{$_('Filter')}</span>
+						</Button>
+					</Col>
+				</Row>
+			</CardBody>
+			<CardBody>
+				<div class="table-responsive thin-scrollbar">
+					<Table class="align-middle nowrap users-table" bordered>
+						<thead>
+							<tr>
+								<th scope="col" class="instruction-log-col ellipsis">{$_('Agent')}</th>
+								<th scope="col" class="instruction-log-col ellipsis">{$_('Provider')}</th>
+								<th scope="col" class="instruction-log-col ellipsis">{$_('Model')}</th>
+								<th scope="col" class="instruction-log-col ellipsis">{$_('Template')}</th>
+                                <th scope="col" class="instruction-log-col ellipsis">{$_('Created Time')}</th>
+								<th scope="col">{$_('')}</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each logItems as item, idx (idx)}
+                                <LogItem
+                                    item={item}
+                                />
+                            {/each}
+						</tbody>
+					</Table>
+				</div>
+				<TablePagination pagination={pager} pageTo={(pn) => pageTo(pn)} />
+			</CardBody>
+		</Card>
+	</Col>
+</Row>
\ No newline at end of file
diff --git a/src/routes/page/instruction/log/log-item.svelte b/src/routes/page/instruction/log/log-item.svelte
new file mode 100644
index 00000000..b04a8312
--- /dev/null
+++ b/src/routes/page/instruction/log/log-item.svelte
@@ -0,0 +1,76 @@
+<script>
+    import { fly } from 'svelte/transition';
+    import { Button } from '@sveltestrap/sveltestrap';
+	import Markdown from '$lib/common/markdown/Markdown.svelte';
+	import { utcToLocal } from '$lib/helpers/datetime';
+
+    /** @type {import('$instructTypes').InstructionLogModel} */
+    export let item;
+
+    /** @type {boolean} */
+    let open = false;
+
+    function toggleLogDetail() {
+        open = !open;
+    }
+</script>
+
+<tr in:fly={{ y: -5, duration: 800 }}>
+    <td class="instruction-log-col ellipsis">{item.agent_name || 'N/A'}</td>
+    <td class="instruction-log-col ellipsis">{item.provider}</td>
+    <td class="instruction-log-col ellipsis">{item.model}</td>
+    <td class="instruction-log-col ellipsis">{item.template_name || 'N/A'}</td>
+    <td class="instruction-log-col ellipsis">{utcToLocal(item.created_time)}</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="Detail">
+                <Button
+                    class="btn btn-sm btn-soft-warning"
+                    on:click={() => toggleLogDetail()}
+                >
+                    <i class="mdi mdi-eye-outline" />
+                </Button>
+            </li>
+        </ul>
+    </td>
+</tr>
+
+
+{#if open}
+    <tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
+        <td colspan="12">
+            <div class="instruction-log-detail-container">
+                {#if !!item.system_instruction}
+                <div>
+                    <div class="text-primary fw-bold">
+                        {'System instruction:'}
+                    </div>
+                    <div class="instruction-log-message">
+                        <Markdown containerClasses={'markdown-dark text-dark'} text={item.system_instruction} rawText />
+                    </div>
+                </div>
+                {/if}
+                {#if !!item.user_message}
+                <div>
+                    <div class="text-primary fw-bold">
+                        {'User message:'}
+                    </div>
+                    <div class="instruction-log-message">
+                        <Markdown containerClasses={'markdown-dark text-dark'} text={item.user_message || ''} rawText />
+                    </div>
+                </div>
+                {/if}
+                {#if !!item.completion_text}
+                <div>
+                    <div class="text-primary fw-bold">
+                        {'Completion text:'}
+                    </div>
+                    <div class="instruction-log-message">
+                        <Markdown containerClasses={'markdown-dark text-dark'} text={item.completion_text} rawText />
+                    </div>
+                </div>
+                {/if}
+            </div>
+        </td>
+    </tr>
+{/if}
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index 61d9bd45..a5e89ad7 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -53,6 +53,7 @@ const config = {
 				"/page/agent/[agentId]/build",
 				"/page/agent/[agentId]/train",
 				"/page/instruction",
+				"/page/instruction/log",
 				"/page/conversation",
 				"/page/conversation/[conversationId]",
 				"/page/task",