diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 8e8c10e4..312b42e2 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -52,6 +52,7 @@
  * @property {boolean} merge_utility - Merge utility
  * @property {number?} [max_message_count]
  * @property {AgentUtility[]} utilities - The agent utilities.
+ * @property {AgentKnowledgeBase[]} knowledge_bases - The agent knowledge bases.
  * @property {Date} created_datetime
  * @property {Date} updated_datetime
  * @property {AgentLlmConfig} llm_config - LLM settings.
@@ -126,6 +127,12 @@
  * @property {UtilityBase[]} templates
  */
 
+/**
+ * @typedef {Object} AgentKnowledgeBase
+ * @property {string} name 
+ * @property {boolean} disabled 
+ */
+
 /**
  * @typedef {Object} UtilityBase
  * @property {string} name
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 3a8781a2..6ca89a71 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -19,6 +19,7 @@
     import Swal from 'sweetalert2'
 	import { goto } from '$app/navigation';
 	import AgentUtility from './agent-utility.svelte';
+	import AgentKnowledgeBase from './agent-knowledge-base.svelte';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
 	
 	
@@ -30,6 +31,8 @@
     let agentPromptCmp = null;
     /** @type {any} */
     let agentUtilityCmp = null;
+    /** @type {any} */
+    let agentKnowledgeBaseCmp = null;
 
     /** @type {boolean} */
     let isLoading = false;
@@ -70,6 +73,7 @@
         fetchJsonContent();
         fetchPrompts();
         fetchUtilties();
+        fetchKnowledgeBases();
 
         agent = {
             ...agent,
@@ -78,6 +82,7 @@
             channel_instructions: agent.channel_instructions || [],
             profiles: agent.profiles?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || [],
             utilities: agent.utilities || [],
+            knowledge_bases: agent.knowledge_bases || [],
             max_message_count: Number(agent.max_message_count) > 0 ? Number(agent.max_message_count) : null
         };
         isLoading = true;
@@ -121,6 +126,11 @@
         agent.utilities = list || [];
     }
 
+    function fetchKnowledgeBases() {
+        const list = agentKnowledgeBaseCmp?.fetchKnowledgeBases();
+        agent.knowledge_bases = list || [];
+    }
+
     function refreshChannelPrompts() {
         agentPromptCmp?.refreshChannelPrompts();
     }
@@ -167,6 +177,9 @@
             <div class="agent-detail-section">
                 <AgentUtility bind:this={agentUtilityCmp} agent={agent} />
             </div>
+            <div class="agent-detail-section">
+                <AgentKnowledgeBase bind:this={agentKnowledgeBaseCmp} agent={agent} />
+            </div>
         </Col>
         <Col class="section-min-width" style="flex: 65%;">
             <div class="agent-detail-section">
