diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
index 001111ac..8dea0b8b 100644
--- a/src/lib/helpers/enums.js
+++ b/src/lib/helpers/enums.js
@@ -249,6 +249,14 @@ const reasoningEffortLevel = {
 };
 export const ReasoningEffortLevel = Object.freeze(reasoningEffortLevel);
 
+const responseFormat = {
+    Json: "json",
+    Xml: "xml",
+    Md: "markdown",
+    Yaml: "yaml"
+};
+export const ResponseFormat = Object.freeze(responseFormat);
+
 const timeRange = {
     Last15Minutes: "Last 15 minutes",
     Last30Minutes: "Last 30 minutes",
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index d1ca7bdd..a18444cb 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -8,6 +8,8 @@
  * @property {string?} [uid]
  * @property {string} name
  * @property {string} content
+ * @property {string?} [response_format]
+ * @property {AgentTemplateConfig?} [llm_config]
  */
 
 /**
@@ -23,6 +25,14 @@
  * @property {any} [realtime]
  */
 
+/**
+ * @typedef {Object} AgentTemplateConfig
+ * @property {string?} provider 
+ * @property {string?} model
+ * @property {number?} [max_output_tokens]
+ * @property {string?} [reasoning_effort_level]
+ */
+
 
 /**
  * @typedef {Object} RouterSettings
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
index a9bb31c0..c43ea29e 100644
--- a/src/lib/scss/app.scss
+++ b/src/lib/scss/app.scss
@@ -94,6 +94,7 @@ File: Main Css File
 @import "custom/pages/jobs";
 @import "custom/pages/conversation";
 @import "custom/pages/agent";
+@import "custom/pages/agent_template";
 @import "custom/pages/knowledgebase";
 @import "custom/pages/users";
 @import "custom/pages/roles";
diff --git a/src/lib/scss/custom/pages/_agent_template.scss b/src/lib/scss/custom/pages/_agent_template.scss
new file mode 100644
index 00000000..c175d795
--- /dev/null
+++ b/src/lib/scss/custom/pages/_agent_template.scss
@@ -0,0 +1,111 @@
+.template-content-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 0;
+    position: relative;
+    align-items: stretch;
+    height: 380px;
+
+    .template-editor-area {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+
+        .template-textarea {
+            flex: 1;
+            scrollbar-width: thin;
+            resize: none;
+        }
+    }
+
+    .config-toggle-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        cursor: pointer;
+        color: var(--bs-primary);
+        font-size: 18px;
+        user-select: none;
+        flex-shrink: 0;
+        opacity: 0.7;
+        transition: opacity 0.2s ease;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .template-config-panel {
+        width: 0;
+        overflow: hidden;
+        transition: width 0.3s ease;
+        border-left: none;
+        flex-shrink: 0;
+
+        &.expanded {
+            width: 260px;
+            border-left: 1px solid var(--bs-border-color);
+            overflow-y: auto;
+            scrollbar-width: thin;
+        }
+
+        .template-config-content {
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+
+            .config-section {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .config-field {
+                display: flex;
+                flex-direction: column;
+                gap: 2px;
+            }
+
+            .config-label {
+                font-size: 0.8rem;
+                font-weight: 500;
+                margin-bottom: 0;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+
+        .config-toggle-btn {
+            width: 100%;
+            height: 24px;
+            flex-direction: row;
+
+            .mdi {
+                transform: rotate(90deg);
+            }
+        }
+
+        .template-config-panel {
+            width: 100% !important;
+            height: 0;
+            transition: height 0.3s ease;
+            border-left: none;
+
+            &.expanded {
+                width: 100% !important;
+                height: auto;
+                border-left: none;
+                border-top: 1px solid var(--bs-border-color);
+            }
+        }
+    }
+}
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 209f072c..84d0d2d6 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -14,9 +14,9 @@
 	import { myInfo } from '$lib/services/auth-service';
     import AgentInstruction from './agent-components/agent-instruction.svelte';
 	import AgentOverview from './agent-components/agent-overview.svelte';
+    import AgentTemplate from './agent-components/templates/agent-template.svelte';
     import AgentFunction from './agent-components/agent-function.svelte';
     import AgentTabs from './agent-tabs.svelte';
-    import AgentTemplate from './agent-components/agent-template.svelte';
 
     /** @type {import('$agentTypes').AgentModel} */
     let agent = $state(/** @type {any} */ (undefined));
diff --git a/src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte b/src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte
new file mode 100644
index 00000000..e1f8c571
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte
@@ -0,0 +1,240 @@
+<script>
+    import { onMount } from 'svelte';
+    import { INTEGER_REGEX } from '$lib/helpers/constants';
+    import { LlmModelCapability, LlmModelType, ReasoningEffortLevel, ResponseFormat } from '$lib/helpers/enums';
+    import { getLlmConfigs } from '$lib/services/llm-provider-service';
+
+    /**
+     * @type {{
+     *   template: import('$agentTypes').AgentTemplate,
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        template = $bindable(),
+        handleAgentChange = () => {}
+    } = $props();
+
+    /** @type {import('$commonTypes').LabelValuePair[]} */
+    const defaultReasonLevelOptions = [
+        { value: '', label: '' },
+        ...Object.entries(ReasoningEffortLevel).map(([k, v]) => ({
+            value: v,
+            label: v
+        }))
+    ];
+
+    const responseFormatOptions = [
+        { value: '', label: '' },
+        ...Object.values(ResponseFormat).map(v => ({
+            value: v,
+            label: v
+        }))
+    ];
+
+    /** @type {import('$commonTypes').LlmConfig[]} */
+    let llmConfigs = $state([]);
+
+    /** @type {string[]} */
+    let providers = $state([]);
+
+    /** @type {import('$commonTypes').LlmModelSetting[]} */
+    let models = $state([]);
+
+    /** @type {import('$commonTypes').LabelValuePair[]} */
+    let reasoningLevelOptions = $state(defaultReasonLevelOptions);
+
+    let isReasoningModel = $derived(models.find(x => x.name === template.llm_config?.model)?.reasoning != null);
+
+    onMount(async () => {
+        try {
+            const res = await getLlmConfigs();
+            llmConfigs = res || [];
+            const chatProviders = llmConfigs.filter(x =>
+                x.models?.some(y => y.type === LlmModelType.Chat || y.capabilities?.includes(LlmModelCapability.Chat))
+            );
+            providers = ['', ...chatProviders.map(x => x.provider)];
+            if (template.llm_config?.provider) {
+                models = getLlmModels(template.llm_config.provider);
+                reasoningLevelOptions = getReasoningLevelOptions(template.llm_config?.model);
+            }
+        } catch {
+            llmConfigs = [];
+            providers = [''];
+        }
+    });
+
+    /** @param {string} provider */
+    function getLlmModels(provider) {
+        return llmConfigs.find(x => x.provider === provider)?.models
+            ?.filter(x => x.type === LlmModelType.Chat || x.capabilities?.includes(LlmModelCapability.Chat)) || [];
+    }
+
+    /** @param {any} e */
+    function changeResponseFormat(e) {
+        template.response_format = e.target.value || null;
+        handleAgentChange();
+    }
+
+    /** @param {string | null | undefined} model */
+    function getReasoningLevelOptions(model) {
+        let options = defaultReasonLevelOptions;
+        const foundModel = models.find(x => x.name === model);
+        if (foundModel?.reasoning == null) {
+            return options;
+        }
+
+        const defaultOptions = foundModel?.reasoning?.parameters?.EffortLevel?.options;
+        if (defaultOptions?.length > 0) {
+            options = [
+                { value: '', label: '' },
+                // @ts-ignore
+                ...defaultOptions.map(x => ({ value: x, label: x }))
+            ];
+        }
+
+        return options;
+    }
+
+    /** @param {any} e */
+    function changeProvider(e) {
+        const provider = e.target.value;
+        if (!template.llm_config) {
+            template.llm_config = { provider: null, model: null };
+        }
+        template.llm_config.provider = provider || null;
+        if (!provider) {
+            models = [];
+            template.llm_config.model = null;
+            template.llm_config.reasoning_effort_level = null;
+            reasoningLevelOptions = defaultReasonLevelOptions;
+            handleAgentChange();
+            return;
+        }
+        models = getLlmModels(provider);
+        template.llm_config.model = models[0]?.name || null;
+        template.llm_config.reasoning_effort_level = null;
+        reasoningLevelOptions = getReasoningLevelOptions(template.llm_config.model);
+        handleAgentChange();
+    }
+
+    /** @param {any} e */
+    function changeModel(e) {
+        if (!template.llm_config) {
+            template.llm_config = { provider: null, model: null };
+        }
+        template.llm_config.model = e.target.value || null;
+        template.llm_config.reasoning_effort_level = null;
+        reasoningLevelOptions = getReasoningLevelOptions(template.llm_config.model);
+        handleAgentChange();
+    }
+
+    /** @param {any} e */
+    function changeMaxOutputToken(e) {
+        if (!template.llm_config) {
+            template.llm_config = { provider: null, model: null };
+        }
+        const value = Number(e.target.value) || 0;
+        template.llm_config.max_output_tokens = value;
+        handleAgentChange();
+    }
+
+    /** @param {any} e */
+    function changeReasoningEffortLevel(e) {
+        if (!template.llm_config) {
+            template.llm_config = { provider: null, model: null };
+        }
+        template.llm_config.reasoning_effort_level = e.target.value || null;
+        handleAgentChange();
+    }
+
+    /** @param {any} e */
+    function validateIntegerInput(e) {
+        const reg = new RegExp(INTEGER_REGEX, 'g');
+        if (e.key !== 'Backspace' && !reg.test(e.key)) {
+            e.preventDefault();
+        }
+    }
+</script>
+
+<div class="template-config-content">
+    <div class="config-section">
+        <h6 class="fw-semibold">Template Configuration</h6>
+        <div class="config-field">
+            <label for="tpl-response-format" class="form-label config-label">Response format</label>
+            <select class="form-select form-select-sm" id="tpl-response-format"
+                value={template.response_format || ''}
+                onchange={e => changeResponseFormat(e)}
+            >
+                {#each responseFormatOptions as option}
+                    <option value={option.value} selected={option.value === (template.response_format || '')}>
+                        {option.label}
+                    </option>
+                {/each}
+            </select>
+        </div>
+    </div>
+
+    <hr class="my-2" />
+
+    <div class="config-section">
+        <h6 class="fw-semibold">LLM Configuration</h6>
+        <div class="config-field">
+            <label for="tpl-provider" class="form-label config-label">Provider</label>
+            <select class="form-select form-select-sm" id="tpl-provider"
+                value={template.llm_config?.provider || ''}
+                onchange={e => changeProvider(e)}
+            >
+                {#each providers as option}
+                    <option value={option} selected={option === (template.llm_config?.provider || '')}>
+                        {option}
+                    </option>
+                {/each}
+            </select>
+        </div>
+
+        <div class="config-field">
+            <label for="tpl-model" class="form-label config-label">Model</label>
+            <select class="form-select form-select-sm" id="tpl-model"
+                value={template.llm_config?.model || ''}
+                disabled={models.length === 0}
+                onchange={e => changeModel(e)}
+            >
+                {#each models as option}
+                    <option value={option.name} selected={option.name === (template.llm_config?.model || '')}>
+                        {option.name}
+                    </option>
+                {/each}
+            </select>
+        </div>
+
+        <div class="config-field">
+            <label for="tpl-max-tokens" class="form-label config-label">Max output tokens</label>
+            <input
+                class="form-control form-control-sm"
+                id="tpl-max-tokens"
+                type="number"
+                value={template.llm_config?.max_output_tokens || ''}
+                onkeydown={e => validateIntegerInput(e)}
+                onchange={e => changeMaxOutputToken(e)}
+            />
+        </div>
+
+        {#if isReasoningModel}
+        <div class="config-field">
+            <label for="tpl-reasoning" class="form-label config-label">Reasoning level</label>
+            <select class="form-select form-select-sm" id="tpl-reasoning"
+                value={template.llm_config?.reasoning_effort_level || ''}
+                onchange={e => changeReasoningEffortLevel(e)}
+            >
+                {#each reasoningLevelOptions as option}
+                    <option value={option.value} selected={option.value === (template.llm_config?.reasoning_effort_level || '')}>
+                        {option.label}
+                    </option>
+                {/each}
+            </select>
+        </div>
+        {/if}
+    </div>
+</div>
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte b/src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte
similarity index 66%
rename from src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
rename to src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte
index a2c6d4d0..d853632c 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte
@@ -1,9 +1,9 @@
 <script>
     import { onMount } from 'svelte';
     import { v4 as uuidv4 } from 'uuid';
-    import util from "lodash";
     import NavBar from '$lib/common/nav-bar/NavBar.svelte';
     import NavItem from '$lib/common/nav-bar/NavItem.svelte';
+    import AgentTemplateConfig from './agent-template-config.svelte';
 
     /**
      * @type {{
@@ -17,19 +17,31 @@
     } = $props();
 
     export function fetchTemplates() {
-        const candidates = inner_templates?.filter((x) => !!x.name?.trim())?.map(x => {
-            return { name: x.name.trim().toLowerCase(), content: x.content };
+        // Remove templates with empty names
+        const withNames = inner_templates.filter(x => !!x.name?.trim());
+
+        // Remove duplicates by name (keep first occurrence)
+        /** @type {Set<string>} */
+        const seen = new Set();
+        const unique = withNames.filter(x => {
+            const key = x.name.trim().toLowerCase();
+            if (seen.has(key)) return false;
+            seen.add(key);
+            return true;
         });
 
-        const prompts = [];
-        const groups = util.groupBy(candidates, (/** @type {any} */ x) => x.name);
-        for (const key in groups) {
-            if (groups[key]?.length > 0) {
-                prompts.push(groups[key][0]);
-            }
+        // Update inner state to reflect cleanup
+        inner_templates = unique;
+        if (!unique.find(x => x.uid === selected_template.uid)) {
+            selected_template = unique.length > 0 ? unique[0] : { ...defaultTemplate };
         }
 
-        return prompts;
+        return unique.map(x => ({
+            name: x.name.trim().toLowerCase(),
+            content: x.content,
+            response_format: x.response_format || null,
+            llm_config: x.llm_config || null
+        }));
     }
 
 
@@ -46,6 +58,9 @@
     /** @type {import('$agentTypes').AgentTemplate} */
     let selected_template = $state({ ...defaultTemplate });
 
+    /** @type {boolean} */
+    let showConfig = $state(false);
+
     onMount(() => {
         init();
     });
@@ -55,7 +70,9 @@
             ...agent.templates?.map(x => ({
                 uid: uuidv4(),
                 name: x.name,
-                content: x.content
+                content: x.content,
+                response_format: x.response_format || null,
+                llm_config: x.llm_config || null
             })) || []
         ];
 
@@ -122,6 +139,10 @@
         }
         handleAgentChange();
     }
+
+    function toggleConfig() {
+        showConfig = !showConfig;
+    }
 </script>
 
 
@@ -179,16 +200,41 @@
                 />
                 {/each}
             </NavBar>
-            <textarea
-                class="form-control"
-                style="scrollbar-width: thin; resize: none;"
-                placeholder="Enter your content"
-                value={selected_template.content}
-                rows={15}
-                oninput={(e) => changePrompt(e)}
-                onkeydown={(e) => onKeyDown(e)}
-            ></textarea>
+
+            <div class="template-content-wrapper">
+                <div class="template-editor-area">
+                    <textarea
+                        class="form-control template-textarea"
+                        placeholder="Enter your content"
+                        value={selected_template.content}
+                        oninput={(e) => changePrompt(e)}
+                        onkeydown={(e) => onKeyDown(e)}
+                    ></textarea>
+                </div>
+
+                <!-- Config toggle button -->
+                <div
+                    class="config-toggle-btn"
+                    role="button"
+                    tabindex="0"
+                    title={showConfig ? 'Hide config' : 'Show config'}
+                    onclick={() => toggleConfig()}
+                    onkeydown={(e) => e.key === 'Enter' && toggleConfig()}
+                >
+                    <i class="mdi {showConfig ? 'mdi-chevron-right' : 'mdi-chevron-left'}"></i>
+                </div>
+
+                <!-- Config panel -->
+                <div class="template-config-panel" class:expanded={showConfig}>
+                    {#if showConfig}
+                        <AgentTemplateConfig
+                            bind:template={selected_template}
+                            {handleAgentChange}
+                        />
+                    {/if}
+                </div>
+            </div>
             {/if}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>