diff --git a/src/lib/common/LoadingToComplete.svelte b/src/lib/common/LoadingToComplete.svelte
index 40b7f43f..d0d520a8 100644
--- a/src/lib/common/LoadingToComplete.svelte
+++ b/src/lib/common/LoadingToComplete.svelte
@@ -5,14 +5,20 @@
     export let isLoading = false;
     export let isComplete = false;
     export let isError = false;
+    export let spinnerClasses = '';
+    export let spinnerStyles = '';
+    export let spinnerSize = 50;
 
     export let successText = 'Update completed!';
     export let errorText = 'Error!';
-    export let spinnerSize = 50;
 </script>
 
 {#if isLoading}
-    <Loader size={spinnerSize} />
+    <Loader
+        size={spinnerSize}
+        containerClasses={spinnerClasses}
+        containerStyles={spinnerStyles}
+    />
 {/if}
 
 
diff --git a/src/lib/common/shared/GlobalHeader.svelte b/src/lib/common/shared/GlobalHeader.svelte
new file mode 100644
index 00000000..d54e0c38
--- /dev/null
+++ b/src/lib/common/shared/GlobalHeader.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { globalErrorStore, loaderStore } from '$lib/helpers/store';
+
+    /** @type {boolean} */
+	export let isLoading = false;
+	export let hasError = false;
+
+	/** @type {any} */
+	let loaderUnsubscriber;
+	/** @type {any} */
+	let errorUnsubscriber;
+
+    onMount(() => {
+        window?.speechSynthesis?.cancel();
+        loaderUnsubscriber = loaderStore.subscribe(value => {
+			isLoading = value;
+		});
+
+		errorUnsubscriber = globalErrorStore.subscribe(value => {
+			hasError = value;
+		});
+    });
+
+    onDestroy(() => {
+        loaderUnsubscriber?.();
+		errorUnsubscriber?.();
+    });
+</script>
\ No newline at end of file
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 43405900..8e49d548 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -31,7 +31,7 @@ const retryQueue = {
     /** @param {{config: import('axios').InternalAxiosRequestConfig, resolve: (value: any) => void, reject: (reason?: any) => void}} item */
     enqueue(item) {
         this.queue.push(item);
-
+        console.log('queue', this.queue.length);
         if (!this.isRefreshingToken) {
             const user = getUserStore();
             if (!isTokenExired(user.expires)) {
@@ -130,7 +130,7 @@ axios.interceptors.response.use(
         loaderStore.set(false);
         const originalRequest = error?.config || {};
         const user = getUserStore();
-        console.log("renew token count.", user.renew_token_count);
+
         if (!user?.token || user.renew_token_count >= retryQueue.maxRenewTokenCount) {
             retryQueue.queue = [];
             redirectToLogin();
@@ -185,7 +185,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/create', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
         new RegExp('http(s*)://(.*?)/users', 'g'),
-        new RegExp('http(s*)://(.*?)/instruct/chat-completion', 'g'),
+        new RegExp('http(s*)://(.*?)/instruct/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-script/generate', 'g'),
         new RegExp('http(s*)://(.*?)/renew-token', 'g')
@@ -208,24 +208,30 @@ function skipLoader(config) {
 
     /** @type {RegExp[]} */
     const getRegexes = [
+        new RegExp('http(s*)://(.*?)/plugin/menu', 'g'),
         new RegExp('http(s*)://(.*?)/setting/(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/roles', 'g'),
+        new RegExp('http(s*)://(.*?)/role/options', 'g'),
+        new RegExp('http(s*)://(.*?)/role/(.*?)/details', 'g'),
+        new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
         new RegExp('http(s*)://(.*?)/user/me', 'g'),
-        new RegExp('http(s*)://(.*?)/plugin/menu', 'g'),
         new RegExp('http(s*)://(.*?)/address/options(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/agents', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/options', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/tasks', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
+        new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/llm-configs', 'g'),
         new RegExp('http(s*)://(.*?)/llm-provider/(.*?)/models', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/collections', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/exist', 'g'),
-        new RegExp('http(s*)://(.*?)/role/options', 'g'),
-        new RegExp('http(s*)://(.*?)/role/(.*?)/details', 'g'),
-        new RegExp('http(s*)://(.*?)/user/(.*?)/details', 'g'),
-        new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
-        new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
+        new RegExp('http(s*)://(.*?)/logger/instruction/log', 'g'),
         new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/content-log', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/state-log', 'g'),
-        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g'),
-        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g')
+        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g')
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {
@@ -276,7 +282,9 @@ function skipGlobalError(config) {
     ];
 
     /** @type {RegExp[]} */
-    const getRegexes = [];
+    const getRegexes = [
+        new RegExp('http(s*)://(.*?)/agents', 'g')
+    ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {
         return true;
diff --git a/src/lib/helpers/utils/common.js b/src/lib/helpers/utils/common.js
index e6170626..5a348daf 100644
--- a/src/lib/helpers/utils/common.js
+++ b/src/lib/helpers/utils/common.js
@@ -120,18 +120,19 @@ export function getPagingQueryParams(args, defaults = { defaultPageSize: 12, max
 /**
  * @param {URL} url
  * @param {import('$commonTypes').KeyValuePair[]} pairs
- * @param {() => void} [callback]
+ * @param {(args0: URL) => void} [callback]
  */
 export function setUrlQueryParams(url, pairs, callback) {
     if (!pairs?.length) {
         return;
     }
 
+    url.search = '';
     pairs?.map(p => {
         url.searchParams.set(p.key, p.value);
     });
     
-    callback?.();
+    callback?.(url);
 }
 
 /**
@@ -175,6 +176,19 @@ export function splitTextByCase(str) {
     return text;
 }
 
+/**
+ * @param {string} url
+ */
+export function getCleanUrl(url) {
+    if (!url) return url;
+
+    if (url.startsWith('/')) {
+        url = url.substring(1);
+    }
+
+    return url;
+}
+
 /**
  * @param {string} timeRange
  * @returns {{ startTime: string | null, endTime: string | null }}
diff --git a/src/lib/scss/custom/common/_common.scss b/src/lib/scss/custom/common/_common.scss
index f23a183f..e4230d5d 100644
--- a/src/lib/scss/custom/common/_common.scss
+++ b/src/lib/scss/custom/common/_common.scss
@@ -204,3 +204,17 @@ button:focus {
     text-overflow: ellipsis;
   }
 }
+
+.text-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-weight: 500;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: none;
+    background: none;
+  }
+}
\ No newline at end of file
diff --git a/src/lib/scss/custom/components/_loader.scss b/src/lib/scss/custom/components/_loader.scss
index 39c7979d..a095d4ce 100644
--- a/src/lib/scss/custom/components/_loader.scss
+++ b/src/lib/scss/custom/components/_loader.scss
@@ -1,5 +1,5 @@
 .loader {
-    position: fixed;
+    position: absolute;
     z-index: 9999;
     background-color: rgba(255, 255, 255, 0.8);
     top: 0;
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index afa4c72d..6cc4c4b1 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -1,10 +1,37 @@
 .agents-header-container {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
+    gap: 15px;
+    align-items: center;
+
+    @media (max-width: 576px) {
+        flex-direction: column;
+        justify-content: center;
+        gap: 12px;
+
+        > div {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
+    }
 
     .agent-filter {
         display: flex;
-        gap: 10px
+        flex-wrap: wrap;
+        gap: 10px;
+        align-items: center;
+
+        @media (max-width: 576px) {
+            width: 100%;
+            flex-direction: column;
+            gap: 8px;
+
+            > * {
+                width: 100%;
+            }
+        }
     }
 }
 
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index 4b6d0995..caa9e172 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -16,9 +16,10 @@ export async function getSettings() {
  * Get agent list
  * @param {import('$agentTypes').AgentFilter} filter
  * @param {boolean} checkAuth
+ * @param {AbortSignal | null} signal
  * @returns {Promise<import('$commonTypes').PagedItems<import('$agentTypes').AgentModel>>}
  */
-export async function getAgents(filter, checkAuth = false) {
+export async function getAgents(filter, checkAuth = false, signal = null) {
     let url = endpoints.agentListUrl;
     const response = await axios.get(url, {
         params: {
@@ -28,7 +29,8 @@ export async function getAgents(filter, checkAuth = false) {
         paramsSerializer: {
             dots: true,
             indexes: null,
-        }
+        },
+        signal: signal || undefined
     });
     return response.data;
 }
diff --git a/src/lib/services/role-service.js b/src/lib/services/role-service.js
index 15f40116..77033144 100644
--- a/src/lib/services/role-service.js
+++ b/src/lib/services/role-service.js
@@ -1,5 +1,6 @@
 import { endpoints } from './api-endpoints.js';
 import axios from 'axios';
+import qs from 'qs';
 
 /**
  * Get role options
@@ -17,7 +18,10 @@ export async function getRoleOptions() {
  * @returns {Promise<import('$roleTypes').RoleModel[]>}
  */
 export async function getRoles(filter = null) {
-    const response = await axios.post(endpoints.rolesUrl, filter);
+    const response = await axios.get(endpoints.rolesUrl, {
+        params: filter,
+        paramsSerializer: (params) => qs.stringify(params, { encode: false, allowDots: true, arrayFormat: "indices" })
+    });
     return response.data;
 }
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e56fb9f1..783b44c7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,6 @@
 <script>
 	import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
 	import en from '$lib/langs/en.json';
-	import '$lib/helpers/http';
-	import { onDestroy, onMount } from 'svelte';
-	import { globalErrorStore, loaderStore } from '$lib/helpers/store';
-	import Loader from '$lib/common/Loader.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 
 	addMessages('en', en);
 
@@ -13,39 +8,8 @@
 		fallbackLocale: 'en',
 		initialLocale: getLocaleFromNavigator()
 	});
-
-	/** @type {boolean} */
-	let isLoading = false;
-	let hasError = false;
-
-	/** @type {any} */
-	let loaderUnsubscriber;
-	/** @type {any} */
-	let errorUnsubscriber;
-
-	onMount(() => {
-		window?.speechSynthesis?.cancel();
-		loaderUnsubscriber = loaderStore.subscribe(value => {
-			isLoading = value;
-		});
-
-		errorUnsubscriber = globalErrorStore.subscribe(value => {
-			hasError = value;
-		});
-	})
-
-	onDestroy(() => {
-		loaderUnsubscriber?.();
-		errorUnsubscriber?.();
-	});
 </script>
 
-{#if isLoading}
-	<Loader size={50}/>
-{/if}
-
-<LoadingToComplete isError={hasError} />
-
 <slot />
 
 <style lang="scss">
diff --git a/src/routes/VerticalLayout/Index.svelte b/src/routes/VerticalLayout/Index.svelte
index 1bc6ea9a..b6beeb54 100644
--- a/src/routes/VerticalLayout/Index.svelte
+++ b/src/routes/VerticalLayout/Index.svelte
@@ -5,6 +5,8 @@
 	import { getPluginMenu } from '$lib/services/plugin-service';
 	import { myInfo } from '$lib/services/auth-service';
 	import { globalMenuStore } from '$lib/helpers/store';
+	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import GlobalHeader from '$lib/common/shared/GlobalHeader.svelte';
 	import Header from './Header.svelte';
 	import Sidebar from './Sidebar.svelte';
 	import Footer from './Footer.svelte';
@@ -15,6 +17,10 @@
 	/** @type {import("$userTypes").UserModel} */
 	let user;
 
+	/** @type {boolean} */
+	let isLoading = false;
+	let hasError = false;
+
 	const toggleRightBar = () => {
 		if (browser) {
 			if (document.body.classList.contains('right-bar-enabled')) {
@@ -39,6 +45,8 @@
 	});
 </script>
 
+<GlobalHeader bind:isLoading={isLoading} bind:hasError={hasError} />
+
 <div id="layout-wrapper">
 	<Header user={user} toggleRightBar={() => toggleRightBar()} />
 	{#if menu}
@@ -46,7 +54,12 @@
 	{/if}
 	<div class="main-content">
 		<div class="page-content">
-			<div class="container-fluid">
+			<div class="container-fluid" style="position: relative;">
+				<LoadingToComplete
+					spinnerSize={50}
+					isLoading={isLoading}
+					isError={hasError}
+				/>
 				<slot />
 			</div>
 		</div>
diff --git a/src/routes/VerticalLayout/Sidebar.svelte b/src/routes/VerticalLayout/Sidebar.svelte
index 03dbdd46..65ab4bd1 100644
--- a/src/routes/VerticalLayout/Sidebar.svelte
+++ b/src/routes/VerticalLayout/Sidebar.svelte
@@ -1,14 +1,15 @@
 <script>
-// @ts-nocheck
-
+	// @ts-nocheck
 	import { onMount, afterUpdate } from 'svelte';
-	import 'overlayscrollbars/overlayscrollbars.css';
-	import { OverlayScrollbars } from 'overlayscrollbars';
-	import Link from 'svelte-link';
-	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import { _ } from 'svelte-i18n';
+	import Link from 'svelte-link';
+	import 'overlayscrollbars/overlayscrollbars.css';
+	import { OverlayScrollbars } from 'overlayscrollbars';
 	import { globalEventStore } from '$lib/helpers/store';
+	import { getCleanUrl } from '$lib/helpers/utils/common';
 
 	/** @type {import('$pluginTypes').PluginMenuDefModel[]} */
 	export let menu;
@@ -16,9 +17,9 @@
 	// after routing complete call afterUpdate function
 	afterUpdate(() => {
 		removeActiveDropdown();
-		const curUrl = getPathUrl();
+		const curUrl = getCleanUrl($page.url.pathname);
 		if (curUrl) {
-			let item = document.querySelector(".vertical-menu a[href='" + curUrl + "']");
+			const item = document.querySelector(".vertical-menu a[id='" + curUrl + "']");
 			if (item) {
 				item.classList.add('mm-active');
 				const parent1 = item.parentElement;
@@ -62,12 +63,13 @@
 
 	onMount(async () => {
 		const menuElement = document.querySelector('#vertical-menu');
+		// @ts-ignore
 		OverlayScrollbars(menuElement, options);
 		activeMenu();
 
-		const curUrl = getPathUrl();
+		const curUrl = getCleanUrl($page.url.pathname);
 		if (curUrl) {
-			let item = document.querySelector(".vertical-menu a[href='" + curUrl + "']");
+			const item = document.querySelector(".vertical-menu a[id='" + curUrl + "']");
 			if (item) {
 				item.classList.add('mm-active');
 				item.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -183,26 +185,34 @@
 
 	const menuItemScroll = () => {
 		if (browser) {
-			const curUrl = getPathUrl();
-			let item = document.querySelector(".vertical-menu a[href='" + curUrl + "']")?.offsetTop;
-			if (item && item > 300) {
-				item = item - 300;
+			const curUrl = getCleanUrl($page.url.pathname);
+			const item = document.querySelector(".vertical-menu a[id='" + curUrl + "']");
+			// @ts-ignore
+			let offset = item?.offsetTop;
+			if (offset && offset > 300) {
+				offset = offset - 300;
 				const menuElement = document.getElementById('vertical-menu');
 				menuElement?.scrollTo({
-					top: item,
+					top: offset,
 					behavior: 'smooth'
 				});
 			}
 		}
 	};
 
-	const getPathUrl = () => {
-		const path = $page.url.pathname;
-		return path?.startsWith('/') ? path.substring(1) : path;
-	};
+	/** @param {string} url */
+	const goToPage = (url) => {
+		if (!url) {
+			return;
+		}
+
+		url = getCleanUrl(url);
+		if (url === getCleanUrl($page.url.pathname)) {
+			return;
+		}
 
-	const goToPage = () => {
 		globalEventStore.reset();
+		goto(url);
 	}
 </script>
 
@@ -217,7 +227,7 @@
 						<li class="menu-title" key="t-menu">{$_(item.label)}</li>
 					{:else if item.subMenu}
 						<li>
-							<Link href={null} class="has-arrow waves-effect">
+							<Link class="has-arrow waves-effect clickable" href={null}>
 								<i class={item.icon} />
 								<span>{$_(item.label)}</span>
 							</Link>
@@ -225,25 +235,34 @@
 								{#each item.subMenu as subMenu}
 									{#if subMenu.isChildItem}
 										<li>
-											<Link href="#" class="has-arrow waves-effect">
+											<Link class="has-arrow waves-effect clickable" href={null}>
 												<span>{$_(subMenu.label)}</span>
 											</Link>
 											<ul class="sub-menu mm-collapse">
 												{#each subMenu.childItems as childItem}
-													<li><Link href={childItem.link} on:click={() => goToPage()}>{$_(childItem.label)}</Link></li>
+													<li>
+														<Link class="clickable" id={getCleanUrl(childItem.link)} href={null} on:click={() => goToPage(childItem.link)}>
+															{$_(childItem.label)}
+														</Link>
+													</li>
 												{/each}
 											</ul>
 										</li>
 									{:else}
-										<li><Link href={subMenu.link} on:click={() => goToPage()}>{$_(subMenu.label)}</Link></li>
+										<li>
+											<Link class="clickable" id={getCleanUrl(subMenu.link)} href={null} on:click={() => goToPage(subMenu.link)}>
+												{$_(subMenu.label)}
+											</Link>
+										</li>
 									{/if}
 								{/each}
 							</ul>
 						</li>
 					{:else}
 						<li>
-							<Link class="waves-effect" href={item.link} on:click={() => goToPage()} >
-								<i class={item.icon} /> <span>{$_(item.label)}</span>
+							<Link class="waves-effect clickable" id={getCleanUrl(item.link)} href={null} on:click={() => goToPage(item.link)} >
+								<i class={item.icon} /> 
+								<span>{$_(item.label)}</span>
 							</Link>
 						</li>
 					{/if}
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 30f02cc0..3d9e8a2e 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -1,11 +1,9 @@
 <script>
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
-    import { page } from '$app/stores';
     import { onMount } from 'svelte';
+    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import { getSettingDetail } from '$lib/services/setting-service';
     import { getAgents } from '$lib/services/agent-service.js'
-    
-    const params = $page.params;
+
     /** @type {import('$agentTypes').AgentFilter} */
     const filter = {
         pager: { page: 1, size: 10, count: 0 }
diff --git a/src/routes/chat/[agentId]/+page.svelte b/src/routes/chat/[agentId]/+page.svelte
index 857aefdf..1401029c 100644
--- a/src/routes/chat/[agentId]/+page.svelte
+++ b/src/routes/chat/[agentId]/+page.svelte
@@ -2,6 +2,7 @@
     // This page is used to initialize a new conversation for client
     import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
     import { onMount } from 'svelte';
     import { newConversation } from '$lib/services/conversation-service.js';
     import { getToken, setToken } from '$lib/services/auth-service.js'
@@ -39,15 +40,16 @@
         }
 
         conversationId = conversation.id;
-        const chatUrl = new URL(`chat/${agentId}/${conversationId}`, window.location.origin);
-        
+        const path = `chat/${agentId}/${conversationId}`;
+
         const searchParams = new URLSearchParams();
         if (agentId === LEARNER_AGENT_ID) {
             searchParams.append('mode', TRAINING_MODE);
         }
 
-        chatUrl.search = searchParams?.toString();
-        window.location.href = chatUrl.toString();
+        const search = searchParams?.toString();
+        const url = search ? `${path}?${search}` : path;
+        goto(url);
     });
 </script>
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index e320a73f..bbf0a5a1 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -3,6 +3,7 @@
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
 	import Viewport from 'svelte-viewport-info';
 	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import Swal from 'sweetalert2';
 	import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
@@ -21,7 +22,7 @@
 		conversationUserStateStore,
 		conversationUserMessageStore,
 		conversationUserAttachmentStore,
-		resetStorage
+		resetStorage,
 	} from '$lib/helpers/store.js';
 	import {
 		sendMessageToHub,
@@ -73,6 +74,7 @@
 	import { realtimeChat } from '$lib/services/realtime-chat-service';
 	import { webSpeech } from '$lib/services/web-speech';
 	import { delay } from '$lib/helpers/utils/common';
+	import GlobalHeader from '$lib/common/shared/GlobalHeader.svelte';
 
 	
 	const options = {
@@ -718,10 +720,11 @@
 
 	/** @param {import('$conversationTypes').ConversationModel} conversation */
 	function redirectToNewConversation(conversation) {
-		const url = new URL(`chat/${params.agentId}/${conversation.id}`, window.location.origin);
+		const path = `chat/${params.agentId}/${conversation.id}`;
 		const searchParams = $page.url.searchParams;
-		url.search = searchParams?.toString();
-		window.location.href = url.toString();
+		const search = searchParams?.toString();
+		const url = search ? `${path}?${search}` : path;
+		goto(url);
 	}
 
 	function pinDashboard() {
@@ -1522,7 +1525,13 @@
 
 <svelte:window on:resize={() => resizeChatWindow()}/>
 
+<GlobalHeader
+	bind:isLoading={isLoading}
+	bind:hasError={isError}
+/>
+
 <LoadingToComplete
+	spinnerStyles={'position: fixed;'}
 	spinnerSize={35}
 	isLoading={isLoading}
 	isComplete={isComplete}
diff --git a/src/routes/page/+layout.svelte b/src/routes/page/+layout.svelte
index da0bf972..b707dab6 100644
--- a/src/routes/page/+layout.svelte
+++ b/src/routes/page/+layout.svelte
@@ -5,9 +5,8 @@
 </svelte:head>
 
 <script>
-	import VerticalLayout from '../VerticalLayout/Index.svelte';
-	import '$lib/helpers/http';
 	import LiveChat from '$lib/common/LiveChatEntry.svelte';
+	import VerticalLayout from '../VerticalLayout/Index.svelte';
 
 	let component = VerticalLayout;
 </script>
diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte
index 232607d2..18b07c3d 100644
--- a/src/routes/page/agent/+page.svelte
+++ b/src/routes/page/agent/+page.svelte
@@ -15,12 +15,12 @@
   	import { myInfo } from '$lib/services/auth-service';
 	import { ADMIN_ROLES } from '$lib/helpers/constants';
 	import { globalEventStore } from '$lib/helpers/store';
-	import CardAgent from './card-agent.svelte';
 	import {
 		getPagingQueryParams,
 		setUrlQueryParams,
 		goToUrl
 	} from '$lib/helpers/utils/common';
+	import CardAgent from './card-agent.svelte';
 	
 	
   	const firstPage = 1;
@@ -28,6 +28,10 @@
 
 	/** @type {boolean} */
     let isLoading = false;
+	let isPageMounted = false;
+
+	/** @type {AbortController | null | undefined} */
+	let abortController;
 
 	/** @type {import('$commonTypes').PagedItems<import('$agentTypes').AgentModel>} */
   	let agents = { items: [], count: 0 };
@@ -63,6 +67,7 @@
 	let selectedAgentLabels = [];
 
 	onMount(async () => {
+		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
 			pageSize: $page.url.searchParams.get("pageSize")
@@ -103,16 +108,23 @@
 	});
 
 	onDestroy(() => {
+		isPageMounted = false;
 		unsubscriber?.();
 	});
 
   	function getPagedAgents() {
 		isLoading = true;
+
+		if (abortController) {
+			abortController.abort();
+		}
+		abortController = new AbortController();
+
 		const innerFilter = {
 			...filter,
 			similarName: filter.similarName ? decodeURIComponent(filter.similarName) : null
 		};
-    	getAgents(innerFilter, true).then(data => {
+    	getAgents(innerFilter, true, abortController?.signal).then(data => {
 			agents = data;
 		}).catch(() => {
 			agents = { items: [], count: 0 };
@@ -187,7 +199,10 @@
 			queryParams.push({ key: 'similarName', value: encodeURIComponent(filter.similarName) });
 		}
 
-		setUrlQueryParams($page.url, queryParams, () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+		setUrlQueryParams($page.url, queryParams, (url) => {
+			if (!isPageMounted) return;
+			goToUrl(`${url.pathname}${url.search}`)
+		});
 	}
 
 	/**
@@ -228,6 +243,9 @@
 	function reset() {
 		selectedAgentTypes = [];
 		selectedAgentLabels = [];
+
+		filter = { ...initFilter };
+		getPagedAgents();
 	}
 
 	function refreshFilter() {
@@ -249,13 +267,16 @@
 
 <HeadTitle title="{$_('List')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('List')}" />
-<LoadingToComplete isLoading={isLoading} />
+
+<LoadingToComplete
+	isLoading={isLoading}
+/>
 
 <div class="agents-header-container mb-4">
 	<div>
 		{#if !!user && (ADMIN_ROLES.includes(user.role || '') || !!user.permissions?.includes(UserPermission.CreateAgent))}
 		<Button color="primary" on:click={() => createNewAgent()}>
-			<i class="bx bx-copy" /> {$_('New Agent')}
+			<i class="mdi mdi-content-copy" /> {$_('New Agent')}
 		</Button>
 		{/if}
 	</div>
@@ -290,10 +311,10 @@
 			<i class="mdi mdi-magnify" />
 		</Button>
 		<Button
-			class="btn btn-light"
+			class="btn btn-warning"
 			data-bs-toggle="tooltip"
 			data-bs-placement="bottom"
-			title="Reset filters"
+			title="Reset"
 			on:click={(e) => reset()}
 		>
 			<i class="mdi mdi-restore" />
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 7b1e4d3f..41313b85 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -39,20 +39,29 @@
     let isComplete = false;
 
     const duration = 3000;
-    const params = $page.params;
 
-    onMount(async () => {
+    $: agentId = $page.params.agentId;
+
+    $: if (agentId) {
+        loadAgent(agentId);
+    }
+
+    async function loadAgent(/** @type {string} */ id) {
         isLoading = true;
-        user = await myInfo();
-        agent = await getAgent(params.agentId);
+        agent = await getAgent(id);
         isLoading = false;
+    }
+
+    onMount(async () => {
+        user = await myInfo();
 
         unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
 			if (event.name !== GlobalEvent.Search) return;
 
             const similarName = event.payload?.trim();
             if (similarName) {
-                window.location.href = `/page/agent?page=${1}&pageSize=${12}&similarName=${encodeURIComponent(similarName)}`;
+                const url = `page/agent?page=${1}&pageSize=${12}&similarName=${encodeURIComponent(similarName)}`;
+                window.location.href = url;
             }
 		});
     });
@@ -183,7 +192,11 @@
 
 <HeadTitle title="{$_('Agent Overview')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Agent Overview')}" />
-<LoadingToComplete isLoading={isLoading} isComplete={isComplete} />
+
+<LoadingToComplete
+    isLoading={isLoading}
+    isComplete={isComplete}
+/>
 
 {#if agent}
 <div>
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index da5689d0..2744e2a8 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -266,7 +266,13 @@
 
 <svelte:window on:resize={() => resizeWindow()}/>
 
-<LoadingToComplete {isLoading} {isComplete} {isError} {successText} {errorText} />
+<LoadingToComplete
+    {isLoading}
+    {isComplete}
+    {isError}
+    {successText}
+    {errorText}
+/>
 
 <Card>
     <CardBody>
diff --git a/src/routes/page/agent/[agentId]/build/+page.svelte b/src/routes/page/agent/[agentId]/build/+page.svelte
index fe412165..31b4a078 100644
--- a/src/routes/page/agent/[agentId]/build/+page.svelte
+++ b/src/routes/page/agent/[agentId]/build/+page.svelte
@@ -1,20 +1,28 @@
 <script>
+	import { onMount } from 'svelte';
 	import { Svelvet, ThemeToggle, Group } from 'svelvet';
+	import { page } from '$app/stores';
+	import { getAgent } from '$lib/services/agent-service.js';
 	import Thickness from './components/Thickness.svelte';
 	import AzureOpenAI from './components/LlmProviders/AzureOpenAI.svelte';
 	import Agent from './components/Agent.svelte';
-	import { page } from '$app/stores';
-	import { getAgent } from '$lib/services/agent-service.js';
-	import { onMount } from 'svelte';
 
+	/** @type {number} */
 	let zoom = 0.8;
-	const params = $page.params;
 
-    /** @type {import('$agentTypes').AgentModel} */
-    let agent;	
-	onMount(async () => {
-		agent = await getAgent(params.agentId);
-	});
+	/** @type {import('$agentTypes').AgentModel} */
+    let agent;
+
+	$: agentId = $page.params.agentId;
+	$: if (agentId) {
+		loadAgent(agentId);
+	}
+    	
+	onMount(async () => {});
+
+	async function loadAgent(/** @type {string} */ id) {
+		agent = await getAgent(id);
+	}
 </script>
 
 <div id="svelet-agent-build">
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
index 9a0bcd77..6eb6f8dc 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -1,14 +1,24 @@
 <script>
-  import Link from "svelte-link";
-  import { Badge, Card, CardBody, Col } from '@sveltestrap/sveltestrap';
-  import { utcToLocal } from '$lib/helpers/datetime';
+  import { goto } from '$app/navigation';
   import { _ } from 'svelte-i18n';
+  import { Badge, Button, Card, CardBody, Col } from '@sveltestrap/sveltestrap';
+  import { utcToLocal } from '$lib/helpers/datetime';
 	import { LEARNER_AGENT_ID } from "$lib/helpers/constants";
 	import { AgentExtensions } from "$lib/helpers/utils/agent";
+	import { globalEventStore } from '$lib/helpers/store';
 
   /** @type {import('$agentTypes').AgentModel[]} */
   export let agents;
 
+  /**
+	 * @param {string} url
+	 */
+  function goToPage(url) {
+    if (!url) return;
+    
+    globalEventStore.reset();
+    goto(url);
+  }
 </script>
 
 {#each agents as agent}
@@ -29,9 +39,9 @@
           <div class="flex-grow-1 overflow-hidden">
             <div class="agent-card-header">
               <h5 class="text-truncate font-size-15 line-align-center mb-0">
-                <Link href= "page/agent/{agent.id}" class="text-dark">
+                <Button class="text-dark text-btn font-size-15" on:click={() => goToPage(`page/agent/${agent.id}`)}>
                   {agent.name}
-                </Link>
+                </Button>
               </h5>
               {#if agent.is_router}
               <div
@@ -40,9 +50,9 @@
                 data-bs-placement="bottom"
                 title="Go to flowchart"
               >
-                <Link href={`page/agent/router?agent_id=${agent.id}`} target="_blank">
+                <Button class="text-dark text-btn font-size-15" on:click={() => goToPage(`page/agent/router?agent_id=${agent.id}`)}>
                   <i class="mdi mdi-sitemap" />
-                </Link>
+                </Button>
               </div>
               {/if}
             </div>
@@ -102,20 +112,20 @@
             {utcToLocal(agent.updated_datetime, 'MMM D, YYYY')}
           </li>
           <li class="list-inline-item me-1 mt-1 mb-1">
-            <Link href="page/agent/{agent.id}/build" class="btn btn-primary btn-sm" target="_blank" disabled>
+            <Button class="btn btn-primary btn-sm" on:click={() => goToPage(`page/agent/${agent.id}/build`)} disabled>
               <i class="bx bx-wrench" /> {$_('Build')}
-            </Link>
+            </Button>
           </li>
           {#if agent.is_public }      
           <li class="list-inline-item me-1 mt-1 mb-1">
-            <Link href={`/chat/${LEARNER_AGENT_ID}`} class="btn btn-primary btn-sm" target="_blank" disabled>
+            <Button class="btn btn-primary btn-sm" on:click={() => goToPage(`chat/${LEARNER_AGENT_ID}`)} disabled>
               <i class="bx bx-book-open" /> {$_('Train')}
-            </Link>
+            </Button>
           </li>
           <li class="list-inline-item me-1 mt-1 mb-1">
-            <Link href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank" disabled={!AgentExtensions.chatable(agent)}>
+            <Button class="btn btn-primary btn-sm" color="primary" on:click={() => goToPage(`chat/${agent.id}`)} disabled={!AgentExtensions.chatable(agent)}>
               <i class="bx bx-chat" /> {$_('Test')}
-            </Link>
+            </Button>
           </li>
           {/if}
         </ul>
diff --git a/src/routes/page/agent/code-scripts/+page.svelte b/src/routes/page/agent/code-scripts/+page.svelte
index 61009801..8e5a3c93 100644
--- a/src/routes/page/agent/code-scripts/+page.svelte
+++ b/src/routes/page/agent/code-scripts/+page.svelte
@@ -174,7 +174,12 @@
 
 <HeadTitle title="{$_('Code Scripts')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Code Scripts')}" />
-<LoadingToComplete {isLoading} {isComplete} {isError} />
+
+<LoadingToComplete
+    {isLoading}
+    {isComplete}
+    {isError}
+/>
 
 <Card>
     <CardBody class="border-bottom">
@@ -196,34 +201,34 @@
 </Card>
 
 {#if !!selectedAgentId}
-<ScriptEditor
-    title={'Source scripts'}
-    scriptType={AgentCodeScriptType.Src}
-    bind:scriptObj={srcScriptObj}
-/>
-<ScriptEditor
-    title={'Test scripts'}
-    scriptType={AgentCodeScriptType.Test}
-    bind:scriptObj={testScriptObj}
-/>
-
-{#if ADMIN_ROLES.includes(user?.role || '')}
-<Row>
-    <div class="hstack gap-2 my-4">
-        <Button
-            class="btn btn-soft-primary"
-            disabled={!selectedAgentId}
-            on:click={() => saveCodeScripts()}
-        >
-            {$_('Save')}
-        </Button>
-        <Button
-            class="btn btn-warning"
-            disabled={!selectedAgentId}
-            on:click={() => resetCodeScripts()}>
-            {$_('Reset')}
-        </Button>
-    </div>
-</Row>
-{/if}
-{/if}
+    <ScriptEditor
+        title={'Source scripts'}
+        scriptType={AgentCodeScriptType.Src}
+        bind:scriptObj={srcScriptObj}
+    />
+    <ScriptEditor
+        title={'Test scripts'}
+        scriptType={AgentCodeScriptType.Test}
+        bind:scriptObj={testScriptObj}
+    />
+
+    {#if ADMIN_ROLES.includes(user?.role || '')}
+    <Row>
+        <div class="hstack gap-2 my-4">
+            <Button
+                class="btn btn-soft-primary"
+                disabled={!selectedAgentId}
+                on:click={() => saveCodeScripts()}
+            >
+                {$_('Save')}
+            </Button>
+            <Button
+                class="btn btn-warning"
+                disabled={!selectedAgentId}
+                on:click={() => resetCodeScripts()}>
+                {$_('Reset')}
+            </Button>
+        </div>
+    </Row>
+    {/if}
+{/if}
\ No newline at end of file
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 6b1908dd..2b82852f 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -40,6 +40,7 @@
 	let isLoading = false;
 	let isComplete = false;
 	let showStateSearch = false;
+	let isPageMounted = false;
 
     /** @type {import('$commonTypes').PagedItems<import('$conversationTypes').ConversationModel>} */
     let conversations = { count: 0, items: [] };
@@ -101,6 +102,7 @@
     ];
 
     onMount(async () => {
+		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
 			pageSize: $page.url.searchParams.get("pageSize")
@@ -187,7 +189,10 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+		], (url) => {
+			if (!isPageMounted) return;
+			goToUrl(`${url.pathname}${url.search}`);
+		});
 	}
 
 	/** @param {number} pageNum */
@@ -414,7 +419,12 @@
 
 <HeadTitle title="{$_('Conversation List')}" />
 <Breadcrumb title="{$_('Communication')}" pagetitle="{$_('Conversations')}" />
-<LoadingToComplete isLoading={isLoading} isComplete={isComplete} successText={'Delete completed!'} />
+
+<LoadingToComplete
+	isLoading={isLoading}
+	isComplete={isComplete}
+	successText={'Delete completed!'}
+/>
 
 <Row>
 	<Col lg="12">
@@ -466,16 +476,6 @@
 							on:select={e => changeOption(e, 'agent')}
 						/>
 					</Col>
-					<!-- <Col lg="2">
-						<Select
-							tag={'task-select'}
-							placeholder={'Select Task'}
-							selectedText={'task'}
-							selectedValues={[]}
-							options={[]}
-							on:select={e => changeOption(e, 'task')}
-						/>
-					</Col>					 -->
 					<Col lg="2">
 						<Select
 							tag={'task-select'}
diff --git a/src/routes/page/conversation/[conversationId]/+page.svelte b/src/routes/page/conversation/[conversationId]/+page.svelte
index 30c6813c..d1071cf8 100644
--- a/src/routes/page/conversation/[conversationId]/+page.svelte
+++ b/src/routes/page/conversation/[conversationId]/+page.svelte
@@ -1,23 +1,35 @@
 <script>
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
+    import Swal from 'sweetalert2';
+    import { _ } from 'svelte-i18n';
     import { Col, Row, Button } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
-    import Dialog from './conv-dialogs.svelte';
+    import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+    import { getConversation, deleteConversation, getDialogs } from '$lib/services/conversation-service.js';
     import Overview from './conv-overview.svelte'
     import States from './conv-states.svelte';
-    import { getConversation, deleteConversation } from '$lib/services/conversation-service.js';
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores';
-    import Swal from 'sweetalert2'
-    import { _ } from 'svelte-i18n'  
+    import Dialog from './conv-dialogs.svelte';
 
     const params = $page.params;
+    const dialogCount = 100;
+
+    let isLoading = false;
 
     /** @type {import('$conversationTypes').ConversationModel} */
     let conversation;
 
+    /** @type {import('$conversationTypes').ChatResponseModel[]} */
+    let dialogs = [];
+
+
     onMount(async () => {
+        isLoading = true;
         conversation = await getConversation(params.conversationId, true);
+        isLoading = false;
+        dialogs = await getDialogs(conversation.id, dialogCount);
     });  
 
     function handleConversationDeletion() {
@@ -32,7 +44,7 @@
         }).then(async (result) => {
             if (result.value) {
                 await deleteConversation(conversation.id);
-                window.location.href = "page/conversation";
+                goto("page/conversation");
             }
         });
     }
@@ -42,24 +54,26 @@
 <HeadTitle title={conversation?.title || 'Not found'} />
 <Breadcrumb title="{$_('Conversation')}" pagetitle="{$_('Conversation Detail')}" />
 
+<LoadingToComplete {isLoading} />
+
 {#if conversation}
-<Row>
-    <Col style="flex: 40%;">
-        <Overview conversation={conversation} />
-        <States conversation={conversation} />
-    </Col>
-    <Col style="flex: 60%;">
-        <Dialog conversation={conversation} />        
-    </Col>
-</Row>
-<Row>
-    <div class="mb-4">
-        <Button
-            class="btn btn-danger btn-hover rounded"
-            on:click={() => handleConversationDeletion()}
-        >
-            <i class="mdi mdi-delete"></i>{$_('Delete Conversation')}
-        </Button>
-    </div>
-</Row>
-{/if}
+    <Row>
+        <Col style="flex: 40%;">
+            <Overview {conversation} />
+            <States {conversation} />
+        </Col>
+        <Col style="flex: 60%;">
+            <Dialog {conversation} {dialogs} />
+        </Col>
+    </Row>
+    <Row>
+        <div class="mb-4">
+            <Button
+                class="btn btn-danger btn-hover rounded"
+                on:click={() => handleConversationDeletion()}
+            >
+                <i class="mdi mdi-delete"></i>{$_('Delete Conversation')}
+            </Button>
+        </div>
+    </Row>
+{/if}
\ No newline at end of file
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
index 9af47d5c..35103396 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
@@ -3,7 +3,7 @@
     import { _ } from 'svelte-i18n' 
     import util from "lodash";
     import { Card, CardBody, CardTitle, Col, Row } from '@sveltestrap/sveltestrap';
-    import { getDialogs, getConversationFiles, sendNotification } from '$lib/services/conversation-service.js';
+    import { getConversationFiles, sendNotification } from '$lib/services/conversation-service.js';
     import { utcToLocal } from '$lib/helpers/datetime';
 	import { IMAGE_DATA_PREFIX, BOT_SENDERS } from '$lib/helpers/constants';
 	import MessageFileGallery from '$lib/common/MessageFileGallery.svelte';
@@ -14,10 +14,6 @@
 
     const maxTextLength = 4096;
     const duration = 1500;
-    const dialogCount = 100;
-
-    /** @type {import('$conversationTypes').ChatResponseModel[]} */
-    let dialogs = [];
 
     /** @type {boolean} */
     let isOpenNotificationModal = false;
@@ -29,9 +25,8 @@
     /** @type {import('$conversationTypes').ConversationModel} */
     export let conversation;
 
-    onMount(async () => {
-        dialogs = await getDialogs(conversation.id, dialogCount);
-    });
+    /** @type {import('$conversationTypes').ChatResponseModel[]} */
+    export let dialogs = [];
 
     /** 
      * @param {import('$conversationTypes').ChatResponseModel} dialog
@@ -69,7 +64,10 @@
     }
 </script>
 
-<LoadingToComplete isComplete={isComplete} successText={'Notification sent!'} />
+<LoadingToComplete
+    isComplete={isComplete}
+    successText={'Notification sent!'}
+/>
 
 <DialogModal
     title={'Notification'}
diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index d5f5c891..db07794b 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -23,11 +23,11 @@
 	import { TimeRange } from '$lib/helpers/enums';
 	import { TIME_RANGE_OPTIONS } from '$lib/helpers/constants';
 	import LogItem from './log-item.svelte';
-	
 
     const firstPage = 1;
 	const pageSize = 15;
     let isLoading = false;
+	let isPageMounted = false;
 
     const initPager = { page: firstPage, size: pageSize };
 
@@ -82,6 +82,7 @@
     ];
 
     onMount(async () => {
+		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
 			pageSize: $page.url.searchParams.get("pageSize")
@@ -179,7 +180,10 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+		], (url) => {
+			if (!isPageMounted) return;
+			goToUrl(`${url.pathname}${url.search}`);
+		});
 	}
 
     /**
@@ -291,6 +295,7 @@
 
 <HeadTitle title="{$_('Instruction Log')}" />
 <Breadcrumb pagetitle="{$_('Log')}" title="{$_('Instruction')}"/>
+
 <LoadingToComplete isLoading={isLoading} />
 
 <Row>
@@ -407,9 +412,7 @@
 						</thead>
 						<tbody>
 							{#each logItems as item, idx (idx)}
-                                <LogItem
-                                    item={item}
-                                />
+                                <LogItem item={item} />
                             {/each}
 						</tbody>
 					</Table>
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index e2d633d8..31404774 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -209,10 +209,15 @@
 
 <HeadTitle title="{$_('Instruction')}" />
 <Breadcrumb pagetitle="{$_('Testing')}" title="{$_('Instruction')}"/>
-<LoadingToComplete isLoading={isLoading} isError={isError} errorText={errorText} />
+
+<LoadingToComplete
+    isLoading={isLoading}
+    isError={isError}
+    errorText={errorText}
+/>
 
 <div class="d-xl-flex">
-	<div class="w-100">
+    <div class="w-100">
         <div class="instruction-container mb-4">
             <textarea
                 class='form-control knowledge-textarea'
@@ -276,7 +281,7 @@
 </div>
 
 <div class="d-xl-flex mt-4 mb-5">
-	<div class="w-100">
+    <div class="w-100">
         <Row>
             <Col lg="7">
                 <div class="instruct-text-header text-primary fw-bold mb-2">
diff --git a/src/routes/page/knowledge-base/documents/+page.svelte b/src/routes/page/knowledge-base/documents/+page.svelte
index 5469f3a1..744be0fa 100644
--- a/src/routes/page/knowledge-base/documents/+page.svelte
+++ b/src/routes/page/knowledge-base/documents/+page.svelte
@@ -24,7 +24,10 @@
 		deleteAllVectorKnowledgeData,
 		createVectorCollection,
 		createVectorIndexes,
-		deleteVectorIndexes
+		deleteVectorIndexes,
+
+		getVectorCollectionDetails
+
     } from '$lib/services/knowledge-base-service';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
     import HeadTitle from '$lib/common/HeadTitle.svelte';
@@ -64,6 +67,9 @@
     /** @type {string} */
     let selectedCollection;
 
+	/** @type {import('$knowledgeTypes').VectorCollectionDetails | null} */
+	let collectionDetails = null;
+
 	/** @type {import('$knowledgeTypes').KnowledgeSearchViewModel[]} */
 	let items = [];
 
@@ -159,15 +165,18 @@
 	function initData() {
 		isLoading = true;
     	getCollections().then(() => {
-			Promise.all([
-				getData({
-					...defaultParams,
-					isReset: true,
-					skipLoader: true,
-					filterGroups: innerSearchGroups,
-					sort: null
-				})
-			]).finally(() => isLoading = false);
+			if (selectedCollection) {
+				Promise.all([
+					getCollectionDetail(),
+					getData({
+						...defaultParams,
+						isReset: true,
+						skipLoader: true,
+						filterGroups: innerSearchGroups,
+						sort: null
+					})
+				]).finally(() => isLoading = false);
+			}
 		}).finally(() => {
 			isLoading = false;
 		});
@@ -395,6 +404,18 @@
 		});
 	}
 
+	function getCollectionDetail() {
+		return new Promise((resolve, reject) => {
+			getVectorCollectionDetails(selectedCollection).then(res => {
+				collectionDetails = res || null;
+				resolve(collectionDetails);
+			}).catch(err => {
+				collectionDetails = null;
+				resolve(collectionDetails);
+			});
+		});
+	}
+
 	/**
 	 * @param {{
 	 * startId: string | null,
diff --git a/src/routes/page/knowledge-base/question-answer/+page.svelte b/src/routes/page/knowledge-base/question-answer/+page.svelte
index 31283602..42412c38 100644
--- a/src/routes/page/knowledge-base/question-answer/+page.svelte
+++ b/src/routes/page/knowledge-base/question-answer/+page.svelte
@@ -158,16 +158,18 @@
 	function initData() {
 		isLoading = true;
     	getCollections().then(() => {
-			Promise.all([
-				getCollectionDetail(),
-				getData({
-					...defaultParams,
-					isReset: true,
-					skipLoader: true,
-					filterGroups: innerSearchGroups,
-					sort: null
-				})
-			]).finally(() => isLoading = false);
+			if (selectedCollection) {
+				Promise.all([
+					getCollectionDetail(),
+					getData({
+						...defaultParams,
+						isReset: true,
+						skipLoader: true,
+						filterGroups: innerSearchGroups,
+						sort: null
+					})
+				]).finally(() => isLoading = false);
+			}
 		}).finally(() => {
 			isLoading = false;
 		});
diff --git a/src/routes/page/plugin/+page.svelte b/src/routes/page/plugin/+page.svelte
index afc1e75c..f3193051 100644
--- a/src/routes/page/plugin/+page.svelte
+++ b/src/routes/page/plugin/+page.svelte
@@ -18,6 +18,7 @@
 
 	const firstPage = 1;
 	const pageSize = 12;
+	let isPageMounted = false;
 
 	/** @type {import('$commonTypes').PagedItems<import('$pluginTypes').PluginDefModel>} */
     let plugins = { items: [], count: 0 };
@@ -37,6 +38,7 @@
 	let unsubscriber;
 
     onMount(async () => {
+		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
 			pageSize: $page.url.searchParams.get("pageSize")
@@ -70,6 +72,7 @@
     });
 
 	onDestroy(() => {
+		isPageMounted = false;
 		unsubscriber?.();
 	});
 
@@ -106,7 +109,10 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+		], (url) => {
+			if (!isPageMounted) return;
+			goToUrl(`${url.pathname}${url.search}`);
+		});
 	}
 
 	/**
diff --git a/src/routes/page/roles/+page.svelte b/src/routes/page/roles/+page.svelte
index 0923e8b9..d9f80314 100644
--- a/src/routes/page/roles/+page.svelte
+++ b/src/routes/page/roles/+page.svelte
@@ -147,8 +147,13 @@
 
 <HeadTitle title="{$_('Role List')}" />
 <Breadcrumb title="{$_('Management')}" pagetitle="{$_('Roles')}" />
-<LoadingToComplete isLoading={isLoading} isComplete={isComplete} isError={isError} successText={successText} errorText={errorText} />
-
+<LoadingToComplete
+	isLoading={isLoading}
+	isComplete={isComplete}
+	isError={isError}
+	successText={successText}
+	errorText={errorText}
+/>
 
 <Row>
 	<Col lg="12">
diff --git a/src/routes/page/setting/+page.svelte b/src/routes/page/setting/+page.svelte
index b797baba..15203b40 100644
--- a/src/routes/page/setting/+page.svelte
+++ b/src/routes/page/setting/+page.svelte
@@ -94,6 +94,7 @@
 
 <HeadTitle title="{$_('Settings')}" />
 <Breadcrumb title="{$_('Settings')}" pagetitle="{$_('Detail')}" />
+
 <LoadingToComplete
     isLoading={isLoading}
     isComplete={isComplete}
diff --git a/src/routes/page/task/+page.svelte b/src/routes/page/task/+page.svelte
index 0943cd95..bfe94940 100644
--- a/src/routes/page/task/+page.svelte
+++ b/src/routes/page/task/+page.svelte
@@ -71,7 +71,9 @@
 	));
 
     onMount(async () => {
+		isLoading = true;
 		await getPagedAgentTasks();
+		isLoading = false;
 
 		const scrollElements = document.querySelectorAll('.scrollbar');
 		scrollElements.forEach((item) => {
@@ -80,7 +82,7 @@
     });
 
 	async function getPagedAgentTasks() {
-		tasks = await getAgentTasks( filter);
+		tasks = await getAgentTasks(filter);
 		refresh();
 	}
 
@@ -120,13 +122,6 @@
 		getPagedAgentTasks();
 	}
 
-
-	async function reloadConversations() {
-		filter = { ...initFilter };
-		tasks = await getAgentTasks(filter);
-		refreshPager(tasks.count);
-	}
-
 	/**
 	 * @param {any} e
 	 */
@@ -260,7 +255,11 @@
 
 <HeadTitle title="{$_('Task List')}" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Task')}" />
-<LoadingToComplete isLoading={isLoading} isComplete={isComplete} />
+
+<LoadingToComplete
+	isLoading={isLoading}
+	isComplete={isComplete}
+/>
 
 <Row>
 	<Col lg="12">
diff --git a/src/routes/page/users/+page.svelte b/src/routes/page/users/+page.svelte
index 7b708bff..6ef1427c 100644
--- a/src/routes/page/users/+page.svelte
+++ b/src/routes/page/users/+page.svelte
@@ -38,6 +38,7 @@
     let isLoading = false;
 	let isComplete = false;
 	let isError = false;
+	let isPageMounted = false;
     let successText = 'User has been updated!';
     let errorText = 'Failed to update user!';
 
@@ -67,6 +68,7 @@
 	};
 
     onMount(async () => {
+		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
 			pageSize: $page.url.searchParams.get("pageSize")
@@ -95,6 +97,7 @@
     });
 
 	onDestroy(() => {
+		isPageMounted = false;
 		unsubscriber?.();
 	});
 
@@ -159,7 +162,10 @@
 		setUrlQueryParams($page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
-		], () => goToUrl(`${$page.url.pathname}${$page.url.search}`));
+		], (url) => {
+			if (!isPageMounted) return;
+			goToUrl(`${url.pathname}${url.search}`);
+		});
 	}
 
     function search() {
@@ -232,8 +238,14 @@
 
 <HeadTitle title="{$_('User List')}" />
 <Breadcrumb title="{$_('Management')}" pagetitle="{$_('Users')}" />
-<LoadingToComplete isLoading={isLoading} isComplete={isComplete} isError={isError} successText={successText} errorText={errorText} />
 
+<LoadingToComplete
+	isLoading={isLoading}
+	isComplete={isComplete}
+	isError={isError}
+	successText={successText}
+	errorText={errorText}
+/>
 
 <Row>
 	<Col lg="12">