diff --git a/src/lib/scss/custom/pages/_instruction.scss b/src/lib/scss/custom/pages/_instruction.scss
index 3a06401c..067f6d1f 100644
--- a/src/lib/scss/custom/pages/_instruction.scss
+++ b/src/lib/scss/custom/pages/_instruction.scss
@@ -48,7 +48,7 @@
         }
 
         .instruction-gap {
-            margin-top: 10px;
+            margin-top: 30px;
         }
     }
 
@@ -79,7 +79,7 @@
 
     .instruct-state-item {
         display: flex;
-        gap: 10px;
+        gap: 30px;
         justify-content: center;
     }
 }
\ No newline at end of file
diff --git a/src/routes/page/instruction/+page.svelte b/src/routes/page/instruction/+page.svelte
index 33c42a57..7705c9ff 100644
--- a/src/routes/page/instruction/+page.svelte
+++ b/src/routes/page/instruction/+page.svelte
@@ -3,23 +3,33 @@
     import { fly } from 'svelte/transition';
 	import { _ } from 'svelte-i18n';
 	import util from "lodash";
-	import { Button, Col, Row } from '@sveltestrap/sveltestrap';
+	import { Button, Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
 	import LoadingDots from '$lib/common/LoadingDots.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
     import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
-	import InstructionSetting from './instruction-components/instruction-setting.svelte';
 	import InstructionState from './instruction-components/instruction-state.svelte';
 	import { getAgents } from '$lib/services/agent-service';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 	import { sendChatCompletion } from '$lib/services/instruct-service';
 	import { getLlmConfigs } from '$lib/services/llm-provider-service';
 	import { LlmModelType } from '$lib/helpers/enums';
+	import NavBar from '$lib/common/nav-bar/NavBar.svelte';
+	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
+	import InstructionTemplate from './instruction-components/instruction-template.svelte';
+	import InstructionLlm from './instruction-components/instruction-llm.svelte';
 
     const maxLength = 64000;
     const DEFAULT_PROVIDER = 'openai';
     const DEFAULT_MODEL = 'gpt-4o-mini';
 
+    /** @type {any[]}*/
+    const tabs = [
+        { name: 'instruction-template', displayText: 'Template' },
+        { name: 'instruction-llm', displayText: 'LLM Config' },
+        { name: 'instruction-states', displayText: 'States' }
+    ];
+
     let isLoading = false;
     let isThinking = false;
     let requestDone = false;
@@ -32,7 +42,7 @@
     /** @type {import('$agentTypes').AgentModel | null} */
     let selectedAgent = null;
 
-    /** @type {string | null} */
+    /** @type {import('$commonTypes').LlmConfig?} */
     let selectedProvider = null;
 
     /** @type {string | null} */
@@ -49,6 +59,9 @@
         { key: '', value: ''}
     ];
 
+    /** @type {string}*/
+    let selectedTab = tabs[0].name;
+
     onMount(async () => {
         try {
             isLoading = true;
@@ -62,7 +75,6 @@
         }
     });
 