diff --git a/src/routes/page/agent/[agentId]/agent-knowledge-base.svelte b/src/routes/page/agent/[agentId]/agent-knowledge-base.svelte
new file mode 100644
index 00000000..e4c2a2f6
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-knowledge-base.svelte
@@ -0,0 +1,173 @@
+<script>
+    import { onMount } from 'svelte';
+    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
+	import { getVectorKnowledgeCollections } from '$lib/services/knowledge-base-service';
+
+    const limit = 5;
+
+    /** @type {import('$agentTypes').AgentModel} */
+    export let agent;
+
+    export const fetchKnowledgeBases = () => {
+        const candidates = innerKnowledgeBases?.filter(x => !!x.name)?.map(x => {
+            return {
+                name: x.name,
+                disabled: x.disabled
+            };
+        });
+        candidates.map(x => {
+            console.log(x.disabled);
+            console.log(x.name);
+        });
+        refresh(candidates);
+        return candidates;
+    }
+
+    /** @type {string[]} */
+    let knowledgeBaseOptions = [];
+
+    /** @type {import('$agentTypes').AgentKnowledgeBase[]} */
+    let innerKnowledgeBases = [];
+
+    onMount(async () =>{
+        const type = 'question-answer';
+        getVectorKnowledgeCollections(type).then(data => {
+            const names = data || [];
+            knowledgeBaseOptions = ["", ...names];
+        });
+        init();
+    });
+
+    function init() {
+        const list = agent.knowledge_bases?.map(x => {
+            return {
+                ...x,
+                disabled: false
+            };
+        }) || [];
+        refresh(list);
+    }
+
+    /**
+	 * @param {any} e
+	 * @param {number} idx
+	 */
+    function changeKnowledgeBase(e, idx) {
+        const found = innerKnowledgeBases.find((_, index) => index === idx);
+        if (!found) return;
+        
+        const name = e.target.value;
+        found.name = name;
+        refresh(innerKnowledgeBases);
+    }
+
+    function addKnowledgeBase() {
+        innerKnowledgeBases = [
+            ...innerKnowledgeBases,
+            {
+                name: '',
+                disabled: false
+            }
+        ];
+    }
+
+    /** @param {number} idx */
+    function deleteKnowledgeBase(idx) {
+        innerKnowledgeBases = innerKnowledgeBases.filter((_, index) => index !== idx);
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} uid
+	 */
+    function toggleKnowledgeBase(e, uid) {
+        const found = innerKnowledgeBases.find((_, index) => index === uid);
+        if (!found) return;
+
+        found.disabled = !e.target.checked;
+        refresh(innerKnowledgeBases);
+    }
+
+
+    /** @param {import('$agentTypes').AgentKnowledgeBase[]} list */
+    function refresh(list) {
+        innerKnowledgeBases = list?.map(x => {
+            return {
+                name: x.name,
+                disabled: x.disabled
+            }
+        }) || [];
+    }
+
+</script>
+
+<Card>
+    <CardBody>
+        <div class="text-center">
+            <h5 class="mt-1 mb-3">Knowledge Bases</h5>
+        </div>
+
+        <div class="agent-utility-container">
+            {#each innerKnowledgeBases as knowledge, uid (uid)}
+                <div class="utility-wrapper">
+                    <div class="utility-row utility-row-primary">
+                        <div class="utility-label fw-bold">
+                            <div class="line-align-center">{`Collection #${uid + 1}`}</div>
+                            <div class="utility-tooltip">
+                                <div class="line-align-center">
+                                    <Input
+                                        type="checkbox"
+                                        checked={!knowledge.disabled}
+                                        on:change={e => toggleKnowledgeBase(e, uid)}
+                                    />
+                                </div>
+                                <div
+                                    class="line-align-center"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-placement="top"
+                                    title="Uncheck to disable utility"
+                                >
+                                    <i class="bx bx-info-circle" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="utility-value">
+                            <div class="utility-input line-align-center">
+                                <Input
+                                    type="select"
+                                    value={knowledge.name}
+                                    disabled={knowledge.disabled}
+                                    on:change={e => changeKnowledgeBase(e, uid)}
+                                >
+                                    {#each [...knowledgeBaseOptions, "one.data-assistant"] as option}
+                                        <option value={option} selected={option == knowledge.name}>{option}</option>
+                                    {/each}
+                                </Input>
+                            </div>
+                            <div class="utility-delete line-align-center">
+                                <i
+                                    class="bx bxs-no-entry text-danger clickable"
+                                    role="link"
+                                    tabindex="0"
+                                    on:keydown={() => {}}
+                                    on:click={() => deleteKnowledgeBase(uid)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {/each}
+
+            {#if innerKnowledgeBases.length < limit}
+                <div class="add-utility">
+                    <Button color="primary" on:click={() => addKnowledgeBase()}>
+                        <span>
+                            <i class="bx bx-plus" />
+                            <span>Add Knowledge Base</span>
+                        </span>
+                    </Button>
+                </div>
+            {/if}
+        </div>
+    </CardBody>
+</Card>
\ No newline at end of file