-
     function sendRequest() {
         isThinking = true;
         requestDone = false;
@@ -73,7 +85,7 @@
             text: util.trim(text) || '',
             instruction: util.trim(instruction) || null,
             agentId: selectedAgent?.id,
-            provider: selectedProvider || DEFAULT_PROVIDER,
+            provider: selectedProvider?.provider || DEFAULT_PROVIDER,
             model: selectedModel || DEFAULT_MODEL,
             states: formattedStates
         }).then(res => {
@@ -121,21 +133,29 @@
 
     /** @param {any} e */
     function onAgentSelected(e) {
-        selectedAgent = e.detail.selectedAgent || null;
+        selectedAgent = e.detail.agent || null;
         instruction = selectedAgent?.instruction || '';
 
-        const template = e.detail.selectedTemplate || null;
+        const template = e.detail.template || null;
         if (!!template) {
             instruction = template?.content || '';
         }
 
-        onLlmSelected(e);
+        const providerName = selectedAgent?.llm_config?.provider || null;
+        const modelName = selectedAgent?.llm_config?.model || null;
+        selectedProvider = llmConfigs?.find(x => x.provider === providerName) || null;
+        selectedModel = modelName;
     }
     
     /** @param {any} e */
     function onLlmSelected(e) {
-        selectedProvider = e.detail.selectedProvider || null;
-        selectedModel = e.detail.selectedModel || '';
+        selectedProvider = e.detail.provider || null;
+        selectedModel = e.detail.model || '';
+    }
+
+    /** @param {string} selected */
+    function handleTabClick(selected) {
+        selectedTab = selected;
     }
 </script>
 
@@ -151,7 +171,7 @@
                 rows={8}
                 maxlength={maxLength}
                 disabled={isThinking}
-                placeholder={'Start typing here...'}
+                placeholder={'Enter input message...'}
                 bind:value={text}
                 on:keydown={(e) => pressKey(e)}
             />
@@ -207,55 +227,95 @@
     </div>
 </div>
 
-
-<div class="d-xl-flex mt-3">
-    <div class="w-100">
-        <InstructionSetting
-            disabled={isThinking}
-            agents={agents}
-            llmConfigs={llmConfigs}
-            on:agentSelected={e => onAgentSelected(e)}
-            on:llmSelected={e => onLlmSelected(e)}
-        />
-    </div>
-</div>
-
-
 <div class="d-xl-flex mt-4 mb-5">
 	<div class="w-100">
+        <Row>
+            <Col lg="7">
+                <div class="instruct-text-header text-primary fw-bold mb-2">
+                    <div class="line-align-center">
+                        {'Instruction'}
+                    </div>
+                    <div class="line-align-center">
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <!-- svelte-ignore a11y-no-static-element-interactions -->
+                        <i
+                            class="mdi mdi-refresh text-primary clickable"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="bottom"
+                            title={'Reset'}
+                            on:click={e => resetInstruction()}
+                        />
+                    </div>
+                </div>
+            </Col>
+            <Col lg="5"></Col>
+        </Row>
         <Row class="instruct-setting-container">
-            <Col lg="9">
+            <Col lg="7">
                 <div>
-                    <div class="instruct-text-header text-primary fw-bold mb-2">
-                        <div class="line-align-center">
-                            {'Instruction'}
-                        </div>
-                        <div class="line-align-center">
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <!-- svelte-ignore a11y-no-static-element-interactions -->
-                            <i
-                                class="mdi mdi-refresh text-primary clickable"
-                                data-bs-toggle="tooltip"
-                                data-bs-placement="bottom"
-                                title={'Reset'}
-                                on:click={e => resetInstruction()}
-                            />
-                        </div>
-                    </div>
-                    <div class="instruct-setting-section instruction-border instruct-setting-padding">
+                    <div class="instruct-setting-section" style="gap: 2px;">
                         <textarea
                             class='form-control knowledge-textarea'
                             rows={19}
                             maxlength={maxLength}
                             disabled={isThinking}
-                            placeholder={'Start typing here...'}
+                            placeholder={'Enter instruction...'}
                             bind:value={instruction}
                         />
+                        <div class="text-secondary text-end text-count">
+                            <div>{instruction?.length || 0}/{maxLength}</div>
+                        </div>
                     </div>
                 </div>
             </Col>
-            <Col lg="3">
-                <InstructionState bind:states={states} disabled={isThinking} />
+            <Col lg="5" class="instruction-gap">
+                <Card>
+                    <CardBody>
+                        
+                        <NavBar
+                            id={'instruction-nav-container'}
+                            disableDefaultStyles
+                            containerClasses={'nav-tabs-secondary'}
+                        >
+                            {#each tabs as tab, idx}
+                            <NavItem
+                                containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 2 ? tabs.length : 3})`}
+                                navBtnStyles={'text-transform: none;'}
+                                navBtnId={`${tab.name}-tab`}
+                                dataBsTarget={`#${tab.name}-tab-pane`}
+                                ariaControls={`${tab.name}-tab-pane`}
+                                navBtnText={tab.displayText}
+                                active={tab.name === selectedTab}
+                                onClick={() => handleTabClick(tab.name)}
+                            />
+                            {/each}
+                        </NavBar>
+                        
+                        <div class:hide={selectedTab !== 'instruction-template'}>
+                            <InstructionTemplate
+                                agents={agents}
+                                disabled={isThinking}
+                                on:agentSelected={e => onAgentSelected(e)}
+                            />
+                        </div>
+                        <div class:hide={selectedTab !== 'instruction-llm'}>
+                            <InstructionLlm
+                                llmConfigs={llmConfigs}
+                                disabled={isThinking}
+                                selectedProvider={selectedProvider}
+                                selectedModel={selectedModel}
+                                on:llmSelected={e => onLlmSelected(e)}
+                            />
+                        </div>
+                        <div class:hide={selectedTab !== 'instruction-states'}>
+                            <InstructionState
+                                bind:states={states}
+                                disabled={isThinking}
+                            />
+                        </div>
+                    </CardBody>
+                </Card>
+                
             </Col>
         </Row>
     </div>
diff --git a/src/routes/page/instruction/instruction-components/instruction-llm.svelte b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
new file mode 100644
index 00000000..b419f719
--- /dev/null
+++ b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
@@ -0,0 +1,105 @@
+<script>
+    import { afterUpdate, createEventDispatcher, onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+
+    const svelteDispatch = createEventDispatcher();
+
+    /** @type {import('$commonTypes').LlmConfig[]} */
+    export let llmConfigs = [];
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+    /** @type {import('$commonTypes').LlmConfig?} */
+    export let selectedProvider = null;
+
+    /** @type {any} */
+    export let selectedModel = null;
+
+    /** @type {any[]} */
+    let providerOptions = [];
+    /** @type {any[]} */
+    let modelOptions = [];
+
+    afterUpdate(() => {
+        if (selectedProvider) {
+            onProviderChanged();
+        }
+    });
+
+    $: {
+        collectLlmOptions(llmConfigs);
+    }
+
+    /** @param {import('$commonTypes').LlmConfig[]} llmConfigs */
+    function collectLlmOptions(llmConfigs) {
+        providerOptions = llmConfigs?.map(x => ({
+            id: x.provider,
+            name: x.provider
+        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+    }
+
+    /** @param {any} e */
+    function selectProvider(e) {
+        const selected = e.target.value || null;
+        selectedProvider = llmConfigs?.find(x => x.provider === selected) || null;
+        onProviderChanged();
+        console.log(selectedModel, modelOptions);
+        disPatchEvent();
+    }
+
+    /** @param {any} e */
+    function selectModel(e) {
+        const selected = e.target.value || null;
+        selectedModel = modelOptions.find(x => x.id === selected);
+        disPatchEvent();
+    }
+
+    /** @param {any?} targetModel */
+    function onProviderChanged(targetModel = null) {
+        modelOptions = selectedProvider?.models?.map(x => ({
+            id: x.name,
+            name: x.name
+        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+
+        if (!!targetModel) {
+            selectedModel = modelOptions.find(x => x.name === targetModel) || null;
+        } else {
+            selectedModel = modelOptions.length > 0 ? modelOptions[0] : null;
+        }
+    }
+
+    function disPatchEvent() {
+        svelteDispatch('llmSelected', {
+            provider: selectedProvider,
+            model: selectedModel?.name
+        });
+    }
+</script>
+
+
+<div class="instruct-setting-section instruct-setting-padding">
+    <div class="instruct-setting-item">
+        <div class="instruct-setting-dropdown">
+            <div class="text-primary fw-bold mb-1">Provider</div>
+            <select class="form-select" id="provider" value={selectedProvider?.provider || null} disabled={disabled} on:change={e => selectProvider(e)}>
+                <option value={null} disabled selected>{$_('Select Provider')}</option>
+                {#each providerOptions as op}
+                    <option value={`${op.id}`} selected={op.id === selectedProvider?.provider}>{$_(`${op.name}`)}</option>
+                {/each}
+            </select>
+        </div>
+    </div>
+
+    <div class="instruct-setting-item">
+        <div class="instruct-setting-dropdown">
+            <div class="text-primary fw-bold mb-1">Model</div>
+            <select class="form-select" id="model" value={selectedModel?.id || null} disabled={disabled} on:change={e => selectModel(e)}>
+                <option value={null} disabled selected>{$_('Select Model')}</option>
+                {#each modelOptions as op}
+                    <option value={`${op.id}`} selected={op.id === selectedModel?.id}>{$_(`${op.name}`)}</option>
+                {/each}
+            </select>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/instruction-components/instruction-setting.svelte b/src/routes/page/instruction/instruction-components/instruction-setting.svelte
deleted file mode 100644
index 475d5dbf..00000000
--- a/src/routes/page/instruction/instruction-components/instruction-setting.svelte
+++ /dev/null
@@ -1,230 +0,0 @@
-<script>
-    import { createEventDispatcher, onMount } from 'svelte';
-    import { fly } from 'svelte/transition';
-	import { _ } from 'svelte-i18n';
-	import { Col, Row, Button } from '@sveltestrap/sveltestrap';
-
-
-    const svelteDispatch = createEventDispatcher();
-
-    const DEFAULT_PROVIDER = 'openai';
-    const DEFAULT_MODEL = 'gpt-4o-mini';
-
-    /** @type {import('$agentTypes').AgentModel[]} */
-    export let agents = [];
-
-    /** @type {import('$commonTypes').LlmConfig[]} */
-    export let llmConfigs = [];
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {boolean} */
-    let showSetting = true;
-
-    /** @type {any[]} */
-    let agentOptions = [];
-    /** @type {any[]} */
-    let templateOptions = [];
-    /** @type {any[]} */
-    let providerOptions = [];
-    /** @type {any[]} */
-    let modelOptions = [];
-
-    /** @type {import('$agentTypes').AgentModel?} */
-    let selectedAgent = null;
-    /** @type {any} */
-    let selectedTemplate = null;
-    /** @type {import('$commonTypes').LlmConfig?} */
-    let selectedProvider = null;
-    /** @type {any} */
-    let selectedModel = null;
-
-    $: {
-        collectAgentOptions(agents);
-        collectLlmOptions(llmConfigs);
-    }
-
-    /**
-	 * @param {import('$agentTypes').AgentModel[]} agents
-	 */
-    function collectAgentOptions(agents) {
-        agentOptions = agents?.map(x => ({
-            id: x.id,
-            name: x.name
-        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
-    }
-
-    /** @param {import('$commonTypes').LlmConfig[]} llmConfigs */
-    function collectLlmOptions(llmConfigs) {
-        providerOptions = llmConfigs?.map(x => ({
-            id: x.provider,
-            name: x.provider
-        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
-    }
-
-    /** @param {any} e */
-    function selectAgent(e) {
-        const selected = e.target.value || null;
-        selectedTemplate = null;
-        selectedAgent = agents?.find(x => x.id === selected) || null;
-        templateOptions = selectedAgent?.templates?.map(x => ({
-            id: x.name,
-            name: x.name,
-            content: x.content
-        })) || [];
-
-        const provider = selectedAgent?.llm_config?.provider || DEFAULT_PROVIDER;
-        const model = selectedAgent?.llm_config?.model || DEFAULT_MODEL;
-        selectedProvider = llmConfigs?.find(x => x.provider === provider) || null;
-        onProviderChanged(model);
-
-        svelteDispatch('agentSelected', {
-            selectedAgent: selectedAgent,
-            selectedTemplate: selectedTemplate,
-            selectedProvider: selectedProvider?.provider,
-            selectedModel: selectedModel?.name
-        });
-    }
-
-    /** @param {any} e */
-    function selectTemplate(e) {
-        const selected = e.target.value || null;
-        selectedTemplate = templateOptions.find(x => x.id === selected) || null;
-        svelteDispatch('agentSelected', {
-            selectedAgent: selectedAgent,
-            selectedTemplate: selectedTemplate,
-            selectedProvider: selectedProvider?.provider,
-            selectedModel: selectedModel?.name
-        });
-    }
-
-    /** @param {any} e */
-    function selectProvider(e) {
-        const selected = e.target.value || null;
-        selectedProvider = llmConfigs?.find(x => x.provider === selected) || null;
-        onProviderChanged();
-
-        svelteDispatch('llmSelected', {
-            selectedProvider: selectedProvider?.provider,
-            selectedModel: selectedModel?.name
-        });
-    }
-
-    /** @param {any} e */
-    function selectModel(e) {
-        const selected = e.target.value || null;
-        selectedModel = modelOptions.find(x => x.id === selected);
-
-        svelteDispatch('llmSelected', {
-            selectedProvider: selectedProvider?.provider,
-            selectedModel: selectedModel?.name
-        });
-    }
-
-    /** @param {any?} targetModel */
-    function onProviderChanged(targetModel = null) {
-        modelOptions = selectedProvider?.models?.map(x => ({
-            id: x.name,
-            name: x.name
-        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
-
-        if (!!targetModel) {
-            selectedModel = modelOptions.find(x => x.name === targetModel) || null;
-        } else {
-            selectedModel = modelOptions.length > 0 ? modelOptions[0] : null;
-        }
-    }
-</script>
-
-<div class="instruct-header text-primary fw-bold mb-2">
-    <div class="line-align-center">
-        {#if showSetting}
-            {'Settings'}
-        {/if}
-    </div>
-    <div>
-        <Button
-            color={showSetting ? 'secondary' : 'info'}
-            data-bs-toggle="tooltip"
-            data-bs-placement="bottom"
-            title={`${showSetting ? 'Close' : 'Open'} Settings`}
-            on:click={() => showSetting = !showSetting}
-        >
-            <div class="state-search-btn">
-                <div>
-                    {#if showSetting}
-                        <i class="bx bx-hide" />
-                    {:else}
-                        <i class="bx bx-cog" />
-                    {/if}
-                </div>
-            </div>
-        </Button>	
-    </div>
-</div>
-
-{#if showSetting}
-<div
-    in:fly={{ y: -10, duration: 500 }}
-    out:fly={{ y: -10, duration: 200 }}
->
-    <Row class="instruct-setting-container">
-        <Col lg="6">
-            <div class="instruct-setting-section instruction-border instruct-setting-padding">
-                <div class="instruct-setting-item">
-                    <div class="instruct-setting-dropdown">
-                        <div class="text-primary fw-bold mb-1">Agent</div>
-                        <select class="form-select" id="agent" value={selectedAgent?.id || null} disabled={disabled} on:change={e => selectAgent(e)}>
-                            <option value={null}>{$_('Select Agent')}</option>
-                            {#each agentOptions as op}
-                                <option value={`${op.id}`} selected={op.id === selectedAgent?.id}>{$_(`${op.name}`)}</option>
-                            {/each}
-                        </select>
-                    </div>
-                </div>
-    
-                <div class="instruct-setting-item">
-                    <div class="instruct-setting-dropdown">
-                        <div class="text-primary fw-bold mb-1">Template</div>
-                        <select class="form-select" id="template" value={selectedTemplate?.id || null} disabled={disabled} on:change={e => selectTemplate(e)}>
-                            <option value={null}>{$_('Select Template')}</option>
-                            {#each templateOptions as op}
-                                <option value={`${op.id}`} selected={op.id === selectedTemplate?.id}>{$_(`${op.name}`)}</option>
-                            {/each}
-                        </select>
-                    </div>
-                </div>
-            </div>
-        </Col>
-    
-        <Col lg="6">
-            <div class="instruct-setting-section instruction-border instruct-setting-padding">
-                <div class="instruct-setting-item">
-                    <div class="instruct-setting-dropdown">
-                        <div class="text-primary fw-bold mb-1">LLM Provider</div>
-                        <select class="form-select" id="provider" value={selectedProvider?.provider || null} disabled={disabled} on:change={e => selectProvider(e)}>
-                            <option value={null} disabled selected>{$_('Select Provider')}</option>
-                            {#each providerOptions as op}
-                                <option value={`${op.id}`} selected={op.id === selectedProvider?.provider}>{$_(`${op.name}`)}</option>
-                            {/each}
-                        </select>
-                    </div>
-                </div>
-    
-                <div class="instruct-setting-item">
-                    <div class="instruct-setting-dropdown">
-                        <div class="text-primary fw-bold mb-1">LLM Model</div>
-                        <select class="form-select" id="model" value={selectedModel?.id || null} disabled={disabled} on:change={e => selectModel(e)}>
-                            <option value={null} disabled selected>{$_('Select Model')}</option>
-                            {#each modelOptions as op}
-                                <option value={`${op.id}`} selected={op.id === selectedModel?.id}>{$_(`${op.name}`)}</option>
-                            {/each}
-                        </select>
-                    </div>
-                </div>
-            </div>
-        </Col>
-    </Row>
-</div>
-{/if}
\ No newline at end of file
diff --git a/src/routes/page/instruction/instruction-components/instruction-state.svelte b/src/routes/page/instruction/instruction-components/instruction-state.svelte
index 9c155b6d..31ebfc41 100644
--- a/src/routes/page/instruction/instruction-components/instruction-state.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-state.svelte
@@ -1,6 +1,4 @@
 <script>
-    import { onMount } from 'svelte';
-	import { _ } from 'svelte-i18n';
 	import { Button, Input } from '@sveltestrap/sveltestrap';
 
     const maxLength = 3000;
@@ -29,66 +27,61 @@
 </script>
 
 
-<div class="instruction-gap">
-    <div class="instruct-header text-primary fw-bold mb-2">
-        {'States'}
-    </div>
-    <div class="instruct-setting-section instruction-border instruct-setting-padding">
-        <div class="instruct-state-container">
-            {#each states as state, idx}
-                <div class="instruct-state-item">
-                    <div>
-                        {#if idx === 0}
-                        <div class="text-primary mb-1">
-                            {'Key'}
-                        </div>
-                        {/if}
-                        <Input
-                            type="text"
-                            bind:value={state.key}
-                            maxlength={maxLength}
-                            disabled={disabled}
-                            placeholder="Enter a state"
-                        />
+<div class="instruct-setting-section instruct-setting-padding">
+    <div class="instruct-state-container">
+        {#each states as state, idx}
+            <div class="instruct-state-item">
+                <div>
+                    {#if idx === 0}
+                    <div class="text-primary mb-1">
+                        {'Key'}
                     </div>
+                    {/if}
+                    <Input
+                        type="text"
+                        bind:value={state.key}
+                        maxlength={maxLength}
+                        disabled={disabled}
+                        placeholder="Enter a state"
+                    />
+                </div>
+                <div>
+                    {#if idx === 0}
+                    <div class="text-primary mb-1">
+                        {'Value'}
+                    </div>
+                    {/if}
+                    <Input
+                        type="text"
+                        bind:value={state.value}
+                        maxlength={maxLength}
+                        disabled={disabled}
+                        placeholder="Enter a value"
+                    />
+                </div>
+                <div class="line-align-center" style={`flex: 0 0 13px; margin-top: ${idx === 0 ? '23px' : '0px'}`}>
                     <div>
-                        {#if idx === 0}
-                        <div class="text-primary mb-1">
-                            {'Value'}
-                        </div>
-                        {/if}
-                        <Input
-                            type="text"
-                            bind:value={state.value}
-                            maxlength={maxLength}
-                            disabled={disabled}
-                            placeholder="Enter a value"
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <!-- svelte-ignore a11y-no-static-element-interactions -->
+                        <i
+                            class="bx bx-no-entry text-danger clickable"
+                            on:click={() => removeState(idx)}
                         />
                     </div>
-                    <div class="line-align-center" style={`flex: 0 0 13px; margin-top: ${idx === 0 ? '23px' : '0px'}`}>
-                        <div>
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <!-- svelte-ignore a11y-no-static-element-interactions -->
-                            <i
-                                class="bx bx-no-entry text-danger clickable"
-                                on:click={() => removeState(idx)}
-                            />
-                        </div>
-                    </div>
                 </div>
-            {/each}
-            {#if states.length < limit}
-            <div class="text-center">
-                <Button 
-                    color="link"
-                    style="padding-left: 0px;"
-                    disabled={disabled}
-                    on:click={() => addState()}
-                >
-                    Add +
-                </Button>
             </div>
-            {/if}
+        {/each}
+        {#if states.length < limit}
+        <div class="text-center">
+            <Button 
+                color="link"
+                style="padding-left: 0px;"
+                disabled={disabled}
+                on:click={() => addState()}
+            >
+                Add +
+            </Button>
         </div>
+        {/if}
     </div>
-</div>
\ No newline at end of file
+</div>`
\ No newline at end of file
diff --git a/src/routes/page/instruction/instruction-components/instruction-template.svelte b/src/routes/page/instruction/instruction-components/instruction-template.svelte
new file mode 100644
index 00000000..578f28b9
--- /dev/null
+++ b/src/routes/page/instruction/instruction-components/instruction-template.svelte
@@ -0,0 +1,91 @@
+<script>
+    import { createEventDispatcher, onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+
+    const svelteDispatch = createEventDispatcher();
+
+    /** @type {import('$agentTypes').AgentModel[]} */
+    export let agents = [];
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+    /** @type {any[]} */
+    let agentOptions = [];
+    /** @type {any[]} */
+    let templateOptions = [];
+
+    /** @type {import('$agentTypes').AgentModel?} */
+    let selectedAgent = null;
+    /** @type {any} */
+    let selectedTemplate = null;
+
+    $: {
+        collectAgentOptions(agents);
+    }
+
+    /**
+	 * @param {import('$agentTypes').AgentModel[]} agents
+	 */
+    function collectAgentOptions(agents) {
+        agentOptions = agents?.filter(x => x.templates?.length > 0).map(x => ({
+            id: x.id,
+            name: x.name
+        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+    }
+
+    /** @param {any} e */
+    function selectAgent(e) {
+        const selected = e.target.value || null;
+        selectedTemplate = null;
+        selectedAgent = agents?.find(x => x.id === selected) || null;
+        templateOptions = selectedAgent?.templates?.map(x => ({
+            id: x.name,
+            name: x.name,
+            content: x.content
+        })) || [];
+
+        disPatchEvent();
+    }
+
+    /** @param {any} e */
+    function selectTemplate(e) {
+        const selected = e.target.value || null;
+        selectedTemplate = templateOptions.find(x => x.id === selected) || null;
+        disPatchEvent();
+    }
+
+    function disPatchEvent() {
+        svelteDispatch('agentSelected', {
+            agent: selectedAgent,
+            template: selectedTemplate
+        });
+    }
+</script>
+
+
+<div class="instruct-setting-section instruct-setting-padding">
+    <div class="instruct-setting-item">
+        <div class="instruct-setting-dropdown">
+            <div class="text-primary fw-bold mb-1">Agent</div>
+            <select class="form-select" id="agent" value={selectedAgent?.id || null} disabled={disabled} on:change={e => selectAgent(e)}>
+                <option value={null}>{$_('Select Agent')}</option>
+                {#each agentOptions as op}
+                    <option value={`${op.id}`} selected={op.id === selectedAgent?.id}>{$_(`${op.name}`)}</option>
+                {/each}
+            </select>
+        </div>
+    </div>
+
+    <div class="instruct-setting-item">
+        <div class="instruct-setting-dropdown">
+            <div class="text-primary fw-bold mb-1">Template</div>
+            <select class="form-select" id="template" value={selectedTemplate?.id || null} disabled={disabled} on:change={e => selectTemplate(e)}>
+                <option value={null}>{$_('Select Template')}</option>
+                {#each templateOptions as op}
+                    <option value={`${op.id}`} selected={op.id === selectedTemplate?.id}>{$_(`${op.name}`)}</option>
+                {/each}
+            </select>
+        </div>
+    </div>
+</div>
\ No newline at end of file